body {
    font-family: var(--ui-font-sans);
    font-size: 0.9375rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ui-font-display);
    letter-spacing: var(--ui-tracking-tight);
}

code, pre, kbd, samp {
    font-family: var(--ui-font-mono);
}

.ui-page {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(61, 123, 255, 0.24), transparent 60%),
        radial-gradient(1100px 500px at -15% -25%, rgba(240, 136, 48, 0.2), transparent 55%),
        var(--ui-bg);
    color: var(--ui-text);
    min-height: 100vh;
}

.ui-page .bg-white {
    background-color: var(--ui-surface) !important;
}

.ui-page .bg-gray-50 {
    background-color: var(--ui-surface-2) !important;
}

.ui-page .bg-gray-100 {
    background-color: var(--ui-surface-2) !important;
}

.ui-page .bg-blue-50 {
    background-color: rgba(61, 123, 255, 0.14) !important;
}

.ui-page .bg-red-50 {
    background-color: rgba(255, 53, 88, 0.14) !important;
}

.ui-page .bg-green-50 {
    background-color: rgba(0, 212, 132, 0.14) !important;
}

.ui-page .bg-yellow-100 {
    background-color: rgba(255, 148, 32, 0.18) !important;
}

.ui-page .bg-green-100 {
    background-color: rgba(0, 212, 132, 0.2) !important;
}

.ui-page .bg-red-100 {
    background-color: rgba(255, 53, 88, 0.2) !important;
}

.ui-page .text-green-800 {
    color: #7ae8c0 !important;
}

.ui-page .text-red-800 {
    color: #ffb0be !important;
}

.ui-page .text-yellow-800 {
    color: #ffcc80 !important;
}

.ui-page .border,
.ui-page .border-gray-200,
.ui-page .border-gray-300 {
    border-color: var(--ui-border) !important;
}

.ui-page .border-green-200 {
    border-color: rgba(0, 212, 132, 0.45) !important;
}

.ui-page .border-yellow-200 {
    border-color: rgba(255, 148, 32, 0.45) !important;
}

.ui-page .border-red-200 {
    border-color: rgba(255, 53, 88, 0.45) !important;
}

.ui-page .text-gray-900 {
    color: var(--ui-text) !important;
}

.ui-page .text-gray-700,
.ui-page .text-gray-600,
.ui-page .text-gray-500 {
    color: var(--ui-text-muted) !important;
}

.ui-page .text-gray-400 {
    color: var(--ui-text-soft) !important;
}

.ui-page .text-blue-700 {
    color: #9bc8ff !important;
}

.ui-page .text-red-700 {
    color: #ffb0be !important;
}

.ui-page .text-red-600 {
    color: #ff8898 !important;
}

.ui-topbar-user {
    background: linear-gradient(120deg, #2a65ef, #3d7bff);
}

.ui-topbar-admin {
    background: linear-gradient(120deg, #c46a25, #f08830);
}

.ui-admin-tabs {
    gap: 0.25rem;
}

.ui-tab-link {
    color: var(--ui-text-muted);
    border-bottom: 2px solid transparent;
    padding: 0.9rem 0.75rem;
    font-family: var(--ui-font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--ui-tracking-caps);
    text-transform: uppercase;
    transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
}

.ui-tab-link:hover {
    color: var(--ui-text);
}

.ui-tab-link-active {
    color: var(--ui-accent);
    border-bottom-color: var(--ui-accent);
}

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

.ui-stat-card {
    box-shadow: none;
}

.ui-table table {
    border-collapse: separate;
    border-spacing: 0;
}

.ui-table {
    border-collapse: separate;
    border-spacing: 0;
}

.ui-table thead {
    background-color: var(--ui-surface-2) !important;
}

.ui-table tbody tr:hover {
    background-color: rgba(61, 123, 255, 0.08);
}

.ui-modal-backdrop {
    background-color: rgba(4, 8, 16, 0.66) !important;
    backdrop-filter: blur(2px);
}

.ui-modal-panel {
    border: 1px solid var(--ui-border);
    background-color: var(--ui-surface);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.5rem 0.875rem;
    border-radius: var(--ui-radius-sm);
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all var(--ui-transition-fast);
}

.ui-btn:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.ui-btn-primary {
    background: var(--ui-primary);
    color: #fff;
}

.ui-btn-primary:hover {
    background: var(--ui-primary-hover);
}

.ui-btn-secondary {
    background: var(--ui-surface-2);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

.ui-btn-secondary:hover {
    background: var(--ui-surface-3);
}

.ui-btn-danger {
    background: #c01838;
    color: #fff;
}

.ui-btn-danger:hover {
    background: #a51230;
}

.ui-action {
    color: var(--ui-text-muted) !important;
    transition: color var(--ui-transition-fast);
}

.ui-action:hover {
    color: var(--ui-text) !important;
}

.ui-action-success {
    color: #00d484 !important;
}

.ui-action-warn {
    color: #ff9420 !important;
}

.ui-action-danger {
    color: #ff6070 !important;
}

.ui-action-primary {
    color: #7aadff !important;
}

.ui-input,
.ui-select,
.ui-textarea {
    width: 100%;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface-2);
    color: var(--ui-text);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.22);
}

.ui-page button:focus-visible,
.ui-page a:focus-visible,
.ui-page input:focus-visible,
.ui-page select:focus-visible,
.ui-page textarea:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.3);
    border-radius: var(--ui-radius-sm);
}

