/* ═══════════════════════════════════════════════════════════════════════════
   A-IVOS Global UI Template — apply on EVERY shell page / module / cockpit
   Glass · hierarchy · intel cards · sections · tables · empty states
   Loaded last so it wins over base/components/views/premium.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shell canvas */
.main-content {
  position: relative;
  min-height: calc(100vh - 64px);
  padding-bottom: 24px;
}
.avi-page,
.page {
  position: relative;
  isolation: isolate;
  max-width: var(--content-max, 1280px);
  margin: 0 auto;
  padding: 22px 28px 40px;
  box-sizing: border-box;
}
.avi-page::before,
.page::before {
  content: '';
  position: absolute;
  inset: -6px -10px auto;
  height: 200px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(520px 170px at 6% 0%, color-mix(in srgb, #22d3ee 14%, transparent), transparent 66%),
    radial-gradient(480px 150px at 94% 0%, color-mix(in srgb, #f472b6 11%, transparent), transparent 62%);
  opacity: .95;
}
.avi-page > *,
.page > * { position: relative; z-index: 1; }

/* Page header */
.avi-page-head,
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.avi-page-head h1,
.avi-page-head h2,
.section-head h2 {
  margin: 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text, #f8fafc);
}
.avi-page-head p,
.section-head .u-muted,
.avi-page-sub {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted, #94a3b8);
  max-width: 72ch;
}
.avi-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Surfaces */
.avi-card,
.card,
.card--glass,
.fc-panel,
.fc-panel--glass {
  position: relative;
  border-radius: 16px;
  background: color-mix(in srgb, rgba(15, 23, 42, .72) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--text, #f8fafc);
}
.avi-card { padding: 14px 16px; margin-bottom: 12px; }
.card { padding: 16px 18px; }
.fc-panel { padding: 14px 16px; }

/* Section titles inside cards */
.avi-sec-h,
.fc-panel__h,
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.avi-sec-h h2,
.avi-sec-h h3,
.fc-panel__h h2,
.card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text, #e2e8f0);
}

/* KPI strip */
.avi-kpi-grid,
.fc-kpi-grid,
.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.avi-kpi,
.fc-kpi,
.kpi {
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, rgba(15, 23, 42, .75) 90%, transparent);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.avi-kpi__label, .fc-kpi__label, .kpi__label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted, #94a3b8); margin-bottom: 6px;
}
.avi-kpi__val, .fc-kpi__val, .kpi__val {
  display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text, #f8fafc); line-height: 1.15;
}
.avi-kpi__hint, .fc-kpi__hint, .kpi__sub {
  display: block; margin-top: 4px; font-size: 11px; color: var(--text-soft, #cbd5e1);
}

/* INTEL CARDS — predictions / recommendations (never collapse to plain text) */
.avi-intel,
.fc-intel-block {
  display: block !important;
  margin-top: 14px !important;
}
.avi-intel__h,
.fc-intel-h {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted, #94a3b8) !important;
  margin: 0 0 10px !important;
}
.avi-intel-list,
.fc-intel-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.avi-intel-card,
.fc-pred,
.fc-rec {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 12px 14px !important;
  margin: 0 0 8px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  background: color-mix(in srgb, rgba(30, 41, 59, .88) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, #22d3ee 18%, transparent) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}
.fc-rec { border-color: color-mix(in srgb, #f472b6 22%, transparent) !important; cursor: pointer; }
.fc-rec--high { border-color: color-mix(in srgb, #ef4444 55%, transparent) !important; }
.fc-rec--medium { border-color: color-mix(in srgb, #fbbf24 45%, transparent) !important; }
.fc-rec--low { border-color: color-mix(in srgb, #22d3ee 22%, transparent) !important; }

.avi-intel-card__title,
.fc-pred__title,
.fc-rec__title,
.fc-pred > strong,
.fc-rec > strong {
  display: block !important;
  width: 100% !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  color: var(--text, #f8fafc) !important;
  margin: 0 0 2px !important;
  white-space: normal !important;
}
.avi-intel-card__body,
.fc-pred__body,
.fc-rec__body,
.fc-pred > span,
.fc-rec > span {
  display: block !important;
  width: 100% !important;
  font-size: 12px !important;
  font-weight: 450 !important;
  line-height: 1.5 !important;
  color: var(--text-soft, #cbd5e1) !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
}
.avi-intel-card__meta,
.fc-pred__meta,
.fc-rec__meta,
.fc-pred > em,
.fc-rec > em {
  display: block !important;
  width: 100% !important;
  margin-top: 4px !important;
  font-size: 10.5px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  color: var(--text-muted, #94a3b8) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  white-space: normal !important;
}
.avi-intel-card:hover,
.fc-pred:hover,
.fc-rec:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, #22d3ee 40%, transparent) !important;
}

/* Analytics chips */
.avi-chips,
.fc-analytics,
.fc-mchips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 8px 0 12px !important;
}
.avi-chip,
.fc-analytics > span,
.fc-mchip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, #22d3ee 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, #22d3ee 25%, transparent) !important;
  color: var(--text-soft, #e2e8f0) !important;
}
.fc-mchip { flex-direction: column; align-items: flex-start; border-radius: 12px !important; padding: 8px 10px !important; min-width: 120px; }
.fc-mchip__p { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.fc-mchip b { font-size: 12px; }

/* Alerts / queue rows */
.fc-alert, .fc-queue-row, .avi-row {
  display: flex !important;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: inherit !important;
  background: color-mix(in srgb, rgba(15, 23, 42, .55) 90%, transparent) !important;
  border: 1px solid color-mix(in srgb, #fff 8%, transparent) !important;
}
.fc-alert strong, .fc-queue-row b, .avi-row strong {
  display: block !important; font-size: 12.5px !important; margin-bottom: 2px !important;
}
.fc-alert span, .fc-queue-row .u-muted {
  display: block !important; font-size: 11.5px !important; color: var(--text-soft) !important; line-height: 1.4 !important;
}

/* Tables inside shell */
.main-content .tbl,
.avi-page .tbl,
.page .tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.main-content .tbl thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700;
  padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
  text-align: left;
}
.main-content .tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid color-mix(in srgb, #fff 6%, transparent);
  vertical-align: top;
  color: var(--text-soft, #e2e8f0);
}

/* Compact legal footer (global) */
.avi-legal-footer {
  margin: 28px 0 8px !important;
  padding: 10px 4px 4px !important;
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent) !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
  color: var(--text-muted, #94a3b8) !important;
  opacity: .85;
  max-width: 1100px;
}
.avi-legal-footer__line { margin: 0 0 3px !important; display: block !important; }
.avi-legal-footer a { color: color-mix(in srgb, #22d3ee 75%, #fff); text-decoration: none; font-weight: 600; }

/* Org tree densify */
.org-page .org-node {
  background: color-mix(in srgb, rgba(15, 23, 42, .7) 92%, transparent) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.org-chart {
  border: 1px solid color-mix(in srgb, #22d3ee 22%, transparent) !important;
  background:
    radial-gradient(600px 200px at 50% 0%, color-mix(in srgb, #22d3ee 10%, transparent), transparent 70%),
    color-mix(in srgb, rgba(15, 23, 42, .55) 94%, transparent) !important;
}

/* Empty / loading */
.empty-state, .spinner-wrap {
  padding: 28px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* My Cockpit / Function Cockpit chat — always visible, never collapsed */
.cockpit-chat, .fc-chat {
  display: block !important;
  min-height: 220px !important;
  max-height: 48vh !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent) !important;
  background: color-mix(in srgb, rgba(2, 6, 23, .55) 92%, transparent) !important;
}
.cockpit-bubble, .fc-bubble {
  display: block !important;
  margin: 10px 0 !important;
  max-width: 96% !important;
  white-space: normal !important;
}
.cockpit-bubble__body, .fc-bubble__t {
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.5 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
}
.cockpit-bubble--otto .cockpit-bubble__body,
.fc-bubble--otto .fc-bubble__t {
  background: color-mix(in srgb, rgba(30, 41, 59, .9) 92%, transparent) !important;
  border: 1px solid color-mix(in srgb, #f472b6 28%, transparent) !important;
}
.cockpit-bubble--user .cockpit-bubble__body,
.fc-bubble--user .fc-bubble__t {
  background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(244,114,182,.18)) !important;
  border: 1px solid color-mix(in srgb, #22d3ee 35%, transparent) !important;
}
.cockpit-bubble--thinking .cockpit-bubble__meta {
  color: #f472b6 !important;
  animation: ckPulse 1.2s ease-in-out infinite;
}
.cockpit-compose, .fc-compose {
  display: flex !important;
  gap: 8px !important;
  align-items: flex-end !important;
  margin-top: 8px !important;
}
.cockpit-input, #fc-input, #ck-input {
  flex: 1 !important;
  min-height: 52px !important;
}
@keyframes ckPulse { 0%,100%{opacity:1} 50%{opacity:.45} }

/* IP / R&D full project create modal */
.rd-sec {
  margin: 0 0 16px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  background: color-mix(in srgb, rgba(15, 23, 42, .45) 92%, transparent);
}
.rd-sec__h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  margin: 0 0 12px;
}
.rd-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 2px;
}
.rd-model-chip {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  background: color-mix(in srgb, rgba(2, 6, 23, .45) 90%, transparent);
  cursor: pointer;
  font-size: 12px;
}
.rd-model-chip--on {
  border-color: color-mix(in srgb, #22d3ee 40%, transparent);
  background: color-mix(in srgb, #22d3ee 12%, transparent);
}
.rd-model-chip b { display: block; font-size: 12px; margin-bottom: 2px; }
.rd-model-chip small { display: block; font-size: 10px; color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; }
.rd-model-chip input { margin-top: 2px; }

@media (max-width: 768px) {
  .avi-page, .page { padding: 14px 14px 32px; }
  .avi-kpi__val, .fc-kpi__val, .kpi__val { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME — token-driven surfaces (WCAG AA on white)
   The base rules above hardcode dark-navy glass (rgba(15,23,42,…)) with
   white-tinted borders, which is unreadable on a light background.
   Every surface is rebound to the light tokens here.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .avi-card,
[data-theme="light"] .card,
[data-theme="light"] .card--glass,
[data-theme="light"] .fc-panel,
[data-theme="light"] .fc-panel--glass {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: var(--border);
  box-shadow: 0 6px 24px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--text);
}
[data-theme="light"] .avi-kpi,
[data-theme="light"] .fc-kpi,
[data-theme="light"] .kpi {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-color: var(--border);
  box-shadow: 0 2px 10px rgba(15,23,42,.06);
}
[data-theme="light"] .fc-alert,
[data-theme="light"] .fc-queue-row,
[data-theme="light"] .avi-row {
  background: color-mix(in srgb, var(--surface-2) 80%, transparent) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .org-page .org-node {
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .org-chart {
  background:
    radial-gradient(600px 200px at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 96%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
[data-theme="light"] .rd-sec {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  border-color: var(--border);
}
[data-theme="light"] .tbl thead th { color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="light"] .tbl td { border-bottom-color: var(--border); }
[data-theme="light"] .select,
[data-theme="light"] .form-input { border-color: var(--border-strong); color: var(--text); }