:root {
    color-scheme: light;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #f3f4f6;
    color: #1f2937;
}

body.is-user-settings-open {
    overflow: hidden;
}

body.is-confirm-dialog-open {
    overflow: hidden;
}

body.is-wizard-open {
    overflow: hidden;
}

.login-page,
.dashboard-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 20px;
}

.card {
    width: min(1120px, 100%);
    min-height: 730px;
    background: #ffffff;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.08);
}

.panel {
    padding: 48px;
}

.form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.system-logo {
    width: min(360px, 100%);
    height: auto;
    margin-bottom: 20px;
    align-self: center;
}

.form-panel h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 2rem;
}

.subtitle {
    margin: 0 0 22px;
    color: #6b7280;
    font-size: 1.06rem;
    line-height: 1.6;
}

.alert {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #fecaca;
    background: linear-gradient(180deg, #fff7f7 0%, #fef2f2 100%);
    color: #991b1b;
    font-size: 0.94rem;
    font-weight: 600;
    box-shadow: 0 14px 24px rgba(127, 29, 29, 0.08);
}

.alert.success {
    background: linear-gradient(180deg, #f7fff9 0%, #f0fdf4 100%);
    border-color: #bbf7d0;
    color: #166534;
    box-shadow: 0 14px 24px rgba(22, 101, 52, 0.08);
}

.toast-container {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
}

.toast {
    max-width: min(420px, calc(100vw - 36px));
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.08);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.toast-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.toast-container--centered {
    left: 50%;
    right: auto;
    bottom: 22px;
    transform: translateX(-50%);
    width: min(100%, calc(100vw - 32px));
    display: flex;
    justify-content: center;
}

.toast--family-flow {
    max-width: min(560px, calc(100vw - 32px));
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 0.98rem;
    text-align: center;
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.12);
}

/* ── Alert com countdown ────────────────────────────────────── */
.familia-modal__countdown {
    height: 5px;
    background: #fee2e2;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    margin: -28px -28px 22px;
}

.familia-modal__countdown-bar {
    height: 100%;
    background: linear-gradient(90deg, #b91c1c, #ef4444);
    transform-origin: left;
    animation: calert-countdown linear forwards;
    animation-play-state: paused;
}

@keyframes calert-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

.familia-modal__warning--lg {
    padding: 16px 18px;
    font-size: 1rem;
    line-height: 1.55;
    gap: 14px;
    align-items: flex-start;
}

.familia-modal__warning--lg svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Login ──────────────────────────────────────────────────── */
.login-form {
    display: grid;
    gap: 12px;
    width: min(500px, 100%);
}

.forgot-link,
.back-login-link a {
    font-size: 0.9rem;
    color: #374151;
    text-decoration: none;
}

.forgot-link {
    justify-self: start;
    margin-bottom: 2px;
}

.forgot-link:hover,
.back-login-link a:hover {
    text-decoration: underline;
}

.login-form label {
    font-size: 1rem;
    color: #374151;
}

.login-form input,
.admin-form input,
.admin-form select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 13px 14px;
    font-size: 0.98rem;
    background: #ffffff;
    color: #111827;
}

.login-form input {
    min-height: 48px;
}

.password-field {
    position: relative;
    width: 100%;
}

.password-field input {
    padding-right: 56px;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    margin: 0;
    background: transparent;
    color: #374151;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 160ms ease;
    line-height: 0;
}

.login-form .toggle-password {
    margin-top: 0;
    padding: 0;
    font-size: 0;
    background: transparent;
    color: #374151;
    filter: none;
}

.login-form .toggle-password:hover {
    filter: none;
}

.toggle-password:hover {
    transform: translateY(-50%) scale(1.03);
}

.toggle-password:focus {
    outline: 2px solid #c7d2fe;
    outline-offset: 1px;
}

.toggle-password .eye {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 160ms ease, transform 160ms ease;
}

.toggle-password .eye svg {
    width: 20px;
    height: 20px;
}

.toggle-password .eye-closed {
    opacity: 1;
    transform: scale(1);
}

.toggle-password.is-open .eye-closed {
    opacity: 0;
    transform: scale(0.92);
}

.toggle-password.is-open .eye-open {
    opacity: 1;
    transform: scale(1);
}

.admin-form .password-field,
.inline-form .password-field {
    width: 100%;
}

.admin-form .password-field input,
.inline-form .password-field input {
    width: 100%;
    padding-right: 56px;
}

.admin-form .toggle-password,
.inline-form .toggle-password {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    margin-top: 0;
    padding: 0;
    background: transparent;
    color: #111827;
    filter: none;
}

.admin-form .toggle-password:hover,
.inline-form .toggle-password:hover {
    background: transparent;
    color: #111827;
    filter: none;
}

.login-form select {
    min-height: 48px;
}

.login-form select:focus,
.login-form input:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-search-form input:focus,
.admin-search-form select:focus,
.inline-form input:focus,
.inline-form select:focus {
    outline: 2px solid #c7d2fe;
    outline-offset: 1px;
    border-color: #93c5fd;
}

.login-form button,
.dashboard-card button {
    margin-top: 8px;
    border: 0;
    border-radius: 8px;
    padding: 13px 16px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
}

.login-form button:hover,
.dashboard-card button:hover,
.inline-form button:hover {
    filter: brightness(1.05);
}

.image-panel {
    background: #eef2ff;
    display: block;
    padding: 0;
}

.image-panel img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dashboard-card {
    width: min(520px, 100%);
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
}

.forgot-card {
    width: min(560px, 100%);
}

.back-login-link {
    margin-top: 14px;
}

.admin-card {
    width: min(1240px, 100%);
    padding: clamp(18px, 2.4vw, 30px);
    background:
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.34), transparent 26%),
        linear-gradient(180deg, #fcfdff 0%, #f8fafc 100%);
    border: 1px solid rgba(209, 213, 219, 0.9);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-header h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

.admin-header p {
    margin: 0;
    color: #4b5563;
    line-height: 1.5;
}

.admin-scope-badge {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 220px;
    display: grid;
    gap: 3px;
}

.admin-scope-badge span {
    color: #4b5563;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-scope-badge strong {
    color: #111827;
    font-size: 0.95rem;
}

.admin-panel {
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    padding: clamp(16px, 2vw, 22px);
    background: #ffffff;
    margin-bottom: 20px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.admin-panel h2 {
    margin: 0 0 10px;
    font-size: 1.08rem;
    color: #0f172a;
}

.admin-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.admin-panel__header--split {
    align-items: center;
}

.admin-panel__header .subtitle {
    margin-bottom: 0;
}

.admin-search-shell {
    background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-search-form {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 0.8fr) auto;
    gap: 14px 18px;
    align-items: end;
}

.admin-search-form__field {
    display: grid;
    gap: 6px;
}

.admin-search-form__field label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.admin-search-form__field input,
.admin-search-form__field select {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 13px 14px;
    font-size: 0.98rem;
    background: #ffffff;
    color: #111827;
}

.admin-search-form__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    margin-top: 2px;
}

/* Empurra "Novo usuário" para a direita */
.admin-search-form__actions .admin-button:last-child {
    margin-left: auto;
}

.admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.admin-button:hover {
    filter: brightness(0.95);
}

.admin-button--primary {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.18);
}

.admin-button--accent {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
}

.admin-button--ghost {
    border-color: #dbe4f0;
    background: #ffffff;
    color: #475569;
}

.admin-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    margin-bottom: 0;
}

.admin-field {
    display: grid;
    gap: 6px;
    align-content: start;
}

.admin-field--full {
    grid-column: span 2;
}

.admin-field label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #374151;
}

.scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1f2937;
}

.scope-toggle input {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}

.scope-toggle--inline {
    align-self: end;
    min-height: 40px;
    padding-bottom: 6px;
    white-space: nowrap;
}

.admin-field input,
.admin-field select {
    min-height: 46px;
}

.roles-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.role-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d5deea;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.8rem;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.js-scope-checkboxes {
    gap: 8px;
}

.js-scope-option {
    min-height: 42px;
    padding: 7px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.2;
}

.js-scope-option span {
    display: inline-flex;
    align-items: center;
}

.js-scope-option.is-hidden {
    display: none !important;
}

.role-option input {
    margin: 0;
    accent-color: #2563eb;
}

.role-option:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.inline-roles {
    margin: 0;
}

.admin-static-text {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
}

.admin-status-chip {
    display: inline-grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    min-width: 84px;
    min-height: 30px;
    padding: 8px 12px 10px;
    border-radius: 18px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #15803d;
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.admin-status-chip::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.12);
}

.admin-status-chip--blocked {
    color: #be123c;
    background: linear-gradient(180deg, #fff5f5 0%, #fff1f2 100%);
    border: 1px solid #fecdd3;
}

.admin-status-chip--blocked::after {
    box-shadow: 0 0 0 4px rgba(190, 18, 60, 0.12);
}

.admin-status-chip--button {
    border-radius: 18px;
    cursor: pointer;
    appearance: none;
    text-align: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.admin-status-chip--button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.catalog-status-form {
    margin: 0;
}

.admin-form-actions {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.admin-form-actions button {
    border: 0;
    border-radius: 12px;
    padding: 13px 18px;
    background: #1d4ed8;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(29, 78, 216, 0.18);
}

.users-table-wrapper {
    overflow: clip;
    margin-bottom: 16px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}

.users-table th,
.users-table td {
    text-align: left;
    border-bottom: 1px solid #e8eef5;
    padding: 14px 12px;
    font-size: 0.92rem;
    vertical-align: top;
}

.users-table thead th {
    background: #f8fbff;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    white-space: nowrap;
}

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

.users-table__primary {
    display: block;
    color: #0f172a;
    font-size: 0.94rem;
}

.users-table__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.admin-role-chip--admin {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #4f46e5;
}

.admin-role-chip--gestor_geral {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #0f766e;
}

.admin-role-chip--gestor_polo {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #b45309;
}

.admin-role-chip--tecnico_superior,
.admin-role-chip--usuario_superior {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

.admin-role-chip--tecnico_medio,
.admin-role-chip--usuario_medio,
.admin-role-chip--usuario_basico,
.admin-role-chip--default {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.users-table__status {
    text-align: center !important;
    vertical-align: middle !important;
}

.users-table__status .admin-status-chip {
    margin: 0 auto;
}

.users-table__actions {
    width: 140px;
    text-align: right !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

.user-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    vertical-align: middle;
}

.user-row-actions__hidden-form {
    display: none !important;
}

/* Botão-texto de ação na linha da tabela */
.user-action-button,
.user-settings-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    font-size: 0.76rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    vertical-align: middle;
}

.user-action-button svg,
.user-settings-trigger svg {
    width: 13px;
    height: 13px;
    display: block;
    flex-shrink: 0;
}

.user-action-button:hover,
.user-settings-trigger:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.user-action-button--danger {
    color: #991b1b;
    border-color: #fca5a5;
    background: #fff5f5;
}

.user-action-button--danger:hover {
    background: #fee2e2;
    border-color: #f87171;
}

.user-action-button--success {
    color: #065f46;
    border-color: #6ee7b7;
    background: #f0fdf4;
}

.user-action-button--success:hover {
    background: #d1fae5;
    border-color: #34d399;
}

.user-action-button--blocked {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.user-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
}

.user-settings-modal.is-open {
    display: block;
}

.user-settings-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(4px);
}

.user-settings-modal__card {
    position: relative;
    width: min(760px, calc(100vw - 28px));
    max-height: min(88vh, 860px);
    margin: 5vh auto;
    overflow: auto;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid #dbe4f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.28);
}

.user-settings-modal__card--wide {
    width: min(980px, calc(100vw - 28px));
}

.user-settings-modal__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.user-settings-modal__header h3 {
    margin: 0 0 6px;
    color: #0f172a;
}

.user-settings-modal__header p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

.user-settings-modal__close {
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 700;
    cursor: pointer;
}

.user-settings-modal__body {
    display: grid;
    gap: 22px;
}

.user-settings-form {
    margin-bottom: 0;
    padding: 16px;
    border: 1px solid #dbe4f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.user-settings-form__grid {
    grid-template-columns: 1fr;
}

.user-settings-form__project-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.user-settings-form .admin-field--full label,
.user-settings-form .admin-field label {
    color: #0f172a;
}

.user-settings-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.user-settings-modal__actions button {
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    background: #1d4ed8;
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.user-settings-modal__actions .entity-button {
    border-radius: 12px;
    padding: 12px 16px;
}

.user-settings-modal__actions .entity-button--primary {
    background: #1d4ed8;
    color: #ffffff;
    border: 1px solid #1d4ed8;
}

.user-settings-modal__actions .entity-button--secondary {
    background: #eef2ff;
    color: #1f2937;
    border: 1px solid #c7d2fe;
}

.user-settings-modal__actions .entity-button--ghost {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.user-settings-modal__hint {
    margin: 6px 0 0;
    color: #9f1239;
    font-size: 0.9rem;
    font-weight: 600;
}

.user-settings-form__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.user-settings-form__fieldset[disabled] {
    opacity: 0.78;
}

.user-settings-danger {
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    margin-top: -2px;
}

.user-settings-danger button {
    background: #7f1d1d;
}

.user-settings-danger small {
    color: #7c2d12;
}

.inline-form {
    display: grid;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.inline-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 8px;
}

.inline-form input,
.inline-form select {
    border: 1px solid #d1dae6;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.85rem;
    min-height: 40px;
}

.inline-form button {
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #1d4ed8;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 700;
}

.inline-form-delete {
    grid-template-columns: auto;
}

.inline-form-delete button {
    justify-self: start;
}

.inline-form button:disabled,
.inline-form select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.users-table small {
    color: #6b7280;
    font-size: 0.75rem;
}

.admin-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-list-controls {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #f8fbff;
}

.admin-list-controls label,
.admin-list-controls span {
    color: #4b5563;
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-list-controls select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.86rem;
}

.admin-actions a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.admin-actions a:hover {
    text-decoration: underline;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    background: #dfdfdf !important;
    --sidebar-width: clamp(230px, 20vw, 280px);
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 var(--sidebar-width), transparent var(--sidebar-width)),
        #dfdfdf !important;
}

.app-sidebar {
    width: clamp(230px, 20vw, 280px);
    max-height: 100vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.95);
    border-right: 1px solid #e5e7eb;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    align-self: flex-start;
}

.app-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px 14px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 4px;
    text-decoration: none;
}

.app-brand:hover {
    opacity: 0.92;
}

.app-brand-name {
    height: clamp(36px, 3.5vw, 52px);
    width: auto;
    max-width: 100%;
}

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    flex: 1;
    overflow: visible;
}

.app-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.3;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.app-nav-item:hover {
    background: #f5f7fb;
    transform: translateX(2px);
}

.app-nav-item.is-active {
    background: #eef2ff;
    color: #111827;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px #c7d2fe;
}

.app-nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #6b7280;
    flex-shrink: 0;
}

