/* Patient add/edit — white card with comfortable padding (fills .app-page 960). */
.hospitals-container .patient-form-card {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 28px 32px;
}

.hospitals-container .patient-form-card.patient-find-card {
    max-width: 960px;
}

/* Zones: full-width map on desktop (inline styles removed from markup) */
.zones-map-container {
    width: 100%;
    height: 600px;
    border-radius: 8px;
    min-height: 240px;
}

/* Zone name labels on /zones map (Google Maps default label element) */
.zones-map-zone-label {
    text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Zones grid wrapper — enables horizontal scroll on narrow viewports */
.zones-page .zones-grid-wrap {
    width: 100%;
    margin-bottom: 1rem;
}

/* Prestonwood Deacons Blazor - Custom Styles */

/* Variables */
:root {
    --prestonwood-primary: #1a365d;
    --prestonwood-secondary: #2c5282;
    --prestonwood-accent: #3182ce;
    --prestonwood-success: #38a169;
    --prestonwood-warning: #d69e2e;
    --prestonwood-danger: #e53e3e;
    
    /* Menu colors - Dark theme */
    --menu-bg: #1a365d;
    --menu-text: #ffffff;
    --menu-hover-bg: #2c5282;
    --menu-hover-text: #ffffff;
    --menu-active-bg: #3182ce;
    --menu-icon-color: #ffffff;
    --menu-icon-hover: #90caf9;
    --menu-border: #2c5282;
    --header-chrome-border: rgba(255, 255, 255, 0.45);

    /* Page layout tokens (Prayer List look; do not reuse --prestonwood-accent for teal filters) */
    --app-page-bg: #f8f9fa;
    --app-page-padding: 24px;
    --app-page-padding-mobile: 16px;
    --app-title-color: #333;
    --app-title-size: 28px;
    --app-title-weight: 400;
    --app-grid-border: #dee2e6;
    --app-grid-header: #495057;
    --app-card-radius: 6px;

    /*
     * Section header (underlined h2). Meanings live in docs/features/ui-palette.md.
     * Do not invent a second navy for the same job.
     */
    --app-section-title: #1a5276;
    --app-section-title-size: 24px;
    --app-section-title-size-mobile: 28px;
    --app-section-title-weight: 400;
    --app-section-title-underline: 3px;

    /*
     * Action + status tokens. Meanings live in docs/features/ui-palette.md.
     * Add a new Action * name there first, then a token here. Do not invent a second hex.
     */
    --app-action-primary: #468cc8;
    --app-action-primary-hover: #387fbc;
    --app-action-primary-deep: #2c6595;
    --app-action-on-primary: #fff;
    --app-action-secondary: #dee2e6;
    --app-action-secondary-hover: #ced4da;
    --app-action-on-secondary: #212529;
    --app-action-warning: #d65352;
    --app-action-warning-hover: #b12b2a;
    --app-action-on-warning: #fff;
    --app-status-success: #2eaf9a;
    --app-status-warning: #eeac55;
    --app-status-warning-deep: #e08916;
    --app-status-danger: var(--app-action-warning);
    --app-status-info: #17a2b8;
    --app-row-action: #5bc0de;
    --app-row-action-hover: #46b8da;
    --app-flag: var(--app-action-primary);
    --app-flag-orange: #f0ad4e;

    /* Aliases for existing class names */
    --app-zone-blue: var(--app-action-primary);
    --app-flag-blue: var(--app-action-primary);
    --app-filter-teal: var(--app-status-info);
    --app-row-btn: var(--app-row-action);
    --app-row-btn-hover: var(--app-row-action-hover);

    /*
     * Point Bootstrap + Telerik "primary" at Action Primary so ThemeColor.Primary
     * and .btn-primary are never the theme default #0d6efd. See ui-palette.md.
     */
    --bs-primary: #468cc8;
    --bs-primary-rgb: 70, 140, 200;
    --kendo-color-primary: #468cc8;
    --kendo-color-primary-hover: #387fbc;
    --kendo-color-primary-active: #2c6595;
    --kendo-color-on-primary: #fff;
}

/* Typography */
body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Page Wrapper */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header/Navbar */
.navbar {
    background: linear-gradient(135deg, var(--prestonwood-primary) 0%, var(--prestonwood-secondary) 100%) !important;
    min-height: 52px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Mobile: keep logo, hamburger, and collapsed menu content off the screen edges */
@media (max-width: 991.98px) {
    .page-wrapper > header.navbar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.5rem;
    }

    /* Row 1: logo · utilities · hamburger. Row 2: full-width search. */
    .page-wrapper > header.navbar > .navbar-brand {
        order: 1;
    }

    .page-wrapper > header.navbar > .header-utilities {
        order: 2;
        margin-left: auto !important;
    }

    .page-wrapper > header.navbar > .navbar-toggler {
        order: 3;
        margin-left: 0.25rem !important;
    }

    .page-wrapper > header.navbar > .header-patient-search {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0.125rem;
        padding-left: 0;
        padding-right: 0;
    }

    /* Menu + phone profile: full width under search */
    .page-wrapper > header.navbar > #navbarNav {
        order: 5;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        margin-top: 0.25rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0 0 0.375rem 0.375rem;
        background: rgba(0, 0, 0, 0.18);
    }

    #navbarNav .mobile-app-nav .nav-link,
    #navbarNav .mobile-app-nav .btn-link.nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #navbarNav .mobile-app-nav .collapse .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    #navbarNav .navbar-nav.navbar-mobile-user {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .page-wrapper > header.navbar {
        flex-wrap: nowrap;
    }

    .page-wrapper > header.navbar > .navbar-brand,
    .page-wrapper > header.navbar > .navbar-toggler,
    .page-wrapper > header.navbar > .header-patient-search,
    .page-wrapper > header.navbar > #navbarNav,
    .page-wrapper > header.navbar > .header-utilities {
        order: 0;
        margin-top: 0;
    }

    .page-wrapper > header.navbar > .header-utilities {
        margin-right: 1rem;
    }

    .page-wrapper > header.navbar > #navbarNav {
        border-top: none;
        border-radius: 0;
        background: transparent;
        padding-top: 0;
    }

    /* White field width on large screens — ~250px of typeable space plus
       the leading magnifier (old layout was 250px input + outside button). */
    .page-wrapper > header.navbar .header-patient-search {
        flex: 0 0 290px;
        width: 290px;
        min-width: 290px;
        max-width: 290px;
    }

    .page-wrapper > header.navbar .header-patient-search-field {
        width: 100%;
    }

    #navbarNav .navbar-nav.navbar-mobile-user {
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }
}

.navbar-brand img {
    max-height: 40px;
}

/* Profile dropdown link - no padding so 46px avatar fits in header (override Bootstrap .nav-link) */
.navbar .nav-link-profile.nav-link {
    padding: 0 !important;
}

/* Navbar profile avatar (initials or photo) */
.nav-avatar-initials,
.nav-avatar-img {
    display: inline-block;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    vertical-align: middle;
}
.nav-avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
}
.nav-avatar-img {
    object-fit: cover;
}

/* Main Content — one page inset for every MainLayout route (Directory look). */
.main-content {
    flex: 1;
    background-color: var(--app-page-bg);
    padding: var(--app-page-padding);
    box-sizing: border-box;
}

.main-content .k-grid {
    width: 100%;
}

@media (max-width: 768px) {
    .main-content {
        padding: var(--app-page-padding-mobile);
    }
}

@media print {
    .main-content {
        padding: 0;
    }
}

/* Cards */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-weight: 600;
}

/* Zone Widgets (legacy-style display cards; not interactive) */
.zone-widget {
    background-color: var(--menu-bg) !important;
    border: none !important;
}

.zone-widget .card-header {
    font-weight: 600;
    padding: 0.75rem 1rem;
    background-color: var(--menu-bg) !important;
    color: var(--menu-text) !important;
    border-bottom: 1px solid var(--menu-border) !important;
}

.zone-widget .card-body {
    background-color: var(--menu-bg) !important;
    color: var(--menu-text) !important;
}

.zone-widget .display-4 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--menu-text) !important;
}

/* Ensure any text/icons inside widgets are visible on dark background */
.zone-widget,
.zone-widget * {
    color: var(--menu-text);
}

.zone-widget .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Status badges */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* DO NOT VISIT flag — Shared/DoNotVisitBadge.razor (ui-palette Icons) */
.do-not-visit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--app-flag-orange);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 8px;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

.do-not-visit-badge .k-svg-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    color: #fff;
}

.do-not-visit-badge .k-svg-icon svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
}

.do-not-visit-badge-text {
    display: inline-block;
}

/* Phone and Home lists: first 10 rows, then Load more (ui-palette). */
.app-load-more {
    margin-top: 12px;
}

/* -------------------------------------------------------------------------
   Trailing clear — inline × inside typed single-line fields (ui-palette).
   Keep the button position:absolute over the input; search-row chrome
   (Widows / Directory / Hospitals) must not pull the × into the flex row.
   ------------------------------------------------------------------------- */
.app-text-clear {
    position: relative !important;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
}

.app-text-clear > .form-control,
.app-text-clear > input.form-control {
    display: block;
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding-right: 2.35rem !important;
    box-sizing: border-box;
}

/* Bootstrap hides .invalid-feedback unless it is the input's sibling. The × wrap sits between them. */
.app-text-clear:has(input.is-invalid) + .invalid-feedback {
    display: block;
}

.app-text-clear-btn {
    position: absolute !important;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.2rem;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: #6c757d;
    line-height: 1;
    cursor: pointer;
}

.app-text-clear-btn:hover,
.app-text-clear-btn:focus-visible {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.06);
    outline: none;
}

.app-text-clear-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(70, 140, 200, 0.45);
}

.app-text-clear-btn .k-svg-icon {
    width: 1rem;
    height: 1rem;
}

/* -------------------------------------------------------------------------
   Inline search field — magnifier inside the white box (header reference).
   ------------------------------------------------------------------------- */
.app-search-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.app-search-field > .form-control,
.app-search-field > input.form-control {
    width: 100%;
    /* Room for clear + divider + magnifier on the right. */
    padding-right: 3.5rem;
    box-sizing: border-box;
}

/* Hide native clear — we place an explicit × left of the divider. */
.app-search-field input[type="search"]::-webkit-search-decoration,
.app-search-field input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.app-search-field-clear,
.app-search-field-submit {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: none;
    background: transparent;
    color: #6c757d;
    line-height: 1;
    cursor: pointer;
}

.app-search-field:has(input:not(:placeholder-shown)) .app-search-field-clear {
    display: inline-flex;
}

.app-search-field-submit {
    display: inline-flex;
    right: 0.15rem;
    width: 1.75rem;
    height: 1.5rem;
    padding: 0 0 0 0.4rem;
    border-left: 1px solid #ced4da;
    border-radius: 0;
}

/* × tight against the left of the divider. */
.app-search-field-clear {
    right: 1.95rem;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border-radius: 0.25rem;
    font-size: 0.85rem;
}

.app-search-field-clear:hover,
.app-search-field-clear:focus-visible,
.app-search-field-submit:hover,
.app-search-field-submit:focus-visible {
    color: #212529;
    outline: none;
}

.app-search-field-clear:hover,
.app-search-field-clear:focus-visible {
    background-color: rgba(0, 0, 0, 0.06);
}

.app-search-field-clear:focus-visible {
    box-shadow: 0 0 0 2px rgba(70, 140, 200, 0.45);
}

/* -------------------------------------------------------------------------
   Shared data tables — one look, one stylesheet.
   TelerikGrid (.k-grid) and Bootstrap .table use the same chrome. Do not
   re-declare these on a page.
   ------------------------------------------------------------------------- */
.k-grid,
.table {
    border: 1px solid var(--app-grid-border, #dee2e6) !important;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
}

/* Facility cards already round the shell. A second radius on the nested grid
   notches the Patient Name header (and last-row corners) away from the border. */
.facility-card .k-grid,
.facility-card .table {
    border: none !important;
    border-radius: 0;
    overflow: visible;
}

.facility-card .k-grid .k-grid-header,
.facility-card .k-grid .k-grid-header th,
.facility-card .k-grid .k-table-th,
.facility-card .k-grid td,
.facility-card .k-grid .k-table-td {
    border-radius: 0 !important;
}

.k-grid .k-grid-header,
.table > thead {
    background-color: #f8f9fa !important;
}

/* A one-column list with no column title (Sympathy, Prayer List names). */
.k-grid.app-grid-headerless .k-grid-header {
    display: none !important;
}

/* Page Back is the upper-left control, before the title. */
.app-back {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.5rem;
}

/* One Back look: Action Secondary fill, arrow, label. Links and Telerik buttons share it. */
a.app-back-btn,
.k-button.app-back-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    align-self: flex-start;
    justify-self: start;
    background-color: var(--app-action-secondary) !important;
    border: 1px solid var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
    box-shadow: none !important;
    border-radius: 4px;
    padding: 6px 12px !important;
    font-weight: 400;
    text-decoration: none;
    line-height: 1.5;
}

