/* ==========================================================
   COMPONENTS CSS – BỘ THÀNH PHẦN DÙNG CHUNG TOÀN HỆ THỐNG
   Không khai báo component này trong layout.css/responsive.css.
   ========================================================== */

/* ----------------------------------------------------------
   NÚT LỆNH
   ---------------------------------------------------------- */

.ui-button {
    min-height: var(--control-height-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    transition:
        background-color var(--duration-fast) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard),
        box-shadow var(--duration-fast) var(--easing-standard),
        transform var(--duration-fast) var(--easing-standard);
}

.ui-button:hover {
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.ui-button:active {
    box-shadow: var(--shadow-xs);
    transform: translateY(0);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"],
.ui-button.is-loading {
    opacity: 0.58;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

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

.ui-button--primary:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
}

.ui-button--secondary {
    color: var(--color-primary-700);
    border-color: var(--color-primary-200);
    background: var(--color-primary-50);
}

.ui-button--secondary:hover {
    border-color: var(--color-primary-300);
    background: var(--color-primary-100);
}

.ui-button--danger {
    color: var(--color-white);
    border-color: var(--color-danger-600);
    background: var(--color-danger-600);
}

.ui-button--danger:hover {
    border-color: var(--color-danger-700);
    background: var(--color-danger-700);
}

.ui-button--ghost {
    color: var(--color-text-soft);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.ui-button--ghost:hover {
    color: var(--color-primary-700);
    background: var(--color-primary-50);
}

.ui-button--sm {
    min-height: var(--control-height-sm);
    padding-inline: var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

.ui-button--lg {
    min-height: var(--control-height-lg);
    padding-inline: var(--space-5);
    font-size: var(--font-size-md);
}

.ui-icon-button {
    width: var(--touch-target-min);
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-soft);
    cursor: pointer;
    background: var(--color-surface);
    transition:
        color var(--duration-fast) var(--easing-standard),
        background-color var(--duration-fast) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard);
}

.ui-icon-button:hover {
    color: var(--color-primary-700);
    border-color: var(--color-primary-200);
    background: var(--color-primary-50);
}

/* ----------------------------------------------------------
   BIỂU MẪU
   ---------------------------------------------------------- */

.ui-form {
    width: 100%;
    max-width: var(--form-max-width);
}

.ui-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-4);
}

.ui-field {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--space-2);
}

.ui-field--half {
    grid-column: span 6;
}

.ui-label {
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.ui-required {
    color: var(--color-danger-600);
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    min-height: var(--control-height-md);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: inset 0 1px 2px rgba(10, 22, 38, 0.03);
    transition:
        border-color var(--duration-fast) var(--easing-standard),
        box-shadow var(--duration-fast) var(--easing-standard),
        background-color var(--duration-fast) var(--easing-standard);
}

.ui-textarea {
    min-height: 7rem;
    resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
    color: var(--color-slate-400);
}

.ui-input:hover,
.ui-select:hover,
.ui-textarea:hover {
    border-color: var(--color-slate-400);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    border-color: var(--color-primary-400);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled,
.ui-input[readonly],
.ui-textarea[readonly] {
    color: var(--color-muted);
    cursor: not-allowed;
    background: var(--color-surface-muted);
}

.ui-field.is-invalid .ui-input,
.ui-field.is-invalid .ui-select,
.ui-field.is-invalid .ui-textarea,
.ui-input[aria-invalid="true"],
.ui-select[aria-invalid="true"],
.ui-textarea[aria-invalid="true"] {
    border-color: var(--color-danger-600);
    box-shadow: 0 0 0 3px var(--color-danger-100);
}

.ui-help,
.ui-error {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.45;
}

.ui-help {
    color: var(--color-muted);
}

.ui-error {
    color: var(--color-danger-700);
    font-weight: var(--font-weight-medium);
}

.ui-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.ui-check input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1rem;
    accent-color: var(--color-primary);
}

/* ----------------------------------------------------------
   CARD
   ---------------------------------------------------------- */

.ui-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.ui-card__header,
.ui-card__body,
.ui-card__footer {
    padding: var(--space-4);
}

.ui-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.ui-card__title {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.ui-card__description {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--color-slate-25);
}

.ui-stat-card {
    display: grid;
    gap: var(--space-2);
    min-height: 7.5rem;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.ui-stat-card__label {
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.ui-stat-card__value {
    color: var(--color-primary-800);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.ui-stat-card__meta {
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

/* ----------------------------------------------------------
   BADGE
   ---------------------------------------------------------- */

.ui-badge {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    background: var(--color-surface-muted);
}

.ui-badge--success {
    color: var(--color-success-700);
    border-color: var(--color-success-100);
    background: var(--color-success-50);
}

.ui-badge--warning {
    color: var(--color-warning-700);
    border-color: var(--color-warning-100);
    background: var(--color-warning-50);
}

.ui-badge--danger {
    color: var(--color-danger-700);
    border-color: var(--color-danger-100);
    background: var(--color-danger-50);
}

.ui-badge--info {
    color: var(--color-info-700);
    border-color: var(--color-info-100);
    background: var(--color-info-50);
}

/* ----------------------------------------------------------
   BẢNG DỮ LIỆU
   ---------------------------------------------------------- */

.ui-table-shell {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}

.ui-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.ui-table-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.ui-table {
    width: 100%;
    min-width: 42rem;
    color: var(--color-text-soft);
    font-size: var(--font-size-sm);
}

.ui-table th,
.ui-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.ui-table th {
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    background: var(--color-slate-50);
}

.ui-table tbody tr {
    transition:
        background-color var(--duration-fast) var(--easing-standard);
}

.ui-table tbody tr:hover {
    background: var(--color-primary-50);
}

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

.ui-table-sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: inherit;
    font: inherit;
    font-weight: inherit;
    border: 0;
    cursor: pointer;
    background: transparent;
}

/* ----------------------------------------------------------
   TOAST
   ---------------------------------------------------------- */

.ui-toast-region {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    width: min(24rem, calc(100vw - 2 * var(--space-4)));
    display: grid;
    gap: var(--space-2);
    pointer-events: none;
}

.ui-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation:
        ui-toast-enter
        var(--duration-normal)
        var(--easing-emphasized);
}

.ui-toast--success {
    border-left-color: var(--color-success-600);
}

.ui-toast--warning {
    border-left-color: var(--color-warning-600);
}

.ui-toast--error {
    border-left-color: var(--color-danger-600);
}

.ui-toast--info {
    border-left-color: var(--color-info-600);
}

.ui-toast__title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.ui-toast__message {
    margin: var(--space-1) 0 0;
    color: var(--color-text-soft);
    font-size: var(--font-size-xs);
}

.ui-toast__close {
    min-width: 2rem;
    min-height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    background: transparent;
}

.ui-toast__close:hover {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

@keyframes ui-toast-enter {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }

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

/* ----------------------------------------------------------
   DIALOG
   ---------------------------------------------------------- */

.ui-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--color-overlay);
    backdrop-filter: blur(2px);
}

.ui-dialog {
    z-index: var(--z-dialog);
    width: min(100%, var(--dialog-max-width));
    max-height: min(88vh, 48rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.ui-dialog__header,
.ui-dialog__body,
.ui-dialog__footer {
    padding: var(--space-4);
}

.ui-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.ui-dialog__title {
    margin: 0;
    font-size: var(--font-size-lg);
}

.ui-dialog__body {
    overflow-y: auto;
    color: var(--color-text-soft);
}

.ui-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: 1px solid var(--color-border);
    background: var(--color-slate-25);
}

/* ----------------------------------------------------------
   LOADING
   ---------------------------------------------------------- */

.ui-spinner {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 0.75s linear infinite;
}

.ui-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    color: var(--color-primary-700);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(1px);
}

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ----------------------------------------------------------
   TRẠNG THÁI RỖNG VÀ THÔNG BÁO NỘI DUNG
   ---------------------------------------------------------- */

.ui-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    color: var(--color-muted);
    text-align: center;
}

.ui-alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-info-100);
    border-radius: var(--radius-md);
    color: var(--color-info-700);
    background: var(--color-info-50);
}

