@use "./tailwind.css";
@use "primeicons/primeicons.css";

@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    ::view-transition-old(hk-page-content) {
        animation: hk-view-content-out 120ms cubic-bezier(0.4, 0, 1, 1) both;
    }

    ::view-transition-new(hk-page-content) {
        animation: hk-view-content-in 200ms cubic-bezier(0, 0, 0.2, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(hk-page-content),
    ::view-transition-new(hk-page-content) {
        animation: none;
    }
}

.hk-route-shell {
    view-transition-name: hk-page-content;
}

@keyframes hk-view-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@keyframes hk-view-content-in {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* PrimeNG Overrides for cleaner look */
.p-card .p-card-body {
    padding: 1.25rem;
}

.p-dialog .p-dialog-header {
    padding: 1.25rem 1.5rem 0.5rem 1.5rem;
}

.p-dialog .p-dialog-content {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

/* Make tables denser in dashboard */
.p-datatable-sm .p-datatable-tbody > tr > td {
    padding: 0.5rem 0.75rem;
}

/* Shared CRUD table styling */
.hk-crud-search {
    align-items: center;
    display: inline-flex;
    min-width: 14rem;
    position: relative;
    width: 100%;
}

.hk-crud-search.p-iconfield {
    display: block;
    width: min(100%, 18rem);
}

.hk-crud-search > .pi {
    color: var(--p-text-muted-color);
    left: 0.75rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.hk-crud-search input {
    padding-left: 2.25rem;
    width: 100%;
}

.hk-crud-table-wrap {
    border: 1px solid var(--p-surface-border);
    border-radius: 0.75rem;
    overflow: auto;
}

.hk-crud-table .p-datatable-table-container {
    overflow: visible;
}

.hk-crud-table .p-datatable-thead > tr > th {
    white-space: nowrap;
}

.hk-crud-table .hk-actions-column,
.hk-crud-table .hk-actions-cell {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.hk-crud-table .hk-actions-cell app-table-row-actions {
    display: inline-flex;
    justify-content: flex-end;
}

.hk-feedback-message {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    padding: 0.75rem 0.875rem;
}

.hk-feedback-message--error {
    background: var(--p-red-50);
    border-color: var(--p-red-200);
    color: var(--p-red-700);
}

.hk-feedback-message--success {
    background: var(--p-green-50);
    border-color: var(--p-green-200);
    color: var(--p-green-700);
}

.hk-feedback-message--token {
    background: var(--p-primary-50);
    border-color: var(--p-primary-200);
    color: var(--p-primary-700);
}

.p-dark .hk-feedback-message--error {
    background: color-mix(in srgb, var(--p-red-950) 34%, var(--p-content-background));
    border-color: var(--p-red-700);
    color: var(--p-red-200);
}

.p-dark .hk-feedback-message--success {
    background: color-mix(in srgb, var(--p-green-950) 34%, var(--p-content-background));
    border-color: var(--p-green-700);
    color: var(--p-green-200);
}

.p-dark .hk-feedback-message--token {
    background: color-mix(in srgb, var(--p-primary-950) 34%, var(--p-content-background));
    border-color: var(--p-primary-700);
    color: var(--p-primary-200);
}

.table-row-actions-menu {
    min-width: 12rem;
}

.table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content .p-menu-item-link,
.table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content .p-menu-item-icon,
.table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content .p-menu-item-label {
    color: var(--p-red-600);
}

.table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content:hover {
    background: color-mix(in srgb, var(--p-red-500) 10%, transparent);
}

.p-dark .table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content .p-menu-item-link,
.p-dark .table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content .p-menu-item-icon,
.p-dark .table-row-actions-menu .table-row-actions-menu__item--danger > .p-menu-item-content .p-menu-item-label {
    color: var(--p-red-300);
}

.api-client-site-grants-popover {
    max-width: min(32rem, calc(100vw - 2rem));
}

.api-client-site-grants-popover-content {
    min-width: min(28rem, calc(100vw - 3.5rem));
}

.api-client-site-grants-popover-title {
    margin-bottom: 0.5rem;
    color: var(--p-text-muted-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.api-client-site-grants-popover-list {
    display: flex;
    max-height: 18rem;
    flex-direction: column;
    gap: 0.35rem;
    overflow: auto;
}

.api-client-site-grants-popover-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.4rem 0.45rem;
    border-radius: 0.45rem;
}

.api-client-site-grants-popover-row:hover {
    background: var(--p-content-hover-background);
}

.api-client-site-grants-popover-domain {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--p-text-color);
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.3;
}

.hk-owner-chip {
    border: 1px solid var(--p-primary-200);
    border-radius: 9999px;
    color: var(--p-primary-700);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .hk-crud-search {
        width: auto;
    }
}

/* Custom scrollbar for cleaner UI */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--p-surface-300);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--p-surface-400);
}
.p-dark ::-webkit-scrollbar-thumb {
    background: var(--p-surface-700);
}
.p-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--p-surface-600);
}

