/* Trainer portal (/training/*) — deliberately CRIMSON, where the client
   portal is teal and the admin panel is grey/dark. The whole point is that
   a trainer glancing at a shared office computer can tell instantly which
   area (and whose account) they're looking at. Loaded alongside admin.css,
   which still supplies the generic form/table/button chrome; everything
   here is the trainer-only shell and its own components (.tp-*). */

:root {
    --tp-crimson: #b3122f;
    --tp-crimson-dark: #8d0e25;
    --tp-crimson-tint: #fdecef;
    --tp-ink: #1f2733;
    --tp-navy: #0b1825;
    --tp-muted: #5b6573;
    --tp-line: #e4e8ee;
    --tp-bg: #f6f7f9;
}

body {
    font-family: 'Figtree', system-ui, -apple-system, "Segoe UI", sans-serif;
    margin: 0;
    color: var(--tp-ink);
    background: var(--tp-bg);
}

/* --- Header ------------------------------------------------------------- */

.tp-header {
    background: linear-gradient(100deg, var(--tp-crimson) 0%, var(--tp-crimson-dark) 100%);
    border-bottom: 3px solid rgba(0, 0, 0, .18);
    /* Stays put on scroll, e.g. on My Schedule's long 4-week table, so
       whose account is signed in (and the logout button) is always in
       reach. z-index keeps it above the page content, and the modal
       dialog/backdrop above IT (see .tp-modal in this same file). */
    position: sticky;
    top: 0;
    z-index: 20;
}

.tp-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.85rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.tp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    text-decoration: none;
}

.tp-brand svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: .9;
}

.tp-brand-logo {
    display: block;
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

.tp-brand-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, .38);
}

.tp-brand-name {
    font-family: 'Kanit', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
}

.tp-brand-sub {
    display: block;
    font-family: 'Figtree', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    opacity: .8;
    white-space: nowrap;
}

.tp-header-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.tp-whoami {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.tp-whoami svg {
    width: 15px;
    height: 15px;
    opacity: .85;
}

.tp-logout-btn {
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.tp-logout-btn:hover {
    background: rgba(255, 255, 255, .16);
}

/* --- Page shell --------------------------------------------------------- */

.tp-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.tp-main h1 {
    margin: 0 0 0.35rem;
    font-family: 'Kanit', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--tp-navy);
}

.tp-main h2 {
    margin: 2rem 0 0.75rem;
    font-family: 'Kanit', sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--tp-navy);
}

.tp-lede {
    margin: 0 0 1.5rem;
    color: var(--tp-muted);
    font-size: 0.95rem;
}

.tp-crumbs {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    color: var(--tp-muted);
}

.tp-crumbs a {
    color: var(--tp-crimson);
    font-weight: 600;
    text-decoration: none;
}

.tp-crumbs a:hover {
    text-decoration: underline;
}

.tp-card {
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
    padding: 1.35rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
}

/* --- Dashboard tiles ---------------------------------------------------- */

.tp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.tp-stat {
    background: #fff;
    border: 1px solid var(--tp-line);
    border-left: 4px solid var(--tp-crimson);
    border-radius: 10px;
    padding: 1rem 1.15rem;
}

.tp-stat-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tp-muted);
}

.tp-stat-value {
    display: block;
    margin-top: 0.3rem;
    font-family: 'Kanit', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--tp-navy);
}

.tp-stat-value small {
    display: block;
    font-family: 'Figtree', sans-serif;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--tp-muted);
}

/* A stat tile carrying a first-time-client appointment — blocked out with
   the same navy used for the "New client" badge so it visually stands out
   from the plain crimson-accented tiles around it. */
.tp-stat--highlight {
    background: var(--tp-navy);
    border-color: var(--tp-navy);
}

.tp-stat--highlight .tp-stat-label,
.tp-stat--highlight .tp-stat-value,
.tp-stat--highlight .tp-stat-value small {
    color: #fff;
}

