/* MediaCP-inspired UI polish (activated under UI_BETA). */
:root {
  /* Brand tokens (from home.css) */
  --as-bg: #ffffff;
  --as-text: #2a2e36;
  --as-muted: #6b7280;
  --as-blue: #0273d4; /* var(--primary) fallback */
  --as-blue-600: #0166bd;
  --as-yellow: #fddc00;
  --as-accent: #ffda00;
  --as-blue-dark: #0f1a2b;
  --as-border: #e6e9ee;

  /* UI mapping */
  --mc-bg: var(--as-bg);
  --mc-sidebar-bg: #ffffff;
  --mc-border: var(--as-border);
  --mc-muted: var(--as-muted);
  --mc-text: var(--as-text);
  --mc-link: var(--as-blue);
}

body.mc-theme { background: var(--mc-bg); color: var(--mc-text); }
/* Typography */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; font-weight: 400; line-height: 1.6; }
h1, h2, h3, h4, h5 { font-weight: 700; color: #003366; }
/* Links */
a { color: var(--as-blue); }
a:hover, a:focus { color: var(--as-blue-600); }

/* Sidebar panel */
.mc-sidebar { background: var(--mc-sidebar-bg); border: 1px solid var(--mc-border); border-radius: .5rem; padding: .75rem; }
.mc-sidebar .nav-link { color: var(--mc-text); border-radius: .375rem; padding: .25rem .5rem; }
.mc-sidebar .nav-link.active { background: #e5efff; color: #0d6efd; font-weight: 600; }
.mc-sidebar .text-muted { color: var(--mc-muted) !important; }
.mc-sidebar .text-uppercase { letter-spacing: .04em; font-size: .75rem; }
.mc-sidebar .nav-group-toggle { display:block; width:100%; text-align:left; margin:.5rem 0 .25rem; padding:.25rem .25rem; border:0; background:transparent; color: var(--mc-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; }
.mc-sidebar .nav-group-toggle:hover { color: var(--mc-text); }
/* Make sidebar block fill viewport height and scroll internally if needed */
.mc-sidebar { position: sticky; top: 1rem; min-height: calc(100vh - 2rem); max-height: calc(100vh - 2rem); overflow: auto; }

/* Cards */
.card { border: 1px solid var(--mc-border); box-shadow: 0 1px 2px rgba(0,0,0,.04); border-radius: .5rem; }
.card-header { background: #f8fafc; border-bottom: 1px solid var(--mc-border); font-weight: 600; }
.list-group-item { border-color: var(--mc-border); }

/* Tables */
table.table.table-sm th, table.table.table-sm td { vertical-align: middle; }
table.table.table-sm tbody tr:hover { background: #f9fbff; }
table.table.table-sm thead th { background: #f8fafc; border-bottom: 1px solid var(--mc-border); }

/* Page header area */
.mc-page-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.75rem; padding:.5rem .75rem; background:#f8fafc; border:1px solid var(--mc-border); border-radius:.5rem; }
.mc-page-header .title { font-size: 1.125rem; font-weight: 600; }

/* Forms */
label.form-label { font-weight: 600; color: var(--mc-text); }
.form-text { color: var(--mc-muted); }
.form-control.form-control-sm { border-radius: .375rem; }

/* Utilities */
.mc-content .small, .mc-sidebar .small { color: var(--mc-muted); }

/* Header (light, with subtle border) */
.mc-header { background:#fff; border-bottom:1px solid var(--mc-border); }
.mc-header .brand { color: var(--mc-text); }
.mc-header .brand:hover { color: var(--mc-link); }
.mc-header .brand-sub { color: var(--mc-muted); }
.mc-header #menuSearch { max-width: 220px; }
.mc-header .form-control-sm { height: 28px; padding: 2px 8px; line-height: 1.2; border-radius: .25rem; }
.mc-header form { margin: 0; }
.mc-header .btn.btn-sm { padding: .25rem .5rem; line-height: 1.2; }

/* Skip link for accessibility */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:.25rem .5rem; background:#fff; border:1px solid var(--mc-border); border-radius:.25rem; color:#003366; }

/* Help toggle refinement */
.as-help-toggle{ background: var(--mc-link); }
.as-help-toggle:hover{ background:#0b5ed7; }
.as-help-toggle{ background: var(--mc-link); }
.as-help-toggle:hover{ background:#0b5ed7; }

/* Buttons & links (brand-aligned) */
.btn { font-weight: 600; }
.btn-primary { background: var(--as-blue); border-color: var(--as-blue-600); }
.btn-primary:hover, .btn-primary:focus { background: var(--as-blue-600); border-color: var(--as-blue-600); }
.btn-outline-secondary { border-color: var(--as-border); color: var(--mc-text); }
.btn-outline-secondary:hover { background: #f8fafc; }
.btn-ghost { border-width: 2px; background: transparent; }
.btn.btn--accent { background: var(--as-accent); color: var(--as-blue-dark); border-color: var(--as-accent); }

/* Top tabs (nav-pills) — ensure readable contrast */
.nav.nav-pills .nav-link { color: var(--as-blue); font-weight: 600; }
.nav.nav-pills .nav-link:hover { color: var(--as-blue-600); }
.nav.nav-pills .nav-link.active,
.nav.nav-pills .show > .nav-link { color: #fff !important; background: var(--as-blue) !important; }
.nav.nav-pills .nav-link.active:hover { color: #fff !important; }

/* (Dark mode intentionally omitted per scope) */