/* Shared auth pages (login/setup/password recovery) */
.hk-auth-page {
    align-items: center;
    background: var(--p-surface-ground);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1.25rem;
    transition: background-color 0.2s ease;
}

.p-dark .hk-auth-page {
    background: var(--p-surface-ground);
}

.hk-auth-shell {
    margin-inline: auto;
    width: 100%;
    max-width: 28rem;
}

.hk-auth-card {
    backdrop-filter: blur(4px);
    background: color-mix(in srgb, var(--p-surface-0) 97%, var(--p-surface-100) 3%);
    border: 1px solid color-mix(in srgb, var(--p-surface-300) 85%, var(--p-surface-200) 15%);
    border-radius: 1.15rem;
    box-shadow:
        0 1px 1px rgba(15, 23, 42, 0.06),
        0 16px 36px rgba(15, 23, 42, 0.12);
    padding: clamp(1.5rem, 3vw, 2rem);
    position: relative;
}

.p-dark .hk-auth-card {
    background: color-mix(in srgb, var(--p-surface-900) 96%, #000 4%);
    border-color: color-mix(in srgb, var(--p-surface-600) 82%, var(--p-surface-400) 18%);
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.45),
        0 18px 40px rgba(0, 0, 0, 0.5);
}

.hk-auth-header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.hk-auth-title {
    color: var(--p-text-color);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
}

.hk-auth-subtitle {
    color: var(--p-text-muted-color);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

.p-dark .hk-auth-subtitle {
    color: color-mix(in srgb, var(--p-text-color) 72%, var(--p-surface-200) 28%);
}

.hk-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hk-auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hk-auth-field-label {
    color: var(--p-text-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
}

.hk-auth-field-help {
    color: var(--p-text-muted-color);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}

.hk-auth-field-error {
    color: var(--p-red-500);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}

.hk-auth-alert {
    align-items: flex-start;
    border-radius: 0.75rem;
    display: flex;
    gap: 0.625rem;
    line-height: 1.4;
    padding: 0.75rem 0.875rem;
}

.hk-auth-alert-error {
    background: color-mix(in srgb, var(--p-red-500) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-red-500) 30%, transparent);
    color: var(--p-red-500);
}

.hk-auth-alert-success {
    background: color-mix(in srgb, var(--p-green-500) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-green-500) 30%, transparent);
    color: var(--p-green-600);
}

.p-dark .hk-auth-alert-success {
    color: var(--p-green-400);
}

.hk-auth-divider {
    align-items: center;
    color: var(--p-text-muted-color);
    display: flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.75rem;
    letter-spacing: 0.08em;
    margin: 0.125rem 0;
    text-transform: uppercase;
}

.p-dark .hk-auth-divider {
    color: color-mix(in srgb, var(--p-text-color) 56%, var(--p-surface-300) 44%);
}

.hk-auth-divider::before,
.hk-auth-divider::after {
    background: var(--p-surface-400);
    content: "";
    flex: 1;
    height: 1px;
}

.p-dark .hk-auth-divider::before,
.p-dark .hk-auth-divider::after {
    background: var(--p-surface-500);
}

.hk-auth-actions-center {
    display: flex;
    justify-content: center;
}

.hk-auth-actions-center .p-button {
    justify-content: center;
    min-width: 14rem;
}

