/* Shared Twig/Vue control. No dependency on a late application bundle. */
.ls-appearance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  min-height: 40px;
  max-width: 100%;
  border: 1px solid var(--ls-color-border);
  border-radius: 8px;
  background: var(--ls-color-bg);
  color: var(--ls-color-text);
  font: 500 13px/1.4 Inter, sans-serif;
}
.ls-appearance svg { flex-shrink: 0; }
.ls-appearance-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ls-appearance select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: var(--ls-color-bg);
  color: var(--ls-color-text);
  font: inherit;
  cursor: pointer;
}
.ls-appearance:focus-within { outline: 2px solid var(--ls-color-primary); outline-offset: 3px; }
.ls-appearance select:focus { outline: none; }
.ls-outline-action:is(:hover, :focus-visible) {
  background: var(--ls-color-secondary) !important;
  color: var(--ls-color-text-inverse) !important;
}
.ls-inverse-outline-action {
  background: color-mix(in srgb, var(--ls-color-text-inverse) 10%, transparent) !important;
  border-color: var(--ls-color-text-inverse) !important;
  color: var(--ls-color-text-inverse) !important;
}
.ls-inverse-outline-action:is(:hover, :focus-visible) {
  background: var(--ls-color-text-inverse) !important;
  color: var(--ls-color-bg-inverse) !important;
}

/* Higher specificity than late Bootstrap/Element Plus bundles. These are
 * surfaces owned by the web UI; photos and document contents stay intrinsic. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] body {
  color: var(--ls-color-text);
  background-color: var(--ls-color-bg-muted);
}
html[data-theme="dark"] {
  --el-color-white: var(--ls-color-bg);
  --el-color-black: var(--ls-color-text);
  --el-bg-color: var(--ls-color-bg);
  --el-bg-color-page: var(--ls-color-bg-muted);
  --el-bg-color-overlay: var(--ls-color-bg-subtle);
  --el-fill-color: var(--ls-color-bg-subtle);
  --el-fill-color-light: var(--ls-color-bg-muted);
  --el-fill-color-lighter: var(--ls-color-bg-subtle);
  --el-fill-color-extra-light: var(--ls-color-bg-muted);
  --el-fill-color-dark: var(--ls-color-border);
  --el-fill-color-darker: var(--ls-color-border-hover);
  --el-fill-color-blank: var(--ls-color-bg);
  --el-text-color-primary: var(--ls-color-text);
  --el-text-color-regular: var(--ls-color-text);
  --el-text-color-secondary: var(--ls-color-text-secondary);
  --el-text-color-placeholder: var(--ls-color-text-muted);
  --el-text-color-disabled: var(--ls-color-text-disabled);
  --el-border-color: var(--ls-color-border);
  --el-border-color-light: var(--ls-color-border);
  --el-border-color-lighter: var(--ls-color-border);
  --el-border-color-extra-light: var(--ls-color-border);
  --el-border-color-dark: var(--ls-color-border-hover);
  --el-border-color-darker: var(--ls-color-border-strong);
  --el-disabled-bg-color: var(--ls-color-bg-muted);
  --el-disabled-text-color: var(--ls-color-text-disabled);
  --el-disabled-border-color: var(--ls-color-border);
  --el-mask-color: var(--ls-color-overlay);
  --el-mask-color-extra-light: var(--ls-color-overlay);
}
html[data-theme="dark"] :is(.dropdown-menu, .modal-content, .popover, .card, .list-group-item, .ui-widget-content, .daterangepicker) {
  background-color: var(--ls-color-bg);
  color: var(--ls-color-text);
  border-color: var(--ls-color-border);
}
html[data-theme="dark"] :is(.dropdown-item, .popover-header, .popover-body, .table, .close, .form-control, .custom-select, .bootstrap-select > .dropdown-toggle) {
  color: var(--ls-color-text);
}
html[data-theme="dark"] :is(.form-control, .custom-select, .bootstrap-select > .dropdown-toggle, .input-group-text, .page-link, .daterangepicker .calendar-table) {
  background-color: var(--ls-color-bg);
  border-color: var(--ls-color-border);
  color: var(--ls-color-text);
}
html[data-theme="dark"] :is(.el-input-group__append, .el-input-group__prepend) {
  color: var(--ls-color-text-secondary);
  background-color: var(--ls-color-bg-muted);
  border-color: var(--ls-color-border);
}
html[data-theme="dark"] :is(.dropdown-item:hover, .dropdown-item:focus, .table-hover tbody tr:hover, .daterangepicker td.available:hover) {
  background-color: var(--ls-color-bg-subtle);
  color: var(--ls-color-text);
}
html[data-theme="dark"] :is(.bg-white, .bg-light) { background-color: var(--ls-color-bg) !important; }
html[data-theme="dark"] :is(.text-dark, .text-body, .text-black-50) { color: var(--ls-color-text) !important; }
html[data-theme="dark"] .text-muted { color: var(--ls-color-text-muted) !important; }
html[data-theme="dark"] .btn-outline-secondary {
  color: var(--ls-color-text-secondary);
  border-color: var(--ls-color-border-hover);
}
html[data-theme="dark"] .btn-outline-secondary:is(:hover, :focus-visible, :active, .active) {
  background-color: var(--ls-color-secondary);
  color: var(--ls-color-text-inverse);
}
/* Consent widget: use its public theme variables without changing consent. */
/* GetTerms renders inside a shadow root. Theme its host variables; the
 * provider writes these inline, so the dark overrides need !important. */
