@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== BASE ===== */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f4f6f9;
    color: #333;
}

h1, h2, h3 {
    margin-bottom: 0.5rem;
}

/* ===== TOP NAV ===== */
.topnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2c3e50;
    color: white;    
}

.topnav .logo {
    font-size: 1.5rem;
    font-weight: bold;
}

.topnav nav a {
    color: white;
    margin-right: 20px;
    text-decoration: none;
    font-weight: bold;
}

.topnav nav a:hover {
    text-decoration: underline;
}

/* Visually distinct from the regular nav links - a divider and
   slightly muted color, so it reads as a separate action rather than
   just the last item in the same list of page links. */
.topnav nav a.logout-link {
    margin-left: 12px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.75);
}

.topnav nav a.logout-link:hover {
    color: #fff;
}

/* Sits on the same single line as Log Out and every other nav link -
   not a class name mistake this time, a deliberate height match, since
   a stacked version broke the nav bar's uniform row height (confirmed
   by an actual screenshot, not assumed). Italic gold, the same warm
   accent already used elsewhere in the brand. */
.welcome-greeting-text {
    font-style: italic;
    font-weight: 500;
    font-size: 13px;
    color: #d9c89a;
    margin-left: 12px;
    margin-right: 4px;
}

/* ===== DASHBOARD / PAGE LAYOUT ===== */
.dashboard {
    padding: 30px;
}

/* ===== CARDS ===== */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.card {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    display: flex;
    align-items: center;
    gap: 20px;

    text-align: center;
}

.card p {
    font-size: 16px;
    font-weight: normal;
    text-align: left;
}

.card img {
    max-height: 80px;
    max-width: 80px;
    border-radius: 50%;
    object-fit: cover;
}


.notes {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ===== TOOLBAR / BUTTONS ===== */
.toolbar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.create-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
}

.create-btn:hover {
    background: #219150;
}

/* ===== CLIENTS TABLE ===== */
.profiles-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 6px;
    overflow: hidden;
}

.profiles-table th,
.profiles-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.profiles-table th {
    background: #f5f6fa;
    font-weight: bold;
}

/* ===== CLIENT PROFILE SPECIFIC ===== */
main.dashboard .profile-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* main.dashboard .profile-summary .card {
    background: white;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
} */

/* main.dashboard .profile-summary .card h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: #2c3e50;
}

main.dashboard .profile-summary .card p {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c3e50;
} */


/* ===== PROFILE TABS ===== */
.profile-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.profile-tabs button {
    background-color: #e5e7eb;
    color: #333;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.profile-tabs button:hover {
    background-color: #d1d5db;
}

.profile-tabs button.active {
    background-color: #2c3e50;
    color: white;
}

/* ===== TAB CONTENT ===== */
.tab-content {
    background: white;
    padding: 20px 25px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.tab-content h2 {
    margin-bottom: 15px;
    color: #2c3e50;
}

.tab-content p {
    margin-bottom: 8px;
}

.tab-content b {
    color: #4f5d7a;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .summary-grid,
    main.dashboard .profile-summary {
        grid-template-columns: 1fr;
    }

    .profile-tabs {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===== CLIENT PROFILE LAYOUT ===== */

.profile-layout{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:25px;
    }
    
    /* SIDEBAR */
    
    .profile-sidebar{
    background:white;
    padding:15px;
    border-radius:6px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
    display:flex;
    flex-direction:column;
    gap:8px;
    height:fit-content;
    }
    
    .profile-sidebar button{
    background:none;
    border:none;
    text-align:left;
    padding:10px;
    border-radius:4px;
    cursor:pointer;
    font-weight:bold;
    }
    
    .profile-sidebar button:hover{
    background:#f2f4f8;
    }
    
    .profile-sidebar button.active{
    background:#2c3e50;
    color:white;
    }
    
    /* CONTENT AREA */
    
    .profile-content{
    background:white;
    padding:25px;
    border-radius:6px;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
    }

    .med-content{
        background:white;
        padding-left:25px;
        border-radius:6px;
        box-shadow:0 2px 5px rgba(0,0,0,0.1);
        width: 100%;
    }
    
    .section-content h2{
    margin-bottom:15px;
    }

    /* ===== FORM CARD ===== */
.form-card {
    background: white;
    padding: 20px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-width: 1600px;
    /* margin: 20px auto; */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-card .form-row {
    display: flex;
    flex-direction: column;
}

.form-card label {
    font-weight: 600;
    margin-bottom: 5px;
    color: #2c3e50;
}

.form-card input,
.form-card select {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-card input:focus,
.form-card select:focus {
    border-color: #3498db;
    outline: none;
}

.grid-full {
    grid-column: 1 / -1;
}

.form-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.btn-save {
    background: #27ae60;
    display: block;    
    color: white;
    border: none;
    padding: 2px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: background 0.2s;
    text-align: center;
    
}

.btn-save:hover {
    background: #219150;
}

.form-message {
    font-size: 14px;
    color: #27ae60;
    margin-top: 10px;
}

.form-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    border: none;
    padding: 10px 0;
}

/* Make the legend span both columns */
.form-section legend {
    grid-column: 1 / span 2;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Each input group */
.form-row {
    display: flex;
    flex-direction: column;
}

/* =====Services= =====*/
.services-section{
    display:flex;
    flex-direction:column;
    gap:20px;
}
    
.services-description{
    color:#555;
    max-width:700px;
    margin-bottom:10px;
}
    
.service-card{
    background:white;
    border-radius:6px;
    padding:18px;
    box-shadow:0 2px 5px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    gap:8px;
}
    
.service-card h3{
    margin:0;
    color:#2c3e50;
}
    
.service-card p{
    font-size:14px;
    color:#555;
    margin:0;
}
    
.service-card textarea{
    resize:vertical;
    padding:8px;
    border-radius:4px;
    border:1px solid #ccc;
    font-size:14px;
}

.services-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}
.service-checkbox{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    cursor:pointer;
}
.service-checkbox input{
    transform:scale(1.2);
}
.service-card textarea{
    margin-top:5px;
    width:100%;
}
.service-counter{
    font-weight:600;
    color:#2c3e50;
    background:#f4f6f9;
    padding:6px 12px;
    border-radius:4px;
}

.service-row {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

/* push actions to the far right */
.service-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* keep label inline too */
.service-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Buttons styling (optional but recommended) */
.service-actions button {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
}

.service-actions button:hover {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

.consent-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.consent-table th, .consent-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

.consent-table th {
    background-color: #f5f6fa;
    font-weight: bold;
}

.consent-table td input[type="radio"] {
    margin-left: 20px;
}

.consent-additional.card {
    background: white;
    padding: 15px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-top: 15px;
}

.consent-additional label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #2c3e50;
}

.consent-additional .description-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}

.consent-additional textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: vertical;
}

.signer-details {
    background: #f4f6f9;
    padding: 15px;
    margin-top: 10px;
    border-radius: 6px;
    border-left: 4px solid #2c3e50;
}

/*=======================*/
/* Hide all content by default */
.consent-layer {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
    margin-top: 10px;
}

/* Hide the radio buttons */
input[name="consentTabs"] {
display: none;
}

/* Style labels like tabs */
.consent-tab {
display: inline-block;
padding: 8px 14px;
background: #e5e7eb;
cursor: pointer;
border-radius: 4px 4px 0 0;
margin-right: 4px;
font-weight: bold;    
transition: background 0.2s;
}

#sideRadio {
font-size: 10px;
}

.consent-tab:hover {
background: #d1d5db;
}

/* Show content of the selected tab */
#fullConsent:checked ~ .content #fullConsentContent,
#poaInfo:checked ~ .content #poaInfoContent,
#medicationConsent:checked ~ .content #medicationContent,
#mcaCare:checked ~ .content #mcaCareContent,
#unableSign:checked ~ .content #unableSignContent,
#bestInterest:checked ~ .content #bestInterestContent {
display: block;
}

/* Active tab styling */
#fullConsent:checked + label,
#poaInfo:checked + label,
#medicationConsent:checked + label,
#mcaCare:checked + label,
#unableSign:checked + label,
#bestInterest:checked + label {
background: #2c3e50;
color: white;
}
  
.poa-card {
    background: #f8f9fb;
    padding: 18px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}

/* Two column grid */
.poa-card .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.care-input {
    margin-right: 20px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 0.4fr;
    gap: 12px 20px;
}

.form-grid2{
    width: 80%;
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 0.3fr;
    gap: 10px 10px;
}

.service-grid{
    width: 95%;
    padding-top: 5px;
    display: grid;
    grid-template-columns: 1fr 0.4fr;
    gap: 10px 10px;
}


/* Form rows */
.form-row {
    display: flex;
    flex-direction: column;
}

/* Full width fields (like address) */
.form-row.full-width {
    grid-column: span 2;
}

.form-row label {
    font-weight: 600;
    margin-bottom: 4px;
}

.form-row input,
.form-row textarea {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.consent-card{
    background:#ffffff;
    border:1px solid #ddd;
    padding-left:20px;
    border-radius:8px;
}

.consent-subcard{
    background:#f8f9fb;
    padding:16px;
    border-radius:6px;
    margin-top:15px;
}

.section-desc{
    margin-bottom:10px;
    color:#555;
}

.consent-info ul{
    margin-top:8px;
    padding-left:18px;
}

.consent-option{
    margin-bottom:10px;
}

.form-header-grid{
    display:grid;
    margin-right: 20px;
    /* padding-top: 16px; */
    grid-template-columns:3fr 1fr;
    gap:12px 20px;
    /* justify-content: center; */
}

.form-grid{
    display:grid;
    margin-left: 20px;
    padding-top: 16px;
    grid-template-columns:auto auto;
    gap:12px 20px;
    justify-content: center;
}

.form-row{
    display:flex;
    flex-direction:column;
}

.form-row.full-width{
    grid-column:span 2;
}

.form-row input,
.form-row textarea{
    padding:8px;
    border-radius:4px;
    border:1px solid #ccc;
}

/* ===== SELF MEDICATION CONSENT ===== */

/* Responsibility checklist */
.responsibility-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;
}

.responsibility-list li {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.responsibility-list input[type="checkbox"] {
    margin-top: 3px;
    transform: scale(1.1);
}

/* Declaration text box */
.declaration-box {
    background: #f4f6f9;
    border-left: 4px solid #2c3e50;
    padding: 14px;
    margin-top: 12px;
    border-radius: 4px;
    font-size: 14px;
}

/* Signature section */
.signature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-top: 10px;
}

.signature-grid .form-row {
    display: flex;
    flex-direction: column;
}

.signature-grid .full-width {
    grid-column: span 2;
}

/* Small helper text */
.helper-text {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* show the consent content immediately after label when radio is checked */
input[name="medTabs"]:checked + label + .consent-layer {
    display: block;
}

/* active tab styling */
input[name="medTabs"]:checked + label,input[name="mcaSubTabs"]:checked + label {
    background: #2c3e50;
    color: white;
}

/* show content when radio is checked */
#selfMedication:checked ~ .tab-content #selfMedicationContent,
#medicationAdmin:checked ~ .tab-content #medicationAdminContent {
  display: block;
}
.tab-item input[type="radio"]:checked + label + .consent-layer {
    display: block;
  }

#mcaTab:checked ~ .tab-content #mcaContent,
#bestInterestTab:checked ~ .tab-content #bestInterestDecisionContent {
    display: block;
}
input.hideRadio {    
    position:absolute;
    opacity:0;
    pointer-events:none;  
}
.consent-tab{
    border-left:4px solid transparent;
}

.hideRadio:checked + label,
#bestInterestTab:checked + label{
    border-left:4px solid #0077cc;
}

.care-section{
    height:calc(100vh - 70px);
    padding:20px;
}
    
.care-tabs{
    display:flex;
    height:100%;
    gap:20px;
}

/* Redesigned to use the client pages' own established purple
   identity (--client-accent) rather than the disconnected navy blue
   this previously hardcoded, and to actually show which tab is
   currently open - the original had no persistent selected state at
   all, only a hover effect that disappeared the moment the mouse
   moved away. */