.p-dark .hk-auth-actions-center .p-button.p-button-outlined {
    background: color-mix(in srgb, var(--p-surface-900) 92%, #000 8%);
    border-color: color-mix(in srgb, var(--p-surface-500) 80%, var(--p-primary-color) 20%);
    color: color-mix(in srgb, var(--p-text-color) 88%, var(--p-surface-0) 12%);
}

.p-dark .hk-auth-actions-center .p-button.p-button-outlined:not(:disabled):hover {
    background: color-mix(in srgb, var(--p-surface-800) 86%, #000 14%);
    border-color: color-mix(in srgb, var(--p-surface-400) 78%, var(--p-primary-color) 22%);
    color: var(--p-surface-0);
}

.hk-auth-link {
    color: var(--p-primary-color);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
}

.hk-auth-link:hover {
    text-decoration: underline;
}

.hk-auth-link-muted {
    color: var(--p-text-muted-color);
    font-size: 0.875rem;
    text-decoration: none;
}

.hk-auth-link-muted:hover {
    color: var(--p-primary-color);
}

.hk-auth-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.hk-auth-footer-text {
    color: var(--p-text-muted-color);
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0;
}

.p-dark .hk-auth-footer-text {
    color: color-mix(in srgb, var(--p-text-color) 66%, var(--p-surface-200) 34%);
}

.hk-auth-card :where(.p-inputtext, .p-password-input, .p-select, .p-inputnumber-input, .p-inputotp-input) {
    background: color-mix(in srgb, var(--p-surface-0) 95%, var(--p-surface-100) 5%);
    border-color: var(--p-surface-300);
}

.p-dark .hk-auth-card :where(.p-inputtext, .p-password-input, .p-select, .p-inputnumber-input, .p-inputotp-input) {
    background: color-mix(in srgb, var(--p-surface-950) 76%, #0b1220 24%);
    border-color: color-mix(in srgb, var(--p-surface-500) 72%, var(--p-primary-color) 28%);
    color: var(--p-text-color);
}

.p-dark .hk-auth-card :where(.p-inputtext, .p-password-input, .p-inputnumber-input)::placeholder {
    color: color-mix(in srgb, var(--p-text-color) 52%, var(--p-surface-500) 48%);
}

.hk-auth-card :where(a, button, input, textarea, select):focus-visible {
    border-radius: 0.5rem;
    outline: 2px solid var(--p-primary-color);
    outline-offset: 2px;
}

.api-client-required-asterisk {
    color: var(--p-red-600);
    margin-left: 0.125rem;
}

.p-dark .api-client-required-asterisk {
    color: var(--p-red-300);
}

@media (max-width: 480px) {
    .hk-auth-card {
        border-radius: 0.875rem;
        padding: 1.25rem;
    }

    .hk-auth-title {
        font-size: 1.25rem;
    }
}

.site-settings-stack {
    display: grid;
    gap: 1rem;
    --site-settings-card-bg: var(--p-content-background);
    --site-settings-border: var(--p-content-border-color);
    --site-settings-divider: var(--p-content-border-color);
    --site-settings-footer-bg: var(--p-surface-0);
    --site-settings-muted-bg: var(--p-surface-50);
    --site-settings-code-bg: var(--p-surface-900);
    --site-settings-code-text: var(--p-surface-0);
}

.site-settings-card {
    overflow: hidden;
    border: 1px solid var(--site-settings-border);
    border-radius: 8px;
    background: var(--site-settings-card-bg);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}

.site-settings-card--danger {
    border-color: color-mix(in srgb, var(--p-red-500) 30%, var(--site-settings-border));
}

.site-settings-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid var(--site-settings-divider);
}

.site-settings-card__title-row {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
}

.site-settings-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border: 1px solid var(--site-settings-border);
    border-radius: 8px;
    background: var(--site-settings-muted-bg);
    color: var(--p-text-muted-color);
}

.site-settings-card__icon--danger {
    border-color: color-mix(in srgb, var(--p-red-500) 30%, var(--site-settings-border));
    background: color-mix(in srgb, var(--p-red-50) 75%, var(--site-settings-card-bg));
    color: var(--p-red-600);
}

.site-settings-card h3,
.site-settings-card h4 {
    margin: 0;
    color: var(--p-text-color);
    font-size: 0.96rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.35;
}

.site-settings-card p {
    margin: 0.25rem 0 0;
    color: var(--p-text-muted-color);
    font-size: 0.875rem;
    line-height: 1.55;
}

.site-settings-card__body {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.site-settings-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-top: 1px solid var(--site-settings-divider);
    background: var(--site-settings-footer-bg);
}

.site-settings-field {
    display: grid;
    gap: 0.45rem;
}

.site-settings-field label,
.site-settings-field-label {
    color: var(--p-text-color);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.4;
}

.site-settings-field__hint,
.site-settings-field-hint {
    color: var(--p-text-muted-color);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.site-settings-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.site-settings-dialog-form {
    display: grid;
    gap: 0.875rem;
}

.hk-dialog-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.site-settings-member-grid {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 12rem);
}

.site-settings-inline-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.site-settings-inline-control--retention {
    flex-wrap: wrap;
}

.site-settings-number-input {
    width: 13.5rem;
    max-width: 100%;
}

.site-settings-number-input .p-inputnumber-input {
    min-width: 4.5rem;
}

.site-settings-value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--p-text-color);
    font-size: 0.925rem;
    font-weight: 650;
    line-height: 1.45;
}

