/* Icon font dependencies (Material Symbols, Font Awesome) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
:root {
  --tf-surface-1: linear-gradient(180deg, rgba(46, 49, 54, 0.96), rgba(38, 41, 46, 0.86));
  --tf-surface-2: linear-gradient(180deg, rgba(46, 49, 54, 0.9), rgba(32, 35, 40, 0.78));
  --tf-border-soft: rgba(181, 183, 185, 0.12);
  --tf-border-strong: rgba(140, 106, 62, 0.34);
  --tf-shadow: 0 14px 34px rgba(10, 11, 13, 0.28);
  --tf-shadow-hover: 0 18px 38px rgba(10, 11, 13, 0.34);
  --tf-radius: 14px;
  --tf-card-pad: 20px;
  --tf-section-pad-y: 34px;
  --tf-section-pad-y-compact: 20px;
  --tf-header-pad-top: 26px;
  --tf-header-pad-bottom: 16px;
  --tf-header-title-gap: 8px;
  --tf-workspace-panel-gap: 20px;
  /* Icon sizing system */
  --tf-icon-sm: 16px;
  --tf-icon-md: 20px;
  --tf-icon-lg: 24px;
  --tf-icon-container-sm: 32px;
  --tf-icon-container-md: 36px;
  --tf-icon-container-lg: 42px;
  --tf-icon-hard-cap: 32px;
  --tf-decorative-layer-max: min(44vw, 420px);
}

.tf-os {
  --r: var(--tf-radius);
}

/* Shared icon/decor containment guards.
   Prevents inline SVG fallback sizing from rendering giant symbols. */
.tf-os svg:not([width]):not([height]) {
  width: 1em;
  height: 1em;
}

.tf-os [class*="icon"] {
  overflow: hidden;
}

/* Cap font icons so placeholders can't blow up */
.tf-os i[class*="fa"],
.tf-os span[class*="fa"],
.tf-os .svg-inline--fa,
.tf-os .material-symbols-outlined,
.tf-os .material-symbols-rounded,
.tf-os .material-symbols-sharp,
.tf-os .material-icons,
.tf-os [class*="material-symbols"],
.tf-os [class*="lucide"] {
  font-size: clamp(var(--tf-icon-sm), 2.4vw, var(--tf-icon-hard-cap));
  line-height: 1;
  width: auto;
  max-width: var(--tf-icon-hard-cap);
  max-height: var(--tf-icon-hard-cap);
}

.tf-os [class*="icon"] > svg,
.tf-os [class*="icon"] svg:first-child {
  width: min(100%, var(--tf-icon-hard-cap));
  height: min(100%, var(--tf-icon-hard-cap));
  max-width: var(--tf-icon-hard-cap);
  max-height: var(--tf-icon-hard-cap);
  display: block;
  flex-shrink: 0;
}

.tf-os [class*="watermark"],
.tf-os [class*="decor"],
.tf-os [class*="ghost"],
.tf-os [class*="orb"] {
  max-width: min(100%, var(--tf-decorative-layer-max));
  max-height: min(100%, var(--tf-decorative-layer-max));
  overflow: hidden;
}

.tf-os .section {
  padding: var(--tf-section-pad-y) 0;
}

.tf-os .tf-section-compact {
  padding: var(--tf-section-pad-y-compact) 0;
}

.tf-os .ucmd-header,
.tf-os .pe-header,
.tf-os .portal-page-header,
.tf-os .hero.portal-hero {
  padding-top: var(--tf-header-pad-top);
  padding-bottom: var(--tf-header-pad-bottom);
}

.tf-os .ucmd-header h1,
.tf-os .pe-header h1,
.tf-os .portal-page-header h1,
.tf-os .portal-hero h1 {
  margin-bottom: var(--tf-header-title-gap);
}

.tf-os .ucmd-panel {
  padding-top: var(--tf-workspace-panel-gap);
}

.tf-os .pe-summary-shell {
  padding: var(--tf-section-pad-y-compact) 0 0;
}

.tf-os .pe-route-shell,
.tf-os .pe-ops-shell {
  padding: 0 0 var(--tf-section-pad-y-compact);
}

.tf-os .tf-route-card {
  padding: var(--tf-card-pad);
}