.ui-alert {
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.ui-alert-success {
    background-color: rgba(0, 212, 132, 0.16);
    border-color: rgba(0, 212, 132, 0.52);
    color: #7ae8c0;
}

.ui-alert-danger {
    background-color: rgba(255, 53, 88, 0.16);
    border-color: rgba(255, 53, 88, 0.52);
    color: #ffb0be;
}

/* Missing color overrides */
.ui-page .bg-yellow-50 {
    background-color: rgba(255, 148, 32, 0.12) !important;
}

.ui-page .bg-gray-200 {
    background-color: var(--ui-surface-3) !important;
}

.ui-page .border-blue-200 {
    border-color: rgba(61, 123, 255, 0.45) !important;
}

/* Divide lines */
.ui-page .divide-gray-200 > * + * {
    border-color: var(--ui-border) !important;
}

/* Tab/section dividers (border-b without explicit color) */
.ui-page .border-b {
    border-color: var(--ui-border) !important;
}

/* Hover row states */
.ui-page .hover\:bg-gray-50:hover {
    background-color: var(--ui-surface-2) !important;
}
.ui-page .hover\:bg-gray-300:hover {
    background-color: var(--ui-surface-3) !important;
}

/* Global form element dark styling */
.ui-page input:not([type="checkbox"]):not([type="radio"]),
.ui-page select,
.ui-page textarea {
    background: var(--ui-surface-2);
    color: var(--ui-text);
    border-color: var(--ui-border);
}

.ui-page input:not([type="checkbox"]):not([type="radio"])::placeholder,
.ui-page textarea::placeholder {
    color: var(--ui-text-soft);
}

.ui-page input:not([type="checkbox"]):not([type="radio"]):focus,
.ui-page select:focus,
.ui-page textarea:focus {
    outline: none;
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 3px rgba(61, 123, 255, 0.22);
}

/* Table header typography */
.ui-table th {
    font-family: var(--ui-font-display);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--ui-tracking-caps);
    text-transform: uppercase;
}

/* Nav brand */
.ui-topbar-user .font-semibold,
.ui-topbar-admin .font-semibold {
    font-family: var(--ui-font-display);
    letter-spacing: var(--ui-tracking-tight);
    font-weight: 700;
}

/* Mono data utility — use on container names, ports, IDs */
.ui-mono {
    font-family: var(--ui-font-mono);
    font-size: 0.875em;
    letter-spacing: 0;
    font-feature-settings: "tnum" 1;
}

/* Stat card value — large numeric display */
.ui-stat-value {
    font-family: var(--ui-font-display);
    font-weight: 700;
    letter-spacing: var(--ui-tracking-tight);
    font-feature-settings: "tnum" 1;
}

/* Backup type row tinting — apply to <tr> or <tbody> */
.ui-backup-type-admin { color: var(--ui-warning); }
.ui-backup-type-auto  { color: var(--ui-primary); }

/* Grouped table: both rows of a multi-row record highlight together on hover.
   Add ui-table-grouped to <table> when each record spans multiple <tr> inside
   its own <tbody>. tbody:hover tr covers both rows simultaneously; the general
   ui-table tbody tr:hover rule sets the same value on the hovered row, no conflict. */
.ui-table-grouped tbody:hover tr {
    background-color: rgba(61, 123, 255, 0.08);
}