.sideTab{
    display: block;
    padding: 0.65em 0.9em;
    margin-bottom: 4px;
    width: 100%;
    background: var(--client-surface, #fff);
    border: 1px solid var(--client-border, #e8e3f5);
    border-left: 3px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--client-ink, #2d2a3d);
    transition: background 0.15s, border-color 0.15s;
}

.sideTab:hover{
    background: var(--client-accent-soft, #f3eefe);
}

/* The persistent "which tab is open" state below can't be done in
   pure CSS here - the checkbox-hack :checked~label technique needs
   the label to be a true sibling of its radio, but both this page's
   markup and medication.html's wrap their labels in a sidebar div
   one level deeper, breaking that relationship. See
   applyActiveSideTabStyling() in client-profile.js for the actual
   mechanism - a small change-listener toggling this class directly,
   which works regardless of the surrounding markup's nesting. */
.sideTab.active{
    background: var(--client-accent-soft, #f3eefe);
    border-left-color: var(--client-accent, #8b5cf6);
    color: var(--client-accent-dark, #6d28d9);
    font-weight: 600;
}

hr {
    display: block;           
    margin-bottom: 10px;           
    border: 0;                
    height: 2px;              
    background-color: #ccc;  
    width: 100%;              
}

.hideTab{
position:absolute;
opacity:0;
}

.hideTab + label{
    width:220px;
}
    
.hideTab,
.hideTab + label{
flex-shrink:0;
}

.care-tabs{
    overflow:hidden;
}

/* Only careplanning.html actually puts a second element (the Migrate
   button) inside this header - every other client section using the
   same class has just the heading, so this has no visible effect
   anywhere else. Was plain block stacking before, which is why the
   button sat cramped directly under the heading with no real
   separation, rather than sitting cleanly alongside it. */
header.profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Was a completely bare <button> before - no class at all, so it
   rendered as a plain browser-default control, indistinguishable
   from any other unstyled element on the page. Purple outline here
   deliberately, not filled - this opens a modal, it isn't the primary
   action on the page - but still clearly its own intentional button,
   not a generic default. */
.migrate-btn {
    background: transparent;
    color: var(--client-accent, #8b5cf6);
    border: 1.5px solid var(--client-accent, #8b5cf6);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.migrate-btn:hover {
    background: var(--client-accent, #8b5cf6);
    color: #fff;
}

.care-sidebar{
    width:120px;    
    padding-right:10px;    
}

.content{
    flex:1;
    padding-left:10px;
    overflow-y:auto;
}

.tabPanel{
    display:none;
    background:white;
    padding:25px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* Old, ID-based active-tab styling (dark navy #2c3e50 background) -
   removed. It predates the purple redesign in item 9 and, because ID
   selectors beat a plain class selector on specificity, it was
   silently overriding that redesign the whole time - the visible tab
   never actually looked like the intended purple style, regardless
   of what .sideTab.active said, because this rule kept winning. */

#personalCare:checked ~ .content #personalCareContent,
#mobility:checked ~ .content #mobilityContent,
#nutrition:checked ~ .content #nutritionContent,
#financial:checked ~ .content #financialContent,
#companionship:checked ~ .content #companionshipContent,
#shopping:checked ~ .content #shoppingContent,
#communication:checked ~ .content #communicationContent,
#nightSupport:checked ~ .content #nightSupportContent,
#homeManagement:checked ~ .content #homeManagementContent,
#communityAccess:checked ~ .content #communityAccessContent,
#nailSupport:checked ~ .content #nailSupportContent{
    display:block;
}

.multi-select{
    position:relative;
    width:250px;
}

.dropdown-btn{
    width:100%;
    padding:10px;
    background:#2c3e50;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

.dropdown-content{
    display:none;
    position:absolute;
    background:white;
    border:1px solid #ccc;
    width:100%;
    padding:10px;
    border-radius:6px;
    box-shadow:0 3px 8px rgba(0,0,0,0.2);
}

.dropdown-content label{
    display:block;
    padding:5px;
    cursor:pointer;
}

.dropdown-content label:hover{
    background:#f2f2f2;
}

.multi-select.active .dropdown-content{
    display:block;
}
.personalCareform,.mobilityform {
    font-size: 12px;
}

.skinPlanContent, .continenceContent, .bodyMapsContent, .turningChartContent, .waterLowContent {
    display: none;
}

#skinPlan:checked ~ .skinPlanContent,
#continencePlan:checked ~ .continenceContent,
#bodyMaps:checked ~ .bodyMapsContent, 
#turningChart:checked ~ .turningChartContent, 
#waterLow:checked ~ .waterLowContent{
    display: block;
}

.care-planner {
    width: 100%;
    margin-left: 2%;
}


.turning-chart-presets {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 6px;
}

.turning-chart-presets button {
    font-size: 12px;
    padding: 5px 10px;
    border: 1px solid var(--client-border, #e8e3f5);
    background: var(--client-surface, #fff);
    border-radius: 5px;
    cursor: pointer;
}

.turning-chart-presets button:hover {
    background: var(--client-accent-soft, #f3eefe);
}

.turning-chart {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.turning-chart th,
.turning-chart td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.turning-chart th {
    background: #f4f6f9;
}

.turning-chart select,
.turning-chart input {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #ccc;
}

.waterlow-chart {
    width: 100%;
    border-collapse: collapse;
}

.waterlow-chart th,
.waterlow-chart td {
    border: 1px solid #ccc;
    padding: 8px;
}

.waterlow-chart th {
    background: #f4f6f9;
}

.waterlow-chart select,
.waterlow-chart input {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
}

.main-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.main-table th,
.main-table td {
    border: 1px solid #ccc;
    padding: 10px;
    vertical-align: top;
}

.main-table th {
    background: #f4f6f9;
    text-align: left;
}

.main-table input,
.main-table select,
.main-table textarea {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.main-table textarea {
    min-height: 60px;
    resize: vertical;
}

.med-section {
    display: flex;
    height: 100%;
    gap: 20px;
}

/* Hide radios */
.med-section input[type="radio"] {
    display: none;
}

/* Sidebar */
.med-sidebar {
    width:120px;    
    padding-right:10px;     
    border-right: 1px solid #ddd;
    padding-right: 10px;
}

.med-sidebar label {
    display: block;    
    background: #ecf0f1;
    border-radius: 6px;
    cursor: pointer;
}

.med-sidebar label:hover {
    background: #dcdde1;
}

/* Active tab */
#healthInfo:checked ~ .med-sidebar label[for="healthInfo"],
#medInfo:checked ~ .med-sidebar label[for="medInfo"],
#marChart:checked ~ .med-sidebar label[for="marChart"],
#medAssess:checked ~ .med-sidebar label[for="medAssess"] {
    background: #2c3e50;
    color: white;
}

/* Content area */
.med-content {
    flex: 1;
}

/* Panels hidden by default */
.med-panel {
    display: none;
    background: white;
    padding-left: 20px;
    border-radius: 6px;
}

/* Show active panel */
#healthInfo:checked ~ .med-content #healthInfoContent,
#medInfo:checked ~ .med-content #medInfoContent,
#marChart:checked ~ .med-content #marChartContent,
#medAssess:checked ~ .med-content #medAssessContent,
#medManAssess:checked ~ .content #medManAssessContent,
#medRiskAssess:checked ~ .content #medRiskAssessContent {
    display: block;
}

.med-assessment input[type="radio"] {
    /* width: 100%; */
    display: block;
}

.comment-input {
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    margin: 0;
}

.goal-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.goal-form input,
.goal-form select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

/* Show selected tab content */
#complaintsTab:checked ~ .content #complaintsContent,
#incidentTab:checked ~ .content #incidentContent,
#feedbackTab:checked ~ .content #feedbackContent,
#satisfactionTab:checked ~ .content #satisfactionContent {
    display: block;
}

/* Active tab styling */
#complaintsTab:checked + label,
#incidentTab:checked + label,
#feedbackTab:checked + label,
#satisfactionTab:checked + label {
    background: #2c3e50;
    color: white;
}

.report-hub {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.report-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.report-generator,
.report-output {
    background: #f8f9fb;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
}

.report-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.report-preview {
    background: white;
    border: 1px solid #ddd;
    padding: 15px;
    min-height: 150px;
    border-radius: 6px;
}

.checkbox-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* Show selected financial tab */
#clientFinanceTab:checked ~ .content #clientFinanceContent,
#timesheetTab:checked ~ .content #timesheetContent,
#invoiceTab:checked ~ .content #invoiceContent,
#paymentTab:checked ~ .content #paymentContent {
    display: block;
}

/* Active tab */
#clientFinanceTab:checked + label,
#timesheetTab:checked + label,
#invoiceTab:checked + label,
#paymentTab:checked + label {
    background: #2c3e50;
    color: white;
}

/* Show active tab */
#masterScheduleTab:checked ~ .content #masterScheduleContent,
#rosterTab:checked ~ .content #rosterContent {
    display: block;
}

/* Active tab styling */
#masterScheduleTab:checked + label,
#rosterTab:checked + label {
    background: #2c3e50;
    color: white;
}

/* SHOW CORRECT TAB CONTENT */
#employmentConsent:checked ~ .content #employmentConsentContent,
#gdprConsent:checked ~ .content #gdprConsentContent,
#trainingConsent:checked ~ .content #trainingConsentContent,
#medicationConsent:checked ~ .content #medicationConsentContent,
#supervisionConsent:checked ~ .content #supervisionConsentContent,
#availabilityTab:checked ~ .content #availabilityContent,
#rosterTab:checked ~ .content #rosterContent,
#leaveTab:checked ~ .content #leaveContent {
    display: block;
}

/* Hide radios */
.training-portal .hideRadio {
    display: none;
}

/* Style tab labels */
.training-tab {
    display: inline-block;
    padding: 8px 16px;
    background: #e5e7eb;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    margin-right: 4px;
    font-weight: bold;
    transition: background 0.2s;
}

.training-tab:hover {
    background: #d1d5db;
}

/* Active tab */
#trainingReportTab:checked + label,
#availableTrainingTab:checked + label {
    background: #2c3e50;
    color: white;
}

/* Tab content */
.training-layer {
    display: none;
    background: #f9f9f9;
    padding: 15px;
    border-radius: 6px;
    margin-top: 10px;
}

/* Show content when checked */
#trainingReportTab:checked ~ .training-content #trainingReportContent,
#availableTrainingTab:checked ~ .training-content #availableTrainingContent {
    display: block;
}

/* Course grid */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.course-card {
    background: white;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.course-card h4 {
    margin-top: 0;
    color: #2c3e50;
}

.course-card p {
    font-size: 14px;
    color: #555;
}

.course-card button {
    margin-top: 10px;
    background: #27ae60;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
}

.course-card button:hover {
    background: #219150;
}

.progress-blob-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.progress-blob-wrap svg {
    position: relative;
    z-index: 1;
}

.progress-blob-wrap {
    position: relative;
}

.progress-blob-wrap::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 56px;
    height: 56px;
    transform: translateY(-50%);
    background: #f4f4f5;
    /* Soft, asymmetric blob rather than a plain circle behind the
       progress ring - same organic-shape technique as the Goals
       cards elsewhere in this app. */
    border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
    z-index: 0;
}

.progress-blob-label {
    font-size: 13px;
    font-weight: 600;
    color: #52525b;
}

/* ===== STAFF FINANCE TABS ===== */

/* Show active tab content */
#staffPayrollTab:checked ~ .content #staffPayrollContent,
#staffTimesheetTab:checked ~ .content #staffTimesheetContent,
#staffExpensesTab:checked ~ .content #staffExpensesContent,
#staffPaymentsTab:checked ~ .content #staffPaymentsContent {
    display: block;
}

/* Active tab styling */
#staffPayrollTab:checked + label,
#staffTimesheetTab:checked + label,
#staffExpensesTab:checked + label,
#staffPaymentsTab:checked + label {
    background: #2c3e50;
    color: white;
}

/* ===== STAFF REPORT TABS ===== */
#allReportsTab:checked ~ .content #allReportsContent,
#byStaffTab:checked ~ .content #byStaffContent {
    display: block;
}

#allReportsTab:checked + label,
#byStaffTab:checked + label {
    background: #2c3e50;
    color: white;
}

/* ===== DAILY SCHEDULE STANDALONE PAGE ===== */
/* Tab labels like radio buttons */
.schedule-tab {
    display: inline-block;
    padding: 10px 18px;
    background: #e5e7eb;
    border-radius: 4px 4px 0 0;
    margin-right: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.schedule-tab:hover {
    background: #d1d5db;
}

/* Active tab styling */
#carerTab:checked + label,
#clientTab:checked + label {
    background: #2c3e50;
    color: white;
}

/* Tab content layers */
.schedule-content {
    border: 1px solid #ccc;
    border-top: none;
    padding: 15px;
    border-radius: 0 0 6px 6px;
    background: #f9f9f9;
}

/* Show content when radio is checked */
#carerTab:checked ~ .tab-content #carerContent,
#clientTab:checked ~ .tab-content #clientContent {
    display: block;
}

.content-layer{
    display: none;
}

/* Hide by default
.schedule-content > div {
    display: none;
} */

/* ===== MASTER SCHEDULE ===== */

/* Scoped palette - calm, healthcare-appropriate tones rather than
   sterile gray or generic corporate blue. Scoped to .schedule-page so
   it can't leak into the rest of the app's styling. */
.schedule-page {
    --sched-bg: #EAF1EE;
    --sched-surface: #FFFFFF;
    --sched-ink: #1F2D2B;
    --sched-muted: #5C6B68;
    --sched-border: #DCE6E2;
    --sched-accent: #0E7C7B;
    --sched-accent-dark: #0A5F5E;
    --sched-accent-soft: #DCEEEA;
    --sched-covered: #2F9E44;
    --sched-uncovered: #D9A66C;
    --sched-cancelled: #868E96;
    --sched-covered-past: #7A9B82;
    --sched-uncovered-past: #A08768;
    --sched-cancelled-past: #ABAFB3;
    --sched-missed: #B5574A;

    background: var(--sched-bg);
    min-height: 100vh;
    padding: 24px;
    color: var(--sched-ink);
    box-sizing: border-box;
}

.schedule-page h1 {
    margin: 0 0 20px;
    font-size: 1.6rem;
    color: var(--sched-ink);
}

/* ---- Toolbar: date navigation + search/filters ---- */
.schedule-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--sched-surface);
    border: 1px solid var(--sched-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.schedule-toolbar-left,
.schedule-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sched-btn {
    background: var(--sched-surface);
    border: 1px solid var(--sched-border);
    color: var(--sched-ink);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1;
}

.sched-btn:hover {
    background: var(--sched-accent-soft);
    border-color: var(--sched-accent);
}

.sched-btn-accent {
    background: var(--sched-accent);
    border-color: var(--sched-accent);
    color: white;
    font-weight: 600;
}

.sched-btn-accent:hover {
    background: var(--sched-accent-dark);
}

.sched-date-input,
.sched-search,
.sched-select {
    border: 1px solid var(--sched-border);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 0.9rem;
    color: var(--sched-ink);
    background: var(--sched-surface);
}

.sched-date-input:focus,
.sched-search:focus,
.sched-select:focus {
    outline: 2px solid var(--sched-accent-soft);
    border-color: var(--sched-accent);
}

.sched-search {
    min-width: 180px;
}

.schedule-toolbar-label {
    font-weight: 600;
    color: var(--sched-muted);
    font-size: 0.95rem;
    padding: 0 4px;
    min-width: 130px;
    text-align: center;
}

/* ---- Stats strip ---- */
.schedule-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.release-widget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--sched-surface);
    border: 1px solid var(--sched-border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
}

.release-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 700;
}

.release-calendar-nav button {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--sched-accent);
    padding: 4px 10px;
    cursor: pointer;
}

.release-calendar-weekdays,
.release-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.release-calendar-weekdays span {
    font-size: 11px;
    font-weight: 700;
    color: var(--sched-muted);
    padding-bottom: 6px;
}

.release-cal-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid transparent;
}

.release-cal-cell.empty {
    cursor: default;
}

.release-cal-cell.today {
    border-color: var(--sched-border);
    font-weight: 700;
}

.release-cal-cell.released {
    background: rgba(34, 197, 94, 0.15);
    color: #166534;
    font-weight: 600;
}

.release-cal-cell.selected {
    background: var(--sched-accent);
    color: #fff;
    font-weight: 700;
}

.release-calendar-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--sched-muted);
}

.release-calendar-legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.release-cal-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: transparent;
    border: 1.5px solid var(--sched-border);
}

.release-cal-swatch.released {
    background: rgba(34, 197, 94, 0.4);
    border-color: transparent;
}

.release-cal-swatch.selected {
    background: var(--sched-accent);
    border-color: transparent;
}

.release-quick-select {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sched-stat {
    background: var(--sched-surface);
    border: 1px solid var(--sched-border);
    border-left: 4px solid var(--sched-accent);
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 110px;
}

.sched-stat .sched-stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sched-ink);
    line-height: 1.1;
}

.sched-stat .sched-stat-label {
    font-size: 0.78rem;
    color: var(--sched-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sched-stat.covered { border-left-color: var(--sched-covered); }
.sched-stat.uncovered { border-left-color: var(--sched-uncovered); }
.sched-stat.cancelled { border-left-color: var(--sched-cancelled); }
.sched-stat.completed { border-left-color: var(--sched-covered-past); }
.sched-stat.missed { border-left-color: var(--sched-missed); }

/* ---- Legend ---- */
.schedule-legend {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: var(--sched-muted);
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.covered { background: var(--sched-covered); }
.legend-dot.uncovered { background: var(--sched-uncovered); }
.legend-dot.completed { background: var(--sched-covered-past); }
.legend-dot.cancelled { background: var(--sched-cancelled); }
.legend-dot.missed { background: var(--sched-missed); }

/* ---- Tabs + table card ---- */
.schedule-page .schedule-content {
    background: var(--sched-surface);
    border: 1px solid var(--sched-border);
    border-radius: 10px;
    padding: 18px;
}

.hideRadio {
    display: none;
}

.schedule-table .day-label {
    width: 140px;
    text-align: left;
    padding-left: 10px;
    font-weight: bold;
    white-space: nowrap;
}

/* table-layout:fixed forces every column to the width declared on its
   FIRST-ROW cell, regardless of content - without this, the browser
   auto-sizes each hour column by its own header text width ("9:00" is
   narrower than "10:00"), so columns end up unequal and a 15-minute
   drag/resize doesn't move a visually consistent amount from column to
   column. This is the actual fix for that, not just tuning. */
.schedule-table {
    table-layout: fixed;
}

.schedule-table .time-slot {
    width: 60px;
}

.schedule-table-wrap {
    position: relative; /* containing block for .schedule-overlay */
    overflow-x: auto;
}

/* Single overlay covering the whole table - blocks are positioned
   against this, not against individual table rows. */
.schedule-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* clicks pass through to empty space; .shift below re-enables itself */
}

/* Blue availability strip, carer-view only - same idea/markup as
   carer-profile.js's own copy, just unscoped here since
   main-schedule.html doesn't use the .care-profile-page/.staff-page
   scoping system those pages share. */
.availability-strip {
    background: #2563eb;
    opacity: 0.45;
    border-radius: 5px;
    z-index: 0;
    pointer-events: none;
}

/* Approved leave overrides the blue availability strip entirely for a
   day it covers - same shape/position, solid red so it reads as a
   clear "not available at all" rather than the usual "generally
   available" blue. Full opacity (unlike the blue strip's 0.45) since
   this is a harder, more definite fact than a general availability
   window is. */
.availability-strip.leave-strip {
    background: #dc2626;
    opacity: 0.85;
}

/* Hour-boundary tick marks within the strip - a thin bright line so
   the underlying hour gridlines stay legible even where the solid
   strip would otherwise cover them. Positioned individually by JS
   (see renderAvailabilityStripForRow), not a CSS background pattern
   on the strip itself. Deliberately faint - at full brightness these
   read as visual clutter breaking up an otherwise clean bar, when
   their whole job is just a subtle legibility assist, not a feature
   in their own right. */
.availability-strip-tick {
    width: 1px;
    background: rgba(255, 255, 255, 0.35);
    z-index: 1;
    pointer-events: none;
}

/* Live "now" indicator - only rendered when viewing today. */
.current-time-line {
    position: absolute;
    top: 0;
    width: 2px;
    background: #e0433e;
    pointer-events: none;
    z-index: 5;
}

/* The real, carer-recorded sign-in/out span for a specific visit -
   solid and deliberately distinct from the availability strip's blue
   and the block's own color, so "this is what actually happened" reads
   clearly at a glance against "this is what was scheduled." A crisp
   white outline is what actually makes this read as its own distinct
   element where it overlaps the block beneath it, rather than the two
   colors just blurring together at the seam. */
.actual-time-strip {
    background: #0f766e;
    border-radius: 5px;
    box-shadow: 0 0 0 1.5px #fff;
    z-index: 2;
    pointer-events: none;
}

/* Signed in, but no sign-out was ever recorded for a PAST visit - a
   real gap worth noticing, not something to visually smooth over by
   guessing an end time. Dashed and amber rather than solid, so it
   reads as "needs follow-up" without implying an error occurred. */
.actual-time-strip.incomplete {
    background: repeating-linear-gradient(
        135deg,
        #d97706, #d97706 4px,
        #f3b768 4px, #f3b768 8px
    );
}

.current-time-line::before {
    content: 'now';
    position: absolute;
    top: -16px;
    left: -14px;
    background: #e0433e;
    color: white;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

/* Shift blocks. Left/top/width are set in JS from the *actual* rendered
   position of the row/cell they belong to (measured via
   getBoundingClientRect), so they always land exactly on the gridlines. */
.shift {
    position: absolute;
    border-radius: 5px;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding: 0 4px;
    cursor: grab;
    pointer-events: auto;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: box-shadow 0.1s ease;
}

.shift:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.shift.dragging {
    cursor: grabbing;
    opacity: 0.85;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 10;
}

.shift-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: ew-resize;
}

/* Status colours, matching the roster/schedule modal's language
   (.roster-inner / .schedule-inner .covered etc.) - same hue family,
   refined slightly from the flat CSS-named colours used there.
   covered/uncovered/cancelled are the "live" colour for a visit still
   upcoming or in progress; .past is a dulled version of that SAME hue
   once the visit is actually over - not a different colour family,
   the same one faded. missed (assigned but nobody ever signed in) is
   its own distinct colour rather than a shade of anything else, since
   that's a materially more serious outcome than a visit nobody was
   ever assigned to in the first place. */
.shift.covered {
    background-color: var(--sched-covered);
}

.shift.covered.past {
    background-color: var(--sched-covered-past);
}

.shift.uncovered {
    background-color: var(--sched-uncovered);
    color: #3a2c14;
}

.shift.uncovered.past {
    background-color: var(--sched-uncovered-past);
    color: #3a2c14;
}

.shift.cancelled {
    background-color: var(--sched-cancelled);
    color: #2b2e31;
}

.shift.cancelled.past {
    background-color: var(--sched-cancelled-past);
    color: #2b2e31;
}

.shift.missed {
    background-color: var(--sched-missed);
}

/* Custom tooltip - a real floating element (position:fixed), not a
   ::after pseudo-element on .shift, since .shift has overflow:hidden
   (needed for text-ellipsis on long labels) which would otherwise
   silently clip a tooltip positioned outside the block's own box. */
.schedule-tooltip {
    position: fixed;
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    display: none;
}

.schedule-tooltip.visible {
    display: block;
}

/* ===== FINANCIAL HUB ===== */

.finance-hub {
    --finance-bg: #f6f7fb;
    --finance-surface: #ffffff;
    --finance-ink: #1f2933;
    --finance-muted: #6b7280;
    --finance-border: #e4e7ee;
    --finance-accent: #4f46e5;
    --finance-accent-dark: #4338ca;
    --finance-accent-soft: #eef0fe;
    --finance-money: #15803d;
    --finance-danger: #dc2626;

    font-family: 'Inter', Arial, sans-serif;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* One consistent input/select/textarea look across the whole Finance
   page (rate modals included — this rule sits earlier in the file
   than .rate-modal-card's own input rule, so the modal's rule still
   wins inside the modal; everywhere else in .finance-hub gets this). */
.finance-hub input,
.finance-hub select,
.finance-hub textarea {
    font-family: inherit;
    font-size: 14px;
    color: var(--finance-ink);
    background: var(--finance-surface);
    border: 1.5px solid var(--finance-border);
    border-radius: 9px;
    padding: 8px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.finance-hub input:focus,
.finance-hub select:focus,
.finance-hub textarea:focus {
    outline: none;
    border-color: var(--finance-accent);
    box-shadow: 0 0 0 3px var(--finance-accent-soft);
}

/* Primary buttons within the Finance page pick up the same indigo
   used in the rate modals, so the whole section reads as one system.
   Danger buttons (Deactivate etc.) stay red — untouched. */
.finance-hub .action-btn:not(.danger) {
    background: var(--finance-accent);
}

.finance-hub .action-btn:not(.danger):hover {
    background: var(--finance-accent-dark);
}

/* Tabs spacing */
.finance-hub .consent-tab {
    margin-bottom: 5px;
}

/* Section blocks */
.finance-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sub cards inside tabs */
.finance-card {
    background: #f8f9fb;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

/* Headers inside tabs */
.finance-card h4 {
    margin-top: 0;
    color: #2c3e50;
}

/* Toolbar inside finance tabs */
.finance-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---- Accordion list (Invoice Groups / Invoice Rates) ---- */
.accordion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.accordion-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--finance-surface);
    border: 1.5px solid var(--finance-border);
    border-radius: 10px;
    padding: 13px 16px;
    cursor: pointer;
    font-weight: 600;
    color: var(--finance-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.accordion-row:hover {
    border-color: var(--finance-accent);
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.08);
}

.accordion-row.open {
    border-color: var(--finance-accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--finance-accent-soft);
}

.accordion-row.inactive {
    color: var(--finance-muted);
    font-weight: 500;
}

.accordion-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accordion-status-tag {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--finance-muted);
    background: var(--finance-bg);
    border: 1px solid var(--finance-border);
    border-radius: 999px;
    padding: 2px 8px;
}

.accordion-row .accordion-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--finance-muted);
}

.accordion-count-badge {
    background: var(--finance-bg);
    border: 1px solid var(--finance-border);
    color: var(--finance-muted);
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.accordion-row .accordion-chevron {
    transition: transform 0.15s ease;
    display: inline-block;
    color: var(--finance-accent);
    font-size: 20px;
    line-height: 1;
}

.accordion-row.open .accordion-chevron {
    transform: rotate(90deg);
}

.accordion-panel {
    background: var(--finance-surface);
    border: 1.5px solid var(--finance-accent);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 20px;
    margin-top: -8px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 10px 24px rgba(31, 41, 51, 0.06);
    animation: financePanelIn 0.16s ease;
}

@keyframes financePanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .accordion-panel { animation: none; }
}

/* Small uppercase section divider within an accordion panel, e.g.
   "Invoice charges" / "Tax" on the Invoice Groups panel. */
.finance-subhead {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--finance-accent);
    padding-top: 4px;
    border-top: 1px solid var(--finance-border);
    padding-top: 14px;
    margin-top: -2px;
}

