/* Wisesight interface system. Applies to both workspaces and their dialogs.
   Brand reference: https://brandbook.wisesight.io/llms.txt
   Component geometry stays in styles.css; visual decisions use tokens.css. */
:root {
  --bg: var(--ws-surface-gray);
  --surface: var(--ws-surface-white);
  --surface-soft: var(--ws-surface-gray);
  --ink: var(--ws-black);
  --text: var(--ws-black);
  --muted: var(--ws-text-muted);
  --text-muted: var(--ws-text-muted);
  --line: var(--ws-gray);
  --border: var(--ws-gray);
  --brand: var(--ws-red);
  --green: var(--ws-jewel-emerald);
  --green-2: var(--ws-surface-gray);
  --blue: var(--ws-steel-blue);
  --blue-2: var(--ws-surface-gray);
  --amber: var(--ws-text-muted);
  --amber-2: var(--ws-surface-gray);
  --red: var(--ws-chart-negative);
  --red-2: var(--ws-surface-gray);
  --violet: var(--ws-royal-indigo);
  --violet-2: var(--ws-surface-gray);
  --shadow: var(--ws-shadow);
  --op-primary: var(--ws-black);
  --op-primary-soft: var(--ws-surface-gray);
  --op-info: var(--ws-steel-blue);
  --op-info-soft: var(--ws-surface-gray);
  --op-success: var(--ws-jewel-emerald);
  --op-success-soft: var(--ws-surface-gray);
  --op-warning: var(--ws-text-muted);
  --op-warning-soft: var(--ws-surface-gray);
  --op-danger: var(--ws-chart-negative);
  --op-danger-soft: var(--ws-surface-gray);
  --op-neutral: var(--ws-text-muted);
  --op-neutral-soft: var(--ws-surface-gray);
  --text-xs: 12px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 28px;
  --leading-normal: 1.5;
  --leading-relaxed: 1.5;
  font-family: var(--ws-font-formal);
}
html, body, button, input, select, textarea, table {
  font-family: var(--ws-font-formal);
}
body { font-size: 14px; line-height: 1.5; }
body, .main { background: var(--ws-surface-gray); }
h1, h2, h3, h4, h5, p { overflow-wrap: anywhere; }
button, input, select, textarea { font-size: 14px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.main { min-width: 0; padding: 48px; }
.view, .view > *, .panel, .section-head > div { min-width: 0; }
.view { scroll-margin-top: 24px; }
.topbar { gap: 24px !important; margin-bottom: 32px !important; }
.topbar h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; }
.eyebrow, .panel-label { color: var(--ws-red); font-size: 12px; font-weight: 600; }
.eyebrow { margin: 0 0 8px; }
.section-head { gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.section-head h3, .view > h3, .panel > h3 { font-size: 22px; font-weight: 600; line-height: 1.25; }
.section-head p, .help-text, .field-help, .form-message,
.metric-card p, .topbar p, .is-ov-panel-sub { font-weight: 400; line-height: 1.5; }
.section-head p { margin: 8px 0 0; font-size: 14px; color: var(--ws-text-muted); }

/* Navigation has one active accent; surrounding controls remain neutral. */
.sidebar { padding: 32px 24px; gap: 24px; background: var(--ws-surface-white); }
.brand { gap: 16px; }
.brand-logo { width: 168px; margin: 0; }
.brand h1 { font-size: 18px; line-height: 1.3; font-weight: 700; }
.brand p { margin-top: 8px; font-size: 12px; font-weight: 400; }
.mode-switcher { padding: 8px; border-radius: var(--ws-radius-md); background: var(--ws-surface-gray); }
.mode-btn { padding: 8px; min-height: 40px; border-radius: var(--ws-radius-sm); font-weight: 600; }
.mode-btn.active { color: white; background: var(--ws-black); }
.nav { gap: 8px; }
.nav-item { min-height: 48px; padding: 8px; gap: 8px; border-radius: var(--ws-radius-sm); font-weight: 600; }
.nav-icon { width: 32px; height: 32px; border: 0; background: transparent; color: var(--ws-text-muted); }
.nav-item.active, .nav-item:hover { box-shadow: none; color: var(--ws-red); background: var(--ws-surface-gray); }
.nav-item.active .nav-icon, .nav-item:hover .nav-icon {
  background: transparent !important; color: var(--ws-red) !important; border-color: transparent !important;
}
.account-subnav, .devops-subnav, .maintenance-subnav { margin-left: 24px; padding-left: 16px; border-color: var(--ws-gray); }
.account-subitem { padding: 8px; border-radius: var(--ws-radius-sm); font-size: 14px; font-weight: 400; }
.account-subitem.active { color: var(--ws-red); font-weight: 600; background: var(--ws-surface-gray); box-shadow: none; }

/* Flat white panels and a single elevation level for overlays. */
.panel, .metric-card, .mini-panel, .matrix-card, .timeline-card,
.is-ov-stat-card, .is-equipment-panel, .is-asset-stat, .is-report-stat,
.is-project-card, .is-event-card, .is-asset-card, .is-report-card,
.report-kpi, .report-list-card, .pre-project-card, .sla-summary-card,
.effort-group, .sma-panel, .capacity-stat {
  background: var(--ws-surface-white);
  border: 1px solid var(--ws-gray);
  border-radius: var(--ws-radius-md);
  box-shadow: none;
}
.panel { padding: 24px; }
.metric-card, .is-ov-stat-card, .is-report-stat, .report-kpi { padding: 24px; }
.metric-card strong, .is-ov-stat-value, .is-report-stat-val, .is-asset-stat-val {
  font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--ws-black);
  font-variant-numeric: tabular-nums;
}
.metric-card span, .is-ov-stat-label, .is-report-stat-label { font-size: 12px; color: var(--ws-text-muted); font-weight: 400; }
.metric-card strong { margin-block: 8px; }
.metric-card:hover, .metric-card:focus-within { border-color: var(--ws-black); box-shadow: none; }
.empty-state, .report-empty, .itsupport-empty { padding: 32px; background: var(--ws-surface-gray); color: var(--ws-text-muted); border-radius: var(--ws-radius-sm); }

