/* Ashy Black — coherent charcoal/ash palette with defensive dark-theme contrast.
   This version explicitly neutralizes Bootstrap/component foreground colors that
   can otherwise remain dark when used on dark custom-theme surfaces. */

:root[data-theme="ashyblack"] {
  /* Neutral foundation */
  --theme-bg-1: #0d0f10;
  --theme-surface: #000000;
  --theme-surface-2: #1b1e21;
  --theme-border: #30353a;

  /* Text */
  --theme-text: #e6e9eb;
  --theme-text-rgb: 230, 233, 235;
  --theme-text-muted: #a8afb5;
  --theme-text-subtle: #7f878e;

  /* Neutral grey accent */
  --theme-primary: #8b9298;
  --theme-primary-rgb: 139, 146, 152;
  --theme-link: #b8bec3;
  --theme-link-hover: #d7dbde;
  --theme-emphasis: #a2a8ad;

  /* Bootstrap accent aliases */
  --bs-primary: var(--theme-primary);
  --bs-primary-rgb: var(--theme-primary-rgb);

  /* Bootstrap foreground aliases — prevents dark inherited text on dark UI. */
  --bs-body-color: var(--theme-text);
  --bs-body-color-rgb: var(--theme-text-rgb);
  --bs-emphasis-color: #f4f6f7;
  --bs-emphasis-color-rgb: 244, 246, 247;
  --bs-secondary-color: var(--theme-text-muted);
  --bs-tertiary-color: var(--theme-text-subtle);
  --bs-heading-color: #f1f3f4;
  --bs-link-color: var(--theme-link);
  --bs-link-hover-color: var(--theme-link-hover);

  /* Bootstrap surface aliases. */
  --bs-body-bg: var(--theme-bg-1);
  --bs-body-bg-rgb: 13, 15, 16;
  --bs-secondary-bg: var(--theme-surface);
  --bs-card-bg: #000000;
  --bs-card-cap-bg: #000000;
  --bs-tertiary-bg: var(--theme-surface-2);
  --bs-border-color: var(--theme-border);
}

/* Base foreground */
:root[data-theme="ashyblack"] body,
:root[data-theme="ashyblack"] body.bg-body {
  color: var(--theme-text);
}

:root[data-theme="ashyblack"] h1,
:root[data-theme="ashyblack"] h2,
:root[data-theme="ashyblack"] h3,
:root[data-theme="ashyblack"] h4,
:root[data-theme="ashyblack"] h5,
:root[data-theme="ashyblack"] h6,
:root[data-theme="ashyblack"] .h1,
:root[data-theme="ashyblack"] .h2,
:root[data-theme="ashyblack"] .h3,
:root[data-theme="ashyblack"] .h4,
:root[data-theme="ashyblack"] .h5,
:root[data-theme="ashyblack"] .h6 {
  color: var(--bs-heading-color);
}

/* Links */
:root[data-theme="ashyblack"] a:not(.btn) {
  color: var(--theme-link);
}

:root[data-theme="ashyblack"] a:not(.btn):hover,
:root[data-theme="ashyblack"] a:not(.btn):focus {
  color: var(--theme-link-hover);
}

/* Bootstrap utilities that can explicitly force unreadable dark text. */
:root[data-theme="ashyblack"] .text-dark,
:root[data-theme="ashyblack"] .text-black,
:root[data-theme="ashyblack"] .link-dark {
  color: var(--theme-text) !important;
}

:root[data-theme="ashyblack"] .text-black-50 {
  color: rgba(var(--theme-text-rgb), 0.62) !important;
}

:root[data-theme="ashyblack"] .text-body {
  color: var(--theme-text) !important;
}

:root[data-theme="ashyblack"] .text-body-secondary,
:root[data-theme="ashyblack"] .text-secondary {
  color: var(--theme-text-muted) !important;
}

:root[data-theme="ashyblack"] .text-body-tertiary {
  color: var(--theme-text-subtle) !important;
}

/* Common dark surfaces/components. */
:root[data-theme="ashyblack"] .card,
:root[data-theme="ashyblack"] .modal-content,
:root[data-theme="ashyblack"] .offcanvas,
:root[data-theme="ashyblack"] .dropdown-menu,
:root[data-theme="ashyblack"] .list-group-item,
:root[data-theme="ashyblack"] .accordion-item,
:root[data-theme="ashyblack"] .accordion-button,
:root[data-theme="ashyblack"] .popover,
:root[data-theme="ashyblack"] .toast {
  color: var(--theme-text);
  border-color: var(--theme-border);
}