.site-settings-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.site-settings-muted {
    color: var(--p-text-muted-color);
}

.site-settings-alert {
    border: 1px solid var(--site-settings-border);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.75rem 0.85rem;
}

.site-settings-alert--success {
    border-color: color-mix(in srgb, var(--p-green-500) 28%, var(--site-settings-border));
    background: color-mix(in srgb, var(--p-green-50) 80%, var(--site-settings-card-bg));
    color: var(--p-green-700);
}

.site-settings-alert--error {
    border-color: color-mix(in srgb, var(--p-red-500) 28%, var(--site-settings-border));
    background: color-mix(in srgb, var(--p-red-50) 80%, var(--site-settings-card-bg));
    color: var(--p-red-700);
}

.site-settings-alert--warn {
    border-color: color-mix(in srgb, var(--p-amber-500) 30%, var(--site-settings-border));
    background: color-mix(in srgb, var(--p-amber-50) 80%, var(--site-settings-card-bg));
    color: var(--p-amber-800);
}

.site-settings-alert--info {
    border-color: color-mix(in srgb, var(--p-blue-500) 28%, var(--site-settings-border));
    background: color-mix(in srgb, var(--p-blue-50) 80%, var(--site-settings-card-bg));
    color: var(--p-blue-800);
}

.site-settings-verifier-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.site-settings-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--site-settings-border);
    border-radius: 8px;
}

.site-settings-status-grid > div {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border-right: 1px solid var(--site-settings-divider);
    border-bottom: 1px solid var(--site-settings-divider);
}

.site-settings-status-grid > div:nth-child(3n) {
    border-right: 0;
}

.site-settings-status-grid > div:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.site-settings-status-grid span {
    color: var(--p-text-muted-color);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.site-settings-status-grid strong {
    min-width: 0;
    overflow: hidden;
    color: var(--p-text-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-settings-toggle-list {
    display: grid;
    gap: 0.35rem;
}

.site-settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--site-settings-divider);
}

.site-settings-toggle-row:last-child {
    border-bottom: 0;
}

.site-settings-subsection {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.35rem;
    padding: 0.9rem 0 0.45rem;
    border-top: 1px solid var(--site-settings-divider);
}

.site-settings-subsection h4 {
    margin: 0;
    color: var(--p-text-color);
    font-size: 0.875rem;
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.35;
}

.site-settings-subsection p {
    margin: 0;
    color: var(--p-text-muted-color);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.site-settings-toggle-row__text {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.site-settings-toggle-row__title {
    color: var(--p-text-color);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.35;
}

.site-settings-code-panel {
    margin: 0;
    overflow-x: auto;
    border: 1px solid var(--site-settings-border);
    border-radius: 8px;
    background: var(--site-settings-code-bg);
    color: var(--site-settings-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
    line-height: 1.55;
    padding: 1rem;
}

.site-settings-table-shell {
    overflow: hidden;
    border: 1px solid var(--site-settings-border);
    border-radius: 8px;
}

.site-settings-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--site-settings-divider);
    background: var(--site-settings-footer-bg);
}

.site-settings-table-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.site-settings-table-actions .hk-crud-search {
    max-width: 18rem;
}

.site-settings-empty {
    display: grid;
    gap: 0.35rem;
    place-items: center;
    min-height: 8rem;
    padding: 1.25rem;
    color: var(--p-text-muted-color);
    text-align: center;
}

.site-settings-empty i {
    color: var(--p-text-muted-color);
    font-size: 1.25rem;
}

.site-settings-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid var(--site-settings-border);
    background: var(--site-settings-muted-bg);
    color: var(--p-text-muted-color);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    padding: 0.35rem 0.55rem;
}

.site-settings-role-chip {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.35rem 0.55rem;
}

.site-settings-role-chip--owner {
    background: color-mix(in srgb, var(--p-green-100) 72%, var(--site-settings-card-bg));
    color: var(--p-green-700);
}

.site-settings-role-chip--admin {
    background: color-mix(in srgb, var(--p-blue-100) 72%, var(--site-settings-card-bg));
    color: var(--p-blue-700);
}

.site-settings-role-chip--editor {
    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--site-settings-card-bg));
    color: color-mix(in srgb, var(--p-primary-color) 70%, var(--p-text-color));
}