/* Controls: red for the main action; black and outline for utilities. */
.button, .panel .button, .top-actions .button {
  min-height: 40px; padding: 8px 16px; border-radius: var(--ws-radius-sm);
  font-size: 14px; font-weight: 600; line-height: 1.5; box-shadow: none;
}
.button.primary, .button.success-button, .button.action-button {
  background: var(--ws-red) !important; border-color: var(--ws-red) !important; color: white !important;
}
.button.primary:hover, .button.success-button:hover, .button.action-button:hover {
  background: var(--ws-black) !important; border-color: var(--ws-black) !important;
}
.button.ghost, .button.utility-button, .button.external-button, .button.warning-button {
  background: var(--ws-surface-white); border: 1px solid var(--ws-gray); color: var(--ws-black); box-shadow: none;
}
.button.ghost:hover, .button.utility-button:hover, .button.external-button:hover {
  background: var(--ws-surface-gray); border-color: var(--ws-black); color: var(--ws-black); box-shadow: none;
}
.search, input, select, textarea { border: 1px solid var(--ws-gray); border-radius: var(--ws-radius-sm); background: var(--ws-surface-white); box-shadow: none; }
input, select, textarea { min-height: 40px; padding: 8px 16px; font-weight: 400; color: var(--ws-black); }
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; accent-color: var(--ws-black); }
.search { min-width: 0; padding: 0; }
.search input { width: 100%; border: 0; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ws-black); outline-offset: 2px; box-shadow: none;
}
.top-actions { gap: 8px; }
.table-toolbar, .report-filter-bar, .itsupport-toolbar, .tools-filter-bar { gap: 16px; margin-bottom: 24px; }
.filter-group { gap: 8px; flex-wrap: wrap; }