.app-nav-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.app-nav-item:hover .app-nav-icon {
    color: #374151;
}

.app-nav-item.is-active .app-nav-icon {
    color: #2563eb;
    background: transparent;
}

.app-nav-label {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.app-nav-item.is-wip {
    color: #b0b8c4;
}

.app-nav-item.is-wip .app-nav-icon {
    color: #c4cdd6;
}

.app-nav-item.is-wip:hover {
    color: #6b7280;
}

.app-nav-item.is-wip:hover .app-nav-icon {
    color: #9ca3af;
}

.app-nav-wip-badge {
    font-size: 0.72em;
    line-height: 1;
    opacity: 0.8;
    flex-shrink: 0;
}

.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-topbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 24px;
    position: relative;
    z-index: 40;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    backdrop-filter: blur(12px);
}

.app-topbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #374151;
    font-size: 1.02rem;
    flex-wrap: wrap;
}

.app-location {
    color: #6b7280;
}

.app-divider {
    color: #9ca3af;
}

.app-user-menu {
    position: relative;
    z-index: 41;
    margin-left: auto;
}

.app-user-menu summary {
    list-style: none;
}

.app-user-menu summary::-webkit-details-marker {
    display: none;
}

.app-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    user-select: none;
}

.app-user:hover,
.app-user-menu[open] .app-user {
    border-color: #c7d2fe;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.app-user-text {
    text-align: right;
}

.app-user-name {
    font-weight: 600;
    color: #111827;
    font-size: 1rem;
}

.app-user-role {
    color: #166534;
    font-size: 0.88rem;
}

.app-user-chevron {
    color: #6b7280;
    font-size: 0.88rem;
    transition: transform 0.2s ease;
}

.app-user-menu[open] .app-user-chevron {
    transform: rotate(180deg);
}

.app-user-preview,
.app-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(290px, calc(100vw - 24px));
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
    display: none;
    z-index: 42;
}

.app-user-preview {
    width: min(250px, calc(100vw - 24px));
    padding: 12px 14px;
    gap: 3px;
}

.app-user-menu:hover .app-user-preview,
.app-user-menu:focus-within .app-user-preview {
    display: grid;
}

.app-user-menu[open] .app-user-preview {
    display: none;
}

.app-user-menu[open] .app-user-dropdown,
.app-user-menu:focus-within[open] .app-user-dropdown {
    display: block;
}

.app-user-preview strong,
.app-user-dropdown-info strong {
    font-size: 0.96rem;
    color: #111827;
}

.app-user-preview span,
.app-user-preview small,
.app-user-dropdown-info span,
.app-user-dropdown-info small {
    color: #6b7280;
    font-size: 0.84rem;
}

