/* Theme Variables CSS - Applied after main CSS to override with tenant themes */

/* FIX: Tabulator headers bold on load - apply immediately before tenant CSS loads */
.tabulator * {
  font-weight: 400 !important;
}
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col-content,
.tabulator .tabulator-header .tabulator-col-content .tabulator-col-title {
  font-weight: 400 !important;
  font-size: 18px !important;
}

/* FIX: Table name cells should be bold */
.tabulator .company-list__cell-name,
.tabulator-cell .company-list__cell-name,
.company-list__cell-name {
  font-weight: 700 !important;
  color: #2d3237 !important;
}

/* FIX: All available tab labels (slide, background, object, html) should be bold */
/* Unavailable tabs have display: none on parent, so this only affects visible/available tabs */
/* Higher specificity to override body font rules */
html body .tab-menu-radio-text,
body .tab-menu-radio-text,
.tab-menu-radio-text {
  font-family: 'Nunito Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

/* Active tab also gets yellow underline (from component CSS) */
html body .tab-menu-radio-container input:checked ~ .tab-menu-radio-text,
body .tab-menu-radio-container input:checked ~ .tab-menu-radio-text,
.tab-menu-radio-container input:checked ~ .tab-menu-radio-text {
  font-weight: 700 !important;
}

/* FIX: Consistent vertical padding for all inputs and selects on playlist edit page */
.block-playlist-edit input[type="text"],
.block-playlist-edit input[type="number"],
.slide-editor__main input[type="text"],
.slide-editor__main input[type="number"],
.toolbox input:not([type="range"]):not([type="radio"]):not([type="checkbox"]) {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  box-sizing: border-box !important;
}

/* Select elements need more vertical padding to match inputs */
.block-playlist-edit select,
.slide-editor__main select,
.toolbox select,
.context-menu__select {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* Font family selector - fix text visibility */
#slide-content-text__font-family-editor {
  line-height: normal !important;
  padding: 0px 8px !important;
  height: auto !important;
  min-height: 33px !important;
}

#slide-content-text__font-family-editor option,
#slide-content-text__font-family-editor optgroup {
  line-height: 1.5 !important;
  padding: 2px 8px !important;
}

/* Dropdown buttons (like Zoom selector) need consistent styling */
.block-playlist-edit .btn.dropdown-toggle,
.slide-editor__main .btn.dropdown-toggle,
#canvas-info__zoom-selector-button {
  line-height: normal !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  height: auto !important;
}

/* Dimension selector dropdown buttons - match input height */
.slide-content__caret-button {
  right: unset !important;
  line-height: normal !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  height: 26px !important;
  border: 1px solid #ccc !important;
  background-color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.slide-content__caret-button:hover {
  background-color: #f8f8f8 !important;
  border-color: #999 !important;
}

/* Dimension section left margin */
.slide-editor__dimension-section {
  margin-left: 32px !important;
}

/* Size lock checkbox left margin */
.size-lock-container {
  margin-left: 24px !important;
}

/* Playlist block content bottom margin - add space below */
.playlist-block__content {
  margin-bottom: 20px !important;
}

/* Transparency dropdown container - extend width to fit all elements */
#transparency-edit-dropdown-selector {
  width: auto !important;
  min-width: 120px !important;
}

/* Transparency dropdown - match Dimension selector style */
#transparency-edit-dropdown-selector .dropdown-menu {
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 4px 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

#transparency-edit-dropdown-selector .dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#transparency-edit-dropdown-selector .dropdown-menu li a {
  display: block !important;
  padding: 4px 12px !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  background-color: #fff !important;
  transition: background-color 0.15s ease !important;
}

#transparency-edit-dropdown-selector .dropdown-menu li a:hover {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Font size, line height, and padding selectors - match Zoom dropdown style */
#slide-content-text__font-size-selector-button,
#slide-content-text__line-height-selector-button,
#slide-content-text__padding-selector-button {
  line-height: normal !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  height: auto !important;
  background-color: #fff !important;
  border-color: #ccc !important;
  color: #333 !important;
}

/* Remove Bootstrap dropdown caret - already has up/down buttons or visual caret */
#slide-content-text__font-size-selector-button::after,
#slide-content-text__line-height-selector-button::after,
#slide-content-text__padding-selector-button::after {
  display: none !important;
}

/* Remove double caret from playlist order dropdown */
.playlist-block__content .btn.dropdown-toggle::after {
  display: none !important;
}

#slide-content-text__font-size-selector-button:hover,
#slide-content-text__line-height-selector-button:hover,
#slide-content-text__padding-selector-button:hover {
  background-color: #f8f8f8 !important;
  border-color: #999 !important;
  color: #333 !important;
}

#slide-content-text__font-size-selector .dropdown-menu,
#slide-content-text__line-height-selector .dropdown-menu,
#slide-content-text__padding-selector .dropdown-menu {
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 4px 0 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

#slide-content-text__font-size-selector .dropdown-menu li,
#slide-content-text__line-height-selector .dropdown-menu li,
#slide-content-text__padding-selector .dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#slide-content-text__font-size-selector .dropdown-menu li a,
#slide-content-text__line-height-selector .dropdown-menu li a,
#slide-content-text__padding-selector .dropdown-menu li a {
  display: block !important;
  padding: 2px 12px !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  background-color: #fff !important;
  transition: background-color 0.15s ease !important;
}

#slide-content-text__font-size-selector .dropdown-menu li a:hover,
#slide-content-text__line-height-selector .dropdown-menu li a:hover,
#slide-content-text__padding-selector .dropdown-menu li a:hover {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Dimension selector dropdown menu styling */
.slide-editor__coordinates-dropdown-block .dropdown-menu {
  min-width: 80px !important;
  max-width: 120px !important;
  padding: 4px 0 !important;
}

.slide-editor__coordinates-dropdown-block .dropdown-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.slide-editor__coordinates-dropdown-block .dropdown-menu li a {
  display: block !important;
  padding: 4px 12px !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  background-color: #fff !important;
  transition: background-color 0.15s ease !important;
}