/* Tables preserve their existing desktop grid and mobile card layouts. */
.table-wrap, .infra-table-wrap, .tools-table-wrap, .report-table-wrap, .capacity-table-wrap,
.user-table-wrap, .activity-table-wrap, .effort-table-scroll {
  border-radius: var(--ws-radius-sm); box-shadow: none; border-color: var(--ws-gray);
}
table, .table-wrap table { font-size: 14px; color: var(--ws-black); }
th, .table-wrap table th, .infra-table th, .tools-table th, .effort-table th,
.criteria-table thead th, .capacity-table th, .report-table th,
.is-ma-table th, .is-projects-table th, .is-events-table th, .is-assets-table th, .is-report-table th {
  padding: 16px; background: var(--ws-surface-gray); color: var(--ws-text-muted);
  border-color: var(--ws-gray); font-size: 12px; font-weight: 600; line-height: 1.45;
}
td, .table-wrap table td { padding: 16px; border-color: var(--ws-gray); line-height: 1.5; }
tbody tr:hover td { background: var(--ws-surface-gray); }
.infra-name, .task-row strong, .report-card-head strong { font-size: 16px; font-weight: 600; }
.infra-sub, .tool-note, .check-meta { color: var(--ws-text-muted); font-weight: 400; }

/* Status is communicated with a label and a restrained semantic foreground. */
.pill, .badge, .status-pill, .expiry-pill, .tool-expiry-badge, .is-status-badge,
.is-status-btn, .sla-xs, .sla-s, .sla-m, .sla-l {
  background: var(--ws-surface-gray); border-radius: var(--ws-radius-pill);
  color: var(--ws-text-muted); font-size: 12px; font-weight: 600; box-shadow: none;
}
.pill.danger, .status-overdue, .status-critical, .status-expired, .pill-asset-expired,
.tool-expiry-badge.critical, .tool-expiry-badge.overdue, .expiry-pill.overdue {
  color: var(--ws-chart-negative); background: var(--ws-surface-gray);
}
.pill.success, .status-complete, .status-done, .pill-asset-ok, .tool-expiry-badge.ok,
.color-green { color: var(--ws-jewel-emerald) !important; background: var(--ws-surface-gray); }
.status-pending, .status-inprogress, .pill-asset-soon, .tool-expiry-badge.notice,
.color-orange { color: var(--ws-text-muted) !important; background: var(--ws-surface-gray); }

/* Data marks use neutral emphasis; red indicates negative values only. */
.progress-fill, .health-fill, .is-progress-fill, .is-ov-ma-bar,
.is-ov-ma-bar.is-prog-partial, .is-report-progress-fill:not(.fill-ok),
.capacity-mini-bar span, .capacity-owner-track span {
  background: var(--ws-chart-emphasis); border-radius: var(--ws-radius-sm);
}
.is-report-progress-fill.fill-ok, .is-ov-ma-bar.is-prog-done, .progress-done { background: var(--ws-jewel-emerald); }
.capacity-mini-bar span.warning, .capacity-owner-track span.warning { background: var(--ws-chart-cat-3); }
.capacity-mini-bar span.danger, .capacity-owner-track span.danger { background: var(--ws-chart-negative); }
.is-ov-ma-count.is-prog-partial { color: var(--ws-text-muted); }
.is-month-focus { background: var(--ws-black) !important; color: white !important; }

/* Account settings use the same system as the operations pages. */
.account-panel[data-account-panel="google"].active {
  --settings-accent: var(--ws-red); --settings-accent-deep: var(--ws-black);
  --settings-cream: var(--ws-surface-gray); --settings-cream-soft: var(--ws-surface-white);
  --settings-hairline: var(--ws-gray); --settings-ink: var(--ws-black);
  padding: 24px; background: var(--ws-surface-white);
  border: 1px solid var(--ws-gray); border-radius: var(--ws-radius-md);
}
.account-settings-section { margin-top: 32px; }
.account-settings-section, .account-profile-section { background: var(--ws-surface-white); }
.account-panel[data-account-panel="google"] .section-head p { color: var(--ws-text-muted); font-weight: 400; }
.account-panel[data-account-panel="google"] .settings-form :is(input, select) { background: white; font-weight: 400; }