.ui-alert--success {
    color: var(--color-success-700);
    border-color: var(--color-success-100);
    background: var(--color-success-50);
}

.ui-alert--warning {
    color: var(--color-warning-700);
    border-color: var(--color-warning-100);
    background: var(--color-warning-50);
}

.ui-alert--danger {
    color: var(--color-danger-700);
    border-color: var(--color-danger-100);
    background: var(--color-danger-50);
}

/* DASHBOARD COMPONENTS */
.ui-icon{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.ui-icon--sm{width:1rem;height:1rem}.ui-icon--md{width:1.25rem;height:1.25rem}.ui-icon--lg{width:1.75rem;height:1.75rem}.ui-icon--xl{width:2.5rem;height:2.5rem}.ui-breadcrumb{color:var(--color-muted);font-size:var(--font-size-sm)}.ui-breadcrumb__list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}.ui-breadcrumb__item{display:inline-flex;gap:var(--space-2)}.ui-dashboard-card{min-height:9.75rem;display:grid;grid-template-rows:1fr auto;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);background:var(--color-surface);box-shadow:var(--shadow-xs);transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.ui-dashboard-card:hover{color:var(--color-text);text-decoration:none;box-shadow:var(--shadow-sm);transform:translateY(-2px)}.ui-dashboard-card__top{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-2)}.ui-dashboard-card__icon,.ui-empty-state__icon{display:grid;place-items:center;color:var(--color-primary-700);background:var(--color-primary-50)}.ui-dashboard-card__icon{width:2.875rem;height:2.875rem;border-radius:var(--radius-md)}.ui-dashboard-card__body{display:grid;align-content:start;gap:var(--space-1)}.ui-dashboard-card__title{font-size:var(--font-size-md);line-height:var(--line-height-heading)}.ui-dashboard-card__description{min-width:0;color:var(--color-text-soft);font-size:var(--font-size-sm);line-height:var(--line-height-body);text-wrap:pretty}.ui-dashboard-card__action{display:flex;align-items:center;justify-content:space-between;color:var(--color-primary-700);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.ui-notice{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--color-info-100);border-radius:var(--radius-md);color:var(--color-info-700);background:var(--color-info-50)}.ui-notice p{margin:var(--space-1) 0 0;color:var(--color-text-soft)}.ui-empty-state{min-height:16rem;display:grid;place-items:center;align-content:center;gap:var(--space-3);padding:var(--space-8);border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);text-align:center;background:var(--color-surface)}.ui-empty-state__icon{width:4rem;height:4rem;border-radius:var(--radius-xl)}.ui-empty-state h2,.ui-empty-state p{margin:0}.ui-empty-state p{max-width:36rem;color:var(--color-muted)}