.finance-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--finance-border);
}

/* Assigned-clients chip list, inside a group's accordion panel */
.client-chip-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    background: var(--finance-bg);
    border: 1px solid var(--finance-border);
    border-radius: 10px;
    padding: 8px;
}

.client-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13.5px;
}

.client-chip-remove {
    background: none;
    border: none;
    color: var(--finance-muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 50%;
}

.client-chip-remove:hover {
    background: #fee2e2;
    color: var(--finance-danger);
}

/* Individual rate display within an expanded group (Invoice Rates tab) */
.rate-card {
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.rate-card:hover {
    border-color: var(--finance-accent);
}

.rate-card .rate-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rate-card .rate-card-name {
    font-weight: 600;
    color: var(--finance-ink);
}

.rate-card .rate-card-condition {
    color: var(--finance-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}


/* Small action buttons */
.action-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.action-btn:hover {
    background: #2c80b4;
}

/* Danger button (delete/remove) */
.action-btn.danger {
    background: #e74c3c;
}

.action-btn.danger:hover {
    background: #c0392b;
}

/* Status badges */
.status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

.status.pending {
    background: #f1c40f;
    color: #000;
}

.status.approved {
    background: #2ecc71;
    color: white;
}

.status.rejected {
    background: #e74c3c;
    color: white;
}

/* Highlight totals */
.total-box {
    background: #ecf0f1;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    text-align: right;
}

/* Inline form layout */
.inline-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.inline-form input,
.inline-form select {
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

/* Table tweaks for finance */
.finance-hub .main-table th {
    background: #eef1f5;
}

.finance-hub .main-table td {
    vertical-align: middle;
}

/* Scrollable tables (important later) */
.table-scroll {
    overflow-x: auto;
}

/* Section titles spacing */
.finance-hub h3 {
    margin-bottom: 10px;
}

/* Compact table version */
.compact-table th,
.compact-table td {
    padding: 8px;
    font-size: 13px;
}

/* Badge for rates — green because it's always a money figure */
.rate-badge {
    background: #15803d;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* Grid layout for setup tab */
.finance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

/* Input focus consistency handled by the .finance-hub input/select/
   textarea rule near the top of this section — see there. */

/* ---- Confirm Appointments: preset chips + pagination ---- */
.finance-chip-btn {
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--finance-border);
    background: var(--finance-surface);
    color: var(--finance-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.finance-chip-btn:hover {
    border-color: var(--finance-accent);
    color: var(--finance-accent);
}

.finance-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--finance-muted);
    flex-wrap: wrap;
    gap: 10px;
}

.finance-pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.finance-pagination-controls .rate-btn-ghost {
    padding: 6px 14px;
    font-size: 13px;
}

.finance-pagination-controls .rate-btn-ghost:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#confirmAppointmentsTable td:first-child,
#confirmAppointmentsTable th:first-child {
    width: 34px;
    text-align: center;
}

/* One compact strip for the Confirm Appointments filters: left-align
   everything instead of the default toolbar spread, and let the
   actions dropdown sit flush right via margin-left:auto below. */
.confirm-toolbar {
    justify-content: flex-start;
    align-items: flex-end;
}

/* ---- Generic dropdown-select: a button that opens a floating panel
   (used for both the Clients filter and the Selected-actions menu) ---- */
.dropdown-select {
    position: relative;
}

.dropdown-select-btn {
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

button.dropdown-select-btn {
    color: var(--finance-ink);
    background: var(--finance-surface);
    border: 1.5px solid var(--finance-border);
    border-radius: 9px;
    padding: 8px 12px;
}

button.dropdown-select-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dropdown-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--finance-surface);
    border: 1.5px solid var(--finance-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(31, 41, 51, 0.14);
    z-index: 30;
    overflow: hidden;
}

.dropdown-select-panel-right {
    left: auto;
    right: 0;
}

.dropdown-select-panel input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--finance-border);
    border-radius: 0;
}

.dropdown-select-panel input[type="text"]:focus {
    box-shadow: none;
}

.dropdown-select-options {
    max-height: 220px;
    overflow-y: auto;
}

.cm-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--finance-ink);
}

.cm-option:hover {
    background: var(--finance-accent-soft);
}

.cm-option input[type="checkbox"] {
    pointer-events: none;
}

.cm-empty {
    padding: 8px 14px;
    color: var(--finance-muted);
    font-style: italic;
    font-size: 13px;
}

/* ===== SHOW FINANCE TAB CONTENT ===== */

#setupTab:checked ~ .content #setupTabContent,
#invoiceGroupsTab:checked ~ .content #invoiceGroupsTabContent,
#invoiceRatesTab:checked ~ .content #invoiceRatesTabContent,
#paymentRatesTab:checked ~ .content #paymentRatesTabContent,
#confirmAppointmentsTab:checked ~ .content #confirmAppointmentsTabContent,
#invoicingTab:checked ~ .content #invoicingTabContent,
#timesheetsTab:checked ~ .content #timesheetsTabContent,
#signinExceptionsTab:checked ~ .content #signinExceptionsTabContent {
    display: block;
}

/* Active tab styling */
#setupTab:checked + label,
#invoiceGroupsTab:checked + label,
#invoiceRatesTab:checked + label,
#paymentRatesTab:checked + label,
#confirmAppointmentsTab:checked + label,
#invoicingTab:checked + label,
#timesheetsTab:checked + label,
#signinExceptionsTab:checked + label {
    background: #2c3e50;
    color: white;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

div.service-editor.hidden {
    display: none;
}

.modal-content {
    background: #fff;
    padding: 20px;
    width: 300px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Was missing entirely - the outer .modal overlay is fixed at
       full viewport height and vertically centers this card with no
       height constraint of its own, so any modal whose content grows
       taller than the viewport (a long form, a big calendar, added
       content over time) overflowed off both the top AND bottom of
       the screen with no way to scroll down and reach it - not a
       cosmetic clipping, entire buttons in modal-actions could become
       completely unreachable. This is the actual reason a "Save" or
       "Release" button could go missing in a modal that looked fine
       when it was first built, smaller, and only became a problem
       once more content was added later. Since every modal in the
       app shares this one base rule, fixing it here fixes all of
       them at once, not just whichever modal happened to be
       reported. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}


.modal-content input,
.modal-content select {
    padding: 8px;
    font-size: 14px;
}



.modal-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* ===== RATE MODAL (Invoice Rate / Payment Rate) =====
   Scoped palette + component styles for the two billing-rate modals on
   the Finance page, following the same pattern as .schedule-page:
   variables live on the scoping class so nothing leaks into the
   shared .modal/.modal-content used by every other modal in the app.
   Indigo reads as "precision/setup" and sits apart from the teal used
   for scheduling and the blue used for everyday action buttons, so a
   rate modal is visually recognisable as a configuration surface. */
.rate-modal-card {
    --rate-bg: #f6f7fb;
    --rate-surface: #ffffff;
    --rate-ink: #1f2933;
    --rate-muted: #6b7280;
    --rate-border: #e4e7ee;
    --rate-accent: #4f46e5;
    --rate-accent-dark: #4338ca;
    --rate-accent-soft: #eef0fe;
    --rate-money: #15803d;
    --rate-danger: #dc2626;

    font-family: 'Inter', Arial, sans-serif;
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 0;
    border-radius: 18px;
    gap: 0;
    box-shadow: 0 24px 60px rgba(31, 41, 51, 0.28), 0 2px 8px rgba(31, 41, 51, 0.08);
    animation: rateModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--rate-ink);
}

@keyframes rateModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .rate-modal-card { animation: none; }
}

.rate-modal-card .rate-modal-head {
    position: relative;
    padding: 24px 32px 18px;
    border-bottom: 1px solid var(--rate-border);
}

.rate-modal-card .rate-modal-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--rate-accent);
    margin-bottom: 4px;
}

.rate-modal-card h3.rate-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--rate-ink);
}

.rate-modal-card .rate-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--rate-muted);
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}

.rate-modal-card .rate-modal-close:hover {
    background: var(--rate-bg);
    color: var(--rate-ink);
}

.rate-modal-card .rate-modal-body {
    padding: 20px 32px 4px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Live-updating summary, built from the same describeRateAmounts() /
   describeRateConditions() copy used in the tables, so what you see
   while editing is exactly what will show up in the list afterwards. */
.rate-preview {
    background: var(--rate-accent-soft);
    border: 1px solid var(--rate-border);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    color: var(--rate-ink);
    line-height: 1.5;
}

.rate-preview .rate-preview-amount {
    color: var(--rate-money);
    font-weight: 700;
}

.rate-preview .rate-preview-conditions {
    display: block;
    color: var(--rate-muted);
    margin-top: 2px;
}

.rate-preview-placeholder {
    color: var(--rate-muted, var(--finance-muted, #6b7280));
    font-style: italic;
}

.rate-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rate-section label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--finance-muted, var(--rate-muted));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rate-hint {
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--finance-muted, var(--rate-muted));
}

.rate-modal-card input,
.rate-modal-card select {
    font-family: inherit;
    font-size: 14.5px;
    color: var(--rate-ink);
    background: var(--rate-surface);
    border: 1.5px solid var(--rate-border);
    border-radius: 9px;
    padding: 9px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rate-modal-card input:focus,
.rate-modal-card select:focus {
    outline: none;
    border-color: var(--rate-accent);
    box-shadow: 0 0 0 3px var(--rate-accent-soft);
}

.rate-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: end;
}

.rate-row-2 .rate-section input,
.rate-row-2 .rate-section select {
    width: 100%;
    box-sizing: border-box;
}

.rate-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.rate-tier-grid input {
    width: 100%;
    box-sizing: border-box;
}

/* Toggle switches, replacing plain checkboxes for the two on/off
   settings (Bank Holiday, Active) so they read as switches rather
   than form checkboxes buried among text inputs. */
.rate-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rate-ink);
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}

.rate-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rate-switch-track {
    position: relative;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.rate-switch-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: transform 0.15s ease;
}

.rate-switch input[type="checkbox"]:checked + .rate-switch-track {
    background: var(--rate-accent);
}

.rate-switch input[type="checkbox"]:checked + .rate-switch-track::before {
    transform: translateX(16px);
}

.rate-switch input[type="checkbox"]:focus-visible + .rate-switch-track {
    box-shadow: 0 0 0 3px var(--rate-accent-soft);
}

.rate-toggle-field {
    justify-content: flex-end;
}

.rate-modal-card .rate-modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--rate-surface);
    padding: 18px 32px 24px;
    margin-top: 8px;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--rate-border);
}

.rate-btn-primary,
.rate-btn-ghost {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 9px;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.rate-btn-primary {
    background: var(--rate-accent);
    color: #fff;
}

.rate-btn-primary:hover {
    background: var(--rate-accent-dark);
}

.rate-btn-primary:disabled {
    background: #c7c9d9;
    cursor: not-allowed;
}

.rate-btn-primary:active {
    transform: translateY(1px);
}

.rate-btn-ghost {
    background: transparent;
    border-color: var(--rate-border);
    color: var(--rate-muted);
}

.rate-btn-ghost:hover {
    background: var(--rate-bg, var(--finance-bg));
    color: var(--rate-ink, var(--finance-ink));
}

.rate-btn-ghost:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
    color: var(--rate-muted, var(--finance-muted));
}

@media (max-width: 600px) {
    .rate-modal-card { width: 100%; border-radius: 0; max-height: 100vh; }
    .rate-tier-grid { grid-template-columns: 1fr; }
    .rate-row-2 { grid-template-columns: 1fr; }
}

.staff-img-frame {
    width: 140px;
    height: 140px;
    border-radius: 16px;
    background: #e9eef5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 2px solid #d0d7e2;
}

/* image */
.staff-img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;    
}

/* label (always visible) */
.staff-img-label {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 6px;
    font-size: 12px;
    text-align: center;
    background: rgba(0,0,0,0.55);
    color: white;
}

/* placeholder (dynamic text from JS) */
.staff-img-placeholder {
    color: #7a8699;
    font-size: 13px;
    text-align: center;
}

/* when image exists */
.staff-img-frame.has-image img {
    display: block;
}

.staff-img-frame.has-image .staff-img-placeholder {
    display: none;
}

.mandatory-row {
    background-color: #ffe6f0;
    border-left: 4px solid #ff4d88;
}

tr.editing {
    outline: 2px solid #4a90e2;
}

.status-complete { color: green; font-weight: 600; }
.status-expired { color: red; font-weight: 600; }
.status-never { color: #777; font-style: italic; }

.doc-cell {
    min-width: 120px;
}

.edit-mode {
    margin-top: 4px;
}

/* 🟢 Complete */
.row-complete {
    background-color: #e6f7ec;
}

/* 🟠 Expired */
.row-expired {
    background-color: #fff4e5;
}

/* 🔴 Missing (mandatory only) */
.row-missing {
    background-color: #fdeaea;
}

/* 🟡 Expiring Soon */
.row-warning {
    background-color: #fff8e1;
}

#signerCanvas,
#witnessCanvas {
    width: 400px;
    height: 150px;
    border: 1px solid #000;
    display: block;
    margin-bottom: 15px;
}

.signed-overlay::after {
  content: "SIGNED";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 80px;
  font-weight: 900;
  color: rgba(0,0,0,0.08);
  pointer-events: none;
  z-index: 9999;
}

