/* Base dark theme overrides */
body.dark-theme {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* Main content areas */
body.dark-theme #content,
body.dark-theme #pageWrapper,
body.dark-theme #contentWrapper {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* TopBar specific styling for Bryx layout */
body.dark-theme .TopBar {
  background-color: #2d3748 !important;
  color: #f7fafc !important;
  border-bottom: 1px solid #4a5568 !important;
  box-shadow: none !important;
}

body.dark-theme .TopBar__agencyName {
  color: #f7fafc !important;
}

body.dark-theme .TopBar__userName {
  color: #e2e8f0 !important;
}

/* Nav header - preserve the red background (emergency-red-dark token) */
body.dark-theme .Nav__header {
  background-color: var(--emergency-red-dark) !important;
  color: white !important;
}

/* Bryx red header - keep the red but darken it slightly for dark mode */
body.dark-theme .ui.menu.red,
body.dark-theme .ui.red.menu {
  background-color: #c53030 !important;
}

/* Sidebar dark theme */
body.dark-theme .ui.sidebar,
body.dark-theme nav,
body.dark-theme .sidebar {
  background-color: var(--bg-nav-primary) !important;
  color: #f7fafc !important;
  border-right: 1px solid #4a5568 !important;
}

/* Semantic UI Menu Dark Theme */
body.dark-theme .ui.menu:not(.tabular) {
  background-color: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Tabular menus specifically */
body.dark-theme .ui.menu.tabular {
  background-color: #2d3748 !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-theme .ui.menu .item {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}

body.dark-theme .ui.menu .item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #f7fafc !important;
}

body.dark-theme .ui.menu .active.item {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Semantic UI Button Dark Theme */
body.dark-theme .ui.button {
  background-color: #4a5568 !important;
  color: #e2e8f0 !important;
  border: 1px solid #718096 !important;
}

body.dark-theme .ui.button:hover {
  background-color: #718096 !important;
  color: #f7fafc !important;
}

body.dark-theme .ui.primary.button {
  background-color: #3182ce !important;
  color: #ffffff !important;
}

body.dark-theme .ui.primary.button:hover {
  background-color: #2c5aa0 !important;
}

body.dark-theme .ui.secondary.button {
  background-color: #718096 !important;
  color: #ffffff !important;
}

/* Button colors - preserve original colors */
body.dark-theme .ui.green.button,
body.dark-theme .ui.positive.button {
  background-color: #38a169 !important;
  color: #ffffff !important;
  border: 1px solid #38a169 !important;
}

body.dark-theme .ui.green.button:hover,
body.dark-theme .ui.positive.button:hover {
  background-color: #2f855a !important;
}

body.dark-theme .ui.red.button,
body.dark-theme .ui.negative.button {
  background-color: #e53e3e !important;
  color: #ffffff !important;
  border: 1px solid #e53e3e !important;
}

body.dark-theme .ui.red.button:hover,
body.dark-theme .ui.negative.button:hover {
  background-color: #c53030 !important;
}

body.dark-theme .ui.orange.button,
body.dark-theme .ui.warning.button {
  background-color: #dd6b20 !important;
  color: #ffffff !important;
  border: 1px solid #dd6b20 !important;
}

body.dark-theme .ui.orange.button:hover,
body.dark-theme .ui.warning.button:hover {
  background-color: #c05621 !important;
}

body.dark-theme .ui.blue.button {
  background-color: #3182ce !important;
  color: #ffffff !important;
  border: 1px solid #3182ce !important;
}

body.dark-theme .ui.blue.button:hover {
  background-color: #2c5aa0 !important;
}

/* Semantic UI Form Dark Theme */
body.dark-theme .ui.form .field > label,
body.dark-theme .ui.form label,
body.dark-theme label,
body.dark-theme .field label,
body.dark-theme .inline.fields label,
body.dark-theme .ui.form .inline.fields label,
body.dark-theme .ui.form .field .inline.fields label {
  color: #e2e8f0 !important;
}

body.dark-theme .ui.form input,
body.dark-theme .ui.form select,
body.dark-theme .ui.form textarea {
  background-color: #2d3748 !important;
  color: #f7fafc !important;
  border: 1px solid #4a5568 !important;
}

body.dark-theme .ui.form input:focus,
body.dark-theme .ui.form select:focus,
body.dark-theme .ui.form textarea:focus {
  border-color: #63b3ed !important;
  background-color: #2d3748 !important;
}

/* Semantic UI Dropdown Dark Theme */
body.dark-theme .ui.dropdown {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

/* ui dropdwon has no border if it is an icon/contains an img */
body.dark-theme .ui.dropdown:has(img) {
  border: none !important;
}

body.dark-theme .ui.dropdown > .text {
  color: #e2e8f0 !important;
}

body.dark-theme .ui.dropdown .menu {
  background-color: #2d3748 !important;
  border: 1px solid #4a5568 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .ui.dropdown .menu .item {
  color: #e2e8f0 !important;
  background-color: transparent !important;
  border: none !important;
  transition: background-color 0s linear !important; /* prevent flash */
}

/* Hover/focus styling for dropdown items */
body.dark-theme .ui.dropdown .menu .item:hover,
body.dark-theme .ui.dropdown .menu .item:focus {
  background-color: rgba(255, 255, 255, 0.05) !important; /* subtle hover */
  color: #f7fafc !important;
}

body.dark-theme .ui.dropdown .menu .item > *,
body.dark-theme .ui.dropdown .menu .item > * > * {
  background: transparent !important;
  background-color: transparent !important;
}

/* Fallback: clear backgrounds on any deeper descendants within dropdown items */
body.dark-theme .ui.dropdown .menu .item * {
  background: transparent !important;
  background-color: transparent !important;
  transition: background-color 0s linear !important; /* prevent flash on nested elements */
}

/* Lists: prevent white flash and align hover color */
body.dark-theme .ui.list .item,
body.dark-theme .ui.selection.list .item {
  background: transparent !important;
  transition: background-color 0s linear !important;
}
body.dark-theme .ui.selection.list .item:hover,
body.dark-theme .ui.list .item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Do not apply hover to disabled items */
body.dark-theme .ui.dropdown .menu .item.disabled,
body.dark-theme .ui.dropdown .menu .item[disabled] {
  color: #a0aec0 !important;
  cursor: not-allowed !important;
}
body.dark-theme .ui.dropdown .menu .item.disabled:hover,
body.dark-theme .ui.dropdown .menu .item[disabled]:hover {
  background-color: transparent !important;
  color: #a0aec0 !important;
}

/* Remove weird border from TopBar dropdown item text and icons */
body.dark-theme .TopBar .ui.dropdown .menu .item span,
body.dark-theme .TopBar .ui.dropdown .menu .item i.icon {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Use Semantic UI's built-in divider instead of adding a border to the first item */
body.dark-theme .TopBar .ui.dropdown .menu .item:first-child {
  border-bottom: none !important;
}

/* Style the actual divider for TopBar dropdown so spacing matches light mode */
body.dark-theme .TopBar .ui.dropdown .menu .divider {
  border-top: 1px solid #4a5568 !important;
  background-color: transparent !important;
}

/* Remove border from toggle items (like Dark Theme toggle) */
body.dark-theme .TopBar .ui.dropdown .menu .item[title*="Switch"],
body.dark-theme .TopBar .ui.dropdown .menu .item[role="button"][tabindex="0"] {
  border-bottom: none !important;
}

/* Selected/active item styling should take precedence over hover */
body.dark-theme .ui.dropdown .menu .selected.item,
body.dark-theme .ui.dropdown .menu .item.active:not(.disabled) {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Fix dropdown triggers and ellipses menus */
body.dark-theme .ui.dropdown > .dropdown.icon,
body.dark-theme .ui.dropdown > i.icon,
body.dark-theme .ui.dropdown.button,
body.dark-theme .ui.button.dropdown {
  background-color: transparent !important;
  color: #e2e8f0 !important;
  border: none !important;
}

/* Ellipses/dots menu - remove background */
body.dark-theme .ui.dropdown.icon,
body.dark-theme .ui.dropdown > .text,
body.dark-theme button[class*="ellipsis"],
body.dark-theme .ellipsis-menu,
body.dark-theme [role="button"] {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Specifically target vertical ellipses dropdown */
body.dark-theme .ui.right.pointing.dropdown,
body.dark-theme .ui.dropdown:has(i.ellipsis.vertical.icon),
body.dark-theme .ui.dropdown i.ellipsis.vertical.icon {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Semantic UI Header Dark Theme */
body.dark-theme .ui.header {
  color: #f7fafc !important;
}

body.dark-theme .ui.header .sub.header {
  color: #cbd5e0 !important;
}

/* Semantic UI Table Dark Theme */
body.dark-theme .ui.table {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

body.dark-theme .ui.table thead th {
  background-color: #4a5568 !important;
  color: #f7fafc !important;
  border-bottom: 1px solid #718096 !important;
}

/* Table footer dark mode */
body.dark-theme .ui.table tfoot th,
body.dark-theme .ui.table tfoot td,
body.dark-theme .ui.table tfoot.full-width th,
body.dark-theme .ui.table tfoot.full-width td,
body.dark-theme table tfoot th,
body.dark-theme table tfoot td {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border-top: 1px solid #4a5568 !important;
}

/* Disabled header/readout in footer should be readable */
body.dark-theme .ui.header.disabled,
body.dark-theme .ui.disabled.header {
  color: #cbd5e0 !important;
}

body.dark-theme .ui.table tbody tr {
  border-bottom: 1px solid #4a5568 !important;
}

/* Cells should be transparent so row-level backgrounds (striping/selection) show through */
body.dark-theme .ui.table tbody td {
  background-color: transparent !important;
}

/* Remove generic hover highlight; selected rows have their own hover style below */
/* (Intentionally no hover styling for non-selected rows) */

/* Selected row highlight in dark mode */
body.dark-theme .ui.table tbody tr.active,
body.dark-theme .ui.table tbody tr.active > td {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* No hover delta for selected rows */
body.dark-theme .ui.table tbody tr.active:hover,
body.dark-theme .ui.table tbody tr.active:hover > td {
  background-color: rgba(255, 255, 255, 0.22) !important; /* same as non-hover selected */
}

/* No hover highlight for clickable/selectable rows in dark mode */
/* (handled by the generic non-active hover neutralization below) */

/* Striped table styling for dark mode */
body.dark-theme .ui.striped.table tbody tr:nth-child(2n),
body.dark-theme .ui.striped.table tbody tr:nth-child(2n) > td,
body.dark-theme .ui.striped.table > tr:nth-child(2n),
body.dark-theme .ui.striped.table > tr:nth-child(2n) > td {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

/* For striped rows, retain the stripe color on hover when not selected */
body.dark-theme .ui.striped.table tbody tr:nth-child(2n):not(.active):hover,
body.dark-theme .ui.striped.table tbody tr:nth-child(2n):not(.active):hover > td,
body.dark-theme .ui.striped.table > tr:nth-child(2n):not(.active):hover,
body.dark-theme .ui.striped.table > tr:nth-child(2n):not(.active):hover > td {
  background-color: rgba(255, 255, 255, 0.03) !important; /* keep stripe color on hover */
}

body.dark-theme .ui.striped.table tbody tr.active,
body.dark-theme .ui.striped.table tbody tr.active > td,
body.dark-theme .ui.striped.table > tr.active,
body.dark-theme .ui.striped.table > tr.active > td {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* No hover delta for selected rows (striped table variants) */
body.dark-theme .ui.striped.table tbody tr.active:hover,
body.dark-theme .ui.striped.table tbody tr.active:hover > td,
body.dark-theme .ui.striped.table > tr.active:hover,
body.dark-theme .ui.striped.table > tr.active:hover > td {
  background-color: rgba(255, 255, 255, 0.22) !important;
}


/* Enable hover highlight for selectable tables (e.g., selection lists in modals) */
body.dark-theme .ui.table.selectable tbody tr:not(.active):hover,
body.dark-theme .ui.table.selectable > tr:not(.active):hover,
body.dark-theme .ui.table.selectable tbody tr:not(.active):hover > td,
body.dark-theme .ui.table.selectable > tr:not(.active):hover > td {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Ensure striped + selectable uses the stronger hover tint */
body.dark-theme .ui.striped.table.selectable tbody tr:not(.active):hover,
body.dark-theme .ui.striped.table.selectable > tr:not(.active):hover,
body.dark-theme .ui.striped.table.selectable tbody tr:not(.active):hover > td,
body.dark-theme .ui.striped.table.selectable > tr:not(.active):hover > td {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Prevent background-color transition flicker on hover-out */
body.dark-theme .ui.table.selectable tbody tr,
body.dark-theme .ui.table.selectable tbody tr > td {
  transition: background-color 0s linear !important;
}

/* Stable base for non-active rows to avoid flash */
body.dark-theme .ui.table.selectable tbody tr:not(.active),
body.dark-theme .ui.table.selectable tbody tr:not(.active) > td {
  background-color: transparent !important;
}

body.dark-theme .ui.table tbody td:not([style*="border-left"]) {
  color: #e2e8f0 !important;
  border-top: 1px solid #4a5568 !important;
}

body.dark-theme .ui.table tbody td[style*="border-left"] {
  color: #e2e8f0 !important;
  border-top: 1px solid #4a5568 !important;
  /* Preserve the border-left from inline styles */
}

/* Page content and layout dark theme */
body.dark-theme .ui.container,
body.dark-theme .ui.segment,
body.dark-theme .ui.segments {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

/* Make outer attached/tab segments a shade darker for "padding" area */
body.dark-theme .ui.attached.segment,
body.dark-theme .ui.bottom.attached.segment,
body.dark-theme .ui.top.attached.segment,
body.dark-theme .ui.segments,
body.dark-theme .ui.attached.segments,
body.dark-theme .ui.bottom.attached.segments,
body.dark-theme .ui.top.attached.segments {
  background-color: #4a5568 !important;
}

body.dark-theme .underHorizNavContent {
  background-color: #2d3748 !important;
}

/* Accordion titles - fix dark text on dark background */
body.dark-theme .ui.accordion .title {
  color: #f7fafc !important;
}

body.dark-theme .ui.accordion .title:not(.ui) {
  color: #f7fafc !important;
}

/* Nav-tabs active tab should match content area background */
body.dark-theme .nav-tabs > li.active > a,
body.dark-theme .nav-tabs > li.active > a:hover,
body.dark-theme .nav-tabs > li.active > a:focus {
  background-color: #2d3748 !important;
  color: #f7fafc !important;
  border-bottom-color: #2d3748 !important;
}

body.dark-theme .nav-tabs > li > a {
  color: #e2e8f0 !important;
  background-color: transparent !important;
}

body.dark-theme .nav-tabs > li > a:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Tab navigation dark theme - transparent background so empty space stays black */
body.dark-theme .ui.tabular.menu,
body.dark-theme .ui.attached.tabular.menu {
  background: transparent !important; /* keep transparent like light mode */
}

/* Force tabular menu background for modal contexts */
body.dark-theme .ui.modal .ui.tabular.menu,
body.dark-theme .ui.modal .ui.attached.tabular.menu {
  background: transparent !important;
}

body.dark-theme .ui.tabular.menu .item {
  background-color: transparent !important; /* transparent inactive like light mode */
  color: #e2e8f0 !important;
  border: 0px !important; 
  font-weight: 400 !important; /* thinner for inactive */
}

body.dark-theme .ui.tabular.menu .active.item {
  background-color: #2d3748 !important; /* match content area below */
  color: #f7fafc !important;
  border-bottom: 1px solid #2d3748 !important;
  font-weight: 600 !important; /* heavier for active */
}

/* Apply same tab styling to attached tabular menus */
body.dark-theme .ui.attached.tabular.menu .item {
  background-color: transparent !important; /* transparent inactive like light mode */
  color: #e2e8f0 !important;
  border: 0px !important;
  font-weight: 400 !important; /* thinner for inactive */
}

body.dark-theme .ui.attached.tabular.menu .active.item {
  background-color: #2d3748 !important; /* match content area below */
  color: #f7fafc !important;
  border-bottom: 1px solid #2d3748 !important;
  font-weight: 600 !important; /* heavier for active */
}

/* Horizontal nav + content pages: make active tab match panel color below */
body.dark-theme .pageContent.horizontalNavAndContent .Component_HorizontalNav .ui.top.attached.tabular.menu .item {
  background-color: transparent !important; /* show underlying bar */
  color: #e2e8f0 !important;
  font-weight: 400 !important;
}

body.dark-theme .pageContent.horizontalNavAndContent .Component_HorizontalNav .ui.top.attached.tabular.menu .active.item {
  background-color: #2d3748 !important; /* match panel color */
  color: #f7fafc !important;
  border-bottom: 1px solid #2d3748 !important;
  font-weight: 600 !important;
}

/* Search and input dark theme */
body.dark-theme .ui.input input {
  background-color: #4a5568 !important;
  color: #f7fafc !important;
  border: 1px solid #718096 !important;
}

/* Pointing secondary tab menus */
body.dark-theme .ui.pointing.secondary.menu {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #4a5568  !important;
  box-shadow: none !important;
}

body.dark-theme .ui.pointing.secondary.menu .item {
  background: transparent !important; 
  color: #e2e8f0 !important;
  font-weight: 400 !important;
  border: none !important;            
}

body.dark-theme .ui.pointing.secondary.menu .item:hover {
  background: transparent !important;
  color: #f7fafc !important;
}

body.dark-theme .ui.pointing.secondary.menu .active.item {
  background: transparent !important;
  color: #ffffff !important;
  font-weight: 600 !important; 
  border-bottom: 1px solid #ffffff !important;
}

/* Remove default SUI underline/arrow pseudo-element to avoid double indicators */
body.dark-theme .ui.pointing.secondary.menu .item:after {
  content: none !important;
}

body.dark-theme .ui.input input:focus {
  border-color: #63b3ed !important;
}

/* Search icon and input icons */
body.dark-theme .ui.input i.icon,
body.dark-theme .ui.input .icon {
  color: #cbd5e0 !important;
}

body.dark-theme .ui.input .search.icon,
body.dark-theme .ui.input i.search {
  color: #cbd5e0 !important;
}

/* Semantic UI Popup - dark mode */
body.dark-theme [data-suir-portal] .ui.popup,
body.dark-theme .ui.popup,
body.dark-theme .ui.popup.visible {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
  border: 1px solid #4a5568 !important;
  border-radius: 10px !important;
}

body.dark-theme [data-suir-portal] .ui.popup:before,
body.dark-theme [data-suir-portal] .ui.popup:after,
body.dark-theme .ui.popup:before,
body.dark-theme .ui.popup:after {
  background-color: #1a1a1a !important;
  border: 0px !important;
  box-shadow: none !important;
}

/* All icons should be lighter in dark mode, except colored semantic icons */
body.dark-theme .ui.icon:not(.red):not(.green):not(.blue):not(.orange):not(.yellow):not(.teal):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black),
body.dark-theme i.icon:not(.red):not(.green):not(.blue):not(.orange):not(.yellow):not(.teal):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black),
body.dark-theme .icon:not(.red):not(.green):not(.blue):not(.orange):not(.yellow):not(.teal):not(.violet):not(.purple):not(.pink):not(.brown):not(.grey):not(.black) {
  color: #cbd5e0 !important;
}

/* Override delete icons in labels to match text color - must come immediately after general icon rule */
body.dark-theme .ui.label i.delete.icon,
body.dark-theme a.ui.label i.delete.icon,
body.dark-theme .ui.label .delete.icon,
body.dark-theme a.ui.label .delete.icon {
  color: #e2e8f0 !important;
}

/* Make labels darker background with lighter text for better contrast */
body.dark-theme .ui.label,
body.dark-theme a.ui.label,
body.dark-theme .ui.labels .label {
  background-color: #4a5568 !important;
  color: #f7fafc !important;
}

/* Preserve semantic icon colors in dark mode */
body.dark-theme i.red.icon,
body.dark-theme .ui.red.icon {
  color: #e53e3e !important;
}

body.dark-theme i.green.icon,
body.dark-theme .ui.green.icon {
  color: #21ba45 !important;
}

body.dark-theme i.blue.icon,
body.dark-theme .ui.blue.icon {
  color: #3182ce !important;
}

body.dark-theme i.orange.icon,
body.dark-theme .ui.orange.icon {
  color: #dd6b20 !important;
}

body.dark-theme i.yellow.icon,
body.dark-theme .ui.yellow.icon {
  color: #ecc94b !important;
}

body.dark-theme i.teal.icon,
body.dark-theme .ui.teal.icon {
  color: #38b2ac !important;
}

body.dark-theme i.violet.icon,
body.dark-theme .ui.violet.icon {
  color: #805ad5 !important;
}

body.dark-theme i.purple.icon,
body.dark-theme .ui.purple.icon {
  color: #805ad5 !important;
}

body.dark-theme i.pink.icon,
body.dark-theme .ui.pink.icon {
  color: #ed64a6 !important;
}

body.dark-theme a div {
  background: none !important;
}

/* Pagination dark theme */
body.dark-theme .ui.pagination.menu {
  background-color: #2d3748 !important;
}

body.dark-theme .ui.pagination.menu .item {
  background-color: #4a5568 !important;
  color: #e2e8f0 !important;
  border: 1px solid #718096 !important;
}

body.dark-theme .ui.pagination.menu .active.item {
  background-color: #3182ce !important;
  color: #ffffff !important;
}

/* Main page background override */
html.dark-theme,
html.dark-theme body {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* Override inline styles for dark theme */
body.dark-theme div[style*="background"],
body.dark-theme div[style*="background-color"],
body.dark-theme *[style*="background"],
body.dark-theme *[style*="background-color"] {
  background-color: #1a1a1a !important;
}

/* Preserve translucent backdrop for Semantic UI dimmers in dark mode */
body.dark-theme .ui.dimmer,
body.dark-theme .ui.page.dimmer {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Do NOT force dark backgrounds inside Semantic UI portal containers; keep them transparent */
body.dark-theme [data-suir-portal] {
  background: transparent !important;
  background-color: transparent !important;
}
/* Common portal container patterns should also be transparent */
body.dark-theme [class*="portal"],
body.dark-theme [class*="Portal"],
body.dark-theme [class*="-portal-"],
body.dark-theme .suir-portal,
body.dark-theme .ui.popup:has(.content) + div {
  background: transparent !important;
  background-color: transparent !important;
}

/* Fixed-position portal panels (e.g., slide-in sheets) should remain opaque in dark mode */
body.dark-theme [data-suir-portal] > div[style*="position: fixed"] {
  background-color: #2d3748 !important;
  color: #f7fafc !important;
  border-left: 1px solid #4a5568 !important;
}

/* Specific overrides for white/light backgrounds */
body.dark-theme div[style*="background-color: rgb(255, 255, 255)"],
body.dark-theme div[style*="background-color: #ffffff"],
body.dark-theme div[style*="background-color: #FFFFFF"],
body.dark-theme div[style*="background-color: white"],
body.dark-theme div[style*="background: white"],
body.dark-theme div[style*="background: #ffffff"],
body.dark-theme div[style*="background: #FFFFFF"] {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* Force dark theme on main layout containers */
html.dark-theme,
html.dark-theme body,
body.dark-theme,
body.dark-theme #root,
body.dark-theme #content,
body.dark-theme #topContent,
body.dark-theme #pageWrapper,
body.dark-theme #contentWrapper,
body.dark-theme .main-content,
body.dark-theme .page-container,
body.dark-theme .content-wrapper {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* Apply to common container elements, excluding map controls */
body.dark-theme div:not(.Nav):not(.ui.dropdown):not(.menu):not(.item):not([class*="border"]):not([class*="leaflet"]):not([class*="ol-"]):not([class*="map"]):not([class*="control"]),
body.dark-theme section:not([class*="leaflet"]):not([class*="ol-"]):not([class*="map"]):not([class*="control"]),
body.dark-theme article:not([class*="leaflet"]):not([class*="ol-"]):not([class*="map"]):not([class*="control"]),
body.dark-theme main:not([class*="leaflet"]):not([class*="ol-"]):not([class*="map"]):not([class*="control"]),
body.dark-theme aside:not([class*="leaflet"]):not([class*="ol-"]):not([class*="map"]):not([class*="control"]) {
  /* Use transparent so child containers don't paint their own backgrounds */
  background-color: transparent;
  color: inherit;
}

/* Override any white backgrounds specifically */
body.dark-theme [style*="background: white"],
body.dark-theme [style*="background-color: white"],
body.dark-theme [style*="background: #fff"],
body.dark-theme [style*="background-color: #fff"],
body.dark-theme [style*="background: #ffffff"],
body.dark-theme [style*="background-color: #ffffff"],
body.dark-theme .white,
body.dark-theme .ui.white {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* Table rows and cells specific styling */
body.dark-theme table,
body.dark-theme .ui.table {
  background-color: #2d3748 !important;
}

body.dark-theme table td:not([style*="border-left"]),
body.dark-theme .ui.table td:not([style*="border-left"]) {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border-color: #4a5568 !important;
}

body.dark-theme table th:not([style*="border-left"]),
body.dark-theme .ui.table th:not([style*="border-left"]) {
  /* background-color: #2d3748 !important; */
  color: #e2e8f0 !important;
  border-color: #4a5568 !important;
}

/* For table cells WITH border-left, only change background and color */
body.dark-theme table td[style*="border-left"],
body.dark-theme .ui.table td[style*="border-left"] {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  /* DO NOT touch border-color here */
}

/* Semantic UI Card Dark Theme */
body.dark-theme .ui.card {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.dark-theme .ui.card > .content > .header {
  color: #f7fafc !important;
}

body.dark-theme .ui.card > .content > .description {
  color: #cbd5e0 !important;
}

/* Semantic UI Modal Dark Theme */
body.dark-theme .ui.modal {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

body.dark-theme .ui.modal > .header {
  background-color: #4a5568 !important;
  color: #f7fafc !important;
  border-bottom: 1px solid #718096 !important;
}

body.dark-theme .ui.modal > .content {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
}

body.dark-theme .ui.modal > .actions {
  background-color: #4a5568 !important;
  border-top: 1px solid #718096 !important;
}

/* Modal overlay/dimmer - lighter background */
body.dark-theme .ui.dimmer {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

body.dark-theme .ui.modal.dimmer,
body.dark-theme .ui.page.dimmer {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Semantic UI Segment Dark Theme */
body.dark-theme .ui.segment {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

body.dark-theme .ui.segment.inverted {
  background-color: #1a1a1a !important;
  color: #f7fafc !important;
}

/* Semantic UI Message Dark Theme */
body.dark-theme .ui.message {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

body.dark-theme .ui.positive.message {
  background-color: #2f855a !important;
  color: #ffffff !important;
  border: 1px solid #38a169 !important;
}

body.dark-theme .ui.negative.message {
  background-color: #e53e3e !important;
  color: #ffffff !important;
  border: 1px solid #f56565 !important;
}

body.dark-theme .ui.warning.message {
  background-color: #dd6b20 !important;
  color: #ffffff !important;
  border: 1px solid #ed8936 !important;
}

body.dark-theme .ui.info.message {
  background-color: #3182ce !important;
  color: #ffffff !important;
  border: 1px solid #4299e1 !important;
}

/* Semantic UI Sidebar Dark Theme */
body.dark-theme .ui.sidebar {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border-right: 1px solid #4a5568 !important;
}

/* Semantic UI Loader Dark Theme */
body.dark-theme .ui.loader {
  color: #e2e8f0 !important;
}

body.dark-theme .ui.loader:before {
  border-color: rgba(226, 232, 240, 0.2) !important;
}

body.dark-theme .ui.loader:after {
  border-color: #e2e8f0 transparent transparent !important;
}

/* Emergency Services specific colors */
body.dark-theme .emergency-red {
  background-color: #e53e3e !important;
  color: #ffffff !important;
}

body.dark-theme .emergency-green {
  background-color: #38a169 !important;
  color: #ffffff !important;
}

body.dark-theme .emergency-yellow {
  background-color: #dd6b20 !important;
  color: #ffffff !important;
}

/* Preserve response option border colors */
body.dark-theme [style*="border-color: green"],
body.dark-theme [style*="border-color: #38a169"],
body.dark-theme [style*="border: 2px solid green"],
body.dark-theme .green-border {
  border-color: #38a169 !important;
}

body.dark-theme [style*="border-color: red"],
body.dark-theme [style*="border-color: #e53e3e"],
body.dark-theme [style*="border: 2px solid red"],
body.dark-theme .red-border {
  border-color: #e53e3e !important;
}

/* Checkbox styling for response options */
body.dark-theme .ui.checkbox input[type="checkbox"]:checked ~ .box:before,
body.dark-theme .ui.checkbox input[type="checkbox"]:checked ~ label:before {
  background-color: #3182ce !important;
  border-color: #3182ce !important;
}

body.dark-theme .ui.checkbox .box:before,
body.dark-theme .ui.checkbox label:before {
  background-color: #4a5568 !important;
  border: 1px solid #718096 !important;
}

/* Scrollbars Dark Theme */
body.dark-theme ::-webkit-scrollbar {
  width: 12px;
  background-color: #2d3748;
}

body.dark-theme ::-webkit-scrollbar-track {
  background-color: #1a1a1a;
}

body.dark-theme ::-webkit-scrollbar-thumb {
  background-color: #4a5568;
  border-radius: 6px;
}

body.dark-theme ::-webkit-scrollbar-thumb:hover {
  background-color: #718096;
}

/* Fix black text in dark mode */
body.dark-theme [style*="color: black"],
body.dark-theme [style*="color: #000"],
body.dark-theme [style*="color: #000000"],
body.dark-theme [style*="color: rgb(0, 0, 0)"],
body.dark-theme .black.text {
  color: #e2e8f0 !important;
}

/* Force all labels to be light colored, even with inline styles */
body.dark-theme label[style] {
  color: #e2e8f0 !important;
}

/* Hover effects for delete icons in labels */
body.dark-theme .ui.label i.delete.icon:hover,
body.dark-theme a.ui.label i.delete.icon:hover,
body.dark-theme .ui.label .delete.icon:hover,
body.dark-theme a.ui.label .delete.icon:hover {
  color: #f7fafc !important;
}

/* Reset for elements that should maintain their colors */
body.dark-theme img,
body.dark-theme svg,
body.dark-theme canvas,
body.dark-theme video,
body.dark-theme iframe {
  background-color: transparent !important;
  color: initial !important;
}

/* Preserve button text colors */
body.dark-theme .ui.green.button,
body.dark-theme .ui.red.button,
body.dark-theme .ui.blue.button,
body.dark-theme .ui.orange.button,
body.dark-theme .ui.positive.button,
body.dark-theme .ui.negative.button,
body.dark-theme .ui.primary.button {
  color: #ffffff !important;
}

/* Only target class-based borders, not inline styles */
body.dark-theme [class*="border-"]:not([style]) {
  border-color: inherit !important;
}

/* Ensure readable text for content elements */
body.dark-theme .ui.modal .content,
body.dark-theme .ui.segment,
body.dark-theme .ui.table,
body.dark-theme .ui.form,
body.dark-theme .content,
body.dark-theme .text-content {
  color: #e2e8f0 !important;
}

body.dark-theme .content {
  background: none !important;
}

/* Fix map text visibility */
body.dark-theme .leaflet-popup-content,
body.dark-theme .leaflet-popup,
body.dark-theme .leaflet-tooltip {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border: 1px solid #4a5568 !important;
}

body.dark-theme .leaflet-popup-content-wrapper {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
}

body.dark-theme .leaflet-popup-tip {
  background-color: #2d3748 !important;
}

/* Map control containers - make transparent */
body.dark-theme .leaflet-control-zoom,
body.dark-theme .leaflet-control-layers,
body.dark-theme .leaflet-control,
body.dark-theme .leaflet-bar {
  background-color: rgba(255, 255, 255, 0.8) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Map control buttons (zoom +/-, layers, etc.) */
body.dark-theme .leaflet-control-zoom a,
body.dark-theme .leaflet-control-layers-toggle,
body.dark-theme .leaflet-control a,
body.dark-theme .leaflet-bar a {
  background-color: rgba(255, 255, 255, 0.576) !important;
  color: #2d3748 !important;
  text-decoration: none !important;
  backdrop-filter: blur(2px) !important;
}

/* Specific styling for layers control to ensure icon visibility */
body.dark-theme .leaflet-control-layers-toggle {
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url(/node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/images/layers.png) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 26px 26px !important;
  border: 1px solid #cbd5e0 !important;
  filter: none !important;
}

/* Ensure layers control retina image is visible */
body.dark-theme .leaflet-retina .leaflet-control-layers-toggle {
  background-color: rgba(255, 255, 255, 0.95) !important;
  background-image: url(/node_modules/.pnpm/leaflet@1.9.4/node_modules/leaflet/dist/images/layers-2x.png) !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: 26px 26px !important;
  border: 1px solid #cbd5e0 !important;
  filter: none !important;
}

/* Layers control dropdown list styling */
body.dark-theme .leaflet-control-layers-list {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: 4px !important;
  padding: 8px !important;
  backdrop-filter: blur(2px) !important;
}

/* Layers control labels and text */
body.dark-theme .leaflet-control-layers-list label {
  color: #2d3748 !important;
  margin-bottom: 4px !important;
}

/* Layers control radio buttons */
body.dark-theme .leaflet-control-layers-selector {
  margin-right: 6px !important;
}

/* Layers control base and overlays sections */
body.dark-theme .leaflet-control-layers-base,
body.dark-theme .leaflet-control-layers-overlays {
  margin-bottom: 4px !important;
}

/* Layers control separator */
body.dark-theme .leaflet-control-layers-separator {
  border-top: 1px solid #cbd5e0 !important;
  margin: 6px 0 !important;
}

body.dark-theme .leaflet-control-zoom a:hover,
body.dark-theme .leaflet-control-layers-toggle:hover,
body.dark-theme .leaflet-control a:hover,
body.dark-theme .leaflet-bar a:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  color: #1a1a1a !important;
}

/* OpenLayers map controls (if using OpenLayers) */
body.dark-theme .ol-control {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-theme .ol-control button,
body.dark-theme .ol-zoom-in,
body.dark-theme .ol-zoom-out {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #2d3748 !important;
  border: 1px solid #cbd5e0 !important;
  backdrop-filter: blur(2px) !important;
}

body.dark-theme .ol-control button:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  color: #1a1a1a !important;
}

/* Generic map control buttons */
body.dark-theme button[title*="Zoom"],
body.dark-theme .map-control,
body.dark-theme .map-controls button,
body.dark-theme [class*="map"] button,
body.dark-theme [id*="map"] button,
body.dark-theme [class*="control"] button {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #2d3748 !important;
  border: 1px solid #cbd5e0 !important;
  backdrop-filter: blur(2px) !important;
}

body.dark-theme button[title*="Zoom"]:hover,
body.dark-theme .map-control:hover,
body.dark-theme .map-controls button:hover,
body.dark-theme [class*="map"] button:hover,
body.dark-theme [id*="map"] button:hover,
body.dark-theme [class*="control"] button:hover {
  background-color: rgba(255, 255, 255, 1) !important;
  color: #1a1a1a !important;
}

/* Site surveys list - make blue links lighter for better dark mode contrast */
body.dark-theme .ui.list .list > .item a.header,
body.dark-theme .ui.list > .item a.header {
  color: #63b3ed !important;
}

body.dark-theme .ui.list .list > .item a.description,
body.dark-theme .ui.list > .item a.description {
  color: #7bafd5 !important;
}

body.dark-theme .translation-row-container .title {
  color: #f7fafc !important;
}