.bhsc-portal {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
}

/* Tabs/nav containers (Coach + Swimmer) */
.bhsc-tabs-links,
.bhsc-portal-nav{
    display:flex !important;
    flex-wrap:nowrap;
    gap:10px;
    align-items:center;
    margin:12px 0 18px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
}

.bhsc-tabs-links a.button,
.bhsc-portal-nav a.button{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #c3c4c7;
    background:#f6f7f7;
    color:#1d2327;
    text-decoration:none !important;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}

.bhsc-tabs-links a.button:hover,
.bhsc-portal-nav a.button:hover{
    background:#f0f0f1;
}

.bhsc-tabs-links a.button.button-primary,
.bhsc-portal-nav a.button.button-primary{
    background:#2271b1;
    border-color:#2271b1;
    color:#fff;
}

.bhsc-tabs-links a.button.button-primary:hover,
.bhsc-portal-nav a.button.button-primary:hover{
    background:#135e96;
    border-color:#135e96;
}

.bhsc-tabs-links a.button.button-secondary,
.bhsc-portal-nav a.button.button-secondary{
    background:#f6f7f7;
    border-color:#c3c4c7;
    color:#1d2327;
}


/* Portal navigation styles moved to .bhsc-tabs-links/.bhsc-portal-nav block above */

.bhsc-card{
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:14px;
    margin:12px 0;
    background:#fff;
}
.bhsc-portal .description{
    color:#666;
    font-size:13px;
}


/* ==========================================================
   Phase 1 structural polish additions
   ========================================================== */

.bhsc-portal-header h2{
    margin:0 0 6px 0;
}
.bhsc-portal-header .description{
    margin:0 0 10px 0;
    opacity:0.8;
}

.bhsc-card{
    background:#fff;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:10px;
    padding:16px;
    margin:0 0 14px 0;
}

.bhsc-card__title{
    margin:0 0 12px 0;
    font-size:20px;
    line-height:1.2;
}

.bhsc-swimmer-name{
    font-size:20px;
    font-weight:700;
    margin:0 0 6px 0;
}

.bhsc-swimmer-meta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    opacity:0.85;
}
.bhsc-swimmer-meta__sep{
    opacity:0.6;
}

.bhsc-overview-list{
    margin:0;
    padding-left:18px;
}
.bhsc-overview-list li{
    margin:8px 0;
}

/* Phase 2A: coach contact affordance */
.bhsc-email-wrap{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.bhsc-email-link{
    text-decoration:none;
}
.bhsc-email-btn{
    padding: 6px 10px;
    border-radius: 999px;
}

/* Phase 2A: empty states */
.bhsc-empty{
    padding: 12px 14px;
    border: 1px dashed rgba(0,0,0,0.16);
    border-radius: 10px;
    opacity: 0.85;
}

/* ==========================================================
   Phase 2B: confidence & clarity
   ========================================================== */

.bhsc-submeta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin: -6px 0 12px 0;
    color:#666;
    font-size:13px;
}

.bhsc-submeta__label{
    font-weight:600;
    color:#555;
}

.bhsc-submeta__sep{
    opacity:0.6;
}

.bhsc-help{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.2);
    font-weight:700;
    font-size:12px;
    line-height:1;
    color:#444;
    background:#fff;
    cursor:help;
}

.bhsc-trend{
    font-weight:700;
}

.bhsc-trend-up{
    color:#0a7b34;
}

.bhsc-trend-down{
    color:#b32d2e;
}

.bhsc-trend-flat{
    color:#666;
}

/* Phase 2A: attendance % visual emphasis */
.bhsc-attendance-pct{
    font-weight: 700;
}
.bhsc-pct-good{
    color: #0a7b34;
}
.bhsc-pct-warn{
    color: #b35300;
}
.bhsc-pct-poor{
    color: #b32d2e;
}

.bhsc-table th,
.bhsc-table td{
    vertical-align:middle;
}
.bhsc-table td:last-child,
.bhsc-table th:last-child{
    text-align:right;
}

.bhsc-notes-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.bhsc-note{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap:12px;
    padding:10px 12px;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:10px;
}
.bhsc-note__when{
    font-weight:600;
    opacity:0.8;
}