#signedScreen {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(2px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    z-index: 999;
}

#signedScreen .watermark {
    font-size: 60px;
    font-weight: bold;
    color: rgba(200,0,0,0.2);
    transform: rotate(-20deg);
    margin-bottom: 20px;
    pointer-events: none;
}

.consent-section {
    position: relative;
}

/* Calendar wrapper ONLY inside hub */
.scheduling-hub .calendar-section {
    margin-top: 20px;
    height: 80vh;
    display: flex;
}

.scheduling-hub .calendar-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.scheduling-hub .calendar-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: #111;
    color: white;
}

.scheduling-hub .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #ddd;
    text-align: center;
    font-weight: bold;
}

.scheduling-hub .calendar-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    background: #f5f5f5;
}

.scheduling-hub .calendar-grid .day {
    border: 1px solid #ddd;
    padding: 6px;
    background: white;
    cursor: pointer;
}

.scheduling-hub .calendar-grid .day:hover {
    background: #e8f0ff;
}
.scheduling-hub #calendarGrid {
  display: grid;
  gap: 1px;
  background: #ddd;
}

/* hour headers */
.scheduling-hub .hour-header {
  background: #f4f4f4;
  font-size: 12px;
  text-align: center;
  padding: 6px;
}

/* day labels (left column) */
.scheduling-hub .day-label {
  background: white;
  padding: 10px;
  border-right: 1px solid #ddd;
}

/* time slots */
.scheduling-hub .time-slot {
  background: white;
  min-height: 40px;  
}

.scheduling-hub .time-slot:hover {
  background: #eef6ff;
}

.roster-table, .schedule-table {
    width: 100%;
    border-collapse: collapse;
}

.roster-table th,
.roster-table td, .schedule-table th,
.schedule-table td {
    border: 1px solid #ddd;
    height: 30px;
    text-align: center;
    position: relative;
    padding: 1px 0;
}
.roster-block, .schedule-block {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.roster-inner button, .schedule-inner button {
    width: 100%;
    height: 100%;
    display: flex;    
    font-weight: bold;
    align-items: center;
    justify-content: center;    
    border-radius: 3px;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 3px;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    /* Blocks can be quite narrow for short visits - the emoji + badge
       + initials label needs to truncate gracefully rather than
       overflow or wrap awkwardly. */
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.roster-inner, .schedule-inner {
    justify-content: center;
    width: 100%;
    height: 100%;
}

.roster-inner .covered, .schedule-inner .covered {
    background-color: var(--client-success, #2f9e64);
    color: white;
}

/* Dulled version of the exact same three colours above, applied once
   a visit is actually in the past (or explicitly completed - see
   createBlock/createCarerVisitBlock's own isPast logic) - same hues,
   same reasoning, as Master Schedule's own .shift.covered.past etc,
   so a visit reads the same way regardless of which of the three
   places it's viewed from. partial's own two-colour gradient and
   missed's own distinct colour never get a dulled variant - see their
   own rules further down. */
.roster-inner .covered.past, .schedule-inner .covered.past {
    background-color: #7A9B82;
    color: white;
}

.roster-inner .partial, .schedule-inner .partial {
    background: linear-gradient(to right, var(--client-success, #2f9e64) 50%, var(--client-warn, #c98a2c) 50%);
    color: white;
}

.roster-inner .partial2, .schedule-inner .partial2 {
    background: linear-gradient(to left, var(--client-success, #2f9e64) 50%, var(--client-warn, #c98a2c) 50%);
    color: white;
}

.roster-inner .uncovered, .schedule-inner .uncovered {
    background-color: var(--client-warn, #c98a2c);
    color: #3a2c14;
}

.roster-inner .uncovered.past, .schedule-inner .uncovered.past {
    background-color: #A08768;
    color: #3a2c14;
}

.roster-inner .cancelled, .schedule-inner .cancelled {
    background-color: #868e96;
    color: white;
}

.roster-inner .cancelled.past, .schedule-inner .cancelled.past {
    background-color: #ABAFB3;
    color: #2b2e31;
}

.roster-inner .missed, .schedule-inner .missed {
    background-color: var(--client-danger, #c0392b);
    color: white;
}

/* Carer roster avatar-stack blocks - button keeps the same
   covered/partial/cancelled/completed/missed background colors as
   everywhere else (via .carer-visit-btn.covered etc, same classes),
   the avatar circles float on top in a contrasting light color so
   the initials stay readable regardless of the status color behind
   them. One avatar for a single visit, two overlapping for a
   double/shadow visit - the count itself is the visit-type indicator. */
.carer-visit-btn {
    padding: 0 3px !important;
    gap: 3px;
}

.carer-visit-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #2d2a3d;
    font-size: 8px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.carer-visit-emoji {
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
}

.schedule-table th,
.schedule-table td {
    border: 1px solid #ddd;
    height: 30px;
    text-align: center;
    position: relative;
    padding: 1px 0;
}

.hover-tooltip {
    position: absolute;
    display: none;
    background: #ffffff;
    color: #2d2a3d;
    border-radius: 12px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 12.5px;
    pointer-events: none;
    z-index: 9999;
    width: 240px;
    box-shadow: 0 12px 32px rgba(45, 42, 61, 0.22), 0 2px 8px rgba(45, 42, 61, 0.1);
    overflow: hidden;
}

.hover-tooltip .tooltip-header {
    background: #8b5cf6;
    color: white;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 14px;
}

.hover-tooltip .tooltip-section {
    padding: 8px 14px;
    border-bottom: 1px solid #e8e3f5;
}

.hover-tooltip .tooltip-section:last-child {
    border-bottom: none;
}

.hover-tooltip .tooltip-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8b5cf6;
    margin-bottom: 4px;
}

.hover-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}

.hover-tooltip .tooltip-label {
    color: #8b85a0;
    flex-shrink: 0;
}

.hover-tooltip .tooltip-value {
    color: #2d2a3d;
    font-weight: 600;
    text-align: right;
}

.hover-tooltip .tooltip-unassigned {
    color: #c98a2c;
    font-weight: 600;
}

.roster-calendar {
    width: 100%;
}

.roster-header,
.roster-row {
    display: grid;
    grid-template-columns: 100px 1fr;
}

.roster-corner,
.roster-label {
    padding: 8px;
    border: 1px solid #ddd;
}

.roster-hour {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    border: 1px solid #ddd;
}

.roster-header > div:last-child {
    display: flex;
}

.roster-grid {
    position: relative;
    height: 80px;
    border: 1px solid #ddd;

    background-image:
        repeating-linear-gradient(
            to right,
            transparent,
            transparent 79px,
            #e5e5e5 79px,
            #e5e5e5 80px
        );
}

.roster-block {
    position: absolute;
    height: 30px;    
    top: 1px;
    overflow: hidden;
}

.roster-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.roster-table th,
.roster-table td {
    padding: 0;
}

.day-label {
    width: 100px;
}
/* ===========================================================
   CLIENTS PAGE — scoped palette + components
   Warm coral/blush identity, distinct from Finance's indigo and
   the schedule's teal, so each major area of the app is visually
   recognisable at a glance. Scoped to .clients-page so none of this
   touches .card/.toolbar/.profiles-table on Dashboard or Staff,
   which share those base classes.
   =========================================================== */
.clients-page {
    --client-bg: #faf8ff;
    --client-surface: #ffffff;
    --client-ink: #2d2a3d;
    --client-muted: #8b85a0;
    --client-border: #e8e3f5;
    --client-accent: #8b5cf6;
    --client-accent-dark: #6d28d9;
    --client-accent-soft: #f3eefe;
    --client-success: #2f9e64;
    --client-success-soft: #e8f7ee;
    --client-warn: #c98a2c;
    --client-warn-soft: #fbf1df;
    --client-danger: #d64545;
    --client-danger-soft: #fbeaea;

    font-family: 'Inter', Arial, sans-serif;
    color: var(--client-ink);
}

.clients-page h1 {
    font-weight: 700;
    color: var(--client-ink);
    margin-bottom: 18px;
}

/* ---- Summary cards ---- */
.clients-page .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.clients-page .summary-grid .card {
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
}

.clients-page .summary-grid .card h3 {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--client-muted);
    margin: 0 0 8px;
}

.clients-page .summary-grid .card p {
    font-size: 28px;
    font-weight: 700;
    color: var(--client-accent-dark);
    margin: 0 0 4px;
    line-height: 1;
}

.clients-page .summary-grid .card .card-sub {
    font-size: 12.5px;
    color: var(--client-muted);
}

/* ---- Toolbar ---- */
.clients-page .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.clients-page .toolbar input#searchClient {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
    padding: 10px 16px;
    border: 1.5px solid var(--client-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    background: var(--client-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clients-page .toolbar input#searchClient:focus {
    outline: none;
    border-color: var(--client-accent);
    box-shadow: 0 0 0 3px var(--client-accent-soft);
}

.clients-page .create-btn {
    background: var(--client-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.clients-page .create-btn:hover {
    background: var(--client-accent-dark);
}

.clients-page .create-btn:active {
    transform: translateY(1px);
}

/* ---- Table ---- */
.clients-page .table-container {
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.05);
}

.clients-page table.clients-table {
    width: 100%;
    border-collapse: collapse;
}

.clients-page table.clients-table th {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 12px 16px;
    border: none;
}

.clients-page table.clients-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--client-border);
    font-size: 14.5px;
    vertical-align: middle;
}

.clients-page table.clients-table tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}

.clients-page table.clients-table tbody tr:hover {
    background: var(--client-accent-soft);
}

.clients-page table.clients-table .loading-row,
.clients-page table.clients-table td[colspan] {
    color: var(--client-muted);
    cursor: default;
    text-align: center;
    padding: 28px 16px;
}

/* Name cell: little initials avatar + name, side by side */
.client-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.client-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
}

/* Status pill */
.client-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.client-status-pill.status-active {
    background: var(--client-success-soft);
    color: var(--client-success);
}

.client-status-pill.status-inactive {
    background: #f1eef0;
    color: var(--client-muted);
}

.client-status-pill.status-pending {
    background: var(--client-warn-soft);
    color: var(--client-warn);
}

.clients-page table.clients-table .action-btn {
    background: var(--client-surface);
    color: var(--client-accent-dark);
    border: 1.5px solid var(--client-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.clients-page table.clients-table .action-btn:hover {
    border-color: var(--client-accent);
    background: var(--client-accent-soft);
}

.clients-page table.clients-table .action-btn.danger {
    color: var(--client-danger);
}

.clients-page table.clients-table .action-btn.danger:hover {
    background: var(--client-danger-soft);
    border-color: var(--client-danger);
}

/* ---- Modals (Create / Delete) ----
   New class alongside the shared .modal-content, same pattern as
   Finance's .rate-modal-card — leaves the base .modal/.modal-content
   used elsewhere in the app untouched. */
.client-modal-card {
    font-family: 'Inter', Arial, sans-serif;
    width: 420px;
    max-width: calc(100vw - 32px);
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 60px rgba(45, 42, 61, 0.22), 0 2px 8px rgba(45, 42, 61, 0.08);
    animation: clientModalIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Modifier for modals that need more room - PDF/document viewers,
   signature pads, side-by-side content. Stacks with .client-modal-card
   rather than replacing it. */
.wide-modal-card {
    width: 680px;
}

@keyframes clientModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.client-modal-card h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--client-ink);
}

.client-modal-card input:not([type="checkbox"]):not([type="radio"]),
.client-modal-card select {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--client-ink);
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 9px;
    padding: 9px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-modal-card input:not([type="checkbox"]):not([type="radio"]):focus,
.client-modal-card select:focus {
    outline: none;
    border-color: var(--client-accent);
    box-shadow: 0 0 0 3px var(--client-accent-soft);
}

.client-modal-card label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--client-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: -6px;
}

/* A label wrapping a checkbox/radio (e.g. "Is this the primary
   contact?", the days-of-week toggles) is a different UI pattern
   entirely from a standalone field label sitting above its input -
   the uppercase/negative-margin styling above is designed for that
   latter case and actively breaks the former (overlapping, oddly
   cased inline text next to a checkbox). */
.client-modal-card label:has(input[type="checkbox"]),
.client-modal-card label:has(input[type="radio"]) {
    text-transform: none;
    font-weight: 500;
    color: var(--client-ink);
    margin-bottom: 0;
}

.client-modal-card .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.client-modal-card .modal-actions button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 9px;
    cursor: pointer;
    border: 1.5px solid transparent;
}

.client-modal-card .modal-actions button:first-child {
    background: transparent;
    border-color: var(--client-border);
    color: var(--client-muted);
}

.client-modal-card .modal-actions button:first-child:hover {
    background: var(--client-bg);
    color: var(--client-ink);
}

.client-modal-card .modal-actions button:last-child {
    background: var(--client-accent);
    color: white;
}

.client-modal-card .modal-actions button:last-child:hover {
    background: var(--client-accent-dark);
}

.client-modal-card .modal-actions button:last-child:disabled {
    background: #d6d0e6;
    cursor: not-allowed;
}

/* Days-of-week checkbox group (availability, and anywhere else that
   needs a Mon-Sun multi-select) - pill-style toggles rather than the
   browser-default checkbox+label stack, which reads far better for 7
   short, equal-weight options side by side. Unscoped like
   .client-modal-card itself, so it works the same regardless of
   which page's modal it's used in. */
.days-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -4px;
}

.days-selector label {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #f5f5f8;
    border: 1.5px solid #e2e2ea;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.days-selector label:has(input:checked) {
    background: var(--client-accent-soft, #f3ecff);
    border-color: var(--client-accent, #8b5cf6);
}

/* care-profile-page (staff-blue palette) override - .days-selector
   itself stays generic/unscoped like .client-modal-card, but the
   checked-state accent color should still match whichever page it's
   actually used on. */
.care-profile-page .days-selector label:has(input:checked) {
    background: var(--staff-accent-soft);
    border-color: var(--staff-accent);
}

.days-selector input[type="checkbox"] {
    width: auto;
    margin: 0;
}

@media (max-width: 600px) {
    .clients-page .summary-grid { grid-template-columns: 1fr; }
    .client-modal-card { width: 100%; }
}

/* ===========================================================
   STAFF PAGE — scoped palette + components
   Blue/slate identity, distinct from Clients' coral/purple,
   Finance's indigo, and Schedule's teal. Scoped to .staff-page so
   none of this touches .card/.toolbar/.profiles-table on Dashboard
   or Clients, which share those base classes.
   =========================================================== */
.staff-page {
    --staff-bg: #f5f8ff;
    --staff-surface: #ffffff;
    --staff-ink: #1e293b;
    --staff-muted: #6b7690;
    --staff-border: #e1e7f5;
    --staff-accent: #2563eb;
    --staff-accent-dark: #1d4ed8;
    --staff-accent-soft: #eaf1ff;
    --staff-success: #16a34a;
    --staff-success-soft: #eafbf0;
    --staff-warn: #c98a2c;
    --staff-warn-soft: #fbf1df;
    --staff-danger: #dc2626;
    --staff-danger-soft: #fdeceb;

    font-family: 'Inter', Arial, sans-serif;
    color: var(--staff-ink);
}

.staff-page h1 {
    font-weight: 700;
    color: var(--staff-ink);
    margin-bottom: 18px;
}

/* ---- Summary cards ---- */
.staff-page .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.staff-page .summary-grid .card {
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}

.staff-page .summary-grid .card h3 {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--staff-muted);
    margin: 0 0 8px;
}

.staff-page .summary-grid .card p {
    font-size: 28px;
    font-weight: 700;
    color: var(--staff-accent-dark);
    margin: 0 0 4px;
    line-height: 1;
}

.staff-page .summary-grid .card .card-sub {
    font-size: 12.5px;
    color: var(--staff-muted);
}

/* ---- Toolbar ---- */
.staff-page .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.staff-page .toolbar input#searchStaff {
    flex: 1;
    min-width: 220px;
    max-width: 360px;
    padding: 10px 16px;
    border: 1.5px solid var(--staff-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    background: var(--staff-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.staff-page .toolbar input#searchStaff:focus {
    outline: none;
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px var(--staff-accent-soft);
}

.staff-page .create-btn {
    background: var(--staff-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.staff-page .create-btn:hover {
    background: var(--staff-accent-dark);
}

.staff-page .create-btn:active {
    transform: scale(0.97);
}

/* ---- Table ---- */
.staff-page .table-container {
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
}

.staff-page table.profiles-table {
    width: 100%;
    border-collapse: collapse;
}

.staff-page table.profiles-table th {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-dark);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 12px 16px;
    border: none;
}

.staff-page table.profiles-table td {
    padding: 12px 16px;
    border-top: 1px solid var(--staff-border);
    font-size: 14.5px;
    vertical-align: middle;
}

.staff-page table.profiles-table tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}

.staff-page table.profiles-table tbody tr:hover {
    background: var(--staff-accent-soft);
}

.staff-page table.profiles-table .loading-row,
.staff-page table.profiles-table td[colspan] {
    color: var(--staff-muted);
    cursor: default;
    text-align: center;
    padding: 28px 16px;
}

/* Name cell: initials avatar + name, side by side */
.staff-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.staff-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--staff-accent-soft);
    color: var(--staff-accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
}

/* Employment status pill */
.staff-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.staff-status-pill.status-active {
    background: var(--staff-success-soft);
    color: var(--staff-success);
}

.staff-status-pill.status-inactive {
    background: #f1eef0;
    color: var(--staff-muted);
}

.staff-status-pill.status-on-leave {
    background: var(--staff-warn-soft);
    color: var(--staff-warn);
}

.staff-status-pill.status-unset {
    background: #f1f4fa;
    color: var(--staff-muted);
}

.staff-status-pill.status-danger {
    background: var(--staff-danger-soft);
    color: var(--staff-danger);
}

.staff-status-pill.status-warning {
    background: var(--staff-warn-soft);
    color: var(--staff-warn);
}

.staff-page table.profiles-table .action-btn {
    background: var(--staff-surface);
    color: var(--staff-accent-dark);
    border: 1.5px solid var(--staff-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.staff-page table.profiles-table .action-btn:hover {
    border-color: var(--staff-accent);
    background: var(--staff-accent-soft);
}

.staff-page table.profiles-table .action-btn.danger {
    color: var(--staff-danger);
}

.staff-page table.profiles-table .action-btn.danger:hover {
    background: var(--staff-danger-soft);
    border-color: var(--staff-danger);
}

@media (max-width: 600px) {
    .staff-page .summary-grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   CARE PROFILE (individual staff member) SHELL — scoped to
   .care-profile-page, reusing the .staff-page blue palette above
   for a consistent identity with the staff list. Overrides the
   shared .profile-summary/.profile-sidebar/.profile-content/.card
   rules used by client-profile.html, without touching those base
   rules — mirrors the CLIENT PROFILE SHELL block below exactly,
   just with --staff-* variables instead of --client-*.
   =========================================================== */
.care-profile-page .profile-summary .card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
}

.care-profile-page .staff-img-frame {
    position: relative;
    flex-shrink: 0;
}

.care-profile-page img#staffImg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--staff-accent-soft);
    background: var(--staff-accent-soft);
    display: block;
}

.care-profile-page .staff-img-label {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    color: var(--staff-accent-dark);
    margin-top: 4px;
}

.care-profile-page p#staffFullName {
    font-size: 19px;
    font-weight: 700;
    color: var(--staff-ink);
    margin: 0 0 4px;
}

.care-profile-page p#staffEmail,
.care-profile-page p#staffContact {
    font-size: 13.5px;
    color: var(--staff-muted);
    margin: 0;
}

.care-profile-page .profile-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ---- Sidebar: pill-style nav instead of flat blocks ---- */
.care-profile-page .profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 16px;
    padding: 10px;
    width: 200px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
}

.care-profile-page .profile-sidebar button {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--staff-ink);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.care-profile-page .profile-sidebar button:hover {
    background: var(--staff-accent-soft);
}

.care-profile-page .profile-sidebar button.active {
    background: var(--staff-accent);
    color: white;
    font-weight: 600;
}

.sidebar-badge {
    background: var(--staff-danger, #dc2626);
    color: white;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    margin-left: auto;
}

.care-profile-page .profile-sidebar button.active .sidebar-badge {
    background: white;
    color: var(--staff-accent-dark, #1d4ed8);
}

/* ---- Content area ---- */
.care-profile-page .profile-content {
    flex: 1;
    min-width: 0;
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
}

/* Generic form styling for every carer-sections/*.html fragment
   loaded inside #staffSectionContent - scoped here so personal.html,
   contact.html, etc. all inherit it automatically without editing
   each fragment, while client-sections/*.html (loaded on a different
   page) is untouched. */
.care-profile-page .form-card,
.care-profile-page .form-section {
    background: var(--staff-bg);
    border: 1px solid var(--staff-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.care-profile-page .form-row label,
.care-profile-page .form-card label,
.care-profile-page legend {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--staff-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.care-profile-page input:not([type="checkbox"]):not([type="radio"]),
.care-profile-page select,
.care-profile-page textarea {
    font-family: 'Inter', Arial, sans-serif;
    border: 1.5px solid var(--staff-border);
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.care-profile-page input:not([type="checkbox"]):not([type="radio"]):focus,
.care-profile-page select:focus,
.care-profile-page textarea:focus {
    outline: none;
    border-color: var(--staff-accent);
    box-shadow: 0 0 0 3px var(--staff-accent-soft);
}

.care-profile-page .btn-save,
.care-profile-page #saveCarerBtn {
    background: var(--staff-accent);
    color: white;
    border: none;
    border-radius: 9px;
    padding: 9px 20px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
    /* .form-card is `display:flex; flex-direction:column` with no
       align-items set, so its default `stretch` was pulling every
       bare <button> direct child to the full width of the card -
       this undoes that specifically for buttons, without touching
       .form-row/other children that are meant to stay full-width. */
    align-self: flex-start;
}

.care-profile-page .btn-save:hover,
.care-profile-page #saveCarerBtn:hover {
    background: var(--staff-accent-dark);
}

.care-profile-page .create-btn {
    align-self: flex-start;
}

/* ---- Checklist / report hub ---- */
.care-profile-page .report-hub {
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
}

.care-profile-page .report-hub .btn-save {
    margin-top: 16px;
}

/* ---- Tables (Checklist, Consent, Office Support) ---- */
.care-profile-page table.main-table,
.care-profile-page table.consent-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--staff-surface);
    border-radius: 10px;
    overflow: hidden;
}

.care-profile-page table.main-table th,
.care-profile-page table.consent-table th {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-dark);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: none;
}

.care-profile-page table.main-table td,
.care-profile-page table.consent-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--staff-border);
    font-size: 13.5px;
    vertical-align: middle;
}