.slide-editor__coordinates-dropdown-block .dropdown-menu li a:hover {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #000 !important;
  text-decoration: none !important;
}

/* Ignore theme overrides for specific containers */
.theme-ignore,
.theme-ignore *,
.auth-page,
.auth-page * {
  /* Reset all theme variables to initial/unset to prevent override */
}

.theme-ignore a,
.theme-ignore .text-primary,
.theme-ignore .bg-primary,
.theme-ignore .btn-primary,
.theme-ignore .block-button,
.theme-ignore .block-button-success,
.theme-ignore .block-button-danger,
.theme-ignore .block-button-warning,
.auth-page a,
.auth-page .btn:not(.auth-page__login-button),
.auth-page .btn-primary:not(.auth-page__login-button),
.auth-page .block-button {
  color: unset !important;
  background-color: unset !important;
  border-color: unset !important;
  background: unset !important;
  filter: none !important;
}

/* Auth page login button should use theme colors */
.auth-page .auth-page__login-button {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
  color: #000 !important;
}

.auth-page .auth-page__login-button:hover,
.auth-page .auth-page__login-button:focus,
.auth-page .auth-page__login-button:active {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
  filter: brightness(0.9);
}

/* CSS Variables will be set by tenant theme CSS that loads after this file */
:root {
  /* Default theme values - Bootstrap 5 defaults */
  /* Note: Main menu colors, header colors are set by tenant CSS (default.css, {tenant}.css) */
  /* Only non-theme values should be set here as fallbacks */
  --primary-color: #0d6efd;
  --secondary-color: #6c757d;
  --button-primary-bg: #0d6efd;
  --button-primary-color: #ffffff;
  --logo-url: url('/blocks/main-menu/logo_admin.svg');
  --brand-name: '';

  /* Form elements - Bootstrap 5 standard */
  --form-input-bg: #ffffff;
  --form-input-color: #212529;
  --form-input-border: #ced4da;
  --form-input-border-radius: 0.375rem;
  --form-input-padding-y: 0.375rem;
  --form-input-padding-x: 0.75rem;
  --form-input-font-size: 1rem;
  --form-input-line-height: 1.5;
  --form-input-focus-border: #86b7fe;
  --form-input-focus-shadow: rgba(13, 110, 253, 0.25);
  --form-input-disabled-bg: #e9ecef;
  --form-input-disabled-color: #6c757d;
  --form-label-color: #212529;
  --form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  /* Font variables */
  --header-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-font-weight: 500;
  --body-font-weight: 400;

  /* PDF Modal variables */
  --pdf-modal-info-bg: #f5f5f5;
  --pdf-modal-info-title-color: #333;
  --pdf-modal-text-color: #333;
  --pdf-modal-text-muted: #666;
  --pdf-modal-border-color: #ddd;

  /* Help Modal variables */
  --help-modal-page-bg: #e9e9e9;
  --help-modal-text-color: #2d3237;
}

/* Apply theme variables to key elements */

/* Links - EXCLUDE auth-page, screen-list, company-list, language flags, and calendar events from theming */
a:not(.auth-page a):not(.auth-page *):not(.screen-list__link):not(.company-list__link):not(.group-list__link):not(.outlet-list__link):not(.user-list__link):not(.playlist-list__link):not(.media-list__link):not(.videowall-list__link):not(.slide-list__link):not(.comments-list__link):not(.font-list__link):not(.layout-list__link):not(.language__flag):not(.language__flag-de):not(.language__flag-en):not(.language__flag-sp):not(.dropdown-menu li > a):not(.fc-event):not(.fc-day-grid-event):not(.fc-time-grid-event) {
  color: var(--primary-color) !important;
}

a:not(.auth-page a):not(.auth-page *):not(.screen-list__link):not(.company-list__link):not(.group-list__link):not(.outlet-list__link):not(.user-list__link):not(.playlist-list__link):not(.media-list__link):not(.videowall-list__link):not(.slide-list__link):not(.comments-list__link):not(.font-list__link):not(.layout-list__link):not(.language__flag):not(.language__flag-de):not(.language__flag-en):not(.language__flag-sp):not(.dropdown-menu li > a):not(.fc-event):not(.fc-day-grid-event):not(.fc-time-grid-event):focus,
a:not(.auth-page a):not(.auth-page *):not(.screen-list__link):not(.company-list__link):not(.group-list__link):not(.outlet-list__link):not(.user-list__link):not(.playlist-list__link):not(.media-list__link):not(.videowall-list__link):not(.slide-list__link):not(.comments-list__link):not(.font-list__link):not(.layout-list__link):not(.language__flag):not(.language__flag-de):not(.language__flag-en):not(.language__flag-sp):not(.dropdown-menu li > a):not(.fc-event):not(.fc-day-grid-event):not(.fc-time-grid-event):hover,
a:not(.auth-page a):not(.auth-page *):not(.screen-list__link):not(.company-list__link):not(.group-list__link):not(.outlet-list__link):not(.user-list__link):not(.playlist-list__link):not(.media-list__link):not(.videowall-list__link):not(.slide-list__link):not(.comments-list__link):not(.font-list__link):not(.layout-list__link):not(.language__flag):not(.language__flag-de):not(.language__flag-en):not(.language__flag-sp):not(.dropdown-menu li > a):not(.fc-event):not(.fc-day-grid-event):not(.fc-time-grid-event):active {
  color: var(--button-primary-bg) !important;
  filter: none !important;
}