/* BUSINESS COMPONENTS */
.business-toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.business-filter-bar{display:grid;gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.business-filter-bar__fields{display:grid;grid-template-columns:minmax(14rem,2fr) repeat(2,minmax(9rem,1fr));gap:var(--space-3)}
.business-filter-bar__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2)}
.business-result-summary{margin:0;color:var(--color-muted);font-size:var(--font-size-sm)}
.business-table-wrap{overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.business-table{margin:0;min-width:54rem}
.business-table caption{padding:var(--space-3) var(--space-4);font-weight:var(--font-weight-semibold);text-align:left}
.business-table th.is-end,.business-table td.is-end{text-align:right}
.business-table__actions{white-space:nowrap;text-align:right}
.business-table__no-action{color:var(--color-muted);font-size:var(--font-size-sm)}
.business-table__empty{text-align:center;padding:var(--space-8)}
.business-table__empty strong,.business-table__empty span{display:block}
.business-table__empty span{margin-top:var(--space-2);color:var(--color-muted)}
.business-pagination{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);font-size:var(--font-size-sm)}
.business-pagination__actions{display:flex;gap:var(--space-2)}
.business-detail-section{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.business-detail-section h2{margin:0 0 var(--space-4);font-size:var(--font-size-lg)}
.business-detail-list{display:grid;gap:var(--space-3);margin:0}
.business-detail-list__item{display:grid;grid-template-columns:minmax(10rem,14rem) minmax(0,1fr);gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.business-detail-list__item:last-child{padding-bottom:0;border-bottom:0}
.business-detail-list dt{color:var(--color-muted);font-weight:var(--font-weight-medium)}
.business-detail-list dd{margin:0;font-weight:var(--font-weight-semibold)}
.business-error-state{padding:var(--space-6);border:1px solid var(--color-danger-100);border-radius:var(--radius-lg);background:var(--color-danger-50)}

/* ACCOUNT MANAGEMENT */
.account-page{max-width:1500px;margin:0 auto}
.account-page__header{margin-bottom:var(--space-1)}
.account-filter-bar{display:grid;grid-template-columns:minmax(10rem,1.55fr) minmax(7rem,.68fr) minmax(7rem,.68fr) max-content max-content;align-items:end;gap:var(--space-2);padding:var(--space-3) var(--space-4)}
.account-filter-bar>.ui-field{min-width:0;grid-column:auto}
.account-filter-bar__search{min-width:0}
.account-filter-bar__action{min-width:0;min-height:2.75rem;padding-inline:.85rem;align-self:end;white-space:nowrap}
.account-result-summary{padding-inline:var(--space-1)}
.account-table-wrap{overflow:visible}
.account-table{width:100%;min-width:0;table-layout:fixed}
.account-table__col-account{width:13%}
.account-table__col-name{width:19%}
.account-table__col-role{width:25%}
.account-table__col-class{width:12%}
.account-table__col-status{width:8%}
.account-table__col-actions{width:23%}
.account-table th,.account-table td{padding-inline:.9rem}
.account-table th:first-child,.account-table td:first-child{padding-left:1.25rem}
.account-table th:last-child,.account-table td:last-child{padding-right:1.25rem}
.account-table__identity{white-space:nowrap}
.account-table__identity strong{font-weight:var(--font-weight-bold)}
.account-table__roles{white-space:normal;line-height:1.4;overflow-wrap:anywhere}
.account-table__status-heading,.account-table__status-cell{text-align:center}
.account-status-icon{width:1.9rem;height:1.9rem;display:inline-grid;place-items:center;border-radius:50%}
.account-status-icon--success{color:var(--color-success-700);background:var(--color-success-50)}
.account-status-icon--warning{color:var(--color-warning-700);background:var(--color-warning-50)}
.account-status-icon--danger{color:var(--color-danger-700);background:var(--color-danger-50)}
.account-action-group{display:flex;align-items:center;justify-content:flex-end;gap:.3rem;min-width:0}
.account-action-group form{display:inline-flex;margin:0}
.account-action-button{width:2rem;height:2rem;flex:0 0 auto;padding:0}
.account-action-button--danger{color:var(--color-danger-700);border-color:var(--color-danger-100);background:var(--color-danger-50)}
.account-action-button--danger:hover{border-color:var(--color-danger-600);background:var(--color-danger-100)}
.account-action-button--success{color:var(--color-success-700);border-color:var(--color-success-100);background:var(--color-success-50)}
.account-action-button--success:hover{border-color:var(--color-success-600);background:var(--color-success-100)}
.account-dialog-shell{width:min(820px,calc(100vw - 32px))}
.account-password-dialog-shell{width:min(760px,calc(100vw - 32px))}
.account-dialog-form{display:grid;gap:.7rem;color:var(--color-text)}
.account-dialog__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem .8rem}
.account-dialog__field{min-width:0;grid-column:auto}
.account-dialog__field--wide{grid-column:1/-1}
.account-dialog__class-note{display:flex;align-items:center;min-width:0;padding:.15rem .1rem;color:var(--color-muted);font-size:var(--font-size-sm);line-height:1.4}
.account-dialog__roles{min-width:0;margin:0;padding:0;border:0}
.account-role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem .7rem;margin-top:.2rem;padding:.55rem .65rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-slate-25)}
.account-role-option{min-width:0;padding:.15rem .1rem}
.account-role-option span{line-height:1.3}
.account-dialog__roles>.ui-help{display:block;margin-top:.3rem}
.account-dialog__identity{margin:0;color:var(--color-text-soft)}
.account-dialog__identity strong{color:var(--color-text)}
.account-dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-2)}
.account-dialog__error{margin:0}
.account-import-dialog-shell{width:min(820px,calc(100vw - 32px))}
.account-import-dialog{display:grid;gap:.85rem;color:var(--color-text)}
.account-import-dialog__guide{padding:.75rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-slate-25)}
.account-import-dialog__guide strong{display:block;margin-bottom:.35rem}
.account-import-dialog__guide ol{margin:.2rem 0 0;padding-left:1.25rem;color:var(--color-text-soft);line-height:1.55}
.account-import-dialog__upload{display:grid;gap:.5rem}
.account-import-dialog__file-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.account-import-dialog__file-head .ui-label{margin:0}
.account-import-dialog__file-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-2)}
.ui-file-picker,.account-import-dialog__file-picker{position:relative;display:flex;align-items:center;gap:.65rem;min-width:0;min-height:2.75rem;padding:.35rem .45rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.ui-file-picker__native,.account-import-dialog__native-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ui-file-picker__choose,.account-import-dialog__choose{flex:0 0 auto}
.ui-file-picker__filename,.account-import-dialog__filename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text-soft);font-size:var(--font-size-sm)}
.ui-input[type="file"]{height:auto;min-height:2.75rem;padding:.3rem .4rem;color:var(--color-text-soft);background:var(--color-surface)}
.ui-input[type="file"]::file-selector-button{min-height:2rem;margin-right:.65rem;padding:.3rem .65rem;border:1px solid var(--color-primary-100);border-radius:var(--radius-md);color:var(--color-primary-700);background:var(--color-primary-50);font:inherit;font-weight:var(--font-weight-semibold);cursor:pointer}
.ui-input[type="file"]::file-selector-button:hover{border-color:var(--color-primary-300);background:var(--color-primary-100)}
.account-import-dialog__check{min-width:6.5rem;justify-content:center}
.account-import-dialog__result{display:grid;gap:.55rem;min-height:0}
.account-import-dialog__result:empty{display:none}
.account-import-dialog__result--error{padding:.7rem .8rem;border:1px solid var(--color-danger-100);border-radius:var(--radius-md);background:var(--color-danger-50);color:var(--color-danger-700)}
.account-import-dialog__summary{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.account-import-dialog__summary-title{margin-right:.15rem;font-weight:var(--font-weight-bold)}
.account-import-dialog__summary-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:999px;background:var(--color-slate-50);color:var(--color-text-soft);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}
.account-import-dialog__summary-chip--success{background:var(--color-success-50);color:var(--color-success-700)}
.account-import-dialog__summary-chip--danger{background:var(--color-danger-50);color:var(--color-danger-700)}
.account-import-dialog__success{margin:0;padding:.6rem .75rem;border:1px solid var(--color-success-100);border-radius:var(--radius-md);background:var(--color-success-50);color:var(--color-success-700)}
.account-import-dialog__error-table-wrap{overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-md)}
.account-import-dialog__error-table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm)}
.account-import-dialog__error-table th,.account-import-dialog__error-table td{padding:.45rem .55rem;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.account-import-dialog__error-table tr:last-child td{border-bottom:0}
.account-import-dialog__error-table th{background:var(--color-slate-25);font-weight:var(--font-weight-semibold)}
/* PHASE 17B - ROLE PERMISSION MANAGEMENT */
.permission-page { max-width:1500px; margin:0 auto; }
.permission-page__header { margin-bottom:var(--space-3); }
.permission-role-switcher {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:var(--space-2);
    margin-bottom:var(--space-3);
}
.permission-role-chip {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center;
    gap:.4rem;
    min-height:3rem;
    padding:.6rem .75rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    color:var(--color-text);
    background:var(--color-surface);
    text-decoration:none;
}
.permission-role-chip:hover {
    text-decoration:none;
    border-color:var(--color-primary-200);
    background:var(--color-primary-50);
}
.permission-role-chip.is-active {
    border-color:var(--color-primary-300);
    background:var(--color-primary-50);
    box-shadow:inset 3px 0 0 var(--color-primary-600);
}
.permission-role-chip__label {
    min-width:0;
    font-weight:var(--font-weight-semibold);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.permission-role-chip__count {
    font-size:var(--font-size-xs);
    color:var(--color-muted);
    white-space:nowrap;
}
.permission-role-chip__lock {
    display:grid;
    place-items:center;
    color:var(--color-primary-700);
}
.permission-role-form { display:grid; gap:var(--space-3); }
.permission-role-summary {
    position:sticky;
    top:5.15rem;
    z-index:calc(var(--z-sticky) - 1);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:var(--space-3);
    padding:.85rem 1rem;
    box-shadow:var(--shadow-sm);
}
.permission-role-summary__body { min-width:0; display:grid; gap:.22rem; }
.permission-role-summary__title-row {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    flex-wrap:wrap;
}
.permission-role-summary__title-row h2 {
    margin:0;
    font-size:var(--font-size-lg);
    line-height:var(--line-height-heading);
}
.permission-role-summary__body p {
    margin:0;
    color:var(--color-text-soft);
    font-size:var(--font-size-sm);
}
.permission-role-summary__meta {
    display:flex;
    flex-wrap:wrap;
    gap:.25rem 1rem;
    color:var(--color-muted);
    font-size:var(--font-size-xs);
}
.permission-role-summary__action {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:var(--space-2);
    flex-wrap:wrap;
}
.permission-role-summary__locked {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    max-width:24rem;
    color:var(--color-text-soft);
    font-size:var(--font-size-sm);
}
.permission-system-note {
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.6rem .8rem;
}
.permission-system-note > div {
    min-width:0;
    display:flex;
    align-items:baseline;
    gap:.45rem;
    flex-wrap:wrap;
}
.permission-system-note span {
    color:var(--color-text-soft);
    font-size:var(--font-size-sm);
}
.permission-module-columns {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--space-3);
    align-items:start;
}
.permission-module-column {
    min-width:0;
    display:grid;
    gap:var(--space-3);
    align-content:start;
}
.permission-module-card { min-width:0; overflow:hidden; }
.permission-module-card.has-pending-changes {
    border-color:var(--color-primary-200);
    box-shadow:0 0 0 1px var(--color-primary-100);
}
.permission-module-card__header {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:var(--space-2);
    min-height:3.35rem;
    padding:.45rem .7rem .45rem .85rem;
    border-bottom:0;
    background:var(--color-slate-25);
}
.permission-module-card.is-expanded .permission-module-card__header {
    border-bottom:1px solid var(--color-border);
}
.permission-module-card__disclosure {
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    padding:.15rem 0;
    border:0;
    color:inherit;
    background:transparent;
    text-align:left;
    cursor:pointer;
}
.permission-module-card__disclosure:focus-visible {
    outline:2px solid var(--color-primary-400);
    outline-offset:3px;
    border-radius:var(--radius-sm);
}
.permission-module-card__heading { min-width:0; display:grid; gap:.08rem; }
.permission-module-card__title {
    color:var(--color-text);
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-heading);
}
.permission-module-card__heading [data-permission-group-count] {
    color:var(--color-muted);
    font-size:var(--font-size-xs);
}
.permission-module-card__chevron {
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:var(--color-muted);
    transition:transform .16s ease;
}
.permission-module-card.is-expanded .permission-module-card__chevron { transform:rotate(90deg); }
.permission-module-card__toggle {
    flex:0 0 auto;
    margin:0;
    padding:.25rem .35rem;
    font-size:var(--font-size-xs);
    white-space:nowrap;
}
.permission-module-card__body[hidden] { display:none; }
.permission-option-list { display:grid; }
.permission-option {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:.55rem;
    padding:.5rem .85rem;
    border-bottom:1px solid var(--color-border);
    cursor:pointer;
}
.permission-option:last-child { border-bottom:0; }
.permission-option:hover { background:var(--color-primary-50); }
.permission-option.is-disabled { cursor:default; background:var(--color-slate-25); }
.permission-option input { margin-top:.15rem; }
.permission-option__content { min-width:0; display:grid; gap:.08rem; }
.permission-option__content strong {
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-semibold);
    line-height:1.3;
}
.permission-option__content small {
    color:var(--color-text-soft);
    font-size:var(--font-size-xs);
    line-height:1.32;
}
.permission-option__dependency { color:var(--color-muted)!important; }

