/* ========================================
   CRIMSON THEME FOR HUDU
   Generated by tools/omarchy-to-hudu/port_theme.py
   dark palette: crimson | light palette: synthesized from dark palette
   ======================================== */

:root {
  /* === palette Base Colors (Light Mode defaults) === */
  /* bg = paper #F9F6FF, bg-2 = base-50 #FBF8FF */
  /* ui = base-100 #FCFBFF, ui-2 = base-150 #FEFDFF, ui-3 = base-200 #ffffff */
  /* tx = black #1A1621, tx-2 = base-600 #4c4756, tx-3 = base-300 #B7B3BE */

  /* === Primary / Accent (cyan) === */
  --primary: #e7e3ed;
  --primaryl1: #b7acc8;

  /* === Light Mode Backgrounds === */
  --background---neutral---light--1--default: #F9F6FF;
  --background---neutral---light--1--hover: #FBF8FF;
  --background---neutral---light--1--pressed: #FCFBFF;
  --background---neutral---light--1--selected: #FCFBFF;
  --background---neutral---light--2--default: #FBF8FF;
  --background---neutral---light--2--hover: #FCFBFF;
  --background---neutral---light--2--pressed: #FEFDFF;
  --background---neutral---light--2--selected: #FEFDFF;
  --background---neutral---light--3--default: #FBF8FF;
  --background---neutral---light--3--hover: #FCFBFF;
  --background---neutral---light--3--pressed: #FEFDFF;
  --background---neutral---light--3--selected: #FEFDFF;
  --background---neutral---light---disabled: #FBF8FF;

  /* === Dark Mode Backgrounds === */
  /* bg = black #1A1621, bg-2 = base-950 #211D28 */
  /* ui = base-900 #27232F, ui-2 = base-850 #2E2936, ui-3 = base-800 #342F3C */
  --background---neutral---dark--1--default: #211D28;
  --background---neutral---dark--1--hover: #27232F;
  --background---neutral---dark--1--pressed: #1A1621;
  --background---neutral---dark--1--selected: #2E2936;
  --background---neutral---dark--1--disabled: #342F3C;
  --background---neutral---dark--2--default: #1A1621;
  --background---neutral---dark--2--hover: #211D28;
  --background---neutral---dark--2--pressed: #1A1621;
  --background---neutral---dark--2--selected: #27232F;
  --background---neutral---dark--3--default: #1A1621;

  /* === Light Mode Text === */
  --text---neutral---light--1--default: #1A1621;
  --text---neutral---light--1--hover: #1A1621;
  --text---neutral---light--1--pressed: #1A1621;
  --text---neutral---light--1--selected: #1A1621;
  --text---neutral---light--2--default: #4c4756;
  --text---neutral---light--2--hover: #403B49;
  --text---neutral---light--2--pressed: #403B49;
  --text---neutral---light--2--selected: #403B49;
  --text---neutral---light--3--default: #B7B3BE;
  --text---neutral---light--3--hover: #4c4756;
  --text---neutral---light--3--pressed: #4c4756;
  --text---neutral---light--3--selected: #4c4756;
  --text---neutral---light---disabled: #B7B3BE;

  /* === Dark Mode Text === */
  /* tx = base-200 #ffffff, tx-2 = base-500 #FEFDFD, tx-3 = base-700 #403B49 */
  --text---neutral---dark--1--default: #ffffff;
  --text---neutral---dark--1--hover: #ffffff;
  --text---neutral---dark--1--pressed: #ffffff;
  --text---neutral---dark--1--selected: #ffffff;
  --text---neutral---dark---disabled: #403B49;
  --text---neutral---dark--2--default: #FEFDFD;
  --text---neutral---dark--2--hover: #B7B3BE;
  --text---neutral---dark--2--pressed: #B7B3BE;
  --text---neutral---dark--2--selected: #B7B3BE;

  /* === Links (cyan) === */
  --link-default: #b7acc8;
  --link-hover: #998FA8;
  --link-pressed: #998FA8;
  --link-visited: #b7acc8;
  --link---light---default: #b7acc8;
  --link---light---hover: #998FA8;
  --link---light---pressed: #998FA8;
  --link---light---visited: #b7acc8;
  --link-default-dark: #e7e3ed;
  --link-hover-dark: #EBE7F1;
  --link-pressed-dark: #EBE7F1;
  --link-visited-dark: #e7e3ed;
  --link---dark---default: #e7e3ed;
  --link---dark---hover: #EBE7F1;
  --link---dark---pressed: #EBE7F1;
  --link---dark---visited: #e7e3ed;

  /* === Base color overrides === */
  --black: #1A1621;
  --blackl1: #211D28;
  --cobalt: #1A1621;
  --blackl0point5: #1A1621;
  --blackl1point5: #27232F;
  --blackl2: #2E2936;
  --blackl3: #403B49;
  --white: #F9F6FF;
  --whites1: #FBF8FF;
  --whites1point5: #FBF8FF;
  --whites2: #FCFBFF;
  --whites3: #FEFDFF;
  --whites4: #ffffff;

  /* === Accent Colors - Light === */
  --accent---light---blue---default: #9e96c0;
  --accent---light---blue---hover: #d2cee3;
  --accent---light---blue---pressed: #857EA2;
  --accent---light---blue---disabled: #9e96c0;
  --accent---light---orange---default: #C17E68;
  --accent---light---orange---hover: #DEB4A5;
  --accent---light---orange---pressed: #A16B5C;
  --accent---light---orange---selected: #F5ECF1;
  --accent---light---orange---disabled: #C17E68;
  --accent---light---golden---default: #DA884A;
  --accent---light---golden---hover: #eeba92;
  --accent---light---golden---pressed: #B57346;
  --accent---light---golden---selected: #F8EDEE;
  --accent---light---golden---disabled: #DA884A;
  --accent---light---teal---default: #b7acc8;
  --accent---light---teal---hover: #e7e3ed;
  --accent---light---teal---pressed: #998FA8;
  --accent---light---teal---selected: #F6F3FC;
  --accent---light---teal---disabled: #b7acc8;
  --accent---light---purple---default: #A99CBF;
  --accent---light---purple---hover: #D9D3E4;
  --accent---light---purple---pressed: #8E82A1;
  --accent---light---purple---selected: #F4F0FB;
  --accent---light---purple---disabled: #A99CBF;
  --accent---light---green---default: #E48A3E;
  --accent---light---green---hover: #f4ba8a;
  --accent---light---green---pressed: #BD753D;
  --accent---light---green---selected: #F9EDED;
  --accent---light---green---disabled: #E48A3E;
  --accent---selected: #F6F3FC;
  --accent---selected---hover: #F4F0FA;

  /* === Accent Colors - Dark === */
  --accent---dark---blue---default: #d2cee3;
  --accent---dark---blue---hover: #DAD6E9;
  --accent---dark---blue---pressed: #B7B1D1;
  --accent---dark---blue---selected: #635D79;
  --accent---dark---blue---disabled: #d2cee3;
  --accent---dark---orange---default: #DEB4A5;
  --accent---dark---orange---hover: #E4C1B7;
  --accent---dark---orange---pressed: #D09986;
  --accent---dark---orange---selected: #473336;
  --accent---dark---orange---disabled: #DEB4A5;
  --accent---dark---golden---default: #eeba92;
  --accent---dark---golden---hover: #F1C6A8;
  --accent---dark---golden---pressed: #E4A16F;
  --accent---dark---golden---selected: #4D3631;
  --accent---dark---golden---disabled: #eeba92;
  --accent---dark---teal---default: #e7e3ed;
  --accent---dark---teal---hover: #EBE7F1;
  --accent---dark---teal---pressed: #CEC7DA;
  --accent---dark---teal---selected: #443E4E;
  --accent---dark---teal---disabled: #e7e3ed;
  --accent---dark---purple---default: #D9D3E4;
  --accent---dark---purple---hover: #DFDAE9;
  --accent---dark---purple---pressed: #C0B7D1;
  --accent---dark---purple---selected: #413A4C;
  --accent---dark---purple---disabled: #D9D3E4;
  --accent---dark---green---default: #f4ba8a;
  --accent---dark---green---hover: #F6C6A2;
  --accent---dark---green---pressed: #ECA266;
  --accent---dark---green---selected: #503730;
  --accent---dark---green---disabled: #f4ba8a;

  /* === Alerts (mapped to palette accents) === */
  --alert---error---01: #F3EBF2;
  --alert---error---02: #EEE1E7;
  --alert---error---03: #d4b0b0;
  --alert---error---04: #b17777;
  --alert---error---05: #b17777;
  --alert---error---06: #946567;
  --alert---error---07: #6E4D52;
  --alert---warning---01: #F8EDEE;
  --alert---warning---02: #F6E5DF;
  --alert---warning---03: #DEB4A5;
  --alert---warning---04: #C17E68;
  --alert---warning---05: #A16B5C;
  --alert---success---01: #F9EDED;
  --alert---success---02: #F6C6A2;
  --alert---success---03: #f4ba8a;
  --alert---success---04: #E48A3E;
  --alert---success---05: #BD753D;
  --alert---info---01: #F3F0FB;
  --alert---info---02: #E3E0EF;
  --alert---info---03: #d2cee3;
  --alert---info---04: #9e96c0;

  /* === Flags (mapped to palette 600 values) === */
  --flag---red: #b17777;
  --flag---blue: #9e96c0;
  --flag---green: #E48A3E;
  --flag---purple: #A99CBF;
  --flag---orange: #C17E68;
  --flag---yellow: #DA884A;
  --flag---light-pink: #F0EAF4;
  --flag---light-blue: #E8E5F3;
  --flag---light-green: #F8DDCE;
  --flag---light-purple: #EBE7F3;
  --flag---light-orange: #EEDAD8;
  --flag---light-yellow: #F5DDD1;
  --flag---white: #F9F6FF;
  --flag---grey: #FEFDFD;
}