.care-profile-page .action-btn {
    background: var(--staff-surface);
    color: var(--staff-accent-dark);
    border: 1.5px solid var(--staff-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.care-profile-page .action-btn:hover {
    border-color: var(--staff-accent);
    background: var(--staff-accent-soft);
}

.care-profile-page .action-btn.danger {
    color: var(--staff-danger);
}

.care-profile-page .action-btn.danger:hover {
    background: var(--staff-danger-soft);
    border-color: var(--staff-danger);
}

/* ---- Tabs (Office Support / Scheduling / Finance / Reports / Training) ---- */
.care-profile-page .consent-tab,
.care-profile-page .training-tab {
    color: var(--staff-muted);
}

.care-profile-page .hideRadio:checked + label.consent-tab,
.care-profile-page .hideRadio:checked + label.training-tab {
    border-left: 4px solid var(--staff-accent);
    color: var(--staff-accent-dark);
    font-weight: 600;
}

.care-profile-page .create-btn {
    background: var(--staff-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.care-profile-page .create-btn:hover {
    background: var(--staff-accent-dark);
}

.care-profile-page .finance-hint {
    font-size: 13px;
    color: var(--staff-muted);
    margin: 8px 0 20px;
}

/* ---- Roster grid (My Roster tab) - mirrors the client-profile-page
   version of these same rules, --staff-* instead of --client-*, minus
   the drag-and-drop-specific ones (.roster-drop-target/.roster-
   draggable), since carers can't drag their own visits to reschedule -
   that stays an office-staff action. ---- */
.care-profile-page #carer-calendar-roster {
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 14px;
    padding: 14px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
}

.care-profile-page #availability-calendar {
    background: var(--staff-surface);
    border: 1.5px solid var(--staff-border);
    border-radius: 14px;
    padding: 14px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.05);
}

.care-profile-page #availabilityGrid .time-slot {
    cursor: pointer;
}

.care-profile-page #availabilityGrid .time-slot:hover {
    background-color: var(--staff-accent-soft);
}

/* Thick purple bar - the main content here, not a background layer
   like the thin strip on the Roster tab, so it gets real height and
   its own hover/click affordance rather than the roster block's
   compact styling. */
.care-profile-page .availability-bar {
    background: #7C3AED;
    border-radius: 6px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: filter 0.12s ease;
}

.care-profile-page .availability-bar:hover {
    filter: brightness(1.1);
}

.care-profile-page .roster-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.care-profile-page .roster-table th {
    background: var(--staff-accent-soft);
    color: var(--staff-accent-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 7px 2px;
    border: 1px solid var(--staff-border);
    white-space: nowrap;
}

.care-profile-page .roster-table th:first-child {
    width: 92px;
}

.care-profile-page .roster-table .day-label {
    background: var(--staff-bg);
    color: var(--staff-ink);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    padding: 6px 10px;
    border: 1px solid var(--staff-border);
}

.care-profile-page .roster-table .time-slot {
    border: 1px solid var(--staff-border);
    height: 28px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--staff-border) 0px,
        var(--staff-border) 4px,
        transparent 4px,
        transparent 8px
    );
    background-position: 50% 0;
    background-size: 1px 100%;
    background-repeat: repeat-y;
}

.care-profile-page .roster-block {
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.care-profile-page .roster-table-wrap {
    position: relative;
}

.care-profile-page .roster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Blue availability strip - lower z-index than the visit blocks
   (.roster-block has no explicit z-index, so it stacks on top purely
   by being appended after these in the DOM; z-index here is just
   belt-and-braces so this can never visually cover a real visit
   block even if that DOM order assumption ever changes). */
.care-profile-page .availability-strip {
    background: var(--staff-accent, #2563eb);
    opacity: 0.55;
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
}

/* Higher specificity than the plain .care-profile-page .availability-strip
   rule above on purpose (three classes vs two) - without this, that
   rule's blue silently won regardless of leave-strip being present,
   since equal-specificity rules fall back to source order, and that
   one comes later in this file. This is the actual reason the leave
   strip kept rendering blue instead of red on this page even with the
   correct classes already on the element. */
.care-profile-page .availability-strip.leave-strip {
    background: #dc2626;
    opacity: 0.85;
}

.care-profile-page .availability-strip-tick {
    width: 1px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 800px) {
    .care-profile-page .profile-layout {
        flex-direction: column;
    }
    .care-profile-page .profile-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ===========================================================
   CLIENT PROFILE SHELL — scoped to .client-profile-page, reusing
   the .clients-page coral palette above for a consistent identity
   with the client list. Overrides the shared .profile-summary/
   .profile-sidebar/.profile-content/.card rules used by
   care-profile.html (staff), without touching those base rules.
   =========================================================== */
.client-profile-page .profile-summary .card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
}

.client-profile-page .profile-summary img#clientImg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--client-accent-soft);
    background: var(--client-accent-soft);
    flex-shrink: 0;
}

.client-profile-page .profile-summary p#clientName {
    font-size: 19px;
    font-weight: 700;
    color: var(--client-ink);
    margin: 0 0 4px;
}

.client-profile-page .profile-summary p#clientEmail,
.client-profile-page .profile-summary p#clientContact {
    font-size: 13.5px;
    color: var(--client-muted);
    margin: 0;
}

.client-profile-page .client-report-card {
    margin-left: auto;
    display: flex;
    gap: 22px;
    padding-left: 22px;
    border-left: 1.5px solid var(--client-border);
}

.client-profile-page .report-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 64px;
}

.client-profile-page .report-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--client-accent-dark);
    line-height: 1.1;
}

.client-profile-page .report-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--client-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 3px;
}

@media (max-width: 900px) {
    .client-profile-page .client-report-card {
        display: none;
    }
}

.client-profile-page .profile-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* ---- Sidebar: pill-style nav instead of flat blocks ---- */
.client-profile-page .profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 16px;
    padding: 10px;
    width: 240px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.05);
}

.client-profile-page .profile-sidebar button {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--client-ink);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.client-profile-page .profile-sidebar button:hover {
    background: var(--client-accent-soft);
}

.client-profile-page .profile-sidebar button.active {
    background: var(--client-accent);
    color: white;
    font-weight: 600;
}

.client-profile-page .profile-sidebar .sidebar-icon {
    font-size: 15px;
    line-height: 1;
}

/* ---- Content area ---- */
.client-profile-page .profile-content {
    flex: 1;
    min-width: 0;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.05);
}

/* Generic form styling for every client-sections/*.html fragment
   loaded inside #sectionContainer — scoped here so personal.html,
   goals.html, services.html etc. all inherit it automatically without
   editing each fragment, while carer-sections/*.html (loaded on a
   different page) is untouched. */
.client-profile-page .form-card,
.client-profile-page .form-section {
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
}

.client-profile-page .form-row label,
.client-profile-page .form-card label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--client-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.client-profile-page input,
.client-profile-page select,
.client-profile-page textarea {
    font-family: 'Inter', Arial, sans-serif;
    border: 1.5px solid var(--client-border);
    border-radius: 8px;
    padding: 8px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-profile-page input:focus,
.client-profile-page select:focus,
.client-profile-page textarea:focus {
    outline: none;
    border-color: var(--client-accent);
    box-shadow: 0 0 0 3px var(--client-accent-soft);
}

.client-profile-page .btn-save {
    background: var(--client-accent);
    color: white;
    border: none;
    border-radius: 9px;
    padding: 9px 20px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.client-profile-page .btn-save:hover {
    background: var(--client-accent-dark);
}

@media (max-width: 800px) {
    .client-profile-page .profile-layout {
        flex-direction: column;
    }
    .client-profile-page .profile-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ---- Client profile: Financial Information tab (client.finance.html) ---- */
.client-profile-page .finance-summary-card {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 8px;
}

.client-profile-page .finance-summary-item label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--client-muted);
    margin-bottom: 2px;
}

.client-profile-page .finance-summary-item p {
    margin: 0;
    font-weight: 600;
    color: var(--client-ink);
}

.client-profile-page .finance-summary-card .btn-save {
    margin-left: auto;
    text-decoration: none;
    display: inline-block;
}

.client-profile-page .finance-hint {
    font-size: 13px;
    color: var(--client-muted);
    margin: 8px 0 20px;
}

/* ---- Client profile: Checklist tab (client-sections/checklists.html) ---- */
.client-profile-page .checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.client-profile-page .checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.client-profile-page .checklist-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 3px;
    flex-shrink: 0;
}

.client-profile-page .checklist-item.checklist-ok .checklist-dot {
    background: var(--client-success);
}

.client-profile-page .checklist-item.checklist-pending .checklist-dot {
    background: var(--client-warn);
}

.client-profile-page .checklist-item strong {
    display: block;
    color: var(--client-ink);
    font-size: 14.5px;
}

.client-profile-page .checklist-status {
    font-size: 13px;
    color: var(--client-muted);
    margin-top: 2px;
}

/* ---- Invoicing: "filtered to a client" chip, set when arriving from
   a client's own Financial Information tab ---- */
.invoice-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--finance-accent-soft, #eef0fe);
    color: var(--finance-accent-dark, #4338ca);
    border-radius: 999px;
    padding: 5px 8px 5px 14px;
    font-size: 13.5px;
    font-weight: 600;
}

.invoice-filter-chip button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 50%;
}

.invoice-filter-chip button:hover {
    background: rgba(79, 70, 229, 0.18);
}

/* ---- Client profile: service history panel (Services of Interest) ---- */
.client-profile-page .service-history-panel {
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    font-size: 13px;
}

.client-profile-page .service-history-entry {
    padding: 6px 0;
    border-bottom: 1px solid var(--client-border);
}

.client-profile-page .service-history-entry:last-child {
    border-bottom: none;
}

.client-profile-page .service-history-meta {
    display: flex;
    justify-content: space-between;
    color: var(--client-muted);
    font-size: 12px;
}

.client-profile-page .service-history-status {
    font-weight: 600;
}

.client-profile-page .service-history-details {
    margin-top: 3px;
    color: var(--client-ink);
}

/* ---- Client profile: Consents status summary ----
   Replaces the old full-block "SIGNED" overlay. When a consent type
   is signed, its whole form is hidden and this table-style summary
   shows instead — the form only comes back if "New Consent" is
   deliberately clicked (see applyConsentState() / requestNewConsent()). */
.client-profile-page .consent-status-summary {
    max-width: 480px;
    margin: 16px 0;
    padding: 20px 24px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.06);
}

.client-profile-page .consent-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.client-profile-page .consent-summary-table th,
.client-profile-page .consent-summary-table td {
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid var(--client-border);
    font-size: 14px;
}

.client-profile-page .consent-summary-table tr:last-child th,
.client-profile-page .consent-summary-table tr:last-child td {
    border-bottom: none;
}

.client-profile-page .consent-summary-table th {
    width: 110px;
    color: var(--client-muted);
    font-weight: 600;
}

.client-profile-page .consent-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--client-success-soft);
    color: var(--client-success);
}

.client-profile-page .consent-status-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.client-profile-page .consent-status-actions .btn-save {
    text-decoration: none;
    display: inline-block;
}

.client-profile-page .btn-save-secondary {
    background: transparent;
    color: var(--client-ink);
    border: 1.5px solid var(--client-border);
    border-radius: 9px;
    padding: 9px 18px;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.client-profile-page .btn-save-secondary:hover {
    background: var(--client-bg);
    border-color: var(--client-accent);
}

/* ===========================================================
   CLIENT PROFILE — polish pass across the embedded sections
   (personal / office-support / services / goals / scheduling).
   Scoped to .client-profile-page throughout, same reasoning as
   everywhere else in this app: the base classes below (.consent-tab,
   .section-header etc.) are shared with other pages, so nothing here
   is safe to change globally.
   =========================================================== */

/* ---- Pill-style tabs — covers Scheduling's Schedule/Roster tabs,
   Consents' six tabs, and Medication's sub-tabs, all at once, since
   they all share the .consent-tab class. Matched by ID as well as
   class so this reliably outranks the older #id:checked + label
   rules it's replacing, rather than depending on file order. ---- */
.client-profile-page .consent-tab {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-family: 'Inter', Arial, sans-serif;
    margin-right: 6px;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.client-profile-page .consent-tab:hover {
    background: var(--client-border);
}

.client-profile-page #fullConsent:checked + label,
.client-profile-page #poaInfo:checked + label,
.client-profile-page #medicationConsent:checked + label,
.client-profile-page #mcaCare:checked + label,
.client-profile-page #unableSign:checked + label,
.client-profile-page #bestInterest:checked + label,
.client-profile-page #masterScheduleTab:checked + label,
.client-profile-page #rosterTab:checked + label,
.client-profile-page #selfMedication:checked + label,
.client-profile-page #medicationAdmin:checked + label,
.client-profile-page #mcaTab:checked + label,
.client-profile-page #bestInterestTab:checked + label {
    background: var(--client-accent);
    color: white;
}

/* ---- Section headers/descriptions, used across most fragments ---- */
.client-profile-page .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.client-profile-page .section-header h3 {
    margin: 0;
    color: var(--client-ink);
}

.client-profile-page .section-desc,
.client-profile-page .finance-hint {
    color: var(--client-muted);
    font-size: 13.5px;
}

.client-profile-page .section-divider {
    border: none;
    border-top: 1px solid var(--client-border);
    margin: 20px 0;
}

/* ---- Scheduling: grid + blocks ---- */
.client-profile-page .scheduling-hub {
    font-family: 'Inter', Arial, sans-serif;
}

.client-profile-page #calendar-app,
.client-profile-page #calendar-roster {
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 14px;
    padding: 14px;
    overflow-x: auto;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.05);
}