a.app-back-btn:hover,
.k-button.app-back-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

a.app-back-btn .k-svg-icon,
.k-button.app-back-btn .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

/*
 * Phone action buttons (≤767.98px): one full-width bar, at least 44px, label centered.
 * A row of them stacks. Desktop stays compact and inline.
 * Stay on one line: segmented toggles, search beside its field, grids, pager,
 * field chrome, and the New Members icon strip.
 */
@media (max-width: 767.98px) {
    .app-back {
        width: 100%;
    }

    .app-page .k-button:not(.k-button-group .k-button):not(.k-pager .k-button):not(.k-grid .k-button):not(.search-button):not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(.k-chip-action):not(.k-clear-value):not(.app-text-clear-btn):not(.nm-row-actions-secondary .k-button):not(.settings-dropdown),
    .app-page .btn:not(.btn-link):not(.btn-close):not(.k-button-group .btn):not(.k-pager .btn):not(.k-grid .btn):not(.nm-row-actions-secondary .btn),
    .app-page a.btn:not(.btn-link):not(.k-grid a.btn):not(.nm-row-actions-secondary a.btn),
    a.app-back-btn,
    .k-button.app-back-btn,
    .k-window .k-button:not(.k-window-titlebar .k-button):not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(.k-clear-value):not(.search-button),
    .k-dialog .k-button:not(.k-dialog-titlebar .k-button):not(.k-input-button):not(.k-clear-value) {
        width: 100% !important;
        max-width: none !important;
        justify-content: center;
        min-height: 44px;
        box-sizing: border-box;
    }

    .app-page .d-flex:not(.directory-search-wrap):not(.widows-search-wrap):not(.hospitals-search-wrap):not(.users-search-wrap):not(.k-button-group):has(> .k-button),
    .app-page .d-flex:not(.k-button-group):has(> .btn),
    .app-page .d-flex:has(> a.btn),
    .k-window .d-flex:has(> .k-button),
    .k-window .k-actions,
    .k-window .k-dialog-buttongroup,
    .k-dialog .k-actions,
    .k-dialog .k-dialog-buttongroup {
        flex-direction: column;
        align-items: stretch;
    }

    .k-grid .d-flex,
    .k-button-group,
    .k-pager,
    .nm-row-actions-secondary {
        flex-direction: row !important;
        align-items: center !important;
    }
}