/* === Light: fix hardcoded white bgs === */

body:not(.dark-portal) table.vgt-table,
body:not(.dark-portal) .vgt-table.polar-bear,
body:not(.dark-portal) .vgt-table.polar-bear.bordered td,
body:not(.dark-portal) .table-scroll,
body:not(.dark-portal) .table-scroll--fixed-column,
body:not(.dark-portal) #datatable,
body:not(.dark-portal) td,
body:not(.dark-portal) .company-summary,
body:not(.dark-portal) .box,
body:not(.dark-portal) .box--form,
body:not(.dark-portal) .card,
body:not(.dark-portal) .card__info,
body:not(.dark-portal) .nasa__block,
body:not(.dark-portal) .grid-item,
body:not(.dark-portal) .widget,
body:not(.dark-portal) .info-panel,
body:not(.dark-portal) .asset-sidebar__box,
body:not(.dark-portal) .asset-sidebar__condensed,
body:not(.dark-portal) .asset-folder-card,
body:not(.dark-portal) .asset-columns__box,
body:not(.dark-portal) .historical__box,
body:not(.dark-portal) .box-list__item,
body:not(.dark-portal) .box-list__entity-item,
body:not(.dark-portal) .box-list--options,
body:not(.dark-portal) .box-list--historical,
body:not(.dark-portal) .header__search,
body:not(.dark-portal) input:not([type="submit"]):not([type="checkbox"]),
body:not(.dark-portal) select,
body:not(.dark-portal) textarea,
body:not(.dark-portal) .ts-control,
body:not(.dark-portal) .ts-dropdown,
body:not(.dark-portal) .ts-dropdown .optgroup-header,
body:not(.dark-portal) .multiselect__tags,
body:not(.dark-portal) .multiselect__input,
body:not(.dark-portal) .multiselect__single,
body:not(.dark-portal) .multiselect__content-wrapper,
body:not(.dark-portal) .multiselect__spinner,
body:not(.dark-portal) .inputer,
body:not(.dark-portal) .form__nested,
body:not(.dark-portal) .form-section,
body:not(.dark-portal) .form-split .form-tip.form-tip--sidebar,
body:not(.dark-portal) .password-editor,
body:not(.dark-portal) .ql-editor,
body:not(.dark-portal) .ql-snow .ql-picker-options,
body:not(.dark-portal) .ql-snow .ql-tooltip,
body:not(.dark-portal) .menubar__form input,
body:not(.dark-portal) .writer__content,
body:not(.dark-portal) .otp-inputer,
body:not(.dark-portal) .button--secondary,
body:not(.dark-portal) .button--danger-secondary,
body:not(.dark-portal) .dropdown__content,
body:not(.dark-portal) .drop__content,
body:not(.dark-portal) .table__dropdown__content,
body:not(.dark-portal) .floating-menu__content,
body:not(.dark-portal) .company-jump,
body:not(.dark-portal) .company-jump__item a.company-jump__link,
body:not(.dark-portal) .company-switcher__dropdown,
body:not(.dark-portal) .contact-dashboard,
body:not(.dark-portal) .cpanel__aside,
body:not(.dark-portal) .mkb .cpanel,
body:not(.dark-portal) .mkb__content,
body:not(.dark-portal) .photos__container,
body:not(.dark-portal) .explainer,
body:not(.dark-portal) .welcome,
body:not(.dark-portal) .user-page__block,
body:not(.dark-portal) .process-runs-welcome,
body:not(.dark-portal) .process-runs-welcome__sidebar,
body:not(.dark-portal) .drafter__finish,
body:not(.dark-portal) .drafter__titlebar,
body:not(.dark-portal) .duplicator,
body:not(.dark-portal) .template,
body:not(.dark-portal) a.admin__a,
body:not(.dark-portal) .api-keys__create,
body:not(.dark-portal) .api-keys__key,
body:not(.dark-portal) a.index__folder,
body:not(.dark-portal) .doorkeeper-container,
body:not(.dark-portal) .doorkeeper__authorize-grants,
body:not(.dark-portal) .roler__table,
body:not(.dark-portal) .sort-rules section,
body:not(.dark-portal) .task-sorter__task,
body:not(.dark-portal) .external_app,
body:not(.dark-portal) .fast-facts__header .explainer,
body:not(.dark-portal) .updater,
body:not(.dark-portal) .billing,
body:not(.dark-portal) .custom-fast-fact,
body:not(.dark-portal) .custom-fast-fact__opened,
body:not(.dark-portal) .color-section,
body:not(.dark-portal) .article__public,
body:not(.dark-portal) .asset_layout_field,
body:not(.dark-portal) .connector,
body:not(.dark-portal) .company-portal,
body:not(.dark-portal) .company-portal__option,
body:not(.dark-portal) .company-portal__warning,
body:not(.dark-portal) .dash__top__logo,
body:not(.dark-portal) .dropzone,
body:not(.dark-portal) .onboarder__modal,
body:not(.dark-portal) .company-logo,
body:not(.dark-portal) .color-grid,
body:not(.dark-portal) .alert {
  background: #F9F6FF !important;
}

