/*
 * Apprise API — Dark Theme
 *
 * Colour palette derived from the Apprise documentation site (Starlight):
 *
 *   --sl-color-bg             #17181c       page background (deepest)
 *   --sl-color-bg-nav         #23262f       nav / sidebar / elevated surfaces
 *   --sl-color-bg-inline-code #34383f       lifted surface, inputs (gray-5)
 *   --sl-color-gray-5         #34383f       borders, dividers, tabs bg
 *   --sl-color-gray-4         #555a62       muted icons / disabled text
 *   --sl-color-gray-3         #888c96       secondary / placeholder text
 *   --sl-color-gray-2         #c1c3c9       primary body text
 *   --sl-color-gray-1         #edeef3       light labels, near-white text
 *   --sl-color-white          #ffffff       pure white (headings)
 *   --sl-color-accent         #2cb6a6       brand teal (interactive)
 *   --sl-color-accent-high    #7de6da       lighter teal (hover / active text)
 *   --sl-color-accent-low     #0b3b37       deep teal tint (selected states)
 */

/* =========================================
Support Banner
========================================= */
:root {
  --mobile-beta-bg: #17181c;
  --mobile-beta-surface: #23262f;
  --mobile-beta-border: #34383f;
  --mobile-beta-text: #c1c3c9;
  --mobile-beta-heading: #edeef3;
  --mobile-beta-muted: #888c96;
  --mobile-beta-accent: #2cb6a6;
  --mobile-beta-accent-soft: #0b3b37;
  --mobile-beta-primary-text: #071b19;
  --section-heading-start: #153532;
  --section-heading-end: #222832;
  --section-heading-border: #35514f;
  --section-heading-title: #7de6da;
  --section-heading-subtitle: #b8bec8;
  --section-heading-shadow: rgba(0, 0, 0, 0.22);
  --config-list-surface: #0d0f12;
  --config-list-row: #15181d;
  --config-list-row-hover: #1c2228;
  --config-list-border: #2a2e38;
  --config-list-id-bg: #0d0f12;
  --config-list-text: #c1c3c9;
  --config-list-action: #888c96;
  --dialog-close-bg: #555a62;
  --dialog-close-border: #6f7582;
  --dialog-close-icon: #17181c;
  --dialog-close-hover-bg: #6f7582;
  --dialog-close-hover-border: #888c96;
  --dialog-close-hover-icon: #0d0f12;
  --dialog-surface: #23262f;
  --dialog-surface-raised: #2b2f38;
  --dialog-border: #454a55;
  --dialog-text: #d4d6dc;
  --dialog-heading: #f4f5f8;
  --dialog-header-start: #163d3a;
  --dialog-header-end: #202b35;
  --dialog-shadow: rgba(0, 0, 0, 0.58);
  --toast-info-bg: #172d42;
  --toast-info-border: #4a86b8;
  --toast-info-text: #b6dcfa;
  --toast-success-bg: #183522;
  --toast-success-border: #4b9861;
  --toast-success-text: #a9e4bc;
  --toast-warning-bg: #3b3018;
  --toast-warning-border: #b48732;
  --toast-warning-text: #f0d28a;
  --toast-error-bg: #3a2024;
  --toast-error-border: #a95660;
  --toast-error-text: #f1b2b9;
  --form-error-bg: #3b171b;
  --form-error-border: #ef5350;
  --form-error-text: #ff8a80;
  --select-bg: #1c1f26;
  --select-border: #454a55;
  --select-border-hover: #68717f;
  --select-focus-ring: rgba(44, 182, 166, 0.2);
  --select-text: #d4d6dc;
  --select-caret: #aeb2bd;
  --notify-log-bg: #111318;
  --notify-log-row-bg: #1b1e25;
  --notify-log-row-alt-bg: #20242c;
  --notify-log-border: #3b414c;
  --notify-log-text: #d7dae0;
  --notify-log-muted: #9299a5;
  --notify-log-status-bg: #123431;
  --notify-log-status-border: #286c65;
  --notify-log-success-bg: #183522;
  --notify-log-success-border: #39734a;
  --notify-log-warning-bg: #3b3018;
  --notify-log-warning-border: #8a6828;
  --notify-log-error-bg: #3a2024;
  --notify-log-error-border: #81454e;
  --auth-logout-success-bg: #173326;
  --auth-logout-success-border: #397454;
  --auth-logout-success-text: #9ce0b8;
}

.support-banner {
  background-color: rgba(44, 182, 166, 0.08);
  color: #7de6da;
  border-bottom: 1px solid rgba(44, 182, 166, 0.15);
}

.support-banner a {
  color: #7de6da;
}

