/*
 * v1.13.75 dark / meeting theme system
 *
 * This file is intentionally loaded after every feature stylesheet.  Feature
 * styles are allowed to use light-mode colours, while this final layer owns
 * every visual surface in dark and meeting modes.  Keeping the themes here
 * prevents a late component rule from reintroducing a white panel.
 */

html[data-theme="dark"] {
  --ui-canvas: #07121a;
  --ui-canvas-soft: #0a1822;
  --ui-surface: #10222e;
  --ui-surface-raised: #162c3a;
  --ui-surface-soft: #132733;
  --ui-surface-hover: #1b3544;
  --ui-line: #2d4959;
  --ui-line-strong: #496a7b;
  --ui-text: #e7f1f3;
  --ui-text-soft: #b9cbd0;
  --ui-text-muted: #8fa5ad;
  --ui-accent: #39b9a7;
  --ui-accent-strong: #178b80;
  --ui-accent-alt: #49a9e6;
  --ui-good: #6bd79b;
  --ui-warn: #f2bd66;
  --ui-bad: #ff8492;
  --ui-focus: #64d7c6;
  --ui-shadow: 0 14px 34px rgb(0 0 0 / 30%);
  --ui-shadow-soft: 0 8px 22px rgb(0 0 0 / 22%);
  --panel-bg: var(--ui-canvas);
  color-scheme: dark;
  background: var(--ui-canvas);
}

html[data-theme="meeting"] {
  --ui-canvas: #0d1218;
  --ui-canvas-soft: #121922;
  --ui-surface: #171f29;
  --ui-surface-raised: #202b37;
  --ui-surface-soft: #1b2631;
  --ui-surface-hover: #293746;
  --ui-line: #465563;
  --ui-line-strong: #6b7b87;
  --ui-text: #f0f3ef;
  --ui-text-soft: #c7d0cd;
  --ui-text-muted: #9daaa9;
  --ui-accent: #efb653;
  --ui-accent-strong: #cf8e28;
  --ui-accent-alt: #5cc8b8;
  --ui-good: #7bdda2;
  --ui-warn: #f5c86a;
  --ui-bad: #ff8f98;
  --ui-focus: #ffd88a;
  --ui-shadow: 0 12px 28px rgb(0 0 0 / 28%);
  --ui-shadow-soft: 0 7px 18px rgb(0 0 0 / 20%);
  --panel-bg: var(--ui-canvas);
  color-scheme: dark;
  background: var(--ui-canvas);
}