.k-grid .k-grid-header th,
.k-grid .k-table-th,
.table > thead > tr > th,
.table > thead > tr > td {
    font-weight: 600 !important;
    color: var(--app-grid-header, #495057) !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid var(--app-grid-border, #dee2e6) !important;
    vertical-align: middle !important;
}

.k-grid .k-grid-content td,
.k-grid .k-table-td,
.k-grid td,
.table > tbody > tr > td,
.table > tbody > tr > th {
    font-size: 14px !important;
    color: var(--app-title-color, #333) !important;
    vertical-align: middle !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #eee !important;
}

.k-grid .k-table-row.k-table-alt-row td,
.k-grid .k-alt td,
.k-grid tr.k-alt td,
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #fafbfc !important;
}

.k-grid .k-grid-content tr:hover td,
.k-grid .k-table-tbody tr:hover td,
.k-grid tbody tr:hover td,
.table-hover > tbody > tr:hover > * {
    background-color: var(--app-page-bg, #f8f9fa) !important;
}

.k-grid .k-pager,
.k-grid .k-grid-pager {
    border-top: 1px solid var(--app-grid-border, #dee2e6) !important;
    background-color: #fff !important;
    padding: 8px 16px !important;
}

.k-grid .k-pager .k-pager-numbers .k-button,
.k-grid .k-grid-pager .k-pager-numbers .k-button {
    min-width: 32px !important;
    height: 32px !important;
}

.k-grid .action-buttons,
.table .action-buttons {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.k-grid .action-buttons .k-button,
.table .action-buttons .k-button {
    padding: 4px 10px !important;
}

/* One fill for every in-row action (View / Edit / Record visit / icon tools).
   Do not paint DatePicker / ComboBox .k-input-button — those stay flat (ui-palette Dates). */
.k-grid td .k-button:not(.k-input-button),
.k-grid .k-table-td .k-button:not(.k-input-button),
.action-buttons .k-button:not(.k-input-button),
.widow-mobile-card .k-button:not(.k-input-button),
.app-mobile-card .k-button:not(.k-input-button),
.deacon-list-card .k-button:not(.k-input-button),
.prayer-patient-mobile-card .k-button:not(.k-input-button),
.table td .k-button:not(.k-input-button) {
    background-color: var(--app-row-btn) !important;
    border-color: var(--app-row-btn) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.k-grid td .k-button:not(.k-input-button):hover,
.k-grid .k-table-td .k-button:not(.k-input-button):hover,
.action-buttons .k-button:not(.k-input-button):hover,
.widow-mobile-card .k-button:not(.k-input-button):hover,
.app-mobile-card .k-button:not(.k-input-button):hover,
.deacon-list-card .k-button:not(.k-input-button):hover,
.prayer-patient-mobile-card .k-button:not(.k-input-button):hover,
.table td .k-button:not(.k-input-button):hover {
    background-color: var(--app-row-btn-hover) !important;
    border-color: var(--app-row-btn-hover) !important;
    color: #fff !important;
}

/* Deacon Directory / ministry View Profile / search self Edit Profile — Action Primary. */
.k-grid td .k-button.view-profile-btn,
.k-grid .k-table-td .k-button.view-profile-btn,
.action-buttons .k-button.view-profile-btn,
.app-mobile-card .k-button.view-profile-btn,
.deacon-list-card .k-button.view-profile-btn,
.global-search-page .k-button.view-profile-btn,
.global-search-result-card .k-button.view-profile-btn {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.k-grid td .k-button.view-profile-btn:hover,
.k-grid .k-table-td .k-button.view-profile-btn:hover,
.action-buttons .k-button.view-profile-btn:hover,
.app-mobile-card .k-button.view-profile-btn:hover,
.deacon-list-card .k-button.view-profile-btn:hover,
.global-search-page .k-button.view-profile-btn:hover,
.global-search-result-card .k-button.view-profile-btn:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.global-search-page .k-button.view-profile-btn .k-svg-icon {
    color: var(--app-action-on-primary) !important;
}

/* Record visit patient name — unscoped so isolation cannot shrink it. */
.record-visit-page .record-visit-who,
.record-visit-page .record-visit-who span {
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.2;
    color: #333;
}

.record-visit-page .record-visit-who .fa-user {
    font-size: 18px !important;
}

/* Legacy Visitations/Record.cshtml: span.help-block > em */
.record-visit-page .help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #919191;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
}

.record-visit-page .help-block em {
    font-style: italic;
    font-weight: 400;
}

.record-visit-date {
    max-width: 240px;
}

.record-visit-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
}

.record-visit-footer .record-visit-inline-error {
    margin-bottom: 0;
}

.record-visit-actions {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 0;
}

.record-visit-actions .k-button {
    width: auto !important;
    max-width: none !important;
    justify-content: center;
    box-sizing: border-box;
}

/* Telerik 13 uses k-button-solid-primary; keep older k-button-solid.k-button-primary too. */
.record-visit-actions .k-button-solid.k-button-primary,
.record-visit-actions .k-button-solid-primary,
.record-visit-actions .k-button-solid.k-button-success,
.record-visit-actions .k-button-solid-success,
#widow-visit-save.k-button,
#visit-record-save.k-button {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.record-visit-actions .k-button-solid.k-button-primary:hover,
.record-visit-actions .k-button-solid-primary:hover,
.record-visit-actions .k-button-solid.k-button-success:hover,
.record-visit-actions .k-button-solid-success:hover,
#widow-visit-save.k-button:hover,
#visit-record-save.k-button:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.record-visit-actions .k-button-solid.k-button-base,
.record-visit-actions .k-button-solid-base {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.record-visit-actions .k-button-solid.k-button-base:hover,
.record-visit-actions .k-button-solid-base:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.record-visit-actions .k-button-solid.k-button-error,
.record-visit-actions .k-button-solid-error {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.record-visit-actions .k-button-solid.k-button-error:hover,
.record-visit-actions .k-button-solid-error:hover {
    background-color: var(--app-action-warning-hover) !important;
    border-color: var(--app-action-warning-hover) !important;
    color: var(--app-action-on-warning) !important;
}

.record-visit-actions .k-button-solid.k-button-primary .k-svg-icon,
.record-visit-actions .k-button-solid-primary .k-svg-icon,
.record-visit-actions .k-button-solid.k-button-success .k-svg-icon,
.record-visit-actions .k-button-solid-success .k-svg-icon,
.record-visit-actions .k-button-solid.k-button-error .k-svg-icon,
.record-visit-actions .k-button-solid-error .k-svg-icon,
#widow-visit-save.k-button .k-svg-icon,
#visit-record-save.k-button .k-svg-icon {
    color: var(--app-action-on-primary) !important;
}

.record-visit-actions .k-button-solid.k-button-base .k-svg-icon,
.record-visit-actions .k-button-solid-base .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

.k-window.record-visit-delete-dialog .k-button-solid.k-button-base,
.k-window.record-visit-delete-dialog .k-button-solid-base {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.k-window.record-visit-delete-dialog .k-button-solid.k-button-error,
.k-window.record-visit-delete-dialog .k-button-solid-error {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.record-visit-delete-wrap {
    margin-top: 1.25rem;
}

.record-visit-delete-link {
    appearance: none;
    background: none;
    border: 0;
    padding: 8px 0;
    color: var(--app-action-warning);
    text-decoration: underline;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1.4;
    min-height: 44px;
}

.record-visit-delete-link:hover {
    color: var(--app-action-warning-hover);
}

@media (max-width: 768px) {
    .record-visit-date {
        max-width: none;
    }

    .record-visit-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .record-visit-actions .k-button {
        width: 100% !important;
    }
}

@media (max-width: 767.98px) {
    /*
     * Mobile tap floor — every Bootstrap / Telerik action control is at least 44px.
     * Exempt: text-link buttons, dialog close, and input chrome (combo arrows, spinners).
     * See docs/features/ui-palette.md (Tap targets).
     */
    .btn:not(.btn-link):not(.btn-close),
    a.btn:not(.btn-link),
    button.btn:not(.btn-link):not(.btn-close),
    .k-button:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(.k-chip-action):not(.k-clear-value),
    .k-dialog-buttongroup .k-button,
    .k-actions .k-button,
    .k-fab {
        min-height: 44px;
        box-sizing: border-box;
    }

    .btn:not(.btn-link):not(.btn-close),
    a.btn:not(.btn-link),
    .k-button:not(.k-input-button):not(.k-spinner-increase):not(.k-spinner-decrease):not(.k-chip-action):not(.k-clear-value) {
        padding-block: max(10px, 0.5rem);
    }

    /*
     * List search rows (Widows / Directory / Hospitals / Users): the Search
     * button gets the 44px floor above; stretch the field to the same height
     * so the joined input+magnifier does not stair-step on phone.
     */
    .directory-search-wrap .app-text-clear,
    .users-search-wrap .app-text-clear,
    .widows-search-wrap .app-text-clear,
    .hospitals-search-wrap .app-text-clear {
        display: flex !important;
        align-items: stretch;
        align-self: stretch;
    }

    .directory-search-wrap .app-text-clear > .form-control,
    .directory-search-wrap .app-text-clear > input.form-control,
    .users-search-wrap .app-text-clear > .form-control,
    .users-search-wrap .app-text-clear > input.form-control,
    .widows-search-wrap .app-text-clear > .form-control,
    .widows-search-wrap .app-text-clear > input.form-control,
    .hospitals-search-wrap .app-text-clear > .form-control,
    .hospitals-search-wrap .app-text-clear > input.form-control {
        min-height: 44px;
        height: 100%;
    }

    .directory-search-wrap .k-button.search-button,
    .users-search-wrap .k-button.search-button,
    .widows-search-wrap .k-button.search-button,
    .hospitals-search-wrap .k-button.search-button {
        align-self: stretch;
        height: auto;
    }

    /*
     * Phone fields — 44px tall, 16px type (ui-palette Phone fields).
     * 16px stops iOS from zooming the page when the field is focused.
     * Textareas keep their rows; the 44px line is only a floor.
     */
    .form-control,
    .form-select,
    .k-input,
    .k-picker,
    .k-input-inner {
        font-size: 16px;
    }

    .form-control:not(textarea),
    .form-select,
    .k-input,
    .k-picker {
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 44px;
    }

    .page-wrapper > header.navbar .header-patient-search .form-control {
        height: 44px;
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-right: 5.75rem;
    }

    .page-wrapper > header.navbar .header-patient-search .app-search-field-submit,
    .page-wrapper > header.navbar .header-patient-search .app-search-field-clear {
        top: 0;
        transform: none;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .page-wrapper > header.navbar .header-patient-search .app-search-field-submit {
        right: 0;
    }

    .page-wrapper > header.navbar .header-patient-search .app-search-field-clear {
        right: 44px;
    }
}

/* Prayer List + Home Visits + Global search patients: Record Visit = Action Primary, View = Action Secondary. */
.visitation-list-page .k-button.visitation-record-btn,
.visitation-list-page .k-grid td .k-button.visitation-record-btn,
.visitation-list-page .action-buttons .k-button.visitation-record-btn,
.dashboard-visits .k-button.visitation-record-btn,
.dashboard-visits .k-grid td .k-button.visitation-record-btn,
.dashboard-visits .action-buttons .k-button.visitation-record-btn,
.global-search-page .k-button.visitation-record-btn,
.global-search-page .k-grid td .k-button.visitation-record-btn,
.global-search-page .action-buttons .k-button.visitation-record-btn {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.visitation-list-page .k-button.visitation-record-btn:hover,
.visitation-list-page .k-grid td .k-button.visitation-record-btn:hover,
.visitation-list-page .action-buttons .k-button.visitation-record-btn:hover,
.dashboard-visits .k-button.visitation-record-btn:hover,
.dashboard-visits .k-grid td .k-button.visitation-record-btn:hover,
.dashboard-visits .action-buttons .k-button.visitation-record-btn:hover,
.global-search-page .k-button.visitation-record-btn:hover,
.global-search-page .k-grid td .k-button.visitation-record-btn:hover,
.global-search-page .action-buttons .k-button.visitation-record-btn:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.visitation-list-page .k-button.visitation-view-btn,
.visitation-list-page .k-grid td .k-button.visitation-view-btn,
.visitation-list-page .action-buttons .k-button.visitation-view-btn,
.dashboard-visits .k-button.visitation-view-btn,
.dashboard-visits .k-grid td .k-button.visitation-view-btn,
.dashboard-visits .action-buttons .k-button.visitation-view-btn,
.dashboard-visits .k-button.visitation-edit-note-btn,
.dashboard-visits .k-grid td .k-button.visitation-edit-note-btn,
.dashboard-visits .action-buttons .k-button.visitation-edit-note-btn,
.global-search-page .k-button.visitation-view-btn,
.global-search-page .k-grid td .k-button.visitation-view-btn,
.global-search-page .action-buttons .k-button.visitation-view-btn {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.visitation-list-page .k-button.visitation-view-btn:hover,
.visitation-list-page .k-grid td .k-button.visitation-view-btn:hover,
.visitation-list-page .action-buttons .k-button.visitation-view-btn:hover,
.dashboard-visits .k-button.visitation-view-btn:hover,
.dashboard-visits .k-grid td .k-button.visitation-view-btn:hover,
.dashboard-visits .action-buttons .k-button.visitation-view-btn:hover,
.dashboard-visits .k-button.visitation-edit-note-btn:hover,
.dashboard-visits .k-grid td .k-button.visitation-edit-note-btn:hover,
.dashboard-visits .action-buttons .k-button.visitation-edit-note-btn:hover,
.global-search-page .k-button.visitation-view-btn:hover,
.global-search-page .k-grid td .k-button.visitation-view-btn:hover,
.global-search-page .action-buttons .k-button.visitation-view-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.global-search-page .k-button.visitation-record-btn .k-svg-icon,
.global-search-page .k-button.visitation-view-btn .k-svg-icon {
    color: inherit !important;
}

.k-grid td .k-button:not(.k-input-button) .k-svg-icon,
.k-grid .k-table-td .k-button:not(.k-input-button) .k-svg-icon,
.action-buttons .k-button .k-svg-icon,
.table td .k-button:not(.k-input-button) .k-svg-icon {
    color: #fff !important;
}

/* DatePicker calendar toggle: Action Secondary grey pad + on-secondary (black) glyph.
   Never Action Primary blue and never the old row teal (`--app-row-btn`). */
.k-datepicker .k-input-button,
.k-datepicker.k-picker .k-input-button,
.k-grid td .k-datepicker .k-input-button,
.k-grid .k-table-td .k-datepicker .k-input-button,
.k-grid td .k-button.k-input-button,
.k-grid .k-table-td .k-button.k-input-button {
    background-color: var(--app-action-secondary) !important;
    background-image: none !important;
    border-color: var(--app-action-secondary) !important;
    box-shadow: none !important;
    color: var(--app-action-on-secondary) !important;
}

.k-datepicker .k-input-button .k-svg-icon,
.k-datepicker .k-input-button .k-icon,
.k-datepicker .k-input-button svg,
.k-datepicker .k-input-button path,
.k-grid td .k-datepicker .k-input-button .k-svg-icon,
.k-grid td .k-datepicker .k-input-button svg,
.k-grid td .k-datepicker .k-input-button path,
.k-grid td .k-button.k-input-button .k-svg-icon,
.k-grid td .k-button.k-input-button svg,
.k-grid td .k-button.k-input-button path {
    color: var(--app-action-on-secondary) !important;
    fill: var(--app-action-on-secondary) !important;
}

.k-datepicker .k-input-button:hover,
.k-datepicker .k-input-button:focus,
.k-grid td .k-datepicker .k-input-button:hover,
.k-grid td .k-datepicker .k-input-button:focus,
.k-grid td .k-button.k-input-button:hover,
.k-grid td .k-button.k-input-button:focus {
    background-color: var(--app-action-secondary-hover) !important;
    background-image: none !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.k-datepicker .k-input-button:hover .k-svg-icon,
.k-datepicker .k-input-button:hover svg,
.k-datepicker .k-input-button:hover path,
.k-datepicker .k-input-button:focus .k-svg-icon,
.k-datepicker .k-input-button:focus svg,
.k-datepicker .k-input-button:focus path,
.k-grid td .k-datepicker .k-input-button:hover .k-svg-icon,
.k-grid td .k-datepicker .k-input-button:hover svg,
.k-grid td .k-datepicker .k-input-button:hover path,
.k-grid td .k-button.k-input-button:hover .k-svg-icon,
.k-grid td .k-button.k-input-button:hover svg,
.k-grid td .k-button.k-input-button:hover path {
    color: var(--app-action-on-secondary) !important;
    fill: var(--app-action-on-secondary) !important;
}

.visitation-list-page .k-button.visitation-view-btn .k-svg-icon,
.dashboard-visits .k-button.visitation-view-btn .k-svg-icon,
.dashboard-visits .k-button.visitation-edit-note-btn .k-svg-icon,
.widows-container .k-button.widow-view-btn .k-svg-icon,
.widow-mobile-card .k-button.widow-view-btn .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

@media (max-width: 768px) {
    .k-grid .k-grid-header th,
    .k-grid .k-table-th,
    .k-grid .k-grid-content td,
    .k-grid .k-table-td,
    .table > :not(caption) > * > * {
        padding: 10px 12px !important;
    }
}

/* Page shell: centered 960 content column. Dialogs/popups are outside .app-page. */
.app-page {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.app-page h1 {
    font-size: var(--app-title-size);
    font-weight: var(--app-title-weight);
    color: var(--app-title-color);
}

/* FocusOnNavigate still focuses h1 after routing; hide the browser ring on titles. */
.app-page h1:focus,
.app-page h1:focus-visible {
    outline: none;
}

.app-search-row,
.app-page .directory-search-wrap,
.app-page .users-search-wrap,
.app-page .widows-filter-row,
.app-page .widows-search-wrap,
.app-page .hospitals-filter-row,
.app-page .hospitals-search-wrap {
    display: flex;
    align-items: stretch;
    max-width: 480px;
    width: 100%;
}

/* -------------------------------------------------------------------------
   Page layout — Widows shell (search / gear / badges). Grid chrome is above.
   ------------------------------------------------------------------------- */
.widows-filter-row,
.hospitals-filter-row {
    display: flex;
    align-items: stretch;
    max-width: 480px;
    width: 100%;
}

/* Grow the clear-wrap (not the bare input) next to the search button. */
.widows-filter-row .app-text-clear,
.directory-search-wrap .app-text-clear,
.hospitals-search-wrap .app-text-clear,
.users-search-wrap .app-text-clear {
    flex: 1 1 auto;
    min-width: 0;
}

.widows-filter-row .widows-search-input,
.directory-search-wrap .directory-search-input,
.hospitals-search-wrap .search-box {
    border-radius: 4px 0 0 4px !important;
}

.widows-filter-row .k-button {
    flex-shrink: 0;
    border-radius: 0 4px 4px 0 !important;
    border-left: none !important;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/*
 * Section header — underlined h2 for page sections (Prayer List Hospitals / LTC / …).
 * Prefer .app-section-title. Legacy aliases keep /prayerboard and /visitation working.
 */
.app-section-title,
.prayer-list-page .section-title,
.prayer-list-section-title {
    font-size: var(--app-section-title-size);
    font-weight: var(--app-section-title-weight);
    color: var(--app-section-title);
    margin: 0 0 16px;
    padding: 0 0 1px;
    line-height: 1.1;
    background-color: transparent;
    border: none;
    border-radius: 0;
    border-bottom: var(--app-section-title-underline) solid var(--app-section-title);
}

.app-section + .app-section {
    margin-top: 4rem;
}

@media (max-width: 768px) {
    .app-section-title,
    .prayer-list-page .section-title,
    .prayer-list-section-title {
        font-size: var(--app-section-title-size-mobile);
        padding: 0 0 1px;
    }
}

/* Page gear: square icon beside the h1. Does not grow (ui-palette Page gear). */
.page-header:has(> .settings-dropdown) {
    justify-content: flex-start !important;
}

.page-title-row > .settings-dropdown {
    flex: 0 0 auto;
}

.settings-dropdown.k-button {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--app-filter-teal) !important;
    box-shadow: none !important;
}

.settings-dropdown.k-button:hover,
.settings-dropdown.k-button.k-focus {
    background-color: #e9ecef !important;
}

.settings-dropdown.k-button .k-svg-icon {
    color: var(--app-filter-teal) !important;
}

@media (max-width: 767.98px) {
    .settings-dropdown.k-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
    }
}

.widows-container .widow-tag-badge,
.widows-container .status-badge-inline {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    color: #fff;
}

.widows-container .widow-tag-badge {
    background: var(--app-flag-blue);
}

.widows-container .status-badge-inline {
    background: var(--app-flag-orange);
}

.widows-container .k-button.widow-log-visit-btn,
.widows-container .k-grid td .k-button.widow-log-visit-btn,
.widows-container .action-buttons .k-button.widow-log-visit-btn,
.widow-mobile-card .k-button.widow-log-visit-btn,
.global-search-page .k-button.widow-log-visit-btn,
.global-search-page .k-grid td .k-button.widow-log-visit-btn,
.global-search-page .action-buttons .k-button.widow-log-visit-btn {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.widows-container .k-button.widow-log-visit-btn:hover,
.widows-container .k-grid td .k-button.widow-log-visit-btn:hover,
.widows-container .action-buttons .k-button.widow-log-visit-btn:hover,
.widow-mobile-card .k-button.widow-log-visit-btn:hover,
.global-search-page .k-button.widow-log-visit-btn:hover,
.global-search-page .k-grid td .k-button.widow-log-visit-btn:hover,
.global-search-page .action-buttons .k-button.widow-log-visit-btn:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.widows-container .k-button.widow-view-btn,
.widows-container .k-grid td .k-button.widow-view-btn,
.widows-container .action-buttons .k-button.widow-view-btn,
.widow-mobile-card .k-button.widow-view-btn,
.global-search-page .k-button.widow-view-btn,
.global-search-page .k-grid td .k-button.widow-view-btn,
.global-search-page .action-buttons .k-button.widow-view-btn {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.widows-container .k-button.widow-view-btn:hover,
.widows-container .k-grid td .k-button.widow-view-btn:hover,
.widows-container .action-buttons .k-button.widow-view-btn:hover,
.widow-mobile-card .k-button.widow-view-btn:hover,
.global-search-page .k-button.widow-view-btn:hover,
.global-search-page .k-grid td .k-button.widow-view-btn:hover,
.global-search-page .action-buttons .k-button.widow-view-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.global-search-page .k-button.widow-log-visit-btn .k-svg-icon,
.global-search-page .k-button.widow-view-btn .k-svg-icon {
    color: inherit !important;
}

/* Global search: row Select / Add = Action Secondary; Search stays Action Primary. */
.global-search-page .k-button.global-search-select-btn,
.global-search-page .k-button.global-search-add-btn {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.global-search-page .k-button.global-search-select-btn:hover,
.global-search-page .k-button.global-search-add-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.global-search-page .k-button.global-search-select-btn .k-svg-icon,
.global-search-page .k-button.global-search-add-btn .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

/* Shared Action Secondary — quiet View / Edit / notes / Back (ui-palette.md). */
.k-button.app-row-secondary-btn,
.k-button-solid-base.app-row-secondary-btn {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.k-button.app-row-secondary-btn:hover,
.k-button-solid-base.app-row-secondary-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.k-button.app-row-secondary-btn .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

/* Shared Action Warning — Archive / Remove / Delete (ui-palette.md). ThemeColor.Error alone is not remapped. */
.k-button.app-action-warning-btn,
.k-button-solid-error.app-action-warning-btn {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.k-button.app-action-warning-btn:hover,
.k-button-solid-error.app-action-warning-btn:hover {
    background-color: var(--app-action-warning-hover) !important;
    border-color: var(--app-action-warning-hover) !important;
    color: var(--app-action-on-warning) !important;
}

.k-button.app-action-warning-btn .k-svg-icon,
.k-button-solid-error.app-action-warning-btn .k-svg-icon {
    color: var(--app-action-on-warning) !important;
}

.k-button-outline.app-action-warning-btn,
.k-button-outline-error.app-action-warning-btn {
    background-color: transparent !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-warning) !important;
}

.k-button-outline.app-action-warning-btn:hover,
.k-button-outline-error.app-action-warning-btn:hover {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.k-button-outline.app-action-warning-btn .k-svg-icon,
.k-button-outline-error.app-action-warning-btn .k-svg-icon {
    color: inherit !important;
}

/* Hospitals directory: View / Edit row button = Action Secondary. */
.hospitals-page .k-button.hospital-row-btn,
.hospitals-page .k-grid td .k-button.hospital-row-btn,
.hospitals-page .action-buttons .k-button.hospital-row-btn {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.hospitals-page .k-button.hospital-row-btn:hover,
.hospitals-page .k-grid td .k-button.hospital-row-btn:hover,
.hospitals-page .action-buttons .k-button.hospital-row-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.hospitals-page .k-button.hospital-row-btn .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

/* Deacon Teams list + team detail View / Edit = Action Secondary (same as Prayer List). */
#deacon-teams-page .k-button.teams-view-btn,
#deacon-teams-page .k-grid td .k-button.teams-view-btn,
#deacon-teams-page .action-buttons .k-button.teams-view-btn,
#deacon-teams-page .k-button.teams-edit-btn,
#deacon-teams-page .k-grid td .k-button.teams-edit-btn,
#deacon-teams-page .action-buttons .k-button.teams-edit-btn,
#team-detail-page .k-button.teams-view-btn,
#team-detail-page .action-buttons .k-button.teams-view-btn,
#team-detail-page .k-button.teams-edit-btn,
#team-detail-page #team-edit.k-button {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

#deacon-teams-page .k-button.teams-view-btn:hover,
#deacon-teams-page .k-grid td .k-button.teams-view-btn:hover,
#deacon-teams-page .action-buttons .k-button.teams-view-btn:hover,
#deacon-teams-page .k-button.teams-edit-btn:hover,
#deacon-teams-page .k-grid td .k-button.teams-edit-btn:hover,
#deacon-teams-page .action-buttons .k-button.teams-edit-btn:hover,
#team-detail-page .k-button.teams-view-btn:hover,
#team-detail-page .action-buttons .k-button.teams-view-btn:hover,
#team-detail-page .k-button.teams-edit-btn:hover,
#team-detail-page #team-edit.k-button:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

#deacon-teams-page .k-button.teams-view-btn .k-svg-icon,
#deacon-teams-page .k-button.teams-edit-btn .k-svg-icon,
#team-detail-page .k-button.teams-view-btn .k-svg-icon,
#team-detail-page .k-button.teams-edit-btn .k-svg-icon,
#team-detail-page #team-edit.k-button .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

/* Deacon Teams — Add member ComboBox: name + Active/Inactive status columns. */
.team-add-member-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
}

.team-add-member-choice-head {
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.35rem 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.team-add-member-choice-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.team-add-member-choice-status {
    white-space: nowrap;
    color: #6c757d;
    font-size: 0.8125rem;
    font-weight: 600;
}

.team-add-member-choice-status[data-active="false"] {
    color: #9a3412;
}

/* Deacon Teams — Service years editor. Plain panel so Add/Remove re-render with the page. */
.service-years-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.45);
}

.service-years-panel {
    display: flex;
    flex-direction: column;
    width: min(640px, 100%);
    max-height: min(90vh, 100%);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.service-years-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.25rem;
}

.service-years-panel-head h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.service-years-close {
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 1.75rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    padding: 0;
}

.service-years-panel-body {
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1rem;
}

.service-years-panel-foot {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid #e9ecef;
}

.service-years-panel-foot .btn {
    flex: 1 1 0;
    min-height: 44px;
}

.service-years-editor .service-years-help {
    font-size: 0.875rem;
    line-height: 1.35;
    margin-bottom: 0.75rem;
}

.service-years-grid {
    display: grid;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.service-years-grid-head,
.service-years-grid-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1.1fr) minmax(8.5rem, 1fr) minmax(8.5rem, 1fr) minmax(5.5rem, auto);
    gap: 0.5rem 0.75rem;
    align-items: center;
}

.service-years-grid-head {
    color: #6c757d;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid #e9ecef;
}

.service-years-grid-row {
    padding: 0.35rem 0;
    border-bottom: 1px solid #f1f3f5;
}

.service-years-grid-row:last-child {
    border-bottom: none;
}

.service-years-col-year {
    line-height: 1.25;
    word-break: break-word;
}

/* Desktop uses the column header; keep per-field labels for a11y + phone. */
.service-years-field-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.service-years-col-date .k-datepicker,
.service-years-col-date .service-years-date {
    width: 100% !important;
    max-width: 100%;
}

.service-years-col-action {
    display: flex;
    justify-content: flex-end;
    min-height: 2.25rem;
}

.service-years-remove {
    white-space: nowrap;
}

.service-years-additions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Same phone breakpoint as tap targets (≤767.98px): stacked year cards. */
@media (max-width: 767.98px) {
    .service-years-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .service-years-panel {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .service-years-panel-body {
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem 1rem 1rem;
    }

    .service-years-panel-foot {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0));
    }

    .service-years-editor .service-years-help {
        font-size: 0.9375rem;
        margin-bottom: 1rem;
    }

    .service-years-grid {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .service-years-grid-head {
        display: none;
    }

    .service-years-grid-row {
        grid-template-columns: 1fr;
        grid-template-areas:
            "year"
            "from"
            "through"
            "action";
        align-items: stretch;
        gap: 0.65rem;
        padding: 0.85rem 0.9rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
    }

    .service-years-grid-row:last-child {
        border-bottom: 1px solid #e9ecef;
    }

    .service-years-col-year {
        grid-area: year;
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.3;
        padding-bottom: 0.15rem;
    }

    .service-years-grid-row > .service-years-col-date:nth-child(2) {
        grid-area: from;
    }

    .service-years-grid-row > .service-years-col-date:nth-child(3) {
        grid-area: through;
    }

    .service-years-col-date {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        min-width: 0;
    }

    .service-years-field-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #6c757d;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .service-years-col-date .k-datepicker,
    .service-years-col-date .service-years-date,
    .service-years-col-date .k-input,
    .service-years-col-date .k-picker {
        width: 100% !important;
        min-height: 44px;
        font-size: 16px !important;
    }

    .service-years-col-action {
        grid-area: action;
        justify-content: stretch;
        min-height: 0;
    }

    .service-years-col-action:not(:has(button)) {
        display: none;
    }

    .service-years-remove {
        width: 100%;
        min-height: 44px;
    }

    .service-years-additions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .service-years-additions .btn,
    .service-years-additions .k-button {
        width: 100%;
        min-height: 44px;
    }
}

/* Team Edit / Add — Apply dates and footer Cancel = Action Secondary. */
#team-edit-page .team-apply-dates,
#team-new-page .team-apply-dates,
#team-edit-page .team-form-cancel,
#team-new-page .team-form-cancel {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

@media (max-width: 767.98px) {
    #team-edit-page .team-apply-dates,
    #team-new-page .team-apply-dates {
        width: 100%;
        min-height: 44px;
    }
}

#team-edit-page .team-apply-dates:hover,
#team-new-page .team-apply-dates:hover,
#team-edit-page .team-form-cancel:hover,
#team-new-page .team-form-cancel:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

/* Team Edit / Add — Remove chip = Action Warning (plain btn, not Telerik teal). */
/* Member roster Start/End: full MM/dd/yyyy, no cell ellipsis beside the picker. */
#team-edit-page .k-grid td:has(.team-member-date),
#team-new-page .k-grid td:has(.team-member-date) {
    padding: 6px 6px !important;
    overflow: hidden;
    text-overflow: clip !important;
}

#team-edit-page .k-grid .team-member-email,
#team-new-page .k-grid .team-member-email {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#team-edit-page .k-grid .team-member-date.k-datepicker,
#team-new-page .k-grid .team-member-date.k-datepicker,
#team-edit-page .k-grid .k-datepicker.team-member-date,
#team-new-page .k-grid .k-datepicker.team-member-date {
    width: 100%;
    min-width: 0;
}

#team-edit-page .k-grid .team-member-date .k-input-inner,
#team-new-page .k-grid .team-member-date .k-input-inner {
    min-width: 0;
    padding-inline: 0.4rem;
    text-overflow: clip;
    font-variant-numeric: tabular-nums;
}

#team-edit-page .k-grid .team-member-date .k-input-button,
#team-new-page .k-grid .team-member-date .k-input-button {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    min-width: 1.75rem;
    padding: 0;
}

#team-edit-page .k-grid .team-member-remove,
#team-new-page .k-grid .team-member-remove {
    background-color: transparent !important;
    border: 1px solid var(--app-action-warning) !important;
    color: var(--app-action-warning) !important;
}

#team-edit-page .k-grid .team-member-remove:hover,
#team-new-page .k-grid .team-member-remove:hover {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.deacon-profile-page .deacon-profile-photo-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.deacon-profile-page .deacon-profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
}

.deacon-profile-page .deacon-profile-photo-upload {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 420px;
}

/* Native checkbox + label (same size/rhythm as Beta / NM opt-out). */
.deacon-profile-page .deacon-profile-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    /* Wider checks column (col-md-6) keeps NM opt-out on one line beside narrower date cols. */
    .deacon-profile-page .deacon-profile-nm-opt-out label {
        white-space: nowrap;
    }
}

/* Users list / Edit User: Action Primary / Secondary / Warning (not cyan row-btn). */
.edit-user-page .k-button.users-deactivate-btn,
.edit-user-page .k-button.users-reactivate-btn {
    box-shadow: none !important;
}

.edit-user-page .k-button.users-deactivate-btn {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.edit-user-page .k-button.users-deactivate-btn:hover {
    background-color: var(--app-action-warning-hover) !important;
    border-color: var(--app-action-warning-hover) !important;
    color: var(--app-action-on-warning) !important;
}

.edit-user-page .k-button.users-reactivate-btn {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.edit-user-page .k-button.users-reactivate-btn:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.users-page .action-buttons .k-button.users-edit-btn,
.users-page .table td .k-button.users-edit-btn {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.users-page .action-buttons .k-button.users-edit-btn:hover,
.users-page .table td .k-button.users-edit-btn:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.users-page .action-buttons .k-button.users-edit-btn .k-svg-icon {
    color: var(--app-action-on-primary);
}

.users-page .action-buttons .k-button.users-resend-btn,
.users-page .table td .k-button.users-resend-btn {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.users-page .action-buttons .k-button.users-resend-btn:hover,
.users-page .table td .k-button.users-resend-btn:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.users-page .action-buttons .k-button.users-resend-btn .k-svg-icon {
    color: var(--app-action-on-secondary);
}

.users-page .action-buttons .k-button.users-deactivate-btn,
.users-page .table td .k-button.users-deactivate-btn {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: var(--app-action-on-warning) !important;
}

.users-page .action-buttons .k-button.users-deactivate-btn:hover,
.users-page .table td .k-button.users-deactivate-btn:hover {
    background-color: var(--app-action-warning-hover) !important;
    border-color: var(--app-action-warning-hover) !important;
    color: var(--app-action-on-warning) !important;
}

.users-page .action-buttons .k-button.users-deactivate-btn .k-svg-icon {
    color: var(--app-action-on-warning);
}

.users-page .action-buttons .k-button.users-reactivate-btn,
.users-page .table td .k-button.users-reactivate-btn {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.users-page .action-buttons .k-button.users-reactivate-btn:hover,
.users-page .table td .k-button.users-reactivate-btn:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.users-page .users-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.users-page .users-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.users-page .users-filter-wrap .form-select {
    min-width: 160px;
}

.k-window.users-deactivate-dialog {
    width: min(420px, 92vw) !important;
    max-width: 92vw !important;
}

@media (max-width: 767.98px) {
    #users-table.table-stack > tbody > tr > td:has(.action-buttons) {
        flex-direction: column;
        align-items: stretch;
    }

    .users-page .action-buttons {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }

    .users-page .action-buttons .k-button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 44px;
        justify-content: center;
    }

    .k-window.users-deactivate-dialog {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
    }

    .k-window.users-deactivate-dialog .k-actions,
    .k-window.users-deactivate-dialog .k-dialog-buttongroup {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .k-window.users-deactivate-dialog .users-deactivate-dialog-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

.widow-mobile-card,
.app-mobile-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Long names (GUIDs) must wrap or the card scrollWidth exceeds the phone. */
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

.app-mobile-card + .app-mobile-card {
    margin-top: 12px;
}

.app-mobile-card .action-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/*
 * Phone list cards — row actions stack full-width (ui-palette Tap targets).
 * Widows, Teams, Hospitals, Directory, Zones, Ministries, Home Visits,
 * prayer-board phone cards, Global search result cards, Visitation list.
 * Exempt: NM `.nm-row-actions-secondary` (compact icon row).
 */
@media (max-width: 767.98px) {
    .app-mobile-card .action-buttons,
    .app-mobile-card .widow-mobile-actions,
    .widow-mobile-card .widow-mobile-actions,
    .prayer-patient-mobile-card .action-buttons,
    .global-search-result-card .action-buttons,
    .visitation-list-page .mobile-patient-actions,
    .deacon-list-card .action-buttons,
    .deacon-list-card .deacon-list-actions,
    .minister-requests-page .request-actions {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        gap: 8px;
        margin-top: 12px;
    }

    .app-mobile-card .action-buttons .k-button,
    .app-mobile-card .action-buttons .btn,
    .app-mobile-card .action-buttons a.btn,
    .app-mobile-card .widow-mobile-actions .k-button,
    .widow-mobile-card .widow-mobile-actions .k-button,
    .prayer-patient-mobile-card .action-buttons .k-button,
    .global-search-result-card .action-buttons .k-button,
    .visitation-list-page .mobile-patient-actions .k-button,
    .deacon-list-card .action-buttons .k-button,
    .deacon-list-card .deacon-list-actions .k-button,
    .minister-requests-page .request-actions .k-button {
        width: 100% !important;
        max-width: none !important;
        justify-content: center;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Prayer board phone cards: actions under the body, not a side rail. */
    .prayer-patient-mobile-card > .d-flex {
        flex-direction: column;
        align-items: stretch;
    }

    .prayer-patient-mobile-card .action-buttons {
        flex-shrink: 0;
        justify-content: stretch;
    }
}

/*
 * List entity name — person / facility / team title on cards and in grids.
 * Prefer `.app-list-name` (ui-palette). Card shells stay 20px / 700; dense
 * `.k-grid` / `.table` rows use the same weight at the shared 14px body size.
 * Legacy aliases keep older class names on the same chrome.
 */
.app-list-name,
.app-mobile-card-title,
.widow-mobile-card .widow-mobile-name,
.visitation-list-page .mobile-patient-name,
.deacon-list-name,
.officer-name,
.minister-requests-page .request-card-title,
.global-search-result-name {
    margin: 0;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

a.app-list-name,
a.app-mobile-card-title {
    color: var(--app-action-primary);
    text-decoration: none;
}

a.app-list-name:hover,
a.app-list-name:focus-visible,
a.app-mobile-card-title:hover,
a.app-mobile-card-title:focus-visible {
    text-decoration: underline;
}

/* Dense list grids / tables: same bold name, table body size. */
.k-grid .app-list-name,
.k-grid .app-mobile-card-title,
.k-grid .deacon-name,
.k-grid .hospital-name,
.k-grid .patient-name,
.k-grid .patient-name-text,
.k-grid .ministry-name,
.k-grid .member-name,
.table > tbody > tr > td.app-list-name,
.table > tbody > tr > td.table-stack-card-title,
.table > tbody > tr > td.nm-card-title,
.table > tbody .app-list-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1.25;
}

/* Phone stacked tables: name cell becomes the card title (20px).
   Phone cards use a div, not a td — the same long token (a GUID) must wrap there
   or .nm-phone-card scrollWidth exceeds a 390px viewport. */
@media (max-width: 767.98px) {
    table.table-stack > tbody > tr > td.table-stack-card-title,
    table.table-stack > tbody > tr > td.nm-card-title,
    table.table-stack > tbody > tr > td.app-list-name,
    .app-mobile-card .app-list-name,
    .app-mobile-card .app-mobile-card-title {
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.25;
        color: #333;
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Widow phone actions: shared phone-card rule above (full-width stack). */
.widow-mobile-card .widow-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.app-mobile-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 8px 0 0;
    font-size: 14px;
}

.app-mobile-dl dt {
    color: #6c757d;
    font-weight: 600;
    font-size: 12px;
}

.app-mobile-dl dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Bootstrap tables: stack into labeled cards below md (768px). */
@media (max-width: 767.98px) {
    .table-responsive:has(> table.table-stack),
    .nm-dashboard-table-wrap {
        overflow: visible;
        max-width: 100%;
    }

    table.table-stack {
        display: block;
        width: 100% !important;
        max-width: 100%;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    table.table-stack > thead {
        display: none;
    }

    table.table-stack > tbody,
    table.table-stack > tbody > tr,
    table.table-stack > tbody > tr > td {
        display: block;
        width: 100%;
    }

    table.table-stack > tbody > tr {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    table.table-stack > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: 6px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: transparent !important;
    }

    /*
     * Same card face for every row. Bootstrap 5.3 stripes via inset box-shadow
     * (--bs-table-bg-type), so clearing background alone is not enough.
     */
    table.table-stack.table-striped > tbody > tr > *,
    table.table-stack.table-striped > tbody > tr:nth-of-type(odd) > *,
    table.table-stack.table-striped > tbody > tr:nth-of-type(even) > * {
        --bs-table-bg-type: transparent;
        --bs-table-bg-state: transparent;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    table.table-stack > tbody > tr:nth-of-type(odd),
    table.table-stack > tbody > tr:nth-of-type(even) {
        background: #fff !important;
    }

    table.table-stack > tbody > tr > td:last-child {
        border-bottom: none !important;
    }

    table.table-stack > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 12px;
        color: #6c757d;
        flex: 0 1 7.5rem;
        max-width: 42%;
        min-width: 0;
    }

    table.table-stack > tbody > tr > td:not([data-label])::before,
    table.table-stack > tbody > tr > td[data-label=""]::before {
        content: none;
        display: none;
        flex: 0;
    }

    table.table-stack > tbody > tr > td[data-label=""] {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    table.table-stack > tbody > tr > td > :not(i) {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    table.table-stack > tbody > tr > td[colspan]::before {
        display: none;
    }

    table.table-stack > tbody > tr > td[colspan] {
        justify-content: flex-start;
    }

    table.table-stack > tbody > tr > td:has(.form-select),
    table.table-stack > tbody > tr > td:has(.k-datepicker) {
        flex-direction: column;
        align-items: stretch;
    }

    table.table-stack > tbody > tr > td:has(.form-switch) {
        align-items: center;
    }

    table.table-stack .form-switch {
        margin-bottom: 0;
        min-height: 1.5rem;
    }

    table.table-stack .form-select,
    table.table-stack .k-datepicker {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {

    .app-search-row,
    .app-page .directory-search-wrap,
    .app-page .users-search-wrap,
    .app-page .widows-filter-row,
    .app-page .widows-search-wrap,
    .app-page .hospitals-filter-row,
    .app-page .hospitals-search-wrap {
        max-width: none;
    }
}

/* Title tokens on existing page ids */
#widow-detail-page h1,
#widow-assignments-page h1,
#deacon-teams-page h1,
#team-detail-page h1,
#team-edit-page h1,
#team-new-page h1,
#team-schedule-page h1 {
    font-size: var(--app-title-size);
    font-weight: var(--app-title-weight);
    color: var(--app-title-color);
}

.k-grid-toolbar {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem;
}

/* Action Primary buttons — Telerik + Bootstrap (see docs/features/ui-palette.md). */
.k-button-solid-primary,
.k-button-solid.k-button-primary,
.btn-primary {
    --bs-btn-color: var(--app-action-on-primary);
    --bs-btn-bg: var(--app-action-primary);
    --bs-btn-border-color: var(--app-action-primary);
    --bs-btn-hover-color: var(--app-action-on-primary);
    --bs-btn-hover-bg: var(--app-action-primary-hover);
    --bs-btn-hover-border-color: var(--app-action-primary-hover);
    --bs-btn-active-color: var(--app-action-on-primary);
    --bs-btn-active-bg: var(--app-action-primary-deep);
    --bs-btn-active-border-color: var(--app-action-primary-deep);
    --bs-btn-disabled-color: var(--app-action-on-primary);
    --bs-btn-disabled-bg: var(--app-action-primary);
    --bs-btn-disabled-border-color: var(--app-action-primary);
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.k-button-solid-primary:hover,
.k-button-solid-primary:focus,
.k-button-solid.k-button-primary:hover,
.k-button-solid.k-button-primary:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--app-action-primary);
    --bs-btn-border-color: var(--app-action-primary);
    --bs-btn-hover-color: var(--app-action-on-primary);
    --bs-btn-hover-bg: var(--app-action-primary);
    --bs-btn-hover-border-color: var(--app-action-primary);
    --bs-btn-active-color: var(--app-action-on-primary);
    --bs-btn-active-bg: var(--app-action-primary);
    --bs-btn-active-border-color: var(--app-action-primary);
    color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--app-action-on-primary) !important;
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
}

/* Notifications */
.notification-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

.notification-container .alert {
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Form styles */
.form-label {
    font-weight: 500;
    color: #495057;
}

/* Unsigned-in account screens (login, forgot, reset, activate, access denied, /Error) */
.minimal-layout {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--app-page-bg);
}

.login-page {
    padding-bottom: 1.5rem;
}

.login-page > .container {
    padding-left: 1rem;
    padding-right: 1rem;
}

.login-page-panel {
    margin-top: 1.5rem;
}

.login-page-nav {
    margin-bottom: 0;
}

.login-page-nav .navbar-brand img {
    height: 40px;
}

.login-page-nav .language-picker .btn-link {
    color: var(--menu-text);
    text-decoration: none;
    min-height: 44px;
}

.login-page-nav .language-picker .btn-link.fw-semibold {
    text-decoration: underline;
}

.login-page h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--app-title-color);
}

.login-page .form-label {
    color: var(--app-grid-header);
}

.login-page .form-control:focus,
.login-page .form-check-input:focus {
    border-color: var(--app-action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-action-primary) 25%, transparent);
}

.login-page .form-check {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    padding-left: 0;
    gap: 0.5rem;
}

.login-page .form-check-input {
    float: none;
    margin-top: 0;
    margin-left: 0;
    flex-shrink: 0;
}

.login-page .form-check-label {
    margin-bottom: 0;
    line-height: 1.25;
}

.login-page .form-check-input:checked {
    background-color: var(--app-action-primary);
    border-color: var(--app-action-primary);
}

.login-page .btn-primary {
    background-color: var(--app-action-primary);
    border-color: var(--app-action-primary);
    color: var(--app-action-on-primary);
}

.login-page .btn-primary:hover,
.login-page .btn-primary:focus {
    background-color: var(--app-action-primary-hover);
    border-color: var(--app-action-primary-hover);
    color: var(--app-action-on-primary);
}

.login-page .btn-secondary,
.login-page .btn-outline-secondary,
.login-page .btn-outline-primary {
    background-color: var(--app-action-secondary);
    border-color: var(--app-action-secondary);
    color: var(--app-action-on-secondary);
}

.login-page .btn-secondary:hover,
.login-page .btn-outline-secondary:hover,
.login-page .btn-outline-primary:hover,
.login-page .btn-secondary:focus,
.login-page .btn-outline-secondary:focus,
.login-page .btn-outline-primary:focus {
    background-color: var(--app-action-secondary-hover);
    border-color: var(--app-action-secondary-hover);
    color: var(--app-action-on-secondary);
}

.login-page a:not(.btn):not(.navbar-brand) {
    color: var(--app-action-primary);
}

.login-page a:not(.btn):not(.navbar-brand):hover {
    color: var(--app-action-primary-hover);
}

.login-page-back {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 1.25rem;
    text-align: center;
    text-decoration: none;
}

.login-page .alert-danger {
    color: var(--app-action-on-secondary);
    background-color: color-mix(in srgb, var(--app-action-warning) 14%, #fff);
    border-color: var(--app-action-warning);
}

.login-page .alert-success {
    color: var(--app-action-on-secondary);
    background-color: color-mix(in srgb, var(--app-status-success) 14%, #fff);
    border-color: var(--app-status-success);
}

.login-page-links {
    position: relative;
    margin-top: 1.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--app-action-secondary);
}

.login-page-forgot {
    position: absolute;
    top: 0.75rem;
    right: 0;
    display: flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
}

.login-sign-in-help {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.login-sign-in-help-toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* Leave room for absolute "Forgot Password?" on the same row. */
    max-width: calc(100% - 9.5rem);
    padding-right: 0.5rem;
    cursor: pointer;
    color: var(--app-action-primary);
    list-style: none;
}

.login-sign-in-help-toggle::-webkit-details-marker {
    display: none;
}

.login-sign-in-help-toggle::after {
    content: "▸";
    margin-left: 0.4rem;
    font-size: 0.75rem;
}

.login-sign-in-help[open] .login-sign-in-help-toggle::after {
    content: "▾";
}

.login-sign-in-help-body {
    padding-top: 0.25rem;
}

.login-sign-in-help ul {
    padding-left: 1.2rem;
}

.login-sign-in-help li + li {
    margin-top: 0.5rem;
}

@media (max-width: 575.98px) {
    .login-page-nav {
        padding-left: 1rem;
        padding-right: 1rem;
        margin-bottom: 0;
    }

    .login-page-panel {
        margin-top: 1.25rem;
    }

    .login-page .btn,
    .login-page .form-control {
        min-height: 44px;
    }

    .login-page .form-check {
        min-height: 44px;
    }
}

@media (min-width: 768px) {
    .login-page {
        padding-bottom: 2.5rem;
    }

    .login-page-panel {
        margin-top: 2rem;
    }

    .login-page-nav .navbar-brand img {
        height: 50px;
    }
}

/* Second-factor challenge / setup (large type) */
.two-factor-page .two-factor-hint,
.two-factor-page .two-factor-support,
.two-factor-page .two-factor-steps {
    font-size: 1.125rem;
    line-height: 1.45;
}

.two-factor-page .two-factor-code-input {
    font-size: 1.75rem;
    letter-spacing: 0.2em;
    text-align: center;
}

.two-factor-page .two-factor-secret {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    word-break: break-all;
}

.two-factor-page .two-factor-emergency {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-align: center;
}

.two-factor-page .two-factor-qr {
    max-width: 100%;
    height: auto;
}

.two-factor-page .two-factor-qr-caption {
    font-size: 1rem;
}

.two-factor-page .two-factor-totp-actions {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 575.98px) {
    .two-factor-page .two-factor-qr {
        width: 128px;
        height: 128px;
    }
}

.two-factor-page .two-factor-steps {
    padding-left: 1.25rem;
}

.two-factor-warn-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
}

.two-factor-warn-dialog {
    width: min(32rem, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
}

.two-factor-warn-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--app-title-color);
    margin-bottom: 1rem;
}

.two-factor-warn-body {
    font-size: 1.25rem;
    line-height: 1.45;
    margin-bottom: 1.5rem;
}

.two-factor-warn-actions {
    display: grid;
    gap: 0.75rem;
    justify-items: stretch;
}

.two-factor-warn-setup,
.two-factor-warn-dismiss {
    width: 100%;
}

.two-factor-warn-setup {
    min-height: 3rem;
    font-size: 1.125rem;
}

.two-factor-warn-not-now-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.25rem;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 1.125rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

.two-factor-warn-not-now-link:hover,
.two-factor-warn-not-now-link:focus-visible {
    color: #495057;
}

.two-factor-warn-dialog .two-factor-support {
    font-size: 1rem;
    line-height: 1.4;
}

/* Footer */
.footer {
    border-top: 1px solid #e9ecef;
}

.footer-inner {
    display: inline;
}

.footer-sep {
    margin: 0 0.35rem;
    text-decoration: none;
}

@media (min-width: 768px) {
    .footer-copyright + .footer-meta::before {
        content: "·";
        margin: 0 0.35rem;
    }
}

@media (max-width: 767.98px) {
    .footer-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
    }

    .footer-copyright {
        order: 2;
    }

    .footer-meta {
        order: 1;
    }
}

/* Keep footer chrome together; the whole phrase wraps to the next line. */
.whats-new-label,
.footer-nowrap,
#footer-whats-new,
#footer-build-id,
#whats-new-page h1 {
    white-space: nowrap;
}

#whats-new-page .whats-new-body {
    line-height: 1.5;
}

#whats-new-page .whats-new-body > :first-child {
    margin-top: 0;
}

#whats-new-page .whats-new-body > :last-child {
    margin-bottom: 0;
}

#whats-new-page .whats-new-body p,
#whats-new-page .whats-new-body ul {
    margin-bottom: 0.75rem;
}

#whats-new-page .whats-new-subhead {
    font-size: 1rem;
    font-weight: 600;
    color: var(--app-section-title);
    margin: 1rem 0 0.35rem;
}

#whats-new-page .whats-new-body ul {
    padding-left: 1.25rem;
}

#whats-new-page .whats-new-body li + li {
    margin-top: 0.2rem;
}

/* Progress bars */
.k-progressbar {
    height: 8px;
}

/* Charts */
.k-chart {
    font-family: 'Source Sans 3', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .zone-widget .display-4 {
        font-size: 1.75rem;
    }
    
    .notification-container {
        left: 10px;
        right: 10px;
        max-width: none;
    }

    .hospitals-container .patient-form-card {
        padding: 20px 16px;
    }

    /* Zones: shorter map; full-width Add Zone. Grid uses stacked cards below md. */
    .zones-page .zones-add-zone-btn {
        width: 100%;
    }

    .zones-page .zones-map-container {
        height: 42vh;
        min-height: 220px;
        max-height: 380px;
    }

    /* Hospitals list (/view-hospitals) — same search width as Widows on a phone */
    .hospitals-page .hospitals-search-wrap {
        min-width: 0;
        flex: 1 1 auto;
        max-width: none;
    }

    .hospitals-page .hospitals-grid .k-pager {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .hospitals-page .edit-hospital-dialog.k-window,
    .hospitals-page .k-window.edit-hospital-dialog {
        max-width: calc(100vw - 12px) !important;
    }

    .hospitals-page .edit-hospital-dialog .k-window-content {
        padding: 16px !important;
    }

    .hospitals-page .hospitals-dialog-footer-btn {
        width: 100%;
    }
}

@media (min-width: 576px) {
    .hospitals-page .hospitals-dialog-footer-btn {
        width: auto;
    }
}

/* Print styles */
@media print {
    .navbar,
    .footer,
    .k-grid-toolbar,
    .btn,
    .k-button {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* ================================
   Telerik Blazor Menu Custom Styles
   ================================ */

/* Main menu container - using the Class property value */
.header-utilities {
    gap: 0.25rem;
}

.page-wrapper > header.navbar .navbar-toggler,
.page-wrapper > header.navbar .nav-help-btn,
.page-wrapper > header.navbar .assignment-bell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: transparent;
    border-color: var(--header-chrome-border) !important;
    box-shadow: none;
}

.page-wrapper > header.navbar .navbar-toggler,
.page-wrapper > header.navbar .nav-help-btn,
.page-wrapper > header.navbar .assignment-bell-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 0.375rem;
    box-sizing: border-box;
}

.page-wrapper > header.navbar .assignment-bell-btn {
    position: relative;
}

.page-wrapper > header.navbar .header-patient-search .form-control {
    border-color: var(--header-chrome-border) !important;
    background-color: #fff;
}

.page-wrapper > header.navbar .header-patient-search .app-search-field-submit {
    color: #6c757d;
}

.page-wrapper > header.navbar .header-patient-search .app-search-field-submit:hover,
.page-wrapper > header.navbar .header-patient-search .app-search-field-submit:focus-visible {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.06);
}

.page-wrapper > header.navbar .navbar-toggler:hover,
.page-wrapper > header.navbar .navbar-toggler:focus,
.page-wrapper > header.navbar .nav-help-btn:hover,
.page-wrapper > header.navbar .nav-help-btn:focus,
.page-wrapper > header.navbar .assignment-bell-btn:hover,
.page-wrapper > header.navbar .assignment-bell-btn:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none;
}

.page-wrapper > header.navbar .header-patient-search .form-control:focus {
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none;
}

.page-wrapper > header.navbar .assignment-bell-btn.show,
.page-wrapper > header.navbar .assignment-bell-btn.show:hover,
.page-wrapper > header.navbar .assignment-bell-btn.show:focus,
.page-wrapper > header.navbar .assignment-bell-btn[aria-expanded="true"],
.page-wrapper > header.navbar .assignment-bell-btn[aria-expanded="true"]:hover,
.page-wrapper > header.navbar .assignment-bell-btn[aria-expanded="true"]:focus,
.page-wrapper > header.navbar .nav-help-btn[aria-expanded="true"],
.page-wrapper > header.navbar .nav-help-btn[aria-expanded="true"]:hover,
.page-wrapper > header.navbar .nav-help-btn[aria-expanded="true"]:focus {
    color: var(--app-action-primary) !important;
    background-color: #fff !important;
}

.page-wrapper > header.navbar .navbar-toggler[aria-expanded="true"],
.page-wrapper > header.navbar .navbar-toggler[aria-expanded="true"]:hover,
.page-wrapper > header.navbar .navbar-toggler[aria-expanded="true"]:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Open-assignment alert (bell, New Members menu, My assignments). Action Warning. */
.assignment-alert-host {
    position: relative;
}

.assignment-alert-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-action-warning);
    pointer-events: none;
}