/* PHASE 17C - ACCOUNT PERMISSION CENTER */
.permission-center-tabs {
    display:inline-grid;
    grid-template-columns:repeat(3,minmax(8.5rem,auto));
    gap:.25rem;
    margin-bottom:var(--space-3);
    padding:.25rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    background:var(--color-surface);
}
.permission-center-tab {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:2.35rem;
    padding:.4rem .8rem;
    border-radius:calc(var(--radius-md) - 2px);
    color:var(--color-text-soft);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-semibold);
    text-decoration:none;
}
.permission-center-tab:hover { text-decoration:none; background:var(--color-primary-50); color:var(--color-primary-700); }
.permission-center-tab.is-active {background: var(--color-primary-100);color: var(--color-primary-700);}
.permission-account-selector {
    margin-bottom:var(--space-3);
    padding:.75rem .9rem;
}
.permission-account-selector__field { grid-column:auto; margin:0; }
.permission-account-form { display:grid; gap:var(--space-3); }
.permission-account-summary__stats {
    display:flex;
    align-items:center;
    gap:.45rem;
    flex-wrap:wrap;
    margin-top:.15rem;
}
.permission-account-summary__stats > span {
    display:inline-flex;
    align-items:baseline;
    gap:.28rem;
    padding:.22rem .48rem;
    border-radius:999px;
    background:var(--color-slate-50);
    color:var(--color-text-soft);
}
.permission-account-summary__stats strong { color:var(--color-text); font-size:var(--font-size-sm); }
.permission-account-summary__stats small { font-size:var(--font-size-xs); }
.permission-account-summary__stats .is-allow { background:var(--color-success-50); }
.permission-account-summary__stats .is-deny { background:var(--color-danger-50); }
.permission-account-summary__stats .is-effective { background:var(--color-primary-50); }
.permission-module-card__override-count { color:var(--color-primary-700); }
.account-permission-option-list { display:grid; }
.account-permission-option {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(9.5rem,11rem);
    align-items:center;
    gap:var(--space-3);
    padding:.55rem .85rem;
    border-bottom:1px solid var(--color-border);
}
.account-permission-option:last-child { border-bottom:0; }
.account-permission-option:hover { background:var(--color-primary-50); }
.account-permission-option.is-disabled { background:var(--color-slate-25); }
.account-permission-option__content { gap:.12rem; }
.account-permission-option__source {
    display:flex;
    gap:.35rem;
    flex-wrap:wrap;
    margin-top:.15rem;
}
.account-permission-option__control { display:grid; min-width:0; }
.account-permission-effect-select { width:100%; min-width:0; }