.tf-os .card,
.tf-os .feed-card,
.tf-os .hp-opp-card,
.tf-os .supply-cat-card,
.tf-os .supply-how-card,
.tf-os .supply-form-card,
.tf-os .portal-control-card,
.tf-os .portal-access-lane,
.tf-os .ucmd-section,
.tf-os .ucmd-metric,
.tf-os .fcc-card,
.tf-os .pe-card,
.tf-os .pe-stat,
.tf-os .ops-status-card,
.tf-os .wutf-card,
.tf-os .hp-service-card,
.tf-os .sc-category-card,
.tf-os .sc-path-card,
.tf-os .sc-dash-card,
.tf-os .sc-demand-card,
.tf-os .sc-queue-card,
.tf-os .sc-fulfill-card,
.tf-os .sc-cta-panel {
  background: var(--tf-surface-1);
  border: 1px solid var(--tf-border-soft);
  border-radius: var(--tf-radius);
  box-shadow: var(--tf-shadow);
}

.tf-os .card,
.tf-os .feed-card,
.tf-os .supply-form-card,
.tf-os .portal-control-card,
.tf-os .ucmd-section,
.tf-os .fcc-card,
.tf-os .pe-card {
  padding: var(--tf-card-pad);
}

.tf-os .feed-card,
.tf-os .hp-opp-card,
.tf-os .supply-cat-card,
.tf-os .supply-how-card,
.tf-os .portal-nav-item.card,
.tf-os .portal-access-lane,
.tf-os .ucmd-section,
.tf-os .ucmd-metric,
.tf-os .fcc-card,
.tf-os .pe-card,
.tf-os .pe-stat,
.tf-os .wutf-card,
.tf-os .hp-service-card,
.tf-os .sc-category-card,
.tf-os .sc-path-card,
.tf-os .sc-deal-card,
.tf-os .sc-dash-card,
.tf-os .sc-demand-card,
.tf-os .sc-queue-card,
.tf-os .sc-fulfill-card,
.tf-os .sc-cta-panel,
.tf-os a.card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tf-os .feed-card:hover,
.tf-os .hp-opp-card:hover,
.tf-os .supply-cat-card:hover,
.tf-os .supply-how-card:hover,
.tf-os .portal-nav-item.card:hover,
.tf-os .portal-access-lane:hover,
.tf-os .ucmd-section:hover,
.tf-os .ucmd-metric:hover,
.tf-os .fcc-card:hover,
.tf-os .pe-card:hover,
.tf-os .pe-stat:hover,
.tf-os .wutf-card:hover,
.tf-os .hp-service-card:hover,
.tf-os .sc-category-card:hover,
.tf-os .sc-path-card:hover,
.tf-os .sc-deal-card:hover,
.tf-os .sc-dash-card:hover,
.tf-os .sc-demand-card:hover,
.tf-os .sc-queue-card:hover,
.tf-os .sc-fulfill-card:hover,
.tf-os .sc-cta-panel:hover,
.tf-os a.card:hover {
  border-color: var(--tf-border-strong);
  box-shadow: var(--tf-shadow-hover);
  transform: translateY(-1px);
}

.tf-os .feed-card:active,
.tf-os .hp-opp-card:active,
.tf-os .supply-cat-card:active,
.tf-os .supply-how-card:active,
.tf-os .portal-nav-item.card:active,
.tf-os .portal-access-lane:active,
.tf-os .ucmd-section:active,
.tf-os .ucmd-metric:active,
.tf-os .fcc-card:active,
.tf-os .pe-card:active,
.tf-os .pe-stat:active,
.tf-os .wutf-card:active,
.tf-os .hp-service-card:active,
.tf-os .sc-category-card:active,
.tf-os .sc-path-card:active,
.tf-os .sc-deal-card:active,
.tf-os .sc-dash-card:active,
.tf-os .sc-demand-card:active,
.tf-os .sc-queue-card:active,
.tf-os .sc-fulfill-card:active,
.tf-os .sc-cta-panel:active,
.tf-os a.card:active {
  transform: translateY(0);
  box-shadow: 0 12px 24px rgba(10, 11, 13, 0.3);
}

.tf-os .kicker,
.tf-os .feed-detail-label,
.tf-os .feed-trades-label,
.tf-os .ucmd-metric-label,
.tf-os .ucmd-badge,
.tf-os .portal-chip,
.tf-os .fcc-section-subtitle {
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 650;
}