.client-profile-page .roster-table,
.client-profile-page .schedule-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.client-profile-page .roster-table th,
.client-profile-page .schedule-table th {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 7px 2px;
    border: 1px solid var(--client-border);
    white-space: nowrap;
}

/* First column (day label) gets real width; the rest split whatever's
   left evenly — explicit widths here matter because table-layout:fixed
   takes its column widths from this header row alone, which is what
   was letting the hour labels get squeezed down to nothing. */
.client-profile-page .roster-table th:first-child,
.client-profile-page .schedule-table th:first-child {
    width: 92px;
}

.client-profile-page .roster-table .day-label,
.client-profile-page .schedule-table .day-label {
    background: var(--client-bg);
    color: var(--client-ink);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    padding: 6px 10px;
    border: 1px solid var(--client-border);
}

.client-profile-page .roster-table .time-slot,
.client-profile-page .schedule-table .time-slot {
    border: 1px solid var(--client-border);
    height: 28px;
    /* A broken (dashed) line marking the half-hour point in every
       hour column, layered on top of the grid's own borders — purely
       visual, doesn't change the grid's actual hourly resolution. */
    background-image: repeating-linear-gradient(
        to bottom,
        var(--client-border) 0px,
        var(--client-border) 4px,
        transparent 4px,
        transparent 8px
    );
    background-position: 50% 0;
    background-size: 1px 100%;
    background-repeat: repeat-y;
}

/* Row highlight while dragging a roster block over it — background-
   color rather than background, so it doesn't erase the half-hour
   dashed line underneath. */
.client-profile-page tr.roster-drop-target .time-slot {
    background-color: var(--client-accent-soft);
}

.client-profile-page .roster-block,
.client-profile-page .schedule-block {
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.client-profile-page .roster-table-wrap {
    position: relative; /* containing block for .roster-overlay */
}

/* Single overlay covering the whole roster table - blocks are
   positioned against this, not against individual table rows. Same
   pattern as .schedule-overlay (main-schedule.js), reused directly. */
.client-profile-page .roster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Roster blocks are draggable — grab cursor while idle, dimmed while
   actively being dragged. Schedule blocks never get .roster-draggable
   at all, so they keep the plain default cursor. */
.client-profile-page .roster-draggable {
    cursor: grab;
}

.client-profile-page .roster-draggable.dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* ---- Client profile: MAR Chart (Medication tab) ---- */
.client-profile-page .mar-client-info {
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 12px 0;
}

.client-profile-page .mar-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 20px;
}

.client-profile-page .mar-info-grid span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--client-muted);
    margin-bottom: 2px;
}

.client-profile-page .mar-info-grid strong {
    color: var(--client-ink);
    font-weight: 600;
    font-size: 13.5px;
}

.client-profile-page .mar-legend-key {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    padding: 10px 14px;
}

.client-profile-page .mar-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

.client-profile-page .mar-toolbar button {
    width: auto;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 8px;
}

.client-profile-page .mar-toolbar input[type="date"] {
    padding: 6px 10px;
}

.client-profile-page .mar-chart-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.client-profile-page .mar-med-block {
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    overflow: hidden;
}

.client-profile-page .mar-med-header {
    background: var(--client-accent-soft);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.client-profile-page .mar-med-header strong {
    color: var(--client-accent-dark);
    font-size: 15px;
}

.client-profile-page .mar-med-header span {
    color: var(--client-muted);
    font-size: 12px;
}

.client-profile-page .mar-med-block .mar-table {
    display: block;
    overflow-x: auto;
}

.client-profile-page .mar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.client-profile-page .mar-table th {
    background: var(--client-bg);
    color: var(--client-ink);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 6px 4px;
    border: 1px solid var(--client-border);
    white-space: nowrap;
}

.client-profile-page .mar-table td {
    border: 1px solid var(--client-border);
    text-align: center;
    padding: 5px;
    min-width: 34px;
}

.client-profile-page .mar-row-label {
    text-align: left !important;
    font-weight: 600;
    color: var(--client-muted);
    background: var(--client-bg);
    white-space: nowrap;
    min-width: 70px !important;
}

.client-profile-page .mar-cell {
    cursor: pointer;
    transition: background 0.12s ease;
}

.client-profile-page .mar-cell:hover {
    background: var(--client-accent-soft);
}

.client-profile-page .mar-code {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    color: white;
}

/* Grouped by meaning rather than one colour per code: completed/given
   variants read as success, refusal/concern reads as danger, and
   everything administratively neutral (absent, no stock, PRN-only...)
   reads as a shared amber "needs a look" tone. */
.client-profile-page .mar-code-ADM,
.client-profile-page .mar-code-PRO,
.client-profile-page .mar-code-AST,
.client-profile-page .mar-code-C,
.client-profile-page .mar-code-TC,
.client-profile-page .mar-code-F {
    background: var(--client-success);
}

.client-profile-page .mar-code-R,
.client-profile-page .mar-code-CC,
.client-profile-page .mar-code-N {
    background: var(--client-danger);
}

.client-profile-page .mar-code-X,
.client-profile-page .mar-code-NR,
.client-profile-page .mar-code-A,
.client-profile-page .mar-code-S,
.client-profile-page .mar-code-NS,
.client-profile-page .mar-code-AT,
.client-profile-page .mar-code-M,
.client-profile-page .mar-code-PRN {
    background: var(--client-warn);
    color: #3a2c14;
}

.client-profile-page .mar-comment-dot {
    color: var(--client-accent);
    font-size: 8px;
    cursor: help;
}

.client-profile-page .mar-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--client-muted);
}

.client-profile-page .mar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.client-profile-page .mar-legend-item b {
    color: var(--client-ink);
}

/* ---- Client profile: shared .main-table styling (Health Information,
   Finance's invoices table, and anywhere else it's used within this
   page) — was plain grey #ccc borders before, disconnected from the
   rest of the page's design language. ---- */
.client-profile-page .main-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    overflow: hidden;
}

.client-profile-page .main-table th {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 10px 12px;
    border: none;
    border-bottom: 1.5px solid var(--client-border);
}

.client-profile-page .main-table td {
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--client-border);
    vertical-align: top;
    font-size: 13.5px;
}

.client-profile-page .main-table tbody tr:last-child td {
    border-bottom: none;
}

.client-profile-page .main-table tbody tr:hover {
    background: var(--client-bg);
}

.client-profile-page .main-table input,
.client-profile-page .main-table select,
.client-profile-page .main-table textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ---- Medication sub-nav: horizontal strip instead of a side column,
   freeing up width for the content itself (the MAR Chart especially
   needs the room for its 28-day grid). Same radio/label mechanism as
   before, just restructured — and styled to match the pill-tab
   language used for Scheduling/Consents elsewhere on this page. ---- */
.client-profile-page .med-section {
    flex-direction: column;
    gap: 0;
}

.client-profile-page .med-sidebar {
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    border-right: none;
    border-bottom: 1.5px solid var(--client-border);
    padding: 0 0 14px;
    margin-bottom: 16px;
}

.client-profile-page .med-sidebar label {
    width: auto;
    margin: 0;
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13.5px;
}

.client-profile-page .med-sidebar label:hover {
    background: var(--client-border);
}

.client-profile-page #healthInfo:checked ~ .med-sidebar label[for="healthInfo"],
.client-profile-page #medInfo:checked ~ .med-sidebar label[for="medInfo"],
.client-profile-page #marChart:checked ~ .med-sidebar label[for="marChart"],
.client-profile-page #medAssess:checked ~ .med-sidebar label[for="medAssess"] {
    background: var(--client-accent);
    color: white;
}

/* .med-panel only ever had padding-left set, nothing on top/right/
   bottom — so content (buttons, tables) sat flush against those three
   edges instead of properly inset within the white card. */
.client-profile-page .med-panel {
    padding: 22px 26px;
}

/* Folder-tab style, simplified per feedback - the skewed trapezoid
   version read as too playful/game-like for this app. Plain
   rectangles with rounded top corners only now - no skew, no
   clip-path - the classic, understated file-folder-tab look, with
   the active tab in the page's purple and a shared baseline underneath
   tying the row together. Wraps onto multiple lines if 11 tabs don't
   fit on one, rather than scrolling. */
.client-profile-page .care-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.client-profile-page .care-sidebar {
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 4px;
    padding: 10px 6px 0;
    margin-bottom: 0;
    border-bottom: 3px solid var(--client-accent);
}

.client-profile-page .care-sidebar label.sideTab {
    width: auto;
    margin: 0;
    background: #ececf4;
    color: var(--client-muted);
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 10px 22px;
    font-weight: 600;
    font-size: 13px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.client-profile-page .care-sidebar label.sideTab:hover {
    background: #dcdce8;
}

.client-profile-page .care-sidebar label.sideTab.active {
    background: var(--client-accent);
    color: white;
}

.client-profile-page .content {
    padding-left: 0;
}

.client-profile-page .tabPanel {
    padding: 22px 26px;
}

/* ---- Section header + action button row (Health Information, and
   anywhere else .form-header-grid is used) ---- */
.client-profile-page .form-header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
}

.client-profile-page .form-header-grid h3 {
    margin: 0;
}

/* ---- Client profile: .consent-table overflow fix (used by Goals,
   among others) — width:100% alone doesn't stop a table from growing
   past its container if its cells' content (unconstrained inputs)
   has its own intrinsic minimum width. table-layout:fixed forces
   columns to respect the 100%, and the inputs/selects inside then
   need to fill their cell rather than imposing their own width. ---- */
.client-profile-page .consent-table {
    table-layout: fixed;
}

.client-profile-page .consent-table input,
.client-profile-page .consent-table select {
    width: 100%;
    box-sizing: border-box;
}

/* ---- Client profile: reports & checklists list (Checklists and
   Reports tab) — a compact list rather than large cards, since this
   is meant to scale to 30+ custom checklists. ---- */
.client-profile-page .report-section-header,
.reports-page .report-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}

.client-profile-page .section-header-title,
.reports-page .section-header-title {
    margin: 0;
    color: var(--client-ink);
    font-size: 16px;
}

.client-profile-page .report-list,
.reports-page .report-list {
    margin-top: 10px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    overflow: hidden;
}

.client-profile-page .report-list-row,
.reports-page .report-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--client-border);
}

.client-profile-page .report-list-row:last-child,
.reports-page .report-list-row:last-child {
    border-bottom: none;
}

.client-profile-page .report-list-row:hover,
.reports-page .report-list-row:hover {
    background: var(--client-bg);
}

.client-profile-page .report-list-row strong,
.reports-page .report-list-row strong {
    color: var(--client-ink);
    font-size: 13.5px;
}

.client-profile-page .report-list-sub,
.reports-page .report-list-sub {
    color: var(--client-muted);
    font-size: 12px;
    margin-top: 1px;
}

.client-profile-page .template-section-checks,
.reports-page .template-section-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    padding: 12px 14px;
}

.client-profile-page .template-section-checks label,
.reports-page .template-section-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--client-ink);
    text-transform: none;
    letter-spacing: normal;
}

/* ---- Client profile: report canvas designer (Checklists and Reports
   tab) — a real drag/resize page layout tool, not just a section
   picker. Elements are absolutely positioned in mm to match the PDF
   1:1, scaled up for on-screen editing via DESIGNER_MM_TO_PX. ---- */
.client-profile-page .report-designer,
.reports-page .report-designer {
    margin-top: 10px;
}

.client-profile-page .designer-toolbar,
.reports-page .designer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.client-profile-page .designer-toolbar input[type="text"],
.reports-page .designer-toolbar input[type="text"] {
    flex: 1;
    min-width: 220px;
    padding: 9px 14px;
    border: 1.5px solid var(--client-border);
    border-radius: 9px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
}

.client-profile-page .designer-careplan-toggle,
.reports-page .designer-careplan-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--client-muted, #6b7280);
    white-space: nowrap;
    cursor: pointer;
}

.client-profile-page .designer-careplan-toggle input[type="checkbox"],
.reports-page .designer-careplan-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.client-profile-page .designer-toolbar-actions,
.reports-page .designer-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.client-profile-page .designer-tool-btn,
.reports-page .designer-tool-btn {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.client-profile-page .designer-tool-btn:hover,
.reports-page .designer-tool-btn:hover {
    background: var(--client-border);
}

.client-profile-page .designer-body,
.reports-page .designer-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.client-profile-page .designer-canvas-wrap,
.reports-page .designer-canvas-wrap {
    flex: 1;
    overflow: auto;
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 12px;
    padding: 16px;
    max-height: 75vh;
}

.client-profile-page .designer-canvas,
.reports-page .designer-canvas {
    position: relative;
    background: white;
    box-shadow: 0 4px 20px rgba(45, 42, 61, 0.15);
    margin: 0 auto;
}

.client-profile-page .designer-element,
.reports-page .designer-element {
    position: absolute;
    border: 1px dashed var(--client-border);
    cursor: move;
    box-sizing: border-box;
    overflow: hidden;
    user-select: none;
}

.client-profile-page .designer-element.selected,
.reports-page .designer-element.selected {
    border: 1.5px solid var(--client-accent);
    box-shadow: 0 0 0 3px var(--client-accent-soft);
}

.client-profile-page .designer-el-text,
.reports-page .designer-el-text {
    padding: 2px;
    color: var(--client-ink);
    overflow: hidden;
    white-space: pre-wrap;
}

.client-profile-page .designer-el-image,
.reports-page .designer-el-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-profile-page .designer-el-placeholder,
.reports-page .designer-el-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 4px;
}

.client-profile-page .designer-resize-handle,
.reports-page .designer-resize-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 10px;
    height: 10px;
    background: var(--client-accent);
    border: 1.5px solid white;
    border-radius: 50%;
    cursor: nwse-resize;
}

.client-profile-page .designer-properties,
.reports-page .designer-properties {
    width: 260px;
    flex-shrink: 0;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 12px;
}

.client-profile-page .designer-properties label,
.reports-page .designer-properties label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--client-muted);
    margin-bottom: -4px;
}

.client-profile-page .designer-properties select,
.reports-page .designer-properties select,
.client-profile-page .designer-properties input,
.reports-page .designer-properties input,
.client-profile-page .designer-properties textarea,
.reports-page .designer-properties textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 13px;
    padding: 7px 10px;
    border: 1.5px solid var(--client-border);
    border-radius: 8px;
}

.client-profile-page .designer-properties-header,
.reports-page .designer-properties-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.client-profile-page .designer-properties-header strong,
.reports-page .designer-properties-header strong {
    color: var(--client-ink);
    font-size: 14px;
}

@media (max-width: 900px) {
    .client-profile-page .designer-body,
    .reports-page .designer-body {
        flex-direction: column;
    }
    .client-profile-page .designer-properties,
    .reports-page .designer-properties {
        width: 100%;
        position: static;
    }
}

/* ---- Designer: bound-field heading preview + checkbox label ---- */
.client-profile-page .designer-el-heading,
.reports-page .designer-el-heading {
    font-weight: 700;
    font-size: 10px;
    color: var(--client-accent-dark);
    margin-bottom: 2px;
}

.client-profile-page .designer-checkbox-label,
.reports-page .designer-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    text-transform: none !important;
    font-weight: 500 !important;
    color: var(--client-ink) !important;
    font-size: 13px !important;
}

.client-profile-page .designer-checkbox-label input,
.reports-page .designer-checkbox-label input {
    width: auto !important;
}

/* ---- Designer: header band reference (visual only, not an editable
   element) — shows where generate_report.php's branded banner
   actually sits, so new elements can be placed below it deliberately
   rather than by trial and error. ---- */
.client-profile-page .designer-header-band,
.reports-page .designer-header-band {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: repeating-linear-gradient(
        135deg,
        #1b3a8c, #1b3a8c 10px,
        #24479e 10px, #24479e 20px
    );
    color: rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 8px;
    pointer-events: none;
}

/* One dashed line per page boundary, so it's visible where a page
   actually ends and the next begins while placing elements - the
   canvas itself grows tall enough to show at least one extra page's
   worth of empty space below whatever's already been placed (see
   renderCanvas's own reasoning). Not an editable element, same as
   the header band it pairs with. */
.client-profile-page .designer-page-break,
.reports-page .designer-page-break {
    position: absolute;
    left: 0;
    width: 100%;
    border-top: 2px dashed rgba(255, 255, 255, 0.85);
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding-top: 3px;
    text-align: center;
    pointer-events: none;
}

