.bootstrap-select .bs-actionsbox .btn-group button {background: #fff !important;color: #374151 !important; font-weight: 500 !important;font-size: 15px !important;box-shadow: none !important;padding: 7px 18px !important;border: 1px solid #d1d5db !important;border-radius: 9999px !important;line-height: 1;display: flex;align-items: center;justify-content: center;transition: border-color 0.2s, color 0.2s;}
.bootstrap-select .bs-actionsbox .btn-group button:hover {color: #0f172a !important;border-color: #0f172a !important;background: #f3f4f6 !important;}
:root {
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 98%;
    --primary-hover: 0 0% 15%;
    --primary-hover-foreground: 0 0% 100%;
    --secondary: 210 20% 95%;
    --secondary-foreground: 0 0% 9%;
    --muted: 210 15% 98%;
    --muted-foreground: 210 10% 40%;
    --accent: 210 15% 85%;
    --accent-foreground: 0 0% 9%;
    --border: 210 20% 90%;
    --input: 210 20% 88%;
    --ring: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
}

/* Theme-aware utility classes */
.bg-primary { background-color: hsl(var(--primary)) !important; }
.text-primary { color: hsl(var(--primary)) !important; }
.text-primary-foreground { color: hsl(var(--primary-foreground)) !important; }
.bg-secondary { background-color: hsl(var(--secondary)) !important; }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)) !important; }
.bg-muted { background-color: hsl(var(--muted)) !important; }
.text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }
.border-primary { border-color: hsl(var(--primary)) !important; }
.border-border { border-color: hsl(var(--border)) !important; }
.bg-card { background-color: hsl(var(--card)) !important; }
.text-card-foreground { color: hsl(var(--card-foreground)) !important; }

/* Override hardcoded black with theme primary color (unless marked to preserve) */
.bg-black:not(.preserve-black),
button.bg-black:not(.preserve-black),
div.bg-black:not(.preserve-black),
a.bg-black:not(.preserve-black),
span.bg-black:not(.preserve-black) {
    background-color: hsl(var(--primary)) !important;
}

.text-black:not(.preserve-black),
.bg-black:not(.preserve-black) {
    color: hsl(var(--primary-foreground)) !important;
}

.border-black:not(.preserve-black) {
    border-color: hsl(var(--primary)) !important;
}

/* Override Tailwind hover states */
.hover\:bg-black:hover:not(.preserve-black),
button.hover\:bg-black:hover:not(.preserve-black),
div.hover\:bg-black:hover:not(.preserve-black),
a.hover\:bg-black:hover:not(.preserve-black) {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.hover\:text-white:hover {
    color: hsl(var(--primary-foreground)) !important;
}

.hover\:border-black:hover:not(.preserve-black) {
    border-color: hsl(var(--primary)) !important;
}

/* Group hover states */
.group:hover .group-hover\:bg-black:not(.preserve-black) {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.group:hover .group-hover\:text-white {
    color: hsl(var(--primary-foreground)) !important;
}

.group:hover .group-hover\:border-black:not(.preserve-black) {
    border-color: hsl(var(--primary)) !important;
}

/* Button styles with theme support */
.btn-primary {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.btn-primary:hover {
    background-color: hsl(var(--primary-hover)) !important;
    color: hsl(var(--primary-hover-foreground)) !important;
}

.btn-secondary {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
}

.btn-secondary:hover {
    opacity: 0.9;
}

/* Card styles */
.card-themed {
    background-color: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
}

/* Input styles */
.input-themed {
    background-color: white;
    border: 1px solid hsl(var(--input));
    color: hsl(var(--card-foreground));
}

.input-themed:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Table borders and hover states */
table {
    border-color: hsl(var(--border)) !important;
}

table th,
table td {
    border-color: hsl(var(--border)) !important;
}

table thead {
    background-color: hsl(var(--muted)) !important;
}

table tbody tr:hover {
    background-color: hsl(var(--muted)) !important;
}

/* Override table border classes */
.border-gray-200,
.border-gray-300 {
    border-color: hsl(var(--border)) !important;
}

/* SVG Icons - inherit color from parent or use primary */
svg.text-gray-400,
svg.text-gray-500,
svg.text-gray-600 {
    color: hsl(var(--muted-foreground)) !important;
}

/* Icons in primary contexts use primary color */
.bg-primary svg,
.text-primary svg,
button.bg-black svg,
button:hover svg,
a:hover svg {
    color: currentColor !important;
}

/* Active/selected state icons */
.active svg,
.selected svg,
[aria-selected="true"] svg {
    color: hsl(var(--primary)) !important;
}

/* Sidebar module selection with theme support */
.module-option {
    transition: all 0.2s ease;
}

.module-option:hover,
.module-option.selected {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-hover-foreground)) !important;
}

.module-option:hover svg,
.module-option.selected svg {
    color: hsl(var(--primary-hover-foreground)) !important;
}

/* Hover effects for navigation and interactive elements */
.hover-primary:hover {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--primary-foreground)) !important;
}