/* Screen list link - always use button primary color */
.screen-list__link {
  color: var(--button-primary-bg, #0d6efd) !important;
  text-decoration: none !important;
}

.screen-list__link:hover,
.screen-list__link:focus,
.screen-list__link:active {
  color: var(--button-primary-bg, #0d6efd) !important;
  text-decoration: none !important;
}

/* Page header - themeable background and text color (uses header-bg-color/header-text-color from Page Headers setting) */
/* Applies to all *-list__create elements which are the page headers */
html body .page-header,
body .page-header,
.page-header,
.group-list__create,
.outlet-list__create,
.user-list__create,
.screen-list__create,
.playlist-list__create,
.media-list__create,
.videowall-list__create,
.slide-list__create,
.comments-list__create,
.font-list__create,
.layout-list__create {
  background-color: var(--header-bg-color, #3e454c) !important;
  color: var(--header-text-color, #ffffff) !important;
}

/* Page header links - use header link color */
/* Target both generic 'a' tags and specific __link classes */
.group-list__create a,
.outlet-list__create a,
.user-list__create a,
.screen-list__create a,
.playlist-list__create a,
.media-list__create a,
.videowall-list__create a,
.slide-list__create a,
.comments-list__create a,
.font-list__create a,
.layout-list__create a,
.group-list__link,
.outlet-list__link,
.user-list__link,
.screen-list__link,
.playlist-list__link,
.media-list__link,
.videowall-list__link,
.slide-list__link,
.comments-list__link,
.font-list__link,
.layout-list__link,
a.group-list__link,
a.outlet-list__link,
a.user-list__link,
a.screen-list__link,
a.playlist-list__link,
a.media-list__link,
a.videowall-list__link,
a.slide-list__link,
a.comments-list__link,
a.font-list__link,
a.layout-list__link {
  color: var(--header-link-color, #0d6efd) !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

/* Page header links hover - dim effect */
.group-list__create a:hover,
.outlet-list__create a:hover,
.user-list__create a:hover,
.screen-list__create a:hover,
.playlist-list__create a:hover,
.media-list__create a:hover,
.videowall-list__create a:hover,
.slide-list__create a:hover,
.comments-list__create a:hover,
.font-list__create a:hover,
.layout-list__create a:hover,
.group-list__link:hover,
.outlet-list__link:hover,
.user-list__link:hover,
.screen-list__link:hover,
.playlist-list__link:hover,
.media-list__link:hover,
.videowall-list__link:hover,
.slide-list__link:hover,
.comments-list__link:hover,
.font-list__link:hover,
.layout-list__link:hover {
  opacity: 0.7 !important;
}

/* Company list link - use header link color */
html body .company-list__create .company-list__link,
body .company-list__create .company-list__link,
.company-list__create .company-list__link,
a.company-list__link {
  color: var(--header-link-color, #0d6efd) !important;
  text-decoration: none !important;
}

html body .company-list__create .company-list__link:hover,
html body .company-list__create .company-list__link:focus,
html body .company-list__create .company-list__link:active,
body .company-list__create .company-list__link:hover,
body .company-list__create .company-list__link:focus,
body .company-list__create .company-list__link:active,
.company-list__create .company-list__link:hover,
.company-list__create .company-list__link:focus,
.company-list__create .company-list__link:active,
a.company-list__link:hover,
a.company-list__link:focus,
a.company-list__link:active {
  color: var(--header-link-color, #0d6efd) !important;
  text-decoration: none !important;
  opacity: 0.7;
}

/* Primary text color */
.text-primary {
  color: var(--primary-color) !important;
}

a.text-primary:focus,
a.text-primary:hover,
a.text-primary:active {
  color: var(--button-primary-bg) !important;
  filter: none !important;
}

/* Primary background */
.bg-primary {
  background-color: var(--primary-color) !important;
}

a.bg-primary:focus,
a.bg-primary:hover {
  background-color: var(--primary-color) !important;
  filter: brightness(0.8);
}

/* Bootstrap primary buttons */
.btn-primary {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: #ffffff !important;
  filter: brightness(0.85);
}

/* Main menu logo styling is handled in main-menu.css */

/* Bootstrap form focus */
.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(48, 151, 209, 0.25) !important;
}

/* Bootstrap 5 nav pills active state */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary-color) !important;
}

/* Bootstrap 5 pagination active */
.pagination .page-item.active .page-link {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* Bootstrap progress bar */
.progress-bar {
  background-color: var(--primary-color) !important;
}

/* Bootstrap 5 card primary (replaces panel from BS3) */
.card-primary {
  border-color: var(--primary-color) !important;
}

.card-primary > .card-header {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
}

/* Custom app-specific elements */
.main-menu__item_state_current {
  color: var(--primary-color) !important;
}

/* Block-level theming for specific components */
.block-header {
  background-color: var(--primary-color) !important;
}

.btn-theme {
  background-color: var(--button-primary-bg) !important;
  border-color: var(--primary-color) !important;
  color: var(--button-primary-color) !important;
}

.btn-theme:hover {
  background-color: var(--button-primary-bg) !important;
  filter: brightness(0.9);
}

/* Main menu styling - Ultra-high specificity to override main-menu.css */
html body .main-menu,
body .main-menu,
.main-menu {
  background-color: var(--main-menu-bg-color, #3e454c) !important;
}

html body .main-menu__sidebar,
body .main-menu__sidebar,
.main-menu__sidebar {
  background-color: var(--sidebar-bg-color) !important;
}

html body .main-menu__item,
body .main-menu__item,
.main-menu__item {
  color: var(--menu-item-color) !important;
  background-color: var(--main-menu-bg-color, #3e454c) !important;
}

html body .main-menu__item p,
html body .main-menu__item i,
html body .main-menu__item .fa,
html body .main-menu__item .fas,
html body .main-menu__item .far,
html body .main-menu__item .fab,
body .main-menu__item p,
body .main-menu__item i,
body .main-menu__item .fa,
body .main-menu__item .fas,
body .main-menu__item .far,
body .main-menu__item .fab,
.main-menu__item p,
.main-menu__item i,
.main-menu__item .fa,
.main-menu__item .fas,
.main-menu__item .far,
.main-menu__item .fab {
  color: var(--menu-item-color) !important;
}

/* Make menu icons smaller and adjust padding to align with language flags */
html body .main-menu__item,
body .main-menu__item,
.main-menu__item {
  padding-top: 8px !important;
  padding-bottom: 5px !important;
}

html body .main-menu__item i,
html body .main-menu__item .fa,
html body .main-menu__item .fas,
html body .main-menu__item .far,
html body .main-menu__item .fab,
body .main-menu__item i,
body .main-menu__item .fa,
body .main-menu__item .fas,
body .main-menu__item .far,
body .main-menu__item .fab,
.main-menu__item i,
.main-menu__item .fa,
.main-menu__item .fas,
.main-menu__item .far,
.main-menu__item .fab {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

html body .main-menu__item-emblem,
body .main-menu__item-emblem,
.main-menu__item-emblem {
  height: 24px;
}

html body .main-menu__item p,
body .main-menu__item p,
.main-menu__item p {
  margin-top: 4px !important;
  margin-bottom: 0px !important;
}

html body .language__flag,
body .language__flag,
.language__flag,
html body .language__flag-de,
body .language__flag-de,
.language__flag-de,
html body .language__flag-en,
body .language__flag-en,
.language__flag-en,
html body .language__flag-sp,
body .language__flag-sp,
.language__flag-sp,
html body a.language__flag,
body a.language__flag,
a.language__flag,
html body a.language__flag-de,
body a.language__flag-de,
a.language__flag-de,
html body a.language__flag-en,
body a.language__flag-en,
a.language__flag-en,
html body a.language__flag-sp,
body a.language__flag-sp,
a.language__flag-sp {
  color: var(--menu-item-color) !important;
}

/* Language flags hover - use hover color */
html body .main-menu__language a.language__flag:hover,
html body .main-menu__language a.language__flag-de:hover,
html body .main-menu__language a.language__flag-en:hover,
html body .main-menu__language a.language__flag-sp:hover,
html body .language__flag-de:hover,
html body .language__flag-en:hover,
html body .language__flag-sp:hover,
body .language__flag-de:hover,
body .language__flag-en:hover,
body .language__flag-sp:hover,
.language__flag-de:hover,
.language__flag-en:hover,
.language__flag-sp:hover {
  color: var(--menu-item-hover-color, #ffffff) !important;
  text-decoration: none !important;
}

/* Language flags active - use active menu item color */
html body .main-menu__language a.language__flag-de__active,
html body .main-menu__language a.language__flag-en__active,
html body .main-menu__language a.language__flag-sp__active,
html body .language__flag-de__active,
html body .language__flag-en__active,
html body .language__flag-sp__active,
body .language__flag-de__active,
body .language__flag-en__active,
body .language__flag-sp__active,
.language__flag-de__active,
.language__flag-en__active,
.language__flag-sp__active {
  color: var(--menu-item-active-color, #ffffff) !important;
  text-decoration: none !important;
}

/* Hover state - background and text */
html body .main-menu__item:hover,
body .main-menu__item:hover,
.main-menu__item:hover {
  background-color: var(--menu-item-hover-bg, #2d3237) !important;
  color: var(--menu-item-hover-color, #ffffff) !important;
}

html body .main-menu__item:hover p,
body .main-menu__item:hover p,
.main-menu__item:hover p {
  color: var(--menu-item-hover-color, #ffffff) !important;
}

/* Hover state - FontAwesome icons */
html body .main-menu__item:hover i,
html body .main-menu__item:hover .fa,
html body .main-menu__item:hover .fas,
html body .main-menu__item:hover .far,
html body .main-menu__item:hover .fab,
body .main-menu__item:hover i,
body .main-menu__item:hover .fa,
body .main-menu__item:hover .fas,
body .main-menu__item:hover .far,
body .main-menu__item:hover .fab,
.main-menu__item:hover i,
.main-menu__item:hover .fa,
.main-menu__item:hover .fas,
.main-menu__item:hover .far,
.main-menu__item:hover .fab {
  color: var(--menu-icon-hover-color, #ffffff) !important;
}

/* Hover state - SVG icon emblems */
html body .main-menu__item:hover .main-menu__item-emblem,
body .main-menu__item:hover .main-menu__item-emblem,
.main-menu__item:hover .main-menu__item-emblem {
  filter: var(--menu-icon-hover-filter, none) !important;
}

/* Active/Selected state - background and text */
html body .main-menu__item_state_current,
body .main-menu__item_state_current,
.main-menu__item_state_current {
  background-color: var(--main-menu-active-bg-color, #2d3237) !important;
  color: var(--menu-item-active-color, var(--primary-color, #0d6efd)) !important;
}

/* Active menu item text uses menu-item-active-color (defaults to primary) */
html body .main-menu__item_state_current p,
body .main-menu__item_state_current p,
.main-menu__item_state_current p {
  color: var(--menu-item-active-color, var(--primary-color, #0d6efd)) !important;
}

/* Active/Selected state - FontAwesome icons */
html body .main-menu__item_state_current i,
html body .main-menu__item_state_current .fa,
html body .main-menu__item_state_current .fas,
html body .main-menu__item_state_current .far,
html body .main-menu__item_state_current .fab,
body .main-menu__item_state_current i,
body .main-menu__item_state_current .fa,
body .main-menu__item_state_current .fas,
body .main-menu__item_state_current .far,
body .main-menu__item_state_current .fab,
.main-menu__item_state_current i,
.main-menu__item_state_current .fa,
.main-menu__item_state_current .fas,
.main-menu__item_state_current .far,
.main-menu__item_state_current .fab {
  color: var(--menu-icon-active-color, var(--primary-color, #0d6efd)) !important;
}

/* Active menu item SVG icon - apply CSS filter to colorize */
html body .main-menu__item_state_current .main-menu__item-emblem,
body .main-menu__item_state_current .main-menu__item-emblem,
.main-menu__item_state_current .main-menu__item-emblem {
  filter: var(--menu-item-active-icon-filter, none) !important;
}

/* Regular state - SVG icon emblems */
html body .main-menu__item-emblem,
body .main-menu__item-emblem,
.main-menu__item-emblem {
  filter: var(--menu-icon-filter, none) !important;
}

/* Regular state - FontAwesome icons */
html body .main-menu__item i,
html body .main-menu__item .fa,
html body .main-menu__item .fas,
html body .main-menu__item .far,
html body .main-menu__item .fab,
body .main-menu__item i,
body .main-menu__item .fa,
body .main-menu__item .fas,
body .main-menu__item .far,
body .main-menu__item .fab,
.main-menu__item i,
.main-menu__item .fa,
.main-menu__item .fas,
.main-menu__item .far,
.main-menu__item .fab {
  color: var(--menu-icon-color, #ffffff) !important;
}

html body .main-menu__language,
body .main-menu__language,
.main-menu__language {
  background-color: var(--main-menu-bg-color, #3e454c) !important;
}

html body .main-menu__sub-menu,
body .main-menu__sub-menu,
.main-menu__sub-menu {
  background-color: var(--main-menu-bg-color, #3e454c) !important;
}

html body .main-menu__layout,
body .main-menu__layout,
.main-menu__layout {
  background-color: var(--main-menu-bg-color, #3e454c) !important;
}

/* Navbar styling - Applied to logo area - always white for logo visibility */
html body .main-menu__logo,
body .main-menu__logo,
.main-menu__logo {
  background-color: #ffffff !important;
}

/* Sidebar styling - Applied to sidebar elements if they exist */
html body .sidebar,
html body .main-menu__sidebar,
body .sidebar,
body .main-menu__sidebar,
.sidebar,
.main-menu__sidebar {
  background-color: var(--sidebar-bg-color, #343a40) !important;
}

/* Company block styling - Ultra-high specificity to override all block CSS files */
/* Apply default colors immediately to prevent flickering */
html body .company-block .company-block__headline,
html body .block .company-block__headline,
html .company-block .company-block__headline,
body .company-block .company-block__headline,
.company-block .company-block__headline,
body .company-block__headline,
.block .company-block__headline,
.company-block__headline,
html body .settings-block__headline,
body .settings-block__headline,
.settings-block__headline {
  background-color: #e5e5e5 !important;
  background: #e5e5e5 !important;
  color: #2d3237 !important;
  border-bottom: none !important;
}

/* Then override with theme variables when loaded */
html body .company-block .company-block__headline,
html body .block .company-block__headline,
html .company-block .company-block__headline,
body .company-block .company-block__headline,
.company-block .company-block__headline,
body .company-block__headline,
.block .company-block__headline,
.company-block__headline,
html body .settings-block__headline,
body .settings-block__headline,
.settings-block__headline {
  background-color: var(--company-block-headline-bg, #e5e5e5) !important;
  background: var(--company-block-headline-bg, #e5e5e5) !important;
  color: var(--company-block-headline-color, #2d3237) !important;
  border-bottom: none !important;
}

/* Block button styling - Higher specificity to override block.css */
body .block-button,
.block .block-button,
.block-button {
  background: var(--button-primary-bg, #0d6efd) !important;
  background-color: var(--button-primary-bg, #0d6efd) !important;
  border: 1px solid var(--button-primary-bg, #0d6efd) !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
}

body .block-button:hover,
body .block-button:focus,
body .block-button:active,
.block .block-button:hover,
.block .block-button:focus,
.block .block-button:active,
.block-button:hover,
.block-button:focus,
.block-button:active {
  background: var(--button-primary-bg, #0d6efd) !important;
  background-color: var(--button-primary-bg, #0d6efd) !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
  filter: brightness(0.85);
}

/* Brand background */
.brand-section {
  background-color: var(--brand-bg-color) !important;
}

/* Success, danger, and other color buttons */
.block-button-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}

.block-button-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
}

.block-button-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
}

/* Preview section styling - base styles (colors handled by dynamic CSS) */
#theme-preview.theme-preview-active {
  background: #f8f9fa !important;
  border: 1px solid #ddd !important;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}

#theme-preview .theme-preview-btn-primary,
#theme-preview .theme-preview-btn-secondary,
#theme-preview .theme-preview-btn-success,
#theme-preview .theme-preview-btn-danger {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid;
  cursor: pointer;
  border-radius: 3px;
}

#theme-preview .theme-preview-link {
  text-decoration: underline !important;
  font-weight: 500;
}

#theme-preview .theme-preview-text {
  color: #333 !important;
}

#theme-preview .theme-preview-navbar {
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  font-size: 14px;
  font-weight: 500;
}

#theme-preview .theme-preview-sidebar {
  background-color: #343a40;
  border: 1px solid #343a40;
  font-size: 14px;
  font-weight: 500;
}

#theme-preview h6 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #555;
}

/* Font Variables Application */

/* Body text elements */
body,
.form-control,
.form-select,
input,
textarea,
p,
span:not(.font-main),
div:not(.font-main),
.btn,
.block-button {
  font-family: var(--body-font-family) !important;
  font-weight: var(--body-font-weight) !important;
}

/* Protect font-main class from theme overrides - should always be bold */
.font-main {
  font-weight: bold !important;
}

/* Header elements */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading,
.title,
.company-block__headline,
.block-header,
.nav-title,
.brand-name {
  font-family: var(--header-font-family) !important;
  font-weight: var(--header-font-weight) !important;
}

/* Navigation and menu elements */
.main-menu,
.main-menu__item,
.nav-link,
.navbar-brand,
.dropdown-item {
  font-family: var(--body-font-family) !important;
  font-weight: var(--body-font-weight) !important;
}

/* Table elements */
table,
th,
td,
.table {
  font-family: var(--body-font-family) !important;
  font-weight: var(--body-font-weight) !important;
}

/* Specific overrides for headers in tables - use normal weight, not bold, inherit body text size */
th,
.table-header {
  font-family: var(--body-font-family) !important;
  font-weight: normal !important;
}

/* Button elements should use body font but with normal weight for readability */
.btn,
.block-button,
button,
input[type="submit"],
input[type="button"] {
  font-family: var(--body-font-family) !important;
  font-weight: var(--body-font-weight) !important;
}

/* Modal and alert headers */
.modal-title,
.alert-heading,
.card-header {
  font-family: var(--header-font-family) !important;
  font-weight: var(--header-font-weight) !important;
}

/* Tabulator table header - match main menu background */
.tabulator .tabulator-header,
#company-list .tabulator-header,
.company-list-block .tabulator-header {
  background-color: var(--main-menu-bg-color, #3e454c) !important;
  border-bottom: none !important;
}

.tabulator .tabulator-header .tabulator-col,
#company-list .tabulator-header .tabulator-col,
.company-list-block .tabulator-header .tabulator-col {
  background-color: var(--main-menu-bg-color, #3e454c) !important;
  border-right-color: rgba(255, 255, 255, 0.2) !important;
}

/* Tabulator table header column titles - ensure white color on dark background, normal weight, 18px to match labels */
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
#company-list .tabulator-header .tabulator-col-title,
.tabulator-header .tabulator-col-title {
  color: var(--menu-item-color, #ffffff) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
}

/* Tabulator header sort arrows */
.tabulator .tabulator-header .tabulator-col .tabulator-arrow {
  border-bottom-color: var(--menu-item-color, #ffffff) !important;
}

/* ===== Table Filter Form Styling ===== */
/* Filter container - flexbox alignment */
.company-list__filter,
.outlet-list__filter,
.screen-list__filter,
.user-list__filter,
.playlist-list__filter,
.media-list__filter,
.slide-list__filter,
.fonts-list__filter,
.layouts-list__filter,
.videowall-list__filter,
.group-list__filter,
.comments-list__filter {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

/* Filter label alignment */
.company-list__filter .table-filter-label,
.outlet-list__filter .table-filter-label,
.screen-list__filter .table-filter-label,
.user-list__filter .table-filter-label,
.playlist-list__filter .table-filter-label,
.media-list__filter .table-filter-label,
.slide-list__filter .table-filter-label,
.fonts-list__filter .table-filter-label,
.layouts-list__filter .table-filter-label,
.videowall-list__filter .table-filter-label,
.group-list__filter .table-filter-label,
.comments-list__filter .table-filter-label {
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

/* All filter forms - inline, auto width, Bootstrap style */
#filter-field-com, #filter-type-com, #filter-value-com,
#filter-field-out, #filter-type-out, #filter-value-out,
#filter-field-scr, #filter-type-scr, #filter-value-scr,
#filter-field, #filter-type, #filter-value,
#filter-field-pl, #filter-type-pl, #filter-value-pl,
#filter-field-med, #filter-type-med, #filter-value-med {
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
    padding: var(--form-input-padding-y, 0.375rem) var(--form-input-padding-x, 0.75rem) !important;
    font-size: var(--form-input-font-size, 1rem) !important;
    line-height: var(--form-input-line-height, 1.5) !important;
    color: var(--form-input-color, #212529) !important;
    background-color: var(--form-input-bg, #ffffff) !important;
    border: 1px solid var(--form-input-border, #ced4da) !important;
    border-radius: var(--form-input-border-radius, 0.375rem) !important;
    height: auto !important;
}

#filter-field-com:focus, #filter-type-com:focus, #filter-value-com:focus,
#filter-field-out:focus, #filter-type-out:focus, #filter-value-out:focus,
#filter-field-scr:focus, #filter-type-scr:focus, #filter-value-scr:focus,
#filter-field:focus, #filter-type:focus, #filter-value:focus,
#filter-field-pl:focus, #filter-type-pl:focus, #filter-value-pl:focus,
#filter-field-med:focus, #filter-type-med:focus, #filter-value-med:focus {
    border-color: var(--form-input-focus-border, #86b7fe) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem var(--form-input-focus-shadow, rgba(13, 110, 253, 0.25)) !important;
}

/* Filter reset buttons - align with inputs */
#filter-clear-com, #filter-clear-out, #filter-clear-scr,
#filter-clear, #filter-clear-pl, #filter-clear-med {
    margin-left: 8px !important;
    padding: var(--form-input-padding-y, 0.375rem) var(--form-input-padding-x, 0.75rem) !important;
    height: auto !important;
    vertical-align: middle;
}

/* jQuery UI Datepicker Theming */
.ui-datepicker .ui-datepicker-header {
  background-color: var(--primary-color, #3097d1) !important;
  border-color: var(--primary-color, #3097d1) !important;
  color: #ffffff !important;
}

.ui-datepicker .ui-datepicker-title {
  color: #ffffff !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  color: #ffffff !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: transparent !important;
}

.ui-datepicker td a.ui-state-default {
  text-align: center !important;
  display: block !important;
  line-height: normal !important;
  padding: 0.2em 0.3em !important;
  background-color: #f5f5f5 !important;
  border-color: #ddd !important;
  color: #333 !important;
}

.ui-datepicker td a.ui-state-default:hover {
  background-color: #e0e0e0 !important;
  text-decoration: none !important;
  color: #333 !important;
}

.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-default.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

.ui-datepicker td a.ui-state-active:hover,
.ui-datepicker td a.ui-state-default.ui-state-active:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

.ui-datepicker td a.ui-state-highlight,
.ui-datepicker td a.ui-state-default.ui-state-highlight {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
  font-weight: bold !important;
}

.ui-datepicker td a.ui-state-highlight:hover {
  color: #ffffff !important;
  text-decoration: none !important;
  filter: brightness(0.95);
}

/* Tempus Dominus Time Picker Theming - Override CSS Variables */
:root {
  --td-dark-font-color: #000000 !important;
  --td-dark-btn-hover-bg: var(--button-primary-bg, #0d6efd) !important;
  --td-dark-widget-background: #ffffff !important;
  --td-dark-active-bg: var(--button-primary-bg, #0d6efd) !important;
  --td-timepicker-font-size: 0.6em !important;
}

.tempus-dominus-widget {
  --td-dark-font-color: #000000 !important;
  --td-dark-btn-hover-bg: var(--button-primary-bg, #0d6efd) !important;
  --td-dark-widget-background: #ffffff !important;
  --td-dark-active-bg: var(--button-primary-bg, #0d6efd) !important;
  --td-timepicker-font-size: 0.6em !important;
  background-color: #ffffff !important;
  border: 1px solid #c1c0c2 !important;
  max-width: 180px !important;
  font-size: 12px !important;
}

.tempus-dominus-widget .td-clock {
  background-color: #ffffff !important;
  padding: 8px !important;
}

/* All direct children divs in time container */
.tempus-dominus-widget .td-clock .time-container {
  gap: 5px !important;
}

.tempus-dominus-widget .td-clock .time-container > div {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #c1c0c2 !important;
  width: 40px !important;
  height: 28px !important;
  font-size: 14px !important;
}

.tempus-dominus-widget .td-clock .time-container > div:hover {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
}

/* Clock face numbers - darker text */
.tempus-dominus-widget .td-clock .td-time-now,
.tempus-dominus-widget .td-clock .td-time {
  color: #000000 !important;
}

/* Hour/minute picker buttons - white background with dark text */
.tempus-dominus-widget .td-clock div[data-action="showHours"],
.tempus-dominus-widget .td-clock div[data-action="showMinutes"],
.tempus-dominus-widget .td-clock div[data-action="showSeconds"],
.tempus-dominus-widget .td-clock [data-time-component="hours"],
.tempus-dominus-widget .td-clock [data-time-component="minutes"],
.tempus-dominus-widget .td-clock [data-time-component="seconds"] {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #c1c0c2 !important;
}

/* Hover state - yellow background with white text */
.tempus-dominus-widget .td-clock div[data-action="showHours"]:hover,
.tempus-dominus-widget .td-clock div[data-action="showMinutes"]:hover,
.tempus-dominus-widget .td-clock div[data-action="showSeconds"]:hover,
.tempus-dominus-widget .td-clock [data-time-component="hours"]:hover,
.tempus-dominus-widget .td-clock [data-time-component="minutes"]:hover,
.tempus-dominus-widget .td-clock [data-time-component="seconds"]:hover {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
  border-color: var(--button-primary-bg, #0d6efd) !important;
}

/* Arrow buttons - yellow on hover */
.tempus-dominus-widget .td-clock .arrow {
  color: #5c5f66 !important;
}

.tempus-dominus-widget .td-clock .arrow:hover {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #ffffff !important;
}

/* Selected time display - yellow background */
.tempus-dominus-widget .td-clock .time-container .td-time {
  background-color: var(--button-primary-bg, #0d6efd) !important;
  color: #000000 !important;
  font-weight: bold !important;
}

/* Force Tabulator header font size to 18px with highest specificity */
html body div.tabulator div.tabulator-header div.tabulator-col div.tabulator-col-content div.tabulator-col-title,
html body .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
body div.tabulator div.tabulator-header div.tabulator-col div.tabulator-col-content div.tabulator-col-title,
body .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title,
div.tabulator div.tabulator-header div.tabulator-col div.tabulator-col-content div.tabulator-col-title,
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* FullCalendar Styling - Day numbers and headers should be gray */
.fc-day-number,
.fc-day-top .fc-day-number {
  color: #888888 !important;
}

/* Week day headers - gray */
.fc-day-header,
.fc-day-header a {
  color: #888888 !important;
}

/* Calendar events - use slide colors set via JS, not theme colors */
/* High specificity to override any theme color rules */
#calendar .fc-event,
#calendar .fc-day-grid-event,
#calendar .fc-time-grid-event,
#calendar a.fc-event,
#calendar a.fc-time-grid-event,
.fc-view .fc-event,
.fc-view a.fc-event,
a.fc-time-grid-event.fc-event,
a.fc-day-grid-event.fc-event {
  /* Border and background colors are set via JS from slide color */
  /* Don't override with theme colors */
}

/* Exclude calendar events from theme link color styling */
#calendar a.fc-event,
#calendar a.fc-event:hover,
#calendar a.fc-event:focus,
#calendar a.fc-event:active,
a.fc-time-grid-event,
a.fc-time-grid-event:hover,
a.fc-time-grid-event:focus,
a.fc-day-grid-event,
a.fc-day-grid-event:hover,
a.fc-day-grid-event:focus {
  /* Colors set via inline styles from JS - don't override */
  color: inherit !important;
  filter: none !important;
}

/* Hide the white overlay inside calendar events so slide color shows through */
.fc-event .fc-bg,
.fc-time-grid-event .fc-bg,
.fc-day-grid-event .fc-bg {
  display: none !important;
}

/* ============================================
   STANDARDIZED FORM ELEMENTS - Bootstrap 5
   ============================================ */

/* Base input styles - applies to text, number, email, password, etc. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  display: block;
  width: 100%;
  padding: var(--form-input-padding-y, 0.375rem) var(--form-input-padding-x, 0.75rem);
  font-size: var(--form-input-font-size, 1rem);
  font-weight: 400;
  line-height: var(--form-input-line-height, 1.5);
  color: var(--form-input-color, #212529);
  background-color: var(--form-input-bg, #ffffff);
  background-clip: padding-box;
  border: 1px solid var(--form-input-border, #ced4da);
  border-radius: var(--form-input-border-radius, 0.375rem);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select element styles */
select,
select.form-select,
select.form-control {
  display: block;
  width: 100%;
  padding: var(--form-input-padding-y, 0.375rem) 2.25rem var(--form-input-padding-y, 0.375rem) var(--form-input-padding-x, 0.75rem);
  font-size: var(--form-input-font-size, 1rem);
  font-weight: 400;
  line-height: var(--form-input-line-height, 1.5);
  color: var(--form-input-color, #212529);
  background-color: var(--form-input-bg, #ffffff);
  background-image: var(--form-select-indicator);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--form-input-border, #ced4da);
  border-radius: var(--form-input-border-radius, 0.375rem);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Focus states */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  color: var(--form-input-color, #212529);
  background-color: var(--form-input-bg, #ffffff);
  border-color: var(--form-input-focus-border, #86b7fe);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--form-input-focus-shadow, rgba(13, 110, 253, 0.25));
}

/* Disabled states */
input:disabled,
input[readonly],
select:disabled,
textarea:disabled,
textarea[readonly] {
  background-color: var(--form-input-disabled-bg, #e9ecef);
  color: var(--form-input-disabled-color, #6c757d);
  opacity: 1;
}

/* Form labels */
label,
.form-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--form-label-color, #212529);
}

/* Inline form elements - don't force full width */
.form-inline input,
.form-inline select,
.d-inline input,
.d-inline select,
input.form-control-inline,
select.form-control-inline {
  display: inline-block;
  width: auto;
}

/* Block-specific form overrides - maintain inline behavior for header bars */
.block-text input[type="text"],
.block-text select,
.block-text textarea,
.block-create input[type="text"],
.block-create select,
.block-create textarea {
  display: inline-block;
  width: auto;
}

/* Textarea specific */
textarea {
  min-height: calc(1.5em + 0.75rem + 2px);
  resize: vertical;
}

/* Form control sizing - small */
.form-control-sm,
input.form-control-sm,
select.form-control-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
}

/* Form control sizing - large */
.form-control-lg,
input.form-control-lg,
select.form-control-lg {
  min-height: calc(1.5em + 1rem + 2px);
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: 0.5rem;
}

/* ==========================================================================
   Icon Hover Colors - Uses theme variable for consistency
   Default: Bootstrap blue, Accenta: yellow (#ffcc00)
   ========================================================================== */

/* Override yellow hover for all icons - use theme variable */
.icon-hover-yellow:hover,
.icon-hover-yellow:active,
i.icon-hover-yellow:hover,
i.icon-hover-yellow:active {
  filter: var(--icon-hover-filter, brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1404%) hue-rotate(196deg) brightness(100%) contrast(102%)) !important;
}

/* Trash icon hover - use theme variable */
.icon-trash:hover,
.icon-trash:active,
i.icon-trash:hover,
i.icon-trash:active {
  filter: var(--icon-hover-filter, brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1404%) hue-rotate(196deg) brightness(100%) contrast(102%)) !important;
}

/* Table action icons hover - use theme variable */
.icon-table-action:hover,
.icon-table-action:active {
  filter: var(--icon-hover-filter, brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1404%) hue-rotate(196deg) brightness(100%) contrast(102%)) !important;
}

/* Screen preview button hover - use theme variable */
#screenPreviewBtn:hover,
#screenPreviewBtn:active {
  filter: var(--icon-hover-filter, brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1404%) hue-rotate(196deg) brightness(100%) contrast(102%)) !important;
}

/* ==========================================================================
   Global Table Filter Form Styling
   ========================================================================== */

/* Block head container - flexbox layout */
.fonts-block__head-container,
.layouts-block__head-container,
.screens-block__head-container,
.groups-block__head-container,
.outlets-block__head-container,
.videowalls-block__head-container {
  background: #e5e5e5;
  min-height: 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px 10px 20px;
}

/* Block headline */
.fonts-block__headline,
.layouts-block__headline,
.screens-block__headline,
.groups-block__headline,
.outlets-block__headline,
.videowalls-block__headline {
  font-family: Arial;
  font-size: 32px;
  text-transform: uppercase;
  color: #2d3237;
  margin: 0;
  float: none;
  padding: 0;
}

/* Filter container - flexbox layout */
.fonts-list__filter,
.layouts-list__filter,
.screens-list__filter,
.groups-list__filter,
.outlets-list__filter,
.videowalls-list__filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--body-text-color, #212529);
  text-align: right;
  padding: 0;
}

/* Filter label */
.fonts-list__filter .table-filter-label,
.layouts-list__filter .table-filter-label,
.screens-list__filter .table-filter-label,
.groups-list__filter .table-filter-label,
.outlets-list__filter .table-filter-label,
.videowalls-list__filter .table-filter-label {
  margin-bottom: 0;
  line-height: 1.5;
  color: var(--body-text-color, #212529);
}

/* Filter inputs - select and text */
[id^="filter-field-"],
[id^="filter-type-"],
[id^="filter-value-"] {
  color: var(--form-input-color, #212529) !important;
  height: 38px !important;
  font-size: 14px !important;
  padding: 6px 12px !important;
  border: 1px solid var(--form-input-border, #ced4da) !important;
  border-radius: var(--form-input-border-radius, 0.375rem) !important;
  background-color: var(--form-input-bg, #ffffff) !important;
}

[id^="filter-field-"] {
  min-width: 120px !important;
  width: auto !important;
}

[id^="filter-type-"] {
  min-width: 120px !important;
  width: 120px !important;
}

[id^="filter-value-"] {
  min-width: 203px !important;
  width: 203px !important;
}

[id^="filter-clear-"] {
  white-space: nowrap !important;
  margin-left: 8px !important;
}

/* ==========================================================================
   Global Tabulator Table Styling
   ========================================================================== */

/* Header icons (trash, export, upload) - white color on dark header */
.tabulator .tabulator-header img,
.tabulator-header img {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Header icons hover - use theme variable */
.tabulator .tabulator-header img:hover,
.tabulator-header img:hover {
  filter: var(--icon-hover-filter, brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1404%) hue-rotate(196deg) brightness(100%) contrast(102%)) !important;
}

/* Trash icon in table header - white color */
.tabulator .tabulator-header .icon-trash,
.tabulator-header .icon-trash {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Trash icon hover in table header - uses theme variable */
.tabulator .tabulator-header .icon-trash:hover,
.tabulator .tabulator-header .icon-trash:active,
.tabulator-header .icon-trash:hover,
.tabulator-header .icon-trash:active,
.tabulator .tabulator-header .icon-hover-yellow:hover,
.tabulator-header .icon-hover-yellow:hover {
  filter: var(--icon-hover-filter, brightness(0) saturate(100%) invert(42%) sepia(98%) saturate(1404%) hue-rotate(196deg) brightness(100%) contrast(102%)) !important;
}

/* Page size select in table footer - global styling */
.tabulator .tabulator-footer select,
.tabulator-footer select {
  width: auto !important;
  height: 27px !important;
  font-size: 14px !important;
  line-height: normal !important;
  padding: 2px 24px 2px 8px !important;
  vertical-align: middle !important;
  float: right !important;
  margin-right: 10px !important;
  border: 1px solid var(--form-input-border, #ced4da) !important;
  border-radius: var(--form-input-border-radius, 0.375rem) !important;
  background-color: var(--form-input-bg, #ffffff) !important;
  color: var(--form-input-color, #212529) !important;
}