/* NAC Support Hub M20 Premium UI - additive presentation layer only. */
:root {
  --m20-navy-950: #001b3b;
  --m20-navy-900: #002752;
  --m20-navy-800: #06396f;
  --m20-blue-600: #1463ff;
  --m20-red-600: #c22020;
  --m20-emerald-600: #08795a;
  --m20-amber-500: #f59e0b;
  --m20-slate-950: #0f172a;
  --m20-slate-700: #334155;
  --m20-slate-500: #64748b;
  --m20-slate-300: #cbd5e1;
  --m20-slate-200: #e2e8f0;
  --m20-slate-100: #f1f5f9;
  --m20-slate-50: #f8fafc;
  --m20-surface: #ffffff;
  --m20-radius-sm: 10px;
  --m20-radius-md: 14px;
  --m20-radius-lg: 20px;
  --m20-shadow-1: 0 1px 2px rgba(0, 27, 59, .04), 0 8px 26px rgba(0, 39, 82, .05);
  --m20-shadow-2: 0 18px 45px rgba(0, 39, 82, .10);
  --m20-focus: 0 0 0 3px rgba(20, 99, 255, .22);
}

html { background: var(--m20-slate-50); }
body.admin-body {
  background:
    radial-gradient(circle at 100% 0, rgba(20, 99, 255, .055), transparent 27rem),
    radial-gradient(circle at 0 100%, rgba(194, 32, 32, .035), transparent 25rem),
    var(--m20-slate-50);
  color: var(--m20-slate-950);
  text-rendering: optimizeLegibility;
}

.m20-skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 10000;
  transform: translateY(-160%);
  border-radius: 10px;
  background: var(--m20-navy-900);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .16s ease;
}
.m20-skip-link:focus { transform: translateY(0); }

.admin-shell { min-height: 100dvh; }
.admin-sidebar {
  background: linear-gradient(180deg, var(--m20-navy-950), var(--m20-navy-900) 55%, #062347);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 10px 0 36px rgba(0, 27, 59, .13);
}
.admin-brand-row { border-bottom-color: rgba(255,255,255,.10); }
.admin-brand img {
  filter: drop-shadow(0 7px 16px rgba(0,0,0,.15));
}
.admin-brand .brand-copy strong { letter-spacing: -.02em; }
.admin-brand .brand-copy small { color: rgba(255,255,255,.66); }
.admin-nav { gap: 6px; }
.admin-nav a {
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(255,255,255,.74);
  font-weight: 700;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.admin-nav a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  transform: translateX(2px);
}
.admin-nav a.active,
.admin-nav a[aria-current="page"] {
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.09));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--m20-red-600);
}
.admin-user { border-top-color: rgba(255,255,255,.10); }
.admin-user .agent-avatar {
  box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.18);
}

.admin-workspace { min-width: 0; }
.admin-topbar {
  min-height: 76px;
  border-bottom: 1px solid rgba(203,213,225,.75);
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 28px rgba(0,39,82,.045);
  backdrop-filter: blur(18px) saturate(135%);
}
.admin-topbar .eyebrow {
  color: var(--m20-red-600);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
}
.admin-topbar h1 {
  color: var(--m20-navy-900);
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -.025em;
}
.secure-indicator {
  border: 1px solid rgba(8,121,90,.18);
  border-radius: 999px;
  background: #ecfdf5;
  color: #066348;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 800;
}
.secure-indicator span { box-shadow: 0 0 0 5px rgba(16,185,129,.10); }

.admin-content {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding: clamp(16px, 2vw, 30px);
}
.admin-footer {
  border-top: 1px solid var(--m20-slate-200);
  background: rgba(255,255,255,.70);
  color: var(--m20-slate-500);
}