.app-user-dropdown-info {
    display: grid;
    gap: 4px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.app-user-dropdown-actions {
    display: grid;
    gap: 8px;
}

.app-user-dropdown-actions form {
    margin: 0;
}

.app-user-action {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.app-user-action--danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.app-user-action--disabled {
    border-color: #d1d5db;
    background: #e5e7eb;
    color: #4b5563;
    cursor: not-allowed;
}

.app-page {
    padding: 28px 24px;
    width: 100%;
    max-width: 1200px;
}

.app-page--dashboard {
    max-width: none;
}

.app-page--wide {
    max-width: none;
}

.app-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.9fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 24px;
}

.app-hero--dashboard {
    grid-template-columns: minmax(0, 1.2fr) minmax(500px, 1fr);
}

.app-hero-copy {
    background: #ffffff;
    color: #111827;
    border: 1px solid #dbe4f0;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.app-hero-copy--dashboard {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.16);
}

.app-hero-copy--config {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #dbe4f0;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.app-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

.app-hero-badge--config {
    background: #e0e7ff;
    color: #334155;
}

.app-page-icon {
    display: none;
}

.app-hero-subtitle {
    color: #475569;
    font-size: 1rem;
    max-width: 60ch;
}

.app-hero-copy--dashboard .app-hero-subtitle {
    color: rgba(255, 255, 255, 0.88);
}

.app-dashboard-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.app-dashboard-hero-copyblock {
    min-width: 0;
}

.app-dashboard-hero-aside {
    min-width: 200px;
    max-width: 240px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 6px;
    backdrop-filter: blur(8px);
}

.app-dashboard-hero-aside__label {
    color: rgba(219, 234, 254, 0.92);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-dashboard-hero-aside strong {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1;
    color: #ffffff;
}

.app-dashboard-hero-aside small {
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.45;
}

.app-dashboard-hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.app-dashboard-hero-highlight {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    gap: 6px;
}

.app-dashboard-hero-highlight__label {
    color: rgba(219, 234, 254, 0.92);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-dashboard-hero-highlight strong {
    color: #ffffff;
    font-size: 1.15rem;
    line-height: 1.2;
}

.app-dashboard-hero-highlight small {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.45;
}

.app-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.app-summary-grid--dashboard {
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-summary-card {
    border-radius: 22px;
    padding: 18px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    border: 1px solid #dbe3f0;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 152px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.app-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(37, 99, 235, 0.10);
    border-color: #c7d2fe;
}

.app-summary-card--primary {
    background: linear-gradient(145deg, #eef4ff 0%, #ffffff 100%);
}

.app-summary-card--success {
    background: linear-gradient(145deg, #edfdf5 0%, #ffffff 100%);
}

.app-summary-card--warning {
    background: linear-gradient(145deg, #fff7ed 0%, #ffffff 100%);
}

.app-summary-card--neutral {
    background: linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
}

.app-summary-card--wide {
    grid-column: 1 / -1;
    min-height: 124px;
    align-items: center;
}

.app-summary-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-summary-card__icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-summary-card--primary .app-summary-card__icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.app-summary-card--success .app-summary-card__icon {
    background: #dcfce7;
    color: #15803d;
}

.app-summary-card--warning .app-summary-card__icon {
    background: #ffedd5;
    color: #c2410c;
}

.app-summary-card--neutral .app-summary-card__icon {
    background: #e2e8f0;
    color: #334155;
}

.app-summary-card__body {
    display: grid;
    gap: 6px;
    min-width: 0;
    align-self: stretch;
    align-content: start;
}

.app-summary-label {
    color: #6b7280;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.app-summary-value {
    color: #111827;
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    line-height: 1.05;
}

.app-summary-value--text {
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    line-height: 1.25;
    max-width: 18ch;
    word-break: break-word;
}

.app-summary-hint {
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: 28ch;
}

.app-summary-card--wide .app-summary-hint {
    max-width: none;
}

.app-summary-card--wide .app-summary-card__body {
    align-content: center;
}

.app-hero-badge--dashboard {
    background: rgba(255, 255, 255, 0.16);
    color: #dbeafe;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.app-dashboard-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.app-dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
}

.app-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
}

.app-dashboard-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.app-dashboard-grid--split > .app-dashboard-card {
    height: 100%;
}

.app-dashboard-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 18px;
}

.app-dashboard-card--accent {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.app-dashboard-card--bootstrap {
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

.app-dashboard-card--full {
    width: 100%;
}

.app-dashboard-card--chart {
    overflow: hidden;
}

.app-dashboard-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}

.app-dashboard-card__headline {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.app-dashboard-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    color: #1d4ed8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    flex-shrink: 0;
}

.app-dashboard-card__icon--alt {
    background: linear-gradient(135deg, #e0f2fe 0%, #ecfeff 100%);
    color: #0891b2;
}

.app-dashboard-card__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-dashboard-card__header h2 {
    margin: 4px 0 0;
    font-size: 1.15rem;
    color: #111827;
}

.app-dashboard-card__meta {
    display: block;
    margin-top: 8px;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.app-dashboard-card__eyebrow {
    display: inline-block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-dashboard-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.app-dashboard-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.app-dashboard-kpi-pill {
    border-radius: 18px;
    padding: 14px 15px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #d9e2ef;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    display: grid;
    gap: 4px;
}

.app-dashboard-kpi-pill span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-dashboard-kpi-pill strong {
    color: #0f172a;
    font-size: 1.15rem;
}

.app-dashboard-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.app-dashboard-status-card {
    border: 1px solid #e6edf5;
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: grid;
    gap: 12px;
}

.app-dashboard-status-card__top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.app-dashboard-status-card__top strong,
.app-dashboard-status-card__top b {
    color: #0f172a;
}

.app-dashboard-status-card__top strong {
    display: block;
    font-size: 0.96rem;
    margin-bottom: 6px;
}

.app-dashboard-status-card__top span {
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.45;
}

.app-dashboard-status-card__top b {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.app-dashboard-status-card__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-dashboard-metric-list {
    display: grid;
    gap: 12px;
}

.app-dashboard-metric-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.app-dashboard-metric-row strong {
    color: #111827;
}

.app-dashboard-metric-row span {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.45;
}

.app-dashboard-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #e9ecef;
    overflow: hidden;
}

.app-dashboard-progress__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.app-dashboard-progress__bar--alert {
    background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
}

.app-dashboard-progress__bar--warning {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.app-dashboard-note-list {
    display: grid;
    gap: 10px;
}

.app-dashboard-note {
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #334155;
    line-height: 1.45;
    font-size: 0.92rem;
}

.app-dashboard-ranking {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
}

.app-dashboard-ranking-summary {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border: 1px solid #e6edf5;
}

.app-dashboard-ranking-summary__ring {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #ffffff 0 56%, transparent 57%),
        conic-gradient(#2563eb 0 var(--fill, 72%), #dbe7f5 var(--fill, 72%) 100%);
    display: grid;
    place-items: center;
}

.app-dashboard-ranking-summary__ring > div {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.app-dashboard-ranking-summary__ring strong {
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1;
}

.app-dashboard-ranking-summary__ring span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.app-dashboard-ranking-summary__body {
    display: grid;
    gap: 8px;
}

.app-dashboard-ranking-summary__label {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.app-dashboard-ranking-summary__body strong {
    color: #0f172a;
    font-size: 1.15rem;
    line-height: 1.25;
}

.app-dashboard-ranking-summary__body small {
    color: #64748b;
    line-height: 1.5;
}

.app-dashboard-ranking__item {
    display: grid;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #eef2f7;
}

.app-dashboard-ranking__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.app-dashboard-ranking__meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    flex-wrap: wrap;
}

.app-dashboard-ranking__meta strong {
    color: #0f172a;
    font-size: 0.96rem;
}

.app-dashboard-ranking__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-dashboard-ranking__index {
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #e7f1ff;
    color: #0d6efd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.app-dashboard-ranking__meta span {
    color: #64748b;
    font-size: 0.88rem;
}

.app-dashboard-shortcuts {
    display: grid;
    gap: 12px;
}

.app-dashboard-shortcut {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.app-dashboard-shortcut:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.08);
    border-color: #c7d2fe;
}

.app-dashboard-shortcut__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #e0ecff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-dashboard-shortcut__icon svg {
    width: 18px;
    height: 18px;
}

.app-dashboard-shortcut__body {
    display: grid;
    gap: 4px;
}

.app-dashboard-shortcut__body strong {
    color: #111827;
    font-size: 0.95rem;
}

.app-dashboard-shortcut__body small {
    color: #64748b;
    line-height: 1.45;
    font-size: 0.85rem;
}

.app-dashboard-empty {
    padding: 18px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    line-height: 1.5;
}

.app-executive-dashboard {
    display: grid;
    gap: 20px;
}

.app-executive-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.app-executive-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 118px;
    padding: 18px 18px 18px 20px;
    border-radius: 22px;
    border: 1px solid #e7edf5;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.app-executive-stat-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--accent, #2563eb);
}

.app-executive-stat-card:hover {
    transform: translateY(-2px);
    border-color: #d6e2f1;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.09);
}

.app-executive-stat-card--green {
    --accent: #22c55e;
    --accent-soft: #e8faef;
    --accent-text: #16a34a;
}

.app-executive-stat-card--blue {
    --accent: #2563eb;
    --accent-soft: #eaf1ff;
    --accent-text: #2563eb;
}

.app-executive-stat-card--indigo {
    --accent: #4f46e5;
    --accent-soft: #ede9fe;
    --accent-text: #4f46e5;
}

.app-executive-stat-card--cyan {
    --accent: #0ea5e9;
    --accent-soft: #e0f7ff;
    --accent-text: #0284c7;
}

.app-executive-stat-card--emerald {
    --accent: #16a34a;
    --accent-soft: #e8faef;
    --accent-text: #15803d;
}

.app-executive-stat-card--orange {
    --accent: #f97316;
    --accent-soft: #fff0e5;
    --accent-text: #ea580c;
}

.app-executive-stat-card__icon {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--accent-soft, #eef2ff);
    color: var(--accent-text, #2563eb);
}

.app-executive-stat-card__icon svg,
.app-executive-panel-card__info svg,
.app-executive-growth-card__icon svg,
.app-executive-health-item__icon svg,
.app-executive-metric-row__icon svg,
.app-executive-alert-card__icon svg,
.app-executive-info-card__icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-executive-stat-card__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.app-executive-stat-card__label {
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-executive-stat-card__value {
    color: #0f172a;
    font-size: clamp(1.7rem, 2vw, 2.35rem);
    line-height: 1;
}

.app-executive-stat-card__meta {
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.35;
}

.app-executive-dashboard__grid {
    display: grid;
    gap: 20px;
}

.app-executive-dashboard__grid--top {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
}

.app-executive-dashboard__grid--bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.app-executive-panel-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid #e7edf5;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.app-executive-panel-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.app-executive-panel-card__eyebrow {
    display: inline-block;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.app-executive-panel-card__title {
    margin: 6px 0 4px;
    color: #0f172a;
    font-size: 1.05rem;
}

.app-executive-panel-card__description {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.app-executive-panel-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.app-executive-panel-card__info {
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: #f8fafc;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.app-executive-panel-card__info:hover,
.app-executive-panel-card__info:focus-visible {
    background: #eef4ff;
    color: #2563eb;
    transform: translateY(-1px);
    outline: none;
}

.app-executive-health-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.app-executive-health-item {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.app-executive-health-item:hover,
.app-executive-health-item:focus-visible {
    transform: translateY(-2px);
    border-color: #d8e3f3;
    background: #fbfdff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.06);
    outline: none;
}

.app-executive-health-item__icon {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-executive-health-item__icon--green {
    background: #e7f9ee;
    color: #16a34a;
}

.app-executive-health-item__icon--mint {
    background: #ecfdf5;
    color: #22c55e;
}

.app-executive-health-item__icon--blue {
    background: #eef2ff;
    color: #3b82f6;
}

.app-executive-health-item__icon--orange {
    background: #fff4eb;
    color: #f97316;
}

.app-executive-health-item strong {
    color: #0f172a;
    font-size: 2rem;
    line-height: 1;
}

.app-executive-health-item h3 {
    margin: 0;
    color: #111827;
    font-size: 0.98rem;
}

.app-executive-health-item p {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.55;
}

.app-executive-health-item__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eefbf1;
    color: #16a34a;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-executive-growth-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.2fr);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid #e9f3ec;
    background: linear-gradient(135deg, #f4fcf7 0%, #fcfffd 100%);
}

.app-executive-growth-card__primary,
.app-executive-growth-card__secondary {
    padding: 28px 24px;
}

.app-executive-growth-card__primary {
    display: flex;
    align-items: center;
    gap: 18px;
    border-right: 1px solid #e5f0e7;
}

.app-executive-growth-card__icon {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8faef;
    color: #16a34a;
    flex-shrink: 0;
}

.app-executive-growth-card__primary strong {
    display: block;
    color: #0f172a;
    font-size: 3rem;
    line-height: 0.95;
}

.app-executive-growth-card__primary p {
    margin: 10px 0 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.45;
    max-width: 14ch;
}

.app-executive-growth-card__secondary {
    display: grid;
    align-content: center;
    gap: 10px;
}

.app-executive-growth-card__secondary strong {
    color: #1f2937;
    font-size: 1.2rem;
}

.app-executive-growth-card__secondary span {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.45;
}

.app-executive-growth-card__sparkline {
    width: 100%;
    height: 70px;
    margin-top: 8px;
}

.app-executive-growth-card__sparkline polyline {
    fill: none;
    stroke: #7ad59a;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-executive-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.app-executive-kpi-box {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #e8edf5;
    background: #ffffff;
}

.app-executive-kpi-box span {
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.app-executive-kpi-box strong {
    color: #0f172a;
    font-size: 2rem;
    line-height: 1;
}

.app-executive-kpi-box small {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.45;
}

.app-executive-metric-stack {
    display: grid;
    gap: 12px;
}

.app-executive-metric-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
}

.app-executive-metric-row + .app-executive-metric-row {
    border-top: 1px solid #eef2f7;
    padding-top: 18px;
}

.app-executive-metric-row__icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-executive-metric-row__icon--green {
    background: #ecfdf5;
    color: #22c55e;
}

.app-executive-metric-row__icon--orange {
    background: #fff4eb;
    color: #f97316;
}

.app-executive-metric-row__content strong,
.app-executive-metric-row__stats strong {
    color: #111827;
}

.app-executive-metric-row__content strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 4px;
}

.app-executive-metric-row__content span,
.app-executive-metric-row__stats span {
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.45;
}

.app-executive-metric-row__stats {
    display: grid;
    justify-items: end;
    gap: 4px;
    text-align: right;
}

.app-executive-metric-row__stats strong {
    font-size: 1.25rem;
}

.app-dashboard-ranking--executive {
    grid-template-columns: 1fr;
    gap: 10px;
}

.app-dashboard-ranking--executive .app-dashboard-ranking__item {
    padding: 0;
    border-bottom: 0;
}

.app-dashboard-ranking--executive .app-dashboard-ranking__meta {
    margin-bottom: 8px;
}

.app-dashboard-ranking--executive .app-dashboard-progress {
    height: 8px;
    background: #e8eef7;
}

.app-dashboard-ranking--executive .app-dashboard-ranking__index {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

.app-executive-panel-card__footer-action {
    display: flex;
    justify-content: center;
}

.app-executive-ghost-button {
    border: 1px solid #d9e2ef;
    background: #ffffff;
    color: #374151;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: default;
}

.app-executive-dashboard__footer {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.app-executive-alert-card,
.app-executive-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    border-radius: 22px;
    border: 1px solid #e7edf5;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.app-executive-alert-card__icon,
.app-executive-info-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-executive-alert-card__icon {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    color: #ffffff;
}

.app-executive-info-card__icon--green {
    background: #ecfdf5;
    color: #22c55e;
}

.app-executive-info-card__icon--blue {
    background: #eef4ff;
    color: #2563eb;
}

.app-executive-info-card__icon--mint {
    background: #e8fbff;
    color: #0891b2;
}

.app-executive-alert-card__body strong,
.app-executive-info-card strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    margin-bottom: 5px;
}

.app-executive-alert-card__body p,
.app-executive-info-card p {
    margin: 0;
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.5;
}

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

.app-panel-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-panel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.10);
    border-color: #c7d2fe;
}

.app-panel-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.app-panel-body h2 {
    margin: 2px 0 6px;
    font-size: 1.05rem;
    color: #111827;
}

.app-panel-body p {
    margin: 0;
    color: #6b7280;
    line-height: 1.5;
    font-size: 0.94rem;
}

.app-page-heading {
    margin: 0 0 8px;
    font-size: clamp(1.7rem, 2.2vw, 2.2rem);
    color: #ffffff;
}

.entity-workspace {
    display: grid;
    gap: 18px;
}

.entity-form {
    display: grid;
    gap: 16px;
}

.entity-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.entity-card--hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
    gap: 18px;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.entity-card h2,
.entity-card h3,
.entity-card h4 {
    margin-top: 0;
    color: #111827;
}

.entity-card--embedded {
    margin-top: 18px;
}

.entity-card h2 {
    margin-bottom: 8px;
    font-size: 1.35rem;
}

.entity-card h3 {
    margin-bottom: 14px;
    font-size: 1.02rem;
}

.entity-card h4 {
    margin-bottom: 10px;
    font-size: 0.94rem;
}

.entity-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 12px;
}

.entity-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.entity-badge {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.88rem;
    font-weight: 600;
}

.entity-grid {
    display: grid;
    gap: 12px 14px;
}

.entity-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.entity-grid--four {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.entity-field {
    display: grid;
    gap: 6px;
}

.entity-field--span-2 {
    grid-column: span 2;
}

.entity-field label {
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-required-marker {
    color: #c62828;
    font-weight: 700;
}

.entity-field input,
.entity-field select,
.entity-field textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 11px 12px;
    min-height: 44px;
    background: #ffffff;
    color: #111827;
    font-size: 0.94rem;
}

.entity-field input,
.entity-field select {
    height: 44px;
}

.entity-field textarea {
    min-height: 120px;
    resize: vertical;
}

.entity-field.has-error label {
    color: #b42318;
}

.entity-field.has-error input,
.entity-field.has-error select,
.entity-field.has-error textarea {
    border-color: #d92d20;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.entity-field__error {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 0.82rem;
    font-weight: 600;
}

.form-error-summary__list {
    margin: 10px 0 0;
    padding-left: 18px;
}

.entity-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.entity-check-block {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.entity-check-block--compact {
    padding: 14px 16px 14px 12px;
}

.entity-check-block label,
.entity-check-inline label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #374151;
    font-size: 0.92rem;
    line-height: 1.45;
}

.entity-check-block label + label,
.entity-check-inline label + label {
    margin-top: 10px;
}

.entity-check-block--compact label {
    gap: 6px;
    align-items: center;
}

.entity-check-block--compact label + label {
    margin-top: 8px;
}

.entity-check-block--compact input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 14px;
}

.entity-check-inline {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.entity-check-inline label:has(#person_phone_toggle) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
}

.entity-check-inline #person_phone_toggle {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
}


.entity-toggle-group {
    margin-top: 6px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

.person-phone-fields {
    grid-template-columns: 1fr;
    gap: 16px;
}

.person-phone-fields .entity-field {
    max-width: calc(16ch + 0.6cm + 18px);
}

.entity-toggle-group .entity-field {
    min-width: 0;
}

.entity-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.entity-button {
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    background: #1d4ed8;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}

.entity-button--primary {
    background: #1d4ed8;
    color: #ffffff;
    border: 1px solid #1d4ed8;
}

.entity-button--secondary {
    background: #eef2ff;
    color: #1f2937;
    border: 1px solid #c7d2fe;
}

.entity-button--ghost {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.entity-button--danger {
    background: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
}
.entity-button:hover {
    filter: brightness(1.05);
}

.entity-empty-state {
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    display: grid;
    gap: 6px;
}

.entity-empty-state strong {
    color: #111827;
    font-size: 0.98rem;
}

.entity-empty-state span {
    color: #6b7280;
    font-size: 0.92rem;
    line-height: 1.5;
}

.entity-inline-note {
    margin: 0 0 14px;
    color: #1f2937;
    font-size: 0.92rem;
    font-weight: 600;
}

.person-address-grid {
    gap: 16px;
}

.person-address-grid + .person-address-grid {
    margin-top: 16px;
}

.person-address-field {
    min-width: 0;
}

.person-address-field label {
    min-height: 21px;
    display: flex;
    align-items: center;
}

.person-address-field input,
.person-address-field .entity-button {
    min-height: 44px;
}

.person-address-grid--lookup {
    grid-template-columns: minmax(88px, 96px) minmax(180px, 240px);
    align-items: end;
}

.person-address-field--lookup-action .entity-button {
    width: 100%;
    max-width: 240px;
    justify-content: center;
}

.person-address-grid--city {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.person-address-grid--street {
    grid-template-columns: minmax(0, 1fr);
}

.person-address-grid--details {
    grid-template-columns: minmax(180px, 1.25fr) minmax(180px, 1fr) minmax(180px, 1fr);
}

.person-address-field--number {
    min-width: 180px;
}

.entity-result-list {
    display: grid;
    gap: 14px;
}

.entity-result-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #dbe3f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.entity-result-card__main {
    min-width: 0;
}

.entity-result-card__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.entity-result-card__avatar {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.entity-result-card__content {
    display: grid;
    gap: 6px;
    min-width: 0;
    text-align: left;
    justify-items: start;
}

.entity-result-card strong {
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.entity-result-card span {
    color: #4b5563;
    font-size: 0.9rem;
}

.entity-result-card__family-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f2937;
    font-size: 0.92rem;
    font-weight: 600;
}

.entity-result-card__family-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
}

.entity-result-card__family-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entity-result-card__side {
    display: grid;
    justify-items: end;
    align-content: space-between;
    gap: 14px;
    min-width: 0;
}

.entity-result-card__topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.entity-result-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.entity-result-status--primary {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.entity-result-status--dependent {
    background: #e0f2fe;
    color: #0f5f8a;
    border: 1px solid #93c5fd;
}

.entity-result-status--neutral {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

.entity-result-card__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    align-self: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.entity-result-card__inline-form {
    margin: 0;
    display: inline-flex;
}

.entity-button__icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.entity-button__icon svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.entity-button--attendance {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff !important;
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.20);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #1d4ed8;
}

.entity-button--attendance:hover {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
}

.entity-button--attendance span,
.entity-button--attendance .entity-button__icon {
    color: inherit;
}

.entity-button--family-view {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    background: #f8fafc;
    border-color: #dbe3f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.entity-result-menu-trigger {
    position: static;
    width: 36px;
    height: 36px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}

.entity-result-menu-trigger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.entity-result-menu {
    position: absolute;
    right: 20px;
    top: 58px;
    width: min(320px, calc(100vw - 80px));
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    z-index: 2;
}

.entity-result-menu[hidden] {
    display: none;
}

.entity-result-menu-form {
    display: grid;
    gap: 6px;
}

.entity-result-menu-form label {
    font-size: 0.8rem;
    color: #374151;
    font-weight: 600;
}

.entity-result-menu-form input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.86rem;
}

.wizard-footer-actions .entity-button--primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
}

.entity-result-members {
    max-height: 132px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    display: grid;
    gap: 4px;
    background: #f9fafb;
}

.entity-result-members span {
    font-size: 0.82rem;
    color: #374151;
}

.entity-search-toolbar {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.entity-search-toolbar__size {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.entity-search-toolbar__size label {
    font-size: 0.85rem;
    color: #4b5563;
    font-weight: 600;
}

.entity-search-toolbar__size select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.88rem;
    background: #ffffff;
}

.entity-pagination {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.entity-pagination__meta,
.entity-pagination__page {
    color: #6b7280;
    font-size: 0.85rem;
}

.entity-pagination__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.entity-button.is-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.entity-launch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.entity-launch-card p {
    margin: 0;
    color: #4b5563;
    line-height: 1.55;
}
.wizard-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    min-height: 100vh;
    min-height: 100dvh;
    background: rgba(15, 23, 42, 0.36);
    backdrop-filter: blur(3px);
    overflow: hidden;
}

.wizard-modal.is-open {
    display: flex;
}

.wizard-shell {
    width: min(860px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
    overflow: hidden;
}

.family-flow-shell {
    width: min(760px, calc(100vw - 40px));
    border: 1px solid #d7e2f0;
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18);
}

.family-flow-shell--chooser {
    width: min(560px, calc(100vw - 40px));
    max-width: 560px;
}

.family-flow-shell--link {
    max-width: 780px;
}

.family-flow-header {
    padding-bottom: 12px;
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.14), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.family-flow-header__subtitle {
    margin: 6px 0 0;
    font-size: 0.96rem;
    color: #334155;
    font-weight: 600;
}

.family-flow-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.family-flow-alert-wrap {
    padding: 0 1.5rem;
}

.family-flow-body {
    display: grid;
    gap: 14px;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
}

.family-flow-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.family-choice-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #dbe4f0;
    background: #ffffff;
}

.family-choice-card--primary {
    background: linear-gradient(180deg, #ffffff 0%, #f7fff8 100%);
    border-color: #bbf7d0;
}

.family-choice-card--secondary {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-color: #dbeafe;
}

.family-choice-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: #f8fafc;
    color: #0f172a;
}

.family-choice-card--primary .family-choice-card__icon {
    background: #dcfce7;
    color: #15803d;
}

.family-choice-card--secondary .family-choice-card__icon {
    background: #dbeafe;
    color: #1d4ed8;
}

.family-choice-card__icon svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.family-choice-card__content {
    display: grid;
    gap: 6px;
    padding: .7rem 2rem;
}

.family-choice-card__content h4 {
    margin: 0;
    font-size: 1rem;
    color: #111827;
}

.family-choice-card__content p {
    margin: 0;
    color: #475569;
    line-height: 1.45;
    font-size: 0.9rem;
}

.family-choice-card__button {
    width: 100%;
}

.family-link-search-area {
    display: grid;
    gap: 12px;
}

.family-link-search-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.family-link-search-intro p {
    margin: 0;
    color: #475569;
    line-height: 1.45;
    font-size: 0.92rem;
}

.family-link-search-intro__badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.family-link-results {
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
}

.family-link-result-item {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    text-align: left;
    padding: 14px 16px;
    display: grid;
    gap: 4px;
    cursor: pointer;
    transition: background-color 0.16s ease, transform 0.16s ease;
}

.family-link-result-item:last-child {
    border-bottom: 0;
}

.family-link-result-item:hover {
    background: #f8fafc;
}

.family-link-result-item__title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #0f172a;
}

.family-link-result-item__meta,
.family-link-result-item__code {
    color: #64748b;
    font-size: 0.82rem;
}

.family-link-confirm-panel {
    display: grid;
    gap: 10px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    padding: 18px;
    margin-top: 1rem;
}

.family-link-confirm-panel__label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2563eb;
}

.family-link-confirm-panel__text {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.family-link-confirm-panel__change {
    justify-self: flex-start;
}

.family-link-relationship-field {
    margin-top: 1rem;
}

.family-link-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    padding-bottom: 0.5rem;
}

.family-flow-shell--attendance {
    max-width: 860px;
}

.family-attendance-form {
    display: grid;
    gap: 18px;
}

.family-attendance-form-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}

.family-attendance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.family-attendance-panel {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    background: #f8fbff;
}

.family-attendance-panel h4 {
    margin: 0;
    font-size: 0.96rem;
    color: #0f172a;
}

.family-attendance-list {
    display: grid;
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    padding-right: 4px;
}

.family-attendance-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #ffffff;
}

.family-attendance-check input {
    margin-top: 3px;
}

.family-attendance-check span {
    display: grid;
    gap: 3px;
}

.family-attendance-check strong {
    color: #0f172a;
}

.family-attendance-check small {
    color: #64748b;
    font-size: 0.8rem;
}

.family-attendance-fields {
    gap: 14px;
}

.family-attendance-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.wizard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    flex-shrink: 0;
}

.wizard-header h3 {
    margin: 0 0 6px;
    font-size: 1.7rem;
}

.wizard-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #6b7280;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wizard-close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.wizard-close[aria-hidden="true"] {
    pointer-events: none;
}

.wizard-progress {
    padding: 0 24px 16px;
}

.wizard-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}

.wizard-step {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: center;
    color: #9ca3af;
    cursor: pointer;
    outline: none;
}

.wizard-step:focus-visible {
    border-radius: 14px;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.wizard-step span {
    display: block;
}

.wizard-step-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    position: relative;
    border-radius: 999px;
    background: #e5e7eb;
    color: #9ca3af;
    display: block;
    line-height: 0;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.wizard-step-icon svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    display: block;
    transform: translate(-50%, -50%);
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wizard-step-index {
    display: none;
}

.wizard-step-label {
    font-size: 0.84rem;
    line-height: 1.2;
}

.wizard-step.is-active,
.wizard-step.is-complete {
    color: #6b7280;
}

.wizard-step.is-current {
    color: #2563eb;
}

.wizard-step.is-current .wizard-step-icon {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
}

.wizard-step.is-complete .wizard-step-icon {
    background: #dcfce7;
    color: #16a34a;
}

.wizard-track {
    position: relative;
    height: 7px;
    margin-top: 10px;
    border-radius: 999px;
    background: #d1d5db;
    overflow: hidden;
}

.wizard-track-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 16.66%;
    border-radius: 999px;
    background: #030712;
    transition: width 0.22s ease;
}

.wizard-body {
    padding: 0 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.wizard-panel {
    display: none;
    max-height: none;
    overflow: visible;
    padding: 8px 2px 12px 0;
}

.wizard-panel.is-active {
    display: block;
}

.wizard-panel .entity-grid,
.wizard-panel .entity-check-grid,
.wizard-panel .entity-check-inline {
    margin-bottom: 18px;
}

.wizard-panel .entity-grid {
    align-items: start;
}

.wizard-section-title {
    margin: 0 0 14px;
    font-size: 1.04rem;
    color: #111827;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 16px 24px 22px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    flex-shrink: 0;
}

.wizard-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.wizard-footer .entity-button {
    min-width: 110px;
}

.wizard-footer .entity-button[hidden] {
    display: none;
}

.confirm-dialog {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.34);
}

.confirm-dialog.is-open {
    display: flex;
}

.confirm-dialog__card {
    width: min(560px, 100%);
    border-radius: 20px;
    border: 1px solid #dbe3f0;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
    padding: 22px;
}

.confirm-dialog__card--dashboard {
    width: min(720px, 100%);
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    overflow: hidden;
}

.confirm-dialog__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 24px 0;
}

.confirm-dialog__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #eff6ff, #ecfeff);
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.confirm-dialog__title {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.16rem;
}

.confirm-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px;
    overflow: hidden;
}

.confirm-dialog__text {
    margin: 0;
    color: #4b5563;
    line-height: 1.55;
    white-space: pre-line;
    max-height: 60vh;
    overflow: auto;
    overscroll-behavior: contain;
}

.confirm-dialog__card--dashboard .confirm-dialog__title {
    margin-bottom: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    line-height: 1.2;
}

.confirm-dialog__card--dashboard .confirm-dialog__text {
    height: 100%;
    max-height: none;
    padding-right: 6px;
    white-space: normal;
}

.confirm-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.confirm-dialog__card--dashboard .confirm-dialog__actions {
    margin-top: 0;
    padding: 0 24px 24px;
    border-top: 1px solid #eef2f7;
}

.dashboard-info-stack {
    display: grid;
    gap: 12px;
}

.dashboard-info-card {
    border: 1px solid #e5e7eb;
    border-left-width: 5px;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 14px 16px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.dashboard-info-card h4 {
    margin: 0 0 6px;
    color: #0f172a;
    font-size: 0.98rem;
    line-height: 1.35;
}

.dashboard-info-card p {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

.dashboard-info-card--blue {
    border-left-color: #2563eb;
}

.dashboard-info-card--green {
    border-left-color: #16a34a;
}

.dashboard-info-card--amber {
    border-left-color: #d97706;
}

.dashboard-info-card--rose {
    border-left-color: #e11d48;
}

.dashboard-info-card--mint {
    border-left-color: #0f766e;
}

.dashboard-info-card--slate {
    border-left-color: #64748b;
}

.dashboard-info-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.dashboard-polos-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dashboard-polos-dialog__summary {
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    color: #475569;
    font-size: 0.95rem;
}

.dashboard-polos-dialog__list {
    display: grid;
    gap: 10px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 6px;
    overscroll-behavior: contain;
}

.dashboard-polos-dialog__item {
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
}

.dashboard-polos-dialog__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: #0f172a;
}

.dashboard-polos-dialog__head strong {
    font-size: 1rem;
    line-height: 1.35;
}

.dashboard-polos-dialog__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 700;
    flex: 0 0 auto;
}

.dashboard-polos-dialog__meta {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.dashboard-polos-dialog__meta span {
    color: #94a3b8;
    margin: 0 4px;
}

.audit-workspace {
    display: grid;
    gap: 14px;
}

.audit-tabs {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

a.audit-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    color: #374151;
    background: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.audit-tab:hover {
    background: #f5f7fb;
    border-color: #e5e7eb;
    transform: translateY(-1px);
}

a.audit-tab.is-active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #111827;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.10);
}

.audit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.audit-card {
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.audit-card h2 {
    margin: 0 0 12px;
    font-size: 1rem;
}

.audit-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 8px;
    max-height: 280px;
    overflow: auto;
}

.audit-list li {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 10px 12px;
    display: grid;
    gap: 2px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.audit-list strong {
    color: #111827;
    font-size: 0.86rem;
}

.audit-list span {
    color: #4b5563;
    font-size: 0.88rem;
}

.audit-form {
    display: grid;
    gap: 12px;
}

.audit-form label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.audit-form input,
.audit-form select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 0.92rem;
}

.audit-form button {
    border: 0;
    border-radius: 8px;
    padding: 11px 13px;
    background: #1d4ed8;
    color: #ffffff;
    cursor: pointer;
}

.audit-form button:hover {
    filter: brightness(1.05);
}

.catalog-benefit-modal .audit-form {
    gap: 14px;
}

.catalog-benefit-modal .role-option {
    margin-top: 2px;
}

.catalog-status-toggle {
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.catalog-status-toggle legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.catalog-status-toggle .role-option {
    margin: 0;
}

.catalog-benefit-modal .user-settings-modal__actions {
    margin-top: 16px;
}

.audit-filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px 12px;
    align-items: end;
}

.audit-filter-form .audit-field {
    display: grid;
    gap: 6px;
}

.audit-filter-form label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
}

.audit-filter-form select {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 0.92rem;
}

.audit-filter-form button {
    border: 0;
    border-radius: 8px;
    padding: 11px 13px;
    background: #1d4ed8;
    color: #ffffff;
    cursor: pointer;
}

.audit-filter-form .audit-actions {
    display: flex;
    justify-content: flex-end;
}

.audit-log-list {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.audit-log-card {
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.catalog-directory {
    display: grid;
    gap: 18px;
}

.catalog-directory__hero {
    border: 1px solid #dbe4f0;
    border-radius: 24px;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(251, 191, 36, 0.22), transparent 30%),
        radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.16), transparent 28%),
        linear-gradient(135deg, #fffdf7 0%, #f8fbff 100%);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.catalog-directory__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #9a3412;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catalog-directory__hero h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    color: #111827;
}

.catalog-directory__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.catalog-directory__card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 22px 26px;
    border-radius: 22px;
    color: #111827;
    border: 1px solid #dbe4f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.catalog-directory__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.12);
}

.catalog-directory__card::after {
    content: "";
    position: absolute;
    inset: auto -30px -30px auto;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    opacity: 0.22;
}

.catalog-directory__card--sun::after { background: #f59e0b; }
.catalog-directory__card--mint::after { background: #10b981; }
.catalog-directory__card--amber::after { background: #f97316; }
.catalog-directory__card--sky::after { background: #0ea5e9; }
.catalog-directory__card--rose::after { background: #f43f5e; }
.catalog-directory__card--slate::after { background: #64748b; }
.catalog-directory__card--teal::after { background: #14b8a6; }

.catalog-directory__card-body {
    display: grid;
    gap: 10px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.catalog-directory__card-action {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    position: relative;
    z-index: 1;
}

.catalog-directory__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    min-height: 38px;
    padding: 8px 18px;
    background: #1d4ed8;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.catalog-directory__button:hover {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(29, 78, 216, 0.18);
}

.catalog-directory__card h3 {
    margin: 0;
    font-size: 1.08rem;
}

.catalog-directory__card p {
    margin: 0;
    color: #4b5563;
}

.catalog-directory__card strong {
    font-size: 0.92rem;
    color: #0f172a;
}

.catalog-detail {
    display: grid;
    gap: 16px;
}

.catalog-detail__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 22px;
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.14), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.06);
}

.catalog-detail__toolbar h2 {
    margin: 0;
    font-size: 1.42rem;
    color: #0f172a;
}

.catalog-detail__eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    color: #9a3412;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.catalog-detail__subtitle {
    margin: 6px 0 0;
    max-width: 720px;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

.catalog-detail__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
}

.catalog-detail__back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid #dbe5f0;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.catalog-detail__back-button:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.12);
}

.catalog-create-card {
    border-style: solid;
    border-width: 1px;
    border-color: #dbe5f0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.05);
}

.catalog-create-card__head {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}

.catalog-create-card__head strong {
    font-size: 1rem;
    color: #111827;
}

.catalog-create-card__head span {
    color: #6b7280;
    font-size: 0.9rem;
}

.catalog-create-card__head span:empty,
.catalog-program-summary span:empty {
    display: none;
}

.catalog-detail__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.catalog-benefit-toolbar {
    display: flex;
    justify-content: flex-start;
}

.catalog-add-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 18px 28px rgba(29, 78, 216, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.catalog-add-button span {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 1rem;
    line-height: 1;
}

.catalog-add-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 30px rgba(29, 78, 216, 0.28);
}

.catalog-benefit-card {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background:
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.18), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.05);
}

.catalog-benefit-card__meta {
    display: flex;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
}

.catalog-benefit-card__primary {
    display: grid;
    gap: 6px;
}

.catalog-benefit-card__primary strong {
    font-size: 1.03rem;
    color: #0f172a;
}

.catalog-benefit-card__primary span {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.55;
}

.catalog-benefit-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.catalog-benefit-modal .user-settings-modal__card {
    max-width: 560px;
    border-radius: 24px;
    box-shadow: 0 32px 54px rgba(15, 23, 42, 0.18);
}

.catalog-benefit-modal form[hidden] {
    display: none !important;
}

.catalog-program-filters {
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.05);
}

.catalog-program-filters__form {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(180px, 0.8fr) auto;
    gap: 14px;
    align-items: end;
}

.catalog-destination-filters__form {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(180px, 0.7fr) auto;
}

.catalog-program-filters__field {
    display: grid;
    gap: 8px;
}

.catalog-program-filters__field label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
}

.catalog-program-filters__field input,
.catalog-program-filters__field select {
    min-height: 54px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid #d7e1ee;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #111827;
    font-size: 0.95rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.catalog-program-filters__field input::placeholder {
    color: #94a3b8;
}

.catalog-program-filters__field input:focus,
.catalog-program-filters__field select:focus {
    outline: 2px solid #dbeafe;
    outline-offset: 1px;
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(147, 197, 253, 0.16);
}

.catalog-program-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.catalog-program-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 14px;
    margin: 4px 4px 12px;
    color: #4b5563;
    font-size: 0.92rem;
}

.catalog-program-summary strong {
    color: #111827;
}

.catalog-program-card {
    background:
        radial-gradient(circle at top right, rgba(191, 219, 254, 0.24), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.inline-form.inline-form-delete button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.catalog-pagination__link {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5eefb;
    color: #1e293b;
    text-decoration: none;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.catalog-pagination__link:hover {
    transform: translateY(-1px);
    background: #dbeafe;
    box-shadow: 0 10px 18px rgba(59, 130, 246, 0.16);
}

.catalog-pagination__link.is-active {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.22);
}

@media (max-width: 780px) {
    .catalog-detail__toolbar {
        padding: 18px;
    }

    .catalog-detail__back-button {
        width: 100%;
    }

    .catalog-directory__card {
        grid-template-columns: 1fr;
        align-items: flex-start;
        padding: 20px;
    }

    .catalog-directory__card-action {
        width: 100%;
        padding-right: 0;
        justify-content: flex-end;
    }

    .catalog-program-filters__form {
        grid-template-columns: 1fr;
    }

    .catalog-destination-filters__form {
        grid-template-columns: 1fr;
    }

    .catalog-program-filters__actions {
        justify-content: stretch;
    }

    .catalog-program-filters__actions .entity-button {
        width: 100%;
        justify-content: center;
    }

    .catalog-benefit-card__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-benefit-card__actions {
        width: 100%;
        justify-content: stretch;
    }

    .catalog-benefit-card__actions .entity-button,
    .catalog-benefit-card__actions form,
    .catalog-benefit-card__actions form button {
        width: 100%;
    }
}

.audit-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: #111827;
    font-size: 0.95rem;
}

.audit-log-meta span {
    color: #6b7280;
}

.audit-log-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 10px;
    color: #4b5563;
    font-size: 0.88rem;
}

.audit-project-map {
    display: grid;
    gap: 12px;
}

.audit-project-row {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    background: #f8fafc;
}

.audit-project-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 10px;
}

.audit-project-head strong {
    color: #111827;
    font-size: 0.95rem;
}

.audit-project-head span {
    color: #4b5563;
    font-size: 0.92rem;
}

.audit-project-polos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.audit-project-chip,
.audit-project-empty {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 0.84rem;
}

.audit-project-chip {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}

.audit-project-empty {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.is-hidden-by-toggle {
    display: none !important;
}

@media (max-width: 980px) {
    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        max-height: none;
        overflow-y: visible;
        position: static;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
        padding: 12px;
    }

    .app-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
    }

    .app-hero {
        grid-template-columns: 1fr;
    }

    .app-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .app-dashboard-hero-head {
        flex-direction: column;
    }

    .app-dashboard-hero-aside {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .app-dashboard-hero-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-dashboard-kpi-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-dashboard-status-grid {
        grid-template-columns: 1fr;
    }

    .app-dashboard-ranking {
        grid-template-columns: 1fr;
    }

    .app-dashboard-ranking-summary {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .app-dashboard-ranking-summary__ring {
        width: 112px;
        height: 112px;
    }

    .entity-card--hero,
    .entity-grid--four,
    .entity-grid--three,
    .entity-grid--two,
    .entity-check-grid,
    .wizard-steps {
        grid-template-columns: 1fr;
    }

    .entity-field--span-2 {
        grid-column: span 1;
    }

    .audit-grid {
        grid-template-columns: 1fr;
    }

    .person-address-grid--lookup,
    .person-address-grid--city,
    .person-address-grid--street,
    .person-address-grid--details {
        grid-template-columns: 1fr;
    }

    .person-address-field--lookup-action .entity-button {
        max-width: none;
    }

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

    .audit-filter-form button {
        width: 100%;
    }

    .audit-filter-form .audit-actions {
        justify-content: stretch;
    }

    .audit-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .audit-tab {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .app-sidebar {
        padding: 14px;
    }

    .app-brand {
        padding: 8px 4px 14px;
    }

    .app-brand-name {
        height: 46px;
    }

    .app-nav {
        grid-template-columns: 1fr;
    }

    .app-nav-item {
        font-size: 0.9rem;
        padding: 8px 10px;
    }

    .app-nav-icon {
        width: 24px;
        height: 24px;
    }

    .app-nav-icon svg {
        width: 16px;
        height: 16px;
    }

    .app-topbar {
        padding: 16px 14px;
    }

    .app-topbar-title {
        font-size: 0.95rem;
    }

    .app-user-menu {
        width: 100%;
        margin-left: 0;
    }

    .app-user {
        width: 100%;
        justify-content: space-between;
    }

    .app-user-text {
        text-align: left;
    }

    .app-user-name {
        font-size: 0.98rem;
    }

    .app-user-role {
        font-size: 0.86rem;
    }

    .app-user-preview,
    .app-user-dropdown {
        right: auto;
        left: 0;
        width: 100%;
    }

    .app-page {
        padding: 20px 14px;
    }

    .app-hero-copy {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .app-hero-subtitle {
        font-size: 0.95rem;
    }

    .app-summary-grid {
        grid-template-columns: 1fr;
    }

    .app-summary-grid--dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-dashboard-card {
        padding: 18px;
        border-radius: 20px;
    }

    .app-dashboard-hero-highlights,
    .app-dashboard-kpi-strip {
        grid-template-columns: 1fr;
    }

    .app-dashboard-ranking-summary {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .app-summary-grid--dashboard {
        grid-template-columns: 1fr;
    }

    .app-summary-card {
        min-height: 0;
    }

    .app-summary-card,
    .app-dashboard-card__header,
    .app-dashboard-ranking__meta,
    .app-dashboard-metric-row {
        flex-direction: column;
    }

    .app-summary-card__icon {
        width: 40px;
        height: 40px;
    }

    .entity-card,
    .entity-card--hero {
        padding: 16px;
        border-radius: 18px;
    }

    .wizard-modal {
        align-items: stretch;
        padding: 10px;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: auto;
    }

    .wizard-modal.is-open {
        display: flex;
    }

    .wizard-shell {
        border-radius: 16px;
        width: 100%;
        min-height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .family-flow-grid {
        grid-template-columns: 1fr;
    }

    .family-link-search-intro {
        flex-direction: column;
        align-items: flex-start;
    }

    .family-link-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .family-attendance-grid,
    .family-attendance-types {
        grid-template-columns: 1fr;
    }

    .wizard-header,
    .wizard-progress,
    .wizard-body,
    .wizard-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .wizard-header h3 {
        font-size: 1.42rem;
    }

    .wizard-panel {
        max-height: min(52vh, 520px);
        overflow-y: auto;
        padding-right: 0;
        scrollbar-width: thin;
    }

    .entity-result-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .entity-result-card__side,
    .entity-result-card__topbar,
    .entity-result-card__actions {
        width: 100%;
        justify-content: flex-start;
        justify-items: start;
    }

    .entity-result-card__actions {
        flex-wrap: wrap;
        white-space: normal;
    }

    .entity-result-menu {
        left: 8px;
        right: 8px;
        width: auto;
        top: 122px;
    }

    .entity-badge-grid {
        justify-content: flex-start;
    }

    .entity-actions {
        flex-direction: column;
    }

    .wizard-footer,
    .wizard-footer-actions {
        flex-direction: column;
    }

    .entity-button {
        width: 100%;
    }

    .app-panel-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 840px) {
    .card {
        grid-template-columns: 1fr;
        min-height: 680px;
    }

    .image-panel {
        order: -1;
    }

    .image-panel {
        padding: 20px;
    }

    .admin-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 1024px) {
    .admin-card {
        padding: 20px;
    }

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

    .admin-search-form__actions {
        justify-content: stretch;
    }

    .admin-search-form__actions .admin-button {
        flex: 1 1 180px;
    }

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

    .admin-field--full,
    .admin-form-actions {
        grid-column: span 1;
    }

    .admin-form-actions {
        justify-content: stretch;
    }

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

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

    .users-table {
        min-width: 860px;
    }
}

@media (max-width: 760px) {
    .admin-card {
        padding: 16px;
        border-radius: 20px;
    }

    .admin-header {
        flex-direction: column;
        gap: 12px;
    }

    .admin-scope-badge {
        width: 100%;
        min-width: 0;
    }

    .admin-panel {
        padding: 14px;
        border-radius: 16px;
    }

    .admin-panel__header,
    .admin-panel__header--split {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-list-controls {
        width: 100%;
        justify-content: space-between;
    }

    .admin-list-controls select {
        min-width: 76px;
    }

    .roles-group {
        gap: 8px;
    }

    .role-option {
        width: 100%;
        justify-content: flex-start;
        border-radius: 14px;
        padding: 11px 12px;
    }

    .js-scope-option {
        min-height: 40px;
        padding: 9px 10px;
    }

    .users-table {
        min-width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
    }

    .users-table-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .users-table thead {
        display: table-header-group;
    }

    .users-table tr {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .users-table td {
        border-bottom: 1px solid #e8eef5;
        padding: 14px 12px;
    }

    .users-table__tags {
        gap: 6px;
    }

    .users-table__actions {
        width: 110px;
        text-align: center !important;
    }

    .user-settings-trigger {
        margin-left: 0;
    }

    .users-table td::before {
        content: attr(data-label);
        display: block;
        color: #6b7280;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: 3px;
    }

    .inline-form {
        margin-bottom: 8px;
        padding-top: 4px;
    }

    .inline-form-row {
        gap: 10px;
    }

    .inline-form button,
    .inline-form input,
    .inline-form select {
        width: 100%;
    }

    .inline-form-delete button {
        justify-self: stretch;
    }

    .user-settings-modal__card {
        width: min(100vw - 18px, 760px);
        margin: 2vh auto;
        padding: 16px;
        border-radius: 18px;
    }

    .user-settings-modal__card--wide {
        width: min(100vw - 18px, 980px);
    }

    .user-settings-modal__header {
        flex-direction: column;
    }

    .user-settings-modal__close,
    .user-settings-modal__actions button,
    .admin-button {
        width: 100%;
    }

    .scope-toggle {
        width: 100%;
    }

    .scope-toggle--inline {
        padding-bottom: 0;
        white-space: normal;
    }

    .user-settings-form__project-row {
        grid-template-columns: 1fr;
    }

    .entity-pagination__actions {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .entity-pagination__actions .entity-button {
        flex: 1 1 0;
        text-align: center;
    }

    .admin-actions {
        gap: 10px;
    }
}

@media (max-width: 520px) {
    .admin-card {
        padding: 12px;
    }

    .admin-header h1 {
        font-size: 1.45rem;
    }

    .admin-panel h2 {
        font-size: 1rem;
    }

    .admin-list-controls {
        align-items: stretch;
    }

    .admin-list-controls span {
        width: 100%;
    }

    .admin-search-form__actions {
        flex-direction: column;
    }

    .users-table tr {
        padding: 12px;
    }
}






.family-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
}

.family-detail-modal.is-open {
    display: block;
}

.wizard-shell.is-family-detail-open > .wizard-header,
.wizard-shell.is-family-detail-open > .wizard-footer,
.wizard-shell.is-family-detail-open > .wizard-body > :not(.family-detail-modal) {
    visibility: hidden;
}

.family-detail-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(248, 250, 252, 0.97);
}

.family-detail-modal__card {
    position: relative;
    width: min(860px, calc(100vw - 28px));
    max-height: min(88vh, 820px);
    margin: 4vh auto;
    overflow: auto;
    padding: 18px;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.28);
}

.family-detail-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.family-detail-modal__body {
    display: grid;
    gap: 12px;
}

.family-detail-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

.family-mini-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.family-mini-step {
    border: 1px solid #d1d5db;
    background: #f8fafc;
    border-radius: 12px;
    padding: 8px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 700;
}

.family-mini-step__dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #6b7280;
    font-size: 0.74rem;
}

.family-mini-step.is-active {
    border-color: #1d4ed8;
    background: #eff6ff;
    color: #1d4ed8;
}

.family-mini-step.is-active .family-mini-step__dot {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.family-tab-panel[hidden] {
    display: none;
}

.family-tab-panel {
    padding: 4px 2px;
}

.family-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.family-member-form,
.family-auxilio-form {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 14px;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #f8fafc;
}

.family-member-form label,
.family-auxilio-form label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #334155;
}

.family-member-form input,
.family-member-form select,
.family-member-form textarea,
.family-auxilio-form input[type="text"] {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 12px;
    color: #0f172a;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.family-member-form input:focus,
.family-member-form select:focus,
.family-member-form textarea:focus,
.family-auxilio-form input[type="text"]:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    outline: none;
}

.family-member-form .entity-button,
.family-auxilio-form .entity-button {
    margin-top: 4px;
    min-height: 42px;
}

.family-auxilio-form label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: none;
}

.family-auxilio-form input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.family-member-form--danger {
    margin-top: 6px;
    border-color: #fecaca;
    background: #fff5f5;
}

.family-member-form--danger .entity-button {
    border-color: #fca5a5;
    color: #9f1239;
}

.family-member-create-launch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.family-member-create-launch > div {
    display: grid;
    gap: 4px;
}

.family-member-create-launch strong {
    color: #0f172a;
    font-size: 0.98rem;
}

.family-member-create-launch span {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.45;
}

.family-member-create-launch .entity-button.is-hidden {
    display: none;
}

.family-member-create-shell[hidden],
.family-member-step-panel[hidden] {
    display: none !important;
}

.family-member-form--create {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.family-member-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.family-member-step {
    border: 1px solid #d1d5db;
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.84rem;
    font-weight: 700;
}

.family-member-step__dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #6b7280;
    font-size: 0.74rem;
}

.family-member-step.is-active {
    border-color: #1d4ed8;
    background: #eff6ff;
    color: #1d4ed8;
}

.family-member-step.is-active .family-member-step__dot {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.family-member-step-panel {
    display: grid;
    gap: 12px;
}

.family-member-form__header {
    display: grid;
    gap: 4px;
    margin-bottom: 6px;
}

.family-member-form__header strong {
    color: #0f172a;
    font-size: 1rem;
}

.family-member-form__header span {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.45;
}

.family-member-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.family-member-list {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.family-member-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    background: #f8fafc;
}

.family-member-item > div {
    display: grid;
    gap: 2px;
}

.family-member-item span {
    font-size: 0.82rem;
    color: #4b5563;
}

.family-member-item strong {
    font-size: 1.02rem;
    color: #0f172a;
}

.family-member-item form .entity-button {
    min-width: 112px;
}


.family-confirm-yes {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
}

.family-confirm-no {
    background: #dc2626;
    border-color: #b91c1c;
    color: #ffffff;
}

.person-documents-group[hidden],
.entity-toggle-group[hidden] {
    display: none !important;
}
.person-documents-panel .person-document-item {
    margin-top: 14px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.person-documents-panel .person-documents-toggle {
    margin-top: 0;
}

.person-documents-panel .person-documents-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: #334155;
    font-weight: 500;
    cursor: pointer;
}

.person-documents-panel .person-documents-toggle input[type="checkbox"] {
    width: 17px;
    height: 17px;
}


.person-documents-panel .person-documents-toggle input[type="checkbox"]:checked {
    accent-color: #1d4ed8;
}

.person-documents-panel .person-documents-toggle label:has(input[type="checkbox"]:checked) {
    color: #1d4ed8;
}
.person-documents-panel .person-documents-group {
    margin-top: 8px;
    padding: 14px;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #ffffff;
}

.person-documents-panel .person-documents-group .entity-field {
    min-width: 0;
}


.person-documents-panel .person-certidao-mode {
    margin-top: 6px;
}

.person-documents-panel .person-certidao-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: #334155;
    font-weight: 500;
}

.person-documents-panel .person-certidao-mode input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 auto;
}

.person-documents-panel .person-certidao-fields {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

@media (max-width: 900px) {
    .person-documents-panel .person-certidao-fields.entity-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .person-documents-panel .person-certidao-fields.entity-grid--four,
    .person-documents-panel .person-certidao-fields.entity-grid--two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .person-documents-panel .entity-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .person-documents-panel .entity-grid--four,
    .person-documents-panel .entity-grid--two {
        grid-template-columns: 1fr;
    }
}

[data-family-detail-save].is-attention {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

@media (max-width: 768px) {
    .family-detail-modal__card {
        width: calc(100vw - 16px);
        margin: 2vh auto;
        padding: 14px;
        border-radius: 14px;
    }

    .family-inline-grid {
        grid-template-columns: 1fr;
    }

    .family-member-create-launch,
    .family-member-form__actions,
    .family-member-item {
        flex-direction: column;
        align-items: stretch;
    }

    .family-member-steps {
        grid-template-columns: 1fr;
    }

    .family-member-item {
        align-items: flex-start;
    }
}




.entity-empty-state--compact {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 14px;
}


.person-family-check-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.person-family-check-row__input {
    flex: 1 1 auto;
    min-width: 0;
}

.person-family-check-row__button {
    flex: 0 0 auto;
    min-height: 44px;
    white-space: nowrap;
}

.person-family-check-row__option {
    margin-top: -2px;
}

.entity-inline-checkbox--compact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #334155;
}

.entity-inline-checkbox--compact input {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .person-family-check-row {
        flex-direction: column;
        align-items: stretch;
    }

    .person-family-check-row__button {
        width: 100%;
    }
}

.family-address-card {
    display: grid;
    gap: 16px;
    margin-top: 12px;
    padding: 18px;
    border: 1px solid #dbe2ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.family-address-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.family-address-card__header > div {
    display: grid;
    gap: 4px;
}

.family-address-card__header strong {
    color: #0f172a;
    font-size: 1rem;
}

.family-address-card__header span {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.45;
}

.family-address-display {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.family-address-display__item {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #d9e2ec;
    border-radius: 14px;
    background: #ffffff;
}

.family-address-display__item--full {
    grid-column: 1 / -1;
}

.family-address-display__label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.family-address-display__item strong {
    color: #0f172a;
    font-size: 0.96rem;
    line-height: 1.5;
}

.family-address-edit-form[hidden] {
    display: none;
}

.ativeandedit {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.catalog-benefit-card__actions .ativeandedit {
    width: 100%;
}

.family-address-history {
    display: grid;
    gap: 12px;
}

.family-address-history__item {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #dbe2ea;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.family-address-history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.family-address-history__header strong {
    color: #0f172a;
    font-size: 0.95rem;
}

.family-address-history__header span {
    color: #475569;
    font-size: 0.85rem;
    font-weight: 600;
}

.family-address-history__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.family-address-history__grid span {
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.5;
}

.family-address-history__grid .is-full {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .family-mini-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .family-address-card__header {
        grid-template-columns: 1fr;
        display: grid;
    }

    .family-address-display,
    .family-address-history__grid {
        grid-template-columns: 1fr;
    }

    .family-address-display__item--full,
    .family-address-history__grid .is-full {
        grid-column: auto;
    }
}

[data-family-relationship-field][hidden] {
    display: none !important;
}

.family-overview-card {
    display: grid;
    gap: 18px;
    padding: 20px;
    border: 1px solid #dbe3f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.family-overview-card__top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.family-overview-chip {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #d7e2f0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
}

.family-overview-chip__label,
.family-overview-card__label {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.family-overview-chip strong {
    color: #0f172a;
    font-size: 1rem;
}

.family-overview-card__body {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 16px;
    align-items: start;
}

.family-overview-card__primary,
.family-overview-card__address {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
}

.family-overview-card__primary strong,
.family-overview-card__address-head strong {
    color: #0f172a;
    font-size: 1.08rem;
}

.family-overview-card__primary small {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
}

.family-overview-card__address-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.family-overview-card__address-head > div {
    display: grid;
    gap: 4px;
}

.family-address-display--embedded {
    margin-top: 2px;
}

/* ─── Catalog Alert Popup (non-blocking floating banner) ─────── */
.catalog-alert-popup {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10500;
    pointer-events: none;
    animation: catalog-popup-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.catalog-alert-popup[hidden] {
    display: none;
}

@keyframes catalog-popup-in {
    from { opacity: 0; transform: translateX(-50%) translateY(24px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.catalog-alert-popup__card {
    pointer-events: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.1);
    padding: 16px 20px 14px;
    min-width: 320px;
    max-width: 480px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.catalog-alert-popup--success .catalog-alert-popup__card {
    border-left: 4px solid #16a34a;
}

.catalog-alert-popup--error .catalog-alert-popup__card {
    border-left: 4px solid #dc2626;
}

.catalog-alert-popup__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.catalog-alert-popup--success .catalog-alert-popup__icon {
    background: #dcfce7;
    color: #16a34a;
}

.catalog-alert-popup--error .catalog-alert-popup__icon {
    background: #fee2e2;
    color: #dc2626;
}

.catalog-alert-popup__icon svg {
    width: 20px;
    height: 20px;
}

.catalog-alert-popup__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.catalog-alert-popup__title {
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.catalog-alert-popup--success .catalog-alert-popup__title {
    color: #15803d;
}

.catalog-alert-popup--error .catalog-alert-popup__title {
    color: #b91c1c;
}

.catalog-alert-popup__message {
    font-size: 0.88rem;
    color: #475569;
    margin: 0;
    line-height: 1.45;
}

.catalog-alert-popup__close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.catalog-alert-popup__close:hover {
    background: #f1f5f9;
    color: #374151;
}

.catalog-alert-popup__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 16px 16px;
    animation: catalog-popup-progress 5s linear forwards;
}

.catalog-alert-popup--success .catalog-alert-popup__progress {
    background: #16a34a;
}

.catalog-alert-popup--error .catalog-alert-popup__progress {
    background: #dc2626;
}

@keyframes catalog-popup-progress {
    from { width: 100%; }
    to   { width: 0%; }
}



/* --- Glassmorphism & UI Refinements --- */
.audit-log-card, 
.catalog-benefit-card, 
.catalog-program-filters, 
.catalog-directory__hero, 
.catalog-directory__card,
.catalog-create-card,
.family-overview-card {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05) !important;
}

.catalog-benefit-card__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.catalog-benefit-card__actions .catalog-status-form {
    margin: 0;
    display: inline-flex;
}

.catalog-benefit-card__actions .admin-status-chip--button {
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 0.88rem !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.catalog-benefit-card__actions .entity-button {
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.catalog-benefit-card__actions .inline-form-delete {
    margin: 0;
    display: inline-flex;
}

.catalog-benefit-card__actions .inline-form-delete button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Tela de Perfil da Família (Tela 1 — ver / Tela 2 — atendimento em aberto)
   ========================================================================== */

.familia-page {
    /* layout handled by .app-shell inside */
}

/* Topbar ------------------------------------------------------------------- */

.familia-topbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #d1d5db;
    padding: 0 24px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(10px);
}

.familia-topbar__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.familia-topbar__back:hover {
    background: #f3f4f6;
    color: #111827;
}

.familia-topbar__back svg {
    flex-shrink: 0;
}

.familia-topbar__sep {
    width: 1px;
    height: 22px;
    background: #e5e7eb;
}

.familia-topbar__breadcrumb {
    font-size: 0.88rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.familia-topbar__breadcrumb strong {
    color: #111827;
}

.familia-topbar__user-menu {
    margin-left: auto;
}

.familia-topbar__user-menu .app-user {
    border-color: #bfd0ff;
    border-radius: 16px;
    padding: 8px 14px;
    box-shadow: none;
}

.familia-topbar__user-menu .app-user:hover,
.familia-topbar__user-menu[open] .app-user {
    border-color: #93c5fd;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.08);
}

.familia-topbar__user-menu .app-user-name {
    font-size: 0.94rem;
}

.familia-topbar__user-menu .app-user-role {
    color: #166534;
    font-size: 0.82rem;
}

.familia-topbar__user-menu .app-user-chevron {
    color: #6b7280;
}

.familia-topbar__user-menu .app-user-action {
    border-color: #dbeafe;
    background: #f8fbff;
    color: #5b76b7;
}

.familia-topbar__user-menu .app-user-action--danger {
    border-color: #f7d4d4;
    background: #fff7f7;
    color: #c26a6a;
}

/* Conteúdo central --------------------------------------------------------- */

.familia-content {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 20px 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header da família -------------------------------------------------------- */

.familia-header {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 18px;
    padding: 24px 28px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.09);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
}

.familia-header__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.familia-header__name {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.familia-header__cpf {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 500;
}

.familia-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin-top: 8px;
}

.familia-header__meta-item {
    font-size: 0.84rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 4px;
}

.familia-header__meta-item strong {
    color: #374151;
}

.familia-header__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 6px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 10px;
    width: fit-content;
}

.familia-header__status--todo {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.familia-header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.familia-header__actions .familia-btn--primary {
    white-space: nowrap;
}

.familia-header__actions .familia-btn--ghost {
    white-space: nowrap;
}

/* Botões ------------------------------------------------------------------- */

.familia-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    line-height: 1;
}

.familia-btn--primary {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.22);
}

.familia-btn--primary:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.familia-btn--danger {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.2);
}

.familia-btn--danger:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.familia-btn--ghost {
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.familia-btn--ghost:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.familia-btn--ghost[disabled],
.familia-btn--primary[disabled],
.familia-btn--danger[disabled],
.familia-btn--sm[disabled] {
    opacity: 0.38;
    pointer-events: none;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow: none;
}

.familia-btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.familia-btn--sm:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.familia-btn--sm-danger {
    border-color: #fca5a5;
    color: #b91c1c;
}

.familia-btn--sm-danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

/* Abas --------------------------------------------------------------------- */

.familia-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
    overflow: visible;
}

.familia-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: normal;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.familia-tab:hover {
    background: #f3f4f6;
    color: #374151;
}

.familia-tab--active {
    background: #eff6ff;
    color: #1d4ed8;
}

.familia-tab--todo {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.familia-tab__todo-badge {
    font-size: 0.7rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 4px;
    padding: 1px 4px;
    font-weight: 700;
}

/* Seções de conteúdo ------------------------------------------------------- */

.familia-section {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
}

.familia-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.familia-section__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 8px;
}

.familia-section__title svg {
    color: #1d4ed8;
    flex-shrink: 0;
}

.familia-section__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Endereço ----------------------------------------------------------------- */

.familia-address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px 18px;
}

.familia-address-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.familia-address-item__label {
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.familia-address-item__value {
    font-size: 0.92rem;
    color: #111827;
    font-weight: 500;
}

.familia-address-item__value--empty {
    color: #9ca3af;
    font-style: italic;
}

/* Aviso composição familiar ------------------------------------------------ */

.familia-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #78350f;
    margin-bottom: 16px;
}

.familia-notice svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #d97706;
}

/* Condições Habitacionais — chips e form ----------------------------------- */

.hc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.hc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid;
}

.hc-chip--yes { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.hc-chip--no  { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.hc-chip--warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.hc-chip--ok  { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }

.hc-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 6px 0;
}

.hc-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.hc-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    cursor: pointer;
}

.hc-aluguel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
}

/* PAF — Plano de Acompanhamento Familiar ---------------------------------- */

.familia-modal__card--xl {
    width: min(960px, 100%);
}

.paf-btn-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.65rem;
    line-height: 1;
    vertical-align: middle;
}
.paf-btn-badge--active { color: #f59e0b; }
.paf-btn-badge--done   { color: #10b981; }

.paf-modal-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 14px 20px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 20px;
}

.paf-modal-header__info {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

.paf-modal-header__name {
    width: 100%;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}

.paf-modal-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.82rem;
    color: #6b7280;
}

.paf-modal-header__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.paf-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid;
}
.paf-status-badge--construcao { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.paf-status-badge--encerrado  { background: #f3f4f6; color: #6b7280; border-color: #d1d5db; }

.paf-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 24px;
    text-align: center;
    color: #6b7280;
    font-size: 0.95rem;
}

.paf-notice svg {
    color: #d1d5db;
}

.paf-avaliacao-q {
    margin-bottom: 18px;
}

.paf-avaliacao-q__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    line-height: 1.45;
}

.paf-avaliacao-q__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.paf-avaliacao-q__option {
    display: flex;
    align-items: center;
}

.paf-avaliacao-q__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.paf-avaliacao-q__option span {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid #d1d5db;
    background: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
    user-select: none;
}

.paf-avaliacao-q__option input:checked + span {
    border-color: #2563eb;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 700;
}

.paf-avaliacao-q__option input:disabled + span {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}

.paf-avaliacao-q__option input:disabled:checked + span {
    opacity: 1;
    border-color: #93c5fd;
    background: #eff6ff;
    color: #3b82f6;
}

.paf-vuln-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.paf-vuln-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
}

.paf-vuln-item__name { flex: 1; font-weight: 500; color: #111827; }
.paf-vuln-sev { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; border: 1px solid; }
.paf-vuln-sev--alta  { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.paf-vuln-sev--media { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.paf-vuln-sev--baixa { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.paf-vuln-sev--na    { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

.paf-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 4px;
}

.paf-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    font-size: 0.83rem;
    color: #374151;
}

.paf-history-secao {
    font-weight: 700;
    color: #2563eb;
    min-width: 90px;
    text-transform: capitalize;
}

.paf-readonly-text {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 0.93rem;
    color: #374151;
    line-height: 1.6;
    min-height: 42px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Tabela de membros -------------------------------------------------------- */

.familia-members-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.familia-members-search {
    flex: 1;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    font-size: 0.9rem;
    color: #111827;
    background: #f9fafb;
    transition: border-color 0.15s, outline 0.15s;
}

.familia-members-search:focus {
    outline: 2px solid #c7d2fe;
    outline-offset: 1px;
    border-color: #93c5fd;
    background: #ffffff;
}

.familia-members-table-wrap {
    overflow-x: auto;
}

.familia-members-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.familia-members-table th,
.familia-members-table td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 0.89rem;
}

.familia-members-table thead th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    background: #f8fafc;
}

.familia-members-table tbody tr:last-child td {
    border-bottom: none;
}

.familia-members-table tbody tr:hover td {
    background: #f8fafc;
}

.familia-members-table__primary {
    display: block;
    font-weight: 600;
    color: #111827;
}

.familia-members-table__sub {
    display: block;
    font-size: 0.78rem;
    color: #9ca3af;
    margin-top: 1px;
}

.familia-members-table__actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.familia-members-table .resp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    border-radius: 6px;
    padding: 2px 7px;
    vertical-align: middle;
    margin-left: 6px;
}

/* Modais ------------------------------------------------------------------- */

.familia-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(4px);
}

.familia-modal.is-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.familia-modal__card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #dbe4f0;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
    width: min(600px, 100%);
    padding: 28px;
    position: relative;
}

.familia-modal__card--wide {
    width: min(700px, 100%);
}

.familia-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.familia-modal__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.familia-modal__subtitle {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: #6b7280;
}

.familia-modal__close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #6b7280;
    transition: background 0.15s ease;
}

.familia-modal__close:hover {
    background: #e5e7eb;
    color: #111827;
}

.familia-modal__close svg {
    width: 16px;
    height: 16px;
}

.familia-modal__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.familia-modal__footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    flex-wrap: wrap;
}

.familia-modal__warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #991b1b;
}

