/* UnifyX Dark Theme (High-contrast, accessible) */
:root {
  --ux-bg: #0f1220;
  --ux-surface: #181c2e;
  --ux-elev: #1f2640;
  --ux-border: rgba(255,255,255,0.08);
  --ux-text: #f2f5ff;
  --ux-text-dim: #b7c0d9;
  --ux-accent: #6a4cff;     /* purple */
  --ux-accent-2: #00d4ff;   /* cyan */
  --ux-success: #22c55e;
  --ux-danger: #ff5470;
  --ux-warning: #f59e0b;
  --ux-card-radius: 16px;
  --ux-input-bg: #202744;
  --ux-input-border: #394063;
  --ux-shadow: 0 10px 30px rgba(0,0,0,.35);
}

html, body {
  background: radial-gradient(1200px 800px at 30% -10%, #151935 0%, #0f1220 40%, #0a0d18 100%);
  color: var(--ux-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.4;
}

a { color: var(--ux-accent); text-decoration: none; }
a:hover { color: var(--ux-accent-2); text-decoration: underline; }

/* Layout shells */
.navbar, header {
  background: rgba(17,20,36,.7);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ux-border);
}

.sidebar {
  background: linear-gradient(180deg, #12152a 0%, #0f1220 100%);
  color: var(--ux-text-dim);
  border-right: 1px solid var(--ux-border);
}

.sidebar .menu-item,
.sidebar a {
  color: var(--ux-text-dim) !important;
  font-weight: 600;
}
.sidebar .menu-item:hover, .sidebar a:hover,
.sidebar .menu-item.active, .sidebar a.active {
  color: var(--ux-text) !important;
}

/* Cards / Panels */
.card, .panel, .content-box, .widget, .card-body, .material-card {
  background: var(--ux-surface) !important;
  border: 1px solid var(--ux-border) !important;
  border-radius: var(--ux-card-radius) !important;
  box-shadow: var(--ux-shadow) !important;
  color: var(--ux-text) !important;
}

/* Tables */
.table, table {
  color: var(--ux-text);
}
.table thead th, table thead th {
  color: var(--ux-text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .82rem;
  border-bottom: 1px solid var(--ux-border);
}
.table tbody tr:hover { background: #1b2140; }

/* Inputs */
input, select, textarea, .form-control {
  background: var(--ux-input-bg) !important;
  color: var(--ux-text) !important;
  border: 1px solid var(--ux-input-border) !important;
  border-radius: 12px !important;
  padding: .6rem .8rem !important;
}
input::placeholder, textarea::placeholder { color: #95a1c5; }

/* Buttons */
.btn, button, .mdc-button {
  background: linear-gradient(135deg, var(--ux-accent), var(--ux-accent-2)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: .6rem 1rem !important;
}
.btn-outline, .btn-secondary {
  background: transparent !important;
  color: var(--ux-text) !important;
  border: 1px solid var(--ux-input-border) !important;
}

/* Chips / badges */
.badge, .chip {
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight: 700;
}
.badge-live { background: var(--ux-danger); color: #fff; }
.badge-upcoming { background: var(--ux-accent-2); color: #051016; }
.badge-ended { background: #475569; color: #fff; }

/* Login card */
.login-card, .auth-card {
  background: var(--ux-elev) !important;
  border-radius: 18px !important;
  border: 1px solid var(--ux-border) !important;
  box-shadow: var(--ux-shadow) !important;
}

/* Footer */
.footer { color: var(--ux-text-dim); }

/* Logo sizing utility */
.brand-logo { height: 28px; display: inline-block; vertical-align: middle; }
.brand-title { font-weight: 800; letter-spacing: .02em; margin-left: .5rem; }