/*
FRM Calendar - Frontend CSS v2.0 (Dynamické barvy a Kadence integrace)

*/

/* CSS Custom Properties pro kalendar */
:root {
    --frm-calendar-border-radius: 4px;
    --frm-calendar-transition: all 0.3s ease;
    --frm-calendar-shadow-hover: 0 4px 12px rgba(0,0,0,0.15);
    --frm-calendar-shadow-focus: 0 0 0 3px var(--global-palette1, #0073aa);
    --frm-calendar-button-padding: 6px 12px;
    --frm-calendar-button-font-size: 13px;
    --frm-calendar-default-bg: var(--global-palette5, #6c757d);
    --frm-calendar-default-color: var(--global-palette9, #ffffff);
    --frm-calendar-accent: var(--global-palette1, #0073aa);
}

/* Dark mode adaptace */
@media (prefers-color-scheme: dark) {
    :root {
        --frm-calendar-shadow-hover: 0 4px 12px rgba(0,0,0,0.3);
        --frm-calendar-default-bg: var(--global-palette4, #495057);
    }
}

/* Toggle switch styl (sjednocený pro oba systémy) */
.switch {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  height: 20px;
  cursor: pointer;
  gap: 8px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
  flex-shrink: 0;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: var(--global-palette1);
}

.switch input:checked + .slider:before {
  transform: translateX(16px);
}

.switch span {
  margin: 0;
}

/* --- Tabulator Pouze Barvy & Opravy (v3) --- */

body.frm-iframe-body {
    background: var(--global-palette9) !important;
    padding: 1px !important;
    margin: 0 !important;
}


/* KOMPLETNÍ KALENDÁŘOVÝ CSS */

/* FullCalendar - custom styling */

.fc .fc-scrollgrid-section-sticky > * {
    background:  transparent;
    position: sticky;
    z-index: 3;
}

/* Plně přizpůsobit zobrazení události */
.fc-daygrid-event, .fc-list-event {
    display: block !important;
    flex-direction: column !important;
    margin: 1px 0 0 0 !important; /* Redukovaný margin dole */
    padding: 2px !important;
    border-radius: 3px !important;
    border-left-width: 0 !important;
}

/* Vytvořit prostor pro datum */
.fc-dayGridMonth-view .fc-daygrid-day-top {
    position: relative !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 5;
    padding: 2px 4px;
    height: 20px; /* Fixní výška pro oblast data */
}

/* Zajistit, aby události začínaly až pod datem */
.fc-daygrid-day-events {
    margin-top: 6px !important; /* Začít události pod oblastí data */
    padding-top: 2px;
}

/* Zvýraznit čísla dnů - text zdědí barvu z okolí, pozadí transparentní */
.fc-daygrid-day-number {
    font-weight: bold;
    background-color: transparent;
    border-radius: 3px;
    padding: 1px 3px;
    display: inline-block;
    /* Barva textu bude pravděpodobně zděděna z .fc-day-today nebo .fc-col-header-cell-cushion,
       které by měly respektovat paletu textu Kadence (např. --global-palette3) */
}

/* Zajistit, aby jméno bylo na novém řádku */
.fc-event-title {
    display: block !important;
    width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold !important;
    margin-bottom: 1px !important;
    padding: 1px 2px !important;
    line-height: 1.2 !important;
    /* Barva textu bude řízena třídou event-status-* nebo title-bg-* níže */
}

.fc-event-creator {
    display: block !important;
    width: 100% !important;
    font-size: 10px !important;
    font-style: italic !important;
    opacity: 0.9 !important;
    margin-top: 1px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    clear: both !important;
    padding: 1px 2px !important;
    line-height: 1.1 !important;
    /* Color and text-shadow are now handled dynamically by JavaScript */
}

/* Dynamické barvy stavů událostí - generovány CSS generátorem */
.event-status-default {
    background-color: var(--global-palette5, #6c757d) !important;
    color: var(--global-palette9, #ffffff) !important;
    border-color: var(--global-palette6, #dee2e6) !important;
}

/* Fallback styly pro případ problémů s dynamickým CSS */
.event-status-novy,
.event-status-schvaleno,
.event-status-zamitnuto {
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* Dynamické pozadí pro title elementy - generovány CSS generátorem */
.title-bg-default {
    background-color: var(--global-palette5, #6c757d) !important;
    color: var(--global-palette9, #ffffff) !important;
    border-radius: 2px !important;
}

/* Base styly pro title bg elementy */
.title-bg-novy,
.title-bg-schvaleno,
.title-bg-zamitnuto,
[class^="title-bg-"] {
    border-radius: 2px !important;
    transition: all 0.3s ease;
    position: relative;
}

/* Legacy event styling removed - colors now handled dynamically by CSS generator */

/* Base styly pro invoice labels - colors handled by CSS generator */
[class*="invoice-"] {
    transition: all 0.3s ease;
    border-radius: 4px;
}

/* Tooltip styling */
.fc-event-tooltip {
    position: fixed;
    background-color: var(--global-palette2, #4285f4) !important; /* Sekundární barva - světlejší než primary */
    color: var(--global-palette9, #ffffff) !important; /* Bílý text */
    border: none !important;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 999999; /* Zvýšený z-index pro lepší viditelnost */
    max-width: 300px;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important; /* Výraznější stín */
}

/* Modální okno styling */
.kalendar-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Kadence může mít vlastní proměnnou pro overlay, např. var(--kadence--color-overlay-base) */
    background: var(--kadence-color-overlay, rgba(0,0,0,0.5)) !important; /* Fallback na tmavý overlay */
}

.kalendar-modal-content {
    position: relative;
    background: var(--global-palette9) !important; /* Hlavní barva pozadí (bílá/tmavá) */
    color: var(--global-palette3) !important; /* Hlavní textová barva */
    border-radius: 8px;
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Obecný stín */
    padding: 20px;
    z-index: 10000;
}

pre {
    background: var(--global-palette7) !important; /* Pozadí sekcí (světle šedá / tmavě šedá) */
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 0.9375rem;
    color: var(--global-palette3) !important; /* Hlavní textová barva */
    overflow: auto;
    padding: 1em;
    white-space: pre-wrap;
    line-height: 1.6;
    max-width: 100%;
}

.kalendar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--global-palette6) !important; /* Barva pro okraje/oddělovače */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.kalendar-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--global-palette3) !important; /* Hlavní textová barva */
}

.kalendar-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--global-palette5) !important; /* Středně šedá pro méně důležité prvky */
}

.kalendar-modal-body {
    font-size: 14px;
    color: var(--global-palette4) !important; /* Sekundární textová barva */
}

.kalendar-modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kalendar-modal-list li {
    margin-bottom: 10px;
}

.kalendar-modal-creator {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--global-palette3) !important; /* Hlavní textová barva */
}

.kalendar-modal-dates {
    margin-bottom: 10px;
    color: var(--global-palette4) !important; /* Sekundární textová barva */
}

/* Indikátor stavu v seznamu */
.kalendar-modal-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 5px;
    /* Barvy budou definovány specifickými .status-* třídami níže */
}

.kalendar-modal-footer {
    text-align: right;
    margin-top: 20px;
    border-top: 1px solid var(--global-palette6) !important; /* Barva pro okraje/oddělovače */
    padding-top: 10px;
}

/* Menší tlačítka */
.kalendar-modal-footer button {
    background-color: var(--global-palette1) !important; /* Primární akcentní barva */
    color: var(--global-palette1-contrast, var(--global-palette9)) !important; /* Kontrastní text k paletě 1, fallback na paletu 9 */
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
    font-size: 13px;
}
.kalendar-modal-footer button:hover {
    background-color: var(--global-palette2) !important; /* Sekundární akcentní barva pro hover */
    /* Barva textu by měla zůstat stejná, pokud je kontrast dostatečný i pro paletu 2 */
}


/* Dynamické barvy stavů pro modální okna - generovány CSS generátorem */
.status-default {
    background-color: var(--global-palette5, #6c757d) !important;
    color: var(--global-palette9, #ffffff) !important;
}

/* Base styly pro všechny status elementy */
.status-novy,
.status-schvaleno,
.status-zamitnuto,
[class^="status-"] {
    transition: all 0.3s ease;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* Optimalizace pro mobilní zařízení - VYLEPŠENO */
@media (max-width: 768px) {
    /* Pro zobrazení celého měsíce na mobilu */
    .fc {
        height: auto !important;
    }
    
    .fc .fc-scrollgrid-liquid {
        height: auto !important;
    }
    
    .fc-view-harness {
        height: auto !important;
        min-height: 500px !important;
    }
    
    /* Kompaktnější hlavička kalendáře */
    .fc-header-toolbar {
        flex-wrap: wrap;
        gap: 5px;
    }
    
    /* Menší tlačítka v hlavičce */
    .fc-button {
        padding: 0.2em 0.4em !important;
        font-size: 0.8em !important;
        /* Barvy tlačítek FullCalendaru by měly být řízeny jeho vlastním nastavením nebo obecnými styly tlačítek Kadence,
           pokud nejsou přepsány zde specificky. */
    }
    
    .fc-prev-button, .fc-next-button {
        padding: 0.2em 0.3em !important;
    }
    
    /* Menší nadpisy */
    .fc-toolbar-title {
        font-size: 1.2em !important;
    }
    
    /* Menší čísla dnů */
    .fc-daygrid-day-number {
        font-size: 0.9em;
        padding: 0 2px;
    }
    
    /* Menší výška oblasti data */
    .fc-dayGridMonth-view .fc-daygrid-day-top {
        height: auto;
        min-height: 14px;
        padding: 1px 2px;
    }
    
    /* Zmenšit mezery mezi událostmi */
    .fc-daygrid-day-events {
        margin-top: 3px !important;
        padding-top: 1px;
    }
    
    /* Kompaktnější buňky */
    .fc-daygrid-day-frame {
        padding: 0 !important;
    }
    
    /* Užší padding u kalendářních buněk na mobilu */
    .fc-daygrid-day {
        padding: 0 1px !important;
    }
    
    .fc-daygrid-day-events {
        padding-left: 1px !important;
        padding-right: 1px !important;
    }
    
    /* Responsive status buttony */
    .status-label {
        font-size: calc(var(--frm-calendar-button-font-size) - 2px);
        padding: calc(var(--frm-calendar-button-padding) * 0.7);
    }
    
    .status-radio-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 5px;
    }
    
    .status-radio {
        flex: 1;
        min-width: 0;
        text-align: center;
    }
    
    .status-radio .status-label {
        width: 100%;
        padding: 8px 4px;
        font-size: 11px;
    }
    
    /* Optimalizace modálního okna */
    .kalendar-modal-content {
        width: 98%;
        padding: 10px;
    }
    
    .kalendar-modal-header h2 {
        font-size: 1.2rem;
    }
    
    .kalendar-modal-body {
        font-size: 13px;
    }
    
    .kalendar-modal-footer button {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Skrytí admin baru v iframe */
body.iframe-mode {
    padding-top: 0 !important;
}

body.iframe-mode #wpadminbar,
body.iframe-mode #adminmenumain,
body.iframe-mode #adminmenuwrap,
body.iframe-mode #wpfooter {
    display: none !important;
}

body.iframe-mode #wpcontent {
    margin-left: 0 !important;
}

/* Rozšířený iframe */
.kalendar-modal-iframe {
    width: 100% !important;
    height: 600px !important; /* vyšší iframe */
    border: none !important;
}

/* Styly pro radio button pole s okamžitou aktualizací */
.status-radio-buttons {
    display: flex;
    grid-gap: 10px; /* nahrazeno gap pro modernější prohlížeče */
    gap: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.status-radio {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.status-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Dynamické styly pro status labely - základní struktura */
.status-label {
    display: inline-block;
    padding: var(--frm-calendar-button-padding);
    font-size: var(--frm-calendar-button-font-size);
    font-weight: 600;
    text-align: center;
    border-radius: var(--frm-calendar-border-radius);
    transition: var(--frm-calendar-transition);
    border: 1px solid transparent;
    position: relative;
    overflow: visible; /* Changed from hidden to visible for checkmark */
    cursor: pointer;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1.2;
}

/* Default fallback styly */
.status-label:not([class*="-value-"]):not(.novy):not(.schvaleno):not(.zamitnuto) {
    background-color: var(--frm-calendar-default-bg) !important;
    color: var(--frm-calendar-default-color) !important;
    border-color: var(--global-palette6, #dee2e6);
}

/* Legacy podpora - bude nahrazena dynamickým CSS */
.status-label.novy,
.status-label.schvaleno,
.status-label.zamitnuto {
    /* Barvy budou přepsány dynamickým CSS generátorem */
}

.status-radio:hover {
    transform: translateY(-1px);
}

.status-radio:focus-within {
    outline: 2px solid var(--global-palette1, #0073aa);
    outline-offset: 2px;
    border-radius: 6px;
}

.status-radio.active {
    box-shadow: 0 0 0 3px var(--global-palette1, #0073aa) !important;
    transform: scale(1.02);
    position: relative;
}

.status-radio.active:hover {
    box-shadow: 0 0 0 3px var(--global-palette1, #0073aa), 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* Checkmark symbol for active status */
.status-radio.active .status-label::after {
    content: "✓";
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--global-palette1, #0073aa);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Enhanced status label hover states */
.status-label:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    filter: brightness(1.1);
}

.status-label:focus {
    outline: 2px solid var(--global-palette1, #0073aa);
    outline-offset: 2px;
}

.status-label:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Kadence může mít vlastní proměnné pro success/error, např. var(--kadence-color-success) */
.status-update-confirmation {
    margin-top: 10px;
    padding: 8px;
    background-color: var(--kadence-color-success-light, rgba(76, 175, 80, 0.1)) !important;
    border-left: 3px solid var(--kadence-color-success, #4caf50) !important;
    color: var(--kadence-color-success-dark, #387b3a) !important; /* Tmavší zelená pro lepší čitelnost */
    font-weight: bold;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
}

.status-update-error {
    margin-top: 10px;
    padding: 8px;
    background-color: var(--kadence-color-error-light, rgba(244, 67, 54, 0.1)) !important;
    border-left: 3px solid var(--kadence-color-error, #f44336) !important;
    color: var(--kadence-color-error-dark, #c62f27) !important; /* Tmavší červená pro lepší čitelnost */
    font-weight: bold;
    opacity: 1;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
}

.success-tick, .error-icon {
    font-size: 1.2em;
    margin-right: 5px;
    animation: pulse 1s infinite;
    /* Barva by měla být zděděna z rodiče (.status-update-confirmation / .status-update-error) */
    color: inherit !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#kalendar-modal-container { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important; 
    z-index: 999999 !important; 
    background: rgba(0,0,0,0.6) !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    padding:15px !important; 
    box-sizing:border-box !important; 
}

#kalendar-modal-container.hidden { display: none !important; }

#kalendar-modal-container .kalendar-modal-content { 
    background: white !important; 
    color: #333 !important; 
    padding: 15px 20px !important; 
    border-radius: 6px !important; 
    width: 90% !important; 
    max-width:1100px !important; 
    height: 90% !important; 
    display: flex !important; 
    flex-direction: column !important; 
    box-shadow: 0 7px 15px rgba(0,0,0,0.25) !important; 
}

#kalendar-modal-container .kalendar-modal-header { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    border-bottom: 1px solid #dee2e6 !important; 
    padding-bottom: 10px !important; 
    margin-bottom: 15px !important; 
}

#kalendar-modal-container .kalendar-modal-header h2 { 
    margin: 0 !important; 
    font-size: 1.25rem !important; 
}

#kalendar-modal-container .kalendar-modal-footer { 
    border-top: 1px solid #dee2e6 !important; 
    padding-top: 10px !important; 
    margin-top: auto !important; 
    text-align: right !important; 
}

#kalendar-modal-container .kalendar-modal-footer button { 
    margin-left: 10px !important; 
    padding: 8px 15px !important; 
    cursor: pointer !important; 
    border-radius: 4px !important; 
}

#kalendar-modal-container .kalendar-modal-iframe { 
    width: 100% !important; 
    flex-grow: 1 !important; 
    border: none !important; 
}

/* --- Styles for Split-Color Events --- */

.fc-event-main-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.fc-event-top-half,
.fc-event-bottom-half {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
}

.fc-event-top-half {
    top: 0;
}

.fc-event-bottom-half {
    bottom: 0;
}

.fc-event-content-wrapper {
    position: relative;
    z-index: 1;
    padding: 1px 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

.fc-event-title,
.fc-event-creator {
    /* Text styling now handled dynamically by JavaScript based on background colors */
    font-weight: bold;
}

/* .fc-event-creator styles are now handled in main section above */

/* Ensure the default event background is transparent so the halves are visible */
.fc-daygrid-event {
    background-color: transparent !important;
    border-color: transparent !important;
}

.fc-daygrid-event .fc-event-main {
    /* Remove default padding from FullCalendar as we handle it in our wrapper */
    padding: 0;
    background-color: transparent !important;
}

/* --- Color Legend Styles --- */
.frm-calendar-legend {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Desktop layout - sections side by side */
@media (min-width: 769px) {
    .frm-calendar-legend {
        flex-direction: row;
        gap: 30px;
    }
}

.legend-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-section h4 {
    margin: 0;
    color: var(--global-palette4, #666666);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.legend-item {
    display: inline-block;
}

.legend-color {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border: 1px solid rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.legend-color:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Mobile optimizations for legend */
@media (max-width: 768px) {
    .frm-calendar-legend {
        margin-top: 15px;
        gap: 12px;
    }
    
    .legend-section {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .legend-section h4 {
        font-size: 0.85rem;
    }
    
    .legend-items {
        gap: 6px;
    }
    
    .legend-color {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* --- User Filter Styles --- */
#frm-calendar-filter-container {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.75em;
}

#frm-calendar-filter-container .ss-main {
    min-width: 200px;
}

/* Hide on mobile */
@media (max-width: 767px) {
    #frm-calendar-filter-container {
        display: none !important;
    }
}

/* Kadence Theme Integration for SlimSelect */
.fc-toolbar .ss-main .ss-multi-selected {
    background-color: var(--global-palette8, #f0f0f0);
    border-color: var(--global-palette7, #dddddd);
    padding: 1px 5px 1px 1px;
    min-height: 30px; /* Match FC buttons height */
}

.fc-toolbar .ss-main .ss-multi-selected.ss-open-below {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.fc-toolbar .ss-main .ss-multi-selected .ss-values .ss-value {
    background-color: var(--global-palette2, #0073aa);
    color: var(--global-palette9, #ffffff);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
}

.fc-toolbar .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
    font-size: 14px;
    margin-left: 5px;
}

.fc-toolbar .ss-main .ss-content {
    background-color: var(--global-palette9, #ffffff);
    border-color: var(--global-palette6, #cccccc);
}

.fc-toolbar .ss-main .ss-content .ss-search input {
    background-color: var(--global-palette8, #f0f0f0);
    border-color: var(--global-palette7, #dddddd);
    color: var(--global-palette3, #555555);
}

.fc-toolbar .ss-main .ss-content .ss-list .ss-option.ss-highlighted {
    background-color: var(--global-palette1, #0073aa);
    color: var(--global-palette9, #ffffff);
}

.fc-toolbar .ss-main .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
    color: var(--global-palette4, #777777);
}

.fc-toolbar .ss-main .ss-content .ss-list .ss-option {
    color: var(--global-palette3, #555555);
}


/*
 * High-Specificity SlimSelect Override
 * ------------------------------------
 * These rules target the slim-select filter within this calendar plugin.
 * They use high-specificity selectors to override styles from both the
 * default slimselect.css and any conflicting styles from other plugins
 * like Formidable Forms, without needing !important.
 */

/* Container and main element: Override display:inline-block */
body #frm-calendar-filter-container .ss-main {
  display: flex;
  align-items: center;
}

/* Main select box styling for Kadence theme */
body #frm-calendar-filter-container .ss-multi-selected {
  background-color: var(--global-palette9, #ffffff);
  border: 1px solid var(--global-palette6, #cccccc);
  color: var(--global-palette3, #555555);
}

/* Placeholder text */
body #frm-calendar-filter-container .ss-single-selected .placeholder,
body #frm-calendar-filter-container .ss-multi-selected .ss-values .ss-placeholder {
  color: var(--global-palette4, #777777);
}

/* Selected items ("pills") */
body #frm-calendar-filter-container .ss-multi-selected .ss-values .ss-value {
  background-color: var(--global-palette1, #0073aa);
  color: var(--global-palette9, #ffffff);
  border: 1px solid var(--global-palette2, #005a87);
}

/* Dropdown container */
body #frm-calendar-filter-container .ss-content {
  background-color: var(--global-palette9, #ffffff);
  border: 1px solid var(--global-palette6, #cccccc);
}

/* Search input in dropdown */
body #frm-calendar-filter-container .ss-content .ss-search input {
  background-color: var(--global-palette8, #f0f0f0);
  border: 1px solid var(--global-palette7, #dddddd);
  color: var(--global-palette3, #555555);
}

/* Options in dropdown */
body #frm-calendar-filter-container .ss-content .ss-list .ss-option.ss-highlighted {
  background-color: var(--global-palette1, #0073aa);
  color: var(--global-palette9, #ffffff);
}

body #frm-calendar-filter-container .ss-content .ss-list .ss-option {
  color: var(--global-palette3, #555555);
}