.tf-os h1,
.tf-os .ucmd-header h1,
.tf-os .pe-header h1,
.tf-os .fcc-section-title,
.tf-os .feed-card-title,
.tf-os .hp-opp-title {
  letter-spacing: -0.015em;
}

.tf-os .section h2,
.tf-os .portal-section-header h2,
.tf-os .ucmd-section-title,
.tf-os .fcc-section-title,
.tf-os .pe-card-head h3,
.tf-os .feed-card-title,
.tf-os .supply-cat-card h4,
.tf-os .supply-how-card h4 {
  color: #fff;
  margin-top: 0;
}

.tf-os .section h2,
.tf-os .portal-section-header h2,
.tf-os .fcc-section-title {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.tf-os .mini,
.tf-os .lede,
.tf-os .feed-card-location,
.tf-os .feed-daily-count,
.tf-os .ucmd-subtitle,
.tf-os .ucmd-feed-meta,
.tf-os .fcc-insight-detail {
  color: var(--muted);
  line-height: 1.58;
}

.tf-os .portal-section-header,
.tf-os .ucmd-section-header,
.tf-os .fcc-section-head,
.tf-os .pe-card-head,
.tf-os .feed-daily-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tf-os .ops-status-board {
  gap: 12px;
}

.tf-os .ops-status-card {
  padding: 16px;
}

.tf-os .ops-status-value {
  color: #fff;
  font-weight: 700;
}

.tf-os .btn:focus-visible,
.tf-os a:focus-visible,
.tf-os button:focus-visible,
.tf-os .ucmd-tab:focus-visible,
.tf-os .fcc-nav-tab:focus-visible,
.tf-os .pe-tab:focus-visible {
  outline: 2px solid rgba(140, 106, 62, 0.75);
  outline-offset: 2px;
}

.tf-os .btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.tf-os .btn:hover {
  transform: translateY(-1px);
}

.tf-os .btn:active {
  transform: translateY(0) scale(0.985);
}

.tf-os a:not(.btn) {
  transition: color 0.18s ease, opacity 0.18s ease, text-underline-offset 0.18s ease, text-decoration-color 0.18s ease;
}

.tf-os a:not(.btn):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(181, 183, 185, 0.45);
}

.tf-os a:not(.btn):active {
  opacity: 0.9;
}

.tf-os .ucmd-grid-2,
.tf-os .ucmd-grid-3,
.tf-os .grid-2,
.tf-os .grid-3,
.tf-os .opp-cards-grid,
.tf-os .portal-nav-grid,
.tf-os .portal-lane-grid,
.tf-os .supply-cat-grid,
.tf-os .supply-detail-grid,
.tf-os .supply-how-grid,
.tf-os .fcc-grid-2,
.tf-os .fcc-grid-3,
.tf-os .fcc-grid-4,
.tf-os .pe-grid-2,
.tf-os .pe-grid-3 {
  gap: 14px;
}

.tf-os .feed-card-actions,
.tf-os .hp-opp-actions,
.tf-os .ucmd-actions,
.tf-os .portal-hero-actions {
  gap: 10px;
}

.tf-os .tf-section-purpose {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 74ch;
}

.tf-os .tf-section-purpose strong {
  color: #d3d6d9;
  font-weight: 650;
}

.tf-os .tf-section-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(140, 106, 62, 0.34);
  background: rgba(140, 106, 62, 0.12);
  color: var(--bronze);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tf-os .tf-section-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tf-os .tf-section-state--inactive {
  border-color: rgba(181, 183, 185, 0.28);
  background: rgba(181, 183, 185, 0.08);
  color: var(--muted);
}

.tf-os .tf-system-route {
  border-top: 1px solid rgba(181, 183, 185, 0.08);
  border-bottom: 1px solid rgba(181, 183, 185, 0.1);
  background: rgba(46, 49, 54, 0.2);
}

.tf-os .tf-system-route-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
}

.tf-os .tf-system-route-text {
  font-size: 12px;
  color: var(--muted);
}

.tf-os .tf-system-route-text a {
  color: var(--bronze);
  text-decoration: none;
}

.tf-os .tf-system-route-text strong {
  color: #fff;
}