:root[data-theme="ashyblack"] .card,
:root[data-theme="ashyblack"] .modal-content,
:root[data-theme="ashyblack"] .offcanvas,
:root[data-theme="ashyblack"] .dropdown-menu,
:root[data-theme="ashyblack"] .list-group-item,
:root[data-theme="ashyblack"] .accordion-item,
:root[data-theme="ashyblack"] .popover,
:root[data-theme="ashyblack"] .toast {
  background-color: var(--theme-surface);
}

:root[data-theme="ashyblack"] .dropdown-item,
:root[data-theme="ashyblack"] .nav-link,
:root[data-theme="ashyblack"] .list-group-item-action,
:root[data-theme="ashyblack"] .accordion-button {
  color: var(--theme-text);
}

:root[data-theme="ashyblack"] .dropdown-item:hover,
:root[data-theme="ashyblack"] .dropdown-item:focus,
:root[data-theme="ashyblack"] .list-group-item-action:hover,
:root[data-theme="ashyblack"] .list-group-item-action:focus,
:root[data-theme="ashyblack"] .accordion-button:not(.collapsed) {
  color: #f4f6f7;
  background-color: var(--theme-surface-2);
}

:root[data-theme="ashyblack"] .dropdown-item.disabled,
:root[data-theme="ashyblack"] .dropdown-item:disabled,
:root[data-theme="ashyblack"] .nav-link.disabled,
:root[data-theme="ashyblack"] .list-group-item.disabled {
  color: var(--theme-text-subtle) !important;
}

/* Forms */
:root[data-theme="ashyblack"] .form-control,
:root[data-theme="ashyblack"] .form-select,
:root[data-theme="ashyblack"] .form-control-plaintext,
:root[data-theme="ashyblack"] .input-group-text {
  color: var(--theme-text);
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

:root[data-theme="ashyblack"] .form-control:focus,
:root[data-theme="ashyblack"] .form-select:focus {
  color: var(--theme-text);
  background-color: var(--theme-surface);
  border-color: var(--theme-emphasis);
}

:root[data-theme="ashyblack"] .form-control::placeholder,
:root[data-theme="ashyblack"] textarea::placeholder,
:root[data-theme="ashyblack"] input::placeholder {
  color: var(--theme-text-subtle);
  opacity: 1;
}

:root[data-theme="ashyblack"] .form-control:disabled,
:root[data-theme="ashyblack"] .form-select:disabled {
  color: var(--theme-text-muted);
  background-color: #111315;
}

/* Tables often carry their own Bootstrap color variables. */
:root[data-theme="ashyblack"] .table {
  --bs-table-color: var(--theme-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--theme-border);
  --bs-table-striped-color: var(--theme-text);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.025);
  --bs-table-hover-color: #f4f6f7;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.045);
  color: var(--theme-text);
}

/* Quill editor */
:root[data-theme="ashyblack"] .ql-toolbar.ql-snow {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-text);
}

:root[data-theme="ashyblack"] .ql-container.ql-snow {
  border-color: var(--theme-border);
}

:root[data-theme="ashyblack"] .ql-editor {
  background-color: var(--theme-bg-1);
  color: var(--theme-text);
}

:root[data-theme="ashyblack"] .ql-snow .ql-stroke {
  stroke: var(--theme-text);
}

:root[data-theme="ashyblack"] .ql-snow .ql-fill,
:root[data-theme="ashyblack"] .ql-snow .ql-stroke.ql-fill {
  fill: var(--theme-text);
}

:root[data-theme="ashyblack"] .ql-snow .ql-picker-label,
:root[data-theme="ashyblack"] .ql-snow .ql-picker-item {
  color: var(--theme-text);
}

:root[data-theme="ashyblack"] .ql-snow .ql-picker-options {
  background-color: var(--theme-surface);
  border-color: var(--theme-border);
}

:root[data-theme="ashyblack"] .ql-editor.ql-blank::before {
  color: rgba(var(--theme-text-rgb), 0.48);
}

/* Light badges stay dark enough to retain contrast on their light-ish chip. */
:root[data-theme="ashyblack"] .badge.text-bg-light {
  background-color: #24282c !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border);
}

