/* =========================
   LEADER PROFILE — v7 "Clean Stage, Warm Light"
   Tokens live in home.css :root. Never redefine them here.
   ========================= */

/* Inner container — 880px centered, mirrors the guest detail view (the .page wrapper
   stays full-width; containing it directly loses to the high-specificity .page rule) */
.lp_container {
    max-width: 880px;
    margin: 0 auto;
}

/* Page header — matches the guest detail header (compact title, circular icon back, inline) */
.lp_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lp_header_left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}
.lp_back {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: 9999px;
    color: var(--stone);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lp_back:hover {
    background: var(--canvas);
    color: var(--ink);
}
.lp_header_title {
    min-width: 0;
}
.lp_header_title h1 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
}
.lp_header_title p {
    font-size: 0.8125rem;
    color: var(--stone);
    margin: 0.125rem 0 0;
}
.lp_header_right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Tab bar — the same component the CareFlow detail page uses (cf_tabs in guests.css) */
.lp_tabs {
    margin-bottom: 16px;
}
/* Content: summary strip on top, careflows below (mirrors the guest profile) */
.lp_content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* Card shell */
.lp_card {
    background: var(--white);
    border-radius: 16px;
    border: 0.5px solid var(--border);
    box-shadow: var(--shadow-1);
    padding: 1.125rem 1.25rem;
}

/* Summary card */
.lp_summary {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lp_summary_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
}
.lp_identity {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-align: left;
    min-width: 0;
}
.lp_identity_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.lp_avatar {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    background: rgba(232, 115, 42, 0.1);
    color: var(--orange-dark);
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp_name {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.3px;
}
.lp_nickname {
    color: var(--stone);
    font-weight: 500;
}
.lp_role {
    font-size: 13px;
    color: var(--stone);
    margin: 0;
}

/* Contact row (horizontal, like the guest contact strip) */
.lp_contact {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 32px;
    padding-top: 20px;
    border-top: 0.5px solid var(--border);
}
.lp_contact_row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-soft);
}
.lp_contact_row svg {
    color: var(--stone);
    flex-shrink: 0;
}
.lp_contact_row a {
    color: var(--ink-soft);
    text-decoration: none;
    word-break: break-word;
}
.lp_contact_row a:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}
.lp_contact_empty {
    color: var(--stone);
}

/* Metric tiles — compact, sit to the right of the identity in the summary strip */
.lp_metrics {
    display: flex;
    gap: 10px;
    flex: none;
}
.lp_metric {
    background: var(--canvas);
    border: 0.5px solid var(--border-strong);
    border-radius: 8px;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.lp_metric_value {
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.5px;
    line-height: 1;
}
.lp_metric_label {
    font-size: 11px;
    color: var(--stone);
}

/* CareFlows card */
.lp_section_head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 16px;
}
.lp_section_head h2 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.lp_section_sub {
    font-size: 12px;
    color: var(--stone);
}

.lp_careflow_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.lp_careflow_row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--canvas);
}
.lp_careflow_row:first-child {
    border-top: none;
}
.lp_careflow_main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.lp_careflow_name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.lp_careflow_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Status / assignment pills */
.lp_chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--ink-soft);
    border: 0.5px solid var(--border-strong);
}
.lp_chip--active {
    background: rgba(45, 122, 58, 0.08);
    color: var(--success);
    border-color: rgba(45, 122, 58, 0.2);
}
.lp_chip--owner {
    background: rgba(232, 115, 42, 0.1);
    color: var(--orange-dark);
    border-color: transparent;
}

.lp_careflow_view {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--orange-dark);
    flex-shrink: 0;
}
.lp_careflow_view:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}

/* Empty state */
.lp_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 16px;
    text-align: center;
    color: var(--stone);
}
.lp_empty svg {
    color: var(--line);
}
.lp_empty p {
    font-size: 13px;
    margin: 0;
}

