/* ==========================================================================
   Fundamental Health Backoffice — Shell
   Navigation, responsive shell, filters, tables and list layouts.
   ========================================================================== */

/* ================================================== */
/* BACKOFFICE V2                                      */
/* ================================================== */
.fh-body--backoffice {
    background: #f2f5f4;
}

/* SHELL */
.fh-admin-shell {
    display: grid;

    min-height: 100dvh;

    grid-template-columns:
        260px minmax(0, 1fr);

    grid-template-rows:
        auto 1fr;
}

.fh-admin-sidebar {
    position: sticky;
    top: 0;

    display: flex;

    height: 100dvh;

    grid-column: 1;
    grid-row: 1 / -1;

    flex-direction: column;

    border-right:
        1px solid
        var(--fh-border);

    background:
        rgb(255 255 255 / 0.94);

    backdrop-filter:
        blur(14px);
}

.fh-admin-sidebar__brand {
    padding: 22px 18px 18px;
}

.fh-admin-nav {
    display: flex;

    min-height: 0;
    flex: 1;

    flex-direction: column;

    gap: 3px;

    padding:
        4px 11px
        16px;
}

.fh-admin-nav__link {
    display: flex;

    min-height: 43px;

    align-items: center;
    gap: 11px;

    border: 0;
    border-radius: 10px;

    padding: 10px 11px;

    background:
        transparent;

    color:
        var(--fh-text-soft);

    font: inherit;
    font-size: 0.875rem;
    font-weight: 570;

    text-decoration: none;

    cursor: pointer;

    transition:
        color
            var(--fh-transition),
        background
            var(--fh-transition);
}

.fh-admin-nav__link:hover {
    background:
        var(--fh-surface-subtle);

    color:
        var(--fh-text);

    text-decoration: none;
}

.fh-admin-nav__link.is-active {
    background:
        var(--fh-primary-soft);

    color:
        var(--fh-primary);

    font-weight: 680;
}

.fh-admin-nav__spacer {
    flex: 1;
}

.fh-admin-nav__link--logout {
    width: 100%;
    margin-top: 8px;
}

.fh-admin-nav__error {
    padding:
        0 11px
        8px;

    color:
        var(--fh-danger);

    font-size: 0.75rem;
}

/* PAGE HEADER */
.fh-admin-page-header {
    grid-column: 2;

    padding:
        30px
        34px
        0;
}

.fh-admin-page-title {
    margin: 0;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.45rem
        );
}

/* CONTENT */
.fh-admin-content {
    min-width: 0;

    grid-column: 2;

    padding:
        24px
        34px
        64px;
}

.fh-admin-content > * + * {
    margin-top: 22px;
}

/* MOBILE HEADER */
.fh-admin-mobile-header {
    display: none;
}

.fh-admin-mobile-menu {
    position: relative;
}

.fh-admin-mobile-menu > summary {
    list-style: none;
}

.fh-admin-mobile-menu > summary::-webkit-details-marker {
    display: none;
}

.fh-admin-mobile-menu__content {
    position: absolute;
    z-index: 100;

    top: calc(100% + 8px);
    right: 0;

    width: min(
        320px,
        calc(100vw - 28px)
    );

    padding: 8px;

    border:
        1px solid
        var(--fh-border);

    border-radius:
        var(--fh-radius-md);

    background:
        var(--fh-surface);

    box-shadow:
        var(--fh-shadow-md);
}

.fh-admin-mobile-menu__content
.fh-admin-nav {
    padding: 0;
}

/* FILTER BAR */
.fh-admin-filter {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(170px, 1fr)
        );

    align-items: end;
    gap: 12px;

    padding: 16px;

    border:
        1px solid
        var(--fh-border);

    border-radius:
        var(--fh-radius-md);

    background:
        var(--fh-surface);

    box-shadow:
        var(--fh-shadow-sm);
}

.fh-admin-filter__field {
    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 6px;
}

.fh-admin-filter__field--wide {
    grid-column: span 2;
}

.fh-admin-filter__actions {
    display: flex;
    align-items: center;
    gap: 8px;

    align-self: end;
}

.fh-admin-filter label {
    color:
        var(--fh-text-soft);

    font-size: 0.78rem;
    font-weight: 650;
}

.fh-admin-filter input,
.fh-admin-filter select {
    width: 100%;

    min-height: 42px;

    border:
        1px solid
        var(--fh-border-strong);

    border-radius: 9px;

    padding: 8px 10px;

    background: white;

    color: var(--fh-text);
}

.fh-admin-filter input:focus,
.fh-admin-filter select:focus {
    border-color:
        var(--fh-focus);

    outline: none;

    box-shadow:
        0 0 0 3px
        rgb(104 173 158 / 0.14);
}

/* COUNTS */
.fh-admin-list-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;
    gap: 12px;

    color:
        var(--fh-text-muted);

    font-size: 0.875rem;
}