.support-banner-close {
  color: #7de6da;
}

/* =========================================
Global Base
========================================= */
html {
  color: #c1c3c9;
  background-color: #17181c;
}

/* =========================================
Typography
========================================= */
h1 {
  color: #ffffff !important;
}

h2 {
  color: #edeef3;
}

h3 {
  color: #edeef3;
}

h4 {
  color: #edeef3;
}

h5 {
  color: #2cb6a6;
}

em {
  color: #2cb6a6 !important;
}

pre code {
  background-color: #0d0f12 !important;
  color: #c1c3c9;
}

.snippet-copy-btn,
.snippet-visibility-btn {
  background-color: #0d0f12 !important;
}

/* =========================================
Navigation
========================================= */
.nav.nav-color,
nav {
  background: #23262f !important;
  color: #c1c3c9;
  box-shadow: 0 1px 0 #34383f !important;
}

nav a,
nav .brand-logo,
nav ul a {
  color: #c1c3c9;
}

nav ul li.active,
nav ul a:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

i.material-icons {
  color: #555a62;
}

i.material-icons:hover {
  color: #888c96;
}

/* =========================================
Footer
========================================= */
.page-footer {
  background-color: #23262f;
  color: #c1c3c9;
}

.page-footer-legal {
  border-top: 1px solid #34383f;
  color: #888c96;
}

.page-footer-legal a {
  color: #888c96;
}

/* =========================================
Status & Indicators
========================================= */
.url-enabled {
  color: #2cb6a6;
}

.url-disabled {
  color: #e00202;
}

.no-config .info {
  color: #34383f;
}

.notify-target-guidance {
  background-color: #23262f;
  border-color: #34383f;
  color: #c1c3c9;
}

.notify-target-guidance-title,
.notify-target-guidance-icon {
  color: #ffbf6b;
}

.review-empty-card {
  background-color: #23262f;
  border-color: #34383f;
}

.review-empty-lead .info {
  color: #555a62;
}

.loaded-config-heading-status-text {
  background-color: #0b3b37;
  border-color: #2f7f77;
  color: #cffff9;
}

:root {
  --review-filter-toggle-bg: #23262f;
  --review-filter-toggle-ring: #3f4552;
  --review-filter-toggle-knob: #aeb4be;
  --review-filter-toggle-shadow: rgba(0, 0, 0, 0.42);
  --review-filter-toggle-inner-shadow: rgba(0, 0, 0, 0.32);
  --review-filter-toggle-active-bg: #0b3b37;
  --review-filter-toggle-active-ring: #2f7f77;
  --review-filter-toggle-active-knob: #7de6da;
  --review-filter-toggle-active-halo: rgba(45, 182, 166, 0.18);
  --review-filter-toggle-focus: #7de6da;
}

.loaded-config-tip {
  background-color: #23262f;
  border-color: #34383f;
  color: #aeb4be;
}

.api-details .plugin-index {
  color: #aeb4be;
  background-color: #17181c;
  border-color: #3d4350;
}

.api-details .collapsible>li {
  border-color: #34383f;
}

.api-details .collapsible-header {
  background-color: #23262f;
  color: #c1c3c9;
}

.api-details .collapsible-header:hover {
  background-color: #2c3040;
  color: #7de6da;
}

.api-details .collapsible>li.active>.collapsible-header {
  background-color: #2c3040;
  color: #7de6da;
  border-bottom-color: #34383f;
}

.api-details .collapsible-body {
  background-color: #17181c;
}

.api-details .plugin-chevron {
  color: #666c78;
}

.api-details .collapsible>li.active .plugin-chevron {
  color: #7de6da;
}

.api-details .plugin-service-btn {
  color: #c1c3c9 !important;
  border-color: #555a62;
  background-color: #23262f;
}

.api-details .plugin-service-btn:hover {
  color: #7de6da !important;
  border-color: #2cb6a6;
  background-color: #2c3040;
}

.api-details .plugin-service-btn--external {
  color: #9cece2 !important;
  border-color: #2f5a62;
  background-color: #21353a;
}

.api-details .plugin-service-btn--external:hover {
  color: #c3fff7 !important;
  border-color: #4d8993;
  background-color: #284149;
}

#overview strong {
  color: #edeef3 !important;
  background-color: #34383f;
}

/* Loading spinner */
.api-status-icon.status-loading {
  color: #90caf9;
}

.api-status-details {
  color: #ffcdd2;
}

.api-status-icon.status-ok {
  color: #66bb6a;
}

.api-status-icon.status-error {
  color: #ef5350;
}

/* =========================================
Links
========================================= */
a,
a.active {
  color: #2cb6a6 !important;
}