:root[data-theme="ashyblack"] .badge.text-bg-light.text-body-secondary {
  color: var(--theme-text-muted) !important;
}

/* Keep intentionally light controls readable instead of globally forcing light text. */
:root[data-theme="ashyblack"] .btn-light,
:root[data-theme="ashyblack"] .btn-warning,
:root[data-theme="ashyblack"] .text-bg-warning,
:root[data-theme="ashyblack"] .text-bg-light,
:root[data-theme="ashyblack"] .bg-light.text-dark,
:root[data-theme="ashyblack"] .bg-warning.text-dark {
  color: #17191b !important;
}

/* Keep first-row layout wrappers transparent so only their cards/items provide surfaces. */
:root[data-theme="ashyblack"] div.row:nth-child(1) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Label collection: the visible tile is a child of the Bootstrap column,
   not necessarily a .card. Force the actual item container true black. */
:root[data-theme="ashyblack"] div.col-sm-6 > div,
:root[data-theme="ashyblack"] div.col-sm-6 > a,
:root[data-theme="ashyblack"] div.col-sm-6 > article,
:root[data-theme="ashyblack"] div.col-sm-6 > section {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Also neutralize Bootstrap surface utilities when they are used on the tile itself. */
:root[data-theme="ashyblack"] div.col-sm-6 > .bg-body,
:root[data-theme="ashyblack"] div.col-sm-6 > .bg-body-secondary,
:root[data-theme="ashyblack"] div.col-sm-6 > .bg-body-tertiary,
:root[data-theme="ashyblack"] div.col-sm-6 > .bg-dark,
:root[data-theme="ashyblack"] div.col-sm-6 > .card {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Keep nested card wrappers black too, if present. */
:root[data-theme="ashyblack"] div.col-sm-6 > * .card,
:root[data-theme="ashyblack"] div.col-sm-6 > * .card-body {
  background-color: #000000 !important;
}

/* All cards: use true black throughout the ashyblack theme. */
:root[data-theme="ashyblack"] .card {
  --bs-card-bg: #000000;
  --bs-card-cap-bg: #000000;
  --bs-card-color: var(--theme-text);
  --bs-card-border-color: var(--theme-border);
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--theme-text);
}

:root[data-theme="ashyblack"] .card > .card-header,
:root[data-theme="ashyblack"] .card > .card-body,
:root[data-theme="ashyblack"] .card > .card-footer {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Override Bootstrap background utilities when they are attached to card sections. */
:root[data-theme="ashyblack"] .card.bg-body,
:root[data-theme="ashyblack"] .card.bg-body-secondary,
:root[data-theme="ashyblack"] .card.bg-body-tertiary,
:root[data-theme="ashyblack"] .card .card-header.bg-body,
:root[data-theme="ashyblack"] .card .card-body.bg-body,
:root[data-theme="ashyblack"] .card .card-footer.bg-body,
:root[data-theme="ashyblack"] .card .card-header.bg-body-secondary,
:root[data-theme="ashyblack"] .card .card-body.bg-body-secondary,
:root[data-theme="ashyblack"] .card .card-footer.bg-body-secondary,
:root[data-theme="ashyblack"] .card .card-header.bg-body-tertiary,
:root[data-theme="ashyblack"] .card .card-body.bg-body-tertiary,
:root[data-theme="ashyblack"] .card .card-footer.bg-body-tertiary {
  background: #000000 !important;
  background-color: #000000 !important;
}


/* Final card safety net: this site sometimes builds card-like collection tiles
   from the theme surface variable rather than Bootstrap .card alone. */
:root[data-theme="ashyblack"] .card,
:root[data-theme="ashyblack"] .card-header,
:root[data-theme="ashyblack"] .card-body,
:root[data-theme="ashyblack"] .card-footer {
  --bs-card-bg: #000000 !important;
  --bs-card-cap-bg: #000000 !important;
  background: #000000 !important;
  background-color: #000000 !important;
}

/* --------------------------------------------------------------------------
   Markdown editor — SimpleMDE / EasyMDE / CodeMirror 5
   The application uses a CodeMirror-backed Markdown editor whose default
   theme is light. Keep the editor, toolbar, gutters and previews consistent
   with Ashy Black and make toolbar controls visible.
   -------------------------------------------------------------------------- */

:root[data-theme="ashyblack"] .EasyMDEContainer,
:root[data-theme="ashyblack"] .CodeMirror,
:root[data-theme="ashyblack"] .CodeMirror-scroll,
:root[data-theme="ashyblack"] .CodeMirror-sizer,
:root[data-theme="ashyblack"] .CodeMirror-lines {
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--theme-text) !important;
}

:root[data-theme="ashyblack"] .CodeMirror {
  border-color: var(--theme-border) !important;
  caret-color: var(--theme-text);
}

:root[data-theme="ashyblack"] .CodeMirror-gutters {
  background: #000000 !important;
  background-color: #000000 !important;
  border-right-color: var(--theme-border) !important;
}

:root[data-theme="ashyblack"] .CodeMirror-linenumber {
  color: var(--theme-text-subtle) !important;
}

:root[data-theme="ashyblack"] .CodeMirror-cursor {
  border-left-color: #f4f6f7 !important;
}

:root[data-theme="ashyblack"] .CodeMirror-selected,
:root[data-theme="ashyblack"] .CodeMirror-focused .CodeMirror-selected {
  background: #2a2e32 !important;
}

:root[data-theme="ashyblack"] .CodeMirror-placeholder {
  color: var(--theme-text-subtle) !important;
  opacity: 1 !important;
}

/* CodeMirror's default/paper syntax theme contains several dark token colors. */
:root[data-theme="ashyblack"] .CodeMirror pre,
:root[data-theme="ashyblack"] .CodeMirror-line,
:root[data-theme="ashyblack"] .CodeMirror-line-like,
:root[data-theme="ashyblack"] .cm-s-paper,
:root[data-theme="ashyblack"] .cm-s-default {
  color: var(--theme-text) !important;
}

:root[data-theme="ashyblack"] .cm-s-paper .cm-header,
:root[data-theme="ashyblack"] .cm-s-default .cm-header {
  color: #f1f3f4 !important;
}

:root[data-theme="ashyblack"] .cm-s-paper .cm-link,
:root[data-theme="ashyblack"] .cm-s-paper .cm-url,
:root[data-theme="ashyblack"] .cm-s-default .cm-link,
:root[data-theme="ashyblack"] .cm-s-default .cm-url {
  color: var(--theme-link) !important;
}

:root[data-theme="ashyblack"] .cm-s-paper .cm-comment,
:root[data-theme="ashyblack"] .cm-s-paper .cm-quote,
:root[data-theme="ashyblack"] .cm-s-default .cm-comment,
:root[data-theme="ashyblack"] .cm-s-default .cm-quote {
  color: var(--theme-text-muted) !important;
}

:root[data-theme="ashyblack"] .cm-s-paper .cm-string,
:root[data-theme="ashyblack"] .cm-s-paper .cm-variable-2,
:root[data-theme="ashyblack"] .cm-s-default .cm-string,
:root[data-theme="ashyblack"] .cm-s-default .cm-variable-2 {
  color: #c8cdd1 !important;
}

:root[data-theme="ashyblack"] .cm-s-paper .cm-formatting,
:root[data-theme="ashyblack"] .cm-s-paper .cm-strong,
:root[data-theme="ashyblack"] .cm-s-paper .cm-em,
:root[data-theme="ashyblack"] .cm-s-default .cm-formatting,
:root[data-theme="ashyblack"] .cm-s-default .cm-strong,
:root[data-theme="ashyblack"] .cm-s-default .cm-em {
  color: #d9dde0 !important;
}

/* SimpleMDE / EasyMDE toolbar */
:root[data-theme="ashyblack"] .editor-toolbar,
:root[data-theme="ashyblack"] .EasyMDEContainer .editor-toolbar {
  background: #000000 !important;
  background-color: #000000 !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
  opacity: 1 !important;
}

:root[data-theme="ashyblack"] .editor-toolbar button,
:root[data-theme="ashyblack"] .editor-toolbar a {
  color: var(--theme-text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

:root[data-theme="ashyblack"] .editor-toolbar button:hover,
:root[data-theme="ashyblack"] .editor-toolbar button.active,
:root[data-theme="ashyblack"] .editor-toolbar a:hover,
:root[data-theme="ashyblack"] .editor-toolbar a.active {
  color: #f4f6f7 !important;
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-border) !important;
}

:root[data-theme="ashyblack"] .editor-toolbar i,
:root[data-theme="ashyblack"] .editor-toolbar .fa,
:root[data-theme="ashyblack"] .editor-toolbar .fas,
:root[data-theme="ashyblack"] .editor-toolbar .far,
:root[data-theme="ashyblack"] .editor-toolbar .fab {
  color: inherit !important;
}

:root[data-theme="ashyblack"] .editor-toolbar svg {
  fill: currentColor !important;
  color: inherit !important;
}

:root[data-theme="ashyblack"] .editor-toolbar i.separator {
  border-left-color: var(--theme-border) !important;
  border-right-color: transparent !important;
}

/* Markdown preview / side-by-side mode */
:root[data-theme="ashyblack"] .editor-preview,
:root[data-theme="ashyblack"] .editor-preview-side,
:root[data-theme="ashyblack"] .EasyMDEContainer .editor-preview,
:root[data-theme="ashyblack"] .EasyMDEContainer .editor-preview-side {
  color: var(--theme-text) !important;
  background: #000000 !important;
  background-color: #000000 !important;
  border-color: var(--theme-border) !important;
}

:root[data-theme="ashyblack"] .editor-statusbar {
  color: var(--theme-text-subtle) !important;
}

/* Fallback for a raw textarea used before/without CodeMirror initialization. */
:root[data-theme="ashyblack"] textarea.form-control,
:root[data-theme="ashyblack"] textarea[class*="editor"],
:root[data-theme="ashyblack"] textarea[class*="markdown"] {
  color: var(--theme-text) !important;
  background-color: #000000 !important;
  border-color: var(--theme-border) !important;
}

/* --------------------------------------------------------------------------
   Light-surface cleanup
   Some admin panels (for example the collapsible SEO section) are rendered
   with Bootstrap light/white background utilities even while the site is in
   dark mode. Override those utilities at the very end so they cannot win over
   the Ashy Black palette.
   -------------------------------------------------------------------------- */

:root[data-theme="ashyblack"] .bg-light,
:root[data-theme="ashyblack"] .bg-white,
:root[data-theme="ashyblack"] .bg-body-secondary,
:root[data-theme="ashyblack"] .bg-body-tertiary,
:root[data-theme="ashyblack"] .text-bg-light {
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--theme-text) !important;
}

/* Keep text inside formerly-light panels readable. */
:root[data-theme="ashyblack"] .bg-light .text-dark,
:root[data-theme="ashyblack"] .bg-light .text-black,
:root[data-theme="ashyblack"] .bg-white .text-dark,
:root[data-theme="ashyblack"] .bg-white .text-black,
:root[data-theme="ashyblack"] .text-bg-light,
:root[data-theme="ashyblack"] .text-bg-light .text-dark,
:root[data-theme="ashyblack"] .text-bg-light .text-black {
  color: var(--theme-text) !important;
}

:root[data-theme="ashyblack"] .bg-light .text-muted,
:root[data-theme="ashyblack"] .bg-light .text-body-secondary,
:root[data-theme="ashyblack"] .bg-white .text-muted,
:root[data-theme="ashyblack"] .bg-white .text-body-secondary,
:root[data-theme="ashyblack"] .bg-body-secondary .text-muted,
:root[data-theme="ashyblack"] .bg-body-tertiary .text-muted {
  color: var(--theme-text-muted) !important;
}

/* Common containers used for collapsible admin sections. */
:root[data-theme="ashyblack"] details.bg-light,
:root[data-theme="ashyblack"] details.bg-white,
:root[data-theme="ashyblack"] details.bg-body-secondary,
:root[data-theme="ashyblack"] details.bg-body-tertiary,
:root[data-theme="ashyblack"] fieldset.bg-light,
:root[data-theme="ashyblack"] fieldset.bg-white {
  border-color: var(--theme-border) !important;
  background: #000000 !important;
  color: var(--theme-text) !important;
}

/* Light badge exception from earlier versions is intentionally reversed here:
   Ashy Black now treats light utility surfaces as dark theme surfaces. */
:root[data-theme="ashyblack"] .badge.text-bg-light {
  background: #000000 !important;
  background-color: #000000 !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}

/* Splash screen — fill the entire viewport */
:root[data-theme="ashyblack"] .splash-mosaic {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Let each mosaic image completely fill its available tile/cell. */
:root[data-theme="ashyblack"] .splash-mosaic img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block;
  transform: none;
}

/* Prevent wrappers inside the mosaic from leaving gaps around their images. */
:root[data-theme="ashyblack"] .splash-mosaic > * {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}