.hover-secondary:hover {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
}

/* Icon hover states */
.hover\:text-gray-400:hover,
.hover\:text-gray-500:hover,
.hover\:text-gray-600:hover {
    color: hsl(var(--primary)) !important;
}

/* Table cell hover icons */
td:hover svg,
tr:hover svg.text-gray-400,
tr:hover svg.text-gray-500 {
    color: hsl(var(--primary)) !important;
}

/* Progress bars and loading indicators */
.progress-bar {
    background-color: hsl(var(--primary));
}

/* Badges and labels */
.badge-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

/* Links */
.link-primary {
    color: hsl(var(--primary));
}

.link-primary:hover {
    opacity: 0.8;
}

/* Focus rings */
*:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Table styles */
.table-row:hover {
    background-color: hsl(var(--muted));
}

/* Table header styling */
.table-header,
thead {
    background-color: hsl(var(--muted)) !important;
    border-color: hsl(var(--border)) !important;
}

/* Table action buttons and icons */
table button:hover,
table a:hover {
    color: hsl(var(--primary)) !important;
}

table button:hover svg,
table a:hover svg {
    color: hsl(var(--primary)) !important;
}

/* Alert/notification styles */
.alert-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Dividers */
.divider {
    background-color: hsl(var(--border));
}

/* Dropdown menu items */
.dropdown-item:hover {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Tab styles */
.tab-active {
    color: hsl(var(--primary));
    border-bottom-color: hsl(var(--primary));
}

/* Switch/toggle styles */
.switch-active {
    background-color: hsl(var(--primary));
}

/* Checkbox and radio button accent */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: hsl(var(--primary));
}

/* Scrollbar theming (webkit browsers) */
::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted));
}

::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--primary));
}

/* Selection highlight */
::selection {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

/* Loading spinner */
.spinner {
    border-top-color: hsl(var(--primary));
}
/* CLEAN DROPDOWN (Fixes big box, shadow, ugly padding) */
.bootstrap-select .dropdown-menu {
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
    padding: 0 !important;
    margin: 4px 0 0 !important;
    display: none !important;
    visibility: hidden !important;
}

/* ACTION BUTTONS (Select All / Deselect All) */
.bootstrap-select .bs-actionsbox {
    padding: 10px 16px !important;
   
    gap: 1.25rem;
  
   
    border-top: 1px solid #e5e7eb;
}
.bootstrap-select.open .dropdown-menu,
.bootstrap-select.show .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    left: -17px !important;
    border: unset !important;
    z-index: 999;
    border: 1px solid #e4e5e7 !important;
    border-radius: 0.5rem !important;
    top: 8px !important;
    width: 100% !important;
}
.bootstrap-select.show .dropdown-menu ul{border: unset !important;}
.bootstrap-select .bs-actionsbox .btn-group {
    display: flex;
    gap: 1rem;
}
.bootstrap-select .bs-actionsbox .btn-group button {
    background: transparent !important;
    color: #111827 !important; /* slate-800 */
    font-weight: 500 !important; /* bold */
    font-size: 15px !important;
    box-shadow: none !important;
    padding: 6px 8px !important;
    border: 1px solid #d1d5db !important;
    line-height: 1;
    border-radius: 6px !important;
}
.bootstrap-select .bs-actionsbox .btn-group button:hover {
    color: #0f172a !important; /* darker on hover */
    text-decoration: none;
    background: transparent !important;
}

/* small spacing tweak for stacked buttons */
.bootstrap-select .bs-actionsbox .btn-group button + button {
    margin-left: 6px;
}



/* BUTTON TOP AREA (Select Company…) */
.bootstrap-select .dropdown-toggle {
    width: 100% !important;
    /* background: #fff !important;
    border: 1px solid #d1d5db !important;
    padding: 10px 14px !important; */
    border-radius: 0.75rem !important;
    font-size: 14px !important;
    height: auto !important;
    /*min-height: 42px !important;*/
    display: flex !important;
    align-items: center !important;
}

/* Remove Bootstrap default caret */
.bootstrap-select .dropdown-toggle::after {
    display: none !important;
}

/* Remove dotted/focus outline added by browsers for bootstrap-select controls */
.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select .dropdown-toggle:focus .filter-option,
.bootstrap-select .filter-option:focus,
.bootstrap-select .dropdown-toggle:active,
.bootstrap-select .dropdown-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Also clear outline for the internal search input when focused */
.bootstrap-select .bs-searchbox input:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* SEARCH BOX */
.bootstrap-select .bs-searchbox {
  
    border-bottom: 1px solid #e5e7eb;
}

