/* ==========================================================================
   Fundamental Health UI — Shared Components
   Reusable fh-ui primitives shared by Web and Backoffice.
   ========================================================================== */

/* -------------------------------------------------- */
/* PAGE                                                */
/* -------------------------------------------------- */
.fh-page {
    width: min(
        calc(100% - 32px),
        var(--fh-content-width)
    );

    margin-inline: auto;
    padding-block: 40px 72px;
}

.fh-page--reading {
    max-width: var(--fh-reading-width);
}

.fh-page-header {
    margin-bottom: 28px;
}

.fh-page-title {
    margin-bottom: 8px;
}

.fh-page-description {
    max-width: 720px;
    margin-bottom: 0;

    color: var(--fh-text-muted);
    font-size: 1.05rem;
}

/* -------------------------------------------------- */
/* BRAND                                               */
/* -------------------------------------------------- */
.fh-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

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

.fh-brand:hover {
    color: var(--fh-text);
}

.fh-brand__mark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #187964,
            #0d5a4b
        );

    color: white;

    box-shadow:
        0 7px 18px
        rgb(18 107 89 / 0.22);
}

.fh-brand__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.fh-brand__name {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.fh-brand__subtitle {
    margin-top: 2px;

    color: var(--fh-text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}

/* -------------------------------------------------- */
/* SURFACE / CARD                                      */
/* -------------------------------------------------- */
.fh-card {
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-lg);

    background: var(--fh-surface);

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

.fh-card__body {
    padding: 24px;
}

.fh-card__header {
    padding: 22px 24px 0;
}

.fh-card__header > :last-child {
    margin-bottom: 0;
}

.fh-section {
    margin-bottom: 24px;
    padding: 24px;

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

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

/* -------------------------------------------------- */
/* BUTTON                                              */
/* -------------------------------------------------- */
.fh-button {
    display: inline-flex;
    min-height: 44px;

    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid transparent;
    border-radius: 11px;
    padding: 10px 17px;

    font-weight: 620;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;
    user-select: none;

    transition:
        background var(--fh-transition),
        border-color var(--fh-transition),
        color var(--fh-transition),
        box-shadow var(--fh-transition),
        transform var(--fh-transition);
}

.fh-button:hover {
    text-decoration: none;
}

.fh-button:active:not(:disabled) {
    transform: translateY(1px);
}

.fh-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fh-button--primary {
    background: var(--fh-primary);
    color: white;
}

.fh-button--primary:hover:not(:disabled) {
    background: var(--fh-primary-hover);
    color: white;
}

.fh-button--secondary {
    border-color: var(--fh-border-strong);
    background: var(--fh-surface);
    color: var(--fh-text);
}

.fh-button--secondary:hover:not(:disabled) {
    border-color: #adc3ba;
    background: var(--fh-surface-subtle);
    color: var(--fh-text);
}

.fh-button--ghost {
    background: transparent;
    color: var(--fh-text-soft);
}

.fh-button--ghost:hover:not(:disabled) {
    background: var(--fh-surface-subtle);
    color: var(--fh-text);
}

.fh-button--danger {
    background: var(--fh-danger);
    color: white;
}

.fh-button--danger:hover:not(:disabled) {
    background: var(--fh-danger-hover);
    color: white;
}

.fh-button--full {
    width: 100%;
}

.fh-button--sm {
    min-height: 36px;
    padding: 7px 12px;

    border-radius: 9px;

    font-size: 0.875rem;
}

/* -------------------------------------------------- */
/* FORM                                                */
/* -------------------------------------------------- */
.fh-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fh-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;

    padding-top: 4px;
}

.fh-form-section + .fh-form-section {
    margin-top: 6px;
    padding-top: 24px;
    border-top: 1px solid var(--fh-border);
}

.fh-form-section__header {
    margin-bottom: 2px;
}

.fh-form-section__title {
    margin-bottom: 5px;

    font-size: 1rem;
    font-weight: 680;
    letter-spacing: -0.015em;
}

.fh-form-section__description {
    margin-bottom: 0;

    color: var(--fh-text-muted);
    font-size: 0.875rem;
}

.fh-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.fh-field {
    display: flex;
    min-width: 0;

    flex-direction: column;
    gap: 7px;
}

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

.fh-field__label {
    color: var(--fh-text);
    font-size: 0.875rem;
    font-weight: 610;
}

.fh-field__hint {
    margin: 0;

    color: var(--fh-text-muted);
    font-size: 0.79rem;
    line-height: 1.45;
}

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

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

    background: var(--fh-surface);

    color: var(--fh-text);

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

.fh-input,
.fh-select {
    min-height: 46px;
    padding: 10px 13px;
}

.fh-textarea {
    min-height: 120px;
    resize: vertical;
    padding: 12px 13px;
}

.fh-input::placeholder,
.fh-textarea::placeholder {
    color: #9aa6a1;
}

.fh-input:hover,
.fh-select:hover,
.fh-textarea:hover {
    border-color: #b4c6be;
}

.fh-input:focus,
.fh-select:focus,
.fh-textarea:focus {
    border-color: var(--fh-focus);
    outline: none;

    box-shadow:
        0 0 0 4px
        rgb(104 173 158 / 0.15);
}

.fh-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: var(--fh-text-soft);
    font-size: 0.875rem;
    line-height: 1.45;

    cursor: pointer;
}

.fh-checkbox input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 2px 0 0;

    accent-color: var(--fh-primary);
}