.tp-stat--highlight .tp-badge--new {
    background: #fff;
    color: var(--tp-navy);
}

.tp-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.tp-tile {
    display: block;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
    color: var(--tp-ink);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.tp-tile:hover {
    border-color: var(--tp-crimson);
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 26px rgba(16, 24, 40, .09);
}

.tp-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.85rem;
    border-radius: 11px;
    background: var(--tp-crimson-tint);
    color: var(--tp-crimson);
}

.tp-tile-icon svg {
    width: 20px;
    height: 20px;
}

.tp-tile-name {
    display: block;
    margin-bottom: 0.3rem;
    font-family: 'Kanit', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--tp-navy);
}

.tp-tile-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--tp-muted);
}

/* --- Tables (schedule grid, time-off lists) ----------------------------- */

.tp-main table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.9rem;
}

.tp-main thead th {
    background: #f1f3f6;
    padding: 0.6rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--tp-muted);
    text-align: left;
    border-bottom: 1px solid var(--tp-line);
}

.tp-main tbody th,
.tp-main tbody td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: top;
}

.tp-main tbody th {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tp-muted);
    white-space: nowrap;
    text-align: left;
}

/* Schedule grid cell states — kept deliberately neutral/red so they don't
   compete with the crimson shell for attention. */
.tp-slot-booked {
    background: #eef2f7;
}

.tp-slot-booked a {
    color: var(--tp-navy);
    font-weight: 700;
    text-decoration: none;
}

.tp-slot-booked a:hover {
    text-decoration: underline;
}

.tp-slot-noshow {
    background: var(--tp-crimson-tint);
}

.tp-slot-noshow-label {
    color: var(--tp-crimson);
    font-weight: 700;
}

.tp-slot-empty {
    color: #c9ced6;
}

.tp-scroll {
    overflow-x: auto;
}

/* --- Forms / buttons in the trainer shell ------------------------------- */

.tp-btn {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 9px;
    background: var(--tp-crimson);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}

.tp-btn:hover {
    background: var(--tp-crimson-dark);
}

.tp-btn-ghost {
    background: transparent;
    border: 1px solid var(--tp-line);
    color: var(--tp-muted);
    padding: 0.35rem 0.7rem;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.tp-btn-ghost:hover {
    border-color: var(--tp-crimson);
    color: var(--tp-crimson);
}

/* Rounded pill links (e.g. My Schedule's "Dashboard" / "Previous week" row) —
   same look as the site's other rounded pill buttons (sched-btn, cp-quick-link). */
.tp-pillbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.5rem;
}

.tp-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem; /* a real touch target, not just the text height */
    box-sizing: border-box;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--tp-line);
    color: var(--tp-ink, #1c2736);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(16, 23, 34, 0.08);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

/* Phone: bigger text and more room per pill, and each one takes the full
   width so a row of them reads as a tappable list instead of a cramped strip. */
@media (max-width: 640px) {
    .tp-pillbar {
        flex-direction: column;
        gap: 0.55rem;
    }
    .tp-pill {
        width: 100%;
        justify-content: center;
        min-height: 3rem;
        padding: 0.7rem 1.2rem;
        font-size: 0.95rem;
    }
}

.tp-pill:hover,
.tp-pill:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 23, 34, 0.16);
    border-color: var(--tp-crimson);
    color: var(--tp-crimson);
    outline: none;
}

/* "Uitleg" (the explanation link) stands out as a filled pill, not just an outline */
.tp-pill-info {
    background: var(--tp-crimson);
    border-color: var(--tp-crimson);
    color: #fff;
}

.tp-pill-info:hover,
.tp-pill-info:focus-visible {
    background: var(--tp-crimson-dark);
    border-color: var(--tp-crimson-dark);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .tp-pill { transition: none; }
    .tp-pill:hover { transform: none; }
}

