/* Reusable UI baseline: use these classes in every area. */
.ui-card {
    padding: var(--ui-space-6);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
}
.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-brand);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.ui-button:hover { background: var(--ui-brand-hover); }
.ui-button--secondary { color: var(--ui-text); background: var(--ui-surface-soft); border-color: var(--ui-border); }
.ui-button--secondary:hover { background: var(--ui-border); }
.ui-button--danger { background: var(--ui-danger); }
.ui-button:focus-visible, .ui-input:focus-visible, .ui-tab:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-field { display: grid; gap: var(--ui-space-2); }
.ui-label { font-weight: 600; }
.ui-input { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--ui-text); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font: inherit; }
.ui-choice { display: flex; align-items: flex-start; gap: var(--ui-space-3); padding: var(--ui-space-4); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); cursor: pointer; }
.ui-choice input { width: 17px; height: 17px; margin-top: 3px; accent-color: var(--ui-brand); }
.ui-choice__description { display: block; color: var(--ui-muted); font-size: .875rem; }
.ui-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.ui-table { width: 100%; border-collapse: collapse; text-align: left; }
.ui-table th, .ui-table td { padding: 14px 16px; border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.ui-table th { font-size: .85rem; font-weight: 650; color: var(--ui-muted); background: var(--ui-surface-soft); }
.ui-table tbody tr:hover { background: var(--ui-surface-soft); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-tabs { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); border-bottom: 1px solid var(--ui-border); }
.ui-tab { display: inline-flex; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--ui-muted); text-decoration: none; }
.ui-tab[aria-current="page"], .ui-tab[aria-selected="true"] { border-color: var(--ui-brand); color: var(--ui-text); font-weight: 650; }
.ui-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 99px; background: var(--ui-surface-soft); border: 1px solid var(--ui-border); font-size: .75rem; font-weight: 650; }
.ui-dialog { width: min(520px, calc(100% - 32px)); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: var(--ui-surface); color: var(--ui-text); padding: var(--ui-space-6); }
.ui-dialog::backdrop { background: rgba(9, 22, 16, .72); }
@media (max-width: 599px) { .ui-tabs { flex-direction: column; } .ui-tab { border-bottom-width: 1px; } .ui-table th, .ui-table td { padding: 12px; } }

/* Admin baseline shared component refinements — no decorative top borders. */
.ui-card { box-shadow: 0 2px 12px rgba(25, 52, 37, .025); }
.ui-table-wrap { border-color: #e8eee9; }
.ui-table th { background: #f8faf8; color: #64756a; font-weight: 650; }
.ui-table tbody tr:hover { background: #f1f7f3; }
.ui-badge--success { background: #e9f7ee; border-color: #d3eadb; color: #23734b; }
.ui-badge--warning { background: #fff5e6; border-color: #f5e5c9; color: #9b651b; }
.ui-badge--danger { background: #fff0ed; border-color: #f4d9d2; color: #ac3528; }