/*
 * Apprise API — Light Theme
 *
 * Colour palette derived from the Apprise documentation site (Starlight):
 *
 *   --sl-color-bg             #ffffff       page background
 *   --sl-color-bg-nav         #f6f7fa       nav / sidebar background
 *   --sl-color-bg-inline-code #edeef3       subtle lifted surface (gray-6)
 *   --sl-color-gray-5         #c1c3c9       borders, dividers
 *   --sl-color-gray-4         #888c96       muted / placeholder text
 *   --sl-color-gray-3         #555a62       secondary text
 *   --sl-color-gray-2         #34383f       primary text
 *   --sl-color-gray-1         #23262f       headings / strong text
 *   --sl-color-accent         #148c80       brand teal (interactive)
 *   --sl-color-accent-high    #0f5f57       darker teal (hover / active)
 *   --sl-color-accent-low     #c8f0ea       tint (selected states, tints)
 */

/* =========================================
Support Banner
========================================= */
.support-banner {
  background-color: rgba(20, 140, 128, 0.07);
  color: #0f5f57;
  border-bottom: 1px solid rgba(20, 140, 128, 0.15);
}

.support-banner a {
  color: #148c80;
}

.support-banner-close {
  color: #148c80;
}

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

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

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

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

i.material-icons:hover {
  color: #23262f;
}

/* =========================================
Footer
========================================= */
.page-footer {
  background-color: #0f5f57;
  color: #c8f0ea;
}

.page-footer-legal {
  border-top: 1px solid #c1c3c9;
  color: #6f7582;
  opacity: 1;
}

.page-footer-legal a {
  color: #0f5f57 !important;
  font-weight: 600;
}

.page-footer-legal hr {
  border-color: #c1c3c9;
}

/* =========================================
Global Typography
========================================= */
em {
  color: #148c80;
}

pre code {
  background-color: #edeef3 !important;
  color: #34383f;
}

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

.url-disabled {
  color: #8B0000;
}

.no-config .info {
  color: #148c80;
}

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

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

.review-empty-card {
  background-color: #f6f7fa;
  border-color: #c1c3c9;
}

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

.loaded-config-heading-status-text {
  background-color: #e6f5f2;
  border-color: #9fd6ce;
  color: #0f5f57;
}

.loaded-config-tip {
  background-color: #f6f7fa;
  border-color: #d8d9df;
  color: #555a62;
}

.api-details .plugin-index {
  color: #555a62;
  background-color: #ffffff;
  border-color: #d8d9df;
}

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

.api-details .collapsible-header {
  background-color: #edeef3;
  color: #34383f;
}

.api-details .collapsible-header:hover {
  background-color: #ffffff;
  color: #0f5f57;
}

.api-details .collapsible>li.active>.collapsible-header {
  background-color: #ffffff;
  color: #0f5f57;
  border-bottom-color: #c1c3c9;
}

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

.api-details .plugin-chevron {
  color: #888c96;
}

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

.api-details .plugin-service-btn {
  color: #34383f !important;
  border-color: #c1c3c9;
  background-color: #f6f7fa;
}

.api-details .plugin-service-btn:hover {
  color: #0f5f57 !important;
  border-color: #9dd6cf;
  background-color: #e5f4f2;
}

.api-details .plugin-service-btn--external {
  color: #0f5f57 !important;
  border-color: #9fd6ce;
  background-color: #e6f5f2;
}

.api-details .plugin-service-btn--external:hover {
  color: #0c4f49 !important;
  border-color: #79bdb3;
  background-color: #d4eee8;
}

#overview strong {
  color: #148c80;
  background-color: #edeef3;
}

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

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

.api-status-icon.status-ok {
  color: #148c80;
}

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

/* =========================================
Links
========================================= */
.collection a.collection-item,
a,
a:hover,
a.active {
  color: #148c80 !important;
}

/* Footer links on light legal footer need strong contrast */
.page-footer-legal,
.page-footer-legal small {
  color: #616b7a !important;
}

.page-footer-legal a {
  color: #0f5f57 !important;
}

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

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

.tab-chip-external {
  background-color: #e6f5f2;
  border-color: #9fd6ce;
  color: #0f5f57;
}

.tab-chip-external .material-icons {
  color: #148c80;
}

/* =========================================
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: #0550ae;
  font-style: normal;
}

/* hljs palette — aligned with the site's teal/gray palette:
   keywords/builtins → #148c80  (brand teal)
   strings/numbers   → #0f5f57  (dark teal)
   comments          → #888c96  (muted gray, italic)
   plain text        → #34383f  (standard body text) */
