/*
 * Dark Mode Theme for Avo Admin
 * Loaded only on Avo pages via _pre_head partial
 * All selectors scoped to body.bg-application to prevent leaking into main app
 */

/* ===========================================
 * APPLICATION BACKGROUND
 * =========================================== */
body.bg-application {
  background-color: rgb(17 24 39) !important; /* gray-900 */
}

/* ===========================================
 * MAIN CONTENT PANELS - Dark backgrounds
 * Scoped to Avo's body class
 * =========================================== */
body.bg-application .bg-white {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

/* Card/panel styling */
body.bg-application [data-panel-target="panel"],
body.bg-application .rounded-lg.bg-white,
body.bg-application .shadow.bg-white,
body.bg-application .border.bg-white {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * NAVBAR - Top navigation bar
 * =========================================== */
body.bg-application header,
body.bg-application nav.border-b,
body.bg-application .border-b.bg-white {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * SIDEBAR - Navigation sidebar
 * =========================================== */
body.bg-application .bg-gray-50,
body.bg-application aside.bg-gray-50,
body.bg-application [data-controller="sidebar"],
body.bg-application [data-sidebar-target="sidebar"] {
  background-color: rgb(17 24 39) !important; /* gray-900 */
}

/* Sidebar container and wrapper */
body.bg-application .sidebar-content,
body.bg-application [data-sidebar-target="content"] {
  background-color: rgb(17 24 39) !important; /* gray-900 */
}

/* ===========================================
 * AVO MENU - Sections, Links, Groups
 * =========================================== */

/* All menu text - catch-all for any black text */
body.bg-application [data-controller="sidebar"] *,
body.bg-application [data-sidebar-target="sidebar"] * {
  color: rgb(209 213 219); /* gray-300 - default for all sidebar text */
}

/* Menu section headers (Dashboards, People, MLS, etc.) */
body.bg-application [data-controller="menu-section"],
body.bg-application [data-menu-section],
body.bg-application .menu-section {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* Section header buttons (collapsible sections) */
body.bg-application [data-controller="menu-section"] > button,
body.bg-application [data-controller="sidebar"] button,
body.bg-application .menu-section-header,
body.bg-application .sidebar-section button {
  color: rgb(229 231 235) !important; /* gray-200 */
  background-color: transparent !important;
}

body.bg-application [data-controller="menu-section"] > button:hover,
body.bg-application [data-controller="sidebar"] button:hover {
  color: white !important;
  background-color: rgb(124 58 237) !important; /* violet-600 - readable hover */
}

/* Section header text/span */
body.bg-application [data-controller="menu-section"] > button span,
body.bg-application [data-controller="sidebar"] button span,
body.bg-application .menu-section-title {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* Menu links (individual items) */
body.bg-application [data-menu-key-value] a,
body.bg-application .sidebar-menu a,
body.bg-application [data-controller="menu-section"] a,
body.bg-application .menu-item a,
body.bg-application .menu-link,
body.bg-application aside a {
  color: rgb(209 213 219) !important; /* gray-300 */
}

body.bg-application [data-menu-key-value] a:hover,
body.bg-application .sidebar-menu a:hover,
body.bg-application [data-controller="menu-section"] a:hover,
body.bg-application .menu-item a:hover,
body.bg-application .menu-link:hover,
body.bg-application aside a:hover {
  background-color: rgb(124 58 237) !important; /* violet-600 - readable hover */
  color: white !important;
}

/* Active menu item */
body.bg-application [data-menu-key-value] a[data-active="true"],
body.bg-application .sidebar-menu a.active,
body.bg-application [data-controller="menu-section"] a[data-active="true"],
body.bg-application .menu-item a.active,
body.bg-application aside a[data-active="true"],
body.bg-application a[aria-current="page"] {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
}

body.bg-application a[aria-current="page"] svg,
body.bg-application [data-active="true"] svg {
  color: white !important;
}

/* Menu group labels */
body.bg-application .menu-group-label,
body.bg-application [data-controller="menu-group"] > span,
body.bg-application .group-label {
  color: rgb(156 163 175) !important; /* gray-400 */
  font-weight: 600;
}

/* Menu icons (heroicons) */
body.bg-application [data-controller="sidebar"] svg,
body.bg-application [data-controller="menu-section"] svg,
body.bg-application .menu-icon,
body.bg-application aside svg {
  color: rgb(167 139 250) !important; /* violet-400 */
}

body.bg-application [data-controller="sidebar"] a:hover svg,
body.bg-application [data-controller="menu-section"] a:hover svg,
body.bg-application aside a:hover svg {
  color: white !important; /* white for better contrast on violet bg */
}

/* Chevron/arrow icons for collapsible sections */
body.bg-application [data-controller="menu-section"] button svg,
body.bg-application .menu-chevron {
  color: rgb(139 92 246) !important; /* violet-500 */
}

/* Dividers in sidebar */
body.bg-application [data-controller="sidebar"] hr,
body.bg-application aside hr {
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * TEXT COLORS - Light text on dark backgrounds
 * =========================================== */
body.bg-application .text-gray-900 {
  color: rgb(243 244 246) !important; /* gray-100 */
}

body.bg-application .text-gray-800 {
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application .text-gray-700 {
  color: rgb(209 213 219) !important; /* gray-300 */
}

body.bg-application .text-gray-600 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

body.bg-application .text-gray-500 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* ===========================================
 * LINKS - Purple/Violet colored links
 * =========================================== */
body.bg-application a.text-primary-500,
body.bg-application a.text-blue-600,
body.bg-application .resource-index a:not(.btn) {
  color: rgb(167 139 250) !important; /* violet-400 */
}

body.bg-application a.text-primary-500:hover,
body.bg-application a.text-blue-600:hover {
  color: rgb(196 181 253) !important; /* violet-300 */
}

/* ===========================================
 * TABLES
 * =========================================== */
body.bg-application table {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

body.bg-application thead,
body.bg-application thead tr,
body.bg-application th {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  color: rgb(229 231 235) !important; /* gray-200 */
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

body.bg-application tbody tr {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application tbody tr:hover {
  background-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application td {
  color: rgb(229 231 235) !important; /* gray-200 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * FORM INPUTS
 * =========================================== */
body.bg-application input[type="text"],
body.bg-application input[type="email"],
body.bg-application input[type="password"],
body.bg-application input[type="number"],
body.bg-application input[type="search"],
body.bg-application input[type="url"],
body.bg-application input[type="tel"],
body.bg-application input[type="date"],
body.bg-application input[type="datetime-local"],
body.bg-application textarea,
body.bg-application select,
body.bg-application .form-input,
body.bg-application .form-select,
body.bg-application .form-textarea {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  border-color: rgb(75 85 99) !important; /* gray-600 */
  color: white !important;
}

body.bg-application input::placeholder,
body.bg-application textarea::placeholder {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* ===========================================
 * DROPDOWNS AND MENUS
 * =========================================== */
body.bg-application [data-controller="toggle-panel"] > div,
body.bg-application .dropdown-menu,
body.bg-application [role="menu"] {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application [role="menuitem"],
body.bg-application .dropdown-menu a {
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application [role="menuitem"]:hover,
body.bg-application .dropdown-menu a:hover {
  background-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * BUTTONS
 * =========================================== */
body.bg-application .btn-primary,
body.bg-application button.bg-primary-500 {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
}

body.bg-application .btn-primary:hover,
body.bg-application button.bg-primary-500:hover {
  background-color: rgb(139 92 246) !important; /* violet-500 */
}

/* Secondary/outline buttons */
body.bg-application .btn-white,
body.bg-application .bg-white.border {
  border-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* ===========================================
 * PAGINATION
 * =========================================== */
body.bg-application .pagy-nav a,
body.bg-application .pagy-nav span {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  border-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application .pagy-nav a:hover {
  background-color: rgb(75 85 99) !important; /* gray-600 */
}

body.bg-application .pagy-nav .current,
body.bg-application .pagy-nav [aria-current="page"] {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
}

/* ===========================================
 * BADGES AND STATUS INDICATORS
 * =========================================== */
body.bg-application .bg-gray-100 {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application .bg-green-100 {
  background-color: rgb(6 78 59) !important; /* green-900 */
  color: rgb(134 239 172) !important; /* green-300 */
}

body.bg-application .bg-red-100 {
  background-color: rgb(127 29 29) !important; /* red-900 */
  color: rgb(252 165 165) !important; /* red-300 */
}

body.bg-application .bg-yellow-100 {
  background-color: rgb(113 63 18) !important; /* yellow-900 */
  color: rgb(253 224 71) !important; /* yellow-300 */
}

body.bg-application .bg-blue-100 {
  background-color: rgb(30 58 138) !important; /* blue-900 */
  color: rgb(147 197 253) !important; /* blue-300 */
}

/* ===========================================
 * BORDERS
 * =========================================== */
body.bg-application .border-gray-200,
body.bg-application .border-gray-100,
body.bg-application .divide-gray-200 > * {
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application .border-gray-300 {
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

/* ===========================================
 * SEARCH AUTOCOMPLETE
 * =========================================== */
body.bg-application .aa-Panel {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application .aa-Item {
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application .aa-Item:hover,
body.bg-application .aa-Item[aria-selected="true"] {
  background-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application .aa-SourceHeader {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
}

/* Detached search modal (Cmd+K search) */
body.bg-application .aa-DetachedContainer {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

body.bg-application .aa-DetachedContainer .aa-Form {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application .aa-DetachedContainer .aa-Input {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  color: white !important;
}

body.bg-application .aa-DetachedContainer .aa-Source {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

body.bg-application .aa-DetachedContainer .aa-List {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

body.bg-application .aa-DetachedContainer .aa-Item {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  color: rgb(229 231 235) !important; /* gray-200 */
  box-shadow: none !important;
}

body.bg-application .aa-DetachedContainer .aa-Item:hover,
body.bg-application .aa-DetachedContainer .aa-Item[aria-selected="true"] {
  background-color: rgb(75 85 99) !important; /* gray-600 */
}

body.bg-application .aa-DetachedContainer .aa-Item * {
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application .aa-DetachedContainer .aa-Item .text-gray-500,
body.bg-application .aa-DetachedContainer .aa-Item .text-gray-600 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

body.bg-application .aa-DetachedCancelButton {
  color: rgb(229 231 235) !important; /* gray-200 */
  background-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * MODALS
 * =========================================== */
body.bg-application [data-controller="modal"] .bg-white,
body.bg-application .modal-content {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * WIZARD MODAL PEER-CHECKED STATES
 * Preserve orange selection styling in dark mode
 * =========================================== */
body.bg-application dialog .peer:checked ~ .peer-checked\:border-vanaOrange,
body.bg-application [data-controller="modal"] .peer:checked ~ .peer-checked\:border-vanaOrange {
  border-color: rgb(241 103 0) !important; /* vanaOrange */
}

body.bg-application dialog .peer:checked ~ .peer-checked\:bg-orange-100,
body.bg-application [data-controller="modal"] .peer:checked ~ .peer-checked\:bg-orange-100 {
  background-color: rgb(255 237 213) !important; /* orange-100 */
}

body.bg-application dialog .peer:checked ~ .peer-checked\:text-vanaOrange,
body.bg-application [data-controller="modal"] .peer:checked ~ .peer-checked\:text-vanaOrange {
  color: rgb(241 103 0) !important; /* vanaOrange */
}

body.bg-application dialog .peer:checked ~ .peer-checked\:font-medium,
body.bg-application [data-controller="modal"] .peer:checked ~ .peer-checked\:font-medium {
  font-weight: 500 !important;
}

/* Keep unselected pill styling visible in dark mode */
body.bg-application dialog .border-gray-200.bg-white,
body.bg-application [data-controller="modal"] .border-gray-200.bg-white {
  background-color: rgb(55 65 81) !important; /* gray-700 - visible in dark mode */
  border-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(209 213 219) !important; /* gray-300 */
}

/* Hover state for unselected pills */
body.bg-application dialog label:hover .border-gray-200,
body.bg-application [data-controller="modal"] label:hover .border-gray-200 {
  border-color: rgb(107 114 128) !important; /* gray-500 */
  background-color: rgb(75 85 99) !important; /* gray-600 */
}

/* ===========================================
 * WIZARD MODAL - PILL/CARD SELECTION FIXES
 * Fix visibility for property type, sub type selections
 * =========================================== */

/* Dialog background should remain visible */
body.bg-application dialog,
body.bg-application dialog[open] {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* Wizard pill labels - unselected state */
body.bg-application dialog label.cursor-pointer > div,
body.bg-application dialog label.group > div,
body.bg-application dialog .pill-option,
body.bg-application [data-controller="modal"] label.cursor-pointer > div {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  border-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* Pill text visibility */
body.bg-application dialog label span,
body.bg-application dialog label h4,
body.bg-application dialog label p,
body.bg-application [data-controller="modal"] label span,
body.bg-application [data-controller="modal"] label h4,
body.bg-application [data-controller="modal"] label p {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* Pill description text - slightly muted */
body.bg-application dialog label .text-gray-500,
body.bg-application dialog label .text-xs.text-gray-500,
body.bg-application [data-controller="modal"] label .text-gray-500 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Selected pill state - bright orange border and background */
body.bg-application dialog input:checked + div,
body.bg-application dialog input:checked ~ div,
body.bg-application dialog .peer:checked + div,
body.bg-application dialog .peer:checked ~ div:not(.entity-name-input),
body.bg-application [data-controller="modal"] input:checked + div,
body.bg-application [data-controller="modal"] input:checked ~ div,
body.bg-application [data-controller="modal"] .peer:checked + div,
body.bg-application [data-controller="modal"] .peer:checked ~ div:not(.entity-name-input) {
  background-color: rgb(255 237 213) !important; /* orange-100 */
  border-color: rgb(241 103 0) !important; /* vanaOrange */
}

/* Selected pill text - dark for contrast on light orange bg */
body.bg-application dialog input:checked + div span,
body.bg-application dialog input:checked + div h4,
body.bg-application dialog input:checked + div p,
body.bg-application dialog input:checked ~ div span,
body.bg-application dialog input:checked ~ div h4,
body.bg-application dialog .peer:checked + div span,
body.bg-application dialog .peer:checked + div h4,
body.bg-application dialog .peer:checked ~ div span,
body.bg-application dialog .peer:checked ~ div h4,
body.bg-application [data-controller="modal"] input:checked + div span,
body.bg-application [data-controller="modal"] input:checked + div h4,
body.bg-application [data-controller="modal"] .peer:checked + div span,
body.bg-application [data-controller="modal"] .peer:checked + div h4 {
  color: rgb(124 45 18) !important; /* orange-900 - dark text on light bg */
}

body.bg-application dialog input:checked + div .text-gray-500,
body.bg-application dialog input:checked ~ div .text-gray-500,
body.bg-application dialog .peer:checked + div .text-gray-500,
body.bg-application dialog .peer:checked ~ div .text-gray-500,
body.bg-application [data-controller="modal"] input:checked + div .text-gray-500,
body.bg-application [data-controller="modal"] .peer:checked + div .text-gray-500 {
  color: rgb(154 52 18) !important; /* orange-800 */
}

/* Pill hover state - visible feedback */
body.bg-application dialog label:hover > div:not([class*="checked"]),
body.bg-application [data-controller="modal"] label:hover > div:not([class*="checked"]) {
  border-color: rgb(156 163 175) !important; /* gray-400 - brighter border on hover */
  background-color: rgb(75 85 99) !important; /* gray-600 */
}

/* Entity name input styling */
body.bg-application dialog .entity-name-input,
body.bg-application dialog .bg-orange-50,
body.bg-application [data-controller="modal"] .entity-name-input,
body.bg-application [data-controller="modal"] .bg-orange-50 {
  background-color: rgb(255 237 213) !important; /* orange-100 */
  border-color: rgb(241 103 0) !important; /* vanaOrange */
}

body.bg-application dialog .entity-name-input label,
body.bg-application dialog .entity-name-input span,
body.bg-application [data-controller="modal"] .entity-name-input label {
  color: rgb(124 45 18) !important; /* orange-900 */
}

body.bg-application dialog .entity-name-input input,
body.bg-application [data-controller="modal"] .entity-name-input input {
  background-color: white !important;
  border-color: rgb(209 213 219) !important; /* gray-300 */
  color: rgb(17 24 39) !important; /* gray-900 */
}

/* Icons in pills - ensure visibility */
body.bg-application dialog label .fa-solid,
body.bg-application dialog label .fa-regular,
body.bg-application dialog label i,
body.bg-application [data-controller="modal"] label .fa-solid,
body.bg-application [data-controller="modal"] label i {
  color: rgb(167 139 250) !important; /* violet-400 */
}

/* Selected state icons - orange */
body.bg-application dialog input:checked + div .fa-solid,
body.bg-application dialog input:checked + div i,
body.bg-application dialog input:checked ~ div .fa-solid,
body.bg-application dialog input:checked ~ div i,
body.bg-application dialog .peer:checked + div .fa-solid,
body.bg-application dialog .peer:checked + div i,
body.bg-application dialog .peer:checked ~ div .fa-solid,
body.bg-application dialog .peer:checked ~ div i,
body.bg-application [data-controller="modal"] input:checked + div .fa-solid,
body.bg-application [data-controller="modal"] input:checked + div i,
body.bg-application [data-controller="modal"] .peer:checked + div .fa-solid,
body.bg-application [data-controller="modal"] .peer:checked + div i {
  color: rgb(241 103 0) !important; /* vanaOrange */
}

/* Wizard modal section headers */
body.bg-application dialog h2,
body.bg-application dialog h3,
body.bg-application dialog h4,
body.bg-application dialog .text-lg,
body.bg-application dialog .text-xl,
body.bg-application [data-controller="modal"] h2,
body.bg-application [data-controller="modal"] h3,
body.bg-application [data-controller="modal"] h4 {
  color: rgb(243 244 246) !important; /* gray-100 */
}

/* Wizard modal helper text */
body.bg-application dialog .text-sm.text-gray-600,
body.bg-application dialog p.text-gray-600,
body.bg-application [data-controller="modal"] .text-sm.text-gray-600 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Ownership type display badges in slide 2 */
body.bg-application dialog .bg-gradient-to-r,
body.bg-application [data-controller="modal"] .bg-gradient-to-r {
  background: linear-gradient(to right, rgb(55 65 81), rgb(67 56 202)) !important; /* gray-700 to indigo-700 */
}

body.bg-application dialog .bg-white\/50,
body.bg-application [data-controller="modal"] .bg-white\/50 {
  background-color: rgba(55, 65, 81, 0.5) !important; /* gray-700 with opacity */
}

/* Type badges in signers section */
body.bg-application dialog .bg-blue-100.text-blue-700,
body.bg-application [data-controller="modal"] .bg-blue-100.text-blue-700 {
  background-color: rgb(30 58 138) !important; /* blue-900 */
  color: rgb(147 197 253) !important; /* blue-300 */
}

/* Orange buttons in modals */
body.bg-application dialog .bg-vanaOrange,
body.bg-application [data-controller="modal"] .bg-vanaOrange {
  background-color: rgb(241 103 0) !important; /* vanaOrange */
  color: white !important;
}

body.bg-application dialog .bg-vanaOrange:hover,
body.bg-application [data-controller="modal"] .bg-vanaOrange:hover {
  background-color: rgb(234 88 12) !important; /* orange-600 */
}

/* Disabled button state */
body.bg-application dialog button:disabled,
body.bg-application dialog button.bg-gray-300,
body.bg-application [data-controller="modal"] button:disabled,
body.bg-application [data-controller="modal"] button.bg-gray-300 {
  background-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Modal close button */
body.bg-application dialog button[data-action="modal#close"],
body.bg-application [data-controller="modal"] button[data-action="modal#close"] {
  color: rgb(156 163 175) !important; /* gray-400 */
}

body.bg-application dialog button[data-action="modal#close"]:hover,
body.bg-application [data-controller="modal"] button[data-action="modal#close"]:hover {
  color: rgb(229 231 235) !important; /* gray-200 */
  background-color: rgb(55 65 81) !important; /* gray-700 */
}

/* Modal border separators */
body.bg-application dialog .border-b,
body.bg-application dialog .border-t,
body.bg-application [data-controller="modal"] .border-b,
body.bg-application [data-controller="modal"] .border-t {
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* Signers list styling */
body.bg-application dialog .bg-gray-50,
body.bg-application dialog #signers-list .bg-gray-50,
body.bg-application [data-controller="modal"] .bg-gray-50 {
  background-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application dialog #signers-list p,
body.bg-application dialog #signers-list span,
body.bg-application [data-controller="modal"] #signers-list p,
body.bg-application [data-controller="modal"] #signers-list span {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* ===========================================
 * RESOURCE SHOW PAGE
 * =========================================== */
body.bg-application .field-wrapper {
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application .field-label {
  color: rgb(156 163 175) !important; /* gray-400 */
}

body.bg-application .field-value {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* ===========================================
 * FILTERS
 * =========================================== */
body.bg-application [data-controller="boolean-filter"],
body.bg-application [data-controller="select-filter"],
body.bg-application [data-controller="text-filter"] {
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

/* ===========================================
 * DASHBOARD CARDS
 * =========================================== */
body.bg-application [data-controller="card"],
body.bg-application .dashboard-card {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

/* ===========================================
 * CODE / PRE BLOCKS
 * =========================================== */
body.bg-application pre,
body.bg-application code {
  background-color: rgb(17 24 39) !important; /* gray-900 */
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* ===========================================
 * SUPPORT CHAT - Purple hover states
 * =========================================== */
body.bg-application [data-controller="support-chat-admin"] a:hover,
body.bg-application [data-controller="support-chat-admin"] button:hover:not([type="submit"]) {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
}

body.bg-application [data-controller="support-chat-admin"] a {
  color: rgb(167 139 250) !important; /* violet-400 */
}

/* Support chat message bubbles - prevent grey backgrounds on hover */
body.bg-application .message div:hover {
  background-color: inherit !important;
}

/* Visitor message bubble hover */
body.bg-application .message .bg-purple-600:hover {
  background-color: rgb(168 85 247) !important; /* purple-500 - slightly lighter on hover */
}

/* ===========================================
 * CHECKBOXES - Better visibility in dark mode
 * =========================================== */
body.bg-application input[type="checkbox"] {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  border-color: rgb(139 92 246) !important; /* violet-500 */
  accent-color: rgb(139 92 246) !important; /* violet-500 */
}

body.bg-application input[type="checkbox"]:checked {
  background-color: rgb(139 92 246) !important; /* violet-500 */
  border-color: rgb(139 92 246) !important; /* violet-500 */
}

/* Avo specific checkbox styling */
body.bg-application [data-controller="item-select-all"] input[type="checkbox"],
body.bg-application [data-controller="item-selector"] input[type="checkbox"],
body.bg-application .checkbox input[type="checkbox"] {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  border: 2px solid rgb(139 92 246) !important; /* violet-500 border */
}

body.bg-application [data-controller="item-select-all"] input[type="checkbox"]:checked,
body.bg-application [data-controller="item-selector"] input[type="checkbox"]:checked,
body.bg-application .checkbox input[type="checkbox"]:checked {
  background-color: rgb(139 92 246) !important; /* violet-500 */
}

/* ===========================================
 * ACTION MODALS - Fix dark text on dark background
 * =========================================== */
body.bg-application [data-controller="modal"] label,
body.bg-application .modal-content label,
body.bg-application [data-modal-target] label,
body.bg-application .action-form label {
  color: rgb(229 231 235) !important; /* gray-200 */
}

body.bg-application [data-controller="modal"] .font-semibold,
body.bg-application [data-controller="modal"] .font-bold,
body.bg-application [data-controller="modal"] h2,
body.bg-application [data-controller="modal"] h3,
body.bg-application [data-controller="modal"] p,
body.bg-application [data-controller="modal"] span,
body.bg-application .modal-content .font-semibold,
body.bg-application .modal-content p,
body.bg-application .modal-content span {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* Action form field labels */
body.bg-application [data-controller="modal"] .text-gray-500,
body.bg-application [data-controller="modal"] .text-gray-600,
body.bg-application [data-controller="modal"] .text-gray-700 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Form description/helper text in modals */
body.bg-application [data-controller="modal"] .text-sm.text-gray-500,
body.bg-application .modal-content .text-sm {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Select dropdown options in modals */
body.bg-application [data-controller="modal"] select option,
body.bg-application .modal-content select option {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  color: white !important;
}

/* ===========================================
 * SIDEBAR HOVER - Ensure text stays readable
 * =========================================== */
body.bg-application [data-controller="sidebar"] a:hover,
body.bg-application [data-menu-key-value] a:hover,
body.bg-application aside a:hover {
  background-color: rgb(124 58 237) !important; /* violet-600 instead of gray */
  color: white !important;
}

body.bg-application [data-controller="sidebar"] a:hover span,
body.bg-application [data-menu-key-value] a:hover span,
body.bg-application aside a:hover span {
  color: white !important;
}

/* ===========================================
 * USER LISTING DETAILS - Property Features Cards
 * Fix visibility in dark mode for pool/spa, parking, HOA cards
 * =========================================== */

/* Feature cards container borders */
body.bg-application #review-water-features-card,
body.bg-application #review-parkings-card,
body.bg-application #review-hoas-card {
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

/* Feature card titles */
body.bg-application #review-water-features-card .font-medium.text-gray-900,
body.bg-application #review-parkings-card .font-medium.text-gray-900,
body.bg-application #review-hoas-card .font-medium.text-gray-900 {
  color: rgb(243 244 246) !important; /* gray-100 */
}

/* Feature card item text */
body.bg-application #review-water-features-card .text-gray-800,
body.bg-application #review-parkings-card .text-gray-800,
body.bg-application #review-hoas-card .text-gray-800 {
  color: rgb(229 231 235) !important; /* gray-200 */
}

/* Feature card detail text */
body.bg-application #review-water-features-card .text-gray-500,
body.bg-application #review-parkings-card .text-gray-500,
body.bg-application #review-hoas-card .text-gray-500 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Feature card muted text */
body.bg-application #review-water-features-card .text-gray-400,
body.bg-application #review-parkings-card .text-gray-400,
body.bg-application #review-hoas-card .text-gray-400 {
  color: rgb(107 114 128) !important; /* gray-500 */
}

/* Add buttons - make visible in dark mode */
body.bg-application #review-water-features-card .bg-gray-100,
body.bg-application #review-parkings-card .bg-gray-100,
body.bg-application #review-hoas-card .bg-gray-100 {
  background-color: rgb(75 85 99) !important; /* gray-600 */
  color: rgb(209 213 219) !important; /* gray-300 */
}

body.bg-application #review-water-features-card .bg-gray-100:hover,
body.bg-application #review-parkings-card .bg-gray-100:hover,
body.bg-application #review-hoas-card .bg-gray-100:hover {
  background-color: rgb(241 103 0) !important; /* vanaOrange */
  color: white !important;
}

/* Item buttons hover state */
body.bg-application #review-water-features-card button.hover\:bg-gray-50:hover,
body.bg-application #review-parkings-card button.hover\:bg-gray-50:hover,
body.bg-application #review-hoas-card button.hover\:bg-gray-50:hover {
  background-color: rgb(75 85 99) !important; /* gray-600 */
}

/* Icon circles within cards */
body.bg-application #review-water-features-card .bg-blue-100,
body.bg-application #review-parkings-card .bg-blue-100,
body.bg-application #review-hoas-card .bg-blue-100 {
  background-color: rgb(30 58 138) !important; /* blue-900 */
}

body.bg-application #review-water-features-card .bg-purple-100,
body.bg-application #review-parkings-card .bg-purple-100,
body.bg-application #review-hoas-card .bg-purple-100 {
  background-color: rgb(88 28 135) !important; /* purple-900 */
}

body.bg-application #review-water-features-card .bg-slate-100,
body.bg-application #review-parkings-card .bg-slate-100,
body.bg-application #review-hoas-card .bg-slate-100 {
  background-color: rgb(51 65 85) !important; /* slate-700 */
}

body.bg-application #review-water-features-card .bg-emerald-100,
body.bg-application #review-parkings-card .bg-emerald-100,
body.bg-application #review-hoas-card .bg-emerald-100 {
  background-color: rgb(6 78 59) !important; /* emerald-900 */
}

/* Icon colors - make brighter */
body.bg-application #review-water-features-card .text-blue-600,
body.bg-application #review-parkings-card .text-blue-600,
body.bg-application #review-hoas-card .text-blue-600 {
  color: rgb(96 165 250) !important; /* blue-400 */
}

body.bg-application #review-water-features-card .text-purple-600,
body.bg-application #review-parkings-card .text-purple-600,
body.bg-application #review-hoas-card .text-purple-600 {
  color: rgb(192 132 252) !important; /* purple-400 */
}

body.bg-application #review-water-features-card .text-slate-600,
body.bg-application #review-parkings-card .text-slate-600,
body.bg-application #review-hoas-card .text-slate-600 {
  color: rgb(148 163 184) !important; /* slate-400 */
}

body.bg-application #review-water-features-card .text-emerald-600,
body.bg-application #review-parkings-card .text-emerald-600,
body.bg-application #review-hoas-card .text-emerald-600 {
  color: rgb(52 211 153) !important; /* emerald-400 */
}

/* Chevron icons */
body.bg-application #review-water-features-card .text-gray-300,
body.bg-application #review-parkings-card .text-gray-300,
body.bg-application #review-hoas-card .text-gray-300 {
  color: rgb(107 114 128) !important; /* gray-500 */
}

/* Green checkmark icon visibility */
body.bg-application #review-water-features-card .text-green-500,
body.bg-application #review-parkings-card .text-green-500,
body.bg-application #review-hoas-card .text-green-500 {
  color: rgb(34 197 94) !important; /* green-500 - keep bright */
}

/* ===========================================
 * USER LISTING DETAILS - Utility Cards
 * Fix visibility in dark mode for electricity, water, etc.
 * =========================================== */

/* Utility card containers */
body.bg-application [id^="utility-card-"] {
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

body.bg-application [id^="utility-card-"]:hover {
  border-color: rgb(107 114 128) !important; /* gray-500 */
}

/* Utility card titles */
body.bg-application [id^="utility-card-"] .font-medium.text-gray-900,
body.bg-application [id^="utility-card-"] p.font-medium {
  color: rgb(243 244 246) !important; /* gray-100 */
}

/* Utility card provider text */
body.bg-application [id^="utility-card-"] .text-gray-500 {
  color: rgb(156 163 175) !important; /* gray-400 */
}

/* Utility card "tap to add" text */
body.bg-application [id^="utility-card-"] .text-gray-400 {
  color: rgb(107 114 128) !important; /* gray-500 */
}

/* Utility card icon backgrounds */
body.bg-application [id^="utility-card-"] .bg-blue-100 {
  background-color: rgb(30 58 138) !important; /* blue-900 */
}

body.bg-application [id^="utility-card-"] .bg-yellow-100 {
  background-color: rgb(113 63 18) !important; /* yellow-900 */
}

body.bg-application [id^="utility-card-"] .bg-orange-100 {
  background-color: rgb(124 45 18) !important; /* orange-900 */
}

body.bg-application [id^="utility-card-"] .bg-green-100 {
  background-color: rgb(6 78 59) !important; /* green-900 */
}

body.bg-application [id^="utility-card-"] .bg-purple-100 {
  background-color: rgb(88 28 135) !important; /* purple-900 */
}

/* Utility card icon colors - make brighter */
body.bg-application [id^="utility-card-"] .text-blue-600 {
  color: rgb(96 165 250) !important; /* blue-400 */
}

body.bg-application [id^="utility-card-"] .text-yellow-600 {
  color: rgb(250 204 21) !important; /* yellow-400 */
}

body.bg-application [id^="utility-card-"] .text-orange-600 {
  color: rgb(251 146 60) !important; /* orange-400 */
}

body.bg-application [id^="utility-card-"] .text-green-600 {
  color: rgb(74 222 128) !important; /* green-400 */
}

body.bg-application [id^="utility-card-"] .text-purple-600 {
  color: rgb(192 132 252) !important; /* purple-400 */
}

/* Green checkmark on utility cards */
body.bg-application [id^="utility-card-"] .text-green-500 {
  color: rgb(34 197 94) !important; /* green-500 - keep bright */
}

/* ===========================================
 * AVO RESOURCE DESCRIPTION - Full width on index
 * Make description appear above CTA buttons, not inline
 * =========================================== */

/* Target the main header area and make it a column layout */
body.bg-application [data-component-name="avo/index/resource_header"],
body.bg-application [data-controller="index"] > header,
body.bg-application .resource-index > header {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 16px !important;
}

/* Title and actions row */
body.bg-application [data-component-name="avo/index/resource_header"] > .flex,
body.bg-application [data-controller="index"] > header > .flex.justify-between {
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Description should be full width */
body.bg-application [data-component-name="avo/index/resource_header"] [data-slot="description"],
body.bg-application [data-slot="description"],
body.bg-application .description-wrapper,
body.bg-application header .text-sm.text-gray-500 {
  width: 100% !important;
  flex-basis: 100% !important;
  order: 10 !important; /* Push description after title row */
}

/* For Avo 3.x structure */
body.bg-application [data-resource-name] > .px-6 > .flex.flex-col > .flex.justify-between {
  flex-wrap: wrap !important;
}

body.bg-application [data-resource-name] > .px-6 > .flex.flex-col > .flex.justify-between > div:first-child {
  flex-basis: 100% !important;
  margin-bottom: 8px !important;
}

/* ===========================================
 * TAGIFY - Tags input component
 * Fix visibility in dark mode for keywords, contexts fields
 * =========================================== */

/* Override Tagify CSS variables at root level */
body.bg-application .tagify {
  --tag-bg: rgb(124 58 237); /* violet-600 */
  --tag-hover: rgb(139 92 246); /* violet-500 */
  --tag-text-color: white;
  --tag-text-color--edit: white;
  --tag-remove-bg: rgb(109 40 217); /* violet-700 */
  --tag-remove-btn-color: rgba(255, 255, 255, 0.7);
  --tag-remove-btn-color--hover: white;
  --tag-inset-shadow-size: 1.1em;
  --tags-border-color: rgb(75 85 99); /* gray-600 */
  --tags-focus-border-color: rgb(139 92 246); /* violet-500 */
  --input-color: white;
  --placeholder-color: rgb(156 163 175); /* gray-400 */
  --placeholder-color-focus: rgb(156 163 175);
}

/* Tagify container */
body.bg-application .tagify,
body.bg-application tags.tagify {
  background-color: rgb(55 65 81) !important; /* gray-700 */
  border-color: rgb(75 85 99) !important; /* gray-600 */
}

body.bg-application .tagify:focus-within,
body.bg-application tags.tagify:focus-within {
  border-color: rgb(139 92 246) !important; /* violet-500 */
}

/* Individual tags - multiple selector strategies for specificity */
body.bg-application .tagify__tag,
body.bg-application tag.tagify__tag,
body.bg-application .tagify tag,
body.bg-application tags.tagify tag.tagify__tag {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
  --tag-bg: rgb(124 58 237) !important;
}

/* Tag inner div - override any background */
body.bg-application .tagify__tag > div,
body.bg-application tag.tagify__tag > div,
body.bg-application .tagify tag > div {
  background-color: transparent !important;
  background: transparent !important;
  color: white !important;
}

/* Tag text - be very specific */
body.bg-application .tagify__tag-text,
body.bg-application .tagify__tag span.tagify__tag-text,
body.bg-application tag.tagify__tag .tagify__tag-text,
body.bg-application .tagify tag span.tagify__tag-text {
  color: white !important;
}

/* Tag remove button (x) */
body.bg-application .tagify__tag__removeBtn,
body.bg-application tag.tagify__tag .tagify__tag__removeBtn,
body.bg-application .tagify__tag > x,
body.bg-application tag.tagify__tag > x {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.bg-application .tagify__tag__removeBtn:hover,
body.bg-application tag.tagify__tag .tagify__tag__removeBtn:hover,
body.bg-application .tagify__tag > x:hover,
body.bg-application tag.tagify__tag > x:hover {
  color: white !important;
  background-color: rgb(109 40 217) !important; /* violet-700 */
}

/* Tagify input placeholder */
body.bg-application .tagify__input {
  color: white !important;
}

body.bg-application .tagify__input::before {
  color: rgb(156 163 175) !important; /* gray-400 - placeholder */
}

/* Tagify dropdown suggestions */
body.bg-application .tagify__dropdown {
  background-color: rgb(31 41 55) !important; /* gray-800 */
  border-color: rgb(55 65 81) !important; /* gray-700 */
}

body.bg-application .tagify__dropdown__item {
  color: rgb(229 231 235) !important; /* gray-200 */
  background-color: rgb(31 41 55) !important; /* gray-800 */
}

body.bg-application .tagify__dropdown__item:hover,
body.bg-application .tagify__dropdown__item--active {
  background-color: rgb(124 58 237) !important; /* violet-600 */
  color: white !important;
}

/* Force override any inline styles Tagify may add */
body.bg-application .tagify__tag[style],
body.bg-application tag.tagify__tag[style] {
  background-color: rgb(124 58 237) !important;
}

body.bg-application .tagify__tag[style] > div,
body.bg-application tag.tagify__tag[style] > div {
  background: transparent !important;
}