.tp-alert {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.9rem;
    border-radius: 9px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.tp-alert--error {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8f2c22;
}

.tp-alert--ok {
    background: #e8f7f4;
    border: 1px solid #a9ddd3;
    color: #14624f;
}

.tp-form label {
    display: block;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--tp-ink);
}

.tp-form label em {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 400;
    font-style: normal;
    color: var(--tp-muted);
}

.tp-form input[type="date"],
.tp-form input[type="time"],
.tp-form input[type="text"],
.tp-form input[type="email"],
.tp-form input[type="password"],
.tp-form input[type="number"] {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-top: 0.3rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--tp-line);
    border-radius: 9px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--tp-ink);
}

.tp-form input:focus {
    outline: none;
    border-color: var(--tp-crimson);
    box-shadow: 0 0 0 3px rgba(179, 18, 47, .12);
}

@media (max-width: 640px) {
    .tp-header-inner {
        padding: 0.75rem 1rem;
    }
    .tp-main {
        padding: 1.5rem 1rem 3rem;
    }
    .tp-whoami {
        font-size: 0.75rem;
    }
}

/* --- Pay status badges (My Hours & Pay) --------------------------------- */

.tp-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.tp-badge--open {
    background: #fdecea;
    color: #8f2c22;
}

.tp-badge--paid {
    background: #e8f7f4;
    color: #14624f;
}

.tp-badge--new {
    background: var(--tp-navy);
    color: #fff;
}

/* --- Tabs (My Hours & Pay) ----------------------------------------------- */

.tp-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--tp-line);
    margin: 0 0 1.5rem;
}

.tp-tab {
    display: inline-block;
    padding: 0.65rem 1rem;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent;
    color: var(--tp-muted);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
}

.tp-tab:hover {
    color: var(--tp-crimson);
}

.tp-tab--active {
    color: var(--tp-crimson);
    border-bottom-color: var(--tp-crimson);
}

/* --- Progress bar (Certification debt) ------------------------------------ */

.tp-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--tp-line);
    overflow: hidden;
    margin: 0.5rem 0;
}

.tp-progress-bar {
    height: 100%;
    background: var(--tp-crimson);
    border-radius: 999px;
}

/* --- 4-week heatmap (My Schedule) ---------------------------------------- */

.tp-heat-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.82rem;
    color: var(--tp-muted);
}

.tp-heat-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-heat-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
}

/* The actual .tp-heat-cell--* color rules live further down, AFTER the
   base .tp-heat-cell rule — see the comment there for why order matters.
   These are just the small legend swatches. */
.tp-heat-swatch--location {
    background: #2f9e58;
}

.tp-heat-swatch--home-visit {
    background: #2f6fed;
}