.panel,
.secure-share,
.metric,
.alert {
  border-color: rgba(203,213,225,.78) !important;
  border-radius: var(--m20-radius-lg) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--m20-shadow-1) !important;
}
.panel { overflow: clip; }
.panel-heading {
  gap: 16px;
  border-bottom: 1px solid var(--m20-slate-100);
  padding-bottom: 16px;
}
.panel-heading h2,
.secure-share h2 {
  color: var(--m20-navy-900);
  letter-spacing: -.02em;
}
.panel-heading .eyebrow,
.secure-share .eyebrow {
  color: var(--m20-red-600);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.metric-grid { gap: 12px !important; }
.metric {
  position: relative;
  min-height: 108px;
  padding: 18px !important;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.metric::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -34px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(20,99,255,.10), transparent 70%);
  pointer-events: none;
}
.metric:hover {
  transform: translateY(-2px);
  border-color: rgba(20,99,255,.24) !important;
  box-shadow: var(--m20-shadow-2) !important;
}
.metric span {
  color: var(--m20-slate-500) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.metric strong {
  color: var(--m20-navy-900) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
}
.metric small { color: var(--m20-slate-500) !important; }

.filter-bar {
  align-items: end;
  gap: 12px !important;
  border: 1px solid var(--m20-slate-200);
  border-radius: var(--m20-radius-md);
  background: var(--m20-slate-50);
  padding: 14px;
}
.filter-bar label,
.panel label {
  color: var(--m20-slate-500);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.filter-bar input,
.filter-bar select,
.panel input,
.panel select,
.panel textarea {
  border: 1px solid var(--m20-slate-300) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--m20-slate-950) !important;
  box-shadow: 0 1px 2px rgba(0,27,59,.03);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.filter-bar input:focus,
.filter-bar select:focus,
.panel input:focus,
.panel select:focus,
.panel textarea:focus {
  border-color: var(--m20-blue-600) !important;
  box-shadow: var(--m20-focus) !important;
}

.button,
.panel button,
.link-button {
  border-radius: 10px !important;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease !important;
}
.button:hover:not(:disabled),
.panel button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary,
.panel button.primary {
  border-color: var(--m20-navy-900) !important;
  background: linear-gradient(135deg, var(--m20-navy-900), var(--m20-navy-800)) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0,39,82,.16);
}
.button.secondary {
  border-color: var(--m20-slate-300) !important;
  background: #fff !important;
  color: var(--m20-navy-900) !important;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--m20-blue-600) !important;
  outline-offset: 2px !important;
}

.conversation-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.conversation-row {
  position: relative;
  border: 1px solid var(--m20-slate-200) !important;
  border-radius: var(--m20-radius-md) !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(0,39,82,.025);
  padding: 14px !important;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.conversation-row:hover {
  transform: translateY(-2px);
  border-color: rgba(20,99,255,.28) !important;
  background: #fbfdff !important;
  box-shadow: 0 13px 30px rgba(0,39,82,.075);
}
.conversation-channel {
  border-radius: 12px !important;
  background: var(--m20-navy-900) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 7px 16px rgba(0,39,82,.16);
}
.conversation-channel.whatsapp { background: #08795a !important; }
.conversation-channel.messenger { background: #1463ff !important; }
.conversation-channel.email { background: #7c3aed !important; }
.conversation-main strong { color: var(--m20-navy-900); letter-spacing: -.01em; }
.conversation-main > p { color: var(--m20-slate-500); line-height: 1.55; }
.conversation-meta { gap: 6px !important; }
.conversation-meta span,
.mono-label {
  border-radius: 999px;
  background: var(--m20-slate-100);
  color: var(--m20-slate-500);
  padding: 4px 8px;
  font-size: 10px;
}
.badge,
.handover-pill,
.priority {
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge.positive { background: #ecfdf5 !important; color: #066348 !important; }
.badge.notice { background: #eff6ff !important; color: #174ea6 !important; }
.badge.warning { background: #fff7e6 !important; color: #8a5400 !important; }
.badge.negative { background: #fff1f2 !important; color: #a7192b !important; }

.table-wrap,
.panel table { border-radius: 12px; }
table { border-collapse: separate !important; border-spacing: 0 !important; }
thead th {
  background: var(--m20-slate-50) !important;
  color: var(--m20-slate-500) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: #f8fbff !important; }

.empty-state {
  border: 1px dashed var(--m20-slate-300) !important;
  border-radius: var(--m20-radius-md) !important;
  background: linear-gradient(135deg, #fff, var(--m20-slate-50)) !important;
}

html.m20-enhanced .panel,
html.m20-enhanced .metric,
html.m20-enhanced .conversation-row {
  animation: m20-rise .26s ease both;
}
@keyframes m20-rise {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .admin-content { padding: 16px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .conversation-row { grid-template-columns: auto minmax(0,1fr) !important; }
  .conversation-state { grid-column: 2; justify-self: start !important; }
}
@media (max-width: 720px) {
  .admin-topbar { min-height: 66px; padding-inline: 14px; }
  .admin-topbar h1 { font-size: 19px; }
  .secure-indicator { display: none !important; }
  .admin-content { padding: 12px; }
  .metric-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .metric { min-height: 92px; padding: 14px !important; }
  .filter-bar { grid-template-columns: 1fr !important; }
  .panel { border-radius: 16px !important; }
  .conversation-row { padding: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}