/* Operforms theme. Light mode is ink on paper: black and white carry the
   interface, the current place and the main action are inverted, and
   color only marks a state, muted. Dark mode is Dracula (draculatheme.com):
   #282a36 ground, darker chrome, purple as the accent for the main action,
   focus and the current place, and Dracula's own state colors. Loaded after
   Tabler and the page styles, so it wins on equal footing. */

:root, [data-bs-theme=light], [data-bs-theme=dark] {
  --aw-paper: light-dark(#ffffff, #282a36);    /* page (Dracula background) */
  --aw-chrome: light-dark(#ffffff, #21222c);   /* sidebar and app bar */
  --aw-surface: light-dark(#ffffff, #2d2f3d);  /* cards, fields, panels */
  --aw-ink: light-dark(#000000, #f8f8f2);      /* Dracula foreground */
  --aw-quiet: light-dark(#5e5e5e, #a9aec8);
  --aw-faint: light-dark(#8c8c8c, #6272a4);    /* Dracula comment */
  --aw-rule: light-dark(#e2e2e2, #3b3e50);
  --aw-rule-strong: light-dark(#c4c4c4, #565a72);
  --aw-wash: light-dark(#f5f5f5, #44475a);     /* Dracula current line */
  --aw-accent: light-dark(#000000, #bd93f9);   /* Dracula purple */
  --aw-on-accent: light-dark(#ffffff, #282a36);
  --aw-red: light-dark(#b42318, #ff5555);
  --aw-green: light-dark(#2e6b45, #50fa7b);
  --aw-ochre: light-dark(#8a5a00, #f1fa8c);
  --aw-blue: light-dark(#2f5785, #8be9fd);

  /* Tabler's named colors, muted: charts, calendar and the few state
     colors still read as distinct without shouting. */
  --tblr-blue: var(--aw-blue);
  --tblr-azure: var(--aw-blue);
  --tblr-indigo: light-dark(#4a4e86, #bd93f9);
  --tblr-purple: light-dark(#5f4b80, #bd93f9);
  --tblr-pink: light-dark(#8c3f63, #ff79c6);
  --tblr-red: var(--aw-red);
  --tblr-orange: light-dark(#9a4d14, #ffb86c);
  --tblr-yellow: var(--aw-ochre);
  --tblr-lime: light-dark(#5a6b1c, #50fa7b);
  --tblr-green: var(--aw-green);
  --tblr-teal: light-dark(#246b63, #8be9fd);
  --tblr-cyan: light-dark(#2a6475, #8be9fd);
  --tblr-danger: var(--aw-red);
  --tblr-success: var(--aw-green);
  --tblr-warning: var(--aw-ochre);
  --tblr-info: var(--aw-blue);

  --tblr-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tblr-body-font-family: var(--tblr-font-sans-serif);
  --tblr-body-bg: var(--aw-paper);
  --tblr-body-color: var(--aw-ink);
  --tblr-emphasis-color: var(--aw-ink);
  --tblr-heading-color: var(--aw-ink);
  --tblr-bg-surface: var(--aw-surface);
  --tblr-bg-surface-primary: var(--aw-surface);
  --tblr-bg-surface-secondary: var(--aw-wash);
  --tblr-bg-surface-tertiary: var(--aw-wash);
  --tblr-secondary: var(--aw-quiet);
  --tblr-secondary-color: var(--aw-quiet);
  --tblr-muted: var(--aw-quiet);
  --tblr-border-color: var(--aw-rule);
  --tblr-border-color-translucent: var(--aw-rule);
  --tblr-primary: var(--aw-ink);
  --tblr-primary-fg: var(--aw-paper);
  --tblr-primary-lt: var(--aw-wash);
  --tblr-primary-text-emphasis: var(--aw-ink);
  --tblr-link-color: var(--aw-ink);
  --tblr-link-hover-color: var(--aw-ink);
  --tblr-shadow-card: none;
  --tblr-box-shadow-card: none;
  --tblr-border-radius: 4px;
  --tblr-border-radius-sm: 3px;
  --tblr-border-radius-lg: 6px;
}

/* Type: Plex throughout, Plex Mono only for code, ids and slugs. */
body { font-family: var(--tblr-font-sans-serif); font-size: .875rem; line-height: 1.5;
  font-feature-settings: normal; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
code, pre, kbd, .font-monospace, .feed-data, .sheet .sheet-num, .sheet .sheet-json, .sheet .sheet-date { font-family: var(--tblr-font-monospace) !important; }
code { color: inherit; background: var(--aw-wash); padding: .05rem .25rem; border-radius: 3px; }
a { color: var(--aw-ink); text-decoration-color: var(--aw-rule-strong); text-underline-offset: .18em; }
a:hover { color: var(--aw-ink); text-decoration-color: currentColor; }
.text-secondary, .text-muted { color: var(--aw-quiet) !important; }
.page-header { margin: 1.4rem 0 .9rem; }
.page-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--aw-ink); }
.card-title, h3 { font-size: .9375rem; font-weight: 600; }

/* Links inside written content are underlined; black alone doesn't say "link". */
.markdown a, .aw-md a, .alert a { text-decoration: underline; }
/* Short cells ("0 → 1") must not break letter by letter in wide tables. */
.markdown table.aw-block-table td, .markdown table.aw-block-table th { min-width: calc(6ch + 1.2rem); }

/* Code blocks: a wash, not a black slab. */
pre { background: var(--aw-wash) !important; color: var(--aw-ink) !important; border: 1px solid var(--aw-rule); border-radius: 4px; }
pre code { background: transparent; padding: 0; }

/* Labels in sentence case: no tracked-out capitals. */
.board-head, .table thead th, .markdown th, .aw-md th, .pf-section, .aw-kpi-label, .aw-nav-heading, .aw-cal th, .text-uppercase {
  text-transform: none !important; letter-spacing: 0 !important; }
.table thead th { font-size: .75rem; font-weight: 500; color: var(--aw-quiet); background: transparent; border-bottom: 1px solid var(--aw-rule-strong); }
.board-head { font-size: .8125rem; font-weight: 600; color: var(--aw-ink); }
.pf-section { font-size: .9375rem; font-weight: 600; color: var(--aw-ink) !important; margin: 1.75rem 0 .6rem !important; }
.aw-kpi-label { font-size: .75rem; }

/* Surfaces: white on white, separated by hairlines, no shadows. */
.card, .aw-kpi, .aw-dialog, .dropdown-menu, .list-group { box-shadow: none !important; border-color: var(--aw-rule); }
.card { --tblr-card-cap-bg: transparent; }
.card-header { border-bottom-color: var(--aw-rule); }
.navbar, .aw-sidebar, .aw-appbar { background: var(--aw-chrome) !important; }
.aw-sidebar.navbar-vertical { border-right: 1px solid var(--aw-rule); }
.list-group-item-action:hover, .table-hover > tbody > tr:hover > * { background: var(--aw-wash); }
hr, .dropdown-divider { border-color: var(--aw-rule); opacity: 1; }

/* The one loud thing: where you are and what to do next are inverted. */
.aw-sidebar .nav-link { color: var(--aw-quiet); font-weight: 500; }
.aw-sidebar .nav-link:hover { color: var(--aw-ink); background: var(--aw-wash); }
.aw-sidebar .nav-item.active > .nav-link { background: var(--aw-ink) !important; color: var(--aw-paper) !important; }
.aw-sidebar .nav-item.active > .nav-link .badge { background: var(--aw-paper) !important; color: var(--aw-ink) !important; }
.aw-sidebar .navbar-brand, .aw-sidebar .navbar-brand .ti { color: var(--aw-ink); }
/* .aw-label also styles the assistant's small captions; in the sidebar it
   only marks what hides when the sidebar collapses. */
.aw-sidebar .aw-label { font-size: inherit; color: inherit; margin-bottom: 0; }
.aw-sidebar .navbar-brand.aw-brand { font-weight: 600; letter-spacing: -.01em; }
@media (min-width: 992px) { .aw-sidebar .navbar-brand.aw-brand { font-size: 1.0625rem; } }
.aw-crumb .aw-crumb-home { color: var(--aw-quiet); }
.aw-crumb .aw-crumb-home:hover { color: var(--aw-ink); }

.btn { --tblr-btn-font-weight: 500; border-radius: 4px; box-shadow: none !important; }
.btn:not([class*="btn-ghost"]):not(.btn-primary):not(.btn-dark):not(.btn-danger):not(.btn-success):not(.btn-link):not(.btn-outline-primary) {
  --tblr-btn-bg: var(--aw-surface); --tblr-btn-color: var(--aw-ink); --tblr-btn-border-color: var(--aw-rule-strong);
  --tblr-btn-hover-bg: var(--aw-wash); --tblr-btn-hover-color: var(--aw-ink); --tblr-btn-hover-border-color: var(--aw-ink);
  --tblr-btn-active-bg: var(--aw-wash); --tblr-btn-active-border-color: var(--aw-ink); }
.btn-primary, .btn-dark {
  --tblr-btn-bg: var(--aw-accent); --tblr-btn-color: var(--aw-on-accent); --tblr-btn-border-color: var(--aw-accent);
  --tblr-btn-hover-bg: color-mix(in oklab, var(--aw-accent) 82%, var(--aw-paper)); --tblr-btn-hover-color: var(--aw-on-accent); --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-bg: var(--aw-accent); --tblr-btn-active-color: var(--aw-on-accent); --tblr-btn-disabled-bg: var(--aw-faint); --tblr-btn-disabled-border-color: var(--aw-faint); }
.btn-success {
  --tblr-btn-bg: var(--aw-surface); --tblr-btn-color: var(--aw-green); --tblr-btn-border-color: var(--aw-green);
  --tblr-btn-hover-bg: var(--aw-green); --tblr-btn-hover-color: var(--aw-paper); --tblr-btn-hover-border-color: var(--aw-green); }
.btn-danger {
  --tblr-btn-bg: var(--aw-surface); --tblr-btn-color: var(--aw-red); --tblr-btn-border-color: var(--aw-red);
  --tblr-btn-hover-bg: var(--aw-red); --tblr-btn-hover-color: var(--aw-paper); --tblr-btn-hover-border-color: var(--aw-red); }
.btn-outline-primary { --tblr-btn-color: var(--aw-ink); --tblr-btn-border-color: var(--aw-ink); --tblr-btn-hover-bg: var(--aw-ink); --tblr-btn-hover-color: var(--aw-paper); }
.btn-ghost-secondary, .btn-ghost-primary { --tblr-btn-color: var(--aw-quiet); --tblr-btn-hover-bg: var(--aw-wash); --tblr-btn-hover-color: var(--aw-ink); --tblr-btn-hover-border-color: transparent; }
.btn-ghost-danger { --tblr-btn-color: var(--aw-quiet); --tblr-btn-hover-bg: transparent; --tblr-btn-hover-color: var(--aw-red); --tblr-btn-hover-border-color: transparent; }

/* Fields: a clear edge, a black focus ring instead of a blue glow. */
.form-control, .form-select { background-color: var(--aw-surface); border-color: var(--aw-rule-strong); color: var(--aw-ink); border-radius: 4px; }
.form-control::placeholder { color: var(--aw-faint); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--aw-accent); box-shadow: 0 0 0 1px var(--aw-accent); }
.form-check-input:checked { background-color: var(--aw-accent); border-color: var(--aw-accent); }
:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }
.btn:focus-visible { box-shadow: 0 0 0 2px var(--aw-paper), 0 0 0 4px var(--aw-accent) !important; }
.form-label { font-weight: 500; }

/* Badges: outlined and quiet. Only state badges keep a muted hue. */
.badge { font-weight: 500; border-radius: 3px; }
.badge[class*="-lt"] { background: transparent !important; color: var(--aw-quiet) !important; border: 1px solid var(--aw-rule-strong) !important; }
.badge.bg-green-lt { color: var(--aw-green) !important; border-color: color-mix(in oklab, var(--aw-green) 45%, transparent) !important; }
.badge.bg-red-lt { color: var(--aw-red) !important; border-color: color-mix(in oklab, var(--aw-red) 45%, transparent) !important; }
.badge.bg-yellow-lt, .badge.bg-orange-lt { color: var(--aw-ochre) !important; border-color: color-mix(in oklab, var(--aw-ochre) 45%, transparent) !important; }
.badge.bg-blue, .badge.bg-azure, .badge.bg-primary, .badge.bg-secondary { background: var(--aw-ink) !important; color: var(--aw-paper) !important; }
.badge.bg-red { background: var(--aw-red) !important; color: light-dark(#fff, #282a36) !important; }
.badge.bg-green { background: var(--aw-green) !important; color: light-dark(#fff, #282a36) !important; }
.aw-crumb .badge { border: 0 !important; color: var(--aw-ink) !important; font-size: .8125rem; padding-left: 0; }

/* Text colors: decoration goes black, state stays muted. */
.text-purple, .text-blue, .text-azure, .text-primary, .text-indigo, .aw-label .ti { color: var(--aw-ink) !important; }
.text-danger, .text-red { color: var(--aw-red) !important; }
.text-success, .text-green { color: var(--aw-green) !important; }
.text-warning, .text-orange, .text-yellow { color: var(--aw-ochre) !important; }

/* Alerts: a rule on the left, no tinted boxes. */
.alert { background: var(--aw-surface) !important; color: var(--aw-ink) !important; border: 1px solid var(--aw-rule); border-left: 3px solid var(--aw-ink); border-radius: 4px; box-shadow: none; }
.alert-danger { border-left-color: var(--aw-red); }
.alert-success { border-left-color: var(--aw-green); }
.alert-warning { border-left-color: var(--aw-ochre); }
.alert .alert-icon, .alert .ti { color: inherit; }

/* Status marks on cards: a thin edge in the state's muted color. */
.card-status-start { width: 2px; }

/* Tables, sheets, assistant, calendar: wash instead of tint. */
.sheet thead th, .sheet .sheet-num { background: var(--aw-wash); }
.sheet td.cell:hover { background: var(--aw-wash); }
.sheet td.cell-edit { outline-color: var(--aw-ink); }
.aw-q { background: var(--aw-wash); }
.aw-proposal { border-left-color: var(--aw-ink); }
.aw-proposal-applied { border-left-color: var(--aw-green); }
.aw-proposal-failed { border-left-color: var(--aw-red); }
.aw-cal td.today { box-shadow: inset 0 0 0 2px var(--aw-ink); }
.aw-cal .aw-ev.span { background: var(--aw-wash); }
.dropzone-box.drag, .dropzone-box:hover { border-color: var(--aw-ink); background: var(--aw-wash); }
.aw-task-card:hover, .aw-task-card:focus-visible { border-color: var(--aw-ink); }
.progress { background: var(--aw-wash); }
.progress-bar { background: var(--aw-accent); }
.dropdown-item.active, .dropdown-item:active { background: var(--aw-ink); color: var(--aw-paper); }
.nav-tabs .nav-link.active { color: var(--aw-ink); border-bottom-color: var(--aw-ink); }
.aw-dialog::backdrop { background: color-mix(in oklab, #000 45%, transparent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Phones: brand, crumb and menu button share one line; the crumb keeps
   the workspace name and drops the word "Portfolio" (the icon stays). */
@media (max-width: 991.98px) {
  .aw-crumb .aw-crumb-label, .aw-crumb > .aw-crumb-sep { display: none; }
}

/* Assistant toggle: inverted while the assistant is open. */
html.assistant-open .aw-assistant-toggle { background: var(--aw-accent) !important; color: var(--aw-on-accent) !important; border-color: var(--aw-accent) !important; }
html.assistant-open .aw-assistant-toggle .aw-kbd { color: var(--aw-on-accent); border-color: color-mix(in oklab, var(--aw-on-accent) 40%, transparent); }
/* The assistant's title row lines up with the app bar. */
@media (min-width: 992px) { #assistant > .border-bottom:first-child { min-height: 3.25rem; } }

/* Tables in assistant answers wrap: the panel is narrow (a phone, or 420px
   beside the page), and a reason cut off behind a scrollbar goes unread. */
.aw-md th, .aw-md td { white-space: normal; min-width: 7ch; vertical-align: top; overflow-wrap: anywhere; }

/* Dark mode (Dracula): the current nav item is a current-line chip with a
   purple mark and purple icon; links and the brand mark are purple too. */
[data-bs-theme=dark] .aw-sidebar .nav-item.active > .nav-link { background: var(--aw-wash) !important; color: var(--aw-ink) !important; box-shadow: inset 2px 0 0 var(--aw-accent); }
[data-bs-theme=dark] .aw-sidebar .nav-item.active > .nav-link .nav-link-icon .ti { color: var(--aw-accent); }
[data-bs-theme=dark] .aw-sidebar .nav-item.active > .nav-link .badge { background: var(--aw-accent) !important; color: var(--aw-on-accent) !important; }
[data-bs-theme=dark] .aw-appbar-brand .ti, [data-bs-theme=dark] .aw-sidebar .aw-brand .ti { color: var(--aw-accent); }
[data-bs-theme=dark] .markdown a, [data-bs-theme=dark] .aw-md a { color: var(--aw-accent); text-decoration-color: color-mix(in oklab, var(--aw-accent) 50%, transparent); }
[data-bs-theme=dark] code { color: #ff79c6; }
[data-bs-theme=dark] pre, [data-bs-theme=dark] pre code { color: var(--aw-ink) !important; }