.page-wrapper > header.navbar .assignment-bell-btn .assignment-alert-dot {
    top: 6px;
    right: 6px;
    box-shadow: 0 0 0 2px var(--prestonwood-primary);
}

.custom-main-menu .assignment-alert-dot,
.mobile-app-nav .assignment-alert-dot {
    top: 0;
    right: -10px;
    box-shadow: 0 0 0 2px var(--menu-bg);
}

#nm-my-assignments .assignment-alert-dot {
    top: -3px;
    right: -3px;
    box-shadow: 0 0 0 2px var(--app-page-bg);
}

/* inline-flex only below lg — on desktop it beat navbar-expand-lg { display: none }. */
@media (max-width: 991.98px) {
    .page-wrapper > header.navbar .navbar-toggler,
    .page-wrapper > header.navbar .nav-help-btn {
        display: inline-flex;
    }
}

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(400px, 100%);
    height: 100%;
    z-index: 1040;
    background: #fff;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    color: #212529;
}

.help-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
}

.help-drawer-header #help-drawer-title {
    min-width: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
}

.help-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    line-height: 1;
    text-decoration: none;
}

.help-drawer-body {
    padding: 1.25rem;
}

.help-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.help-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.help-hub-card {
    color: inherit;
}

.help-hub-card:hover,
.help-hub-card:focus {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

@media (max-width: 991.98px) {
    .help-drawer {
        inset: 0;
        width: 100%;
    }
}

@media print {
    .help-no-print,
    header.navbar,
    .custom-main-menu,
    .custom-main-menu-row,
    .help-menubar-btn,
    footer.footer {
        display: none !important;
    }
}

.custom-main-menu-row {
    align-items: stretch;
    background-color: var(--menu-bg);
}

.custom-main-menu.k-menu {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    background-color: var(--menu-bg) !important;
    border: none !important;
    padding: 0 !important;
}

.help-menubar-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--menu-text);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.help-menubar-btn:hover {
    background-color: var(--menu-hover-bg);
    color: var(--menu-hover-text);
}

