/**
 * Admin layout tweaks (loaded after Metronic styles.css).
 */
@media (width >= 96rem) {
    .kt-container-fixed {
        max-width: var(--breakpoint-2xl);
    }
}

/*
 * Vendor's default .kt-input collapses text on a single short line; these
 * overrides give it a fixed 35px height with a touch of top padding so
 * single-line inputs (and the first line of textareas) sit comfortably.
 * Textareas keep their min-height utilities (e.g. `min-h-12`) so they can
 * still grow vertically.
 */
.kt-input {
    padding-top: 5px;
    height: 35px;
    line-height: 1.3em;
}

textarea.kt-input,
select.kt-input[multiple],
select.kt-input[size] {
    height: auto;
}

/* Sitewide typography — Google Sans (loaded from Google Fonts in layout head) */
:root,
:host,
.dark {
    --font-sans: "Google Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html,
body,
.kt-wrapper,
#content,
#sidebar,
button,
input,
select,
textarea,
.kt-btn,
.kt-input,
.kt-menu-link,
.kt-card {
    font-family: "Google Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Brand semantic colors */
:root,
.dark {
    --primary: #3699ff;
    --destructive: #f64e60; /* danger */
    --color-green-500: #86ddd8; /* success */
    --color-yellow-500: #d87937; /* warning */
    --color-yellow-400: #d87937; /* warning badges */
    --warning: #d87937;
    --warning-foreground: #7a3f12;
    --warning-muted: rgb(240 210 179 / 55%);
    --warning-border: rgb(216 121 55 / 40%);
}

/* Dark sidebar theme */
.kt-sidebar,
#sidebar {
    background: #1e1e2d !important;
    border-right-color: #2b2c40 !important;
}

body,
.kt-wrapper,
#content {
    background-color: #ebedf5 !important;
}

/* Keep page content off the bottom edge */
#content {
    padding-bottom: 40px;
}

.page-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.page-title-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.42rem;
    background-color: rgb(240 210 179 / 63%);
    flex-shrink: 0;
}

.page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: #6d1d1d;
}

.page-title-icon .page-title-icon-svg {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
}

.page-title-icon .page-title-icon-svg * {
    fill: currentColor !important;
}

/* Warning banners — soft orange */
.kt-alert-light.kt-alert-warning,
.kt-alert.kt-alert-warning {
    border: 1px solid var(--warning-border);
    background-color: var(--warning-muted);
    color: var(--warning-foreground);
}

.text-warning {
    color: var(--warning);
}

.admin-header-search-panel {
    position: fixed;
    z-index: 50;
    width: 380px;
    max-width: calc(100vw - 1.5rem);
}

#header {
    overflow: visible;
}

.admin-header-search-result-label,
.admin-header-search-result-subtitle {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.admin-header-search-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.42rem;
    background-color: rgb(59 130 246 / 12%);
    color: #3b82f6;
}

.admin-header-search-item-icon .admin-header-search-item-icon-svg,
.admin-header-search-item-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.admin-header-search-item-icon svg * {
    fill: currentColor !important;
}

.admin-group-role-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.42rem;
    flex-shrink: 0;
}

.admin-group-role-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.admin-group-role-icon svg * {
    fill: currentColor !important;
}

.admin-group-role-icon--member {
    background-color: rgb(147 51 234 / 12%);
    color: #9333ea;
}

.admin-group-role-icon--leader {
    background-color: rgb(220 38 38 / 12%);
    color: #dc2626;
}

#sidebar .kt-menu-title,
#sidebar .kt-menu-link,
#sidebar .kt-menu-link .kt-menu-title,
#sidebar .kt-menu-link .kt-menu-icon {
    color: #a2a3b7 !important;
}

#sidebar .kt-menu-item > span {
    color: rgb(238 220 201 / 75%) !important;
}

#sidebar .sidebar-section-icon {
    color: #494b74 !important;
}

#sidebar .sidebar-section-icon .sidebar-section-icon-svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