a:hover {
  color: #7de6da !important;
}

/* Collection sidebar items — muted, not teal */
.collection a.collection-item {
  color: #c1c3c9 !important;
}

/* =========================================
Side Nav
========================================= */
:root {
  --apprise-mini-badge-bg: #2cb6a6;
  --apprise-mini-badge-ring: #0b3b37;
  --apprise-mini-badge-horn: #f2f8f8;
  --apprise-mini-badge-horn-stroke: #c8d6d5;
  --review-priority-badge-bg: #ffd166;
  --review-priority-badge-text: #17181c;
  --review-priority-badge-ring: #ffe7a3;
  --review-priority-badge-halo: rgba(23, 24, 28, 0.78);
  --review-priority-badge-shadow: rgba(0, 0, 0, 0.55);
  --review-retry-badge-bg: #34383f;
  --review-retry-badge-text: #edeef3;
  --review-retry-badge-ring: #555a62;
  --review-retry-badge-halo: rgba(23, 24, 28, 0.72);
  --review-retry-badge-shadow: rgba(0, 0, 0, 0.46);
  --review-optional-badge-bg: #274d55;
  --review-optional-badge-text: #aaf3eb;
  --review-optional-badge-ring: #40737d;
  --review-optional-badge-halo: rgba(23, 24, 28, 0.72);
  --review-optional-badge-shadow: rgba(0, 0, 0, 0.42);
  --review-autocomplete-scroll-track: #23262f;
  --review-autocomplete-scroll-thumb: #555a62;
  --review-autocomplete-section-border: #3f4552;
  --review-autocomplete-hover-bg: #34383f;
  --review-autocomplete-hover-text: #7de6da;
  --review-priority-option-bg: #253f43;
  --review-priority-option-text: #7de6da;
  --review-priority-option-ring: #346c68;
  --review-priority-option-hover-bg: #0b3b37;
  --review-priority-option-hover-text: #b8fff7;
  --apprise-logo-wave: #89a0a5;
  --apprise-logo-body-1: #4ed1c8;
  --apprise-logo-body-2: #1f8780;
  --apprise-logo-text-1: #8de8dd;
  --apprise-logo-text-2: #3ab5aa;
  --menu-icon-accent: #2cb6a6;
  --menu-icon-coffee: #c07050;
  --menu-icon-heart: #e05c5c;
}

.side-nav-group {
  background-color: #23262f;
  border: 1px solid #34383f;
}

.side-nav-label {
  color: #6f7582;
}

.side-nav-item {
  color: #c1c3c9 !important;
  border-top-color: #34383f;
}

.side-nav-item:hover {
  background-color: #2c3040;
  color: #7de6da !important;
}

.side-nav-group--support {
  border-color: #3a2e2e;
}

.side-nav-group--support .side-nav-item {
  border-top-color: #3a2e2e;
}

.side-nav-group--support .side-nav-item:hover {
  background-color: #2e2525;
  color: #f0a0a0 !important;
}

.mobile-menu-tab {
  color: #7de6da;
  background-color: #23262f;
  border-color: #3d5960;
}

.mobile-menu-tab:hover,
.mobile-menu-tab:focus,
.mobile-menu-tab:active,
.mobile-menu-tab:focus-visible {
  color: #7de6da;
  background-color: #23262f;
}

@media (max-width: 600px) {
  .main-layout .side-menu {
    color: #c1c3c9;
    background-color: #17191e;
    border-right: 1px solid #3d5960;
  }

  .mobile-menu-drawer-heading {
    color: #7de6da;
    border-color: #34383f;
  }
}

/* =========================================
Dropdowns & Selects
========================================= */

/* Trigger input */
.select-wrapper input.select-dropdown {
  color: var(--select-text);
  border-color: var(--select-border) !important;
}

.select-wrapper input.select-dropdown:focus {
  border-color: #2cb6a6 !important;
  box-shadow: 0 0 0 3px var(--select-focus-ring) !important;
}

/* Caret arrow */
.select-wrapper .caret {
  fill: var(--select-caret);
}