html[data-theme="dark"] cookie-widget-wrapper {
  --gt-cookie-bg: var(--ls-color-bg) !important;
  --gt-cookie-text: var(--ls-color-text) !important;
  --gt-cookie-text-rgb: var(--ls-rgb-text) !important;
  --gt-cookie-link-text: var(--ls-color-primary-text) !important;
  --gt-cookie-allow-update-after-close-button-color: var(--ls-color-primary-text) !important;
  --gt-cookie-button-bg: var(--ls-color-primary) !important;
  --gt-cookie-button-bg-rgb: var(--ls-rgb-primary) !important;
  --gt-cookie-button-text: var(--ls-color-text-inverse) !important;
}

html[data-theme="dark"] :is(.table td, .table th, .modal-header, .modal-footer, .dropdown-divider) { border-color: var(--ls-color-border); }
html[data-theme="dark"] .navbar-light .navbar-toggler-icon { filter: invert(1); }
/* Same vector logo: only the navy lettering changes, the red is preserved. */
@media screen { html[data-theme="dark"] .ls-brand-logo { content: url('/img/new/new-logos/Lightyshare-dark.svg'); } }
html[data-theme="dark"] .dp__theme_light {
  --dp-background-color: var(--ls-color-bg);
  --dp-text-color: var(--ls-color-text);
  --dp-hover-color: var(--ls-color-bg-subtle);
  --dp-hover-text-color: var(--ls-color-text);
  --dp-hover-icon-color: var(--ls-color-text-secondary);
  --dp-primary-color: var(--ls-color-primary);
  --dp-primary-disabled-color: var(--ls-color-primary-border);
  --dp-primary-text-color: var(--ls-color-text-inverse);
  --dp-secondary-color: var(--ls-color-text-muted);
  --dp-border-color: var(--ls-color-border);
  --dp-menu-border-color: var(--ls-color-border);
  --dp-border-color-hover: var(--ls-color-border-hover);
  --dp-border-color-focus: var(--ls-color-border-focus);
  --dp-icon-color: var(--ls-color-text-secondary);
  --dp-disabled-color-text: var(--ls-color-text-disabled);
  --dp-scroll-bar-background: var(--ls-color-bg-muted);
  --dp-scroll-bar-color: var(--ls-color-border-hover);
  --dp-success-color: var(--ls-color-success-text);
  --dp-success-color-disabled: var(--ls-color-success-border);
  --dp-danger-color: var(--ls-color-danger-text);
  --dp-marker-color: var(--ls-color-danger-text);
  --dp-disabled-color: var(--ls-color-bg-muted);
  --dp-tooltip-color: var(--ls-color-bg-subtle);
}
html[data-theme="dark"] .el-button--info.is-plain { --el-button-text-color: var(--ls-color-text); }
html[data-theme="dark"] :is(.el-dialog__close, .el-message-box__close, .el-drawer__close) {
  color: var(--ls-color-text-muted);
}
/* This integration mark is monochrome navy on a transparent background. */
html[data-theme="dark"] .integration-logo img[src$="/integrations/booqable.png"] {
  filter: brightness(0) invert(1);
}
html[data-theme="dark"] :is(.el-input, .el-textarea) :is(.el-input__count, .el-input__count-inner) {
  color: var(--ls-color-text-muted);
}
html[data-theme="dark"] .el-button--primary:is(.is-text, .is-link, .is-plain) { --el-button-text-color: var(--ls-color-primary-text); }
html[data-theme="dark"] .el-alert--success, html[data-theme="dark"] .el-tag--success { --el-color-success: var(--ls-color-success-text); }
html[data-theme="dark"] .el-alert--warning, html[data-theme="dark"] .el-tag--warning { --el-color-warning: var(--ls-color-warning-text); }
html[data-theme="dark"] .el-alert--error, html[data-theme="dark"] .el-tag--danger { --el-color-danger: var(--ls-color-danger-text); --el-color-error: var(--ls-color-danger-text); }
html[data-theme="dark"] .el-alert--info, html[data-theme="dark"] .el-tag--info { --el-color-info: var(--ls-color-info-text); }
@media screen {
  /* The light bitmap decoration overwhelms empty tables on dark surfaces. */
  html[data-theme="dark"] .empty-background { background-image: none; }
  /* This asset is a solid grey placeholder, not an equipment/person photo. */
  html[data-theme="dark"] img[src*="/sans-photo.jpg"],
  html[data-theme="dark"] img[src*="/32_32_center_0_0_fit_sans-photo.jpg"] {
    filter: brightness(0.18);
  }
  /* Only monochrome artwork is reversed, never equipment or people photos.
   * Screen blending removes the black matte created by white logo backgrounds. */
  html[data-theme="dark"] .clients-showcase__logo {
    filter: grayscale(1) invert(1);
    mix-blend-mode: screen;
  }
  html[data-theme="dark"] .home-feature-text img.illustration {
    filter: grayscale(1) invert(1);
    mix-blend-mode: screen;
  }
  html[data-theme="dark"] .clients-showcase {
    background: var(--ls-color-bg);
  }
  html[data-theme="dark"] .clients-showcase::before { background: none; }
  html[data-theme="dark"] .clients-showcase__logo-container {
    background: var(--ls-color-bg-subtle);
    border-color: var(--ls-color-border);
  }
  html[data-theme="dark"] .pink-icon-section .pink-icon-inner,
  html[data-theme="dark"] .home-feature-text {
    background: var(--ls-color-bg);
  }
  html[data-theme="dark"] .pink-bg-section { background: var(--ls-color-bg-muted); }
  html[data-theme="dark"] .search-block-section { background: var(--ls-color-bg-muted) !important; }
  html[data-theme="dark"] .btn.btn-blue {
    background: var(--ls-color-bg-subtle) !important;
    color: var(--ls-color-text) !important;
    border-color: var(--ls-color-border);
  }
  html[data-theme="dark"] .btn.btn-blue:is(:hover, :focus-visible) {
    background: var(--ls-color-secondary) !important;
    border-color: var(--ls-color-border-hover);
  }
  /* The OSM emergency base is raster-only. Filter its canvas, leaving DOM
   * markers, popup photos and attribution untouched. Native dark styles need no filter. */
  .ls-map--dark-fallback .mapboxgl-canvas {
    filter: invert(1) hue-rotate(180deg) saturate(0.3) brightness(0.85);
  }
  html[data-theme="dark"] .mapboxgl-ctrl-attrib {
    background: var(--ls-color-bg);
    color: var(--ls-color-text-secondary);
  }
  html[data-theme="dark"] .mapboxgl-ctrl-attrib a { color: var(--ls-color-text-secondary); }
  html[data-theme="dark"] .mapboxgl-ctrl-attrib-button { filter: invert(1); }
  html[data-theme="dark"] .mapboxgl-ctrl-group {
    background: var(--ls-color-bg);
  }
  html[data-theme="dark"] .mapboxgl-ctrl-group button + button { border-color: var(--ls-color-border); }
  html[data-theme="dark"] .mapboxgl-ctrl-icon { filter: invert(1); }
}
@media print { .ls-appearance { display: none !important; } }