body:not(.dark-portal) th,
body:not(.dark-portal) .simple-crud th,
body:not(.dark-portal) .vgt-table thead th,
body:not(.dark-portal) .search__header,
body:not(.dark-portal) .search-form,
body:not(.dark-portal) .layout-sorter-v2 .sort-rules section,
body:not(.dark-portal) .column-form__rules,
body:not(.dark-portal) .disabled .ts-control {
  background: #FBF8FF !important;
}

body:not(.dark-portal) .nasa__item:hover,
body:not(.dark-portal) .vgt-table.black-rhino tr.clickable:hover,
body:not(.dark-portal) .box-list__item:hover,
body:not(.dark-portal) .box-list__entity-item:hover {
  background: #FBF8FF !important;
}

/* === Dark: fix hardcoded white bgs === */

.dark-portal table.vgt-table, .dark-portal .vgt-table.polar-bear,
.dark-portal .vgt-table.polar-bear.bordered td,
.dark-portal .table-scroll, .dark-portal .table-scroll--fixed-column,
.dark-portal #datatable, .dark-portal td,
.dark-portal .company-summary, .dark-portal .box, .dark-portal .box--form,
.dark-portal .card, .dark-portal .card__info, .dark-portal .nasa__block,
.dark-portal .grid-item, .dark-portal .widget, .dark-portal .info-panel,
.dark-portal .asset-sidebar__box, .dark-portal .asset-sidebar__condensed,
.dark-portal .asset-folder-card, .dark-portal .asset-columns__box,
.dark-portal .historical__box, .dark-portal .box-list__item,
.dark-portal .box-list__entity-item,
.dark-portal .header__search, .dark-portal input:not([type="submit"]):not([type="checkbox"]),
.dark-portal select, .dark-portal textarea,
.dark-portal .ts-control, .dark-portal .ts-dropdown,
.dark-portal .multiselect__tags, .dark-portal .multiselect__input,
.dark-portal .multiselect__single, .dark-portal .multiselect__content-wrapper,
.dark-portal .inputer, .dark-portal .form__nested,
.dark-portal .form-section, .dark-portal .password-editor,
.dark-portal .writer__content,
.dark-portal .button--secondary, .dark-portal .button--danger-secondary,
.dark-portal .dropdown__content, .dark-portal .drop__content,
.dark-portal .table__dropdown__content, .dark-portal .floating-menu__content,
.dark-portal .company-jump, .dark-portal .contact-dashboard,
.dark-portal .cpanel__aside, .dark-portal .mkb .cpanel,
.dark-portal .mkb__content, .dark-portal .explainer,
.dark-portal .welcome, .dark-portal .user-page__block,
.dark-portal .process-runs-welcome, .dark-portal .drafter__finish,
.dark-portal .doorkeeper-container, .dark-portal .api-keys__create,
.dark-portal .api-keys__key, .dark-portal .sort-rules section,
.dark-portal .task-sorter__task, .dark-portal .external_app,
.dark-portal .updater, .dark-portal .billing, .dark-portal .roler__table,
.dark-portal .article__public, .dark-portal .asset_layout_field,
.dark-portal .connector, .dark-portal .company-portal,
.dark-portal .company-portal__option, .dark-portal .dropzone,
.dark-portal .onboarder__modal, .dark-portal .company-logo,
.dark-portal .alert {
  background: #211D28 !important;
}