.help-menubar-btn .menu-icon {
    color: var(--menu-icon-color);
}

.help-menubar-btn:hover .menu-icon {
    color: var(--menu-icon-hover);
}

/* Top-level menu items */
.custom-main-menu.k-menu > .k-menu-item {
    background-color: transparent !important;
}

/* Menu item links - top level */
.custom-main-menu.k-menu > .k-menu-item > .k-link {
    color: var(--menu-text) !important;
    background-color: transparent !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
}

/* Menu item hover - top level */
.custom-main-menu.k-menu > .k-menu-item:hover > .k-link,
.custom-main-menu.k-menu > .k-menu-item.k-hover > .k-link,
.custom-main-menu.k-menu > .k-menu-item > .k-link:hover {
    background-color: var(--menu-hover-bg) !important;
    color: var(--menu-hover-text) !important;
}

/* Menu item focus/selected - top level */
.custom-main-menu.k-menu > .k-menu-item.k-focus > .k-link,
.custom-main-menu.k-menu > .k-menu-item.k-selected > .k-link {
    background-color: var(--menu-active-bg) !important;
    color: var(--menu-hover-text) !important;
}

/* Admin section active state (when on /users or /settings) */
.custom-main-menu .k-link:has(.menu-item-active) {
    background-color: var(--menu-active-bg) !important;
    color: var(--menu-hover-text) !important;
}