/* Twelve-column page grid; dense tables scroll within their own containers. */
@media (min-width: 1181px) {
  .metrics, .overview-metrics, .is-ov-stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .metrics > *, .overview-metrics > *, .is-ov-stats > * { grid-column: span 3; }
  .topbar { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); }
  .top-actions { width: 100%; max-width: none; flex-wrap: wrap; }
  .top-actions .search { min-width: 200px; flex: 1 1 240px; }
}
@media (max-width: 1180px) {
  .main { padding: 32px 24px; }
}
@media (max-width: 740px) {
  .main { padding: 24px 16px; }
  .sidebar { padding: 16px; gap: 16px; }
  .brand-logo { width: 144px; }
  .topbar { gap: 16px !important; margin-bottom: 24px !important; }
  .topbar h2 { font-size: 28px; }
  .top-actions { flex-wrap: wrap; }
  .top-actions .search { flex: 1 1 100%; min-width: 0; }
  .top-actions .button { min-width: 0; }
  .panel, .metric-card, .is-ov-stat-card, .is-report-stat, .report-kpi { padding: 16px; }
  .section-head { flex-wrap: wrap; margin-bottom: 16px; }
  .section-head h3, .view > h3, .panel > h3 { font-size: 22px; }
  .table-toolbar, .itsupport-toolbar, .report-filter-bar { flex-wrap: wrap; }
  .table-toolbar select, .filter-group, .itsupport-toolbar label { min-width: 0; max-width: 100%; }
  .is-ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .is-ov-ma-row { grid-template-columns: minmax(0, 1fr) minmax(48px, 1fr) 48px; gap: 8px; }
  .account-panel[data-account-panel="google"].active { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Keep wide content in its own scroll region, not the page viewport. */
.tools-list, .budget-table-scroll, .matrix-plot-scroll {
  min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
}
.matrix-panel { overflow: visible; }
.matrix-panel .section-head, .matrix-summary-section { min-width: 0; }
.matrix-summary-card, .matrix-summary-head { min-width: 0; }
.matrix-summary-head { flex-wrap: wrap; }
.matrix-plot { min-width: 640px; width: 100%; }
.matrix-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1181px) {
  .metric-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .metric-grid > * { grid-column: span 3; }
  .metric-grid:has(> :nth-child(6)) > * { grid-column: span 2; }
}
@media (max-width: 1080px) {
  .sidebar::after { display: none; }
  .sidebar { max-width: 100vw; }
  .mode-switcher { margin: 0; }
}
@media (max-width: 740px) {
  .top-actions { flex-direction: row; align-items: center; }
  .top-actions .button { flex: 1 1 auto; width: auto; min-height: 40px; }
  .top-actions .search { flex: 1 1 100%; }
  .matrix-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .matrix-plot { height: 480px; }
}

.table-toolbar, .report-filter-bar, .itsupport-toolbar, .maintenance-summary article {
  background: var(--ws-surface-white); border: 1px solid var(--ws-gray);
  border-radius: var(--ws-radius-md); box-shadow: none;
}
@media (min-width: 1181px) {
  .capacity-metrics > * { grid-column: span 2; }
  .capacity-metrics > :nth-child(-n+2) { grid-column: span 3; }
}

.gate-brand { display: flex; margin-bottom: 24px; }
.pre-project-list, .pre-project-card { min-width: 0; }
.matrix-point, .matrix-point:hover, .matrix-point-real { box-shadow: none; }
@media (max-width: 740px) {
  .pre-project-scores { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .pre-project-score-box { min-width: 0; padding: 8px; }
  .pre-project-score-sep { padding: 0; }
}