.tf-os .tf-link-cluster {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tf-os .tf-link-cluster .badge {
  margin: 0;
  text-decoration: none;
}

.tf-os .tf-section--active {
  border-left: 3px solid rgba(140, 106, 62, 0.55);
}

.tf-os .tf-section--secondary {
  opacity: 0.88;
}

.tf-os .ucmd-tab,
.tf-os .pe-tab {
  opacity: 0.82;
}

.tf-os .ucmd-tab.active,
.tf-os .pe-tab.active {
  opacity: 1;
}

.tf-os .ucmd-empty,
.tf-os .ti-empty,
.tf-os .ps-empty,
.tf-os .pc-empty,
.tf-os .wr-empty,
.tf-os .ws-empty,
.tf-os .pe-empty,
.tf-os #pe-loading {
  border: 1px dashed rgba(181, 183, 185, 0.2);
  border-radius: 10px;
  background: rgba(181, 183, 185, 0.04);
}

@media (max-width: 900px) {
  :root {
    --tf-card-pad: 16px;
    --tf-section-pad-y: 30px;
    --tf-section-pad-y-compact: 16px;
    --tf-header-pad-top: 22px;
    --tf-header-pad-bottom: 14px;
    --tf-workspace-panel-gap: 16px;
  }

  .tf-os .section {
    padding: var(--tf-section-pad-y) 0;
  }

  .tf-os .card,
  .tf-os .feed-card,
  .tf-os .supply-form-card,
  .tf-os .portal-control-card,
  .tf-os .ucmd-section,
  .tf-os .fcc-card,
  .tf-os .pe-card {
    padding: 16px;
  }
}