.dark-portal th, .dark-portal .simple-crud th,
.dark-portal .search__header, .dark-portal .search-form {
  background: #27232F !important;
}

.dark-portal .nasa__item:hover,
.dark-portal .vgt-table.black-rhino tr.clickable:hover,
.dark-portal .box-list__item:hover {
  background: #27232F !important;
}


/* ============================================================
   Color-coded admin tile sections (palette)
   Basic Setup = teal, Core = blue, Account Admin = orange
   ============================================================ */
.dark-portal a.admin__a i,
body:not(.dark-portal) a.admin__a i {
  background: transparent !important;
  border: none !important;
}
.dark-portal   .admin__section:nth-of-type(1) a.admin__a i { color: var(--accent---dark---teal---default) !important; }
body:not(.dark-portal) .admin__section:nth-of-type(1) a.admin__a i { color: var(--accent---light---teal---default) !important; }
.dark-portal   .admin__section:nth-of-type(2) a.admin__a i { color: var(--accent---dark---blue---default) !important; }
body:not(.dark-portal) .admin__section:nth-of-type(2) a.admin__a i { color: var(--accent---light---blue---default) !important; }
.dark-portal   .admin__section:nth-of-type(3) a.admin__a i { color: var(--accent---dark---orange---default) !important; }
body:not(.dark-portal) .admin__section:nth-of-type(3) a.admin__a i { color: var(--accent---light---orange---default) !important; }

/* ============================================================
   PALETTE MAPPINGS — KB article prose (.rich_text_content)
   ============================================================ */

/* Headings → palette tx (not pure white) */
.dark-portal .rich_text_content h1,
.dark-portal .rich_text_content h2,
.dark-portal .rich_text_content h3,
.dark-portal .rich_text_content h4,
.dark-portal .rich_text_content h5,
.dark-portal .rich_text_content h6 { color: var(--text---neutral---dark--1--default) !important; }
body:not(.dark-portal) .rich_text_content h1,
body:not(.dark-portal) .rich_text_content h2,
body:not(.dark-portal) .rich_text_content h3,
body:not(.dark-portal) .rich_text_content h4,
body:not(.dark-portal) .rich_text_content h5,
body:not(.dark-portal) .rich_text_content h6 { color: var(--text---neutral---light--1--default) !important; }

/* Strong / bold → tx */
.dark-portal .rich_text_content strong,
.dark-portal .rich_text_content b { color: var(--text---neutral---dark--1--default) !important; }
body:not(.dark-portal) .rich_text_content strong,
body:not(.dark-portal) .rich_text_content b { color: var(--text---neutral---light--1--default) !important; }

/* Em / italic → tx (not forced; inherits italic from browser) */
.dark-portal .rich_text_content em,
.dark-portal .rich_text_content i:not([class*="fa-"]) {font-style: italic !important; }
body:not(.dark-portal) .rich_text_content em,
body:not(.dark-portal) .rich_text_content i:not([class*="fa-"]) {font-style: italic !important; }

/* Inline code → magenta on bg-2 */
.dark-portal .rich_text_content code,
.dark-portal .rich_text_content :not(pre) > code {
  color: #e4dbe5 !important;
  background: var(--background---neutral---dark--2--default) !important;
  border: 1px solid var(--accent---dark---teal---selected) !important;
  border-radius: 3px !important;
  padding: 0.1em 0.35em !important;
  font-size: 0.9em !important;
}
body:not(.dark-portal) .rich_text_content code,
body:not(.dark-portal) .rich_text_content :not(pre) > code {
  color: #bba7be !important;
  background: var(--background---neutral---light--2--default) !important;
  border: 1px solid #FEFDFF !important;
  border-radius: 3px !important;
  padding: 0.1em 0.35em !important;
  font-size: 0.9em !important;
}

/* Code blocks (pre) */
.dark-portal .rich_text_content pre {
  background: var(--background---neutral---dark--2--default) !important;
  border: 1px solid #27232F !important;
  color: var(--text---neutral---dark--1--default) !important;
  border-radius: 4px !important;
  padding: 1em !important;
}
body:not(.dark-portal) .rich_text_content pre {
  background: var(--background---neutral---light--2--default) !important;
  border: 1px solid #FEFDFF !important;
  color: var(--text---neutral---light--1--default) !important;
  border-radius: 4px !important;
  padding: 1em !important;
}
.dark-portal .rich_text_content pre code,
body:not(.dark-portal) .rich_text_content pre code {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
  color: inherit !important;
}