#sidebar .sidebar-section-icon .sidebar-section-icon-svg * {
    fill: currentColor !important;
}

#sidebar .kt-menu-link:hover,
#sidebar .kt-menu-link:hover .kt-menu-title,
#sidebar .kt-menu-link:hover .kt-menu-icon {
    color: #ffffff !important;
}

.kt-btn.families-couples-action-btn {
    background-color: #ffffff;
}

.kt-btn .families-couples-action-icon {
    width: 1rem;
    height: 1rem;
    display: block;
}

.kt-btn .families-couples-action-icon * {
    fill: currentColor;
}

#sidebar .kt-menu-item.active > .kt-menu-link,
#sidebar .kt-menu-link.kt-menu-item-active {
    background-color: #060608 !important;
    border-radius: 0.5rem !important;
}

#sidebar .kt-menu-link:hover,
#sidebar .kt-menu-link:focus,
#sidebar .kt-menu-link:active {
    background-color: #1b1b28 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

#sidebar .kt-menu-link:hover *,
#sidebar .kt-menu-link:focus *,
#sidebar .kt-menu-link:active *,
#sidebar .kt-menu-link:hover:visited,
#sidebar .kt-menu-link:hover:visited * {
    color: #ffffff !important;
    text-decoration: none !important;
}

#sidebar .kt-menu-link:hover .kt-menu-link-hover\:\!text-primary,
#sidebar .kt-menu-link:focus .kt-menu-link-hover\:\!text-primary,
#sidebar .kt-menu-link:active .kt-menu-link-hover\:\!text-primary {
    color: #ffffff !important;
}

#sidebar .kt-menu-item:not(.active):not(.open):not(.show):hover {
    transition: background-color 0.3s;
}

#sidebar .kt-menu-item:not(.active):not(.open):not(.show):hover > .kt-menu-link {
    background-color: #1b1b28 !important;
}

#sidebar .kt-menu-item:not(.active):not(.open):not(.show):hover > .kt-menu-link i,
#sidebar .kt-menu-item:not(.active):not(.open):not(.show):hover > .kt-menu-link .kt-menu-icon,
#sidebar .kt-menu-item:not(.active):not(.open):not(.show):hover > .kt-menu-link .kt-menu-title {
    color: #ffffff !important;
}

div.dt-buttons > .dt-button,
div.dt-buttons > div.dt-button-split .dt-button {
    border: 0 !important;
    background: #eeeeee !important;
    margin: 0 !important;
}

div.dt-buttons > .dt-button:hover,
div.dt-buttons > div.dt-button-split .dt-button:hover {
    background: #d9d9d9 !important;
    border: 0 !important;
    margin: 0 !important;
}

/* DataTables pagination — current page only gets button background */
div.dt-container .dt-paging {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

div.dt-container .dt-paging .dt-paging-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    margin: 0 !important;
    color: inherit !important;
    border-radius: 0.375rem;
    box-shadow: none;
    min-width: auto;
    min-height: 2rem;
    padding: 0.35rem 0.75rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1;
}

div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
div.dt-container .dt-paging .dt-paging-button:active:not(.disabled):not(.current) {
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    border: 0 !important;
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: #eeeeee !important;
    background-image: none !important;
    border: 0 !important;
    color: inherit !important;
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active {
    opacity: 0.5;
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    border: 0 !important;
    cursor: default;
}

div.dt-container .dt-paging .ellipsis {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.25rem 0.5rem;
    color: inherit;
}

/*
 * Spacing utilities used in Blade but missing from the pre-built Metronic styles.css.
 * Matches that file's scale: margin-block uses calc(var(--spacing) * n), --spacing = 0.25rem.
 */
.my-8 {
    margin-block: calc(var(--spacing) * 8);
}

.my-12 {
    margin-block: calc(var(--spacing) * 12);
}

.py-8 {
    padding-block: calc(var(--spacing) * 8);
}

.pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
}