.tp-heat-swatch--buffer {
    background: repeating-linear-gradient(45deg, #d8dce2, #d8dce2 4px, #eef0f3 4px, #eef0f3 8px);
}

.tp-heat-table {
    border-collapse: collapse;
    border-spacing: 0;
    /* Fixed layout + the <colgroup> widths below are what actually control
       column width now — table-layout:auto (the default) sizes each column
       to fit its widest cell, which was the real reason the hour columns
       stayed wide (driven by the header text) no matter how small the
       button inside got. */
    table-layout: fixed;
    /* admin.css (loaded on every trainer-portal page too) sets a blanket
       "table { width: 100% }" — left alone, table-layout:fixed just
       stretches the column widths below proportionally to fill that full
       page width, which looked identical to the original bug. Overriding
       it here (a class beats a bare element selector regardless of order)
       makes the table only as wide as its columns actually need. */
    width: auto;
}

.tp-heat-col-date {
    width: 6.5rem;
}

.tp-heat-col-hour {
    width: 1.3rem;
}

.tp-heat-table th, .tp-heat-table td {
    text-align: center;
    padding: 0;
    /* NOT overflow:hidden — .tp-heat-tip (the hover tooltip) is an
       absolutely-positioned child that pops up BELOW the cell's own box;
       hiding overflow here clips it down to an unreadable sliver. */
}

.tp-heat-table th {
    padding: 0.3rem 0;
    font-size: 0.68rem;
    white-space: nowrap;
}

.tp-heat-cell {
    position: relative;
    display: block;
    width: 1rem;
    height: 2rem;
    margin: 1.5px;
    border: none;
    border-radius: 3px;
    cursor: default;
    padding: 0;
    /* Every cell is a real <button> now (clickable "+"/manage popup) — reset
       native button chrome so our own background rules below (--location,
       --home-visit, --buffer, --empty) are what actually shows, in every
       state including :hover/:focus. Without this, some browsers still
       paint their own default button hover/press shading on top, which is
       what was making colored cells look black on hover instead of green. */
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
}

button.tp-heat-cell {
    cursor: pointer;
}

/* .tp-heat-cell (above) and .tp-heat-cell--location/--home-visit/--buffer
   (above THAT, earlier in this file) have equal specificity (one class
   each) — CSS breaks that tie by source order, and .tp-heat-cell came
   later, so its background was silently winning and hiding every color.
   Repeating the color rules here, AFTER .tp-heat-cell, fixes that for good
   regardless of where anything else gets added above. */
.tp-heat-cell--location {
    background-color: #2f9e58;
}

.tp-heat-cell--home-visit {
    background-color: #2f6fed;
}

.tp-heat-cell--buffer {
    background: repeating-linear-gradient(45deg, #d8dce2, #d8dce2 4px, #eef0f3 4px, #eef0f3 8px);
}

/* Time off (trainer_blockouts, set at /training/time-off) — deliberately
   not a <button> (see the view) since there's nothing to add/manage here;
   the "+" only ever means "this hour is actually bookable". */
.tp-heat-swatch--blocked,
.tp-heat-cell--blocked {
    background-color: var(--tp-muted);
}

.tp-heat-tip {
    display: none;
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    background: var(--tp-ink);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    white-space: nowrap;
}

.tp-heat-cell:hover .tp-heat-tip,
.tp-heat-cell:focus .tp-heat-tip {
    display: block;
}

.tp-heat-cell--empty {
    background: #fff;
    border: 1px dashed var(--tp-line);
}

.tp-heat-cell--empty.tp-heat-cell--buffer {
    border-style: solid;
    border-color: transparent;
    /* Two classes here beats the single-class .tp-heat-cell--empty rule
       above on specificity alone, so the hatched pattern always wins over
       plain white regardless of source order. */
    background: repeating-linear-gradient(45deg, #d8dce2, #d8dce2 4px, #eef0f3 4px, #eef0f3 8px);
}

.tp-heat-cell--empty:hover,
.tp-heat-cell--empty:focus {
    border-color: var(--tp-crimson);
}

.tp-heat-plus {
    display: block;
    line-height: 2rem;
    color: #c9ced6;
    font-weight: 700;
}

.tp-heat-cell--empty:hover .tp-heat-plus,
.tp-heat-cell--empty:focus .tp-heat-plus {
    color: var(--tp-crimson);
}

.tp-heat-swatch--today {
    background: #fff4c2;
    border: 1px solid #e8d27a;
}

.tp-heat-row--today {
    background: #fffceb;
}

.tp-heat-row--today th {
    color: var(--tp-crimson);
}

/* --- Manage-appointment modal (My Schedule) ------------------------------ */

.tp-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    border: none;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.tp-modal::backdrop {
    background: rgba(11, 24, 37, .55);
}

.tp-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    border: none;
    background: transparent;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--tp-muted);
    cursor: pointer;
}

.tp-modal-close:hover {
    color: var(--tp-crimson);
}

#tp-slot-occupied form {
    margin-top: 0.75rem;
}

#tp-slot-client-select option[hidden] {
    display: none;
}

/* --- Message board (/training/messages) --------------------------------- */

.tp-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0;
}