@media (max-width: 520px) {
  :root {
    --tf-card-pad: 14px;
    --tf-section-pad-y: 24px;
    --tf-section-pad-y-compact: 14px;
    --tf-header-pad-top: 18px;
    --tf-header-pad-bottom: 12px;
    --tf-header-title-gap: 6px;
    --tf-workspace-panel-gap: 14px;
  }

  .tf-os .section {
    padding: var(--tf-section-pad-y) 0;
  }

  .tf-os .portal-section-header,
  .tf-os .ucmd-section-header,
  .tf-os .fcc-section-head,
  .tf-os .pe-card-head,
  .tf-os .feed-daily-header {
    margin-bottom: 12px;
  }

  .tf-os .card,
  .tf-os .feed-card,
  .tf-os .supply-form-card,
  .tf-os .portal-control-card,
  .tf-os .ucmd-section,
  .tf-os .fcc-card,
  .tf-os .pe-card {
    padding: 14px;
  }

  /* Grids: single column on phone */
  .tf-os .ucmd-grid-2,
  .tf-os .grid-2,
  .tf-os .fcc-grid-2,
  .tf-os .pe-grid-2 {
    grid-template-columns: 1fr;
  }

  .tf-os .ucmd-grid-3,
  .tf-os .grid-3,
  .tf-os .fcc-grid-3,
  .tf-os .pe-grid-3 {
    grid-template-columns: 1fr;
  }

  .tf-os .fcc-grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Section headers: stack vertically */
  .tf-os .portal-section-header,
  .tf-os .ucmd-section-header,
  .tf-os .fcc-section-head,
  .tf-os .pe-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Action button groups: full width */
  .tf-os .feed-card-actions,
  .tf-os .hp-opp-actions,
  .tf-os .ucmd-actions,
  .tf-os .portal-hero-actions {
    flex-direction: column;
    gap: 8px;
  }
  .tf-os .feed-card-actions .btn,
  .tf-os .hp-opp-actions .btn,
  .tf-os .ucmd-actions .btn,
  .tf-os .portal-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── UI System: touch target enforcement on mobile ── */
@media (max-width: 900px) {
  .tf-os .ucmd-tab,
  .tf-os .fcc-nav-tab,
  .tf-os .pe-tab {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Metric cards: easier to read on site */
  .tf-os .ucmd-metric,
  .tf-os .pe-stat {
    padding: 16px;
  }

  /* Ops status cards: scannable */
  .tf-os .ops-status-card {
    padding: 16px;
  }
  .tf-os .ops-status-value {
    font-size: 20px;
  }

  /* Portal nav grid items: larger touch area */
  .tf-os .portal-nav-item.card {
    padding: 16px;
  }

  /* Lane items: touch-friendly */
  .tf-os .portal-access-lane {
    padding: 14px;
    min-height: 48px;
  }

  /* Supply cards: readable */
  .tf-os .supply-cat-card,
  .tf-os .supply-how-card {
    padding: 16px;
  }

  .tf-os .tf-system-route-inner {
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .tf-os .tf-system-route-text {
    width: 100%;
  }
}

/* ── Homepage + Workspace Spacing Consistency ── */
.tf-os .hp-opp-grid,
.tf-os .hp-services-grid,
.tf-os .hp-cred-grid,
.tf-os .demo-proof-grid,
.tf-os .why-tf-grid,
.tf-os .wutf-grid {
  gap: 16px;
}

.tf-os .hp-opp-card {
  padding: 20px;
}

.tf-os .hp-opp-details {
  gap: 8px 16px;
  padding: 12px 0 4px;
}

.tf-os .hp-workspace-preview {
  padding: 18px;
  margin-top: 18px;
}

.tf-os .hero-system-panel-head,
.tf-os .hp-workspace-preview-head,
.tf-os .demo-proof-head {
  align-items: flex-start;
}

.tf-os .wutf-card h3,
.tf-os .hp-service-card h3,
.tf-os .hp-cred-item h3,
.tf-os .hp-workspace-preview-title {
  margin-top: 0;
  line-height: 1.35;
}

@media (max-width: 520px) {
  .tf-os .hp-opp-grid,
  .tf-os .hp-services-grid,
  .tf-os .hp-cred-grid,
  .tf-os .demo-proof-grid,
  .tf-os .why-tf-grid,
  .tf-os .wutf-grid {
    gap: 12px;
  }

  .tf-os .hp-workspace-preview {
    padding: 14px;
  }
}

/* ═══════════════════════════════════════════════════
   PORTAL-WIDE NORMALIZATION — System-wide UI fixes
   Ensures consistent rendering of shared elements
   across all portal pages
   ═══════════════════════════════════════════════════ */

/* ── Avatar & Initials Normalization ── */
.cc-avatar,
.fes-avatar,
.ws-profile-avatar,
.tf-avatar,
[class*="-avatar"] {
  max-width: 48px;
  max-height: 48px;
  overflow: hidden;
  font-size: 14px;
}

.cc-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.fes-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(140, 106, 62, 0.2);
  color: var(--bronze, #8c6a3e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Stat Value Normalization ── */
.cmd-metric-value,
.ucmd-metric-value,
.ad-stat-value,
.oe-stat-val,
.re-stat-val,
[class*="-stat-val"],
[class*="-metric-value"] {
  font-size: clamp(14px, 2.5vw, 28px);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Icon Size Enforcement ── */
.cmd-empty-state svg,
.cc-empty svg,
.tf-empty-state svg,
[class*="-empty"] svg {
  width: 24px;
  height: 24px;
  max-width: 32px;
  max-height: 32px;
}

.prov-empty-icon,
.it-empty-icon {
  font-size: clamp(16px, 2.4vw, 28px);
  max-width: var(--tf-icon-hard-cap);
}

/* ── Shared Empty State System ── */
.tf-empty-state,
.cmd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed rgba(181, 183, 185, 0.18);
  border-radius: 10px;
  background: rgba(46, 49, 54, 0.15);
}

.tf-empty-state p,
.cmd-empty-state p {
  margin: 0;
  color: var(--muted, #a3adb8);
  font-size: 13px;
  line-height: 1.55;
  max-width: 300px;
}

.tf-empty-state svg,
.cmd-empty-state svg {
  color: rgba(140, 106, 62, 0.35);
  margin-bottom: 10px;
}

.tf-empty-action,
.cmd-empty-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--bronze, #8c6a3e);
  background: rgba(140, 106, 62, 0.1);
  border: 1px solid rgba(140, 106, 62, 0.25);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}

.tf-empty-action:hover,
.cmd-empty-action:hover {
  background: rgba(140, 106, 62, 0.22);
  border-color: rgba(140, 106, 62, 0.5);
}

/* ── Shared Loading State ── */
.tf-loading,
.cc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--muted, #a3adb8);
  font-size: 13px;
}

.tf-loading::before,
.cc-loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(140, 106, 62, 0.3);
  border-top-color: var(--bronze, #8c6a3e);
  border-radius: 50%;
  margin-right: 10px;
  animation: tf-spin 0.7s linear infinite;
}

@keyframes tf-spin {
  to { transform: rotate(360deg); }
}

/* ── Portal Loading Spinner Normalization ──
   Ensures all portal page loading spinners are small and consistent.
   Overrides per-page spinner bloat (36px, 100px padding, etc.) */
[class$="-loading"] {
  padding: 32px 16px !important;
}

[class$="-spinner"] {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
}

/* ── Badge & Chip Normalization ── */
.tf-badge,
.cmd-severity,
.cc-notif-badge,
[class*="-badge"],
[class*="-chip"] {
  max-height: 24px;
  font-size: clamp(9px, 1.2vw, 11px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-notif-badge {
  max-width: 28px;
  max-height: 18px;
}

/* ── Prevent Giant Typography ── */
body:not(.meeting-mode) .cmd-metric-value,
body:not(.meeting-mode) .ucmd-metric-value,
body:not(.meeting-mode) .ucmd-health-count {
  font-size: clamp(18px, 2.5vw, 28px);
}

body:not(.meeting-mode) .cc-module-count {
  font-size: clamp(18px, 2.5vw, 26px);
}

/* ── Portal Stat Card System ── */
.tf-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  background: linear-gradient(180deg, rgba(46, 49, 54, 0.96), rgba(46, 49, 54, 0.82));
  border: 1px solid rgba(181, 183, 185, 0.10);
  border-radius: 10px;
}

.tf-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.tf-stat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bronze, #8c6a3e);
  margin-top: 4px;
}

/* ── Portal Section Header ── */
.tf-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 10px;
}

.tf-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bronze, #8c6a3e);
  margin: 0;
}

.tf-section-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #a3adb8);
  text-decoration: none;
}