/* TABLE */
.fh-admin-table-wrap {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid
        var(--fh-border);

    border-radius:
        var(--fh-radius-md);

    background:
        var(--fh-surface);

    box-shadow:
        var(--fh-shadow-sm);
}

.fh-admin-table {
    width: 100%;

    min-width: 760px;

    border-collapse:
        collapse;
}

.fh-admin-table th,
.fh-admin-table td {
    padding:
        12px 14px;

    border-bottom:
        1px solid
        var(--fh-border);

    text-align: left;

    vertical-align:
        middle;
}

.fh-admin-table th {
    position: sticky;
    top: 0;

    background:
        #f8faf9;

    color:
        var(--fh-text-muted);

    font-size: 0.7rem;
    font-weight: 720;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    white-space: nowrap;
}

.fh-admin-table td {
    color:
        var(--fh-text-soft);

    font-size: 0.84rem;
}

.fh-admin-table tbody
tr:last-child td {
    border-bottom: 0;
}

.fh-admin-table tbody
tr:hover td {
    background:
        #fafcfb;
}

.fh-admin-table__secondary {
    display: block;

    margin-top: 3px;

    color:
        var(--fh-text-muted);

    font-size: 0.74rem;
}

/* STATS */
.fh-admin-stats {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(185px, 1fr)
        );

    gap: 14px;
}

/* DESCRIPTION LIST */
.fh-admin-content dl {
    display: grid;

    grid-template-columns:
        minmax(160px, 0.65fr)
        minmax(0, 1.35fr);

    margin: 0;
}

.fh-admin-content dt,
.fh-admin-content dd {
    margin: 0;

    padding: 10px 0;

    border-bottom:
        1px solid
        var(--fh-border);
}

.fh-admin-content dt {
    color:
        var(--fh-text-muted);

    font-size: 0.8rem;
}

.fh-admin-content dd {
    color:
        var(--fh-text);

    font-size: 0.875rem;
    font-weight: 550;
}

/* QUICK LINKS */
.fh-admin-quick-links {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 12px;
}

.fh-admin-quick-link {
    display: flex;

    align-items: center;
    justify-content:
        space-between;
    gap: 12px;

    padding: 15px;

    border:
        1px solid
        var(--fh-border);

    border-radius:
        var(--fh-radius-md);

    background:
        var(--fh-surface);

    color:
        var(--fh-text);

    font-size: 0.875rem;
    font-weight: 600;

    text-decoration: none;

    box-shadow:
        var(--fh-shadow-sm);
}

.fh-admin-quick-link:hover {
    border-color:
        var(--fh-border-strong);

    background:
        var(--fh-surface-subtle);

    color:
        var(--fh-text);

    text-decoration: none;
}

/* LOGIN FIX */
.fh-body--backoffice
.fh-admin-login-form {
    display: flex;

    width: 100%;

    flex-direction: column;

    align-items: stretch;

    margin: 0;
    padding: 0;

    border: 0;

    background:
        transparent;

    box-shadow: none;
}

.fh-body--backoffice
.fh-admin-login-form
.fh-field {
    width: 100%;

    min-width: 0;
}

.fh-body--backoffice
.fh-admin-login-form
.fh-input {
    width: 100%;
}

/* RESPONSIVE */
@media (max-width: 980px) {
.fh-admin-shell {
        grid-template-columns:
            1fr;
    }

.fh-admin-sidebar {
        display: none;
    }

.fh-admin-mobile-header {
        display: flex;

        grid-column: 1;

        align-items: center;
        justify-content:
            space-between;
        gap: 16px;

        padding:
            12px 16px;

        border-bottom:
            1px solid
            var(--fh-border);

        background:
            rgb(
                255 255 255
                / 0.94
            );

        position: sticky;
        z-index: 60;
        top: 0;
    }

.fh-admin-page-header,
.fh-admin-content {
        grid-column: 1;
    }

.fh-admin-page-header {
        padding:
            24px 18px 0;
    }

.fh-admin-content {
        padding:
            20px 18px 48px;
    }

.fh-admin-mobile-menu__content
    .fh-admin-nav {
        max-height:
            min(
                70vh,
                560px
            );

        overflow-y: auto;
    }
}

@media (max-width: 620px) {
.fh-admin-filter {
        grid-template-columns:
            1fr;
    }

.fh-admin-filter__actions
    .fh-button {
        width: 100%;
    }

.fh-admin-content dl {
        grid-template-columns:
            1fr;
    }

.fh-admin-content dt {
        padding-bottom: 2px;

        border-bottom: 0;
    }

.fh-admin-content dd {
        padding-top: 2px;
    }

.fh-admin-filter__field--wide {
        grid-column: auto;
    }
}

.fh-admin-table th:last-child,
.fh-admin-table td:last-child {
    white-space: nowrap;
}