pre code.bash.hljs,
pre code.hljs {
  color: #34383f;
  background-color: #edeef3;
}

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

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

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

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

/* 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: #0f5f57;
}

/* 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: #555a62;
}

/* 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: #148c80;
}

/* 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: #0f5f57;
}

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

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

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

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

.config-id-bar .config-id-label {
  color: #555a62;
}

code.config-id {
  color: #0f5f57;
  background-color: #ffffff;
  border: 1px solid #c1c3c9;
  padding: 0.15em 0.45em;
  border-radius: 0.3rem;
}

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

/* Trigger input */
.select-wrapper input.select-dropdown {
  color: #34383f;
  border-bottom: 1px solid #c1c3c9 !important;
}

.select-wrapper input.select-dropdown:focus {
  border-bottom: 1px solid #148c80 !important;
}

/* Caret arrow */
.select-wrapper .caret {
  fill: #555a62;
}

/* Dropdown list container */
.dropdown-content {
  background-color: #ffffff;
  border: 1px solid #c1c3c9;
  border-radius: 0.4rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* Hover */
.dropdown-content li>a:hover,
.dropdown-content li>span:hover,
.dropdown-content li:hover>span {
  background-color: #edeef3 !important;
  color: #0f5f57 !important;
}

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

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

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

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

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

/* Inactive tabs: surface-coloured, rounded top corners */
body .tabs .tab a {
  background-color: #f6f7fa !important;
  color: #626b79 !important;
  border: 1px solid #c7ccd6 !important;
  border-bottom: none !important;
  margin-bottom: -1px;
}

body .tabs .tab a i {
  color: inherit !important;
}

/* Hover */
body .tabs .tab a:hover {
  background-color: #eef8f6 !important;
  color: #11796f !important;
  border-color: #9ccdc6 !important;
  border-bottom: none !important;
}

/* Active — white bg 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: #e6f5f2 !important;
  color: #0f6f66 !important;
  border: 1px solid #148c80 !important;
  border-bottom: 2px solid #ffffff !important;
}

/* Indicator: hide it — a.active is reliable enough with the HTML
   class on load and the border treatment gives a clear active 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: #f2f4f8 !important;
  color: #a9b0bc !important;
  cursor: default;
  border-color: #d9dee6 !important;
  border-bottom: none !important;
  opacity: 0.9;
}

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

/* =========================================
Collection & Hover States
========================================= */
.collection a.collection-item:not(.active):hover,
.tabs .tab a:focus,
.tabs .tab a:focus.active {
  background-color: #eef8f6 !important;
}

/* =========================================
Side Nav
========================================= */
:root {
  --apprise-mini-badge-bg: #148c80;
  --apprise-mini-badge-ring: #0f5f57;
  --apprise-mini-badge-horn: #eaf3f2;
  --apprise-mini-badge-horn-stroke: #c5d2d0;
  --apprise-logo-wave: #9fb0b3;
  --apprise-logo-body-1: #39c0b7;
  --apprise-logo-body-2: #0f5f57;
  --apprise-logo-text-1: #1a7c74;
  --apprise-logo-text-2: #0b4d47;
  --menu-icon-accent: #148c80;
  --menu-icon-coffee: #8b3a1a;
  --menu-icon-heart: #c0392b;
}

.side-nav-group {
  background-color: #f6f7fa;
  border: 1px solid #d8d9df;
}

.side-nav-label {
  color: #7b8493;
}

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

.side-nav-item:hover {
  background-color: #edeef3;
  color: #148c80 !important;
}

.side-nav-group--support {
  border-color: #e8d5d5;
  background-color: #fdf8f8;
}

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

.side-nav-group--support .side-nav-item:hover {
  background-color: #faeaea;
  color: #a83232 !important;
}

/* =========================================
Cards & Lists
========================================= */
#url-list .card-panel {
  box-shadow: 0 8px 18px rgba(34, 42, 55, 0.08);
  background-color: #edeef3;
  border-color: #c9ccd5;
}

#url-list .card-panel:hover {
  border-color: #a8b0be;
  box-shadow: 0 10px 20px rgba(34, 42, 55, 0.12);
}

#url-list .url-header code.url-text {
  background-color: #ffffff;
  color: #34383f;
  border: 1px solid #d5d9e2;
}

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