.tf-section-link:hover {
  color: var(--bronze, #8c6a3e);
}

/* ═══════════════════════════════════════════════════
   GLOBAL UI SANITIZATION — Giant Symbol Prevention
   System-level guards that apply regardless of
   whether a page uses .tf-os or not
   ═══════════════════════════════════════════════════ */

/* ── Global SVG containment ── */
svg:not([width]):not([height]):not(.tf-decorative) {
  width: 1em;
  height: 1em;
}

svg {
  max-width: var(--tf-icon-hard-cap, 32px);
  max-height: var(--tf-icon-hard-cap, 32px);
  overflow: hidden;
  flex-shrink: 0;
}

/* Force all inline SVGs inside content areas to respect container */
main svg,
section svg,
article svg,
[role="main"] svg {
  max-width: var(--tf-icon-hard-cap, 32px);
  max-height: var(--tf-icon-hard-cap, 32px);
}

/* Allow decorative/hero SVGs to be larger but still capped */
.hero svg,
.tf-decorative,
svg.logo {
  max-width: 200px;
  max-height: 200px;
}

/* Allow empty-state-icon SVGs to be their designated size */
.tf-empty-state-icon svg {
  width: 100%;
  height: 100%;
  max-width: 48px;
  max-height: 48px;
}

/* ── Global icon element containment ── */
i,
[class*="icon"]:not(.tf-empty-state-icon) {
  max-width: var(--tf-icon-hard-cap, 32px);
  max-height: var(--tf-icon-hard-cap, 32px);
  overflow: hidden;
}

/* ── Icon font fallback protection ──
   If icon fonts (FA, Material Symbols, Lucide) fail to load,
   prevent raw characters from rendering oversized */
i[class*="fa"]::before,
span[class*="fa"]::before,
[class*="material-symbols"]::before,
[class*="lucide"]::before {
  display: inline-block;
  max-width: 1.2em;
  max-height: 1.2em;
  overflow: hidden;
  vertical-align: middle;
}

i[class*="fa"],
span[class*="fa"],
.svg-inline--fa,
[class*="material-symbols"],
[class*="lucide"] {
  font-size: clamp(12px, 1.4vw, 24px);
  line-height: 1;
  max-width: var(--tf-icon-hard-cap, 32px);
  max-height: var(--tf-icon-hard-cap, 32px);
  overflow: hidden;
}

/* ── Webfont / icon-font fallback guard ──
   Prevents raw unicode or webfont characters from
   rendering oversized when font fails to load */
[class*="icon"]::before,
[class*="icon"]::after {
  max-width: 1.5em;
  max-height: 1.5em;
  font-size: inherit;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

/* ── Global empty state icon guard ── */
[class*="-empty"] svg,
[class*="empty-state"] svg,
[class*="empty-icon"] {
  width: 24px;
  height: 24px;
  max-width: 32px;
  max-height: 32px;
}

[class*="-empty-icon"],
[class*="empty-icon"] {
  font-size: clamp(16px, 2vw, 28px);
  max-width: var(--tf-icon-hard-cap, 32px);
  overflow: hidden;
}

/* ── Card / tile overflow protection ── */
.card,
[class*="-card"],
[class*="-tile"],
[class*="-metric"],
[class*="-stat"] {
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Navigation icon guard ── */
nav svg,
.nav svg,
[class*="nav-"] svg {
  width: 20px;
  height: 20px;
  max-width: 24px;
  max-height: 24px;
}

/* ── Header icon guard ── */
header svg,
[class*="header"] svg {
  max-width: 32px;
  max-height: 32px;
}

/* ── Global failsafe: prevent horizontal overflow ── */
body {
  overflow-x: clip;
}

* {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Reset word-break for code/pre blocks */
pre, code, kbd, samp {
  word-break: normal;
  overflow-wrap: normal;
}

/* ── Stat value hard cap ── */
[class*="-stat-val"],
[class*="-metric-value"],
[class*="-stat-value"],
[class*="-count"] {
  font-size: clamp(14px, 2.5vw, 28px);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Badge / chip size enforcement ── */
[class*="-badge"],
[class*="-chip"],
[class*="-tag"] {
  max-height: 28px;
  font-size: clamp(9px, 1.2vw, 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Avatar hard cap ── */
[class*="-avatar"],
[class*="avatar"] {
  max-width: 48px;
  max-height: 48px;
  overflow: hidden;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════
   CENTRALIZED STATE SYSTEM — Loading, Empty, Error
   Single source of truth for all OS state rendering.
   Module-specific spinners still work but these
   provide the canonical fallback layer.
   ═══════════════════════════════════════════════════ */

/* ── Unified Loading State ── */
.tf-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 16px;
  min-height: 72px;
  color: var(--muted, rgba(181, 183, 185, 0.72));
  font-size: 13px;
  font-weight: 500;
}

.tf-loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(140, 106, 62, 0.25);
  border-top-color: var(--bronze, #8c6a3e);
  border-radius: 50%;
  animation: tf-unified-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.tf-loading-label {
  color: var(--muted, rgba(181, 183, 185, 0.72));
  font-size: 13px;
}

@keyframes tf-unified-spin {
  to { transform: rotate(360deg); }
}

/* ── Unified Error State ── */
.tf-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 16px;
  min-height: 120px;
  border: 1px dashed rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.04);
}

.tf-error-state-icon {
  width: 24px;
  height: 24px;
  color: rgba(239, 68, 68, 0.5);
  margin-bottom: 10px;
}

.tf-error-state-icon svg {
  width: 24px;
  height: 24px;
}

.tf-error-state-message {
  margin: 0 0 12px;
  color: rgba(181, 183, 185, 0.7);
  font-size: 13px;
  line-height: 1.5;
  max-width: 300px;
}

.tf-error-state-retry {
  cursor: pointer;
}

/* ── Skeleton group ── */
.tf-skeleton-group {
  padding: 8px 0;
}

/* ── Unified spinner override for module-specific spinners ──
   Ensures all module spinners share consistent small sizing */
[class$="-spinner"],
[class*="-spinner "] {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px;
  max-height: 16px;
  border-width: 2px !important;
}

/* ── Loading container guard ──
   Caps padding on all module loading containers so spinners stay small & inline */
[class$="-loading"],
[class*="-loading "] {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  max-height: 200px;
  overflow: hidden;
}

/* ── Prevent competing states ──
   When loading state is active, hide empty states within same container */
[data-loading-state="true"] .tf-empty-state,
[data-loading-state="true"] .cc-empty,
[data-loading-state="true"] .mos-empty-state,
[data-loading-state="true"] [class*="-empty"] {
  display: none !important;
}

/* When error state is shown, hide loading */
.tf-error-state ~ .tf-loading-state,
.tf-error-state ~ [class*="-loading"] {
  display: none !important;
}