@media (width >= 40rem) {
    .sm\:my-12 {
        margin-block: calc(var(--spacing) * 12);
    }

    .sm\:py-12 {
        padding-block: calc(var(--spacing) * 12);
    }
}

#sidebar .kt-sidebar-logo .default-logo {
    max-width: 80% !important;
    width: 80%;
    height: auto;
}

/* Groups index (Cenacoli / Teams / Homegroups) DataTables */
.groups-datatable-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.groups-datatable {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.groups-datatable th,
.groups-datatable td {
    padding: 0.5rem 0.875rem;
    vertical-align: top;
}

.groups-datatable td:last-child {
    white-space: nowrap;
}

.groups-datatable-wrap .dt-buttons .dt-button {
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
}

.groups-datatable-wrap .dataTables_wrapper .dt-search input {
    min-width: 12rem;
}

/* DataTables column footer filters (shared) */
.dataTables_wrapper tfoot,
div.dt-container tfoot {
    display: table-footer-group;
}

.groups-datatable tfoot th,
table.dataTable tfoot th {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

table.dataTable tfoot th input,
table.dataTable tfoot th select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #ebe5e5;
    border-radius: 4px;
    padding: 2px 3px;
    font-size: 0.75rem;
    background: var(--background, #fff);
    color: inherit;
}

.admin-datatable-col-filter,
.form-col-filter,
.profiles-col-filter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* DataTables marks numeric columns right-aligned; keep Members left-aligned */
.groups-datatable th.group-members-col,
.groups-datatable td.group-members-col,
.groups-datatable .dt-type-numeric.group-members-col {
    text-align: left !important;
}

/* Team feedback submissions — stat cards (Metronic lacks sm:grid-cols-*) */
.team-submission-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-submission-stats-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (width >= 40rem) {
    .team-submission-stats-row--cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-submission-stats-row--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* User profile header card (read-only user show page) */
.user-profile-header-card {
    overflow: hidden;
}

.user-profile-meta {
    column-gap: 2.5rem;
    row-gap: 0.75rem;
}

.user-profile-meta__item {
    gap: 0.5rem;
}

.user-profile-meta__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    color: #3699ff;
}

.user-profile-meta__icon svg path,
.user-profile-meta__icon svg rect,
.user-profile-meta__icon svg circle,
.user-profile-meta__icon svg polygon {
    fill: #3699ff !important;
}

.user-profile-meta__icon .ki-duotone::before,
.user-profile-meta__icon .ki-duotone::after {
    color: #3699ff !important;
}

.user-profile-gdpr-icon--ok {
    color: #44c4bd;
}

.user-profile-gdpr-icon--missing {
    color: var(--destructive);
}

.user-profile-gdpr-icon svg,
.user-profile-gdpr-icon svg * {
    fill: currentColor !important;
}

.user-profile-contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    transition: opacity 0.15s ease;
}

.user-profile-contact-btn:hover {
    opacity: 0.85;
}

.user-profile-contact-btn--whatsapp {
    background: rgb(68 196 189 / 35%);
    color: #44c4bd;
}

.user-profile-contact-btn--whatsapp svg,
.user-profile-contact-btn--whatsapp svg * {
    fill: currentColor !important;
}

.user-profile-contact-btn--phone {
    background: rgb(54 153 255 / 18%);
    color: #3699ff;
}

.user-profile-contact-btn--phone svg path,
.user-profile-contact-btn--phone svg rect,
.user-profile-contact-btn--phone svg circle,
.user-profile-contact-btn--phone svg polygon {
    fill: #3699ff !important;
}

/* Keen-style symbol blocks for profile stat columns */
.symbol {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    border-radius: 0.42rem;
}

.symbol.symbol-40 .symbol-label {
    width: 40px;
    height: 40px;
}

.symbol .symbol-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    line-height: 0;
    color: #3f4254;
    background-color: #f3f6f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0.42rem;
}

.svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.svg-icon.svg-icon-lg svg {
    height: 1.75rem !important;
    width: 1.75rem !important;
}

