/*
 * ═══════════════════════════════════════════════════════════
 *   "EMERALD & AMBER" — Brand Theme for Indico
 * ═══════════════════════════════════════════════════════════
 *
 *   Primary:    Deep emerald green (#347DB0)
 *   Accent:     Warm amber (#d97706) for hover & contrast
 *   Header:     Dark forest (#000D14)
 *   Surfaces:   Warm mint tints
 *
 *   This theme overrides both CSS custom properties (new
 *   design system) AND hardcoded SCSS-compiled colors
 *   (legacy components) to achieve full visual coverage.
 */


/* ─────────────────────────────────────────────────────────
 * 1. CSS CUSTOM PROPERTIES (new design system components)
 * ───────────────────────────────────────────────────────── */

body {
  /* Primary emerald family */
  --accent-color: #347DB0;
  --accent-secondary-color: #347088;
  --accent-highlight-color: #004062;
  --accent-border-color: #000D14;

  /* Links */
  --clickable-text-color: #347DB0;
  --clickable-text-highlight-color: #347088;
  --clickable-text-active-color: #D30028;
  --clickable-text-used-color: #6b21a8;

  /* Surfaces */
  --surface-accent-color: #347DB0;
  --surface-accent-secondary-color: #ccc;

  /* Controls */
  --control-alt-clickable-surface-color: #347DB0;
  --control-alt-clickable-surface-focus-color: #004062;
  --control-alt-border-color: #000D14;

  /* Tags */
  --tag-generic-color: #347DB0;

  /* Menus */
  --menu-text-color: #347DB0;
  --menu-text-hover-color: #347088;
}


/* ─────────────────────────────────────────────────────────
 * 2. LEGACY COLOR OVERRIDES
 *    Indico compiles SCSS to hardcoded hex values.
 *    We must override each one with CSS selectors.
 * ───────────────────────────────────────────────────────── */


/* — Page header (the top bar with logo & session controls) — */

.page-header {
  background-color: #000D14 !important;
}


/* — Links (global) — */
/* Original: #09c / #0099cc ($blue) and #0b63a5 ($link) */

a {
  color: #347DB0;
}

a:hover,
a:active {
  color: #004062;
}


/* — Highlight buttons (.i-button.highlight) — */
/* Original: bg #09c, border #007cac, hover #0086b3 */

.i-button.highlight,
.action-button.highlight {
  background: #347DB0 !important;
  border-color: #004062 !important;
  color: #f0fdf4 !important;
}

.i-button.highlight:hover,
.i-button.highlight:focus,
.action-button.highlight:hover {
  background: #004062 !important;
  border-color: #000D14 !important;
}

.i-button.highlight:active {
  background: #000D14 !important;
}

/* Highlight button text-only variants */
.i-button.highlight.borderless,
.i-button.highlight.text-color {
  color: #347DB0 !important;
  background: transparent !important;
}

.i-button.highlight.borderless:hover,
.i-button.highlight.text-color:hover {
  color: #004062 !important;
}


/* — Icon buttons & action links with blue color — */

.i-button.icon-only.highlight::before,
.i-button.highlight::before {
  color: #f0fdf4 !important;
}


/* — Side menu — */
/* Original active: #005272, link: #007cac */

.side-menu ul.menu-items > li a.title {
  color: #347DB0;
}

.side-menu ul.menu-items > li.active a.title {
  color: #000D14;
}

.side-menu ul.menu-items > li:not(.active) a.title:hover {
  color: #004062;
}


/* — Category navigation — */

.categorynav .category-list .item.current-category .title {
  color: #347DB0;
}


/* — Step wizard (bootstrap, setup pages) — */

.step-wrapper .step-icon {
  background-color: #000D14 !important;
}

.bootstrap-form .step-wrapper .step-container .step-title {
  color: #000D14;
}


/* — Progress bars — */

.i-progress > .i-progress-bar {
  background-color: #347DB0 !important;
}


/* — Message boxes & corner messages — */

.corner-message.highlight {
  border-color: #347DB0;
}

.highlight-message-box .icon {
  color: #347DB0;
}

div.announcement-bar:not([hidden]).highlight .close-button {
  color: #347DB0;
}


/* — Badges & contrib types — */

.contrib-type,
.i-plugins-list > .i-badges-list > .i-badge,
.i-requests-list > .i-badge.i-request-none {
  background-color: #347DB0 !important;
}


/* — List filters — */

.list-filter .i-label.title-wrapper:not(.striped) {
  border-color: #347DB0;
}

.list-filter .i-label.title-wrapper:not(.striped) > .title {
  color: #347DB0;
}

.list-filter .i-label.title-wrapper:not(.striped) + .filter {
  border-color: #347DB0;
}


/* — Main page list (category event listings) — */

.main-page-list a {
  color: #347DB0;
}

.main-page-list a:hover {
  color: #347088;
}


/* — Timeline items — */

.i-timeline-item .i-timeline-item-box .i-box-header .i-box-title {
  color: #347DB0;
}


/* — Datepicker — */

.ui-datepicker .ui-datepicker-header {
  color: #347DB0;
}

.ui-datepicker-trigger:active::before {
  color: #347DB0;
}


/* — Checkbox styling — */

.circle-checkbox:checked + label::before {
  background-color: #347DB0 !important;
  border-color: #004062 !important;
}

.circle-checkbox:hover:checked:not(:disabled) + label::before {
  border-color: #000D14 !important;
}


/* — Import & event titles — */

.import-event-title,
.import-event-dates {
  color: #347DB0;
}


/* — Error box headings (reuse brand color) — */

.error-box h1 {
  color: #347DB0;
}


/* — Language selector — */

#language-list button:not(:disabled) {
  color: #347DB0;
}


/* — Speaker/person lists — */

.speaker-list .speaker-item::before,
.speaker-list .speaker-item-inline::before {
  color: #347DB0;
}


/* — Indico-blue accent ($indico-blue: #00a4e4) — */
/* Used sparingly for selection highlights */

.i-label.highlight,
.label.highlight {
  background-color: #10b981 !important;
  color: white !important;
}


/* — Semantic highlight color overrides — */
/* Original $blue: #09c used in semantic-background(highlight) */

.semantic-background.highlight,
.i-tag.highlight {
  background-color: #ccc !important;
  color: #000D14 !important;
}


/* — Form focus states — */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: #347DB0 !important;
  box-shadow: 0 0 0 1px #347DB033;
}


/* — Session bar (top-right login/user controls) — */

.session-bar a {
  color: #ccc;
}

.session-bar a:hover {
  color: #efefef;
}


/* ─────────────────────────────────────────────────────────
 * 3. SEMANTIC UI COMPONENT OVERRIDES
 * ───────────────────────────────────────────────────────── */

/* SUI primary buttons */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: #347DB0 !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background-color: #004062 !important;
}

.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background-color: #000D14 !important;
}

/* SUI links/labels */
.ui.label.primary,
a.ui.label:hover {
  background-color: #347DB0 !important;
  color: white !important;
}

/* SUI header/loader colors */
.ui.green.header,
.ui.primary.header {
  color: #347DB0 !important;
}

/* SUI active menu items */
.ui.menu .active.item {
  border-color: #347DB0 !important;
}

/* SUI checkbox */
.ui.toggle.checkbox input:checked ~ label::before {
  background-color: #347DB0 !important;
}


/* ─────────────────────────────────────────────────────────
 * 4. SELECTION & FOCUS INDICATORS
 * ───────────────────────────────────────────────────────── */

::selection {
  background-color: #a7f3d0;
  color: #000D14;
}

:focus-visible {
  outline-color: #347DB0;
}