.familia-modal__warning svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #dc2626;
}

.familia-modal__summary {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
}

.familia-modal__summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.familia-modal__summary-item span:first-child {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.familia-modal__summary-item span:last-child {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

/* Checkboxes do encerramento ----------------------------------------------- */

.familia-motivos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.familia-motivo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.familia-motivo-item:has(input:checked) {
    border-color: #93c5fd;
    background: #eff6ff;
}

.familia-motivo-item input[type="checkbox"] {
    margin: 0;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #1d4ed8;
    width: 15px;
    height: 15px;
}

.familia-motivo-item label {
    font-size: 0.83rem;
    color: #374151;
    cursor: pointer;
    line-height: 1.4;
    font-weight: 500;
}

/* Campos do modal ---------------------------------------------------------- */

.familia-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.familia-field label {
    font-size: 0.84rem;
    font-weight: 600;
    color: #374151;
}

.familia-field input,
.familia-field select,
.familia-field textarea {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 0.92rem;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.15s, outline 0.15s;
    font-family: inherit;
}

.familia-field input:focus,
.familia-field select:focus,
.familia-field textarea:focus {
    outline: 2px solid #c7d2fe;
    outline-offset: 1px;
    border-color: #93c5fd;
}

.familia-field textarea {
    resize: vertical;
    min-height: 80px;
}

.familia-field--required label::after {
    content: ' *';
    color: #dc2626;
}

.familia-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.familia-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .familia-header {
        grid-template-columns: 1fr;
    }

    .familia-header__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .familia-motivos-grid {
        grid-template-columns: 1fr;
    }

    .familia-grid-2,
    .familia-grid-3 {
        grid-template-columns: 1fr;
    }

    .familia-modal__summary {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Prontuário — Modal e entradas de atendimento
   ========================================================================== */

.prontuario-modal-card {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.prontuario-modal-body {
    overflow-y: auto;
    padding: 0 !important;
}

/* Estado vazio */
.prontuario-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: #9ca3af;
    text-align: center;
    font-size: 0.9rem;
}

.prontuario-empty svg {
    opacity: 0.35;
}

/* Lista de atendimentos */
.prontuario-list {
    display: flex;
    flex-direction: column;
}

/* Entrada individual (details/summary) */
.prontuario-entry {
    border-bottom: 1px solid #e5e7eb;
}

.prontuario-entry:last-child {
    border-bottom: none;
}

.prontuario-entry__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #fafafa;
    transition: background 0.15s ease;
}

.prontuario-entry__summary::-webkit-details-marker {
    display: none;
}

.prontuario-entry__summary:hover {
    background: #f3f4f6;
}

.prontuario-entry[open] > .prontuario-entry__summary {
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
}

.prontuario-entry__summary-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.prontuario-entry__chevron {
    flex-shrink: 0;
    color: #6b7280;
    transition: transform 0.2s ease;
}

.prontuario-entry[open] .prontuario-entry__chevron {
    transform: rotate(180deg);
}

.prontuario-entry__date {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.prontuario-entry__badge {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
}

.prontuario-entry__badge--aberto {
    background: #dbeafe;
    color: #1e40af;
}

.prontuario-entry__badge--encerrado {
    background: #f3f4f6;
    color: #6b7280;
}

/* Corpo expandido */
.prontuario-entry__body {
    padding: 18px 24px 20px;
    background: #ffffff;
}

.prontuario-entry__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 28px;
}

.prontuario-entry__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.prontuario-entry__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9ca3af;
}

.prontuario-entry__value {
    font-size: 0.88rem;
    color: #111827;
    font-weight: 500;
    line-height: 1.5;
}

.prontuario-entry__footer {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .prontuario-entry__grid {
        grid-template-columns: 1fr;
    }

    .prontuario-entry__summary {
        padding: 12px 16px;
    }

    .prontuario-entry__body {
        padding: 14px 16px 16px;
    }
}

/* ==========================================================================
   Vincular Pessoa Cadastrada — modal de busca
   ========================================================================== */

/* Campo de busca com ícone e spinner */
.vincular-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.vincular-search-icon {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    pointer-events: none;
    flex-shrink: 0;
}

.vincular-search-input {
    width: 100%;
    padding: 10px 40px 10px 38px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #111827;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.vincular-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.vincular-search-spinner {
    display: none;
    position: absolute;
    right: 12px;
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: vincular-spin 0.7s linear infinite;
}

@keyframes vincular-spin {
    to { transform: rotate(360deg); }
}

/* Lista de resultados */
.vincular-results {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

.vincular-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s ease;
}

.vincular-result-item:last-child {
    border-bottom: none;
}

.vincular-result-item:hover {
    background: #f9fafb;
}

.vincular-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vincular-result-nome {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vincular-result-meta {
    font-size: 0.78rem;
    color: #6b7280;
}

.vincular-result-btn {
    flex-shrink: 0;
}

.vincular-results-empty {
    margin: 10px 0 0;
    font-size: 0.88rem;
    color: #9ca3af;
    text-align: center;
    padding: 12px 0;
}

/* Card da pessoa selecionada */
.vincular-selected-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 12px 16px;
}

.vincular-selected-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #1e40af;
}