.svg-icon.svg-icon-primary {
    color: var(--primary);
}

.svg-icon.svg-icon-primary svg,
.svg-icon.svg-icon-primary svg path,
.svg-icon.svg-icon-primary svg rect,
.svg-icon.svg-icon-primary svg circle,
.svg-icon.svg-icon-primary svg polygon {
    fill: currentColor !important;
}

/* Membership card (user show page) */
.user-profile-cards-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .user-profile-cards-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
}

.user-membership-row__icon-label {
    background-color: rgb(137 80 252 / 12%) !important;
}

.user-membership-row__icon {
    color: #8950fc;
    fill: #8950FC;
}

.user-membership-row__icon svg path,
.user-membership-row__icon svg rect,
.user-membership-row__icon svg circle,
.user-membership-row__icon svg polygon {
    fill: #8950fc !important;
}

.user-membership-row__label {
    width: 6.5rem;
}

.user-membership-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.42rem;
    background: rgb(54 153 255 / 12%);
    color: #3699ff;
    transition: opacity 0.15s ease;
}

.user-membership-row__action:hover {
    opacity: 0.85;
}

.user-membership-row__action .ki-duotone::before,
.user-membership-row__action .ki-duotone::after {
    color: #3699ff !important;
}

.user-membership-row__action--placeholder {
    visibility: hidden;
    pointer-events: none;
}

.user-membership-row__menu-toggle {
    border: 0;
    cursor: pointer;
}

.user-membership-row__menu.is-open .user-membership-row__action {
    background: rgb(54 153 255 / 22%);
}

.user-membership-row__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 20;
    min-width: 11rem;
    max-width: 16rem;
    padding: 0.35rem 0;
    border: 1px solid var(--border, #ebedf3);
    border-radius: 0.42rem;
    background: #fff;
    box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
}

.user-membership-row__dropdown-item {
    display: block;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    color: #3f4254;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-membership-row__dropdown-item:hover {
    background: rgb(54 153 255 / 8%);
    color: #3699ff;
}

/* Additional info cards row (profile show page) */
.user-profile-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .user-profile-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.user-profile-info-list {
    display: grid;
    gap: 1rem;
}

/* Profile edit form custom grids */
.profile-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .profile-form-grid--thirds {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .profile-form-grid--address {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .profile-form-grid--quarters {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.user-profile-info-row__icon-label {
    background-color: rgb(54 153 255 / 12%) !important;
}

.user-profile-info-row__icon {
    color: #3699ff;
}

.user-profile-info-row__icon svg path,
.user-profile-info-row__icon svg rect,
.user-profile-info-row__icon svg circle,
.user-profile-info-row__icon svg polygon {
    fill: currentColor !important;
}

.user-profile-info-card--financial .user-profile-info-row__icon-label {
    background-color: rgb(27 197 189 / 12%) !important;
}

.user-profile-info-card--financial .user-profile-info-row__icon {
    color: #1bc5bd;
}

.user-profile-info-card--other .user-profile-info-row__icon-label {
    background-color: rgb(54 153 255 / 12%) !important;
}

.user-profile-info-card--other .user-profile-info-row__icon {
    color: #3699ff;
}

.user-profile-info-card--work .user-profile-info-row__icon-label {
    background-color: rgb(255 168 0 / 14%) !important;
}

.user-profile-info-card--work .user-profile-info-row__icon {
    color: #ffa800;
}

/* Family card (user show page) */
.user-family-row__icon-label {
    background-color: rgb(246 78 96 / 12%) !important;
}

.user-family-row__icon {
    color: #f64e60;
}

.user-family-row__icon .path1,
.user-family-row__icon .path2 {
    color: #f64e60;
}

.user-family-row__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.42rem;
    background: rgb(54 153 255 / 12%);
    color: #3699ff;
    transition: opacity 0.15s ease;
}

.user-family-row__action:hover {
    opacity: 0.85;
}

.user-family-row__action .ki-duotone::before,
.user-family-row__action .ki-duotone::after {
    color: #3699ff !important;
}

.user-family-row__action--placeholder {
    visibility: hidden;
    pointer-events: none;
}

.user-family-child-row {
    padding: 0.75rem 1rem;
    border-radius: 0.42rem;
    background: rgb(245 248 250);
}

.user-family-child-icon {
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.user-family-child-icon--male {
    border-color: #3699ff;
}

.user-family-child-icon--female {
    border-color: #f64e60;
}

/* Cenacolo feedback dashboard */
.cenacolo-stat-label {
    color: #707070;
}

.cenacolo-feedback-stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (width > 680px) {
    .cenacolo-feedback-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cenacolo-dashboard-datatable-card {
    max-width: 100%;
    min-width: 0;
}

.cenacolo-dashboard-datatable-wrap {
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}

.cenacolo-dashboard-datatable-wrap .dt-scroll-body {
    overflow-x: auto !important;
    overflow-y: visible;
}

#cenacolo-feedback-dashboard-datatable_wrapper {
    max-width: 100%;
    min-width: 0;
}

#cenacolo-feedback-dashboard-datatable_wrapper tfoot {
    display: table-footer-group;
}

#cenacolo-feedback-dashboard-datatable {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

#cenacolo-feedback-dashboard-datatable tfoot th {
    padding: 0.35rem 0.5rem;
    vertical-align: middle;
}

#cenacolo-feedback-dashboard-datatable tfoot .form-col-filter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#cenacolo-feedback-dashboard-datatable th,
#cenacolo-feedback-dashboard-datatable td {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
    max-width: none;
}