html[data-theme="control"] {
  --ui-canvas: #071126;
  --ui-canvas-soft: #0a1730;
  --ui-surface: #111e38;
  --ui-surface-raised: #172744;
  --ui-surface-soft: #0d1a33;
  --ui-surface-hover: #1c3153;
  --ui-line: #243b61;
  --ui-line-strong: #315783;
  --ui-text: #edf6ff;
  --ui-text-soft: #c3d3e7;
  --ui-text-muted: #8498b3;
  --ui-accent: #64ecff;
  --ui-accent-strong: #0db9d4;
  --ui-accent-alt: #30a8ff;
  --ui-good: #a7f20f;
  --ui-warn: #ffcd58;
  --ui-bad: #ff7a91;
  --ui-focus: #75efff;
  --ui-shadow: 0 18px 44px rgb(0 4 18 / 42%);
  --ui-shadow-soft: 0 9px 26px rgb(0 4 18 / 32%);
  --panel-bg: var(--ui-canvas);
  color-scheme: dark;
  background: var(--ui-canvas);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% -12%, color-mix(in srgb, var(--ui-accent-alt) 13%, transparent) 0, transparent 35rem),
    linear-gradient(155deg, var(--ui-canvas-soft), var(--ui-canvas) 48%);
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #app,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #login,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .panel {
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) header {
  border-bottom: 1px solid var(--ui-line-strong);
  background: linear-gradient(115deg, #08151d, color-mix(in srgb, var(--ui-surface-raised) 90%, var(--ui-accent-alt)));
  box-shadow: 0 9px 28px rgb(0 0 0 / 38%);
  color: var(--ui-text);
}

html[data-theme="meeting"] header {
  border-bottom: 3px solid var(--ui-accent);
  background: linear-gradient(110deg, #111820, #26333f 68%, #3b3324);
}

html[data-theme="control"] body {
  background:
    radial-gradient(circle at 88% -8%, rgb(33 175 255 / 17%) 0, transparent 36rem),
    radial-gradient(circle at 5% 30%, rgb(76 236 255 / 8%) 0, transparent 29rem),
    linear-gradient(155deg, #09162c, #050d1e 54%, #071126);
}

html[data-theme="control"] header {
  border-bottom: 1px solid #2d527d;
  background: linear-gradient(112deg, rgb(8 19 42 / 98%), rgb(15 34 64 / 96%));
  box-shadow: 0 12px 34px rgb(0 4 18 / 48%);
}

html[data-theme="control"] nav button.active {
  border-color: rgb(100 236 255 / 55%);
  background: linear-gradient(180deg, rgb(32 92 126 / 72%), rgb(17 48 78 / 78%));
  color: #7bf2ff;
  box-shadow: inset 0 -2px 0 #64ecff, 0 0 18px rgb(38 207 239 / 16%);
}

html[data-theme="control"] :is(.panel, .result-card, .support-card, .ceo-kpi, .meeting-person-section, .meeting-type-summary, .plan-summary) {
  border-color: #243f67 !important;
  background: linear-gradient(145deg, rgb(18 33 61 / 97%), rgb(12 25 49 / 98%)) !important;
  box-shadow: 0 14px 35px rgb(0 4 18 / 30%) !important;
}

html[data-theme="control"] :is(.result-card, .support-card, .ceo-kpi, .meeting-kpis > div) strong,
html[data-theme="control"] :is(.result-card, .support-card, .ceo-kpi, .meeting-kpis > div) b {
  letter-spacing: -.025em;
  color: #f3f8ff;
}

html[data-theme="control"] button.primary,
html[data-theme="control"] .button.primary,
html[data-theme="control"] .primary {
  border-color: #58eaff !important;
  background: linear-gradient(135deg, #5deeff, #2ac6e4) !important;
  color: #041321 !important;
  font-weight: 900;
  box-shadow: 0 0 20px rgb(67 222 245 / 18%);
}

html[data-theme="control"] th {
  border-color: #2c4b72 !important;
  background: #152744 !important;
  color: #a9bdd5 !important;
  font-size: calc(12px * var(--font-scale));
  letter-spacing: .02em;
}

html[data-theme="control"] tr.summary td,
html[data-theme="control"] tr.summary th,
html[data-theme="control"] .average-total-row td {
  border-top-color: #64ecff !important;
  background: #183653 !important;
  color: #d9fbff !important;
}

html[data-theme="control"] .good { color: #b5f52b !important; }
html[data-theme="control"] .bad { color: #ff8799 !important; }

.plan-month-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .plan-month-actions {
    width: 100%;
    justify-content: stretch;
  }

  .plan-month-actions > * {
    flex: 1 1 auto;
  }
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .brand h1,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .brand span {
  color: var(--ui-text);
  text-shadow: 0 1px 2px rgb(0 0 0 / 55%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) nav,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #tabs {
  border-color: var(--ui-line);
  background: color-mix(in srgb, var(--ui-canvas-soft) 92%, transparent);
  box-shadow: 0 5px 16px rgb(0 0 0 / 24%);
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) nav button {
  border-color: transparent;
  background: transparent;
  color: var(--ui-text-soft);
  box-shadow: none;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) nav button:hover {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
}

html[data-theme="dark"] nav button.active {
  border-color: #65d6c4;
  background: linear-gradient(135deg, #157b92, #168477);
  color: #f1faf8;
  box-shadow: 0 5px 14px rgb(0 0 0 / 28%), inset 0 1px 0 rgb(255 255 255 / 16%);
}

html[data-theme="meeting"] nav button.active {
  border-color: #f8ca77;
  background: linear-gradient(135deg, #d7942e, #efb653);
  color: #21180c;
  box-shadow: 0 5px 14px rgb(0 0 0 / 30%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .tab-admin {
  border-color: var(--ui-line);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) h1,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) h2,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) h3,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) h4,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) strong,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) b,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) label {
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .hint,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) small,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .menu-period span,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-home-head p,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-heading p,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-section-title span {
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) a {
  color: color-mix(in srgb, var(--ui-accent-alt) 80%, var(--ui-text));
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) a:hover {
  color: var(--ui-focus);
}

/* Buttons and form controls */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) button,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .button {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) button:hover,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .button:hover {
  border-color: var(--ui-focus);
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) button:focus-visible,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .button:focus-visible,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) input:focus-visible,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) select:focus-visible,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-focus) 42%, transparent);
  outline-offset: 2px;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) button.primary,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .button.primary,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .primary {
  border-color: color-mix(in srgb, var(--ui-accent-alt) 55%, var(--ui-line-strong)) !important;
  background: linear-gradient(135deg, var(--ui-accent-strong), color-mix(in srgb, var(--ui-accent-strong) 72%, var(--ui-accent-alt))) !important;
  color: #f2f8f7 !important;
  box-shadow: 0 5px 14px rgb(0 0 0 / 25%);
}