#url-list .card-panel .url-id {
  color: #888c96;
}

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

.btn:focus,
.btn-large:focus,
.btn-small:focus,
.btn-floating:focus,
.btn-large:hover,
.btn-small:hover,
.btn:hover {
  color: #0f5f57 !important;
  background-color: #c8f0ea;
}

.btn-flat {
  background-color: #edeef3;
  color: #148c80;
}

#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 {
  color: #0f5f57 !important;
}

#notify .notify-form-actions .btn-clear-form {
  background-color: #f3f5f8;
  border-color: #cdd3dc;
  color: #5d6675;
}

#notify .notify-form-actions .btn-clear-form:hover,
#notify .notify-form-actions .btn-clear-form:focus {
  background-color: #e9edf3;
  border-color: #b7c0cc;
  color: #3f4856 !important;
}

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

.card-panel.selected {
  background-color: #c8f0ea !important;
  border-color: #7fc9be !important;
}

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

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

#url-list .card-panel.url-item-disabled {
  background-color: #fff7ee !important;
  border-color: #d39a58 !important;
  box-shadow: inset 0 0 0 1px rgba(190, 122, 31, 0.14);
  opacity: 0.94;
}

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

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

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

#url-list .card-panel.url-item-disabled .url-plugin-title {
  color: #9f6112;
  opacity: 0.9;
}

#url-list .card-panel.url-item-disabled code.url-text {
  color: #6b5b47;
  background-color: #fff2e1;
}

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

.file-selected {
  color: #148c80;
  background-color: #edeef3;
}

#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(0, 0, 0, 0.05);
}

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

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

#url-list .review-test-btn[disabled],
#url-list .review-test-btn[disabled]:hover,
#url-list .review-test-btn[disabled]:focus {
  color: #8b93a0;
  background-color: #eff2f6;
  border-color: #d7dde6;
}

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

.api-welcome .collapsible-header {
  background-color: #edeef3;
  color: #34383f;
}

.api-welcome .collapsible-header i.material-icons {
  color: #148c80;
}

.api-welcome .collapsible-header:hover {
  background-color: #ffffff;
  color: #0f5f57;
}

.api-welcome .collapsible>li.active>.collapsible-header {
  background-color: #ffffff;
  color: #0f5f57;
  border-bottom-color: #c1c3c9;
}

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

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

#health-check .health-check-title {
  color: #2f2d33 !important;
  border-bottom-color: #e6dadd;
}

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

#health-check .health-check-list li {
  background-color: #fffdfd;
  border-color: #ecdfe2;
}

#health-check .health-check-more {
  background-color: #fffdfd;
  border-color: #ecdfe2;
}

#health-check .health-check-more summary {
  color: #0f6f66;
}

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

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

.apprise-config-editor .apprise-config-highlight {
  background-color: #ffffff !important;
  color: #34383f;
}

/* 1. URL values — brand accent teal, the primary content */
.apprise-config-highlight .hljs-string,
.apprise-config-highlight .hljs-symbol,
.apprise-config-highlight .hljs-link {
  color: #148c80 !important;
}

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

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

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

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

/* 6. Standard Text */
.apprise-config-highlight {
  color: #34383f !important;
}

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

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #148c80;
}

.hljs-literal,
.hljs-number,
.hljs-variable {
  color: #0f5f57;
}

.hljs-string {
  color: #0f5f57;
}

.hljs-section,
.hljs-title {
  color: #555a62;
}

.hljs-attribute,
.hljs-name,
.hljs-tag {
  color: #888c96;
}

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

.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: #148c80 !important;
  color: #ffffff !important;
}

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

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

.swal2-popup .swal2-cancel.swal2-styled:hover,
.swal2-popup .swal2-cancel.swal2-styled:focus {
  background-color: #e3e8ef !important;
  color: #34383f !important;
}

.copy-toast.swal2-popup {
  background-color: #edeef3;
  color: #34383f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  padding: .35rem .8rem;
}

.copy-toast .swal2-title {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
}

.notify-attachments-list .attachment-chip {
  background-color: #edeef3;
  color: #148c80;
}

/* SweetAlert2 — log colouring */
.swal2-popup .notify-log-panel {
  background-color: #edeef3;
}

.swal2-popup .logs .log_DEBUG {
  color: #607d8b;
}

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

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

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

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

.swal2-popup .logs .log_TRACE {
  color: #1976d2;
  font-style: italic;
}