/* PHASE 17D - EFFECTIVE PERMISSION & SCOPE */
.effective-permission-summary { margin-bottom:var(--space-3); }
.effective-permission-note { margin-bottom:var(--space-3); }
.effective-scope-section,
.effective-permission-section {
    display:grid;
    gap:var(--space-2);
    margin-bottom:var(--space-3);
}
.effective-scope-section__heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--space-3);
    padding:0 .1rem;
}
.effective-scope-section__heading h2 {
    margin:0;
    color:var(--color-text);
    font-size:var(--font-size-lg);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-heading);
}
.effective-scope-section__heading p {
    margin:.12rem 0 0;
    color:var(--color-muted);
    font-size:var(--font-size-xs);
    line-height:1.45;
}
.effective-scope-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--space-2);
}
.effective-scope-card {
    min-width:0;
    display:grid;
    align-content:start;
    gap:.35rem;
    padding:.72rem .8rem;
    box-shadow:var(--shadow-sm);
}
.effective-scope-card__head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:.55rem;
}
.effective-scope-card__head strong {
    min-width:0;
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-bold);
    line-height:1.35;
}
.effective-scope-card__head .ui-badge {
    flex:0 0 auto;
    max-width:65%;
    white-space:normal;
    text-align:right;
}
.effective-scope-card__detail {
    color:var(--color-text-soft);
    font-size:var(--font-size-xs);
    line-height:1.4;
}
.effective-scope-card small {
    color:var(--color-muted);
    font-size:var(--font-size-xs);
    line-height:1.42;
}
.effective-scope-card--success { border-color:var(--color-success-100); }
.effective-scope-card--info { border-color:var(--color-primary-100); }
.effective-permission-option-list { display:grid; }
.effective-permission-option {
    padding:.55rem .85rem;
    border-bottom:1px solid var(--color-border);
    background:var(--color-surface);
}
.effective-permission-option:last-child { border-bottom:0; }
.effective-permission-option.is-effective { background:var(--color-surface); }
.effective-permission-option:hover { background:var(--color-primary-50); }
.effective-permission-option__badges {
    display:flex;
    flex-wrap:wrap;
    gap:.3rem;
    margin-top:.12rem;
}
.effective-permission-option__reason {
    color:var(--color-primary-700)!important;
}

/* ==========================================================
   PHASE 18B - SYSTEM AUDIT LOG
   ========================================================== */
.system-log { display:grid; gap:var(--space-4); }
.system-log__header { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); }
.system-log__header h1 { margin:0; font-size:clamp(var(--font-size-3xl),2.4vw,2rem); line-height:1.15; }
.system-log__header p { margin:.35rem 0 0; color:var(--color-text-soft); font-size:var(--font-size-sm); }
.system-log-availability { display:flex; align-items:center; gap:var(--space-2); padding:.7rem .9rem; border:1px solid var(--color-info-100); border-radius:var(--radius-md); background:var(--color-info-50); color:var(--color-info-700); font-size:var(--font-size-sm); }
.system-log-availability[hidden] { display:none; }
.system-log-availability--warning { border-color:var(--color-warning-100); background:var(--color-warning-50); color:var(--color-warning-700); }
.system-log-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:var(--space-2); align-items:stretch; }
.system-log-metric { display:grid; align-content:center; gap:.1rem; min-height:3.7rem; padding:.65rem .9rem; border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); box-shadow:var(--shadow-xs); }
.system-log-metric strong { color:var(--color-text); font-size:1.2rem; line-height:1.05; }
.system-log-metric span { color:var(--color-text-soft); font-size:11.5px; font-weight:var(--font-weight-semibold); }
.system-log-metric--success { background:var(--color-success-50); border-color:var(--color-success-100); }
.system-log-metric--danger { background:var(--color-danger-50); border-color:var(--color-danger-100); }
.system-log-metric--warning { background:var(--color-warning-50); border-color:var(--color-warning-100); }
.system-log-overview__actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); min-width:max-content; }
.system-log-refresh,
.system-log-export,
.system-log-purge { width:auto; min-width:7.25rem; justify-content:center; }
.system-log-refresh__icon { display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; line-height:1; transition:transform var(--duration-fast) var(--easing-standard); }
.system-log-refresh:hover .system-log-refresh__icon { transform:rotate(28deg); }
.system-log-filter { display:grid; grid-template-columns:minmax(13rem,1.55fr) minmax(9rem,.8fr) minmax(13rem,1.25fr) minmax(8rem,.7fr) minmax(9rem,.75fr) minmax(9rem,.75fr); gap:var(--space-2); align-items:end; padding:var(--space-3) var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-xs); }
.system-log-filter > .ui-field { grid-column:auto; min-width:0; }
.system-log-result-summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); color:var(--color-muted); font-size:var(--font-size-sm); }
.system-log-result-summary__actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); }
.system-log-table-scroll { max-height:clamp(24rem,58vh,42rem); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.system-log-table { min-width:72rem; table-layout:auto; }
.system-log-table thead th { position:sticky; top:0; z-index:1; background:var(--color-surface); box-shadow:0 1px 0 var(--color-border); }
.system-log-table th:nth-child(1) { width:10.75rem; }
.system-log-table th:nth-child(2) { width:9.5rem; }
.system-log-table th:nth-child(4) { width:9.25rem; }
.system-log-table th:nth-child(6) { width:7.5rem; }
.system-log-table th:nth-child(7) { width:5.25rem; }
.system-log-table td { vertical-align:top; }
.system-log-table td small { display:block; margin-top:.18rem; color:var(--color-muted); font-size:11px; }
.system-log-table__time strong { white-space:nowrap; color:var(--color-text); font-size:var(--font-size-sm); }
.system-log-actor { color:var(--color-text); font-weight:var(--font-weight-semibold); }
.system-log-action { color:var(--color-text); font-size:var(--font-size-sm); font-weight:var(--font-weight-semibold); }
.system-log-detail-trigger { appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:2rem; padding:.38rem .72rem; border:1px solid var(--color-primary-100); border-radius:var(--radius-md); background:var(--color-primary-50); color:var(--color-primary-700); cursor:pointer; font:inherit; font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); line-height:1.2; }
.system-log-detail-trigger:hover { border-color:var(--color-primary-200); background:var(--color-primary-100); }
.system-log-detail-trigger:focus-visible { outline:2px solid var(--color-primary-400); outline-offset:2px; }
.system-log-detail-trigger[aria-busy="true"] { opacity:.65; cursor:wait; }
.system-log-detail-modal { --dialog-max-width:48rem; }
.system-log-detail-modal__content { display:grid; gap:var(--space-4); min-width:0; }
.system-log-detail-modal__meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4); margin:0; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-slate-25); }
.system-log-detail-modal__meta > div { min-width:0; }
.system-log-detail-modal__meta-wide { grid-column:1 / -1; }
.system-log-detail-modal__meta dt,
.system-log-detail-modal__details dt { color:var(--color-muted); font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); }
.system-log-detail-modal__meta dd,
.system-log-detail-modal__details dd { margin:.15rem 0 0; color:var(--color-text); font-size:var(--font-size-sm); overflow-wrap:anywhere; word-break:break-word; }
.system-log-detail-modal__meta code,
.system-log-detail-modal__request code { color:var(--color-text); font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.system-log-detail-modal__section { display:grid; gap:var(--space-2); min-width:0; }
.system-log-detail-modal__section h3 { margin:0; color:var(--color-text); font-size:var(--font-size-sm); }
.system-log-detail-modal__section p { margin:0; color:var(--color-text-soft); font-size:var(--font-size-sm); white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.system-log-detail-modal__details { display:grid; gap:0; margin:0; overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-md); }
.system-log-detail-modal__details > div { display:grid; grid-template-columns:minmax(8rem,.7fr) minmax(0,1.3fr); gap:var(--space-3); padding:var(--space-3); }
.system-log-detail-modal__details > div + div { border-top:1px solid var(--color-border); }
.system-log-detail-modal__request { padding-top:var(--space-1); }
.system-log-detail-modal__note { margin:0; color:var(--color-warning-700); font-size:var(--font-size-xs); }
.system-log-purge-dialog { --dialog-max-width:38rem; }
.system-log-purge-dialog__content { display:grid; gap:var(--space-3); min-width:0; }
.system-log-purge-dialog__summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.system-log-purge-dialog__summary > div { display:grid; gap:.2rem; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-slate-25); }
.system-log-purge-dialog__summary span { color:var(--color-muted); font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); }
.system-log-purge-dialog__summary strong { color:var(--color-text); font-size:var(--font-size-sm); }
.system-log-purge-dialog__warning { margin:0; padding:.7rem .85rem; border:1px solid var(--color-warning-100); border-radius:var(--radius-md); background:var(--color-warning-50); color:var(--color-warning-700); font-size:var(--font-size-sm); }
.system-log-purge-dialog__actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); }
.system-log-empty { padding:var(--space-6) !important; text-align:center !important; color:var(--color-muted); }
.system-log-pagination { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-2); color:var(--color-text-soft); font-size:var(--font-size-sm); }