/* ---- Client profile: Waterlow Chart sub-sections (Personal Care,
   Skin Integrity Plan) — the new Tissue Malnutrition / Neurological
   Deficit / Surgery-Trauma / Medication categories. ---- */
.client-profile-page .waterlow-subsection {
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin: 10px 0;
}

.client-profile-page .waterlow-subsection h5 {
    margin: 0 0 6px;
    color: var(--client-ink);
    font-size: 13.5px;
}

.client-profile-page .waterlow-subhint {
    color: var(--client-muted);
    font-weight: 400;
    font-size: 12px;
}

.client-profile-page p.waterlow-subhint {
    margin: 0 0 8px;
}

.client-profile-page .waterlow-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--client-ink);
    text-transform: none;
    letter-spacing: normal;
    padding: 4px 0;
}

.client-profile-page .waterlow-check input {
    width: auto;
}

.client-profile-page .waterlow-subscore {
    margin-top: 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--client-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-profile-page .waterlow-subscore input {
    width: 60px;
    display: inline-block;
    font-weight: 700;
    color: var(--client-accent-dark);
    background: var(--client-accent-soft);
    border-color: var(--client-accent);
}

.client-profile-page input[id^="waterlow_"][readonly] {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    font-weight: 700;
    cursor: default;
}

/* General-purpose "read-only reference data" styling — used wherever
   a field auto-fills from elsewhere (Personal Information, etc.)
   rather than being something to edit here. Softer than Waterlow's
   own version above (that one's a computed score, deliberately bolder
   to draw the eye) since these are just quoted reference values. */
.client-profile-page input[readonly]:not([id^="waterlow_"]),
.client-profile-page textarea[readonly] {
    background: var(--client-bg);
    color: var(--client-muted);
    cursor: default;
}

/* ---- Client profile: Body Map editor (Personal Care > Skin
   Integrity Plan > Body Maps) ---- */
.client-profile-page .body-map-editor {
    padding: 4px 0;
}

.client-profile-page .bodymap-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.client-profile-page .bodymap-toolbar select {
    width: auto;
    padding: 7px 12px;
    border: 1.5px solid var(--client-border);
    border-radius: 8px;
}

.client-profile-page .bodymap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.client-profile-page .bodymap-legend-item {
    --marker-color: #7a7a7a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--client-bg);
    border: 1.5px solid var(--client-border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--client-ink);
    cursor: pointer;
}

.client-profile-page .bodymap-legend-item.active {
    border-color: var(--marker-color);
    background: var(--client-accent-soft);
}

.client-profile-page .bodymap-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--marker-color);
    flex-shrink: 0;
}

.client-profile-page .bodymap-canvases {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.client-profile-page .bodymap-canvas-wrap {
    text-align: center;
}

.client-profile-page .bodymap-canvas-wrap h4 {
    margin: 0 0 8px;
    color: var(--client-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.client-profile-page .bodymap-svg-wrap {
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 12px;
    padding: 10px;
}

.client-profile-page .bodymap-svg {
    /* Matches the actual reference images' aspect ratio (~500x1270) -
       preserveAspectRatio="none" on the <image> inside relies on this
       being right, otherwise the artwork would stretch. */
    width: 220px;
    height: 558px;
    cursor: crosshair;
}

.client-profile-page .bodymap-landmark {
    stroke: #b8b4c8;
    stroke-width: 0.3;
    stroke-dasharray: 1 0.75;
}

.client-profile-page .bodymap-list-title {
    margin: 18px 0 4px;
    color: var(--client-ink);
    font-size: 14px;
}

.client-profile-page .bodymap-marker-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--client-surface);
    border: 1.5px solid var(--client-border);
    border-radius: 10px;
    overflow: hidden;
    font-size: 13px;
}

.client-profile-page .bodymap-marker-table th {
    background: var(--client-accent-soft);
    color: var(--client-accent-dark);
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 8px 10px;
}

.client-profile-page .bodymap-marker-table td {
    padding: 7px 10px;
    border-top: 1px solid var(--client-border);
    color: var(--client-ink);
}

.client-profile-page .bodymap-marker-row {
    cursor: pointer;
}

.client-profile-page .bodymap-marker-row:hover {
    background: var(--client-accent-soft);
}

.client-profile-page .bodymap-marker {
    cursor: pointer;
}

.client-profile-page .bodymap-gender-label {
    font-weight: 600;
    color: var(--client-ink);
    font-size: 13.5px;
}

/* ---- Client profile: Goals and Outcomes ---- */
.client-profile-page .goals-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.client-profile-page .goals-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .client-profile-page .goals-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .client-profile-page .goals-list {
        grid-template-columns: 1fr;
    }
}

.client-profile-page .goal-card {
    --goal-accent: #8B5CF6;
    --goal-accent-2: #b794f6;
    position: relative;
    overflow: hidden;
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 22px;
    padding: 18px 20px;
    box-shadow: 0 4px 18px rgba(45, 42, 61, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.client-profile-page .goal-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(45, 42, 61, 0.14);
}

/* Soft organic "blob" shapes, not perfect circles/rectangles — the
   asymmetric border-radius is what gives them the irregular, blobby
   silhouette rather than looking like plain gradient circles. Purely
   decorative, sit behind the actual content. */
.client-profile-page .goal-card-blob-1,
.client-profile-page .goal-card-blob-2 {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.client-profile-page .goal-card-blob-1 {
    width: 170px;
    height: 170px;
    top: -70px;
    right: -60px;
    background: linear-gradient(135deg, var(--goal-accent), var(--goal-accent-2));
    border-radius: 62% 38% 41% 59% / 55% 45% 55% 45%;
    opacity: 0.16;
}

.client-profile-page .goal-card-blob-2 {
    width: 90px;
    height: 90px;
    bottom: -35px;
    left: 30%;
    background: linear-gradient(135deg, var(--goal-accent-2), var(--goal-accent));
    border-radius: 41% 59% 60% 40% / 46% 54% 46% 54%;
    opacity: 0.10;
}

.client-profile-page .goal-card-content {
    position: relative;
    z-index: 1;
}

.client-profile-page .goal-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.client-profile-page .goal-card-header h4 {
    margin: 0;
    font-size: 15.5px;
    color: var(--client-ink);
    line-height: 1.4;
}

.client-profile-page .goal-outcome {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--client-muted);
    line-height: 1.5;
}

.client-profile-page .goal-outcome strong {
    color: var(--client-ink);
    font-weight: 600;
}

.client-profile-page .goal-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.client-profile-page .goal-badge {
    --badge-color: #7a7a7a;
    --badge-color-2: #a0a0a0;
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, var(--badge-color), var(--badge-color-2));
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* A thin diagonal streak of brightness across the badge - the small
   detail that reads as "glossy/premium" rather than a flat sticker. */
.client-profile-page .goal-badge:not(.goal-badge-outline)::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -20%;
    width: 40%;
    height: 220%;
    background: rgba(255, 255, 255, 0.35);
    transform: rotate(20deg);
}

.client-profile-page .goal-badge-outline {
    background: transparent;
    border: 1.5px solid var(--badge-color);
    color: var(--badge-color);
}

.client-profile-page .goal-target-date {
    font-size: 12.5px;
    color: var(--client-muted);
}

.client-profile-page .goal-target-date.overdue {
    color: #c0392b;
    font-weight: 700;
}

.client-profile-page .goal-card-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.client-profile-page .goal-notes-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--client-border);
}

.client-profile-page .goal-notes-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--client-accent-dark);
    font-weight: 600;
    font-size: 12.5px;
    cursor: pointer;
    font-family: 'Inter', Arial, sans-serif;
}

.client-profile-page .goal-notes-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-profile-page .goal-note {
    background: var(--client-bg);
    border-radius: 8px;
    padding: 8px 12px;
}

.client-profile-page .goal-note-date {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--client-muted);
    margin-bottom: 2px;
}

.client-profile-page .goal-note p {
    margin: 0;
    font-size: 13px;
    color: var(--client-ink);
    line-height: 1.4;
}