.site-settings-role-chip--viewer {
    background: var(--site-settings-muted-bg);
    color: var(--p-text-muted-color);
}

.site-settings-action-btn.p-button,
.site-settings-danger-action.p-button {
    min-width: 8.5rem;
}

.site-settings-split-button .p-splitbutton-defaultbutton,
.site-settings-split-button .p-splitbutton-menubutton {
    border-radius: 6px;
}

.p-dark .site-settings-stack {
    --site-settings-card-bg: color-mix(in srgb, var(--p-surface-900) 92%, var(--p-surface-950) 8%);
    --site-settings-border: color-mix(in srgb, var(--p-surface-700) 82%, var(--p-surface-600) 18%);
    --site-settings-divider: var(--p-surface-800);
    --site-settings-footer-bg: color-mix(in srgb, var(--p-surface-950) 68%, var(--p-surface-900) 32%);
    --site-settings-muted-bg: color-mix(in srgb, var(--p-surface-800) 82%, var(--p-surface-900) 18%);
    --site-settings-code-bg: #020617;
    --site-settings-code-text: var(--p-surface-100);
}

.p-dark .site-settings-card {
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.28);
}

.p-dark .site-settings-card__icon--danger {
    background: color-mix(in srgb, var(--p-red-950) 62%, var(--site-settings-card-bg));
    color: var(--p-red-300);
}

.p-dark .site-settings-alert--success {
    background: color-mix(in srgb, var(--p-green-950) 50%, var(--site-settings-card-bg));
    color: var(--p-green-300);
}

.p-dark .site-settings-alert--error {
    background: color-mix(in srgb, var(--p-red-950) 52%, var(--site-settings-card-bg));
    color: var(--p-red-300);
}

.p-dark .site-settings-alert--warn {
    background: color-mix(in srgb, var(--p-amber-950) 52%, var(--site-settings-card-bg));
    color: var(--p-amber-200);
}

.p-dark .site-settings-alert--info {
    background: color-mix(in srgb, var(--p-blue-950) 52%, var(--site-settings-card-bg));
    color: var(--p-blue-200);
}

.p-dark .site-settings-role-chip--owner {
    background: color-mix(in srgb, var(--p-green-900) 44%, var(--site-settings-card-bg));
    color: var(--p-green-300);
}

.p-dark .site-settings-role-chip--admin {
    background: color-mix(in srgb, var(--p-blue-900) 44%, var(--site-settings-card-bg));
    color: var(--p-blue-300);
}

.p-dark .site-settings-role-chip--editor {
    background: color-mix(in srgb, var(--p-primary-color) 20%, var(--site-settings-card-bg));
    color: color-mix(in srgb, var(--p-primary-color) 45%, var(--p-text-color));
}

.p-dark .site-settings-role-chip--viewer {
    background: color-mix(in srgb, var(--p-surface-800) 85%, var(--site-settings-card-bg));
    color: var(--p-text-color);
}

.p-dark .site-settings-card :where(.p-inputtext, .p-select, .p-inputnumber-input, textarea, select) {
    border-color: var(--site-settings-border);
    background: color-mix(in srgb, var(--p-surface-950) 70%, var(--p-surface-900) 30%);
    color: var(--p-text-color);
}

.p-dark .site-settings-card :where(.p-inputtext, .p-inputnumber-input, textarea)::placeholder {
    color: color-mix(in srgb, var(--p-text-muted-color) 78%, var(--p-surface-500) 22%);
    opacity: 1;
}

@media (max-width: 640px) {
    .site-settings-card__header,
    .site-settings-meta-row,
    .site-settings-field-grid,
    .site-settings-table-toolbar,
    .site-settings-table-actions {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .site-settings-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .site-settings-action-btn.p-button,
    .site-settings-danger-action.p-button,
    .site-settings-card__footer .p-button {
        width: 100%;
    }

    .site-settings-status-grid {
        grid-template-columns: 1fr;
    }

    .site-settings-status-grid > div,
    .site-settings-status-grid > div:nth-child(3n),
    .site-settings-status-grid > div:nth-last-child(-n + 3) {
        border-right: 0;
        border-bottom: 1px solid var(--site-settings-divider);
    }

    .site-settings-status-grid > div:last-child {
        border-bottom: 0;
    }
}
