/* Shared portal brand primitives. Keep status colors semantic and data legible. */
:root {
  --bg-card: #0c0c0c;
  --border-subtle: #1c1c1c;
  --text-secondary: #a0a0a0;
  --text-tertiary: #929292;
  --radius-lg: 12px;
}
body { font-variant-numeric: tabular-nums; }
#metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content { max-width: 1440px; padding: 32px; }
.logo img { height: 44px; max-width: 192px; }
.logo-auth img { height: 44px; }
h1, .page-header h1 { font-weight: 600; letter-spacing: -.03em; }
h1[data-tag]::after { font-size: .65em; font-weight: 400; letter-spacing: 0; }
.nav-item.active { box-shadow: inset 2px 0 var(--accent); }
.metric-card .value,
.metric-card.green .value,
.metric-card.accent .value,
.metric-card.yellow .value,
.metric-card.gradient .value {
  font-family: var(--font); font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 600; line-height: 1.15; letter-spacing: -.03em;
  background: none; color: var(--text-primary); -webkit-text-fill-color: currentColor;
}
.metric-card .label { font-size: .875rem; }
.metric-card .sub { color: var(--text-secondary); }
.chart-container h3 { font-size: 1rem; font-weight: 600; }
.chart-description { color: var(--text-secondary); font-size: .8rem; line-height: 1.6; margin: 8px 0 20px; }
.chart-container, .card-glow, .kb-document { border-radius: var(--radius); }
.card-glow:hover { box-shadow: none; border-color: var(--border-medium); }
.mini-bar-fill.gradient-1, .mini-bar-fill.gradient-2, .mini-bar-fill.gradient-3 { background: var(--accent); }
.demand-bar .bar-fill { background: var(--accent); }
.mini-bar-label { color: var(--text-secondary); }
.btn { border-radius: var(--radius-sm); min-height: 40px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #000; font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #000; }
.btn:focus-visible, .nav-item:focus-visible, .form-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ticket-btn, .ticket-btn:hover { background: var(--bg-card); }
.ticket-modal h2 { background: none; color: var(--text-primary); -webkit-text-fill-color: currentColor; }
.empty-state::before { content: none; }
.roi-banner { margin: 0 0 28px; padding: 28px 32px; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--bg-card); }
#roi-value { font-size: 2.4rem; font-weight: 600; letter-spacing: -.03em; color: var(--text-primary); }
.roi-banner [style*="text-transform:uppercase"] { font-family: var(--font-mono); line-height: 1.6; }
.chart-placeholder { min-height: 180px; display: grid; place-items: center; padding: 24px; color: var(--text-secondary); font-size: .875rem; text-align: center; }
#page-dashboard[data-load-state="loading"] .metric-card .value { color: var(--text-tertiary); }
#dashboard-load-status { color: var(--text-secondary); font-size: .8rem; }
.qa-panel h2 { font-weight: 600; }
@media (max-width: 1100px) and (min-width: 769px) {
  .charts-grid-3 { grid-template-columns: 1fr; }
  .content { padding: 24px; }
}
@media (max-width: 768px) {
  .content { padding: 20px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
  #metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn { min-height: 44px; }
  h1[data-tag]::after { display: block; margin: 6px 0 0; font-size: .55em; }
  .card-grid > .metric-card { padding: 20px 16px; }
  .metric-card .value { font-size: 1.8rem; }
  .roi-banner { padding: 20px 16px; }
}

/* BI presentation: consistent hierarchy, compact explanations and responsive controls. */
#page-bi .page-header { align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.bi-toolbar { display: grid; grid-template-columns: 160px auto; gap: 8px 12px; align-items: center; }
.bi-range-label { grid-column: 1 / -1; color: var(--text-secondary); font-size: .8rem; }
.bi-toolbar .form-input, .bi-toolbar .btn { height: 44px; min-height: 44px; }
.bi-mobile-navigation { display: none; }
#page-bi .bi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
#page-bi .bi-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#page-bi .insight-card { padding: 24px; border: 1px solid var(--border-subtle); }
#page-bi .insight-stat { color: var(--text-primary); margin: 0 0 16px; font-size: 2rem; line-height: 1.2; }
#page-bi .insight-tag { background: transparent; color: var(--text-secondary); padding: 0; border-radius: 0; font-size: .7rem; }
#page-bi .insight-card h3 { font-size: 1.05rem; line-height: 1.45; margin-bottom: 10px; }
#page-bi .insight-stat-label { display: block; text-transform: none; letter-spacing: 0; font-size: .8rem; }
.insight-preview { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin: 12px 0; }
.insight-details summary { color: var(--accent); cursor: pointer; padding: 10px 0; font-size: .85rem; }
.insight-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#page-bi .rec-card { padding: 24px; gap: 16px; }
#page-bi .rec-card .rec-icon { background: transparent; border: 1px solid var(--border-subtle); border-radius: 8px; }
#page-bi .demand-bar { min-height: 48px; }
#page-bi .demand-bar .count { color: var(--text-primary); }
#page-bi .bi-tabs { gap: 4px; margin-bottom: 24px; }
#page-bi .bi-tab { min-height: 44px; }
@media (min-width: 769px) and (max-width: 1200px) {
  #page-bi .bi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #page-bi .bi-grid, #page-bi .bi-grid-2 { grid-template-columns: minmax(0, 1fr); }
  #page-bi .bi-tabs { display: none; }
  .bi-mobile-navigation { display: grid; gap: 8px; margin-bottom: 24px; }
  .bi-mobile-navigation label { font-size: .8rem; color: var(--text-secondary); }
  .bi-mobile-navigation select { min-height: 44px; width: 100%; }
  .bi-toolbar { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  #bi-date-range { width: 100% !important; }
  #page-bi .insight-card, #page-bi .rec-card { padding: 20px; }
  #page-bi .demand-bar { gap: 8px; padding: 12px; flex-wrap: wrap; }
  #page-bi .demand-bar .label { min-width: 0; flex: 1 1 calc(100% - 68px); overflow-wrap: anywhere; }
  #page-bi .demand-bar .bar { order: 3; flex: 1 0 100%; }
  #page-bi .demand-bar .count { min-width: 48px; }
}
@media print {
  #page-bi .insight-details > .insight-body { display: block !important; }
  #page-bi .insight-details summary, #page-bi .insight-preview { display: none; }
}

/* Shared headers, inputs and loading states. */
.page-header { align-items:flex-start; flex-wrap:wrap; gap:20px 24px; margin-bottom:28px; }
.page-header h1 { font-size:1.85rem; line-height:1.25; margin:0; }
.page-header h1[data-tag]::after { display:block; font-size:.875rem; line-height:1.6; margin:8px 0 0; color:var(--text-secondary); }
.page-header > .btn { flex-shrink:0; }
.page-header > div { min-width:0; }
.form-label { font-size:.8125rem; color:var(--text-primary); margin-bottom:8px; }
.form-input, .date-range input[type="date"] { min-height:44px; border-radius:8px; border-color:#383838; line-height:1.4; }
.form-input:hover:not(:disabled), .date-range input[type="date"]:hover { border-color:#666; }
.form-input:focus, .date-range input[type="date"]:focus { border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.form-input:disabled { opacity:1; color:var(--text-secondary); background:#151515; cursor:not-allowed; }
.form-input[aria-invalid="true"] { border-color:#ff929a; }
select.form-input { padding-right:36px; color-scheme:dark; }
select.form-input option { color:var(--text-primary); background:#151515; }
textarea.form-input { min-height:120px; line-height:1.65; }
.btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.user-action) { background:var(--bg-card); color:var(--text-primary); border:1px solid #383838; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.date-range { flex-wrap:wrap; }
.calls-filter-toolbar { flex:1 1 100%; padding:16px; background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:8px; }
.empty-state { padding:32px 24px; line-height:1.65; max-width:560px; margin:auto; }
.empty-state p { margin:0; }
.portal-loading { padding:24px; color:var(--text-secondary); font-size:.875rem; text-align:left; min-height:130px; }
.loading-lines { display:grid; gap:10px; margin-top:20px; max-width:440px; }
.loading-lines i { height:10px; border-radius:4px; background:#242424; animation:portal-pulse 1.6s ease-in-out infinite; }
.loading-lines i:nth-child(2) { width:82%; }
.loading-lines i:nth-child(3) { width:62%; }
#page-dashboard[data-load-state="loading"] .metric-card .value { color:transparent; border-radius:4px; background:#242424; max-width:110px; animation:portal-pulse 1.6s ease-in-out infinite; }
#page-dashboard[data-load-state="loading"] .chart-placeholder { background:linear-gradient(transparent,#121212,transparent); }
@keyframes portal-pulse { 50% { opacity:.45; } }
@media(prefers-reduced-motion:reduce) { .loading-lines i, #page-dashboard[data-load-state="loading"] .metric-card .value { animation:none; } }
@media(max-width:768px) {
 .page-header { gap:16px; margin-bottom:24px; }
 .page-header h1 { font-size:1.6rem; }
 .page-header h1[data-tag]::after { font-size:.875rem; }
 .calls-filter-toolbar { padding:12px; }
 .calls-filter-toolbar > div, .calls-filter-toolbar > select { width:100% !important; }
 .calls-filter-toolbar input[type="search"] { width:100% !important; }
 .calls-filter-toolbar .date-range input { flex:1 1 120px; min-width:0; }
 .portal-loading { padding:20px 12px; }
}

/* Brand detail pass: defined surfaces and aligned tools. */
.nav-section { font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-secondary); padding-top:20px; }
.nav-item { min-height:40px; border-radius:8px; }
.nav-item.active { background:rgba(197,96,166,.09); box-shadow:inset 2px 0 var(--accent); }
.nav-item.active svg { color:var(--accent); }
.account-switcher { background:var(--bg-card); border-color:#303030; }
.account-switcher:hover { border-color:var(--accent); }
.admin-scope { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; }
.kb-toolbar,.followup-toolbar { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:8px; padding:16px; gap:12px; }
.kb-toolbar { align-items:flex-end; margin:24px 0 16px; }
.kb-toolbar > .btn { min-height:44px; }
.kb-toolbar label { font-size:.8125rem; color:var(--text-secondary); }
.kb-status { border-left:2px solid var(--accent); padding:8px 14px; margin:16px 0; }
.kb-status:empty { display:none; }
.kb-settings { background:var(--bg-card); border-radius:8px; }
.kb-settings summary { min-height:28px; line-height:1.6; font-size:.875rem; }
.kb-document { background:var(--bg-card); }
.kb-entry h2 { font-weight:600; }
.kb-entry mark,.kb-section mark { background:#f0b9df; color:#171017; }
.followup-toolbar > label { min-height:44px; padding:0 8px; }
.followup-toolbar input[type="checkbox"] { accent-color:var(--accent); width:18px; height:18px; }
.followup-empty { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:8px; padding:40px 24px; line-height:1.75; margin:16px 0 24px; }
.followup-empty small { display:block; margin-top:8px; }
.followup-card h2 { font-weight:600; line-height:1.4; }
.modal { border:1px solid #383838; border-radius:12px; background:#101010; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.modal h2 { font-size:1.35rem; font-weight:600; letter-spacing:-.02em; line-height:1.35; margin-bottom:16px; }
.modal-actions { gap:12px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--border-subtle); }
.modal-actions .btn { min-height:44px; }
.auth-box { border:1px solid #282828; border-radius:12px; background:radial-gradient(ellipse at top,rgba(197,96,166,.055),transparent 65%),#0b0b0b; }
.auth-box .logo-auth { margin-bottom:24px; }
.table-wrap { border-radius:8px; }
th { background:#101010; color:#b5b5b5; }
td { line-height:1.5; }
.badge { line-height:1.4; font-weight:500; }
@media(max-width:768px) {
 .kb-toolbar,.followup-toolbar { padding:12px; }
 .kb-search { min-width:0; width:100%; flex-basis:100%; }
 .followup-toolbar .form-input { width:100%; }
 .followup-toolbar > .btn { width:100%; }
 .followup-empty { padding:28px 16px; }
 .modal-actions .btn { flex:1 1 120px; }
}


/* Authentication uses the same restrained Call Stream surfaces and pink focus states. */
.auth-screen { min-height:100dvh; height:auto; padding:48px 24px; }
.auth-screen .auth-box { box-sizing:border-box; width:100%; max-width:460px; padding:36px; margin:auto; background:#0c0c0c; }
.auth-box .logo-auth { margin-bottom:32px; }
.auth-box .logo-auth img { max-width:100%; height:auto; width:210px; margin-bottom:20px; }
.auth-box .logo-auth h1 { font-family:var(--font); font-size:1.5rem; letter-spacing:-.03em; line-height:1.3; }
.auth-box .logo-auth p { margin-top:8px; line-height:1.6; }
.auth-box .form-input { box-sizing:border-box; min-width:0; max-width:100%; font-size:16px; min-height:48px; }
.auth-box .btn { min-height:48px; white-space:normal; }
.auth-box .form-input:autofill { background:#151515; color:var(--text-primary); }
.auth-box .form-input:-webkit-autofill { -webkit-text-fill-color:#f4f4f4; -webkit-box-shadow:0 0 0 1000px #151515 inset; caret-color:#f4f4f4; }
.auth-box .auth-error,.auth-box .auth-success { overflow-wrap:anywhere; line-height:1.6; }
.auth-box .auth-link a { display:inline-block; padding:8px 0; color:var(--accent); }
@media(max-width:480px) {
 .auth-screen { padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px)); }
 .auth-screen .auth-box { padding:28px 24px; }
}
@media(max-height:650px) { .auth-screen { align-items:flex-start; } }

#user-preview-banner { position:sticky; top:0; z-index:1100; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 24px; border-bottom:1px solid var(--accent); background:#21141e; color:#f4f4f4; font-size:.875rem; }
#user-preview-banner span { overflow-wrap:anywhere; min-width:0; }
#user-preview-banner button { flex-shrink:0; }
.user-preview .sidebar { top:72px; height:calc(100dvh - 72px); }
.user-preview .nav-item[data-page^="admin-"] { display:none; }
@media(max-width:480px){#user-preview-banner { padding:10px 16px; font-size:.75rem; }}