/* Responsive */
@media (max-width: 850px) {
    .lp_content {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .lp_header {
        flex-direction: column;
        align-items: stretch;
    }
    .lp_header_right {
        width: 100%;
    }
    .lp_header_right .btn_primary {
        width: 100%;
        justify-content: center;
    }
    .lp_header_title h1 {
        font-size: 22px;
    }
    .lp_card {
        padding: 20px;
    }
    .lp_summary_top {
        flex-direction: column;
        align-items: stretch;
    }
    .lp_metrics {
        width: 100%;
    }
    .lp_metric {
        flex: 1;
    }
    .lp_careflow_row {
        flex-wrap: wrap;
    }
}

/* Permissions — header button, chips, modal */
.lp_perm_button {
    display: inline-flex;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.5rem 1.15rem;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lp_perm_button:hover {
    background: var(--canvas);
    color: var(--ink);
}
.lp_perm_chip {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 9999px;
    background: var(--white);
    border: 1px solid rgba(232, 115, 42, 0.45);
    color: var(--orange-dark);
    margin-left: 4px;
}
.lp_perm_overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(26, 39, 68, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lp_perm_modal {
    background: var(--white);
    border-radius: 16px;
    width: min(470px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.lp_perm_title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 2px;
}
.lp_perm_sub {
    font-size: 12.5px;
    color: var(--stone);
    margin: 0 0 14px;
}
.lp_perm_options {
    display: grid;
    gap: 8px;
}
.lp_perm_row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
}
.lp_perm_row--on {
    border-color: rgba(232, 115, 42, 0.55);
    background: var(--soft-yellow);
}
.lp_perm_row--locked {
    opacity: 0.55;
    cursor: not-allowed;
}
.lp_perm_check {
    accent-color: var(--orange);
    width: 15px;
    height: 15px;
    margin-top: 2px;
    flex: none;
}
.lp_perm_text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.lp_perm_name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.lp_perm_desc {
    font-size: 12.5px;
    color: var(--stone);
    line-height: 1.4;
}
.lp_perm_locknote {
    font-size: 11.5px;
    color: var(--orange-dark);
    margin-top: 2px;
}
.lp_perm_divider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 6px 0 2px;
}
.lp_perm_divider::before,
.lp_perm_divider::after {
    content: "";
    height: 1px;
    background: var(--border);
    flex: 1;
}
.lp_perm_error {
    font-size: 12.5px;
    color: var(--error);
    margin: 10px 0 0;
}
.lp_perm_actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.lp_perm_cancel {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--stone);
    cursor: pointer;
}
.lp_perm_cancel:hover {
    color: var(--ink);
}
@media (max-width: 640px) {
    .lp_header_right .lp_perm_button {
        flex: 1;
        justify-content: center;
    }
}

/* Office hours — weekly availability windows (person_on_time) */
.lp_hours_buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp_hours_edit {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.lp_hours_edit:hover {
    background: var(--canvas);
    color: var(--ink);
}
.lp_hours_buttons .btn_primary {
    font-size: 12.5px;
    padding: 7px 15px;
}
.lp_hours_save[disabled] {
    opacity: 0.6;
    cursor: default;
}
.lp_hours_cancel {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--stone);
    cursor: pointer;
}
.lp_hours_cancel:hover {
    color: var(--ink);
}

/* Availability line — dot colour carries the state */
.lp_hours_status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0 0 14px;
}
.lp_hours_status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stone);
    flex: none;
}
.lp_hours_status--available {
    color: var(--success);
}
.lp_hours_status--available::before {
    background: var(--success);
}
.lp_hours_status--next::before {
    background: var(--orange);
}
.lp_hours_status--none {
    color: var(--warning);
}
.lp_hours_status--none::before {
    background: var(--warning);
}
.lp_hours_status--queued {
    color: var(--success);
}
.lp_hours_status--queued::before {
    background: var(--success);
}

/* Read view */
.lp_hours_row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--canvas);
}
.lp_hours_row:first-child {
    border-top: none;
}
.lp_hours_row--today {
    background: var(--wash-warm);
    border-radius: 8px;
    margin: 0 -10px;
    padding: 9px 10px;
}
.lp_hours_day {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
}
.lp_hours_row--today .lp_hours_day {
    font-weight: 600;
    color: var(--ink);
}
.lp_hours_windows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.lp_hours_window {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    padding: 3px 10px;
    border-radius: 9999px;
    background: var(--canvas);
    color: var(--ink-soft);
    border: 0.5px solid var(--border-strong);
}
.lp_hours_off {
    font-size: 13px;
    color: var(--stone);
}
.lp_hours_skeleton {
    display: block;
    grid-column: 1 / -1;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--canvas) 25%, var(--line) 37%, var(--canvas) 63%);
    background-size: 400% 100%;
    animation: lp_hours_shimmer 1.4s ease infinite;
}
@keyframes lp_hours_shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