/* Dropdown list container */
.dropdown-content {
  background-color: #23262f;
  border: 1px solid #34383f;
  border-radius: 0.4rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Every item — base state */
.dropdown-content li>a,
.dropdown-content li>span {
  background-color: #23262f !important;
  color: #c1c3c9 !important;
}

/* Hover */
.dropdown-content li>a:hover,
.dropdown-content li>span:hover,
.dropdown-content li:hover>span {
  background-color: #34383f !important;
  color: #7de6da !important;
}

/* Selected / active item */
.dropdown-content li.active>a,
.dropdown-content li.selected>span,
.dropdown-content li.active>span {
  background-color: #0b3b37 !important;
  color: #2cb6a6 !important;
  font-weight: 600;
}

/* Focus label */
.select-wrapper+label,
.input-field>label {
  color: #555a62;
}

.select-wrapper+label {
  color: #aeb2bd;
}

.select-wrapper input.select-dropdown:focus+label,
.input-field>label.active {
  color: #2cb6a6;
}

/* =========================================
Components: Cards, Collections, Collapsibles
========================================= */
.card-panel,
.card {
  background-color: #23262f;
}

.card .card-image .card-title {
  color: #edeef3;
}

.card .card-reveal {
  background-color: #23262f;
}

#url-list .card-panel {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  background: #23262f;
  border-color: #34383f;
}

#url-list .card-panel:hover {
  border-color: #4a5060;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

#url-list .url-header code.url-text {
  background-color: #17181c;
  color: #c1c3c9;
  border: 1px solid #2a2e38;
}

#url-list .url-plugin-title {
  color: #888c96;
}

#url-list .card-panel .url-id {
  color: #555a62;
}

.collection {
  border-color: #34383f;
}

.collection .collection-item {
  background-color: #23262f;
  border-color: #34383f;
  color: #c1c3c9;
}

.collection a.collection-item {
  color: #c1c3c9;
}

.collection a.collection-item:not(.active):hover {
  background-color: #34383f !important;
}

.collapsible {
  border: 1px solid #34383f;
}

.collapsible-header {
  background-color: #23262f;
  border-bottom: 1px solid #34383f;
}

.collapsible-body {
  border-bottom: 1px solid #34383f;
  background-color: #17181c;
}

/* =========================================
Inline Tab Chip (step references)
========================================= */
.tab-chip {
  background-color: #23262f;
  border-color: #34383f;
  color: #c1c3c9;
}

.tab-chip .material-icons {
  color: #888c96;
}

.tab-chip-external {
  background-color: #21353a;
  border-color: #2f5a62;
  color: #9cece2;
}

.tab-chip-external .material-icons {
  color: #7de6da;
}

/* =========================================
Code blocks — key/ID highlight + hljs overrides
========================================= */

/* The <em> tag used to highlight the config key inside pre>code.
   No background shading — colour only. */
pre code em {
  color: #9cdcfe;
  font-style: normal;
}

/* hljs palette — aligned with the site's teal/gray palette:
   keywords/builtins → #2cb6a6  (brand teal)
   strings/numbers   → #7de6da  (light teal)
   comments          → #888c96  (muted gray, italic)
   plain text        → #c1c3c9  (standard body text) */
pre code.bash.hljs,
pre code.hljs {
  color: #c1c3c9;
  background-color: #0d0f12;
}

/* Quoted string values ("Test Message", "POST") */
pre code .hljs-string,
pre code .hljs-symbol {
  color: #7de6da;
}

/* Built-in shell commands: curl, apprise */
pre code .hljs-built_in {
  color: #2cb6a6;
}

/* Shell keywords */
pre code .hljs-keyword,
pre code .hljs-selector-tag,
pre code .hljs-subst {
  color: #2cb6a6;
}

/* Flags and options: -X, -F, --body, --tag */
pre code .hljs-attr,
pre code .hljs-attribute,
pre code .hljs-meta {
  color: #c1c3c9;
}

/* Variables, numbers, constants */
pre code .hljs-variable,
pre code .hljs-template-variable,
pre code .hljs-params,
pre code .hljs-literal,
pre code .hljs-number {
  color: #7de6da;
}

/* Comments */
pre code .hljs-comment,
pre code .hljs-quote {
  color: #888c96;
  font-style: italic;
}

/* Section / title */
pre code .hljs-section,
pre code .hljs-title,
pre code .hljs-name,
pre code .hljs-tag {
  color: #888c96;
}

/* Function/class titles (.hljs-title.function_ etc. beat plain .hljs-title
   in specificity — must be overridden explicitly) */
pre code .hljs-title.function_,
pre code .hljs-title.class_,
pre code .hljs-title.class_.inherited__ {
  color: #2cb6a6;
}

/* Types, language variables ($this, self), template tags */
pre code .hljs-type,
pre code .hljs-variable.language_,
pre code .hljs-template-tag,
pre code .hljs-doctag {
  color: #7de6da;
}

/* Operators, bullets — plain text, not highlighted */
pre code .hljs-operator,
pre code .hljs-bullet {
  color: #c1c3c9;
}

/* Regexps — treat like strings */
pre code .hljs-regexp,
pre code .hljs-meta .hljs-string {
  color: #7de6da;
}