.tp-thread-message {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}

.tp-thread-message-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.tp-thread-message-head small {
    color: var(--tp-muted);
    white-space: nowrap;
}

.tp-thread-message p {
    margin: 0;
    white-space: pre-line;
}

.tp-thread-attachments {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tp-thread-attachments li a {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background: #f2f4f7;
    border-radius: 6px;
    font-size: 0.85rem;
}

.tp-thread-message-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.75rem;
}

.tp-thread-reply {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tp-thread-reply textarea {
    width: 100%;
    box-sizing: border-box;
}

/* --- Outlook-style 3-pane messages shell (/training/messages) ----------- */

.tp-mail {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: calc(100vh - 5rem);
    min-height: 30rem;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    overflow: hidden;
    margin: 1.25rem 0;
}

.tp-mail-list {
    width: 20rem;
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tp-line);
    background: var(--tp-bg);
    overflow: hidden;
}

.tp-mail-list-top {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tp-mail-sent {
    flex: 0 0 10rem;
    border-top: 1px solid var(--tp-line);
    background: #fff;
    padding: 0.9rem;
    overflow-y: auto;
}

.tp-mail-sent h3 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: var(--tp-ink);
}

.tp-mail-sent p {
    margin: 0;
    color: var(--tp-muted);
    font-size: 0.85rem;
}

.tp-mail-list-header {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-bottom: 1px solid var(--tp-line);
}

.tp-mail-filter {
    display: flex;
    gap: 0.4rem;
}

.tp-mail-filter a {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--tp-muted);
    background: #fff;
    border: 1px solid var(--tp-line);
}

.tp-mail-filter a.is-active {
    background: var(--tp-crimson);
    border-color: var(--tp-crimson);
    color: #fff;
}

.tp-mail-threads {
    flex: 1;
    overflow-y: auto;
}

.tp-mail-thread-row {
    display: block;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--tp-line);
    text-decoration: none;
    color: var(--tp-ink);
}

.tp-mail-thread-row:hover {
    background: #eef0f3;
}

.tp-mail-thread-row.is-selected {
    background: #fff;
    box-shadow: inset 3px 0 0 var(--tp-crimson);
}

.tp-mail-thread-row-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--tp-muted);
    margin-bottom: 0.15rem;
}

.tp-mail-thread-subject {
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-mail-thread-row.is-unread .tp-mail-thread-subject {
    font-weight: 700;
}

.tp-mail-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0091ad;
    flex: 0 0 auto;
}

.tp-mail-thread-meta {
    font-size: 0.78rem;
    color: var(--tp-muted);
    margin-top: 0.15rem;
}

.tp-mail-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tp-mail-reading {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.tp-mail-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tp-muted);
    font-size: 0.95rem;
}

.tp-wa-startconvo {
    padding: 1.5rem;
    max-width: 32rem;
}

.tp-wa-startconvo form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tp-mail-actionpanel {
    flex: 0 0 14rem;
    border-top: 1px solid var(--tp-line);
    background: var(--tp-bg);
    padding: 1rem 1.5rem;
    overflow-y: auto;
}

.tp-mail-forward-form {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: #f8f9fa;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    padding: 0.9rem;
}

.tp-mail-forward-form select,
.tp-mail-forward-form textarea,
.tp-mail-forward-form input {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 720px) {
    .tp-mail {
        flex-direction: column;
        height: auto;
    }
    .tp-mail-list {
        width: auto;
        flex: 0 0 auto;
        max-height: 16rem;
        border-right: none;
        border-bottom: 1px solid var(--tp-line);
    }
}

/* --- View toggle (Outlook / Chat), shared by both message screens ------- */

.tp-mail-view-toggle {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.tp-mail-view-toggle a {
    flex: 1;
    text-align: center;
    padding: 0.3rem 0;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--tp-muted);
    background: #fff;
    border: 1px solid var(--tp-line);
}