.bootstrap-select .bs-searchbox input {
    border-radius: 8px !important;
    border: 1px solid #d1d5db;
    padding: 8px 12px !important;
}

/* Position the injected lucide search SVG inside the bs-searchbox */
.bootstrap-select .bs-searchbox {
    position: relative;
}
.bootstrap-select .bs-searchbox .lucide-search {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #374151; /* slate-700 to match screenshot */
    opacity: 0.9;
    pointer-events: none;
}
.bootstrap-select .bs-searchbox input {
    padding-left: 38px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    height: 40px !important;
    font-size: .875rem !important;
    line-height: 1.25rem !important;
  
    color: #374151 !important;
    border-radius: 8px !important;
    border: unset !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 400 !important;
}

.bootstrap-select .bs-searchbox input::placeholder {
    color: #6B7280 !important; /* gray-500 */
    opacity: 1 !important;
}


/* DROPDOWN OPTIONS */
.bootstrap-select .dropdown-menu li a {
    padding: 10px 16px !important;
    font-size: 14px !important;
    color: #374151 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 42px !important;
}

/* Move checkmark to left side and reserve space */
.bootstrap-select .dropdown-menu li a .bs-ok-default {
    position: static !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
    float: none !important;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: hidden !important;
    color: #000 !important;
}

/* Show checkmark only when selected */
.bootstrap-select .dropdown-menu li.selected a .bs-ok-default {
    visibility: visible !important;
    color: #000 !important;
}

/* Make tick SVG look proper */
.bootstrap-select .dropdown-menu li a .bs-ok-default:before {
    content: '';
}

/* Text should take remaining space */
.bootstrap-select .dropdown-menu li a span.text {
    margin-left: 0 !important;
    flex: 1 !important;
    white-space: nowrap !important;
    font-size: .875rem !important;
    line-height: 1.25rem !important;
    font-weight: 400 !important;
    
}


/* Hover - takes priority over selected */
.bootstrap-select .dropdown-menu li a:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Hover checkmark should be white */
.bootstrap-select .dropdown-menu li a:hover .bs-ok-default {
    color: #fff !important;
}

/* Selected option - default state */
.bootstrap-select .dropdown-menu li.selected a {
    background: #000 !important;
    color: #fff !important;
}

/* Selected checkmark should be white when item has black background */
.bootstrap-select .dropdown-menu li.selected a .bs-ok-default {
    color: #fff !important;
}

/* When hovering any item, remove background from selected items */
.bootstrap-select .dropdown-menu li:hover ~ li.selected a,
.bootstrap-select .dropdown-menu:has(li:hover) li.selected a:not(:hover) {
    background: transparent !important;
    color: #374151 !important;
}

/* Force selected checkmark to be black when hovering another option */
.bootstrap-select .dropdown-menu:has(li:hover) li.selected a:not(:hover) .bs-ok-default {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
    filter: brightness(0) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #000 !important;
}

/* Force all child elements of checkmark to be black */
.bootstrap-select .dropdown-menu:has(li:hover) li.selected a:not(:hover) .bs-ok-default * {
    color: #000 !important;
    fill: #000 !important;
    stroke: #000 !important;
    filter: brightness(0) !important;
    -webkit-text-fill-color: #000 !important;
}

/* Force glyphicon to be black */
.bootstrap-select .dropdown-menu:has(li:hover) li.selected a:not(:hover) .glyphicon-ok {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* Fix width overflow issue */
.bootstrap-select {
    width: 100% !important;
}


.placeholder-black::placeholder {color: #09090b !important;font-weight: 400 !important;font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Color Emoji", "Segoe UI Emoji" !important;font-size: 14px !important;line-height: 20px !important;opacity: 1 !important;}
input, textarea, select, button {border-color: #d7d8da !important;}.border, .border-input, .border-\[\#d7d8da\] { border-color: #d7d8da !important; }
        input:focus, textarea:focus, select:focus, button:focus,
        input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
            box-shadow: 0 0 0 1px #d7d8da !important;
            outline: none !important;
        }
#quickActionsToggle:checked ~ * ~ * ~ * ~ * ~ * body,
#currencyConverterToggle:checked ~ * ~ * ~ * ~ * ~ * body,
#timezoneConverterToggle:checked ~ * ~ * ~ * ~ * ~ * body,
#todoToggle:checked ~ * ~ * ~ * ~ * ~ * body {
    overflow: hidden !important;
}

body:has(#quickActionsToggle:checked),
body:has(#currencyConverterToggle:checked),
body:has(#timezoneConverterToggle:checked),
body:has(#todoToggle:checked) {
    overflow: hidden !important;
}