/* Custom icon styling in menu */
.custom-main-menu .menu-icon {
    color: var(--menu-icon-color) !important;
    width: 18px;
    text-align: center;
}

.custom-main-menu .k-menu-item:hover .menu-icon,
.custom-main-menu .k-menu-item.k-hover .menu-icon {
    color: var(--menu-icon-hover) !important;
}

/* Expand arrow for items with children */
.custom-main-menu.k-menu .k-menu-expand-arrow {
    color: var(--menu-text) !important;
}

.custom-main-menu.k-menu .k-menu-item:hover .k-menu-expand-arrow {
    color: var(--menu-hover-text) !important;
}

/* ================================
   Telerik Menu Popup/Dropdown Styles
   (Submenus render in a popup outside the main menu)
   ================================ */

/* The popup container */
.k-menu-popup,
.k-animation-container .k-menu-group {
    background-color: var(--menu-bg) !important;
    border: 1px solid var(--menu-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 4px 0 !important;
}

/* Submenu items */
.k-menu-popup .k-menu-item,
.k-animation-container .k-menu-group .k-menu-item {
    background-color: transparent !important;
}

/* Submenu item links */
.k-menu-popup .k-menu-item > .k-link,
.k-animation-container .k-menu-group .k-menu-item > .k-link {
    color: var(--menu-text) !important;
    background-color: transparent !important;
    padding: 8px 16px !important;
    font-weight: 400 !important;
}

/* Submenu item hover */
.k-menu-popup .k-menu-item:hover > .k-link,
.k-menu-popup .k-menu-item.k-hover > .k-link,
.k-menu-popup .k-menu-item > .k-link:hover,
.k-animation-container .k-menu-group .k-menu-item:hover > .k-link,
.k-animation-container .k-menu-group .k-menu-item.k-hover > .k-link {
    background-color: var(--menu-hover-bg) !important;
    color: var(--menu-hover-text) !important;
}

/* Submenu item focus/selected */
.k-menu-popup .k-menu-item.k-focus > .k-link,
.k-menu-popup .k-menu-item.k-selected > .k-link,
.k-animation-container .k-menu-group .k-menu-item.k-focus > .k-link {
    background-color: var(--menu-active-bg) !important;
    color: var(--menu-hover-text) !important;
}

/* Submenu icons */
.k-menu-popup .menu-icon,
.k-animation-container .k-menu-group .menu-icon {
    color: var(--menu-icon-color) !important;
    width: 18px;
    text-align: center;
}

.k-menu-popup .k-menu-item:hover .menu-icon,
.k-animation-container .k-menu-group .k-menu-item:hover .menu-icon {
    color: var(--menu-icon-hover) !important;
}

/* Date pickers and dropdowns append to <body>. Telerik Dialog/Window wrappers
   sit at 10003+. 10002 left the widow Record visit calendar behind the modal. */
.k-animation-container {
    z-index: 20000 !important;
}

.k-window.record-visit-dialog .k-dialog-title,
.k-window.record-visit-dialog .k-window-title {
    font-size: 1.35rem;
    font-weight: 700;
}

.record-visit-dialog-person {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dee2e6;
    color: #2d3748;
    font-size: 1.25rem;
    line-height: 1.4;
}

.record-visit-dialog-person .k-svg-icon {
    flex-shrink: 0;
    width: 1.25em;
    height: 1.25em;
}

/* Visit profile journey — keep widow and Prayer List patient profiles aligned.
   See docs/features/widows.md and docs/features/visitation-patient.md.
   Default buttons are Action Secondary; Record Visit stays Action Primary. */
.visitation-patient-page .k-button,
#widow-detail-page .k-button:not(#widow-detail-archive):not(#widow-detail-record) {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

.visitation-patient-page .k-button:hover,
#widow-detail-page .k-button:not(#widow-detail-archive):not(#widow-detail-record):hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.visitation-patient-page .k-button .k-svg-icon,
#widow-detail-page .k-button:not(#widow-detail-archive):not(#widow-detail-record) .k-svg-icon {
    color: var(--app-action-on-secondary) !important;
}

