/*
 * Fundmetric Wagtail Admin Theme
 *
 * A subtle enhancement to Wagtail's default theme
 * using Fundmetric brand colors as accents.
 *
 * Brand Colors:
 * - Teal (Primary): #2FBFA5
 * - Magenta (Accent): #C942B5
 *
 * NOTE: This theme is intentionally light-touch.
 * We only override accent colors, not structural styles.
 */

/* ============================================
   SIDEBAR ACCENT
   ============================================ */

/* Subtle teal accent on active menu items */
.sidebar-menu-item--active > a,
.sidebar-menu-item--active > button {
    border-left: 3px solid #2FBFA5 !important;
}

.w-theme-dark .sidebar-menu-item--active > a,
.w-theme-dark .sidebar-menu-item--active > button {
    border-left-color: #3DD4B8 !important;
}

/* ============================================
   PRIMARY BUTTONS - Teal accent
   Only target specific primary action buttons
   ============================================ */

/* Main save/publish buttons */
button[type="submit"].action-save,
.w-btn.w-btn--primary {
    background-color: #2FBFA5 !important;
    border-color: #2FBFA5 !important;
    color: #ffffff !important;
}

button[type="submit"].action-save:hover,
.w-btn.w-btn--primary:hover {
    background-color: #259485 !important;
    border-color: #259485 !important;
}

/* ============================================
   DELETE/DANGER BUTTONS - Magenta accent
   ============================================ */

.w-btn--danger,
button.action-delete {
    background-color: #C942B5 !important;
    border-color: #C942B5 !important;
    color: #ffffff !important;
}

.w-btn--danger:hover,
button.action-delete:hover {
    background-color: #A83599 !important;
    border-color: #A83599 !important;
}

/* ============================================
   FORM FOCUS STATES
   ============================================ */

input:focus,
textarea:focus,
select:focus,
.tagit:focus-within {
    border-color: #2FBFA5 !important;
    box-shadow: 0 0 0 2px rgba(47, 191, 165, 0.2) !important;
    outline: none !important;
}

.w-theme-dark input:focus,
.w-theme-dark textarea:focus,
.w-theme-dark select:focus {
    border-color: #3DD4B8 !important;
    box-shadow: 0 0 0 2px rgba(61, 212, 184, 0.25) !important;
}

/* ============================================
   TABS - Active state
   ============================================ */

.w-tabs__tab[aria-selected="true"],
.tab-nav a.active {
    border-bottom-color: #2FBFA5 !important;
}

.w-theme-dark .w-tabs__tab[aria-selected="true"],
.w-theme-dark .tab-nav a.active {
    border-bottom-color: #3DD4B8 !important;
}

/* ============================================
   PROGRESS/LOADING INDICATORS
   ============================================ */

.progress-bar,
.w-progress__bar {
    background-color: #2FBFA5 !important;
}

/* ============================================
   CHOOSER SELECTED STATE
   ============================================ */

.chooser .chosen {
    border-left: 3px solid #2FBFA5;
}

.w-theme-dark .chooser .chosen {
    border-left-color: #3DD4B8;
}

/* ============================================
   PAGE EXPLORER - Hover accent
   ============================================ */

.listing tbody tr:hover {
    border-left: 3px solid #2FBFA5;
}

.w-theme-dark .listing tbody tr:hover {
    border-left-color: #3DD4B8;
}

/* ============================================
   MINIMAP/OUTLINE - Active indicator
   ============================================ */

.w-minimap__item--active::before {
    background-color: #2FBFA5 !important;
}

/* ============================================
   TOGGLE SWITCHES
   ============================================ */

.w-switch__toggle:checked {
    background-color: #2FBFA5 !important;
}

.w-theme-dark .w-switch__toggle:checked {
    background-color: #3DD4B8 !important;
}

/* ============================================
   MESSAGES - Accent colors on borders only
   ============================================ */

.messages .success,
.w-message--success {
    border-left-color: #2FBFA5 !important;
}

.messages .success::before,
.w-message--success .icon {
    color: #2FBFA5 !important;
}

/* Error messages use magenta */
.messages .error,
.w-message--error {
    border-left-color: #C942B5 !important;
}

/* ============================================
   DROPDOWN MENU - Hover state
   ============================================ */

.c-dropdown__item:hover,
.c-dropdown__item:focus {
    background-color: rgba(47, 191, 165, 0.1) !important;
}

.w-theme-dark .c-dropdown__item:hover,
.w-theme-dark .c-dropdown__item:focus {
    background-color: rgba(61, 212, 184, 0.15) !important;
}

/* ============================================
   SEARCH INPUT FOCUS
   ============================================ */

.w-field__input:focus-within {
    border-color: #2FBFA5 !important;
}

.w-theme-dark .w-field__input:focus-within {
    border-color: #3DD4B8 !important;
}

/* ============================================
   SELECT DROPDOWNS - Dark theme fix
   Ensures dropdown options are visible in dark mode
   ============================================ */

.w-theme-dark select,
.w-theme-dark .w-field select {
    color-scheme: dark;
    background-color: var(--w-color-surface-field, #1e1e1e);
    color: var(--w-color-text-context, #ffffff);
}

.w-theme-dark select option {
    background-color: var(--w-color-surface-menus, #2d2d2d);
    color: var(--w-color-text-context, #ffffff);
}