/* Meta keywords (e.g. !important) */
pre code .hljs-meta .hljs-keyword {
  color: #2cb6a6;
}

/* =========================================
Config ID Bar
========================================= */
.config-id-bar {
  background-color: #23262f;
  border: 1px solid #34383f;
}

.config-id-bar .config-id-label {
  color: #888c96;
}

code.config-id,
input.config-id-input {
  color: #7de6da !important;
  background-color: #17181c !important;
  border: 1px solid #34383f !important;
  padding: 0.15em 0.45em;
  border-radius: 0.3rem;
}

input.config-id-input.is-mismatched {
  color: #ffe6ad !important;
  background-color: #3b3018 !important;
  border-color: #f2b84b !important;
}

.config-id-mismatch-notice {
  color: #ffbf6b;
  background-color: #3b3018;
  border-color: #c88d2a;
}

.config-id-mismatch-icon,
.config-id-mismatch-title {
  color: inherit;
}

.config-auth-link,
.auth-account,
.auth-logout-link {
  color: #7de6da;
}

.config-auth-status.is-disabled {
  color: #ff9355;
}

.config-auth-status.is-unassigned {
  color: #888c96;
}

.config-auth-status.is-assigned {
  color: #7de6da;
}

.auth-state-indicator.auth-state-admin {
  color: #c9a4f4;
}

.auth-state-indicator.auth-state-public {
  color: #73dfb4;
}

.auth-state-indicator.auth-state-locked {
  color: #f3c969;
}

.auth-state-indicator.auth-state-user {
  color: #8bc9f4;
}

.auth-state-indicator.auth-state-disabled {
  color: #9da1aa;
}

.auth-state-indicator.auth-state-off {
  color: #73dfb4;
}

.auth-account.is-master {
  /* The master account stays red even though top-bar links set their theme color. */
  color: #ff8b8b !important;
}

.logout-confirm-icon {
  color: #7de6da;
}