/* Syntax highlighting (Prism + highlight.js) — palette palette */
.dark-portal .rich_text_content .token.comment,
.dark-portal .rich_text_content .hljs-comment { color: #FEFDFD !important; }
.dark-portal .rich_text_content .token.punctuation,
.dark-portal .rich_text_content .token.operator,
.dark-portal .rich_text_content .hljs-punctuation,
.dark-portal .rich_text_content .hljs-operator { color: #B7B3BE !important; }
.dark-portal .rich_text_content .token.string,
.dark-portal .rich_text_content .hljs-string { color: #e7e3ed !important; }
.dark-portal .rich_text_content .token.variable,
.dark-portal .rich_text_content .token.attr-name,
.dark-portal .rich_text_content .hljs-variable,
.dark-portal .rich_text_content .hljs-attr { color: #d2cee3 !important; }
.dark-portal .rich_text_content .token.number,
.dark-portal .rich_text_content .hljs-number { color: #D9D3E4 !important; }
.dark-portal .rich_text_content .token.constant,
.dark-portal .rich_text_content .hljs-literal { color: #eeba92 !important; }
.dark-portal .rich_text_content .token.function,
.dark-portal .rich_text_content .hljs-title.function_ { color: #DEB4A5 !important; }
.dark-portal .rich_text_content .token.keyword,
.dark-portal .rich_text_content .hljs-keyword { color: #f4ba8a !important; }
.dark-portal .rich_text_content .token.important,
.dark-portal .rich_text_content .token.tag,
.dark-portal .rich_text_content .hljs-section,
.dark-portal .rich_text_content .hljs-name { color: #e4dbe5 !important; }
.dark-portal .rich_text_content .token.deleted,
.dark-portal .rich_text_content .hljs-deletion { color: #d4b0b0 !important; }

/* Blockquote */
.dark-portal .rich_text_content blockquote {
  background: var(--background---neutral---dark--2--default) !important;
  border-left: 3px solid var(--accent---dark---teal---default) !important;
  color: var(--text---neutral---dark--2--default) !important;
  padding: 0.75em 1em !important;
  margin: 1em 0 !important;
  border-radius: 0 4px 4px 0 !important;
}
body:not(.dark-portal) .rich_text_content blockquote {
  background: var(--background---neutral---light--2--default) !important;
  border-left: 3px solid var(--accent---light---teal---default) !important;
  color: var(--text---neutral---light--2--default) !important;
  padding: 0.75em 1em !important;
  margin: 1em 0 !important;
  border-radius: 0 4px 4px 0 !important;
}

/* kbd */
.dark-portal .rich_text_content kbd {
  background: var(--background---neutral---dark--2--default) !important;
  border: 1px solid #342F3C !important;
  border-bottom-width: 2px !important;
  color: var(--text---neutral---dark--1--default) !important;
  padding: 0.1em 0.4em !important;
  border-radius: 3px !important;
  font-size: 0.85em !important;
  font-family: RobotoMono, ui-monospace, monospace !important;
}
body:not(.dark-portal) .rich_text_content kbd {
  background: var(--background---neutral---light--2--default) !important;
  border: 1px solid #B7B3BE !important;
  border-bottom-width: 2px !important;
  color: var(--text---neutral---light--1--default) !important;
  padding: 0.1em 0.4em !important;
  border-radius: 3px !important;
  font-size: 0.85em !important;
  font-family: RobotoMono, ui-monospace, monospace !important;
}

/* hr */
.dark-portal .rich_text_content hr { border: 0 !important; border-top: 1px solid #27232F !important; margin: 1.5em 0 !important; }
body:not(.dark-portal) .rich_text_content hr { border: 0 !important; border-top: 1px solid #FCFBFF !important; margin: 1.5em 0 !important; }

/* Tables */
.dark-portal .rich_text_content table { border-collapse: collapse !important; width: 100% !important; }
.dark-portal .rich_text_content table th {
  background: #27232F !important;
  color: var(--text---neutral---dark--1--default) !important;
  border-bottom: 2px solid #342F3C !important;
  text-align: left !important; padding: 0.5em 0.75em !important;
}
.dark-portal .rich_text_content table td { border-bottom: 1px solid #27232F !important; padding: 0.5em 0.75em !important; }
.dark-portal .rich_text_content table tr:nth-child(even) td { background: var(--background---neutral---dark--2--default) !important; }

/* Link hover underline */
.dark-portal .rich_text_content a:hover,
body:not(.dark-portal) .rich_text_content a:hover { text-decoration: underline !important; }

/* ========================================
   MISSED OVERRIDES — 2026-05-18
   ======================================== */

/* Callouts keep light backgrounds in dark mode, but the global
   .rich_text_content strong/b rule repainted bold text to tx (#ffffff),
   making bold words inside callouts unreadable (~1.1 contrast).
   Restore each callout's own dark text color. */
.rich_text_content .callout strong,
.rich_text_content .callout b { color: inherit !important; }

/* The blanket `input` background rules (both modes) also caught
   input[type="submit"], repainting primary buttons (e.g. "Update Profile")
   to the surface color — dark-on-dark / white-on-cream, invisible.
   Restore the accent fill. Each selector carries an extra attribute over
   the blanket rules so specificity wins regardless of source order.
   Fill is cyan-700 — dark enough that paper text clears WCAG AA (6:1)
   in both modes. The 600/400 ramp split is for syntax text, not UI
   fills; cyan-600 is the murky dead-zone (white 4.4 / dark 4.2). */
.dark-portal input[type="submit"],
body:not(.dark-portal) input[type="submit"] {
  background-color: #998FA8 !important;  /* cyan-700 */
  color: #F9F6FF !important;             /* paper */
  border-color: #998FA8 !important;
}

/* ========================================
   Scrollbars — thin, theme-matched
   ======================================== */
body:not(.dark-portal) * { scrollbar-width: thin; scrollbar-color: #ffffff transparent; }
body:not(.dark-portal) ::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.dark-portal) ::-webkit-scrollbar-track { background: transparent; }
body:not(.dark-portal) ::-webkit-scrollbar-thumb {
  background: #ffffff !important;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body:not(.dark-portal) ::-webkit-scrollbar-thumb:hover { background: #B7B3BE !important; }
body:not(.dark-portal) ::-webkit-scrollbar-corner { background: transparent; }

.dark-portal * { scrollbar-width: thin; scrollbar-color: #342F3C transparent; }
.dark-portal ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark-portal ::-webkit-scrollbar-track { background: transparent; }
.dark-portal ::-webkit-scrollbar-thumb {
  background: #342F3C !important;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.dark-portal ::-webkit-scrollbar-thumb:hover { background: #403B49 !important; }
.dark-portal ::-webkit-scrollbar-corner { background: transparent; }

/* ========================================
   Checkbox hover — keep teal when checked
   Hudu's default :checked:hover flips the box to neutral bg + black
   check, so a checked box looks like it un-checked on hover. Hold the
   teal identity, just shift one ramp step.
   ======================================== */
body:not(.dark-portal) input[type="checkbox"]:checked:hover,
.dark-portal input[type="checkbox"]:checked:hover {
  background-color: #CEC7DA !important;  /* cyan-500 */
  border-color: #CEC7DA !important;
}
body:not(.dark-portal) input[type="checkbox"]:checked:hover::before,
.dark-portal input[type="checkbox"]:checked:hover::before {
  background-color: #F9F6FF !important;
}

/* ========================================
   /admin page — banded sections
   Color-coded header bands (teal / blue / orange) + accent-bordered
   tiles so the three groups read at a glance and scan fast.
   ======================================== */

/* Section label → band */
main:has(.admin__subheader) > header {
  margin: 2rem 0 0.85rem !important;
  padding: 0.6rem 0.95rem !important;
  border-radius: 6px !important;
}
main:has(.admin__subheader) > header:first-of-type { margin-top: 0.5rem !important; }
.admin__subheader {
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* Band colors — light */
body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(1) { background: #F6F3FC !important; }
body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(1) .admin__subheader { color: #998FA8 !important; }
body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(2) { background: #F3F0FB !important; }
body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(2) .admin__subheader { color: #857EA2 !important; }
body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(3) { background: #F5ECF1 !important; }
body:not(.dark-portal) main:has(.admin__subheader) > header:nth-of-type(3) .admin__subheader { color: #A16B5C !important; }

/* Band colors — dark */
.dark-portal main:has(.admin__subheader) > header:nth-of-type(1) { background: #443E4E !important; }
.dark-portal main:has(.admin__subheader) > header:nth-of-type(1) .admin__subheader { color: #EBE7F1 !important; }
.dark-portal main:has(.admin__subheader) > header:nth-of-type(2) { background: #635D79 !important; }
.dark-portal main:has(.admin__subheader) > header:nth-of-type(2) .admin__subheader { color: #DAD6E9 !important; }
.dark-portal main:has(.admin__subheader) > header:nth-of-type(3) { background: #473336 !important; }
.dark-portal main:has(.admin__subheader) > header:nth-of-type(3) .admin__subheader { color: #E4C1B7 !important; }

/* Tiles → compact list rows: icon + name only, no descriptions.
   Flat background-tint hover — no transform, so nothing jitters. */
.admin__section {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 3px 14px !important;
}
a.admin__a {
  display: flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.4rem 0.7rem !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 4px !important;
  transition: background-color 0.1s ease !important;
}
a.admin__a i { font-size: 1rem !important; width: 1.3rem !important; text-align: center !important; flex-shrink: 0 !important; }
a.admin__a article h2 { font-size: 0.92rem !important; font-weight: 600 !important; margin: 0 !important; }
a.admin__a article p { display: none !important; }
body:not(.dark-portal) a.admin__a:hover { background-color: #FBF8FF !important; }
.dark-portal a.admin__a:hover { background-color: #27232F !important; }

/* ========================================
   palette spec cleanup — off-palette remnants
   ======================================== */

/* Widget / feed icon badges — bare <i> with inline bg+color, no .asset-icon
   wrapper (e.g. My Recents, Activity Feed, My Most Visited on dashboard).
   Markup: <i class="fas fa-laptop" style="background:#XXX;color:#FFF"></i>
   Strip the circle, color the glyph itself with the matching palette accent.
   Mirrors the .asset-icon family map below. */
i.fas[style*="background"][style*="#"], i.far[style*="background"][style*="#"], i.fab[style*="background"][style*="#"] {
  background: transparent !important;
  border-radius: 0 !important;
}
/* Fallback */
i.fas[style*="background"][style*="#"], i.far[style*="background"][style*="#"], i.fab[style*="background"][style*="#"] {
  color: #b7acc8 !important;
}
/* Cyan */
i.fas[style*="background"][style*="#00caed" i], i.far[style*="background"][style*="#00caed" i], i.fab[style*="background"][style*="#00caed" i],
i.fas[style*="background"][style*="#00e2eb" i], i.far[style*="background"][style*="#00e2eb" i], i.fab[style*="background"][style*="#00e2eb" i] { color: #b7acc8 !important; }
/* Blue */
i.fas[style*="background"][style*="#0081fa" i], i.far[style*="background"][style*="#0081fa" i], i.fab[style*="background"][style*="#0081fa" i],
i.fas[style*="background"][style*="#b2c9ec" i], i.far[style*="background"][style*="#b2c9ec" i], i.fab[style*="background"][style*="#b2c9ec" i] { color: #9e96c0 !important; }
/* Green */
i.fas[style*="background"][style*="#5bb686" i], i.far[style*="background"][style*="#5bb686" i], i.fab[style*="background"][style*="#5bb686" i],
i.fas[style*="background"][style*="#00d875" i], i.far[style*="background"][style*="#00d875" i], i.fab[style*="background"][style*="#00d875" i] { color: #E48A3E !important; }
/* Yellow */
i.fas[style*="background"][style*="#f2b600" i], i.far[style*="background"][style*="#f2b600" i], i.fab[style*="background"][style*="#f2b600" i] { color: #DA884A !important; }
/* Orange */
i.fas[style*="background"][style*="#fc4200" i], i.far[style*="background"][style*="#fc4200" i], i.fab[style*="background"][style*="#fc4200" i] { color: #C17E68 !important; }
/* Purple */
i.fas[style*="background"][style*="#a74af1" i], i.far[style*="background"][style*="#a74af1" i], i.fab[style*="background"][style*="#a74af1" i],
i.fas[style*="background"][style*="#9b0af2" i], i.far[style*="background"][style*="#9b0af2" i], i.fab[style*="background"][style*="#9b0af2" i],
i.fas[style*="background"][style*="#5b17f2" i], i.far[style*="background"][style*="#5b17f2" i], i.fab[style*="background"][style*="#5b17f2" i],
i.fas[style*="background"][style*="#300c83" i], i.far[style*="background"][style*="#300c83" i], i.fab[style*="background"][style*="#300c83" i] { color: #A99CBF !important; }

/* Asset-layout icons — sidebar OTHER section + page-header badges.
   Markup: <div class="asset-icon" style="background:#XXX">
             <i class="fas fa-foo" style="color:#FFF"></i>
           </div>
   Strip the bright circle, color the glyph itself with the nearest palette
   accent. Each Hudu picker hex maps to a palette family so layouts stay
   visually distinct against the paper background. */

/* Kill the wrapper circle entirely. */
.asset-icon[style*="background"][style*="#"] {
  background: transparent !important;
  border-radius: 0 !important;
}

/* Fallback glyph color for any Hudu hex not enumerated below. */
.asset-icon[style*="background"][style*="#"] > i { color: #b7acc8 !important; }

/* Cyan family → palette cyan */
.asset-icon[style*="background"][style*="#00caed" i] > i,
.asset-icon[style*="background"][style*="#00e2eb" i] > i { color: #b7acc8 !important; }

/* Blue family → palette blue */
.asset-icon[style*="background"][style*="#0081fa" i] > i,
.asset-icon[style*="background"][style*="#b2c9ec" i] > i { color: #9e96c0 !important; }

/* Green family → palette green */
.asset-icon[style*="background"][style*="#5bb686" i] > i,
.asset-icon[style*="background"][style*="#00d875" i] > i { color: #E48A3E !important; }

/* Yellow → palette yellow */
.asset-icon[style*="background"][style*="#f2b600" i] > i { color: #DA884A !important; }

/* Orange / red-orange → palette orange */
.asset-icon[style*="background"][style*="#fc4200" i] > i { color: #C17E68 !important; }

/* Purple / indigo family → palette purple */
.asset-icon[style*="background"][style*="#a74af1" i] > i,
.asset-icon[style*="background"][style*="#9b0af2" i] > i,
.asset-icon[style*="background"][style*="#5b17f2" i] > i,
.asset-icon[style*="background"][style*="#300c83" i] > i { color: #A99CBF !important; }

/* Dashboard widget items without inline color — Hudu's base CSS paints them
   .nasa .index__item:not(.index__item--task) i { background: var(--primary); color: white; border-radius: 100% }
   That hits company / KB / site / etc. icons in My Recents, Expiring Soon,
   Activity Feed. Strip the circle, color the glyph teal to match the rest. */
.nasa .index__item:not(.index__item--task) i:not([style]) {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  color: #b7acc8 !important;
}
.dark-portal .nasa .index__item:not(.index__item--task) i:not([style]) { color: #e7e3ed !important; }

/* Per-entity glyph color — non-asset-layout entities (companies, KB, websites)
   that Hudu renders without inline color. Maps each glyph to a palette accent
   matching its semantic role, so the dashboard widgets read at a glance. */
.nasa .index__item i.fa-store-alt:not([style]),
.nasa .index__item i.fa-building:not([style]) { color: #9e96c0 !important; } /* companies → blue */
.nasa .index__item i.fa-book-reader:not([style]),
.nasa .index__item i.fa-book:not([style]) { color: #A99CBF !important; } /* KB articles → purple */
.nasa .index__item i.fa-globe:not([style]) { color: #E48A3E !important; } /* websites → green */
.nasa .index__item i.fa-key:not([style]) { color: #DA884A !important; } /* passwords → yellow */
.nasa .index__item i.fa-camera:not([style]) { color: #bba7be !important; } /* photos → magenta */

.dark-portal .nasa .index__item i.fa-store-alt:not([style]),
.dark-portal .nasa .index__item i.fa-building:not([style]) { color: #d2cee3 !important; }
.dark-portal .nasa .index__item i.fa-book-reader:not([style]),
.dark-portal .nasa .index__item i.fa-book:not([style]) { color: #D9D3E4 !important; }
.dark-portal .nasa .index__item i.fa-globe:not([style]) { color: #f4ba8a !important; }
.dark-portal .nasa .index__item i.fa-key:not([style]) { color: #eeba92 !important; }
.dark-portal .nasa .index__item i.fa-camera:not([style]) { color: #e4dbe5 !important; }
/* Inline-styled icons get the circle stripped via the bare-i rule above;
   family color comes from the family selectors. */
.nasa .index__item:not(.index__item--task) i[style] {
  background: transparent !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
}

/* Dashboard chart — canvas bars are pixel-painted from a server-baked
   Tailwind blue (#3B82F6). Pure CSS can't recolor canvas content, so apply
   a filter chain that desaturates + darkens the bars toward the muted
   palette blue (#9e96c0) range. Affects axis labels too — minor cost. */
[data-controller="chart"] canvas,
.dash__graph-graph canvas { filter: hue-rotate(47deg) saturate(0.24) brightness(1.52) !important; }

/* Avatars. Hudu paints a pure-black (#000) background on both photo imgs
   and empty placeholder divs. On photos the bg bleeds through the rounded
   edge's antialiasing as a halo ring — transparent kills it; the photo
   blends with whatever is actually behind it. Empty placeholder circles
   (no photo/initials) keep a mode-scoped tone or they'd vanish entirely. */
img.profile-image { background-color: transparent !important; }
.dark-portal .index__list__avatar { background-color: #2E2936 !important; }
body:not(.dark-portal) .index__list__avatar { background-color: #FCFBFF !important; }

/* Greeting-header photo ring — Hudu hardcodes border: 2px solid #fff on
   the .nasa__title img (dashboard "Hi, <name>" avatar). Transparent keeps
   the 2px box so layout doesn't shift, but draws nothing. */
.nasa__title.for-bg img { border-color: transparent !important; }

/* Gray borders (#757575 / #666666) → palette base tones */
.dark-portal .index__item,
.dark-portal .nasa__block-header,
.dark-portal .dropdown__content,
.dark-portal .keyboard-shortcuts__shortcut { border-color: #342F3C !important; }
body:not(.dark-portal) .index__item,
body:not(.dark-portal) .nasa__block-header,
body:not(.dark-portal) .dropdown__content,
body:not(.dark-portal) .keyboard-shortcuts__shortcut { border-color: #ffffff !important; }

/* Pure-white text (#fff) → palette tx (#ffffff). Dashboard chrome only —
   deliberately NOT .rich_text_content: callouts have light backgrounds,
   a blanket color override there renders unreadable (the callout trap). */
.dark-portal .index__item,
.dark-portal .nasa__block,
.dark-portal turbo-frame { color: #ffffff !important; }
/* Callouts — Hudu hardcodes pastel backgrounds with dark ink text
   (#01466C info, #4D0706 danger, #6A2802 warning) in both modes. Stock
   pastels read alien on dark pages and aren't palette-derived on light
   ones. Re-tint per type, always setting bg + text + border together
   (recoloring text alone is the callout trap). */
.dark-portal .rich_text_content .callout-info {
  background: #3E394C !important; color: #E8E5F3 !important; border-color: #635D79 !important; }
.dark-portal .rich_text_content .callout-danger {
  background: #43313A !important; color: #EAD8DD !important; border-color: #6E4D52 !important; }
.dark-portal .rich_text_content .callout-warning {
  background: #473336 !important; color: #EEDAD8 !important; border-color: #76514B !important; }
.dark-portal .rich_text_content .callout-success {
  background: #503730 !important; color: #F8DDCE !important; border-color: #895839 !important; }
body:not(.dark-portal) .rich_text_content .callout-info {
  background: #F3F0FB !important; color: #857EA2 !important; border-color: #E8E5F3 !important; }
body:not(.dark-portal) .rich_text_content .callout-danger {
  background: #F3EBF2 !important; color: #946567 !important; border-color: #EAD8DD !important; }
body:not(.dark-portal) .rich_text_content .callout-warning {
  background: #F5ECF1 !important; color: #A16B5C !important; border-color: #EEDAD8 !important; }
body:not(.dark-portal) .rich_text_content .callout-success {
  background: #F9EDED !important; color: #BD753D !important; border-color: #F8DDCE !important; }

/* "My Tasks" empty-state illustration — inline SVG with stock grayscale
   and navy fills. Recolor structure to base tones and clothing to the
   primary accent; skin tones (#FFB573/#ED893E) stay untouched. CSS fill
   beats the SVG presentation attributes. */
.dark-portal .dash__message svg [fill="white" i] { fill: #ffffff; }
.dark-portal .dash__message svg [fill="#F5F5F5" i] { fill: #B7B3BE; }
.dark-portal .dash__message svg [fill="#E0E0E0" i] { fill: #FEFDFD; }
.dark-portal .dash__message svg [fill="#808080" i] { fill: #4c4756; }
.dark-portal .dash__message svg [fill="black" i] { fill: #211D28; }
.dark-portal .dash__message svg [fill="#263238" i] { fill: #e7e3ed; }
body:not(.dark-portal) .dash__message svg [fill="white" i] { fill: #F9F6FF; }
body:not(.dark-portal) .dash__message svg [fill="#F5F5F5" i] { fill: #FBF8FF; }
body:not(.dark-portal) .dash__message svg [fill="#E0E0E0" i] { fill: #FEFDFF; }
body:not(.dark-portal) .dash__message svg [fill="#808080" i] { fill: #FEFDFD; }
body:not(.dark-portal) .dash__message svg [fill="black" i] { fill: #1A1621; }
body:not(.dark-portal) .dash__message svg [fill="#263238" i] { fill: #b7acc8; }