.vincular-selected-info svg {
    flex-shrink: 0;
    color: #3b82f6;
}

.vincular-selected-info strong {
    display: block;
    font-size: 0.92rem;
    color: #1e3a8a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vincular-selected-info span {
    font-size: 0.78rem;
    color: #3b82f6;
}

.vincular-selected-clear {
    flex-shrink: 0;
}

/* =====================================================================
   Pessoas page — inline layout (replaces modal-based search)
   ===================================================================== */

.pessoas-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pessoas-page-header h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
}

.pessoas-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 900px) {
    .pessoas-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .pessoas-metrics {
        grid-template-columns: 1fr;
    }
}

.pessoas-metric-card {
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    background: none;
    text-align: left;
    font-family: inherit;
    transition: box-shadow 0.15s, transform 0.1s, border-color 0.15s;
}


.pessoas-metric-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.pessoas-metric-card:active {
    transform: translateY(0);
}

.pessoas-metric-card.is-active {
    box-shadow: 0 0 0 2px currentColor;
    outline: none;
}

.pessoas-metric-card--blue  { background: #eff6ff; border-color: #bfdbfe; }
.pessoas-metric-card--green { background: #f0fdf4; border-color: #bbf7d0; }
.pessoas-metric-card--amber { background: #fffbeb; border-color: #fde68a; }
.pessoas-metric-card--red   { background: #fff1f2; border-color: #fecdd3; }

.pessoas-metric-card--blue.is-active  { border-color: #3b82f6; box-shadow: 0 0 0 2px #bfdbfe; }
.pessoas-metric-card--green.is-active { border-color: #22c55e; box-shadow: 0 0 0 2px #bbf7d0; }
.pessoas-metric-card--amber.is-active { border-color: #f59e0b; box-shadow: 0 0 0 2px #fde68a; }
.pessoas-metric-card--red.is-active   { border-color: #f87171; box-shadow: 0 0 0 2px #fecdd3; }

.pessoas-metric-card__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pessoas-metric-card--blue  .pessoas-metric-card__icon { background: #dbeafe; color: #1d4ed8; }
.pessoas-metric-card--green .pessoas-metric-card__icon { background: #dcfce7; color: #15803d; }
.pessoas-metric-card--amber .pessoas-metric-card__icon { background: #fef3c7; color: #b45309; }
.pessoas-metric-card--red   .pessoas-metric-card__icon { background: #fee2e2; color: #b91c1c; }

.pessoas-metric-card__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pessoas-metric-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pessoas-metric-card__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
}

.pessoas-metric-card--blue  .pessoas-metric-card__value { color: #1e40af; }
.pessoas-metric-card--green .pessoas-metric-card__value { color: #14532d; }
.pessoas-metric-card--amber .pessoas-metric-card__value { color: #92400e; }
.pessoas-metric-card--red   .pessoas-metric-card__value { color: #991b1b; }

.pessoas-metric-card__label {
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.pessoas-metric-card--blue  .pessoas-metric-card__label { color: #3b82f6; }
.pessoas-metric-card--green .pessoas-metric-card__label { color: #22c55e; }
.pessoas-metric-card--amber .pessoas-metric-card__label { color: #f59e0b; }
.pessoas-metric-card--red   .pessoas-metric-card__label { color: #f87171; }

.pessoas-metric-delta {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
}

.pessoas-metric-delta--up   { background: #dcfce7; color: #15803d; }
.pessoas-metric-delta--down { background: #fee2e2; color: #b91c1c; }
.pessoas-metric-delta--flat { background: #f3f4f6; color: #6b7280; }

.pessoas-filter-form {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pessoas-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.pessoas-filter-row .entity-field {
    min-width: 160px;
    flex: 1 1 160px;
}

.pessoas-filter-row__search {
    flex: 2 1 220px !important;
}

.pessoas-filter-row__actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.pessoas-filter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}

.pessoas-filter-toolbar__info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #6b7280;
}

.pessoas-preset-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.pessoas-preset-tag svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    flex-shrink: 0;
}

.pessoas-results-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pessoas-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.pessoas-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pessoas-results-table thead th {
    background: #f9fafb;
    color: #374151;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.pessoas-results-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}

.pessoas-results-table tbody tr:last-child {
    border-bottom: none;
}

.pessoas-results-table tbody tr:hover {
    background: #f9fafb;
}

.pessoas-results-table td {
    padding: 10px 14px;
    vertical-align: middle;
    color: #374151;
}

.pessoas-name-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pessoas-name-cell strong {
    font-weight: 600;
    color: #111827;
}

.pessoas-name-cell__no-family {
    font-size: 0.78rem;
    color: #9ca3af;
    font-style: italic;
}

.pessoas-family-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.pessoas-family-code {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}

.pessoas-member-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.pessoas-member-badge--green { background: #dcfce7; color: #15803d; }
.pessoas-member-badge--blue  { background: #dbeafe; color: #1d4ed8; }
.pessoas-member-badge--red   { background: #fee2e2; color: #b91c1c; }

.pessoas-td-mono {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: #4b5563;
    white-space: nowrap;
}

.pessoas-td-action {
    position: relative;
    white-space: nowrap;
}

.pessoas-action-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pessoas-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.pessoas-badge--primary {
    background: #dbeafe;
    color: #1d4ed8;
}

.pessoas-badge--dependent {
    background: #f3e8ff;
    color: #7c3aed;
}

.pessoas-badge--neutral {
    background: #f3f4f6;
    color: #6b7280;
}

.entity-button--sm {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 0.82rem;
    border-radius: 10px;
}

.entity-button--sm .entity-button__icon {
    width: 14px;
    height: 14px;
}

.entity-button--sm .entity-button__icon svg {
    width: 14px;
    height: 14px;
}

/* Sort buttons inside table headers */
.pessoas-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    white-space: nowrap;
    line-height: 1;
}

.pessoas-sort-btn:hover {
    color: #1d4ed8;
}

.pessoas-sort-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: opacity 0.1s;
}

.pessoas-sort-icon--idle {
    opacity: 0.35;
}

.pessoas-sort-icon--active {
    opacity: 1;
    color: #2563eb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOVOS CHIPS DE PERFIL (roles adicionados na reestruturação 2026-04-15)
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-role-chip--coordenador {
    background: #f0fdf4;
    border-color: #86efac;
    color: #15803d;
}

.admin-role-chip--gestor_cliente {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

.admin-role-chip--suporte {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #334155;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHECKBOXES DE PERFIL — estado marcado e visual aprimorado
   ═══════════════════════════════════════════════════════════════════════════ */

/* Esconde o checkbox nativo e usa o layout do label */
.role-option input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #d1d5db;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    position: relative;
    flex-shrink: 0;
}

.role-option input[type="checkbox"]:checked {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

/* Marca de check via pseudo-elemento */
.role-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Label completo marcado — fundo e borda coloridos */
.role-option:has(input[type="checkbox"]:checked) {
    border-color: #2563eb;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.14);
}

.role-option:has(input[type="checkbox"]:checked):hover {
    border-color: #1d4ed8;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
}

/* Estado disabled */
.role-option:has(input[type="checkbox"]:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Formulário de busca: campos na primeira linha, botões numa linha própria */
.admin-search-form {
    grid-template-columns: minmax(0, 2fr) repeat(auto-fill, minmax(150px, 1fr));
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL DE USUÁRIO — melhorias visuais
   ═══════════════════════════════════════════════════════════════════════════ */

/* Separador de seção dentro do form */
.admin-form-section {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
}

.admin-form-section__label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.admin-form-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Zona de perigo dentro do modal (desativar/ativar usuário) */
.user-settings-danger {
    border-top: 1px solid #fee2e2;
    padding-top: 14px;
    margin-top: 4px;
}

.user-settings-danger button {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid #fca5a5;
    background: #fff5f5;
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.user-settings-danger button:hover:not([disabled]) {
    background: #fee2e2;
    border-color: #f87171;
}

.user-settings-danger button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Botão "Ativar usuário" */
.user-settings-danger button.reactivate-btn,
.user-settings-danger form[action*="reactivate"] button {
    border-color: #86efac;
    background: #f0fdf4;
    color: #15803d;
}

.user-settings-danger form[action*="reactivate"] button:hover {
    background: #dcfce7;
    border-color: #4ade80;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE ERRO 403
   ═══════════════════════════════════════════════════════════════════════════ */

.error-403-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 70px);
    padding: 32px 20px;
}

.error-403-card {
    width: min(520px, 100%);
    text-align: center;
    padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
    background:
        radial-gradient(circle at top center, rgba(239, 68, 68, 0.06), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border: 1px solid #fecaca;
    border-radius: 28px;
    box-shadow:
        0 2px 0 #fca5a5,
        0 20px 50px rgba(239, 68, 68, 0.08),
        0 6px 20px rgba(15, 23, 42, 0.06);
}

.error-403-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 1px solid #fca5a5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.error-403-icon svg {
    width: 34px;
    height: 34px;
}

.error-403-code {
    font-size: clamp(4rem, 10vw, 6rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.error-403-title {
    margin: 0 0 12px;
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

.error-403-message {
    margin: 0 0 8px;
    color: #374151;
    font-size: 1rem;
    line-height: 1.6;
}

.error-403-hint {
    margin: 0 0 28px;
    color: #9ca3af;
    font-size: 0.88rem;
    line-height: 1.5;
}

.error-403-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-403-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border: none;
}

.error-403-btn:hover {
    transform: translateY(-2px);
}

.error-403-btn--primary {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(29, 78, 216, 0.22);
}

.error-403-btn--primary:hover {
    box-shadow: 0 14px 28px rgba(29, 78, 216, 0.3);
}

.error-403-btn--secondary {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.error-403-btn--secondary:hover {
    background: #e2e8f0;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

@media (max-width: 480px) {
    .error-403-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .error-403-btn {
        justify-content: center;
    }
}

/* Responsivo: telas médias */
@media (max-width: 1200px) {
    .admin-search-form {
        grid-template-columns: minmax(0, 2fr) repeat(2, minmax(140px, 1fr));
    }
}

/* Responsivo: telas pequenas */
@media (max-width: 860px) {
    .admin-search-form {
        grid-template-columns: 1fr 1fr;
    }

    .admin-search-form__field--wide {
        grid-column: span 2;
    }

    .admin-search-form__actions {
        grid-column: span 2;
    }

    /* Em mobile, "Novo usuário" fica numa linha separada */
    .admin-search-form__actions .admin-button:last-child {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 1400px) {
    .app-executive-dashboard__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .app-executive-dashboard__grid--top,
    .app-executive-dashboard__grid--bottom,
    .app-executive-dashboard__footer {
        grid-template-columns: 1fr;
    }

    .app-executive-health-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-executive-growth-card {
        grid-template-columns: 1fr;
    }

    .app-executive-growth-card__primary {
        border-right: 0;
        border-bottom: 1px solid #e5f0e7;
    }
}

@media (max-width: 760px) {
    .app-executive-dashboard__stats,
    .app-executive-kpi-grid,
    .app-executive-health-grid {
        grid-template-columns: 1fr;
    }

    .app-executive-stat-card,
    .app-executive-alert-card,
    .app-executive-info-card {
        padding: 16px;
        border-radius: 18px;
    }

    .app-executive-panel-card {
        padding: 18px;
        border-radius: 20px;
    }

    .app-executive-growth-card__primary,
    .app-executive-growth-card__secondary {
        padding: 20px 18px;
    }

    .app-executive-metric-row {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .app-executive-metric-row__stats {
        justify-items: start;
        text-align: left;
    }

    .app-dashboard-ranking__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    .app-executive-stat-card {
        min-height: 0;
        align-items: flex-start;
    }

    .app-executive-stat-card__icon {
        width: 52px;
        height: 52px;
    }

    .app-executive-stat-card__value,
    .app-executive-health-item strong,
    .app-executive-kpi-box strong,
    .app-executive-growth-card__primary strong {
        font-size: 1.85rem;
    }

    .app-executive-growth-card__primary {
        align-items: flex-start;
    }
}