#cenacolo-feedback-dashboard-datatable td.reason-cell,
#cenacolo-feedback-dashboard-datatable td.reason-cell ul,
#cenacolo-feedback-dashboard-datatable td.reason-cell li {
    white-space: nowrap;
}

#cenacolo-feedback-dashboard-datatable td.comments-cell {
    white-space: nowrap;
}

@media (width < 1280px) {
    .cenacolo-dashboard-datatable-card,
    .cenacolo-dashboard-datatable-card .kt-card-content {
        overflow: hidden;
    }

    .profiles-datatable-wrap.cenacolo-dashboard-datatable-wrap {
        max-width: 90vw;
    }

    #cenacolo-feedback-dashboard-datatable_wrapper {
        max-width: 100%;
        overflow-x: auto;
    }

    .cenacolo-dashboard-datatable-wrap .dt-scroll,
    .cenacolo-dashboard-datatable-wrap .dt-scroll-body {
        overflow-x: auto !important;
        max-width: 100%;
    }

    #cenacolo-feedback-dashboard-datatable_wrapper .dt-layout-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #cenacolo-feedback-dashboard-datatable_wrapper .dt-search input {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
}

/* Family show (read-only) */
.family-show-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

.family-show-meta > div {
    border-bottom: 1px solid var(--border, #ebedf3);
}

.family-show-meta > div:last-child {
    border-bottom: 0;
}

@media (width >= 640px) {
    .family-show-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .family-show-meta > div {
        border-bottom: 0;
        border-right: 1px solid var(--border, #ebedf3);
    }

    .family-show-meta > div:last-child {
        border-right: 0;
    }
}

.family-show-child-row__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.family-show-child-row__grid {
    flex: 1 1 12rem;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.family-show-child-row__action {
    align-self: center;
}

@media (width >= 640px) {
    .family-show-child-row__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width >= 1024px) {
    .family-show-child-row__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Family / couples form */
.family-children-columns__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 1024px) {
    .family-children-columns__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* Portal feedback widget */
.portal-feedback-widget {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 50;
}

.portal-feedback-fab {
    box-shadow: 0 10px 25px rgb(0 0 0 / 0.15);
}

.portal-feedback-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(22rem, calc(100vw - 2rem));
    max-height: min(28rem, calc(100vh - 6rem));
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--background);
    box-shadow: 0 16px 40px rgb(0 0 0 / 0.12);
}

.portal-feedback-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.portal-feedback-intro {
    margin-bottom: 0.75rem;
}

.portal-feedback-feedback {
    margin-top: 0.5rem;
}

.portal-feedback-status-badge--pending {
    color: var(--warning);
}

.portal-feedback-status-badge--actioned {
    color: var(--success);
}

.portal-feedback-status-badge--ignored {
    color: var(--secondary-foreground);
}

.portal-feedback-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.portal-feedback-filter-tabs .is-active {
    pointer-events: none;
}

/* Group edit layout — 1/4 sidebar + 3/4 main */
.group-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.group-edit-layout__main {
    min-width: 0;
}

.group-edit-nav__header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.group-edit-nav__list {
    display: flex;
    flex-direction: column;
}

.group-edit-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    margin: 0.375rem 0.5rem 0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #6b7280;
    text-decoration: none;
}

.group-edit-nav__link:last-child {
    margin-bottom: 0.375rem;
}

.group-edit-nav__link-left {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

.group-edit-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.42rem;
    background-color: #f3f4f6;
    color: #6b7280;
    flex-shrink: 0;
}

.group-edit-nav__icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}