.fh-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 4px;
}

/* -------------------------------------------------- */
/* ALERT                                               */
/* -------------------------------------------------- */
.fh-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 0;
    padding: 12px 14px;

    border: 1px solid transparent;
    border-radius: 11px;

    font-size: 0.875rem;
    line-height: 1.45;
}

.fh-alert--danger {
    border-color: #f1c2bc;
    background: var(--fh-danger-soft);
    color: #8f2018;
}

.fh-alert--success {
    border-color: #b8dfcc;
    background: var(--fh-success-soft);
    color: #116344;
}

.fh-alert--info {
    border-color: #c9dafa;
    background: var(--fh-info-soft);
    color: #274f8c;
}

.fh-alert--warning {
    border-color: #efdba5;
    background: var(--fh-warning-soft);
    color: #7b5505;
}

/* -------------------------------------------------- */
/* AUTH                                                */
/* -------------------------------------------------- */
.fh-auth-page {
    display: grid;
    min-height: 100dvh;

    place-items: center;

    padding:
        max(28px, env(safe-area-inset-top))
        18px
        max(28px, env(safe-area-inset-bottom));

    background:
        radial-gradient(
            circle at 15% 0%,
            rgb(204 232 222 / 0.65),
            transparent 34rem
        ),
        radial-gradient(
            circle at 100% 100%,
            rgb(233 226 205 / 0.58),
            transparent 34rem
        ),
        var(--fh-bg);
}

.fh-auth-shell {
    width: min(100%, 460px);
}

.fh-auth-shell--wide {
    width: min(100%, 790px);
}