.client-profile-page .goal-note-add {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.client-profile-page .goal-note-add input {
    flex: 1;
    padding: 7px 12px;
    border: 1.5px solid var(--client-border);
    border-radius: 8px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 13px;
}

/* ===========================================================
   ADMIN PAGE (Training portal builder) — scoped to .admin-page.
   Deep burgundy/wine on cool slate, deliberately distinct from
   Clients' purple, Staff's blue, Schedule's teal, and Finance's
   indigo, and deliberately NOT the warm-cream/terracotta combination
   that's become an overused AI-generated-design default.
   =========================================================== */
.admin-page {
    --admin-bg: #f8f7f6;
    --admin-surface: #ffffff;
    --admin-ink: #27272a;
    --admin-muted: #71717a;
    --admin-border: #e4e4e7;
    --admin-accent: #9f1239;
    --admin-accent-dark: #881337;
    --admin-accent-soft: #fce7f3;
    --admin-danger: #dc2626;
    --admin-danger-soft: #fee2e2;

    font-family: 'Inter', Arial, sans-serif;
    color: var(--admin-ink);
    padding: 24px 32px;
}

.admin-page h1 {
    font-weight: 700;
    font-size: 22px;
    color: var(--admin-ink);
    margin: 0;
}

.admin-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-page .finance-hint {
    font-size: 13px;
    color: var(--admin-muted);
    margin: 8px 0 20px;
}

.admin-page .create-btn {
    background: var(--admin-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.admin-page .create-btn:hover {
    background: var(--admin-accent-dark);
}

.admin-page table.main-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--admin-surface);
    border: 1.5px solid var(--admin-border);
    border-radius: 12px;
    overflow: hidden;
}

.admin-page table.main-table th {
    background: var(--admin-accent-soft);
    color: var(--admin-accent-dark);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 10px 14px;
    border: none;
}

.admin-page table.main-table td {
    padding: 10px 14px;
    border-top: 1px solid var(--admin-border);
    font-size: 13.5px;
    vertical-align: middle;
}

.admin-page table.main-table a {
    color: var(--admin-accent);
    font-weight: 600;
    text-decoration: none;
}

.admin-page table.main-table a:hover {
    text-decoration: underline;
}

.admin-page .action-btn {
    background: var(--admin-surface);
    color: var(--admin-accent-dark);
    border: 1.5px solid var(--admin-border);
    border-radius: 8px;
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.admin-page .action-btn:hover {
    border-color: var(--admin-accent);
    background: var(--admin-accent-soft);
}

.admin-page .action-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.admin-page .action-btn.danger {
    color: var(--admin-danger);
}

.admin-page .action-btn.danger:hover {
    background: var(--admin-danger-soft);
    border-color: var(--admin-danger);
}

.admin-page .btn-save {
    background: var(--admin-accent);
    color: white;
    border: none;
    border-radius: 9px;
    padding: 9px 20px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.admin-page .btn-save:hover {
    background: var(--admin-accent-dark);
}

/* ---- Step type chooser ---- */
.step-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 8px 0;
}

.step-type-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    background: var(--admin-bg, #f8f7f6);
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.step-type-choice:hover {
    border-color: var(--sched-accent);
    background: var(--admin-accent-soft, #fce7f3);
}

.step-type-choice strong {
    color: var(--admin-ink, #27272a);
    font-size: 14px;
}

.step-type-choice span {
    color: var(--admin-muted, #71717a);
    font-size: 12px;
}

/* ---- Step list (module builder) ---- */
.step-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--admin-surface);
    border: 1.5px solid var(--admin-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.step-card-order {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step-card-order button {
    padding: 2px 8px;
    margin: 0;
}

.step-card-body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-type-badge {
    background: var(--admin-accent-soft);
    color: var(--admin-accent-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ---- Dynamic list rows (question options, ordering items, matching
   pairs, fill-blank blanks/distractors) ---- */
.list-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.list-row input {
    flex: 1;
}

/* ---- Hotspot image preview + zone overlay ---- */
.hotspot-preview-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 8px 0;
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 8px;
    overflow: hidden;
}

.hotspot-preview-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.hotspot-zone-marker {
    position: absolute;
    border: 2px solid rgba(220, 38, 38, 0.8);
    background: rgba(220, 38, 38, 0.15);
    box-sizing: border-box;
}

.hotspot-zone-marker.correct {
    border-color: rgba(22, 163, 74, 0.85);
    background: rgba(22, 163, 74, 0.18);
}

.hotspot-zone-row input[type="number"] {
    width: 70px;
    flex: none;
}

/* ---- Admin page: section nav (Training Modules / Competency
   Checklists / External Training Review) ---- */
.admin-section-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    border-bottom: 1.5px solid var(--admin-border, #e4e4e7);
}

.admin-nav-btn {
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 10px 4px;
    margin-right: 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--admin-muted, #71717a);
    cursor: pointer;
}

.admin-nav-btn:hover {
    color: var(--sched-accent);
}

.admin-nav-btn.active {
    color: var(--sched-accent);
    border-bottom-color: var(--sched-accent);
}

/* ---- Admin page: external training review detail ---- */
.review-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 20px;
    margin-bottom: 20px;
}

.review-detail-info,
.review-detail-criteria {
    background: var(--admin-surface, #fff);
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 12px;
    padding: 16px 18px;
}

.review-detail-info h3,
.review-detail-criteria h3 {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--admin-ink, #27272a);
}

.review-detail-info p {
    margin: 0 0 8px;
    font-size: 13.5px;
    color: var(--admin-ink, #27272a);
}

.criteria-review-row {
    border-top: 1px solid var(--admin-border, #e4e4e7);
    padding: 10px 0;
}

.criteria-review-row:first-child {
    border-top: none;
    padding-top: 0;
}

.criteria-text {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 500;
}

.criteria-met-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.criteria-met-btn {
    background: var(--admin-bg, #f8f7f6);
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 8px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    color: var(--admin-muted, #71717a);
}

.criteria-met-btn[data-met="1"].selected {
    background: #ecfdf3;
    border-color: #16a34a;
    color: #16a34a;
}

.criteria-met-btn[data-met="0"].selected {
    background: var(--admin-danger-soft, #fee2e2);
    border-color: var(--admin-danger, #dc2626);
    color: var(--admin-danger, #dc2626);
}

.criteria-notes {
    width: 100%;
    box-sizing: border-box;
}

.review-decision {
    background: var(--admin-surface, #fff);
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 12px;
    padding: 16px 18px;
}

/* ---- Training master page (training.html) ---- */
.assign-training-form {
    background: var(--admin-surface, #fff);
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 12px;
    padding: 20px 24px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assign-training-form label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--admin-muted, #71717a);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 10px;
}

.assign-training-form input,
.assign-training-form select {
    font-family: inherit;
    font-size: 14px;
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 8px;
    padding: 8px 12px;
}

.assign-training-form input:not([type="checkbox"]):focus,
.assign-training-form select:focus {
    outline: none;
    border-color: var(--sched-accent);
    box-shadow: 0 0 0 3px var(--admin-accent-soft, #fce7f3);
}

.admin-page .toolbar input,
.admin-page .toolbar select {
    font-family: inherit;
    font-size: 14px;
    border: 1.5px solid var(--admin-border, #e4e4e7);
    border-radius: 999px;
    padding: 9px 16px;
}

.admin-page .toolbar input:focus,
.admin-page .toolbar select:focus {
    outline: none;
    border-color: var(--sched-accent);
    box-shadow: 0 0 0 3px var(--admin-accent-soft, #fce7f3);
}

/* ===========================================================
   TRAINING PLAYER — scoped to .training-player-page. A focused,
   distraction-free single-column reading/quiz experience, distinct
   from the rest of the app's dashboard chrome (no top nav rendered
   on this page at all - deliberately, since the point is to remove
   distractions while a carer is mid-training).
   =========================================================== */
.training-player-page {
    --tp-bg: #f4f2fb;
    --tp-surface: #ffffff;
    --tp-ink: #241c3d;
    --tp-muted: #6b6480;
    --tp-border: #e3dff2;
    --tp-accent: #6d28d9;
    --tp-accent-dark: #5b21b6;
    --tp-accent-soft: #ede9fe;
    --tp-success: #16a34a;
    --tp-success-soft: #ecfdf3;
    --tp-danger: #dc2626;
    --tp-danger-soft: #fef2f2;

    min-height: 100vh;
    background: var(--tp-bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    font-family: 'Inter', Arial, sans-serif;
    color: var(--tp-ink);
    box-sizing: border-box;
}

.training-player-shell {
    background: var(--tp-surface);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(36, 28, 61, 0.12);
    padding: 32px 36px 28px;
    width: 100%;
    max-width: 640px;
}

.tp-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.tp-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.training-player-page .action-btn {
    background: var(--tp-surface);
    color: var(--tp-accent-dark);
    border: 1.5px solid var(--tp-border);
    border-radius: 8px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.training-player-page .action-btn:hover {
    border-color: var(--tp-accent);
    background: var(--tp-accent-soft);
}

.tp-preview-banner {
    background: #fef3c7;
    color: #92400e;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 18px;
}

.tp-progress-track {
    background: var(--tp-accent-soft);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.tp-progress-fill {
    background: var(--tp-accent);
    height: 100%;
    border-radius: 999px;
    transition: width 0.25s ease;
}

.tp-progress-label {
    font-size: 12.5px;
    color: var(--tp-muted);
    margin: 6px 0 24px;
}

.tp-step-content {
    min-height: 160px;
    margin-bottom: 24px;
}

.tp-reading-body {
    font-size: 15.5px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.tp-question-prompt {
    font-size: 16.5px;
    font-weight: 600;
    margin: 0 0 16px;
}

.tp-choice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-choice {
    text-align: left;
    background: var(--tp-bg);
    border: 1.5px solid var(--tp-border);
    border-radius: 10px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--tp-ink);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.tp-choice:hover {
    border-color: var(--tp-accent);
}

.tp-choice.selected {
    border-color: var(--tp-accent);
    background: var(--tp-accent-soft);
    font-weight: 600;
}

.tp-choice.correct {
    border-color: var(--tp-success);
    background: var(--tp-success-soft);
    font-weight: 600;
}

.tp-choice.incorrect {
    border-color: var(--tp-danger);
    background: var(--tp-danger-soft);
}

.tp-choice:disabled {
    cursor: default;
}

.tp-question-feedback {
    margin-top: 14px;
    font-weight: 600;
    font-size: 14px;
}

.tp-question-feedback.correct {
    color: var(--tp-success);
}

.tp-question-feedback.incorrect {
    color: var(--tp-danger);
}

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

.training-player-page .btn-save {
    background: var(--tp-accent);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 11px 26px;
    font-family: inherit;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
}

.training-player-page .btn-save:hover {
    background: var(--tp-accent-dark);
}

/* ---- Completion screen ---- */
.tp-completion {
    text-align: center;
    padding: 20px 0;
}

.tp-completion-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--tp-success-soft);
    color: var(--tp-success);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}

.tp-completion h1 {
    margin: 0 0 8px;
}

.tp-completion p {
    color: var(--tp-muted);
    margin: 0 0 20px;
}

/* ---- Idle timeout overlay ---- */
.tp-idle-overlay {
    position: fixed;
    inset: 0;
    background: rgba(36, 28, 61, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.tp-idle-box {
    background: var(--tp-surface);
    border-radius: 16px;
    padding: 32px 36px;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.tp-idle-box h2 {
    margin: 0 0 10px;
}

.tp-idle-box p {
    color: var(--tp-muted);
    font-size: 14px;
    margin: 0 0 20px;
}

/* ---- Training player: interactive activity types ---- */
.tp-ordering-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tp-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 16px 0 8px;
}

.tp-ordering-chosen,
.tp-ordering-pool,
.tp-matching-col,
.tp-matching-pairs,
.tp-fillblank-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tp-ordering-chosen:empty::after,
.tp-matching-pairs:empty::after {
    content: "Nothing here yet";
    font-size: 13px;
    color: var(--tp-muted);
    font-style: italic;
}

.training-player-page .tp-choice.tp-ordering-item {
    background: var(--tp-accent-soft);
    border-color: var(--tp-accent);
}

.tp-matching-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tp-matching-col {
    flex-direction: column;
    align-items: stretch;
}

.tp-matching-pair-row {
    width: 100%;
    text-align: center;
    font-weight: 600;
}

/* ---- Hotspot ---- */
.tp-hotspot-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: crosshair;
    border: 1.5px solid var(--tp-border);
    border-radius: 10px;
    overflow: hidden;
}

.tp-hotspot-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.tp-hotspot-markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tp-hotspot-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.85);
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tp-hotspot-marker.correct {
    background: rgba(22, 163, 74, 0.85);
}

.tp-hotspot-zone-outline {
    position: absolute;
    border: 2px dashed var(--tp-success);
    background: rgba(22, 163, 74, 0.12);
    box-sizing: border-box;
}

/* ---- Fill in the blank ---- */
.tp-fillblank-sentence {
    font-size: 16px;
    line-height: 2.2;
}

.tp-blank-slot {
    display: inline-block;
    min-width: 70px;
    padding: 2px 10px;
    margin: 0 3px;
    border-bottom: 2px dashed var(--tp-accent);
    text-align: center;
    font-weight: 600;
    color: var(--tp-accent-dark);
    cursor: pointer;
}

.tp-blank-slot.selected {
    background: var(--tp-accent-soft);
    border-radius: 6px 6px 0 0;
}

.tp-blank-slot.filled {
    border-bottom-style: solid;
}

.tp-blank-slot.correct {
    color: var(--tp-success);
    border-bottom-color: var(--tp-success);
}

.tp-blank-slot.incorrect {
    color: var(--tp-danger);
    border-bottom-color: var(--tp-danger);
}

/* ---- Reports page: client picker ---- */
/* ===========================================================
   REPORTS PAGE — scoped palette + components
   Deep cyan-teal identity, distinct from Clients' purple, Finance's
   indigo, and Schedule's teal, matching the same "each major area is
   visually recognisable" principle used throughout. Reuses the same
   --client-* variable names the report-list/report-section-header/
   designer-* rules already reference (rather than rewriting all of
   those rules), since this page needed its own copy anyway - those
   variables were actually defined under .clients-page, not
   .client-profile-page, so this page never had them set at all until
   now.
   =========================================================== */
.reports-page {
    --client-bg: #f2f9fb;
    --client-surface: #ffffff;
    --client-ink: #163238;
    --client-muted: #5b7d85;
    --client-border: #d7ebef;
    --client-accent: #0e7490;
    --client-accent-dark: #0c5c73;
    --client-accent-soft: #e3f4f7;
    --client-success: #2f9e64;
    --client-success-soft: #e8f7ee;
    --client-warn: #c98a2c;
    --client-warn-soft: #fbf1df;
    --client-danger: #d64545;
    --client-danger-soft: #fbeaea;

    font-family: 'Inter', Arial, sans-serif;
    color: var(--client-ink);
}

.reports-page h1 {
    font-weight: 700;
    color: var(--client-ink);
}

.reports-page .report-tabs-nav {
    display: flex;
    gap: 6px;
    margin: 20px 0 24px;
    border-bottom: 1.5px solid var(--client-border);
}

.reports-page .report-nav-btn {
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    padding: 10px 4px;
    margin-right: 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--client-muted);
    cursor: pointer;
}

.reports-page .report-nav-btn:hover {
    color: var(--client-accent);
}

.reports-page .report-nav-btn.active {
    color: var(--client-accent);
    border-bottom-color: var(--client-accent);
}

.reports-page .report-tab-panel {
    background: var(--client-surface);
    border: 1px solid var(--client-border);
    border-radius: 10px;
    padding: 20px 24px;
}

.reports-page .report-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--client-bg);
    border: 1px solid var(--client-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin: 14px 0 18px;
}

.reports-page .report-filter-bar label {
    font-size: 13px;
    font-weight: 600;
    color: var(--client-muted);
    margin: 0;
}

.reports-page .report-filter-bar input[type="date"] {
    width: auto;
    margin: 0;
}

.reports-page .report-filter-bar-spacer {
    flex: 1;
}

.reports-page .btn-save {
    background: var(--client-accent);
    border-color: var(--client-accent);
}

.reports-page .btn-save:hover {
    background: var(--client-accent-dark);
}

.reports-page .action-btn.danger {
    color: var(--client-danger);
    border-color: var(--client-danger-soft);
}

.reports-page .report-client-picker {
    margin: 4px 0 20px;
    max-width: 320px;
}

.reports-page .report-client-picker label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}

/* ===========================================================
   DASHBOARD (home hub) — scoped palette + components
   Deep slate-blue identity, distinct from Clients' purple,
   Finance's indigo, Schedule's teal, and Reports' cyan-teal - the
   landing/hub page gets its own recognisable presence too, not a
   default look, matching the same principle used throughout.
   =========================================================== */
.home-hub-page {
    --hub-bg: #f4f6fb;
    --hub-surface: #ffffff;
    --hub-ink: #1e2a4a;
    --hub-muted: #6b7690;
    --hub-border: #e2e6f0;
    --hub-accent: #3151b7;
    --hub-accent-dark: #24409a;
    --hub-accent-soft: #e8ecfa;
    --hub-good: #2f9e64;
    --hub-good-soft: #e8f7ee;
    --hub-warn: #c98a2c;
    --hub-warn-soft: #fbf1df;
    --hub-danger: #d64545;
    --hub-danger-soft: #fbeaea;

    font-family: 'Inter', Arial, sans-serif;
    color: var(--hub-ink);
}

.home-hub-page h1 {
    font-weight: 700;
    color: var(--hub-ink);
    margin-bottom: 2px;
}

.hub-greeting {
    margin-bottom: 24px;
}

.hub-date-line {
    color: var(--hub-muted);
    font-size: 14px;
    margin: 0;
}

/* ---- Hero: today's visits, the single most-watched number ---- */
.hub-visits-hero {
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(30, 42, 74, 0.05), 0 8px 24px rgba(30, 42, 74, 0.05);
}

.hub-visits-hero-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.hub-visits-hero-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hub-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hub-visits-hero-value {
    display: block;
    font-size: 40px;
    font-weight: 800;
    color: var(--hub-ink);
    line-height: 1.1;
}

.hub-hero-link {
    color: var(--hub-accent);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.hub-hero-link:hover {
    text-decoration: underline;
}

/* Segmented bar - each segment's width set inline by JS,
   proportional to that status' share of today's visits. */
.hub-visits-bar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--hub-border);
}

.hub-visits-bar-segment {
    height: 100%;
    transition: width 0.3s ease;
}

.hub-visits-bar-segment.completed { background: var(--hub-good); }
.hub-visits-bar-segment.inProgress { background: var(--hub-accent); }
.hub-visits-bar-segment.scheduled { background: var(--hub-border); }
.hub-visits-bar-segment.uncovered { background: var(--hub-danger); }
.hub-visits-bar-segment.missed { background: var(--hub-warn); }

.hub-visits-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--hub-muted);
}

.hub-visits-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hub-visits-legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hub-visits-legend-dot.completed { background: var(--hub-good); }
.hub-visits-legend-dot.inProgress { background: var(--hub-accent); }
.hub-visits-legend-dot.scheduled { background: var(--hub-border); border: 1px solid var(--hub-muted); }
.hub-visits-legend-dot.uncovered { background: var(--hub-danger); }
.hub-visits-legend-dot.missed { background: var(--hub-warn); }

/* ---- Alert/KPI card grid ---- */
.hub-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.hub-card {
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-left: 4px solid var(--hub-border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(30, 42, 74, 0.04);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

a.hub-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 42, 74, 0.1);
}

.hub-card-icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.hub-card-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--hub-ink);
    line-height: 1.1;
}

.hub-card-label {
    font-size: 13px;
    color: var(--hub-muted);
    font-weight: 500;
}

.hub-card-good { border-left-color: var(--hub-good); }
.hub-card-warn { border-left-color: var(--hub-warn); }
.hub-card-danger { border-left-color: var(--hub-danger); }
.hub-card-neutral { border-left-color: var(--hub-accent); }

.hub-card-good .hub-card-value { color: var(--hub-good); }
.hub-card-warn .hub-card-value { color: var(--hub-warn); }
.hub-card-danger .hub-card-value { color: var(--hub-danger); }

.hub-carer-status {
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(30, 42, 74, 0.04);
}

.hub-carer-status h3 {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--hub-ink);
}

.hub-carer-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--hub-border);
    font-size: 13px;
    color: var(--hub-ink);
}

.hub-carer-status-row:last-child {
    border-bottom: none;
}

.hub-carer-status-online {
    background: var(--hub-good);
    color: white;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
}

.hub-carer-status-offline {
    color: var(--hub-muted);
    font-size: 12px;
}

/* ---- Secondary stats row ---- */
.hub-secondary-row {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding: 16px 20px;
    background: var(--hub-accent-soft);
    border-radius: 12px;
    margin-bottom: 24px;
}

.hub-mini-stat {
    display: flex;
    flex-direction: column;
}

.hub-mini-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--hub-accent-dark);
}

.hub-mini-stat-label {
    font-size: 12px;
    color: var(--hub-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---- Activity feed ---- */
.hub-activity h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--hub-ink);
    margin-bottom: 10px;
}

.hub-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--hub-surface);
    border: 1px solid var(--hub-border);
    border-radius: 12px;
    overflow: hidden;
}

.hub-activity-list li {
    padding: 12px 18px;
    border-bottom: 1px solid var(--hub-border);
    font-size: 14px;
    color: var(--hub-ink);
}

.hub-activity-list li:last-child {
    border-bottom: none;
}

.hub-mobile-hint {
    color: var(--hub-muted);
    font-size: 14px;
    margin: -8px 0 20px;
}

/* New-module chooser - two big tappable options rather than a select
   dropdown, since this is a one-time fork at the very start, not an
   ongoing setting. */
.module-chooser-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.module-chooser-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.1s ease, background 0.1s ease;
}

.module-chooser-option:hover {
    border-color: #999;
    background: #fafafa;
}

.module-chooser-icon {
    font-size: 22px;
    margin-bottom: 2px;
}

/* Reading step media (image/video/audio) - sits above the step's own
   text body. */
.tp-reading-media-img,
.tp-reading-media-video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 16px;
}

.tp-reading-media-audio {
    display: block;
    width: 100%;
    margin-bottom: 16px;
}

.reading-media-preview-img,
.reading-media-preview-video {
    display: block;
    max-width: 280px;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 8px;
    border: 1px solid #e0e0e0;
}

/* ===== TRAINING MODALS (New Module chooser, module details, PowerPoint
   import, step editor, competency checklist) =====
   Same scoped-card pattern as .rate-modal-card - see its own comment
   for the full reasoning. These modals sit outside <main class=
   "admin-page"> in the DOM (siblings, not descendants), so they can't
   just inherit that page's own --admin-* custom properties - instead
   this repeats the SAME deep burgundy/wine values .admin-page already
   established, rather than introduce a second, competing colour
   identity for what's still fundamentally the same training section. */
.training-modal-card {
    --tm-bg: #f8f7f6;
    --tm-surface: #ffffff;
    --tm-ink: #27272a;
    --tm-muted: #71717a;
    --tm-border: #e4e4e7;
    --tm-accent: #9f1239;
    --tm-accent-dark: #881337;
    --tm-accent-soft: #fce7f3;
    --tm-danger: #dc2626;

    font-family: 'Inter', Arial, sans-serif;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 0;
    border-radius: 18px;
    gap: 0;
    box-shadow: 0 24px 60px rgba(42, 31, 20, 0.28), 0 2px 8px rgba(42, 31, 20, 0.08);
    animation: trainingModalIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--tm-ink);
}

.training-modal-card-wide {
    width: 640px;
}

@keyframes trainingModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .training-modal-card { animation: none; }
}

.training-modal-card .training-modal-head {
    position: relative;
    padding: 24px 32px 18px;
    border-bottom: 1px solid var(--tm-border);
}

.training-modal-card .training-modal-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--tm-accent);
    margin-bottom: 4px;
}

.training-modal-card h3.training-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--tm-ink);
}

.training-modal-card .training-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--tm-muted);
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}

.training-modal-card .training-modal-close:hover {
    background: var(--tm-bg);
    color: var(--tm-ink);
}

.training-modal-card .training-modal-body {
    padding: 20px 32px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.training-modal-card label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tm-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: -6px;
}

.training-modal-card input,
.training-modal-card select,
.training-modal-card textarea {
    font-family: inherit;
    font-size: 14.5px;
    color: var(--tm-ink);
    background: var(--tm-surface);
    border: 1.5px solid var(--tm-border);
    border-radius: 9px;
    padding: 9px 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    width: 100%;
}

.training-modal-card input:focus,
.training-modal-card select:focus,
.training-modal-card textarea:focus {
    outline: none;
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px var(--tm-accent-soft);
}

.training-modal-card input[type="file"] {
    padding: 7px 10px;
    background: var(--tm-bg);
}

.training-modal-card .finance-hint {
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--tm-muted);
    margin: 0;
    font-size: 13px;
}

.training-modal-card .modal-actions {
    padding: 16px 32px 24px;
    margin-top: 0;
    border-top: 1px solid var(--tm-border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.training-modal-card .modal-actions button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 9px;
    cursor: pointer;
    border: 1.5px solid var(--tm-border);
    background: var(--tm-surface);
    color: var(--tm-ink);
}

.training-modal-card .modal-actions button:hover {
    background: var(--tm-bg);
}

.training-modal-card .modal-actions .btn-save {
    background: var(--tm-accent);
    border-color: var(--tm-accent);
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
}

.training-modal-card .modal-actions .btn-save:hover {
    background: var(--tm-accent-dark);
}

.training-modal-card .modal-actions .action-btn.danger {
    background: transparent;
    border-color: var(--tm-danger);
    color: var(--tm-danger);
    margin-right: auto;
}

.training-modal-card .modal-actions .action-btn.danger:hover {
    background: #fef2f2;
}

/* New-module chooser buttons, restyled to match */
.training-modal-card .module-chooser-option {
    border: 1.5px solid var(--tm-border);
    border-radius: 12px;
    background: var(--tm-surface);
}

.training-modal-card .module-chooser-option:hover {
    border-color: var(--tm-accent);
    background: var(--tm-accent-soft);
}

/* Annual leave - office view of one carer's balance and requests
   (carer-sections/schedule.html's own "Leave" tab). Loaded inside
   .staff-page, so its own --staff-* variables are safely in scope
   here as true descendants, not siblings the way the training
   modals were - see this file's own note there for why that
   distinction matters. */
.leave-balance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background: var(--staff-surface, #ffffff);
    border: 1px solid var(--staff-border, #e1e7f5);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.leave-balance-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--staff-success, #16a34a);
}

.leave-balance-stat span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--staff-muted, #6b7690);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.leave-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--staff-surface, #ffffff);
    border: 1px solid var(--staff-border, #e1e7f5);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.leave-request-row .finance-hint {
    display: block;
    margin: 2px 0 0;
}

.leave-request-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}