.browser-login-card,
.auth-editor-card,
.auth-disabled-card {
  color: #c1c3c9;
  background-color: #1d1f25;
  border-color: #2cb6a6;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}

/* Materialize defaults helper copy to translucent black, which disappears
   against this card. Keep inactive labels and explanatory text readable. */
.auth-editor-card .input-field>label:not(.active),
.auth-editor-card .select-wrapper+label:not(.active),
.auth-editor-card .helper-text {
  color: #aeb2bd;
}

.auth-editor-card .value-visibility-toggle i.material-icons {
  color: #aeb2bd;
}

.auth-editor-card .value-visibility-toggle:hover i.material-icons {
  color: #edeef3;
}

.auth-editor-card .btn i.material-icons {
  color: inherit;
}

.auth-access-warning,
.auth-access-warning i.material-icons,
.apprise-qr-note--warning {
  color: #f6b45f;
}

.auth-editor-card .auth-access-help,
.swal2-popup .auth-save-copy {
  color: #7de6da;
  background-color: #263a3a;
  border-color: #3ab5aa;
}

.auth-editor-card .auth-access-help:hover,
.auth-editor-card .auth-access-help:focus-visible,
.swal2-popup .auth-save-copy:hover,
.swal2-popup .auth-save-copy:focus-visible {
  color: #0f1e1c;
  background-color: #7de6da;
}

.browser-login-icon,
.auth-card-icon {
  color: #7de6da;
}

.auth-disabled-icon {
  color: #ff9355;
}

.auth-login-error {
  color: var(--form-error-text);
  background-color: var(--form-error-bg);
  border-color: var(--form-error-border);
}

.input-field.has-errors label,
.input-field.has-errors label.active,
.input-field .errorlist,
.review-template-error {
  color: var(--form-error-text);
}

.auth-randomize-option {
  color: #888c96;
  border-color: #555a62;
}

.auth-randomize-option:hover {
  color: #7de6da;
  border-color: #2cb6a6;
}

.auth-randomize-option.is-selected {
  color: #7de6da;
  background-color: #0b3b37;
  border-color: #2cb6a6;
}

.auth-compact-heading .auth-card-icon {
  background-color: #263a3a;
  border-color: #3a6f69;
}

.auth-compact-heading p {
  color: #aeb2bd;
}

.auth-tool-panel,
.auth-content-panel {
  background-color: #17191e;
  border-color: #363942;
}

.auth-tool-label {
  color: #aeb2bd;
}

.auth-remove-option {
  border-color: #363942;
}

.auth-editor-card .auth-remove-button {
  color: #ff9ca6;
  background-color: rgba(117, 38, 48, 0.22) !important;
  border-color: #75404a;
}

.auth-editor-card .auth-remove-button:hover,
.auth-editor-card .auth-remove-button:focus-visible {
  color: #ffd9dd;
  background-color: rgba(151, 50, 63, 0.4) !important;
  border-color: #b45b68;
}

.reset-configuration-toggle {
  color: #c1c3c9;
  background-color: #1a1c22;
  border-color: #454952;
}

.reset-configuration-toggle:hover {
  background-color: #23262f;
  border-color: #686e7a;
}

.reset-configuration-toggle__track {
  background-color: #343842;
  border-color: #686e7a;
}

.reset-configuration-toggle__track>span {
  background-color: #b8bbc4;
}

.reset-configuration-toggle[aria-checked="true"] {
  color: #ffc1c8;
  background-color: rgba(105, 35, 46, 0.42);
  border-color: #a95562;
}

.reset-configuration-toggle[aria-checked="true"] .reset-configuration-toggle__track {
  background-color: #a95562;
  border-color: #d17783;
}

.reset-configuration-toggle[aria-checked="true"] .reset-configuration-toggle__track>span {
  background-color: #fff0f2;
}

.reset-configuration-toggle__copy small {
  color: #aeb2bd;
}

.auth-mode-status.is-admin {
  background-color: rgba(105, 35, 46, 0.42);
  border-color: #a95562;
  color: #ffc1c8;
}

.auth-mode-status.is-user {
  background-color: rgba(27, 66, 105, 0.46);
  border-color: #477eae;
  color: #a9d6ff;
}

/* =========================================
Tabs
========================================= */

/* Container — bottom border only; tabs sit above it */
.tabs {
  background-color: transparent !important;
  border-bottom: 2px solid #2cb6a6 !important;
}

/* Inactive tabs: slightly elevated surface, rounded top corners */
body .tabs .tab a {
  background-color: #23262f !important;
  color: #888c96 !important;
  border: 1px solid #34383f !important;
  border-bottom: none !important;
  margin-bottom: -1px;
}

/* Hover */
body .tabs .tab a:hover {
  background-color: #2c3040 !important;
  color: #7de6da !important;
  border-color: #555a62 !important;
  border-bottom: none !important;
}

/* Active — page-background merges with content below the tab bar.
   :focus included so clicking does not trigger a colour change. */
body .tabs .tab a.active,
body .tabs .tab a.active:focus {
  background-color: #17181c !important;
  color: #7de6da !important;
  border: 1px solid #2cb6a6 !important;
  border-bottom: 2px solid #17181c !important;
}

/* Indicator: hide it — a.active is the signal */
body .tabs .indicator {
  display: none !important;
}

body .tabs .tab.disabled a,
body .tabs .tab.disabled a:hover,
body .tabs .tab.disabled a i,
body .tabs .tab.disabled a:hover i {
  background-color: #1e2128 !important;
  color: #34383f !important;
  cursor: default;
  border-color: #2a2e38 !important;
  border-bottom: none !important;
}

body .tabs .tab a:focus {
  background-color: #23262f !important;
}

/* =========================================
Inputs & Code
========================================= */
body input,
body textarea {
  color: #edeef3;
  border: 1px solid #34383f;
  background-color: #17181c;
}

/* Materialize focus overrides */
input:not([type]):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #2cb6a6;
}

input:not([type]):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
  color: #2cb6a6;
}

.file-selected {
  color: #7de6da;
  background-color: #23262f;
}

/* =========================================
Buttons & Chips
========================================= */
.btn,
.btn-large,
.btn-small {
  color: #edeef3;
  background-color: #34383f;
}

.btn:focus-visible,
.btn-large:focus-visible,
.btn-small:focus-visible,
.btn-floating:focus-visible,
.btn-large:hover,
.btn-small:hover,
.btn:hover {
  background-color: #23262f;
  color: #edeef3;
}

.btn:focus:not(:focus-visible),
.btn-large:focus:not(:focus-visible),
.btn-small:focus:not(:focus-visible),
.btn-floating:focus:not(:focus-visible) {
  outline: none;
  color: #edeef3;
  background-color: #34383f;
  box-shadow: none;
}

.btn-flat {
  background-color: transparent;
  color: #c1c3c9;
}

#config .config-toolbar .config-url-builder-btn,
#config .config-toolbar .config-url-builder-btn:visited,
#config .config-toolbar .config-url-builder-btn:hover,
#config .config-toolbar .config-url-builder-btn:focus-visible {
  color: #edeef3 !important;
}

#notify .notify-form-actions .btn-clear-form {
  background-color: #3a2226;
  border-color: #6b3339;
  color: #e6b8ba;
}