.visit-profile-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.visitation-patient-page .visit-profile-header-actions #visitation-patient-record.k-button,
#widow-detail-page .visit-profile-header-actions #widow-detail-record.k-button {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

.visitation-patient-page .visit-profile-header-actions #visitation-patient-record.k-button:hover,
#widow-detail-page .visit-profile-header-actions #widow-detail-record.k-button:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

.visitation-patient-page .visit-profile-header-actions #visitation-patient-record.k-button .k-svg-icon,
#widow-detail-page .visit-profile-header-actions #widow-detail-record.k-button .k-svg-icon {
    color: var(--app-action-on-primary) !important;
}

.visit-profile-section {
    margin-bottom: 1.5rem;
}

.visit-profile-notes-heading {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.visit-notes-more {
    margin: 1.5rem 0 1rem;
}

.visit-note-body {
    color: #333;
    font-size: 14px;
    word-break: break-word;
}

.visit-note-body.is-clamped {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden !important;
    white-space: normal !important;
    max-height: 9em;
    line-height: 1.5;
}

.visit-note-body:not(.is-clamped) {
    white-space: pre-wrap;
}

@media (max-width: 767.98px) {
    .visitation-patient-page .patient-header,
    #widow-detail-page > header {
        flex-direction: column;
        align-items: stretch;
    }

    .visit-profile-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .visit-profile-header-actions #visitation-patient-record.k-button,
    .visit-profile-header-actions #widow-detail-record.k-button,
    #team-detail-page .visit-profile-header-actions .k-button,
    .visit-notes-more .k-button,
    #widow-detail-page .widow-toolbar .k-button,
    .visitation-patient-page .patient-toolbar .k-button,
    .visitation-patient-page .visit-note-actions .k-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
        padding-block: 10px;
    }

    #team-detail-page .visit-profile-header-actions {
        width: 100%;
        flex-direction: column;
    }
}

/* Prayer List patient profile. Also in app.css so cards still render if the
   isolation bundle is missing from App.razor. Fills the .app-page 960 column. */
.visitation-patient-page .patient-shell {
    max-width: 100%;
    margin: 0 auto;
}

.visitation-patient-page .patient-toolbar {
    margin-bottom: 8px;
}

.visitation-patient-page .patient-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 0 8px;
    margin-bottom: 16px;
    background: transparent;
    border: none;
}

.visitation-patient-page .patient-name {
    font-size: 28px;
    font-weight: 400;
    color: #333;
    margin: 0 0 8px;
}

.visitation-patient-page .patient-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.visitation-patient-page .flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 3px;
}

/* Overdue = Action Warning red + triangle (legacy label-danger). Do Not Visit = orange + X. */
.visitation-patient-page .flag-overdue {
    background: var(--app-action-warning);
    color: var(--app-action-on-warning);
}

.visitation-patient-page .flag-overdue .k-svg-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--app-action-on-warning);
}

.visitation-patient-page .flag-overdue .k-svg-icon svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.visitation-patient-page .flag-dnv {
    background: var(--app-flag-orange);
    color: #fff;
}

.visitation-patient-page .patient-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.visitation-patient-page .detail-list {
    margin: 0;
}

.visitation-patient-page .detail-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f1f3f5;
}

.visitation-patient-page .detail-row:last-child {
    border-bottom: none;
}

.visitation-patient-page .detail-row dt {
    margin: 0;
    color: #6c757d;
    font-weight: 500;
    font-size: 13px;
}

.visitation-patient-page .detail-row dd {
    margin: 0;
    color: #333;
    font-size: 14px;
}

.visitation-patient-page .pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

.visitation-patient-page .sensitive {
    background: #fff8e6;
    border-radius: 4px;
    padding: 8px 10px;
}

.visitation-patient-page .notes-section {
    margin-bottom: 24px;
}

.visitation-patient-page .notes-section .visit-profile-notes-heading {
    margin-top: 0;
}

.visitation-patient-page .empty-notes {
    color: #6c757d;
    margin: 0;
}

/* Shared note cards (patient Recent Notes + deacon dated notes). */
.visit-notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.visit-note {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 14px 16px;
}

/* Deacon profile: profile card + Notes card with a clear gray gutter between them. */
.deacon-profile-page .deacon-profile-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* margin:auto on .patient-form-card shrinks flex children to content width — pin full column. */
.deacon-profile-page .deacon-profile-stack > .patient-form-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

.team-leader-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.team-person-photo-cell {
    width: 48px;
    vertical-align: middle;
}

.team-person-photo,
.team-person-photo-placeholder {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.team-person-photo-placeholder {
    display: none;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #6c757d;
}

/* Shared note meta: "Aug 03, 2026 - Jane Deacon" — date and deacon bold, one line. */
.visit-note-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #212529;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.visit-note-meta .deacon-profile-note-author {
    font-weight: inherit;
    color: inherit;
}

.visit-note-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

@media (max-width: 800px) {
    .visitation-patient-page .detail-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* Record visit is a page-owned overlay so validation can re-render (Telerik DialogContent does not). */
.record-visit-dialog-wrapper {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
}

.record-visit-dialog-wrapper .k-overlay {
    position: fixed;
    inset: 0;
}

.k-window.record-visit-dialog {
    width: min(500px, 92vw);
    max-width: 92vw;
    position: relative;
    z-index: 10004;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.k-window.record-visit-dialog .k-window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.k-window.record-visit-dialog .k-window-content {
    padding: 16px;
}

.k-window.record-visit-dialog .k-actions {
    padding: 12px 16px;
}

.k-window.record-visit-dialog .k-actions,
.k-window.record-visit-dialog .k-dialog-buttongroup {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.k-window.record-visit-dialog .k-actions .record-visit-inline-error,
.k-window.record-visit-dialog .k-dialog-buttongroup .record-visit-inline-error {
    flex: 1 1 10rem;
    margin: 0;
}

.record-visit-inline-error {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    border-radius: 6px;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.record-visit-inline-error .k-svg-icon {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .k-dialog-wrapper:has(.record-visit-dialog) {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .k-window.record-visit-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .k-window.record-visit-dialog .k-actions,
    .k-window.record-visit-dialog .k-dialog-buttongroup {
        flex-direction: column;
        align-items: stretch;
    }

    .k-window.record-visit-dialog .record-visit-inline-error {
        order: 1;
        flex: none;
    }

    .k-window.record-visit-dialog .record-visit-dialog-save-btn {
        order: 2;
        width: 100%;
    }

    .k-window.record-visit-dialog .record-visit-dialog-cancel-btn {
        order: 3;
        width: 100%;
    }
}

/* ================================
   Alternative: Dark theme menu
   Uncomment below to use dark theme
   ================================ */
/*
.custom-main-menu.k-menu {
    background-color: #1a365d !important;
}

.custom-main-menu.k-menu > .k-menu-item > .k-link {
    color: #ffffff !important;
}

.custom-main-menu.k-menu > .k-menu-item:hover > .k-link {
    background-color: #2c5282 !important;
    color: #ffffff !important;
}

.custom-main-menu .menu-icon {
    color: #ffc107 !important;
}

.k-menu-popup,
.k-animation-container .k-menu-group {
    background-color: #1a365d !important;
    border-color: #2c5282 !important;
}

.k-menu-popup .k-menu-item > .k-link {
    color: #ffffff !important;
}

.k-menu-popup .k-menu-item:hover > .k-link {
    background-color: #2c5282 !important;
}
*/

/* Prayer board zone filter: Telerik list defaults to a tall scroll viewport; tighten when popup uses this class */
/* Prayer board: hospital / LTC patient rows below lg (card stack; grid hidden) */
/* Prayer board: archive confirmation dialog (Action Warning title; may render in portal) */
.prayer-archive-confirm-dialog .k-window-titlebar,
.prayer-archive-confirm-dialog .k-dialog-titlebar {
    background-color: var(--app-action-warning) !important;
    border-color: var(--app-action-warning) !important;
    color: #fff !important;
}

.prayer-archive-confirm-dialog .k-window-titlebar .k-window-title,
.prayer-archive-confirm-dialog .k-dialog-titlebar .k-dialog-title {
    color: #fff !important;
}

.prayer-archive-confirm-dialog .k-window-titlebar .k-window-actions .k-button {
    color: #fff !important;
}

/* Prayer board visit-notes dialog (teleported; keep column at 80vh and scroll the list). */
.k-window.prayer-visit-notes-dialog {
    display: flex !important;
    flex-direction: column !important;
    width: min(560px, 92vw) !important;
    max-width: 92vw !important;
    height: 80vh !important;
    max-height: 80vh !important;
    overflow: hidden !important;
}

.k-window.prayer-visit-notes-dialog .k-window-titlebar,
.k-window.prayer-visit-notes-dialog .k-dialog-titlebar,
.k-window.prayer-visit-notes-dialog .k-actions,
.k-window.prayer-visit-notes-dialog .k-dialog-buttongroup {
    flex: 0 0 auto;
}

.k-window.prayer-visit-notes-dialog .k-window-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body:has(.prayer-visit-notes-dialog) {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .k-dialog-wrapper:has(.prayer-visit-notes-dialog) {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .k-window.prayer-visit-notes-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    .k-window.prayer-visit-notes-dialog .k-actions,
    .k-window.prayer-visit-notes-dialog .k-dialog-buttongroup {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .k-window.prayer-visit-notes-dialog .k-actions .k-button,
    .k-window.prayer-visit-notes-dialog .k-dialog-buttongroup .k-button {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

.prayer-facility-mobile-wrap {
    padding: 16px 18px;
}

.prayer-patient-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prayer-patient-mobile-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.prayer-patient-mobile-meta dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.prayer-patient-mobile-meta dd {
    font-size: 0.875rem;
}

.prayer-status-description {
    white-space: pre-wrap;
}

/* Usage Days/Area/Tenant/Person. The class lands on the animation container, not .k-popup.
   Min-height 0 collapsed that shell on CI (build 727) so the list never mounted.
   Keep a real box, and don't let the theme flex-grow each item to fill it. */
.k-animation-container.usage-dd-popup {
    min-height: 8rem !important;
    max-height: 280px !important;
}

.k-animation-container.usage-dd-popup .k-list,
.k-animation-container.usage-dd-popup .k-list-content,
.k-animation-container.usage-dd-popup .k-list-scroller,
.k-animation-container.usage-dd-popup .k-popup {
    max-height: 280px !important;
}

.k-animation-container.usage-dd-popup .k-list-item {
    flex: 0 0 auto !important;
}

#feedback-page .feedback-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-left: auto;
    margin-right: auto;
}

#feedback-page .feedback-card h1 {
    margin: 0;
}

#feedback-page .feedback-form {
    max-width: none;
}

#feedback-page .form-control:focus,
#feedback-page .form-check-input:focus {
    border-color: var(--app-action-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--app-action-primary) 25%, transparent);
}

#feedback-page .form-check-input:checked {
    background-color: var(--app-action-primary);
    border-color: var(--app-action-primary);
}

#feedback-page .feedback-actions {
    display: flex;
    gap: 8px;
}

#feedback-page .feedback-actions .k-button {
    flex: 1 1 0;
}

#feedback-page .feedback-submit-btn.k-button,
#feedback-page .feedback-submit-btn.k-button-solid-primary {
    background-color: var(--app-action-primary) !important;
    border-color: var(--app-action-primary) !important;
    color: var(--app-action-on-primary) !important;
}