/* ==========================================================
   HEALTH CENTER – SYSTEM STATUS COMPONENTS
   ========================================================== */
.health-center{display:grid;gap:.72rem;max-width:1500px;margin:0 auto;padding-bottom:.65rem}
.health-center__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.health-center__eyebrow{margin:0 0 .18rem;color:var(--color-primary-700);font-size:.7rem;font-weight:800;letter-spacing:.08em}
.health-center__header h1{margin:0;color:var(--color-text);font-size:clamp(var(--font-size-3xl),2vw,2rem);line-height:1.1}
.health-overview{display:grid;grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(76px,.38fr)) minmax(155px,.7fr) auto;gap:.5rem}
.health-overview>*{min-height:60px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.health-overview__primary{display:flex;align-items:center;gap:.65rem;padding:.58rem .8rem}
.health-overview__indicator{width:.7rem;height:.7rem;flex:0 0 auto;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.health-overview__primary--danger .health-overview__indicator{background:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12)}
.health-overview__primary strong,.health-overview__primary span{display:block}
.health-overview__primary strong{font-size:.88rem}
.health-overview__primary span{margin-top:.1rem;color:var(--color-muted);font-size:.68rem;line-height:1.3}
.health-overview__metric{display:grid;place-content:center;text-align:center}
.health-overview__metric-value{font-size:1.2rem;font-weight:800;line-height:1;color:var(--color-text)}
.health-overview__metric-label{margin-top:.22rem;color:var(--color-muted);font-size:.66rem}
.health-overview__checked{display:grid;align-content:center;padding:.55rem .72rem}
.health-overview__checked span{color:var(--color-muted);font-size:.64rem}
.health-overview__checked strong{margin-top:.15rem;font-size:.72rem;font-weight:700}
.health-overview__refresh{align-self:stretch;justify-content:center;white-space:nowrap}
.health-group{display:grid;gap:.3rem}
.health-group__heading{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;padding:0 .1rem}
.health-group__heading h2{margin:0;font-size:.84rem;font-weight:800;color:var(--color-primary-700);letter-spacing:.01em}
.health-group__heading span{color:var(--color-muted);font-size:.62rem}
.health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.health-card{display:grid;align-content:start;gap:.35rem;min-height:68px;padding:.58rem .68rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.health-card--compact{min-height:0;padding:.52rem .68rem}
.health-card__top{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.health-card__identity{display:flex;align-items:center;gap:.46rem;min-width:0}
.health-card__dot{width:.5rem;height:.5rem;flex:0 0 auto;border-radius:50%;background:#16a34a}
.health-card--degraded .health-card__dot,.health-card--not_configured .health-card__dot{background:#d97706}
.health-card--error .health-card__dot{background:#dc2626}
.health-card h3{margin:0;font-size:.76rem;line-height:1.2}
.health-card__status{flex:0 0 auto;padding:.18rem .4rem;border-radius:999px;background:#ecfdf3;color:#15803d;font-size:.58rem;font-weight:800;white-space:nowrap}
.health-card--degraded .health-card__status,.health-card--not_configured .health-card__status{background:#fff7ed;color:#c2410c}
.health-card--error .health-card__status{background:#fef2f2;color:#b91c1c}
.health-card__message{margin:0;color:var(--color-text-soft);font-size:.66rem;line-height:1.32}
.health-card__metrics{display:flex;flex-wrap:wrap;gap:.22rem .68rem;margin:0;padding-top:.3rem;border-top:1px solid var(--color-border)}
.health-card__metrics div{min-width:72px}
.health-card__metrics dt{color:var(--color-muted);font-size:.56rem}
.health-card__metrics dd{margin:.04rem 0 0;color:var(--color-text);font-size:.64rem;font-weight:700;overflow-wrap:anywhere}
.health-card__detail{margin:0;padding:.34rem .46rem;border-radius:var(--radius-md);background:var(--color-surface-soft);color:var(--color-muted);font-size:.61rem;line-height:1.3}
@media(max-width:1250px){.health-overview{grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(74px,.4fr)) minmax(150px,.7fr)}.health-overview__refresh{grid-column:1/-1;min-height:42px}.health-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.health-overview{grid-template-columns:repeat(4,1fr)}.health-overview__primary{grid-column:1/-1}.health-overview__checked{grid-column:span 1}.health-overview__refresh{grid-column:span 3}.health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.health-center__header{display:grid}.health-overview{grid-template-columns:repeat(3,1fr)}.health-overview__primary,.health-overview__checked,.health-overview__refresh{grid-column:1/-1}.health-grid{grid-template-columns:1fr}.health-card{min-height:0}}

/* ==========================================================
   BACKUP CENTER – SYSTEM BACKUP COMPONENTS
   ========================================================== */
.backup-center{display:grid;gap:1rem;max-width:1500px;margin:0 auto;padding-bottom:1rem}
.backup-center__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.backup-center__eyebrow{margin:0 0 .25rem;color:var(--color-primary-700);font-size:.78rem;font-weight:800;letter-spacing:.08em}
.backup-center__header h1{margin:0;color:var(--color-text);font-size:clamp(var(--font-size-3xl),2vw,2rem);line-height:1.15}
.backup-center__create{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.backup-center__create-main{display:flex;align-items:center;gap:1.25rem;min-width:0}
.backup-center__create h2{margin:0;font-size:1.05rem;color:var(--color-text);white-space:nowrap}
.backup-center__scope{display:flex;flex-wrap:wrap;gap:.45rem}
.backup-center__scope span{padding:.34rem .58rem;border-radius:999px;background:var(--color-surface-soft);color:var(--color-text-soft);font-size:.76rem;font-weight:700;white-space:nowrap}
.backup-center__create-action{flex:0 0 auto}
.backup-history{display:grid;gap:.6rem}
.backup-history__heading{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.backup-history__heading h2{margin:0;color:var(--color-primary-700);font-size:1rem;font-weight:800}
.backup-history__heading span{color:var(--color-muted);font-size:.76rem}
.backup-history__table-wrap{overflow:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}
.backup-history__table{width:100%;border-collapse:collapse;min-width:980px}
.backup-history__table th,.backup-history__table td{padding:.72rem .78rem;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:middle}
.backup-history__table th{background:var(--color-surface-soft);color:var(--color-text-soft);font-size:.76rem;font-weight:800;white-space:nowrap}
.backup-history__table td{font-size:.8rem;color:var(--color-text)}
.backup-history__table tbody tr:last-child td{border-bottom:0}
.backup-history__table td strong{font-size:.8rem}
.backup-history__checksum{display:block;margin-top:.14rem;color:var(--color-muted);font-size:.68rem;font-family:monospace}
.backup-history__status{display:inline-flex;align-items:center;padding:.28rem .48rem;border-radius:999px;font-size:.7rem;font-weight:800}
.backup-history__status--success{background:#ecfdf3;color:#15803d}
.backup-history__status--failed{background:#fef2f2;color:#b91c1c}
.backup-history__status--partial{background:#fff7ed;color:#c2410c}
.backup-history__action{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;white-space:nowrap}
.backup-history__action form{margin:0}
.backup-history__missing{color:var(--color-muted);font-size:.72rem}
.backup-history__empty{padding:2rem 1rem;border:1px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-muted);text-align:center;font-size:.84rem}
@media(max-width:900px){.backup-center__create,.backup-center__create-main{align-items:flex-start;flex-direction:column}.backup-center__create-action{width:100%}.backup-center__create-action .ui-button{width:100%;justify-content:center}}

/* ==========================================================
   RESTORE CENTER – SYSTEM RESTORE COMPONENTS
   ========================================================== */
.restore-center{
    display:grid;
    gap:1.15rem;
    max-width:1500px;
    margin:0 auto;
    padding-bottom:1rem;
}
.restore-center__header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
}
.restore-center__header h1{
    margin:0;
    color:var(--color-text);
    font-size:clamp(var(--font-size-3xl),2.2vw,2rem);
    font-weight:700;
    line-height:1.18;
    letter-spacing:-.025em;
}
.restore-list{display:grid;gap:.65rem}
.restore-list__heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.75rem;
}
.restore-list__heading h2{
    margin:0;
    color:var(--color-primary-700);
    font-size:1.075rem;
    font-weight:700;
    line-height:1.35;
}
.restore-list__heading span{
    color:var(--color-muted);
    font-size:.75rem;
    font-weight:400;
}
.restore-list__table-wrap{
    overflow:auto;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
}
.restore-list__table{
    width:100%;
    min-width:820px;
    border-collapse:collapse;
}
.restore-list__table th,
.restore-list__table td{
    padding:.9rem 1rem;
    border-bottom:1px solid var(--color-border);
    text-align:left;
    vertical-align:middle;
}
.restore-list__table th{
    background:var(--color-surface-soft);
    color:var(--color-text-soft);
    font-size:.76rem;
    font-weight:600;
    white-space:nowrap;
}
.restore-list__table td{
    color:var(--color-text);
    font-size:.84rem;
    font-weight:400;
}
.restore-list__table td strong{
    display:block;
    font-size:.86rem;
    font-weight:600;
    line-height:1.4;
    overflow-wrap:anywhere;
}
.restore-list__meta{
    display:block;
    margin-top:.22rem;
    color:var(--color-muted);
    font-size:.72rem;
    font-weight:400;
    line-height:1.45;
}
.restore-list__table tbody tr:last-child td{border-bottom:0}
.restore-list__action{text-align:right!important;white-space:nowrap}
.restore-list__empty{
    padding:2rem 1rem;
    border:1px dashed var(--color-border);
    border-radius:var(--radius-lg);
    color:var(--color-muted);
    text-align:center;
    font-size:.84rem;
}

.restore-preview-dialog{
    width:min(94vw,1040px);
    max-height:min(90vh,56rem);
}
.restore-preview-dialog .ui-dialog__header{
    padding:1.15rem 1.3rem;
}
.restore-preview-dialog .ui-dialog__title{
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:-.01em;
}
.restore-preview-dialog .ui-dialog__body{
    padding:1.15rem 1.3rem;
}
.restore-preview-dialog .ui-dialog__footer{
    align-items:center;
    padding:.9rem 1.3rem;
}
.restore-preview-dialog .ui-dialog__footer form{margin:0}

.restore-preview{
    display:grid;
    gap:1rem;
    color:var(--color-text);
}
.restore-preview__hero{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:.75rem;
}
.restore-preview__file-icon{
    width:2.7rem;
    height:2.7rem;
    display:grid;
    place-items:center;
    border-radius:.7rem;
    color:var(--color-primary-700);
    background:var(--color-primary-50);
}
.restore-preview__identity{
    min-width:0;
    display:grid;
    justify-items:start;
    gap:.14rem;
}
.restore-preview__identity>strong{
    color:var(--color-text);
    font-size:.9rem;
    font-weight:600;
    line-height:1.4;
    overflow-wrap:anywhere;
}
.restore-preview__identity>span:not(.restore-inspection__status){
    color:var(--color-muted);
    font-size:.76rem;
    font-weight:400;
}
.restore-inspection__status{
    display:inline-flex;
    align-items:center;
    margin-top:.18rem;
    padding:.25rem .5rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:600;
    line-height:1.2;
}
.restore-inspection__status--success{background:#ecfdf3;color:#15803d}
.restore-inspection__status--danger{background:#fef2f2;color:#b91c1c}

.restore-preview__metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.65rem;
}
.restore-metric{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:.58rem;
    padding:.72rem .78rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
}
.restore-metric__icon{
    width:2rem;
    height:2rem;
    display:grid;
    place-items:center;
    border-radius:.6rem;
    color:var(--color-primary-700);
    background:var(--color-primary-50);
}
.restore-metric div{min-width:0}
.restore-metric strong{
    display:block;
    color:var(--color-text);
    font-size:.94rem;
    font-weight:700;
    line-height:1.15;
    overflow-wrap:anywhere;
}
.restore-metric span:not(.restore-metric__icon){
    display:block;
    margin-top:.16rem;
    color:var(--color-muted);
    font-size:.68rem;
    font-weight:400;
    line-height:1.3;
}

.restore-preview__columns{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
    gap:.8rem;
    align-items:start;
}
.restore-preview__section{
    min-width:0;
    display:grid;
    gap:.5rem;
}
.restore-preview__section-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:.75rem;
}
.restore-preview__section-heading h3{
    margin:0;
    color:var(--color-text);
    font-size:.96rem;
    font-weight:700;
    line-height:1.35;
}
.restore-preview__section-heading span{
    color:var(--color-muted);
    font-size:.7rem;
    font-weight:400;
}

.restore-preview__sheet-table,
.restore-preview__asset-list{
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    background:var(--color-surface);
}
.restore-preview__sheet-head,
.restore-preview__sheet-line{
    display:grid;
    grid-template-columns:minmax(0,1fr) 4rem 3.5rem;
    align-items:center;
    gap:.5rem;
    padding:.5rem .65rem;
}
.restore-preview__sheet-head{
    background:var(--color-surface-soft);
    color:var(--color-muted);
    font-size:.67rem;
    font-weight:600;
}
.restore-preview__sheet-line{
    border-top:1px solid var(--color-border);
    color:var(--color-text-soft);
    font-size:.74rem;
    font-weight:400;
}
.restore-preview__sheet-line strong{
    color:var(--color-text);
    font-size:.75rem;
    font-weight:600;
    overflow-wrap:anywhere;
}
.restore-preview__sheet-line span{text-align:right}
.restore-preview__more{
    border-top:1px solid var(--color-border);
}
.restore-preview__more summary{
    padding:.55rem .65rem;
    color:var(--color-primary-700);
    cursor:pointer;
    font-size:.7rem;
    font-weight:500;
}
.restore-preview__more[open] summary{
    border-bottom:1px solid var(--color-border);
}
.restore-preview__more .restore-preview__sheet-line:first-of-type{
    border-top:0;
}

.restore-preview__asset-list{
    display:grid;
}
.restore-preview__asset-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:.6rem;
    padding:.7rem .75rem;
    border-bottom:1px solid var(--color-border);
}
.restore-preview__asset-item:last-child{border-bottom:0}
.restore-preview__asset-icon{
    width:2rem;
    height:2rem;
    display:grid;
    place-items:center;
    border-radius:.58rem;
    color:var(--color-primary-700);
    background:var(--color-primary-50);
    font-size:.72rem;
    font-weight:700;
}
.restore-preview__asset-item div{min-width:0}
.restore-preview__asset-item div strong{
    display:block;
    color:var(--color-text);
    font-size:.76rem;
    font-weight:600;
    line-height:1.35;
}
.restore-preview__asset-item div span{
    display:block;
    margin-top:.12rem;
    color:var(--color-muted);
    font-size:.67rem;
    font-weight:400;
    line-height:1.35;
}
.restore-preview__asset-item>b{
    color:var(--color-text);
    font-size:.82rem;
    font-weight:700;
}

.restore-preview__safety-note{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:.5rem;
    padding:.58rem .7rem;
    border:1px solid var(--color-info-100);
    border-radius:var(--radius-md);
    color:var(--color-info-700);
    background:var(--color-info-50);
}
.restore-preview__safety-note>span{
    width:1.15rem;
    height:1.15rem;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--color-info-700);
    font-size:.66rem;
    font-weight:700;
}
.restore-preview__safety-note p{
    margin:0;
    font-size:.7rem;
    font-weight:400;
    line-height:1.45;
}

.restore-inspection__message{
    padding:.72rem .82rem;
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    font-size:.75rem;
    font-weight:400;
    line-height:1.5;
}
.restore-inspection__message strong{
    display:block;
    margin-bottom:.25rem;
    font-weight:600;
}
.restore-inspection__message ul{
    margin:.2rem 0 0;
    padding-left:1.1rem;
}
.restore-inspection__message--danger{
    border-color:#fecaca;
    background:#fef2f2;
    color:#991b1b;
}
.restore-inspection__message--warning{
    border-color:#fed7aa;
    background:#fff7ed;
    color:#9a3412;
}

.restore-running-overlay{
    position:fixed;
    inset:0;
    z-index:calc(var(--z-dialog) + 10);
    display:grid;
    place-items:center;
    padding:1rem;
    background:rgba(15,23,42,.5);
    backdrop-filter:blur(2px);
}
.restore-running-overlay__card{
    width:min(92vw,30rem);
    display:grid;
    justify-items:center;
    gap:.6rem;
    padding:1.25rem;
    border-radius:var(--radius-xl);
    background:var(--color-surface);
    box-shadow:var(--shadow-lg);
    text-align:center;
}
.restore-running-overlay__card strong{
    color:var(--color-text);
    font-size:.95rem;
    font-weight:700;
}
.restore-running-overlay__card span{
    color:var(--color-muted);
    font-size:.75rem;
    line-height:1.45;
}

@media(max-width:900px){
    .restore-preview__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .restore-preview__columns{grid-template-columns:1fr}
}
@media(max-width:640px){
    .restore-center__header h1{font-size:1.7rem}
    .restore-preview-dialog{width:min(96vw,1040px)}
    .restore-preview-dialog .ui-dialog__body{padding:1rem}
    .restore-preview__metrics{grid-template-columns:1fr}
    .restore-list__table th,.restore-list__table td{padding:.75rem .8rem}
}