/* Attendance legend (Phase 2B) */
.bhsc-attendance-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
}

.bhsc-attendance-legend__item{
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  line-height:1.3;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

/* Match existing pct classes */
.bhsc-legend-good{ }
.bhsc-legend-warn{ }
.bhsc-legend-poor{ }

/* Optional: subtly mirror the pct colour blocks if your pct classes use borders/backgrounds */
.bhsc-attendance-pct.bhsc-pct-good{ font-weight:600; }
.bhsc-attendance-pct.bhsc-pct-warn{ font-weight:600; }
.bhsc-attendance-pct.bhsc-pct-poor{ font-weight:600; }

/* Phase 2B: colour-align attendance legend with % bands */
.bhsc-legend-good{
    border-left:4px solid #0a7b34;
}

.bhsc-legend-warn{
    border-left:4px solid #b35300;
}

.bhsc-legend-poor{
    border-left:4px solid #b32d2e;
}

/* ==========================================================
   Phase 2C: Notes experience
   ========================================================== */

.bhsc-notes-block__label{
    font-size:13px;
    color:#666;
    margin: 0 0 10px 0;
    font-weight:600;
}

.bhsc-note--latest{
    border-color: rgba(34,113,177,0.35);
    background: rgba(34,113,177,0.04);
}

.bhsc-note__meta{
    margin-top:6px;
    font-size:12px;
    color:#666;
    font-weight:600;
    opacity:0.9;
}

.bhsc-notes-more{
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,.08);
}

.bhsc-notes-more > summary{
    cursor:pointer;
    font-weight:700;
    color:#1d2327;
    list-style:none;
}

.bhsc-notes-more > summary::-webkit-details-marker{
    display:none;
}
/* ==========================================================
   Phase 2D: Mobile optimisation
   ========================================================== */

/* Mobile tab selector */
.bhsc-tabs-mobile{ display:none; width:100%; }
.bhsc-tabs-mobile__label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#666;
    margin:0 0 6px 0;
}
.bhsc-tabs-mobile__select{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.18);
    background:#fff;
    font-weight:700;
}

/* Desktop tab links container */
.bhsc-tabs-links{
    display:flex;
    gap:10px;
    align-items:center;
}

/* Ensure tab links render as buttons in a single row even when themes override WP button styles */
.bhsc-tabs-links a.button,
.bhsc-coach-tabs a.button{
    display:inline-flex !important;
    align-items:center;
    gap:6px;
}

.bhsc-coach-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

/* Switch to dropdown on mobile */
@media (max-width: 680px){
    .bhsc-tabs-links{ display:none; }
    .bhsc-tabs-mobile{ display:block; }

    .bhsc-portal-nav{
        overflow:visible;
        padding:0;
        border-bottom:none;
    }

    .bhsc-portal{
        padding:14px;
        border-radius:10px;
    }

    .bhsc-card{
        padding:14px;
        border-radius:12px;
    }

    .bhsc-card__title{
        font-size:18px;
        margin-bottom:10px;
    }

    .bhsc-swimmer-name{
        font-size:18px;
    }

    .bhsc-submeta{
        gap:8px;
        font-size:12.5px;
    }
}

/* Scrollable tables on mobile */
.bhsc-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    border-radius:10px;
}

/* Subtle scroll hint on mobile (gradient edges) */
@media (max-width: 680px){
    .bhsc-table-wrap{
        position:relative;
    }
    .bhsc-table-wrap:before,
    .bhsc-table-wrap:after{
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        width:18px;
        pointer-events:none;
    }
    .bhsc-table-wrap:before{
        left:0;
        background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    .bhsc-table-wrap:after{
        right:0;
        background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    }
}
/* Swimmer selector (parent with multiple swimmers) */
.bhsc-swimmer-switch select {
    font-size: 1.05rem;          /* makes text bigger */
    font-weight: 600;
    padding: 10px 14px;          /* increases box height */
    min-width: 260px;
    border-radius: 6px;
}

.bhsc-swimmer-switch label {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 6px;
}