.fh-auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.fh-auth-card {
    padding: clamp(24px, 5vw, 38px);

    border: 1px solid rgb(220 229 225 / 0.95);
    border-radius: var(--fh-radius-xl);

    background:
        rgb(255 255 255 / 0.96);

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

.fh-auth-header {
    margin-bottom: 28px;
}

.fh-auth-title {
    margin-bottom: 8px;

    font-size: clamp(1.75rem, 5vw, 2.25rem);
}

.fh-auth-description {
    margin-bottom: 0;

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

.fh-auth-footer {
    margin-top: 24px;

    color: var(--fh-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.fh-auth-footer p {
    margin: 7px 0;
}

/* -------------------------------------------------- */
/* BADGES                                              */
/* -------------------------------------------------- */
.fh-badge {
    display: inline-flex;
    min-height: 26px;

    align-items: center;
    gap: 6px;

    border-radius: 999px;
    padding: 4px 9px;

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

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

    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
}

.fh-badge--success {
    background: var(--fh-success-soft);
    color: var(--fh-success);
}

.fh-badge--warning {
    background: var(--fh-warning-soft);
    color: var(--fh-warning);
}

.fh-badge--danger {
    background: var(--fh-danger-soft);
    color: var(--fh-danger);
}

.fh-badge--info {
    background: var(--fh-info-soft);
    color: var(--fh-info);
}

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

    overflow-x: auto;

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

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

.fh-table {
    width: 100%;
    min-width: 680px;

    border-collapse: collapse;
}

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

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

    text-align: left;
    vertical-align: top;
}

.fh-table th {
    background: #f8faf9;

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

    font-size: 0.75rem;
    font-weight: 680;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.fh-table td {
    color: var(--fh-text-soft);
    font-size: 0.875rem;
}

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

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

/* -------------------------------------------------- */
/* DESCRIPTION LIST                                   */
/* -------------------------------------------------- */
.fh-description-list {
    display: grid;
    grid-template-columns:
        minmax(150px, 0.7fr)
        minmax(0, 1.3fr);

    margin: 0;
}

.fh-description-list dt,
.fh-description-list dd {
    margin: 0;
    padding: 11px 0;

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

.fh-description-list dt {
    color: var(--fh-text-muted);
    font-size: 0.85rem;
}

.fh-description-list dd {
    color: var(--fh-text);
    font-weight: 550;
}

/* -------------------------------------------------- */
/* PAGINATION                                          */
/* -------------------------------------------------- */
.fh-pagination {
    display: grid;
    grid-template-columns:
        1fr auto 1fr;

    align-items: center;
    gap: 16px;

    margin-top: 22px;
}

.fh-pagination > :last-child {
    display: flex;
    justify-content: flex-end;
}

.fh-pagination__label {
    color: var(--fh-text-muted);
    font-size: 0.82rem;
}

/* -------------------------------------------------- */
/* RESPONSIVE                                          */
/* -------------------------------------------------- */
@media (max-width: 760px) {
.fh-brand__subtitle {
        display: none;
    }

.fh-form-grid {
        grid-template-columns: 1fr;
    }

.fh-field--full {
        grid-column: auto;
    }

.fh-auth-card {
        padding: 24px 20px;
    }

.fh-pagination {
        grid-template-columns:
            1fr 1fr;
    }

.fh-pagination__label {
        grid-column: 1 / -1;
        grid-row: 1;

        text-align: center;
    }

.fh-description-list {
        grid-template-columns: 1fr;
    }

.fh-description-list dt {
        padding-bottom: 3px;
        border-bottom: 0;
    }

.fh-description-list dd {
        padding-top: 0;
    }
}

@media (max-width: 520px) {
.fh-auth-page {
        align-items: start;
    }

.fh-auth-card {
        border-radius: 18px;
    }

.fh-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

.fh-form-actions .fh-button {
        width: 100%;
    }
}

/* -------------------------------------------------- */
/* GENERIC LAYOUT                                      */
/* -------------------------------------------------- */
.fh-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fh-stack--lg {
    gap: 28px;
}

.fh-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.fh-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(240px, 1fr)
        );
    gap: 18px;
}

.fh-two-column {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.72fr);
    gap: 24px;
}

.fh-muted {
    color: var(--fh-text-muted);
}

.fh-eyebrow {
    margin: 0 0 7px;

    color: var(--fh-primary);

    font-size: 0.76rem;
    font-weight: 720;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.fh-pre-wrap {
    white-space: pre-wrap;
}

.fh-divider {
    width: 100%;
    height: 1px;

    margin-block: 8px;

    border: 0;
    background: var(--fh-border);
}

/* -------------------------------------------------- */
/* STATE / ACTION CARDS                                */
/* -------------------------------------------------- */
.fh-state-card {
    position: relative;

    overflow: hidden;

    padding: clamp(22px, 4vw, 30px);

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

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

.fh-state-card::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    content: "";

    background: var(--fh-primary);
}

.fh-state-card--success::before {
    background: var(--fh-success);
}

.fh-state-card--warning::before {
    background: var(--fh-warning);
}

.fh-state-card--danger::before {
    background: var(--fh-danger);
}

.fh-state-card--info::before {
    background: var(--fh-info);
}

.fh-state-card__header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
}

.fh-state-card__icon {
    display: inline-flex;

    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: var(--fh-primary-soft);
    color: var(--fh-primary);
}

.fh-state-card__title {
    margin-bottom: 6px;

    font-size: 1.25rem;
}

.fh-state-card__description {
    max-width: 680px;
    margin-bottom: 0;

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

.fh-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    margin-top: 20px;
}

/* -------------------------------------------------- */
/* RESULT / SUCCESS SCREEN                             */
/* -------------------------------------------------- */
.fh-result {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding-block: 14px;

    text-align: center;
}

.fh-result__icon {
    display: inline-flex;

    width: 64px;
    height: 64px;

    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 20px;

    background: var(--fh-success-soft);
    color: var(--fh-success);
}

.fh-result--danger .fh-result__icon {
    background: var(--fh-danger-soft);
    color: var(--fh-danger);
}

.fh-result--warning .fh-result__icon {
    background: var(--fh-warning-soft);
    color: var(--fh-warning);
}

.fh-result__title {
    margin-bottom: 8px;

    font-size: 1.5rem;
}

.fh-result__description {
    max-width: 460px;
    margin-bottom: 22px;

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

/* -------------------------------------------------- */
/* RESPONSIVE 2                                       */
/* -------------------------------------------------- */
@media (max-width: 850px) {
.fh-two-column {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------- */
/* ACTION / FEATURE PANELS                             */
/* -------------------------------------------------- */
.fh-feature-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.fh-feature-card {
    padding: clamp(20px, 4vw, 28px);

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

    background: var(--fh-surface);

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

.fh-feature-card__header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 20px;
}

.fh-feature-card__heading {
    min-width: 0;
}

.fh-feature-card__icon {
    display: inline-flex;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: var(--fh-primary-soft);
    color: var(--fh-primary);
}

.fh-feature-card__icon--success {
    background: var(--fh-success-soft);
    color: var(--fh-success);
}

.fh-feature-card__icon--warning {
    background: var(--fh-warning-soft);
    color: var(--fh-warning);
}

.fh-feature-card__icon--danger {
    background: var(--fh-danger-soft);
    color: var(--fh-danger);
}

.fh-feature-title {
    margin-bottom: 7px;

    font-size: 1.35rem;
}

.fh-feature-description {
    max-width: 700px;
    margin-bottom: 0;

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

.fh-action-row {
    display: flex;
    flex-wrap: wrap;

    align-items: center;
    gap: 10px;

    margin-top: 20px;
}

.fh-file-input {
    padding: 9px;

    border: 1px dashed var(--fh-border-strong);
    border-radius: 11px;

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

/* -------------------------------------------------- */
/* RESPONSIVE FEATURE                                  */
/* -------------------------------------------------- */
@media (max-width: 700px) {
.fh-feature-card__header {
        flex-direction: column-reverse;
    }

.fh-action-row {
        align-items: stretch;
        flex-direction: column;
    }

.fh-action-row .fh-button {
        width: 100%;
    }
}

/* LOAD MORE */
.fh-load-more {
    display: flex;

    flex-direction: column;

    align-items: center;
    gap: 10px;

    margin-top: 18px;
}

.fh-load-more__status {
    color:
        var(--fh-text-muted);

    font-size: 0.8rem;
}

.fh-stat-card {
    display: flex;

    min-height: 130px;

    flex-direction: column;

    justify-content:
        space-between;

    padding: 18px;

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

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

    background:
        var(--fh-surface);

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

.fh-stat-card__label {
    color:
        var(--fh-text-muted);

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

.fh-stat-card__value {
    margin-block: 7px;

    color:
        var(--fh-text);

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.25rem
        );

    line-height: 1;

    letter-spacing:
        -0.045em;
}

.fh-stat-card__hint {
    color:
        var(--fh-text-muted);

    font-size: 0.73rem;
}

/* EMPTY */
.fh-empty-state {
    padding:
        42px 24px;

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

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

    background:
        var(--fh-surface);

    text-align: center;
}

.fh-empty-state__title {
    margin-bottom: 6px;
}

.fh-empty-state__description {
    margin: 0;

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

.fh-result__icon--warning {
    background: var(--fh-warning-soft);

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

.fh-result__icon--danger {
    background: var(--fh-danger-soft);

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

.fh-result__actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: center;
    gap: 10px;

    margin-top: 8px;
}

@media (max-width: 620px) {
.fh-result__actions {
        align-items: stretch;

        flex-direction: column;
    }

.fh-result__actions .fh-button {
        width: 100%;
    }
}


/* -------------------------------------------------- */
/* LEGAL FOOTER                                       */
/* -------------------------------------------------- */

.fh-legal-footer {
    margin-top: 36px;

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

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

.fh-legal-footer__inner {
    display: flex;
    flex-wrap: wrap;

    width:
        min(
            calc(100% - 32px),
            1180px
        );

    align-items: center;
    justify-content: space-between;

    gap:
        12px 20px;

    margin:
        0 auto;

    padding:
        18px 0
        calc(
            18px
            + env(
                safe-area-inset-bottom
            )
        );

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

    font-size:
        0.8rem;
}

.fh-legal-footer__links {
    display: flex;
    flex-wrap: wrap;

    gap:
        8px 16px;
}

.fh-legal-footer a {
    color:
        inherit;

    text-decoration:
        underline;

    text-underline-offset:
        2px;
}

.fh-legal-footer a:hover {
    color:
        var(--fh-text);
}

@media (
    max-width:
        640px
) {
    .fh-legal-footer__inner {
        align-items:
            flex-start;

        flex-direction:
            column;
    }
}