.tp-mail-view-toggle a.is-active {
    background: var(--tp-ink);
    border-color: var(--tp-ink);
    color: #fff;
}

/* --- "Pinned for follow-up" list, shared by the Outlook action panel and
   the chat view's third column ------------------------------------------- */

.tp-mail-pinned-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tp-mail-pinned-item {
    position: relative;
}

.tp-mail-pinned-row {
    display: block;
    text-decoration: none;
    color: var(--tp-ink);
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    padding: 0.6rem 1.8rem 0.6rem 0.75rem;
}

.tp-mail-pinned-unpin {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    border: none;
    background: none;
    color: var(--tp-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.tp-mail-pinned-unpin:hover {
    background: #f2f4f7;
    color: var(--tp-crimson);
}

.tp-mail-pinned-row:hover {
    border-color: #0091ad;
}

.tp-mail-pinned-row-top {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--tp-muted);
    margin-bottom: 0.1rem;
}

.tp-mail-pinned-subject {
    font-size: 0.85rem;
    font-weight: 600;
}

.tp-mail-pinned-snippet {
    font-size: 0.8rem;
    color: var(--tp-muted);
    margin-top: 0.1rem;
}

.tp-mail-pinned-note {
    margin-top: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: #fff7cc;
    border: 1px solid #eadf9b;
    border-radius: 6px;
    font-size: 0.78rem;
    color: #5b5330;
    white-space: pre-line;
}

.btn-icon.is-pinned {
    color: #b8860b;
    font-weight: 700;
}

/* --- WhatsApp-style chat screen (/training/messages?view=chat) ---------- */

/* The /training/messages chat area fits the actual visible screen exactly,
   and the page doesn't scroll/bounce. Getting there took two failed
   attempts: height:100dvh + overflow:hidden looked exact but Safari's
   first-paint 100dvh can overshoot what's actually visible above its bottom
   toolbar, pushing the reply box out of reach with no scroll left to
   recover it; backing off to 100svh (a fixed conservative guess) fixed
   reachability but left a dead gap of unused space AND still let the page
   rubber-band, since nothing was locking scroll against a real measurement
   any more. The fix is to stop guessing with a CSS viewport unit and use the
   number the browser itself reports as actually visible —
   window.innerHeight, read live by the small script at the top of
   messages_chat.php into the --app-vh custom property, re-read on resize
   (which iOS Safari fires when its toolbar shows/hides) — then lock scroll
   against THAT. The plain 100vh in each var(--app-vh, 100vh) fallback only
   matters for the instant before that script runs on first paint. */
html:has(.tp-wa) {
    height: 100%;
    overflow: hidden;
}

body:has(.tp-wa) {
    display: flex;
    flex-direction: column;
    height: var(--app-vh, 100vh);
    overflow: hidden;
}

body:has(.tp-wa) .tp-header {
    flex: 0 0 auto;
}

body:has(.tp-wa) .tp-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
}

.tp-wa {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    overflow: hidden;
    margin: 0;
}

.tp-wa-list {
    width: 22rem;
    flex: 0 0 22rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--tp-line);
    background: var(--tp-bg);
    overflow: hidden;
}