#notify .notify-form-actions .btn-clear-form:hover,
#notify .notify-form-actions .btn-clear-form:focus-visible {
  background-color: #4a262b;
  border-color: #ef5350;
  color: #ffcdd2 !important;
}

#url-list .copy-url-btn:hover,
#url-list .review-test-btn:hover,
.config-id-copy.btn-flat:hover,
.snippet-copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

#url-list .review-test-btn {
  color: #c1c3c9;
  background-color: transparent;
  border-color: transparent;
}

#url-list .review-test-btn:hover,
#url-list .review-test-btn:focus-visible {
  color: #eef4ff;
}

#url-list .review-test-btn[disabled],
#url-list .review-test-btn[disabled]:hover,
#url-list .review-test-btn[disabled]:focus-visible {
  color: #6d7380;
  background-color: rgba(255, 255, 255, 0.03);
  border-color: #3f4552;
}

.chip {
  color: #c1c3c9;
  background-color: #34383f !important;
  border: 1px solid #555a62 !important;
}

/* Selected card: deep teal tint (mirrors accent-low) */
.card-panel.selected {
  background-color: #0b3b37 !important;
  border-color: #1f6f67 !important;
}

.chip.selected {
  color: #ffffff;
  background-color: #148c80 !important;
}

#notify .chips .chip.notify-tag-chip {
  color: #ffffff;
  background-color: #148c80 !important;
  border-color: #2cb6a6 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
}

#notify .chips .chip.notify-tag-chip .close {
  color: inherit;
}

#notify .chips input {
  color: #c1c3c9;
  caret-color: #2cb6a6;
}

#notify .chips input::placeholder {
  color: #888c96;
}

.url-selected-icon i {
  color: #888c96;
}

#url-list .url-disabled-indicator {
  color: #f5c46a;
}

#url-list .card-panel.url-item-disabled {
  background-color: #1d2129 !important;
  border-color: #6b4d26 !important;
  box-shadow: inset 0 0 0 1px rgba(245, 196, 106, 0.12);
  opacity: 0.92;
}

#url-list .card-panel.url-item-disabled:hover {
  transform: none;
}

#url-list .card-panel.url-item-disabled .url-plugin-title {
  color: #d2a761;
  opacity: 0.92;
}

#url-list .card-panel.url-item-disabled code.url-text {
  color: #aeb5c1;
  background-color: #161a21;
}

#url-list .card-panel.url-item-disabled .chip {
  opacity: 0.58;
}

#url-list .card-panel.url-item-disabled .url-selected-icon i {
  color: #646b78;
}

/* =========================================
Welcome Page Collapsibles
========================================= */
.api-welcome .collapsible>li {
  border-color: #34383f;
}

.api-welcome .collapsible-header {
  background-color: #23262f;
  color: #c1c3c9;
}

.api-welcome .collapsible-header i.material-icons {
  color: #2cb6a6;
}

.api-welcome .collapsible-header:hover {
  background-color: #2c3040;
  color: #7de6da;
}

.api-welcome .collapsible>li.active>.collapsible-header {
  background-color: #2c3040;
  color: #7de6da;
  border-bottom-color: #34383f;
}

.api-welcome .collapsible-body {
  background-color: #17181c;
}

/* =========================================
Health Check
========================================= */
#health-check {
  background-color: #23262f;
  color: #c1c3c9;
  border-color: #34383f;
}

#health-check .health-check-title {
  color: #edeef3;
  border-bottom-color: #3d4350;
}

#health-check .health-check-icon--error {
  color: #ff7373;
}

#health-check .health-check-list li {
  background-color: #1f222a;
  border-color: #34383f;
}

#health-check .health-check-more {
  background-color: #1f222a;
  border-color: #34383f;
}

#health-check .health-check-more summary {
  color: #7de6da;
}

#health-check .health-check-more-content {
  border-top: 1px solid #34383f;
}

/* =========================================
Config Editor — textarea border override
========================================= */
.apprise-config-editor textarea {
  caret-color: #edeef3 !important;
  border: 1px solid #2a2e38 !important;
}

.apprise-config-editor .apprise-config-highlight {
  background-color: #0d0f12;
  color: #c1c3c9;
}

/* 1. URL values — accent-high teal, brightest element, the primary content */
.apprise-config-highlight .hljs-string,
.apprise-config-highlight .hljs-symbol,
.apprise-config-highlight .hljs-link {
  color: #7de6da !important;
}

/* 2. Comments — muted, clearly suppressed */
.apprise-config-highlight .hljs-comment {
  color: #555a62 !important;
  font-style: italic !important;
}