html[data-theme="meeting"] button.primary,
html[data-theme="meeting"] .button.primary,
html[data-theme="meeting"] .primary {
  border-color: #74d9c9 !important;
  background: linear-gradient(135deg, #167e73, #299e8e) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) button.danger {
  border-color: #a75b65;
  background: #42242b;
  color: #ffd8dd;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) button:disabled,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .button:disabled {
  border-color: var(--ui-line);
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  opacity: .62;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) input,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) select,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) textarea {
  border-color: var(--ui-line-strong) !important;
  background: color-mix(in srgb, var(--ui-canvas) 76%, var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 30%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) input::placeholder,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) textarea::placeholder {
  color: var(--ui-text-muted);
  opacity: 1;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) input:disabled,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) select:disabled,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) textarea:disabled {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-muted) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) input[type="checkbox"],
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) input[type="radio"] {
  accent-color: var(--ui-accent);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .display-controls,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .period-picker {
  border-color: var(--ui-line-strong);
  background: rgb(0 0 0 / 16%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .header-actions button {
  border-color: color-mix(in srgb, var(--ui-text) 52%, transparent);
  background: rgb(255 255 255 / 7%);
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .header-actions button:hover {
  border-color: var(--ui-focus);
  background: rgb(255 255 255 / 13%);
  color: var(--ui-text);
}

/* Every application shell uses a dark-owned surface. */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .card,
  .toolbar,
  .support-toolbar,
  .menu-period,
  .upload,
  .closure-calendar,
  .support-home-head,
  .support-section,
  .support-calendar-section,
  .support-day-editor,
  .cost-type-summary,
  .incentive-annual-detail,
  .request-compose,
  .request-section,
  .meeting-person-section,
  .meeting-type-summary,
  .meeting-two > section,
  .meeting-ranking,
  .meeting-manual-target,
  .manager-comment,
  .manager-review,
  .result-collapsible,
  .ceo-columns > section,
  .briefing-comparison > section,
  .briefing-insights,
  .knowledge-upload,
  .knowledge-card,
  .knowledge-article,
  .knowledge-attachment,
  .knowledge-preview,
  .knowledge-preview-grid .knowledge-attachment,
  .innopedia-block,
  .existing-files,
  .wiki-sidebar,
  .wiki-article,
  .wiki-empty,
  .wiki-recent,
  .blog-editor-shell,
  .blog-editor-header,
  .blog-document-settings,
  .blog-content-block
) {
  border-color: var(--ui-line) !important;
  background: linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .cost-type-summary,
  .request-compose,
  .meeting-person-section,
  .meeting-type-summary,
  .incentive-annual-detail
) {
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 14px;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .cost-type-summary,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .request-compose {
  position: relative;
  overflow: hidden;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .cost-type-summary::before,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .request-compose::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(var(--ui-accent), var(--ui-accent-alt));
  content: "";
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-guide,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .wiki-summary,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-body blockquote {
  border-color: var(--ui-accent-alt);
  background: var(--ui-surface-soft);
  color: var(--ui-text-soft);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-editor-form,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-paper,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-toolbar,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .wiki-brand,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .wiki-toc,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-pdf-preview,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .pdf-page-card figcaption,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-history li,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .existing-file-row,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-embed-block,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-link-card {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-title-input,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-textarea {
  background: transparent !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-image-picker,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .blog-file-drop,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-empty {
  border-color: var(--ui-line-strong);
  background: var(--ui-canvas-soft);
  color: var(--ui-text-soft);
}

/* KPI cards use a restrained highlight instead of white tiles. */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .result-card,
  .support-card,
  .meeting-kpis > div,
  .meeting-summary-cards > div,
  .ceo-kpi
) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .result-card,
  .support-card,
  .meeting-kpis > div,
  .meeting-summary-cards > div,
  .ceo-kpi
)::after {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--ui-accent-alt), var(--ui-accent), transparent 78%);
  content: "";
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .result-card span,
  .support-card span,
  .meeting-kpis span,
  .meeting-summary-cards span,
  .ceo-kpi span,
  .ceo-kpi small
) {
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .result-card strong,
  .support-card strong,
  .meeting-kpis b,
  .meeting-summary-cards b,
  .ceo-kpi b
) {
  color: color-mix(in srgb, var(--ui-accent-alt) 55%, var(--ui-text)) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .result-card.primary {
  border-color: color-mix(in srgb, var(--ui-accent-alt) 68%, var(--ui-line)) !important;
  background: linear-gradient(135deg, #135b7b, #147b73) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .result-card.primary :is(span, strong, small) {
  color: #eef9f7 !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .result-card.deduction {
  border-color: #796040 !important;
  background: linear-gradient(145deg, #382b1c, #241f1b) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .result-card.deduction strong,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .deduction-total {
  color: var(--ui-warn) !important;
}

/* Tables */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .tablebox {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-canvas-soft) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  scrollbar-color: var(--ui-line-strong) var(--ui-canvas);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) table {
  background: var(--ui-surface) !important;
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) th,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) thead th {
  border-color: var(--ui-line-strong) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 76%, var(--ui-accent-alt)) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) td {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) tbody tr:nth-child(even):not(.summary) td {
  background: var(--ui-surface-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) tbody tr:hover td {
  background: var(--ui-surface-hover) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) tr.summary td,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) tr.summary th,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .average-total-row td {
  border-top: 2px solid var(--ui-line-strong) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 76%, var(--ui-accent-alt)) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .annual-grid .sticky-person,
  .annual-grid .sticky-kind,
  .annual-grid .sticky-total,
  .annual-incentive-row,
  .annual-incentive-row .sticky-kind,
  .annual-incentive-row .sticky-total,
  #panel .users-table td:first-child,
  #panel .users-table td:nth-child(2)
) {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .annual-yoy-row td,
  .annual-yoy-row .sticky-kind,
  .annual-yoy-row .sticky-total,
  .meeting-person-second td,
  .meeting-channel-retail td,
  .meeting-channel-cooperative td
) {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .result-table th:nth-child(-n + 4),
  .result-table td:nth-child(-n + 4),
  .meeting-person-table tbody th,
  .meeting-report-summary .meeting-kind-cell,
  .meeting-report-summary .meeting-region-cell,
  .meeting-report-summary .meeting-total-cell
) {
  background: color-mix(in srgb, var(--ui-surface-raised) 85%, var(--ui-accent-alt)) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-person-table tbody th :is(b, small),
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-person-table td small,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-person-table .meeting-basis {
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel .sales-data-table th:last-child {
  border-left-color: var(--ui-line-strong) !important;
  background: color-mix(in srgb, var(--ui-surface-raised) 70%, var(--ui-accent-alt)) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel .sales-data-table td:last-child,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel .sales-data-table tbody tr:nth-child(even) td:last-child {
  border-left-color: var(--ui-line-strong) !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: -7px 0 13px rgb(0 0 0 / 30%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel .sales-data-table tbody tr:hover td:last-child {
  background: var(--ui-surface-hover) !important;
}

/* Status and semantic colours */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .good {
  color: var(--ui-good) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .bad,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .missing-inline {
  color: var(--ui-bad) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-missing {
  color: var(--ui-text-muted);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-status {
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface-hover);
  color: var(--ui-text-soft);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-status.submitted {
  border-color: #8c713f;
  background: #3a2f1d;
  color: var(--ui-warn);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-status.revision {
  border-color: #89515a;
  background: #3c242b;
  color: var(--ui-bad);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-status.reviewed {
  border-color: #436e8b;
  background: #192f42;
  color: #86c9f3;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-status.final {
  border-color: #42785a;
  background: #183326;
  color: var(--ui-good);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .request-unread td {
  background: #342e1f !important;
  color: #f4ddb0 !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .request-unread td:first-child {
  box-shadow: inset 4px 0 0 var(--ui-warn);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-lock,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .month-closure.closed {
  border-color: #8f5960;
  background: #3b252a;
  color: #ffd1d7;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .month-closure.open {
  border-color: #467d61;
  background: #183327;
  color: #a9ecc4;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .closure-person.done,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .closure-month.closed {
  border-color: #467d61;
  background: #1a3a2b;
  color: var(--ui-good);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .closure-person.pending,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .closure-month.final {
  border-color: #8c713f;
  background: #3a2e1d;
  color: var(--ui-warn);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .sales-row-locked td {
  background: #171d24 !important;
  color: var(--ui-text-muted) !important;
}

/* Component details */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-note,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .detail-summary span,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .margin-custom,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .period-presets,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .ceo-inline,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .ceo-private,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-percent-input,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-home-tabs,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-calendar,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-notices,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-channel-tabs,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .excluded-switch,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-visual,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .preview-render-error,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .existing-image img {
  border-color: var(--ui-line) !important;
  background: var(--ui-canvas-soft) !important;
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .meeting-channel-tabs button.active,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-home-tabs button.active,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .excluded-switch button.active {
  border-color: var(--ui-focus);
  background: var(--ui-accent-strong);
  color: #eff8f6;
}

html[data-theme="meeting"] .meeting-channel-tabs button.active,
html[data-theme="meeting"] .support-home-tabs button.active,
html[data-theme="meeting"] .excluded-switch button.active {
  border-color: #f5c873;
  background: #d7942e;
  color: #20170b;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .briefing-insight {
  border-color: var(--ui-line) !important;
  border-left-color: var(--ui-accent-alt) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .briefing-insight.warning {
  border-left-color: var(--ui-warn) !important;
  background: #34291c !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .briefing-insight.good {
  border-left-color: var(--ui-good) !important;
  background: #183328 !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .ceo-card-button:hover {
  background: var(--ui-surface-hover);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .ceo-card-button :is(strong, small),
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .ceo-alert :is(strong, p),
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .ceo-task :is(strong, p) {
  color: var(--ui-text-soft);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-grid {
  border-color: var(--ui-line-strong);
  background: var(--ui-line-strong);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-weekdays span {
  border-color: var(--ui-line-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text-soft);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-day {
  border-color: var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-day.empty {
  background: var(--ui-canvas);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-day:hover,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .calendar-day.selected {
  background: var(--ui-surface-hover);
  box-shadow: inset 0 0 0 3px var(--ui-focus);
  color: var(--ui-text);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .notice-chip {
  border-color: #806b3c;
  background: #392f1c;
  color: var(--ui-warn);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-priority.high {
  background: #3d242a;
  color: var(--ui-bad);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .support-priority.medium {
  background: #3b301e;
  color: var(--ui-warn);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-badge,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-tags span {
  border: 1px solid var(--ui-line);
  background: var(--ui-surface-hover);
  color: var(--ui-text-soft);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .knowledge-badge.verified {
  border-color: #477b5b;
  background: #193428;
  color: var(--ui-good);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .permission-toggle {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .permission-toggle b {
  background: var(--ui-surface-hover) !important;
  color: var(--ui-text-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .permission-toggle.allowed {
  border-color: #4d9470 !important;
  background: #183629 !important;
  color: var(--ui-good) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .permission-toggle.allowed b {
  background: #257b50 !important;
  color: #ecf8f1 !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .sale-edit-dialog {
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: 0 22px 70px rgb(0 0 0 / 62%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .sale-edit-dialog::backdrop {
  background: rgb(2 8 13 / 78%);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .dialog-actions {
  border-color: var(--ui-line);
  background: var(--ui-surface-raised);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel.is-loading::before {
  background: linear-gradient(90deg, var(--ui-accent-alt), var(--ui-accent), var(--ui-accent-alt));
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #panel.is-loading::after,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) #toast {
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface-raised);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}

/* News is restyled here as well because its feature stylesheet loads late. */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
  .agri-news-heading,
  .agri-news-tools,
  .agri-news-main,
  .agri-news-rail,
  .agri-news-section
) {
  border-color: var(--ui-line) !important;
  background: linear-gradient(145deg, var(--ui-surface-raised), var(--ui-surface)) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-search,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-warning {
  border-color: var(--ui-line-strong);
  background: var(--ui-canvas-soft);
  color: var(--ui-text-soft);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-source {
  color: var(--ui-accent);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-card,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-section-head,
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .agri-news-major-list {
  border-color: var(--ui-line);
}

/* Meeting mode: projection-oriented hierarchy, not a recoloured default mode. */
html[data-theme="meeting"] .panel {
  max-width: 1840px;
  margin-inline: auto;
}

html[data-theme="meeting"] :is(.panel h2, .panel h3) {
  letter-spacing: -.025em;
}

html[data-theme="meeting"] :is(
  .result-card,
  .support-card,
  .meeting-kpis > div,
  .meeting-summary-cards > div,
  .ceo-kpi
) {
  min-height: 128px !important;
  border-width: 2px !important;
  box-shadow: none !important;
}

html[data-theme="meeting"] :is(
  .result-card strong,
  .support-card strong,
  .meeting-kpis b,
  .meeting-summary-cards b,
  .ceo-kpi b
) {
  color: #f5cc7e !important;
  font-size: calc(28px * var(--font-scale)) !important;
  letter-spacing: -.035em;
}

html[data-theme="meeting"] .tablebox {
  border-width: 2px !important;
  box-shadow: none !important;
}

html[data-theme="meeting"] th {
  border-color: #78858f !important;
  background: #2a3946 !important;
  color: #f3f5f1 !important;
  font-weight: 900;
}

html[data-theme="meeting"] td {
  min-height: 50px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: calc(15px * var(--font-scale));
  font-weight: 650;
}

html[data-theme="meeting"] tr.summary td,
html[data-theme="meeting"] tr.summary th,
html[data-theme="meeting"] .average-total-row td {
  border-top-color: #e0ad51 !important;
  background: #3b3529 !important;
  color: #f8e4bd !important;
}

html[data-theme="meeting"] :is(
  .cost-type-summary,
  .request-compose,
  .meeting-person-section,
  .meeting-type-summary,
  .incentive-annual-detail
) {
  border-width: 2px !important;
  box-shadow: none !important;
}

html[data-theme="meeting"] .meeting-section-title {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ui-accent);
}

html[data-theme="meeting"] .meeting-status {
  padding: 6px 12px;
  font-size: calc(13px * var(--font-scale));
  font-weight: 900;
}

/* Scrollbars stay visible without becoming a bright strip. */
html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) ::-webkit-scrollbar-track {
  background: var(--ui-canvas);
}

html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) ::-webkit-scrollbar-thumb {
  border: 3px solid var(--ui-canvas);
  border-radius: 999px;
  background: var(--ui-line-strong);
}

@media (max-width: 720px) {
  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .tablebox tr {
    border-color: var(--ui-line) !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow-soft) !important;
  }

  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .tablebox tr.summary {
    border-color: var(--ui-accent-alt) !important;
    background: var(--ui-surface-raised) !important;
  }

  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) .tablebox td::before {
    color: var(--ui-text-soft);
  }

  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) :is(
    .meeting-report-summary,
    .cost-type-summary .tablebox,
    .briefing-comparison .tablebox
  ) {
    border-color: var(--ui-line-strong) !important;
    background: var(--ui-canvas-soft) !important;
  }

  html[data-theme="meeting"] :is(
    .result-card,
    .support-card,
    .meeting-kpis > div,
    .meeting-summary-cards > div,
    .ceo-kpi
  ) {
    min-height: 106px !important;
  }

  html[data-theme="meeting"] :is(
    .result-card strong,
    .support-card strong,
    .meeting-kpis b,
    .meeting-summary-cards b,
    .ceo-kpi b
  ) {
    font-size: calc(21px * var(--font-scale)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) *,
  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) *::before,
  html:is([data-theme="dark"], [data-theme="meeting"], [data-theme="control"]) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}