.tp-wa-list-top {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tp-wa-archive-row {
    padding: 0.4rem 0.3rem;
    border-bottom: none;
}

/* Floating archive button — same black-square, fixed-to-viewport treatment
   the trainer side doesn't otherwise have (admin has its hamburger menu
   button in admin.css), bottom-anchored so it doesn't collide with anything
   else. The archive was previously always visible inline under the thread
   list, permanently eating into the same tight, screen-fitted height budget
   the chats themselves need — now it opens on demand instead. */
.tp-wa-archive-toggle {
    position: fixed;
    bottom: 1.1rem;
    right: 1.1rem;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: #101722;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.tp-wa-archive-toggle-count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tp-crimson);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}

.tp-modal-wide {
    width: min(560px, 92vw);
}

.tp-wa-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tp-wa-search input[type="search"] {
    flex: 1;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    font-size: 0.82rem;
    box-sizing: border-box;
}

.tp-wa-search-archive {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--tp-muted);
    white-space: nowrap;
}

.tp-wa-myphoto-label {
    position: relative;
    cursor: pointer;
    display: inline-flex;
}

.tp-wa-myphoto-label input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.tp-wa-avatar-sm {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 0.7rem;
}

.tp-wa-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.tp-wa-list-header {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-bottom: 1px solid var(--tp-line);
}

.tp-wa-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tp-wa-list-title h2 {
    margin: 0;
    font-size: 1.15rem;
}

.tp-wa-list-title-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tp-wa-pin-link {
    text-decoration: none;
    font-size: 0.85rem;
    color: var(--tp-ink);
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
}

.tp-wa-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.tp-wa-threads {
    flex: 1;
    overflow-y: auto;
}

.tp-wa-thread-row {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--tp-line);
    text-decoration: none;
    color: var(--tp-ink);
}

.tp-wa-thread-row:hover {
    background: #eef0f3;
}

.tp-wa-thread-row.is-selected {
    background: #fff;
    box-shadow: inset 3px 0 0 #25d366;
}

.tp-wa-avatar {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--tp-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 700;
}

.tp-wa-thread-body {
    flex: 1;
    min-width: 0;
}

.tp-wa-thread-row-top {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.tp-wa-thread-subject {
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-wa-thread-row.is-unread .tp-wa-thread-subject {
    font-weight: 700;
}

.tp-wa-thread-time {
    font-size: 0.74rem;
    color: var(--tp-muted);
    flex: 0 0 auto;
}

.tp-wa-thread-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
}

.tp-wa-thread-snippet {
    font-size: 0.8rem;
    color: var(--tp-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-wa-unread-dot {
    flex: 0 0 auto;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #25d366;
}

.tp-wa-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f6f2ea;
}

.tp-wa-chat-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--tp-line);
}

.tp-wa-back {
    display: none;
    text-decoration: none;
    color: var(--tp-ink);
    font-size: 1.2rem;
}

.tp-wa-chat-title {
    font-weight: 700;
}

.tp-wa-chat-subtitle {
    font-size: 0.78rem;
    color: var(--tp-muted);
}

.tp-wa-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tp-wa-bubble-row {
    display: flex;
}

.tp-wa-bubble-row.is-own {
    justify-content: flex-end;
}

.tp-wa-bubble {
    max-width: 65%;
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    cursor: context-menu;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.tp-wa-bubble-row.is-own .tp-wa-bubble {
    background: #d9fdd3;
}

.tp-wa-bubble.is-pinned {
    outline: 2px solid #b8860b;
    background: #fff7de;
}

.tp-wa-bubble-row.is-own .tp-wa-bubble.is-pinned {
    background: #eefbdc;
}

.tp-wa-bubble-pin {
    float: right;
    margin-left: 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
}

.tp-wa-bubble p {
    margin: 0 0 0.2rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.tp-wa-bubble-from {
    font-size: 0.76rem;
    font-weight: 700;
    color: #0091ad;
    margin-bottom: 0.15rem;
}

.tp-wa-bubble-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.7rem;
    color: var(--tp-muted);
}

.tp-wa-bubble-star {
    float: right;
    margin-left: 0.4rem;
    color: #b8860b;
    font-size: 0.85rem;
}

/* .tp-wa-menu's own display:flex below normally wins over the [hidden]
   attribute JS uses to close it — an author stylesheet always outranks the
   browser's built-in "[hidden] { display: none }" rule, regardless of
   selector specificity — which left every context menu (message, thread,
   pin) permanently visible, stacked on top of each other, until JS
   explicitly opened one. This one rule is what actually hides them. */
.tp-wa-menu[hidden] {
    display: none;
}

.tp-wa-menu {
    position: fixed;
    z-index: 50;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    background: #fff;
    border: 1px solid var(--tp-line);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.18);
    padding: 0.35rem;
    overflow: hidden;
}