/* 3. Group tag declarations (<work>=devops) — brand teal, structural */
.apprise-config-highlight .hljs-keyword,
.apprise-config-highlight .hljs-section,
.apprise-config-highlight .hljs-name {
  color: #2cb6a6 !important;
}

/* 4. YAML keys (url:, tag:) — brand teal, structural labels */
.apprise-config-highlight .hljs-meta,
.apprise-config-highlight .hljs-attr {
  color: #2cb6a6 !important;
}

/* 5. Numbers / Constants — neutral body text, minor role */
.apprise-config-highlight .hljs-number,
.apprise-config-highlight .hljs-literal {
  color: #888c96 !important;
}

/* 6. Template variables use the same accent throughout the interface. */
.apprise-config-yaml .apprise-config-highlight .hljs-template-variable {
  color: var(--mobile-beta-accent) !important;
  font-weight: 600;
}

/* 7. Standard Text */
.apprise-config-highlight {
  color: #c1c3c9 !important;
}

/* =========================================
Highlight.js (general code blocks)
========================================= */
.hljs {
  background-color: #23262f;
  color: #c1c3c9;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #2cb6a6;
}

.hljs-literal,
.hljs-number,
.hljs-variable {
  color: #7de6da;
}

.hljs-string {
  color: #7de6da;
}

.hljs-section,
.hljs-title {
  color: #888c96;
}

.hljs-attribute,
.hljs-name,
.hljs-tag {
  color: #7de6da;
}

/* =========================================
Notifications — SweetAlert2
========================================= */
.swal2-popup {
  background-color: #23262f;
  color: #edeef3;
}

.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container {
  color: #edeef3;
}

.swal2-popup .swal2-actions .swal2-styled {
  border-radius: 0.42rem;
  font-weight: 600;
  box-shadow: none !important;
}

.swal2-popup .swal2-confirm.swal2-styled {
  background-color: #2cb6a6 !important;
  color: #0f1e1c !important;
}

.swal2-popup .swal2-confirm.swal2-styled:hover,
.swal2-popup .swal2-confirm.swal2-styled:focus {
  background-color: #38c8b8 !important;
}

.swal2-popup .swal2-cancel.swal2-styled {
  background-color: #34383f !important;
  color: #c1c3c9 !important;
  border: 1px solid #555a62 !important;
}

.swal2-popup .swal2-cancel.swal2-styled:hover,
.swal2-popup .swal2-cancel.swal2-styled:focus {
  background-color: #3f444d !important;
  color: #edeef3 !important;
}

/* Keep dialog controls readable when Materialize changes hover/focus states. */
.apprise-dialog-close:hover,
.apprise-dialog-close:focus,
.swal2-popup .swal2-close:hover,
.swal2-popup .swal2-close:focus {
  border-color: #888c96 !important;
  color: #0d0f12 !important;
  background: #6f7582 !important;
}

.mobile-beta-dialog__steps a.mobile-beta-dialog__primary,
.mobile-beta-dialog__steps a.mobile-beta-dialog__primary:hover,
.mobile-beta-dialog__steps a.mobile-beta-dialog__primary:focus {
  color: #071b19 !important;
  background: #2cb6a6 !important;
}

.notify-attachments-list .attachment-chip {
  background-color: #23262f;
  color: #c1c3c9;
}

/* SweetAlert2 — log colouring */
.swal2-popup .notify-log-panel {
  background-color: var(--notify-log-bg);
}

.swal2-popup .logs .log_DEBUG {
  color: #7f9bb3;
}

.swal2-popup .logs .log_INFO {
  color: #b5e07a;
}

.swal2-popup .logs .log_WARNING {
  color: #ffc861;
}

.swal2-popup .logs .log_ERROR {
  color: #ff8080;
  font-weight: 600;
}

.swal2-popup .logs .log_CRITICAL,
.swal2-popup .logs .log_FATAL {
  color: #ff5555;
  font-weight: 700;
}

.swal2-popup .logs .log_TRACE {
  color: #6a9fb5;
  font-style: italic;
}

.swal2-popup .logs .log_DEBUG .log_level {
  color: #8ba9c2;
}

.swal2-popup .logs .log_INFO .log_level {
  color: #b5e07a;
}

.swal2-popup .logs .log_WARNING .log_level {
  color: #ffc861;
}

.swal2-popup .logs .log_ERROR .log_level,
.swal2-popup .logs .log_CRITICAL .log_level,
.swal2-popup .logs .log_FATAL .log_level {
  color: #ff8080;
}

.swal2-popup .logs .log_TRACE .log_level {
  color: #7faec2;
}