.group-edit-nav__icon svg * {
    fill: currentColor !important;
}

.group-edit-nav__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-edit-nav__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background-color: #f3f4f6;
    color: #6b7280;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    flex-shrink: 0;
}

.group-edit-nav__link:hover {
    color: #4b5563;
    background-color: #f3f4f6;
}

.group-edit-nav__link--active {
    font-weight: 600;
    color: #2563eb;
    background-color: rgb(37 99 235 / 10%);
}

.group-edit-nav__link--active .group-edit-nav__icon,
.group-edit-nav__link--active .group-edit-nav__count {
    background-color: rgb(37 99 235 / 12%);
    color: #2563eb;
}

@media (min-width: 1024px) {
    .group-edit-layout {
        grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
    }

    .group-edit-layout__sidebar {
        position: sticky;
        top: 5.5rem;
        align-self: start;
        max-width: 100%;
    }

    .group-edit-nav {
        max-height: calc(100vh - 7rem - 50px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .group-edit-nav__list {
        overflow-y: auto;
        scroll-padding-block: 0.5rem;
    }

    .group-edit-nav__link--active {
        scroll-margin-block: 0.25rem;
    }
}

/* Premises bookings */
.premises-bookings-panels {
    align-items: start;
}

.premises-bookings-panels > .premises-bookings-requests-panel,
.premises-bookings-panels > .premises-bookings-form-panel {
    align-self: start;
    height: auto;
    width: 100%;
}

.premises-bookings-collapse > summary {
    list-style: none;
}

.premises-bookings-collapse > summary::-webkit-details-marker {
    display: none;
}

.premises-bookings-collapse__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.premises-bookings-collapse__chevron {
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--secondary-foreground, #6b7280);
    border-bottom: 2px solid var(--secondary-foreground, #6b7280);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-top: -0.15rem;
}

.premises-bookings-collapse[open] > summary .premises-bookings-collapse__chevron {
    transform: rotate(225deg);
    margin-top: 0.15rem;
}

.premises-bookings-requests-panel__body {
    padding-right: 0.125rem;
}

.premises-bookings-calendar .fc-daygrid-day.fc-day-today {
    background-color: #e9eaf3 !important;
}

.premises-bookings-calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background-color: transparent !important;
    color: var(--secondary-foreground, #6b7280) !important;
}

.premises-bookings-calendar .fc-event:not(.premises-booking-event--google) {
    background-color: #dff4e9 !important;
    border: none !important;
    border-radius: 5px;
    color: #000 !important;
    padding: 2px 6px;
    font-size: 0.75rem;
}

.premises-bookings-calendar .fc-event.premises-booking-event--google {
    background-color: #64748b !important;
    border-color: #475569 !important;
    color: #fff !important;
    border-radius: 9999px;
    padding: 2px 6px;
    font-size: 0.75rem;
}

.premises-bookings-calendar .fc-daygrid-event .fc-event-title::before {
    content: '';
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: #fff;
    margin-right: 0.25rem;
    vertical-align: middle;
    position: relative;
    top: -0.05rem;
}

.premises-bookings-calendar .fc-event:not(.premises-booking-event--google) .fc-event-title,
.premises-bookings-calendar .fc-event:not(.premises-booking-event--google) .fc-event-time {
    color: #000 !important;
}

.premises-bookings-calendar .fc-event.premises-booking-event--google .fc-event-title,
.premises-bookings-calendar .fc-event.premises-booking-event--google .fc-event-time {
    color: #fff !important;
}

.premises-booking-request-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: rgb(251 146 60 / 15%);
    color: #ea580c;
}

.premises-booking-request-icon svg path,
.premises-booking-request-icon svg rect,
.premises-booking-request-icon svg circle,
.premises-booking-request-icon svg polygon {
    fill: currentColor !important;
}

.premises-booking-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.premises-booking-action-btn * {
    cursor: pointer;
}

.premises-booking-action-btn.user-profile-contact-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.premises-booking-action-btn:hover {
    opacity: 0.85;
}

.premises-booking-action-btn svg path,
.premises-booking-action-btn svg rect,
.premises-booking-action-btn svg circle,
.premises-booking-action-btn svg polygon {
    fill: currentColor !important;
}

.premises-booking-action-btn--whatsapp {
    background-color: rgb(68 196 189 / 35%);
    color: #44c4bd;
}

.premises-booking-action-btn--whatsapp svg,
.premises-booking-action-btn--whatsapp svg * {
    fill: currentColor !important;
}

.premises-booking-action-btn--confirm {
    background-color: rgb(37 99 235 / 12%);
    color: #2563eb;
}

.premises-booking-action-btn--edit {
    background-color: rgb(251 191 36 / 20%);
    color: #d97706;
}

.premises-booking-action-btn--notes {
    background-color: rgb(99 102 241 / 12%);
    color: #4f46e5;
}

.premises-booking-note-preview {
    max-width: 25ch;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.premises-booking-action-btn--deny,
.premises-booking-action-btn--unconfirm {
    background-color: rgb(239 68 68 / 12%);
    color: #dc2626;
}

.premises-booking-status-badge {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.premises-booking-status-badge--confirmed {
    background-color: rgb(13 148 136 / 12%);
    color: #0f766e;
}

.premises-booking-status-badge--pending {
    background-color: rgb(251 191 36 / 20%);
    color: #b45309;
}

.premises-booking-status-badge--denied {
    background-color: rgb(239 68 68 / 12%);
    color: #dc2626;
}

.premises-booking-edit-dialog:not([open]) {
    display: none;
}

.premises-booking-edit-dialog {
    border: none;
    border-radius: 0.75rem;
    max-width: 32rem;
    width: calc(100% - 2rem);
    margin: auto;
    padding: 1.25rem;
}

.premises-booking-edit-dialog[open] {
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

#premises-booking-edit-form {
    margin: 30px;
}

.premises-booking-edit-dialog::backdrop {
    background: rgb(0 0 0 / 40%);
}

.premises-booking-notes-dialog:not([open]) {
    display: none;
}

.premises-booking-notes-dialog {
    border: none;
    border-radius: 0.75rem;
    width: min(40vw, calc(100% - 2rem));
    max-width: 40vw;
    margin: auto;
    padding: 1.25rem;
    inset: 0;
}

.premises-booking-notes-dialog[open] {
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.premises-booking-notes-dialog::backdrop {
    background: rgb(15 23 42 / 25%);
}

@media (max-width: 48rem) {
    .premises-booking-notes-dialog {
        width: calc(100% - 2rem);
        max-width: calc(100% - 2rem);
    }
}

/* Metronic styles.css ships md:grid-cols-2 but not md:grid-cols-3 */
@media (width >= 48rem) {
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}