.tp-wa-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.7rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--tp-ink);
    border-radius: 6px;
    cursor: pointer;
}

.tp-wa-menu button:hover {
    background: var(--tp-bg);
}

.tp-wa-menu-danger {
    color: var(--tp-crimson);
}

.tp-wa-composer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-top: 1px solid var(--tp-line);
}

.tp-wa-composer textarea {
    flex: 1;
    resize: none;
    overflow-y: auto;
    border-radius: 18px;
    border: 1px solid var(--tp-line);
    padding: 0.5rem 0.9rem;
    font: inherit;
    line-height: 1.5rem;
    max-height: 9rem;
}

.tp-wa-attach-label {
    cursor: pointer;
    font-size: 1.1rem;
    position: relative;
}

.tp-wa-attach-label input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 1.6rem;
}

.tp-wa-pinned {
    width: 20rem;
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--tp-line);
    background: var(--tp-bg);
    overflow-y: auto;
    padding: 0.9rem;
}

.tp-wa-pinned-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.tp-wa-pinned-header h3 {
    margin: 0;
    font-size: 0.95rem;
}

/* Phone-width tab bar (Chats / Chat / Pinned) — hidden on desktop, where the
   three panes sit side by side and don't need a switcher. */
.tp-wa-mobile-tabs {
    display: none;
}

@media (max-width: 900px) {
    .tp-wa-pinned {
        display: none;
    }
    .tp-wa[data-active="pinned"] .tp-wa-pinned {
        display: flex;
        width: 100%;
        flex: 1 1 auto;
        border-left: none;
    }
    .tp-wa[data-active="pinned"] .tp-wa-list,
    .tp-wa[data-active="pinned"] .tp-wa-chat {
        display: none;
    }
}

@media (max-width: 720px) {
    .tp-wa-list {
        width: 100%;
        flex: 1 1 auto;
        border-right: none;
    }
    .tp-wa-chat {
        flex: 1 1 auto;
    }
    .tp-wa[data-active="list"] .tp-wa-chat,
    .tp-wa[data-active="list"] .tp-wa-pinned {
        display: none;
    }
    .tp-wa[data-active="chat"] .tp-wa-list,
    .tp-wa[data-active="chat"] .tp-wa-pinned {
        display: none;
    }
    .tp-wa[data-active="chat"] .tp-wa-chat {
        display: flex;
    }
    .tp-wa-back {
        display: inline-flex;
    }

    .tp-wa-mobile-tabs {
        flex: 0 0 2.6rem;
        display: flex;
        align-items: center;
        height: 2.6rem;
        box-sizing: border-box;
        gap: 0.4rem;
        padding: 0 0.6rem;
        background: #fff;
        border-bottom: 1px solid var(--tp-line);
    }
    .tp-wa-mobile-tabs a {
        flex: 1;
        text-align: center;
        padding: 0.4rem 0;
        border-radius: 999px;
        font-size: 0.82rem;
        font-weight: 600;
        text-decoration: none;
        color: var(--tp-muted);
        background: var(--tp-bg);
    }
    .tp-wa-mobile-tabs a.is-active {
        background: #101722;
        color: #fff;
    }
    .tp-wa-mobile-tabs a.is-disabled {
        opacity: 0.45;
        pointer-events: none;
    }

    /* Belt-and-braces on top of the height fix above: even if some phone
       browser's address-bar chrome throws the vh math off, keeping the
       composer stuck to the bottom of the chat pane means it's never the
       thing that ends up needing a scroll to reach. */
    .tp-wa-composer {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
}

/* A button under a message (e.g. an appointment reminder's "Open my schedule"). */
.tp-wa-bubble-action {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: #0091ad;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
}

.tp-wa-bubble-action:hover {
    background: #04696c;
}