#feedback-page .feedback-submit-btn.k-button:hover,
#feedback-page .feedback-submit-btn.k-button-solid-primary:hover {
    background-color: var(--app-action-primary-hover) !important;
    border-color: var(--app-action-primary-hover) !important;
    color: var(--app-action-on-primary) !important;
}

#feedback-page .feedback-cancel-btn.k-button,
#feedback-page .feedback-cancel-btn.k-button-solid-base {
    background-color: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
}

#feedback-page .feedback-cancel-btn.k-button:hover,
#feedback-page .feedback-cancel-btn.k-button-solid-base:hover {
    background-color: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

@media (min-width: 768px) {
    #feedback-page .feedback-card {
        max-width: 960px;
        padding: 24px;
    }

    #feedback-page .feedback-actions .k-button {
        flex: 0 0 auto;
    }
}

#feedback-page #feedback-page-select {
    max-width: 100%;
}

.feedback-page-item {
    display: inline-block;
    padding-left: 1.5rem;
}

.k-popup.feedback-page-popup .k-list-group-item,
.k-popup.feedback-page-popup .k-list-group-sticky-header,
.k-popup.feedback-page-popup .k-list-item-group-label {
    padding-left: 0.75rem;
    font-weight: 600;
}

#feedback-page .feedback-kind-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

#feedback-page #feedback-kind .form-check-input {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}

#feedback-page fieldset {
    border: 0;
    min-inline-size: 0;
    padding: 0;
    margin: 0 0 1rem;
}

#feedback-page legend.form-label {
    float: none;
    width: auto;
    margin-bottom: 0.35rem;
}

#feedback-page #feedback-result {
    margin: 0 0 0.75rem;
}

/* Beats .table > tbody > tr > td { padding: 12px 16px !important } (0,1,3). */
/* Admin → Usage: space section blocks under .app-section-title (same rhythm as former h5 mt-4). */
.usage-page .usage-section {
    margin-top: 1.5rem;
}

.usage-page .app-section-title .usage-section-toggle {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Match Recent sign-ins person/tenant btn-link underline (anchors need it). */
.usage-page a.usage-clarity-playback {
    text-decoration: underline;
}

@media (max-width: 767.98px) {
    .usage-page .usage-recordings-list .usage-clarity-playback {
        display: flex;
        width: 100%;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.375rem;
        text-decoration: none;
    }
}

.table > tbody > tr > td.usage-nested-path {
    padding-left: 2.75rem !important;
}

/* New Member dashboard widgets — same split cards as legacy /newmembers */
.nm-widget-row {
    margin-bottom: 1.5rem;
}

.nm-widget-row .nm-widget {
    appearance: none;
    display: flex;
    width: 100%;
    height: 120px;
    margin-bottom: 1.25rem;
    padding: 0;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    align-items: stretch;
    overflow: hidden;
    cursor: pointer;
}

.nm-widget-row .nm-widget > div,
.nm-widget-row .nm-widget > span {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nm-widget-row .nm-widget > div {
    text-transform: uppercase;
    line-height: 1.15;
    font-weight: 600;
    padding: 12px 8px;
    gap: 4px;
}

.nm-widget-row .nm-widget > div i {
    font-size: 45px;
    line-height: 1;
    display: block;
}

.nm-widget-row .nm-widget > span {
    font-size: 80px;
    line-height: 1;
    font-weight: 400;
}

.nm-widget-row .nm-widget-primary {
    background: var(--app-action-primary);
    border: 1px solid var(--app-action-primary-deep);
}

.nm-widget-row .nm-widget-primary > div {
    background: var(--app-action-primary-deep);
}

.nm-widget-row .nm-widget-danger {
    background: var(--app-status-danger);
    border: 1px solid var(--app-action-warning-hover);
}

.nm-widget-row .nm-widget-danger > div {
    background: var(--app-action-warning-hover);
}

.nm-widget-row .nm-widget-warning {
    background: var(--app-status-warning);
    border: 1px solid var(--app-status-warning-deep);
}

.nm-widget-row .nm-widget-warning > div {
    background: var(--app-status-warning-deep);
}

.nm-widget-row .nm-widget-selected {
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.25);
    opacity: 1;
}

.nm-widget-row .nm-widget:not(.nm-widget-selected) {
    opacity: 0.9;
}

.nm-widget-row .nm-widget:hover {
    opacity: 1;
}

.nm-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    min-width: 0;
    padding-bottom: 0.45rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--app-grid-border);
}

.nm-table-heading {
    position: relative;
    max-width: 100%;
}

.nm-table-select {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: var(--app-title-color);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    text-align: left;
}

.nm-table-select.dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.45rem;
    vertical-align: 0.2em;
    content: "";
    border-top: 0.38em solid currentColor;
    border-right: 0.32em solid transparent;
    border-bottom: 0;
    border-left: 0.32em solid transparent;
}

.nm-table-select:hover,
.nm-table-select:focus,
.nm-table-select:focus-visible {
    color: var(--app-title-color);
}

.nm-table-picker-menu .fa,
#nm-table-picker-menu .fa {
    width: 1.25rem;
    text-align: center;
    margin-right: 0.15rem;
}

.nm-row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.nm-row-actions-secondary {
    display: contents;
}

.nm-row-action-label {
    display: inline;
}

@media (max-width: 768px) {
    /*
     * NM phone cards: name as title, due near top, hide Assigned, Record contact
     * full-width, secondary actions as a compact icon row (not four stacked bars).
     */
    #nm-dashboard-table.table-stack > tbody > tr {
        display: flex;
        flex-direction: column;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td.nm-card-title {
        order: 1;
        border-bottom: none !important;
        padding-bottom: 2px !important;
        /* Beat shared `.table td { font-size: 14px !important }` — same as `.app-mobile-card-title`. */
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.25;
        color: #333;
        align-items: center;
        gap: 0.45rem;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td.nm-card-title::before {
        content: none;
        display: none;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td.nm-card-due {
        order: 2;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td.nm-card-overdue-days {
        order: 3;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td:not(.nm-card-title):not(.nm-card-due):not(.nm-card-overdue-days):not(.nm-card-actions):not(.nm-card-assigned) {
        order: 10;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td.nm-card-assigned {
        display: none !important;
    }

    #nm-dashboard-table.table-stack > tbody > tr > td.nm-card-actions {
        order: 20;
        flex-direction: column;
        align-items: stretch;
        margin-top: 0.35rem;
        padding-top: 0.5rem !important;
    }

    .nm-row-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        gap: 0.5rem;
    }

    .nm-row-actions .nm-record-contact-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
        align-items: center;
    }

    .nm-row-actions-secondary {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        width: 100%;
    }

    .nm-row-actions-secondary:empty {
        display: none;
    }

    .nm-row-actions-secondary .btn {
        flex: 1 1 0;
        min-height: 44px;
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .nm-row-actions-secondary .nm-row-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.nm-row-actions .nm-record-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.nm-row-actions .nm-record-contact-btn .k-svg-icon {
    color: var(--app-action-on-primary);
}

/* Quiet NM actions (Email Deacon, Reassign, Send reminder, View details) — Action Secondary. */
.nm-row-secondary,
a.nm-row-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    background: var(--app-action-secondary) !important;
    border-color: var(--app-action-secondary) !important;
    color: var(--app-action-on-secondary) !important;
    text-decoration: none;
}

.nm-row-secondary:hover,
.nm-row-secondary:focus,
a.nm-row-secondary:hover,
a.nm-row-secondary:focus {
    background: var(--app-action-secondary-hover) !important;
    border-color: var(--app-action-secondary-hover) !important;
    color: var(--app-action-on-secondary) !important;
}

.nm-row-secondary:disabled,
.nm-row-secondary.disabled {
    opacity: 0.65;
}

.nm-row-secondary .k-svg-icon {
    color: var(--app-action-on-secondary);
}

.nm-assignment-reach {
    margin: 1rem 0 1.25rem;
}

.nm-assignment-reach-item + .nm-assignment-reach-item {
    margin-top: 0.85rem;
}

.nm-assignment-reach-name {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.nm-assignment-reach-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1.2rem;
    line-height: 1.45;
    color: inherit;
    text-decoration: none;
    margin: 0.2rem 0;
}

a.nm-assignment-reach-line {
    color: var(--app-action-primary);
}

a.nm-assignment-reach-line:hover {
    color: var(--app-action-primary-hover);
    text-decoration: underline;
}

.nm-assignment-reach-line i {
    width: 1.15em;
    margin-top: 0.2em;
    text-align: center;
    color: var(--app-action-primary);
}

.nm-assignments-page {
    max-width: 960px;
}

.nm-assignment-record,
.nm-assignment-card {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.nm-assignment-who {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.nm-record-date {
    max-width: 240px;
    margin-bottom: 1rem;
}

.nm-assignment-record textarea.form-control,
.nm-assignment-card textarea.form-control {
    resize: vertical;
}

.nm-record-contact-btn {
    background-color: var(--app-action-primary);
    border-color: var(--app-action-primary);
    color: var(--app-action-on-primary);
}

.nm-record-contact-btn:hover,
.nm-record-contact-btn:focus {
    background-color: var(--app-action-primary-hover);
    border-color: var(--app-action-primary-hover);
    color: var(--app-action-on-primary);
}

@media (max-width: 767.98px) {
    .nm-record-date {
        max-width: none;
    }

    .nm-assignment-record .nm-record-contact-btn,
    .nm-assignment-card .nm-record-contact-btn {
        width: 100%;
        min-height: 44px;
    }

    .nm-widget-row .nm-widget {
        height: 96px;
    }

    .nm-widget-row .nm-widget > span {
        font-size: 56px;
    }

    .nm-widget-row .nm-widget > div i {
        font-size: 32px;
    }
}

/* Minister Requests assign/reassign + close dialogs (teleported outside .app-page). */
.k-window.minister-assign-dialog,
.k-window.minister-close-dialog {
    width: min(520px, 92vw) !important;
    max-width: 92vw !important;
    max-height: min(90vh, 720px);
}

.k-window.minister-close-dialog {
    width: min(400px, 92vw) !important;
}

.k-window.minister-assign-dialog .k-window-content {
    max-height: min(70vh, 520px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .k-window.minister-assign-dialog,
    .k-window.minister-close-dialog {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
    }

    .k-window.minister-assign-dialog .k-window-content {
        padding: 14px 16px !important;
        max-height: min(62vh, 480px);
    }

    .k-window.minister-assign-dialog .k-actions,
    .k-window.minister-assign-dialog .k-dialog-buttongroup,
    .k-window.minister-close-dialog .k-actions,
    .k-window.minister-close-dialog .k-dialog-buttongroup {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .k-window.minister-assign-dialog .minister-assign-dialog-btn,
    .k-window.minister-close-dialog .minister-assign-dialog-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .k-window.minister-assign-dialog .assign-details > div {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }
}