/* Edit view */
.lp_hours_edit_row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--canvas);
}
.lp_hours_edit_row:first-child {
    border-top: none;
}
.lp_hours_toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Matches the height of one time control (13px text + 6px padding + 1px border,
       top and bottom) so the day name centres against the first row of times rather
       than being nudged by a guessed amount. */
    min-height: 33px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
}
.lp_hours_edit_row--off .lp_hours_toggle {
    color: var(--stone);
}
/* The day label is nudged down to meet the top of the time boxes. A day that is off
   has no time boxes, so on those rows the nudge is dropped and both sides sit on the
   same line. */
.lp_hours_edit_row--off {
    align-items: center;
}
.lp_hours_edit_row--off .lp_hours_edit_windows {
    padding-top: 0;
}
.lp_hours_toggle input {
    accent-color: var(--orange);
    width: 15px;
    height: 15px;
    flex: none;
}
.lp_hours_edit_windows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
.lp_hours_window_edit {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp_hours_window_edit select {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
}
.lp_hours_window_edit select:focus {
    outline: none;
    border-color: var(--orange);
}
.lp_hours_dash {
    color: var(--stone);
}
.lp_hours_remove {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--stone);
    line-height: 1;
    cursor: pointer;
}
.lp_hours_remove svg {
    display: block;
}
.lp_hours_remove:hover {
    color: var(--error);
    border-color: rgba(196, 57, 42, 0.4);
}
.lp_hours_add {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--orange);
    cursor: pointer;
}
.lp_hours_add:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}

/* Time off — one-off days a leader is not available at all */
.lp_timeoff {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 0.5px solid var(--border);
}
.lp_timeoff_head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.lp_timeoff_head h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}
.lp_timeoff_list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp_timeoff_row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp_timeoff_date {
    font-size: 13px;
    color: var(--ink);
    min-width: 130px;
}
.lp_timeoff_empty {
    font-size: 13px;
    color: var(--stone);
}
.lp_timeoff_add {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lp_timeoff_date_input,
.lp_timeoff_reason {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
}
.lp_timeoff_date_input:focus,
.lp_timeoff_reason:focus {
    outline: none;
    border-color: var(--orange);
}
.lp_timeoff_button {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--orange);
    cursor: pointer;
}
.lp_timeoff_button:hover {
    color: var(--orange-dark);
    text-decoration: underline;
}

.lp_hours_error {
    font-size: 12.5px;
    color: var(--error);
    margin: 12px 0 0;
}
.lp_hours_message {
    font-size: 13px;
    color: var(--stone);
    margin: 0;
    padding: 12px 0;
}
.lp_hours_message--warn {
    color: var(--warning);
    line-height: 1.5;
    margin-top: 12px;
    padding-bottom: 0;
    border-top: 0.5px solid var(--border);
}
.lp_hours_cancel[disabled] {
    opacity: 0.5;
    cursor: default;
}
.lp_hours_note {
    font-size: 12px;
    color: var(--stone);
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 0.5px solid var(--border);
}

@media (max-width: 850px) {
    /* guests.css hides .cf_tabs below 850px for the guests drill-in. This tab bar is
       the only way to reach CareFlows and Office Hours on a phone, so it must stay —
       the CareFlow detail page does the same for its own bar. */
    .cf_tabs.lp_tabs {
        display: flex;
    }
    /* The circle stays 26px so the row still reads calmly, but the area a thumb has
       to hit is grown to 44px. */
    .lp_hours_remove {
        position: relative;
    }
    .lp_hours_remove::after {
        content: "";
        position: absolute;
        inset: -9px;
    }
}
@media (max-width: 640px) {
    .lp_hours .lp_section_head {
        flex-wrap: wrap;
    }
    .lp_hours_buttons {
        width: 100%;
        margin-left: 0;
    }
    .lp_hours_row,
    .lp_hours_edit_row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .lp_hours_row--today {
        margin: 0;
        padding: 9px 10px;
    }
    .lp_hours_toggle {
        padding-top: 0;
    }
    .lp_hours_window_edit {
        width: 100%;
    }
    .lp_hours_window_edit select {
        flex: 1;
        min-width: 0;
    }
}