/*
 * 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(55 65 81) !important; /* gray-700 */
}

/* 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(55 65 81) !important; /* gray-700 */
  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: rgb(196 181 253) !important; /* violet-300 */
}

/* 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 {
  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 */
}

/* ===========================================
 * 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;
}

/* ===========================================
 * 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 */
}

/* ===========================================
 * 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 */
}