/* ==================== Dark Mode Support ==================== */
/* Applied via [data-theme="dark"] or @media (prefers-color-scheme: dark) when theme is "auto" */

/* Dark mode variables and base styles */
[data-theme="dark"],
html:not([data-theme="light"]):not([data-theme="dark"]) body.dark-mode-auto {
  color-scheme: dark;
}

/* Base dark mode styles - applied when data-theme="dark" or system prefers dark */
/* Using #121212 as recommended by Material Design for dark themes instead of pure black */
[data-theme="dark"] body,
[data-theme="dark"] .chat-room-view,
[data-theme="dark"] .container,
[data-theme="dark"] main {
  background: #121212 !important;
  color: #e0e0e0 !important;
}

/* Headers and titles */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #ffffff !important;
}

/* Chat header background */
[data-theme="dark"] .chat-header {
  background: #1e1e1e !important;
  border-bottom-color: #333 !important;
}

/* Messages container background - dark background */
[data-theme="dark"] #messages-container {
  background: #121212 !important;
}

/* Message wrapper background - transparent to show dark container */
[data-theme="dark"] .message,
[data-theme="dark"] .message-own,
[data-theme="dark"] .message-other {
  background: transparent !important;
  box-shadow: none !important;
}

/* Message bubbles - highlighted backgrounds for contrast */
[data-theme="dark"] .message-bubble.bg-light {
  background: #3a3a3a !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .message-bubble.bg-warning {
  background: #d4a017 !important;
  color: #000000 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Message bubble text - bg-light uses white, bg-warning uses black */
[data-theme="dark"] .message-bubble.bg-light p,
[data-theme="dark"] .message-bubble.bg-light .m-1 {
  color: #ffffff !important;
}

[data-theme="dark"] .message-bubble.bg-warning p,
[data-theme="dark"] .message-bubble.bg-warning .m-1 {
  color: #000000 !important;
}

[data-theme="dark"] .message-bubble.bg-warning .text-white-50 {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* HR separator between messages */
[data-theme="dark"] #messages-container hr {
  border-color: #333 !important;
  opacity: 0.3;
}

/* Message author name and timestamp */
[data-theme="dark"] .message strong {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .message-own strong {
  color: #e0e0e0 !important;
}

/* Text colors in message bubbles */
[data-theme="dark"] .message-bubble .text-muted,
[data-theme="dark"] .message .text-muted {
  color: #adb5bd !important;
}

/* Delete button */
[data-theme="dark"] .delete-message-btn {
  background: transparent !important;
  border: none !important;
  color: #dc3545 !important;
}

/* Input area */
[data-theme="dark"] .chat-input-container,
[data-theme="dark"] #mobile-comment-form {
  background: #1e1e1e !important;
}

[data-theme="dark"] #mobile-comment-content,
[data-theme="dark"] #comment-content,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] #mobile-comment-content::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #adb5bd !important;
}

/* Cards and panels */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .well,
[data-theme="dark"] .context-option,
[data-theme="dark"] .context-item,
[data-theme="dark"] .help-panel,
[data-theme="dark"] .company-section,
[data-theme="dark"] .mobile-employee-card {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .panel-heading,
[data-theme="dark"] .context-header {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .card-body,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .card-text {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .panel-title {
  color: #ffffff !important;
}

[data-theme="dark"] .card-footer,
[data-theme="dark"] .panel-footer {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

/* Context selection page cards */
[data-theme="dark"] .context-option {
  background: #1e1e1e !important;
  border: 1px solid #444 !important;
}

[data-theme="dark"] .context-option:hover {
  border-color: #4a9eff !important;
  box-shadow: 0 2px 4px rgba(74, 158, 255, 0.3) !important;
}

[data-theme="dark"] .context-item {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

[data-theme="dark"] .context-item:hover {
  background: #3d3d3d !important;
  color: #e0e0e0 !important;
}
[data-theme="light"] .context-item:hover {
  background: #e9ecef !important;
  color: #2d2d2d !important;
}
/* Empty document states are now handled in document.css using CSS variables */

[data-theme="dark"] .help-panel {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

/* Employee directory mobile cards */
[data-theme="dark"] .mobile-employee-card {
  background: #2d2d2d !important;
  border: 1px solid #444 !important;
}

[data-theme="dark"] .mobile-employee-name {
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-employee-title {
  color: #aaaaaa !important;
}

[data-theme="dark"] .mobile-employee-contact {
  color: #cccccc !important;
}

[data-theme="dark"] .mobile-employee-contact a {
  color: #4a9eff !important;
}

/* Tables */
[data-theme="dark"] .table {
  color: #e0e0e0 !important;
  background: #1e1e1e !important;
}

[data-theme="dark"] .table thead th {
  background: #2d2d2d !important;
  color: #ffffff !important;
  border-color: #444 !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .table tbody td {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background: #1e1e1e !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
  background: #252525 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background: #2d2d2d !important;
}

/* DetailView widget */
[data-theme="dark"] .detail-view th,
[data-theme="dark"] .detail-view td {
  border-color: #333 !important;
}

[data-theme="dark"] .detail-view > tbody > tr > th {
  background-color: #252525 !important;
  color: #adb5bd !important;
  border-color: #333 !important;
}

[data-theme="dark"] .detail-view > tbody > tr > td {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}

[data-theme="dark"] .table-bordered {
  border-color: #333 !important;
}

[data-theme="dark"] .table-bordered > tbody > tr > th,
[data-theme="dark"] .table-bordered > tbody > tr > td {
  border-color: #333 !important;
}

/* Alerts */
[data-theme="dark"] .alert {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .alert-info {
  background: #1a3a52 !important;
  border-color: #2a4a62 !important;
  color: #a0c5e8 !important;
}

[data-theme="dark"] .alert-success {
  background: #1a3a1a !important;
  border-color: #2a4a2a !important;
  color: #a0e8a0 !important;
}

[data-theme="dark"] .alert-warning {
  background: #3a3a1a !important;
  border-color: #4a4a2a !important;
  color: #e8e8a0 !important;
}

[data-theme="dark"] .alert-danger {
  background: #3a1a1a !important;
  border-color: #4a2a2a !important;
  color: #e8a0a0 !important;
}

[data-theme="dark"] .alert-secondary {
  background: #2d2d2d !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .alert-light {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .alert-light strong {
  color: #ffffff !important;
}

/* ==================== Buttons - Consolidated ==================== */
/* btn-default and btn-light for both themes */

[data-theme="dark"] .btn-light,
[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-default {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-outline-secondary:hover,
[data-theme="dark"] .btn-default:hover {
  background: #3d3d3d !important;
  border-color: #555 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-default:focus,
[data-theme="dark"] .btn-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(74, 158, 255, 0.25) !important;
}

[data-theme="light"] .btn-default,
[data-theme="light"] .btn-light {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .btn-default:hover,
[data-theme="light"] .btn-light:hover {
  background: #e2e6ea !important;
  border-color: #dae0e5 !important;
  color: #212529 !important;
}

[data-theme="light"] .btn-default:focus,
[data-theme="light"] .btn-light:focus {
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25) !important;
}

/* Outline buttons */
[data-theme="dark"] .btn-outline-primary {
  background: transparent !important;
  border-color: #0d6efd !important;
  color: #4a9eff !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
  background: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-success {
  background: transparent !important;
  border-color: #198754 !important;
  color: #20c997 !important;
}

[data-theme="dark"] .btn-outline-success:hover {
  background: #198754 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-warning {
  background: transparent !important;
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}

[data-theme="dark"] .btn-outline-warning:hover {
  background: #ffc107 !important;
  color: #121212 !important;
}

[data-theme="dark"] .btn-outline-danger {
  background: transparent !important;
  border-color: #dc3545 !important;
  color: #dc3545 !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
  background: #dc3545 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-info {
  background: transparent !important;
  border-color: #0dcaf0 !important;
  color: #0dcaf0 !important;
}

[data-theme="dark"] .btn-outline-info:hover {
  background: #0dcaf0 !important;
  color: #121212 !important;
}

/* Links */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: #4a9eff !important;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #6ab0ff !important;
}

/* Links in page header - white for visibility on gradient background (override above) */
[data-theme="dark"] .page-header-box a:not(.btn),
[data-theme="dark"] .page-header-box .page-header-subtitle a,
[data-theme="dark"] .page-header-box #gmail-status a {
  color: rgba(255, 255, 255, 1) !important;
  text-decoration: underline;
}

/* Status colors in page header for dark mode - high contrast variants */
[data-theme="dark"] .page-header-box .text-success,
[data-theme="dark"] .page-header-box #gmail-status .text-success,
[data-theme="dark"] .page-header-box #gmail-status i.text-success,
[data-theme="dark"] .page-header-box #gmail-status span.text-success {
  color: #7fffaf !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-danger,
[data-theme="dark"] .page-header-box #gmail-status .text-danger,
[data-theme="dark"] .page-header-box #gmail-status a.text-danger {
  color: #ffaaaa !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-warning,
[data-theme="dark"] .page-header-box #gmail-status .text-warning,
[data-theme="dark"] .page-header-box #gmail-status i.text-warning,
[data-theme="dark"] .page-header-box #gmail-status span.text-warning {
  color: #ffd866 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .page-header-box .text-muted,
[data-theme="dark"] .page-header-box #gmail-status .text-muted {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Text muted */
[data-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

/* Borders */
[data-theme="dark"] .border,
[data-theme="dark"] hr {
  border-color: #333 !important;
}

/* Images in messages */
[data-theme="dark"] .img-thumbnail,
[data-theme="dark"] .image-thumbnail-clickable {
  background: transparent !important;
  border-color: #444 !important;
}

/* Badges */
[data-theme="dark"] .badge-light {
  background: #2d2d2d !important;
  color: #e0e0e0 !important;
}

/* Badge text colors for dark mode - ensure readability */
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge.bg-success,
[data-theme="dark"] .badge.bg-danger,
[data-theme="dark"] .badge.bg-info {
  color: #ffffff !important;
}

[data-theme="dark"] .badge.bg-secondary {
  background-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .badge.bg-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

[data-theme="dark"] .badge.bg-light {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

/* List groups */
[data-theme="dark"] .list-group-item {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .list-group-item:hover {
  background: #2d2d2d !important;
}

/* Modals */
[data-theme="dark"] .modal-content {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .modal-header {
  background: #2d2d2d !important;
  border-bottom-color: #444 !important;
}

[data-theme="dark"] .modal-footer {
  border-top-color: #444 !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .dropdown-item {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: #2d2d2d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .dropdown-divider {
  border-color: #444 !important;
}

[data-theme="dark"] .dropdown-header {
  color: #adb5bd !important;
}

/* Company selector in dropdown menu */
[data-theme="dark"] .company-selector-section .fw-bold {
  color: #ffffff !important;
}

[data-theme="dark"] .company-switch-option:hover,
[data-theme="dark"] .company-switch-option:focus {
  background-color: #2d2d2d !important;
}

[data-theme="dark"] .company-switch-option:active {
  background-color: #3a3a3a !important;
}

/* Form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: #2d2d2d !important;
  border-color: #4a9eff !important;
  color: #e0e0e0 !important;
  box-shadow: 0 0 0 0.25rem rgba(74, 158, 255, 0.25) !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: #adb5bd !important;
}

/* Input Group */
[data-theme="dark"] .input-group {
  background: transparent !important;
}

[data-theme="dark"] .input-group .form-control {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .input-group-btn .btn,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .input-group-append .btn,
[data-theme="dark"] .input-group-prepend .btn {
  background: #3d3d3d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .input-group-btn .btn-primary,
[data-theme="dark"] .input-group-append .btn-primary,
[data-theme="dark"] .input-group-prepend .btn-primary {
  background: #4a9eff !important;
  border-color: #4a9eff !important;
  color: #ffffff !important;
}

/* Bootstrap 3 Label badges */
[data-theme="dark"] .label {
  color: #ffffff !important;
}

[data-theme="dark"] .label-default {
  background-color: #6c757d !important;
}

[data-theme="dark"] .label-primary {
  background-color: #4a9eff !important;
}

[data-theme="dark"] .label-success {
  background-color: #28a745 !important;
}

[data-theme="dark"] .label-info {
  background-color: #17a2b8 !important;
}

[data-theme="dark"] .label-warning {
  background-color: #ffc107 !important;
  color: #212529 !important;
}

[data-theme="dark"] .label-danger {
  background-color: #dc3545 !important;
}

/* Form labels */
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .control-label {
  color: #e0e0e0 !important;
}

/* Form help text */
[data-theme="dark"] .hint-block,
[data-theme="dark"] .form-text {
  color: #6c757d !important;
}
[data-theme="dark"] .help-block {
  color: #ef4444 !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a {
  color: #4a9eff !important;
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #adb5bd !important;
}

/* Pagination */
[data-theme="dark"] .pagination .page-link {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #4a9eff !important;
}

[data-theme="dark"] .pagination .page-link:hover {
  background: #3d3d3d !important;
  border-color: #555 !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="dark"] .pagination .page-item.disabled .page-link {
  background: #1e1e1e !important;
  color: #6c757d !important;
}

/* Nav tabs */
[data-theme="dark"] .nav-tabs {
  border-bottom-color: #444 !important;
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: #adb5bd !important;
  background: transparent !important;
  border-color: transparent !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

[data-theme="dark"] .nav-tabs .nav-link.active {
  color: #ffffff !important;
  background: #1e1e1e !important;
  border-color: #444 #444 transparent !important;
}

/* Nav pills */
[data-theme="dark"] .nav-pills .nav-link {
  color: #adb5bd !important;
}

[data-theme="dark"] .nav-pills .nav-link:hover {
  background: #2d2d2d !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .nav-pills .nav-link.active {
  background: #0d6efd !important;
  color: #ffffff !important;
}

/* Progress bars */
[data-theme="dark"] .progress {
  background: #2d2d2d !important;
}

/* Checkboxes and radios - Light mode */
[data-theme="light"] .form-check-input {
  background-color: #fff !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

[data-theme="light"] .form-check-input:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

[data-theme="light"] .form-check-label {
  color: #212529 !important;
}

/* Checkboxes and radios - Dark mode */
[data-theme="dark"] .form-check-input {
  background-color: #2d2d2d !important;
  border-color: #444 !important;
}

[data-theme="dark"] .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

[data-theme="dark"] .form-check-input:focus {
  border-color: #4a9eff !important;
  box-shadow: 0 0 0 0.25rem rgba(74, 158, 255, 0.25) !important;
}

[data-theme="dark"] .form-check-label {
  color: #e0e0e0 !important;
}

/* Close buttons */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* Spinners */
[data-theme="dark"] .spinner-border,
[data-theme="dark"] .spinner-grow {
  color: #4a9eff !important;
}

/* ==================== Document Page Styles ==================== */
/* Note: Most document styles now use CSS variables defined in document.css */
/* These overrides ensure proper theming for elements not yet converted */

[data-theme="dark"] .document-index h1,
[data-theme="dark"] .document-page-title {
  color: #ffffff !important;
}

[data-theme="light"] .document-index h1,
[data-theme="light"] .document-page-title {
  color: #212529 !important;
}

[data-theme="dark"] .document-subtitle {
  color: #adb5bd !important;
}

[data-theme="light"] .document-subtitle {
  color: #6c757d !important;
}

/* Search Panel */
[data-theme="dark"] .search-panel-inner {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

[data-theme="light"] .search-panel-inner {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

[data-theme="dark"] .search-label {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .search-input {
  background: #1e1e1e !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

/* Active Filters Banner */
[data-theme="dark"] .active-filters-banner {
  background: #1a3a52 !important;
  border-left-color: #4a9eff !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .active-filters-banner .filter-title {
  color: #4a9eff !important;
}

[data-theme="light"] .active-filters-banner {
  background: #e7f3ff !important;
  border-left-color: #0275d8 !important;
  color: #212529 !important;
}

[data-theme="light"] .active-filters-banner .filter-title {
  color: #0275d8 !important;
}

/* Preview Modal */
[data-theme="dark"] .preview-modal-body {
  background: #2d2d2d !important;
}

[data-theme="dark"] .preview-loading,
[data-theme="dark"] .preview-loading-text {
  color: #adb5bd !important;
}

[data-theme="dark"] .preview-error,
[data-theme="dark"] .preview-error-text {
  color: #dc3545 !important;
}

/* Filter View Toolbar */
[data-theme="dark"] .filter-view-toolbar .btn-default {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .filter-view-toolbar .btn-default:hover {
  background: #3d3d3d !important;
}

[data-theme="dark"] .filter-view-toolbar .btn-default.active {
  background: #4a9eff !important;
  border-color: #4a9eff !important;
  color: #ffffff !important;
}

[data-theme="light"] .filter-view-toolbar .btn-default {
  background: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .filter-view-toolbar .btn-default:hover {
  background: #e9ecef !important;
}

[data-theme="light"] .filter-view-toolbar .btn-default.active {
  background: #007bff !important;
  border-color: #007bff !important;
  color: #ffffff !important;
}

/* Empty Document State */
[data-theme="dark"] .empty-document {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

[data-theme="dark"] .empty-document-icon {
  color: #6c757d !important;
}

[data-theme="dark"] .empty-document-title {
  color: #adb5bd !important;
}

[data-theme="dark"] .empty-document-text {
  color: #6c757d !important;
}

[data-theme="light"] .empty-document {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .empty-document-title {
  color: #6c757d !important;
}

[data-theme="light"] .empty-document-text {
  color: #adb5bd !important;
}

/* Document Grid and Cards */
[data-theme="dark"] .document-item,
[data-theme="dark"] .document-card {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .document-item:hover,
[data-theme="dark"] .document-card:hover {
  border-color: #4a9eff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .document-thumbnail {
  background: #2d2d2d !important;
}

[data-theme="dark"] .document-thumbnail-icon {
  color: #6c757d !important;
}

[data-theme="dark"] .document-info {
  background: #1e1e1e !important;
}

[data-theme="dark"] .document-name {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .document-name a {
  color: #4a9eff !important;
}

[data-theme="dark"] .document-name a:hover {
  color: #6ab0ff !important;
}

[data-theme="dark"] .document-meta {
  color: #adb5bd !important;
}

[data-theme="light"] .document-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .document-card:hover {
  border-color: #007bff !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .document-thumbnail {
  background: #f8f9fa !important;
}

[data-theme="light"] .document-name {
  color: #212529 !important;
}

[data-theme="light"] .document-name a {
  color: #007bff !important;
}

/* Document List View */
[data-theme="dark"] .document-list-item {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .document-list-item:hover {
  border-color: #4a9eff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .document-list-name {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .document-list-name a {
  color: #4a9eff !important;
}

[data-theme="dark"] .document-list-meta {
  color: #adb5bd !important;
}

[data-theme="dark"] .document-list-icon {
  color: #6c757d !important;
}

[data-theme="light"] .document-list-item {
  background: #ffffff !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .document-list-item:hover {
  border-color: #007bff !important;
}

[data-theme="light"] .document-list-name {
  color: #212529 !important;
}

/* Document Action Buttons */
[data-theme="dark"] .btn-doc-action {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .btn-doc-action:hover {
  background: #3d3d3d !important;
  border-color: #555 !important;
}

[data-theme="light"] .btn-doc-action {
  background: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #6c757d !important;
}

[data-theme="light"] .btn-doc-action:hover {
  background: #f8f9fa !important;
}

/* Folder Tree */
[data-theme="dark"] .folder-tree {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .folder-tree h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .folder-tree-item {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .folder-tree-item:hover {
  background: #2d2d2d !important;
}

[data-theme="dark"] .folder-tree-item.active {
  background: #4a9eff !important;
  color: #ffffff !important;
}

[data-theme="light"] .folder-tree {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .folder-tree h4 {
  color: #212529 !important;
}

[data-theme="light"] .folder-tree-item {
  color: #495057 !important;
}

[data-theme="light"] .folder-tree-item:hover {
  background: #f8f9fa !important;
}

[data-theme="light"] .folder-tree-item.active {
  background: #007bff !important;
  color: #ffffff !important;
}

/* Context Filter Section */
[data-theme="dark"] .context-filter-section {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .context-filter-section h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .context-group-header {
  background: #2d2d2d !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .context-group-header:hover {
  background: #3d3d3d !important;
}

[data-theme="dark"] .context-group-name {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .context-group-count {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .context-item {
  color: #adb5bd !important;
}

[data-theme="dark"] .context-item:hover {
  background: #3d3d3d !important;
  color: #4a9eff !important;
}

[data-theme="dark"] .context-item.active {
  background: linear-gradient(135deg, #4a9eff 0%, #0056b3 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .context-filter-section {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .context-filter-section h4 {
  color: #212529 !important;
}

[data-theme="light"] .context-group-header {
  background: #f8f9fa !important;
  color: #495057 !important;
}

[data-theme="light"] .context-group-header:hover {
  background: #e9ecef !important;
}

/* Filter Section */
[data-theme="dark"] .filter-section {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .filter-section h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .filter-item {
  color: #adb5bd !important;
}

[data-theme="dark"] .filter-item:hover {
  background: #2d2d2d !important;
  color: #4a9eff !important;
}

[data-theme="dark"] .filter-item.active {
  background: linear-gradient(135deg, #4a9eff 0%, #0056b3 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .filter-section {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .filter-section h4 {
  color: #212529 !important;
}

[data-theme="light"] .filter-item {
  color: #495057 !important;
}

[data-theme="light"] .filter-item:hover {
  background: #f0f4f8 !important;
  color: #007bff !important;
}

[data-theme="light"] .filter-item.active {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
  color: #ffffff !important;
}

/* Attendance Table Container */
[data-theme="dark"] .attendance-table {
  background: #1e1e1e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .attendance-table {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Attendance Status Badges */
[data-theme="dark"] .status-badge.status-normal {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
}

[data-theme="dark"] .status-badge.status-late {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

[data-theme="dark"] .status-badge.status-early-departure {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

[data-theme="dark"] .status-badge.status-absent {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
}

[data-theme="dark"] .status-badge.status-weekend-work {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #818cf8 !important;
}

[data-theme="dark"] .status-badge.status-holiday-work {
  background: rgba(236, 72, 153, 0.2) !important;
  color: #f472b6 !important;
}

/* Quick Actions */
[data-theme="dark"] .quick-actions {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .quick-actions h4 {
  color: #ffffff !important;
}

[data-theme="light"] .quick-actions {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .quick-actions h4 {
  color: #212529 !important;
}

/* Upload Area */
[data-theme="dark"] .upload-area {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

[data-theme="dark"] .upload-area:hover,
[data-theme="dark"] .upload-area.drag-over {
  border-color: #4a9eff !important;
  background: #1a3a52 !important;
}

[data-theme="dark"] .upload-icon {
  color: #6c757d !important;
}

[data-theme="dark"] .upload-text {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .upload-hint {
  color: #adb5bd !important;
}

[data-theme="light"] .upload-area {
  background: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .upload-area:hover,
[data-theme="light"] .upload-area.drag-over {
  border-color: #007bff !important;
  background: #e7f3ff !important;
}

/* File Preview */
[data-theme="dark"] .file-preview {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .file-preview-item {
  background: #2d2d2d !important;
}

[data-theme="dark"] .file-preview-name {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .file-preview-size {
  color: #adb5bd !important;
}

[data-theme="light"] .file-preview {
  background: #ffffff !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .file-preview-item {
  background: #f8f9fa !important;
}

/* ==================== Directory Page Styles ==================== */
/* Employee Directory page dark mode support */

[data-theme="dark"] .directory-index {
  background: #121212 !important;
}

[data-theme="dark"] .directory-index h1 {
  color: #ffffff !important;
}

/* Company sections */
[data-theme="dark"] .company-section {
  background: #1e1e1e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .company-section h2 {
  color: #4a9eff !important;
  border-bottom-color: #4a9eff !important;
}

/* Location sections */
[data-theme="dark"] .location-section {
  background: #2d2d2d !important;
}

[data-theme="dark"] .location-section h3 {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .location-section h3 small {
  color: #adb5bd !important;
}

[data-theme="dark"] .location-section > p {
  color: #adb5bd !important;
}

/* Table styles - Override Bootstrap 5 CSS variables */
[data-theme="dark"] .directory-index .table {
  --bs-table-bg: #1e1e1e;
  --bs-table-color: #e0e0e0;
  --bs-table-border-color: #444;
  --bs-table-striped-bg: #252525;
  --bs-table-striped-color: #e0e0e0;
  --bs-table-hover-bg: #333333;
  --bs-table-hover-color: #ffffff;
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .directory-index .table-responsive {
  background-color: #1e1e1e !important;
}

[data-theme="dark"] .directory-index .table > thead > tr > th {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
  border-bottom-color: #444 !important;
  border-color: #444 !important;
}

[data-theme="dark"] .directory-index .table > tbody > tr {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
}

[data-theme="dark"] .directory-index .table > tbody > tr > td {
  background-color: inherit !important;
  border-color: #444 !important;
}

[data-theme="dark"]
  .directory-index
  .table-striped
  > tbody
  > tr:nth-of-type(odd)
  > td {
  background-color: #252525 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"]
  .directory-index
  .table-striped
  > tbody
  > tr:nth-of-type(even)
  > td {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .directory-index .table-hover > tbody > tr:hover > td,
[data-theme="dark"] .directory-index .table-striped > tbody > tr:hover > td {
  background-color: #333333 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .directory-index .table td {
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .directory-index .table td strong {
  color: #ffffff !important;
}

[data-theme="dark"] .directory-index .table td small,
[data-theme="dark"] .directory-index .table td .text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] .directory-index .table td a {
  color: #4a9eff !important;
}

[data-theme="dark"] .directory-index .table td a:hover {
  color: #6ab0ff !important;
}

/* Dash placeholders */
[data-theme="dark"] .directory-index .table td span.text-muted {
  color: #6c757d !important;
}

/* Mobile employee cards */
[data-theme="dark"] .mobile-employee-card {
  background: #2d2d2d !important;
  border: 1px solid #444 !important;
}

[data-theme="dark"] .mobile-employee-name {
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-employee-title {
  color: #adb5bd !important;
}

[data-theme="dark"] .mobile-employee-contact {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .mobile-employee-contact a {
  color: #4a9eff !important;
}

[data-theme="dark"] .mobile-employee-contact a:hover {
  color: #6ab0ff !important;
}

/* Light mode - ensure proper styling */
[data-theme="light"] .directory-index h1 {
  color: #212529 !important;
}

[data-theme="light"] .company-section {
  background: #ffffff !important;
}

[data-theme="light"] .company-section h2 {
  color: #337ab7 !important;
  border-bottom-color: #337ab7 !important;
}

[data-theme="light"] .location-section {
  background: #f9f9f9 !important;
}

[data-theme="light"] .location-section h3 {
  color: #555555 !important;
}

[data-theme="light"] .location-section h3 small {
  color: #999999 !important;
}

[data-theme="light"] .directory-index .table > thead > tr > th {
  background-color: #f0f0f0 !important;
  color: #212529 !important;
}

[data-theme="light"] .directory-index .table td {
  color: #212529 !important;
}

[data-theme="light"] .mobile-employee-card {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
}

[data-theme="light"] .mobile-employee-name {
  color: #333333 !important;
}

[data-theme="light"] .mobile-employee-title {
  color: #666666 !important;
}

/* Chat Room Index Page */
[data-theme="dark"] .chat-room-index h1 {
  color: #ffffff !important;
}

/* Room Cards */
[data-theme="dark"] .room-card {
  background: #1e1e1e !important;
  border: 1px solid #444 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .room-card:hover,
[data-theme="light"].room-card.archived:hover {
  background: #2d2d2d !important;
  border-color: #4a9eff !important;
  box-shadow: 0 8px 32px rgba(74, 158, 255, 0.2) !important;
}
[data-theme="light"].room-card:hover,
[data-theme="light"].room-card.archived:hover {
  background: #f8f9fa !important;
  border-color: #4a9eff !important;
  box-shadow: 0 8px 32px rgba(74, 158, 255, 0.8) !important;
}

[data-theme="dark"] .room-card-title {
  color: #ffffff !important;
}

[data-theme="dark"] .room-card-message {
  background: #2d2d2d !important;
  border-left-color: #4a9eff !important;
}

[data-theme="dark"] .room-card-message-author {
  color: #4a9eff !important;
}

[data-theme="dark"] .room-card-message-content {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .room-card-message-time {
  color: #adb5bd !important;
}

[data-theme="dark"] .room-card-no-message {
  color: #adb5bd !important;
}

[data-theme="dark"] .room-card-member-count {
  color: #adb5bd !important;
}

/* Archived rooms */
[data-theme="dark"] .room-card.archived {
  background: #181818 !important;
  border-color: #333 !important;
  opacity: 0.7 !important;
}

/* Widget Cards */
[data-theme="dark"] .widget-card {
  background: #1e1e1e !important;
  border-color: #444 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .widget-title {
  color: #ffffff !important;
}

[data-theme="dark"] .widget-body {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .widget-footer {
  background: #2d2d2d !important;
  border-top-color: #444 !important;
}

/* Stat Cards */
[data-theme="dark"] .stat-card {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .stat-number {
  color: #ffffff !important;
}

[data-theme="dark"] .stat-label {
  color: #adb5bd !important;
}

/* Quick Actions */
[data-theme="dark"] .quick-action {
  background: #1e1e1e !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .quick-action:hover {
  border-color: #4a9eff !important;
  color: #4a9eff !important;
}

[data-theme="dark"] .quick-action-title {
  color: #ffffff !important;
}

[data-theme="dark"] .quick-action-desc {
  color: #adb5bd !important;
}

/* Notification Items */
[data-theme="dark"] .notification-item {
  border-bottom-color: #333 !important;
  background: transparent !important;
}

[data-theme="dark"] .notification-item:hover {
  background: #2d2d2d !important;
}
[data-theme="light"] .notification-item:hover {
  background: #f8f9fa !important;
}

/* Light mode notification styles */
[data-theme="light"] .notification-item {
  background: #fff !important;
  border-color: #e9ecef !important;
}

[data-theme="light"] .notification-item.unread {
  background: #f0f9ff !important;
  border-left-color: #0ea5e9 !important;
}

[data-theme="light"] .notification-icon {
  border: none !important;
}

[data-theme="light"] .notification-icon.bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

[data-theme="light"] .notification-icon.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

[data-theme="light"] .notification-icon.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

[data-theme="light"] .notification-icon.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

[data-theme="light"] .notification-icon.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

[data-theme="light"] .notification-content {
  color: #212529 !important;
}

[data-theme="light"] .notification-title {
  color: #212529 !important;
}

[data-theme="light"] .notification-message {
  color: #6c757d !important;
}

[data-theme="light"] .notification-time {
  color: #9ca3af !important;
}

/* Dark mode notification styles */
[data-theme="dark"] .notification-item.unread {
  background: #1a3a52 !important;
  border-left-color: #4a9eff !important;
}

[data-theme="dark"] .notification-icon {
  border: 1px solid #444 !important;
}

[data-theme="dark"] .notification-icon.bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

[data-theme="dark"] .notification-icon.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

[data-theme="dark"] .notification-icon.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

[data-theme="dark"] .notification-icon.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

[data-theme="dark"] .notification-icon.bg-secondary {
  background-color: #495057 !important;
  color: #fff !important;
}

[data-theme="dark"] .notification-content {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .todo-title,
[data-theme="dark"] notification-title {
  color: #ffffff !important;
}

[data-theme="dark"] .notification-text {
  color: #adb5bd !important;
}

[data-theme="dark"] .notification-time {
  color: #6c757d !important;
}

/* Light mode activity icon styles */
[data-theme="light"] .activity-icon {
  border: none !important;
}

[data-theme="light"] .activity-icon.bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

[data-theme="light"] .activity-icon.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

[data-theme="light"] .activity-icon.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

[data-theme="light"] .activity-icon.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

[data-theme="light"] .activity-icon.bg-secondary {
  background-color: #6c757d !important;
  color: #fff !important;
}

[data-theme="light"] .activity-title {
  color: #212529 !important;
}

[data-theme="light"] .activity-desc {
  color: #6c757d !important;
}

[data-theme="light"] .activity-time {
  color: #9ca3af !important;
}

/* Dark mode activity icon styles */
[data-theme="dark"] .activity-icon {
  border: 1px solid #444 !important;
}

[data-theme="dark"] .activity-icon.bg-primary {
  background-color: #0d6efd !important;
  color: #fff !important;
}

[data-theme="dark"] .activity-icon.bg-success {
  background-color: #198754 !important;
  color: #fff !important;
}

[data-theme="dark"] .activity-icon.bg-info {
  background-color: #0dcaf0 !important;
  color: #000 !important;
}

[data-theme="dark"] .activity-icon.bg-warning {
  background-color: #ffc107 !important;
  color: #000 !important;
}

[data-theme="dark"] .activity-icon.bg-secondary {
  background-color: #495057 !important;
  color: #fff !important;
}

[data-theme="dark"] .activity-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .activity-desc {
  color: #adb5bd !important;
}

[data-theme="dark"] .activity-time {
  color: #6c757d !important;
}

/* Light mode widget title icons (bell, chat, etc.) */
[data-theme="light"] .widget-title i {
  opacity: 1 !important;
}

[data-theme="light"] .widget-title .text-primary {
  color: #0d6efd !important;
}

[data-theme="light"] .widget-title .text-success {
  color: #198754 !important;
}

[data-theme="light"] .widget-title .text-info {
  color: #0dcaf0 !important;
}

[data-theme="light"] .widget-title .text-warning {
  color: #ffc107 !important;
}

[data-theme="light"] .widget-title .text-danger {
  color: #dc3545 !important;
}

/* Light mode stat card icons */
[data-theme="light"] .stat-icon {
  opacity: 0.8 !important;
}

[data-theme="light"] .stat-card.text-primary .stat-icon {
  color: #0d6efd !important;
}

[data-theme="light"] .stat-card.text-success .stat-icon {
  color: #198754 !important;
}

[data-theme="light"] .stat-card.text-info .stat-icon {
  color: #0dcaf0 !important;
}

[data-theme="light"] .stat-card.text-warning .stat-icon {
  color: #ffc107 !important;
}

/* Empty States */
[data-theme="dark"] .empty-state {
  color: #adb5bd !important;
}

[data-theme="dark"] .empty-state-icon {
  color: #6c757d !important;
}

[data-theme="dark"] .empty-state-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .empty-state-text {
  color: #adb5bd !important;
}

/* Shortcuts sidebar */
[data-theme="dark"] .shortcuts-container {
  background: rgba(26, 26, 26, 0.95) !important;
  border-left-color: #333 !important;
}

[data-theme="dark"] .shortcuts-header {
  border-bottom-color: #333 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .shortcut-item {
  color: #e0e0e0 !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .shortcut-item:hover {
  background: #2d2d2d !important;
  color: #ffffff !important;
}

/* Footer */
[data-theme="dark"] .footer {
  background: #1e1e1e !important;
  color: #adb5bd !important;
}

/* Mobile bottom nav */
[data-theme="dark"] .mobile-bottom-nav {
  background: #1e1e1e !important;
  border-top-color: #333 !important;
}

[data-theme="dark"] .mobile-nav-item {
  color: #adb5bd !important;
}

[data-theme="dark"] .mobile-nav-item.active {
  color: #4a9eff !important;
}

/* Theme toggle button styles */
.theme-toggle-btn {
  background: transparent !important;
  border: none !important;
  padding: 0.5rem !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  color: rgba(255, 255, 255, 0.55) !important;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.theme-toggle-btn i {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
  color: inherit !important;
}

.theme-toggle-btn:hover i {
  transform: rotate(15deg);
}

/* Theme dropdown menu */
.theme-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
}

.theme-dropdown .dropdown-item i {
  width: 1.25rem;
  text-align: center;
}

.theme-dropdown .dropdown-item.active {
  background-color: #0d6efd;
  color: #ffffff;
}

[data-theme="dark"] .theme-dropdown .dropdown-item.active {
  background-color: #4a9eff;
}

/* System dark mode auto-detection for "auto" theme */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] body,
  html[data-theme="auto"] .chat-room-view,
  html[data-theme="auto"] .container,
  html[data-theme="auto"] main {
    background: #121212 !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] h1,
  html[data-theme="auto"] h2,
  html[data-theme="auto"] h3,
  html[data-theme="auto"] h4,
  html[data-theme="auto"] h5,
  html[data-theme="auto"] h6 {
    color: #ffffff !important;
  }

  html[data-theme="auto"] .card,
  html[data-theme="auto"] .panel,
  html[data-theme="auto"] .well {
    background: #1e1e1e !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .card-header,
  html[data-theme="auto"] .panel-heading {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #ffffff !important;
  }

  html[data-theme="auto"] .card-body,
  html[data-theme="auto"] .panel-body {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .form-control,
  html[data-theme="auto"] .form-select,
  html[data-theme="auto"] input[type="text"],
  html[data-theme="auto"] input[type="email"],
  html[data-theme="auto"] input[type="password"],
  html[data-theme="auto"] textarea,
  html[data-theme="auto"] select {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .dropdown-menu {
    background: #1e1e1e !important;
    border-color: #444 !important;
  }

  html[data-theme="auto"] .dropdown-item {
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .dropdown-item:hover,
  html[data-theme="auto"] .dropdown-item:focus {
    background: #2d2d2d !important;
    color: #ffffff !important;
  }

  html[data-theme="auto"] .table {
    color: #e0e0e0 !important;
    background: #1e1e1e !important;
  }

  html[data-theme="auto"] .table thead th {
    background: #2d2d2d !important;
    color: #ffffff !important;
    border-color: #444 !important;
  }

  html[data-theme="auto"] .list-group-item {
    background: #1e1e1e !important;
    border-color: #333 !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .modal-content {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .modal-header {
    background: #2d2d2d !important;
    border-bottom-color: #444 !important;
  }

  html[data-theme="auto"] .breadcrumb {
    background: #1e1e1e !important;
    border-color: #444 !important;
  }

  html[data-theme="auto"] .alert {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .btn-light,
  html[data-theme="auto"] .btn-outline-secondary {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #e0e0e0 !important;
  }

  html[data-theme="auto"] .text-muted {
    color: #adb5bd !important;
  }

  html[data-theme="auto"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #4a9eff !important;
  }

  html[data-theme="auto"] .room-card {
    background: #1e1e1e !important;
    border: 1px solid #444 !important;
  }

  html[data-theme="auto"] .room-card-title {
    color: #ffffff !important;
  }

  html[data-theme="auto"] .room-card-message {
    background: #2d2d2d !important;
  }

  html[data-theme="auto"] .shortcuts-container {
    background: rgba(26, 26, 26, 0.95) !important;
    border-left-color: #333 !important;
  }

  html[data-theme="auto"] .shortcut-item {
    color: #e0e0e0 !important;
    border-bottom-color: #333 !important;
  }

  html[data-theme="auto"] .footer {
    background: #1e1e1e !important;
    color: #adb5bd !important;
  }

  html[data-theme="auto"] .mobile-bottom-nav {
    background: #1e1e1e !important;
    border-top-color: #333 !important;
  }

  html[data-theme="auto"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
  }
}

/* ==================== Explicit Light Mode Overrides ==================== */
/* Ensure light mode colors are enforced when data-theme="light" */
/* This prevents any accidental dark backgrounds in light mode */

[data-theme="light"] body {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

[data-theme="dark"] nav > .container {
  background-color: transparent !important;
}
[data-theme="light"] main,
[data-theme="light"] .container,
[data-theme="light"] .container-fluid {
  background-color: transparent !important;
  color: #212529 !important;
}

[data-theme="light"] .card,
[data-theme="light"] .widget-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .panel,
[data-theme="light"] .well {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
}

[data-theme="light"] .stat-number,
[data-theme="light"] .widget-title,
[data-theme="light"] .card-title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: #212529 !important;
}

[data-theme="light"] .text-muted {
  color: #6c757d !important;
}

[data-theme="light"] .dashboard-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
[data-theme="light"] .dashboard-title,
[data-theme="light"] .dashboard-subtitle,
[data-theme="light"] .dashboard-time {
  color: white !important;
}
[data-theme="light"] .card-body,
[data-theme="light"] .widget-body,
[data-theme="light"] .panel-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .card-header,
[data-theme="light"] .widget-header,
[data-theme="light"] .panel-heading {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-bottom-color: rgba(0, 0, 0, 0.125) !important;
}

[data-theme="light"] .card-footer,
[data-theme="light"] .widget-footer,
[data-theme="light"] .panel-footer {
  background-color: #f8f9fa !important;
  border-top-color: rgba(0, 0, 0, 0.125) !important;
}

/* Light mode - Tables */
[data-theme="light"] .table {
  color: #212529 !important;
  background-color: #ffffff !important;
}

[data-theme="light"] .table thead th {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] .table td,
[data-theme="light"] .table th {
  border-color: #dee2e6 !important;
}

[data-theme="light"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Light mode - Forms */
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #ffffff !important;
  border-color: #ced4da !important;
  color: #212529 !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background-color: #ffffff !important;
  border-color: #86b7fe !important;
  color: #212529 !important;
}

/* Light mode - List groups */
[data-theme="light"] .list-group-item {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
  color: #212529 !important;
}

[data-theme="light"] .list-group-item:hover {
  background-color: #f8f9fa !important;
}

/* Light mode - Modals */
[data-theme="light"] .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .modal-header {
  background-color: #ffffff !important;
  border-bottom-color: #dee2e6 !important;
}

[data-theme="light"] .modal-footer {
  border-top-color: #dee2e6 !important;
}

/* Light mode - Dropdowns */
[data-theme="light"] .dropdown-menu {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .dropdown-item {
  color: #212529 !important;
}

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

/* Light mode - Alerts */
[data-theme="light"] .alert-info {
  background-color: #cff4fc !important;
  border-color: #b6effb !important;
  color: #055160 !important;
}

[data-theme="light"] .alert-success {
  background-color: #d1e7dd !important;
  border-color: #badbcc !important;
  color: #0f5132 !important;
}

[data-theme="light"] .alert-warning {
  background-color: #fff3cd !important;
  border-color: #ffecb5 !important;
  color: #664d03 !important;
}

[data-theme="light"] .alert-danger {
  background-color: #f8d7da !important;
  border-color: #f5c2c7 !important;
  color: #842029 !important;
}

/* Light mode - Breadcrumbs */
[data-theme="light"] .breadcrumb {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Light mode - Chat */
[data-theme="light"] #messages-container {
  background-color: #e8e9ea !important;
}

[data-theme="light"] .message {
  background-color: #e8e9ea !important;
}

[data-theme="light"] .message-bubble.bg-light {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .chat-header {
  background-color: #ffffff !important;
  border-bottom-color: #dee2e6 !important;
}

[data-theme="light"] .chat-input-container {
  background-color: #ffffff !important;
}

/* Light mode - Room cards */
[data-theme="light"] .room-card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .room-card-message {
  background-color: #f8f9fa !important;
}

[data-theme="light"] .room-card-title {
  color: #1a1a1a !important;
}

/* Light mode - Document sections */
[data-theme="light"] .context-filter-section,
[data-theme="light"] .filter-section,
[data-theme="light"] .folder-tree,
[data-theme="light"] .quick-actions {
  background-color: #ffffff !important;
  border-color: #e0e0e0 !important;
}

[data-theme="light"] .filter-item {
  color: #495057 !important;
}

[data-theme="light"] .filter-item:hover {
  background-color: #f0f4f8 !important;
  color: #007bff !important;
}

[data-theme="light"] .document-list-item {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .document-card {
  background-color: #ffffff !important;
  border-color: #e0e0e0 !important;
}

/* Light mode - Footer and navigation */
[data-theme="light"] .footer {
  background-color: #f5f5f5 !important;
  color: #6c757d !important;
}

[data-theme="light"] .mobile-bottom-nav {
  background-color: #ffffff !important;
  border-top-color: #e9ecef !important;
}

[data-theme="light"] .shortcuts-container {
  background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Light mode - Pagination */
[data-theme="light"] .pagination .page-link {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #007bff !important;
}

[data-theme="light"] .pagination .page-link:hover {
  background-color: #e9ecef !important;
}

[data-theme="light"] .pagination .page-item.active .page-link {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: #ffffff !important;
}

/* Light mode - Text contrast enhancements */
/* Ensure all text has sufficient contrast against light backgrounds */
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] div,
[data-theme="light"] label,
[data-theme="light"] .form-label,
[data-theme="light"] .control-label {
  color: #212529;
}

[data-theme="light"]
  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.active)
  ) {
  color: #0d6efd !important;
}

[data-theme="light"] a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: #0a58ca !important;
}

[data-theme="light"] .stat-label,
[data-theme="light"] .widget-subtitle,
[data-theme="light"] .card-subtitle {
  color: #6c757d !important;
}

[data-theme="light"] .notification-title,
[data-theme="light"] .todo-title,
[data-theme="light"] .notification-text {
  color: #212529 !important;
}

[data-theme="light"] .notification-time {
  color: #6c757d !important;
}

/* Light mode - Icon colors */
[data-theme="light"] .bi,
[data-theme="light"] i.bi {
  color: inherit;
}

/* Light mode - Badge colors for visibility */
/* Ensure badge text is readable on colored backgrounds */
[data-theme="light"] .badge.bg-primary,
[data-theme="light"] .badge.bg-success,
[data-theme="light"] .badge.bg-danger,
[data-theme="light"] .badge.bg-info,
[data-theme="light"] .badge.bg-secondary {
  color: #ffffff !important;
}

[data-theme="light"] .badge.bg-warning {
  color: #212529 !important;
}

[data-theme="light"] .badge.bg-light {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

/* Light mode - Progress bars */
[data-theme="light"] .progress {
  background-color: #e9ecef !important;
}

/* Light mode - Code and pre elements */
[data-theme="light"] code {
  color: #d63384 !important;
  background-color: #f8f9fa !important;
}

[data-theme="light"] pre {
  background-color: #f8f9fa !important;
  color: #212529 !important;
  border-color: #dee2e6 !important;
}

/* Light mode - HR element */
[data-theme="light"] hr {
  border-color: #dee2e6 !important;
  opacity: 1 !important;
}

/* Light mode - Secondary text and hints */
[data-theme="light"] .hint-block,
[data-theme="light"] .form-text {
  color: #6c757d !important;
}
[data-theme="light"] .help-block {
  color: red !important;
}

/* Light mode - Placeholder text */
[data-theme="light"] ::placeholder {
  color: #6c757d !important;
  opacity: 1 !important;
}

/* Light mode - Selection */
[data-theme="light"] ::selection {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Light mode - Nav items */
.nav-link,
#languageDropdown span {
  color: #e0e4e8 !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link:focus {
  color: #0d6efd !important;
}

.nav-link.active {
  color: #3daefd !important;
}

/* Light mode - Tabs */
[data-theme="light"] .nav-tabs .nav-link {
  color: #495057 !important;
}

[data-theme="light"] .nav-tabs .nav-link.active {
  color: #0d6efd !important;
  background-color: #ffffff !important;
  border-color: #dee2e6 #dee2e6 #ffffff !important;
}

/* Light mode - Employee/Member items */
[data-theme="light"] .mobile-employee-name,
[data-theme="light"] .member-name {
  color: #212529 !important;
}

[data-theme="light"] .mobile-employee-title,
[data-theme="light"] .mobile-employee-contact {
  color: #6c757d !important;
}

/* Light mode - Empty states */
[data-theme="light"] .empty-state,
[data-theme="light"] .room-empty-state {
  color: #6c757d !important;
}

[data-theme="light"] .empty-state-title,
[data-theme="light"] .room-empty-state-title {
  color: #212529 !important;
}

/* Light mode - Quick actions */
[data-theme="light"] .quick-action {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .quick-action-title {
  color: #212529 !important;
}

[data-theme="light"] .quick-action-desc {
  color: #6c757d !important;
}

/* Light mode - Context items */
[data-theme="light"] .context-group-name,
[data-theme="light"] .context-item {
  color: #495057 !important;
}

/* Light mode - Message bubbles */
[data-theme="light"] .message strong {
  color: #495057 !important;
}

[data-theme="light"] .message p {
  color: #212529 !important;
}

[data-theme="light"] .message small,
[data-theme="light"] .message .text-muted {
  color: #6c757d !important;
}

/* Light mode - Room card details */
[data-theme="light"] .room-card-message-author {
  color: #007bff !important;
}

[data-theme="light"] .room-card-message-content {
  color: #495057 !important;
}

[data-theme="light"] .room-card-message-time,
[data-theme="light"] .room-card-member-count {
  color: #6c757d !important;
}

/* Light mode - Document details */
[data-theme="light"] .document-name,
[data-theme="light"] .document-list-name {
  color: #212529 !important;
}

[data-theme="light"] .document-meta,
[data-theme="light"] .document-list-meta {
  color: #6c757d !important;
}

/* ==================== Chat Room Index - Light Mode Fixes ==================== */
/* Ensure proper contrast for all chat room index elements */

[data-theme="light"] .chat-room-index h1 {
  color: #212529 !important;
}

[data-theme="light"] .chat-room-index .btn-success {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

[data-theme="light"] .chat-room-index .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Tab Navigation in Light Mode */
[data-theme="light"] .nav-tabs .nav-link {
  color: #495057 !important;
  background-color: transparent !important;
}

[data-theme="light"] .nav-tabs .nav-link:hover {
  color: #212529 !important;
  border-bottom-color: #dee2e6 !important;
}

[data-theme="light"] .nav-tabs .nav-link.active {
  color: #0d6efd !important;
  background-color: transparent !important;
  border-bottom-color: #0d6efd !important;
}

[data-theme="light"] .nav-tabs .nav-link .bi {
  color: inherit !important;
}

[data-theme="light"] .nav-tabs .nav-link .badge {
  color: #ffffff !important;
}

[data-theme="light"] .nav-tabs .nav-link .badge.bg-primary {
  background-color: #0d6efd !important;
}

[data-theme="light"] .nav-tabs .nav-link .badge.bg-secondary {
  background-color: #6c757d !important;
}

/* Room Card Light Mode Enhancements */
[data-theme="light"] .room-card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .room-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .room-card-title {
  color: #212529 !important;
}

[data-theme="light"] .room-card-category {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .room-card-message {
  background-color: #f8f9fa !important;
  border-left-color: #0d6efd !important;
}

[data-theme="light"] .room-card-message-author {
  color: #0d6efd !important;
}

[data-theme="light"] .room-card-message-content {
  color: #495057 !important;
}

[data-theme="light"] .room-card-message-time {
  color: #6c757d !important;
}

[data-theme="light"] .room-card-no-message {
  color: #6c757d !important;
  background-color: #f8f9fa !important;
}

[data-theme="light"] .room-card-member-count {
  color: #6c757d !important;
}

[data-theme="light"] .room-card-unread {
  background-color: #dc3545 !important;
  color: #ffffff !important;
}

/* Archived Room Card - Light Mode */
[data-theme="light"] .room-card.archived {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  opacity: 0.85 !important;
}

[data-theme="light"] .room-card.archived .room-card-title {
  color: #6c757d !important;
}

[data-theme="light"] .room-card.archived .room-card-message {
  background-color: #e9ecef !important;
  border-left-color: #6c757d !important;
}

[data-theme="light"] .archived-badge {
  background-color: #6c757d !important;
  color: #ffffff !important;
}

/* Empty State - Light Mode */
[data-theme="light"] .room-empty-state {
  color: #6c757d !important;
}

[data-theme="light"] .room-empty-state-title {
  color: #212529 !important;
}

[data-theme="light"] .room-empty-state-text {
  color: #6c757d !important;
}

/* Section Header - Light Mode */
[data-theme="light"] .room-section-title {
  color: #212529 !important;
}

[data-theme="light"] .room-section-count {
  background-color: #e9ecef !important;
  color: #495057 !important;
}

/* ==================== Global Button Light Mode Styles ==================== */
/* Ensure all buttons have proper contrast in light mode */

[data-theme="light"] .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-success {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-success:hover {
  background-color: #157347 !important;
  border-color: #146c43 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-danger:hover {
  background-color: #bb2d3b !important;
  border-color: #b02a37 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-warning {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #000000 !important;
}

[data-theme="light"] .btn-warning:hover {
  background-color: #ffca2c !important;
  border-color: #ffc720 !important;
  color: #000000 !important;
}

[data-theme="light"] .btn-info {
  background-color: #0dcaf0 !important;
  border-color: #0dcaf0 !important;
  color: #000000 !important;
}

[data-theme="light"] .btn-info:hover {
  background-color: #31d2f2 !important;
  border-color: #25cff2 !important;
  color: #000000 !important;
}

[data-theme="light"] .btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-secondary:hover {
  background-color: #5c636a !important;
  border-color: #565e64 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-light {
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
  color: #212529 !important;
}

[data-theme="light"] .btn-light:hover {
  background-color: #e2e6ea !important;
  border-color: #dae0e5 !important;
  color: #212529 !important;
}

[data-theme="light"] .btn-dark {
  background-color: #212529 !important;
  border-color: #212529 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-dark:hover {
  background-color: #1c1f23 !important;
  border-color: #1a1e21 !important;
  color: #ffffff !important;
}

/* Outline Buttons - Light Mode */
[data-theme="light"] .btn-outline-primary {
  color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-color: transparent !important;
}
[data-theme="light"] .btn-outline-primary:hover {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #ffffff !important;
}
[data-theme="light"] .page-header-box .btn-outline-primary {
  color: #ffffff !important;
  background-color: #0d6efd !important;
}
[data-theme="light"] .page-header-box .btn-outline-primary:hover {
  background-color: #0b5ed7 !important;
}

[data-theme="light"] .btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
  background-color: transparent !important;
}

[data-theme="light"] .btn-outline-secondary i,
[data-theme="light"] .btn-outline-secondary .bi {
  color: inherit !important;
}

[data-theme="light"] .btn-outline-secondary:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-outline-secondary:hover i,
[data-theme="light"] .btn-outline-secondary:hover .bi {
  color: inherit !important;
}
[data-theme="light"] .page-header-box .btn-outline-secondary {
  color: #ffffff !important;
  background-color: #0d6efd !important;
}
[data-theme="light"] .page-header-box .btn-outline-secondary:hover {
  background-color: #0b5ed7 !important;
}

[data-theme="light"] .btn-outline-success {
  color: #198754 !important;
  border-color: #198754 !important;
  background-color: transparent !important;
}

[data-theme="light"] .btn-outline-success:hover {
  background-color: #198754 !important;
  border-color: #198754 !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-outline-danger {
  border-color: #dc3545 !important;
  background-color: transparent !important;
}
div:hover > .btn-outline-danger.delete-message-btn {
  background-color: #ffffff !important;
  color: #dc3545 !important;
  border-color: #dc3545 !important;
}
[data-theme="light"] .btn-outline-danger.delete-message-btn {
  border-color: transparent !important;
}

[data-theme="light"] .btn-outline-danger:hover {
  background-color: #dddddd !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

/* ==================== Chat Room View - Light Mode Fixes ==================== */
/* Fix dark backgrounds in chat room view page */

/* Chat room view container - ensure light background */
[data-theme="light"] .chat-room-view {
  background-color: #f8f9fa !important;
}

/* Ensure html and body have light background in light mode */
html[data-theme="light"],
html[data-theme="light"] body {
  background-color: #f8f9fa !important;
}

/* Chat header (mobile) */
[data-theme="light"] .chat-header {
  background-color: #ffffff !important;
  border-bottom-color: #dee2e6 !important;
}

[data-theme="light"] .chat-header-title {
  color: #212529 !important;
}

[data-theme="light"] .chat-header-back {
  color: #495057 !important;
}

/* Messages container */
[data-theme="light"] #messages-container {
  background-color: #e8e9ea !important;
}

/* Message bubbles */
[data-theme="light"] .message {
  background-color: transparent !important;
}

[data-theme="light"] .message-bubble.bg-light {
  background-color: #ffffff !important;
  color: #212529 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .message-bubble.bg-warning {
  background-color: #ffc107 !important;
  color: #000000 !important;
}

[data-theme="light"] .message-bubble.bg-warning p,
[data-theme="light"] .message-bubble.bg-warning .m-1 {
  color: #000000 !important;
}

[data-theme="light"] .message-bubble.bg-warning.text-white,
[data-theme="light"] .message-bubble.bg-warning .text-white {
  color: #000000 !important;
}

[data-theme="light"] .message-bubble.bg-warning .text-white-50 {
  color: rgba(0, 0, 0, 0.6) !important;
}

[data-theme="light"] .message strong {
  color: #495057 !important;
}

[data-theme="light"] .message p {
  color: #212529 !important;
}

[data-theme="light"] .message-bubble.bg-light p {
  color: #212529 !important;
}

[data-theme="light"] .message small,
[data-theme="light"] .message .text-muted {
  color: #6c757d !important;
}

/* File attachment alerts */
[data-theme="light"] .alert-light {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .alert-info {
  background-color: #cff4fc !important;
  border-color: #b6effb !important;
  color: #055160 !important;
}

/* File upload section */
[data-theme="light"] #file-upload-section .alert,
[data-theme="light"] #mobile-file-upload-section .alert {
  background-color: #cff4fc !important;
  border-color: #b6effb !important;
  color: #055160 !important;
}

[data-theme="light"] #file-upload-section strong,
[data-theme="light"] #mobile-file-upload-section strong,
[data-theme="light"] #selected-file-name,
[data-theme="light"] #mobile-selected-file-name {
  color: #055160 !important;
}

[data-theme="light"] #selected-file-size,
[data-theme="light"] #mobile-selected-file-size {
  color: #0a6c7c !important;
}

/* Chat input container (mobile) */
[data-theme="light"] .chat-input-container {
  background-color: #ffffff !important;
}

/* Chat room view - row backgrounds */
[data-theme="light"] .chat-room-view .row {
  background-color: transparent !important;
}

[data-theme="light"] .chat-room-view .col-md-9,
[data-theme="light"] .chat-room-view .col-md-3 {
  background-color: transparent !important;
}

[data-theme="light"] .chat-input-wrapper textarea,
[data-theme="light"] #mobile-comment-content,
[data-theme="light"] #comment-content {
  background-color: #ffffff !important;
  border-color: #ced4da !important;
  color: #212529 !important;
}

[data-theme="light"] .chat-input-wrapper textarea::placeholder,
[data-theme="light"] #mobile-comment-content::placeholder,
[data-theme="light"] #comment-content::placeholder {
  color: #6c757d !important;
}

[data-theme="light"] .chat-send-btn {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Card footer (desktop input area) */
[data-theme="light"] .card-footer {
  background-color: #f8f9fa !important;
  border-top-color: #dee2e6 !important;
}

/* Add member container */
[data-theme="light"] #add-member-container,
[data-theme="light"] #mobile-add-member-container {
  background-color: #f8f9fa !important;
  border-color: #dee2e6 !important;
}

[data-theme="light"] #add-member-container.bg-light,
[data-theme="light"] .bg-light {
  background-color: #f8f9fa !important;
}

[data-theme="light"] #new-member-select,
[data-theme="light"] #mobile-new-member-select {
  background-color: #ffffff !important;
  border-color: #ced4da !important;
  color: #212529 !important;
}

/* Mention autocomplete - Dark mode */
[data-theme="dark"] .mention-autocomplete {
  background-color: #1e1e1e !important;
  border-color: #444 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .mention-item {
  color: #e0e0e0 !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .mention-item:hover,
[data-theme="dark"] .mention-item.selected {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Mention autocomplete - Light mode */
[data-theme="light"] .mention-autocomplete {
  background-color: #ffffff !important;
  border-color: #ced4da !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .mention-item {
  color: #495057 !important;
  border-bottom-color: #f1f3f5 !important;
}

[data-theme="light"] .mention-item:hover,
[data-theme="light"] .mention-item.selected {
  background-color: #0d6efd !important;
  color: #ffffff !important;
}

/* Search results - Dark mode */
[data-theme="dark"] .search-filters.show {
  background: #1e1e1e !important;
  border: 1px solid #444 !important;
}

[data-theme="dark"] .search-result-item {
  background: #1e1e1e !important;
  border-color: #444 !important;
}

[data-theme="dark"] .search-result-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .search-result-meta {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-result-snippet {
  color: #b0b0b0 !important;
}

[data-theme="dark"] .load-more-messages {
  background: #1e1e1e !important;
  border-color: #444 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .load-more-messages:hover {
  background: #2d2d2d !important;
  border-color: #555 !important;
}

/* Modal content */
[data-theme="light"] .modal-content {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .modal-header {
  background-color: #ffffff !important;
  border-bottom-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .modal-title {
  color: #212529 !important;
}

[data-theme="light"] .modal-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .modal-body h6 {
  color: #212529 !important;
}

[data-theme="light"] .modal-body p {
  color: #212529 !important;
}

[data-theme="light"] .modal-footer {
  background-color: #ffffff !important;
  border-top-color: #dee2e6 !important;
}

/* Room info card */
[data-theme="light"] .chat-room-view .card {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.125) !important;
}

[data-theme="light"] .chat-room-view .card-header {
  background-color: #f8f9fa !important;
  border-bottom-color: #dee2e6 !important;
  color: #212529 !important;
}

[data-theme="light"] .chat-room-view .card-header h5 {
  color: #212529 !important;
}

[data-theme="light"] .chat-room-view .card-body {
  background-color: #ffffff !important;
  color: #212529 !important;
}

[data-theme="light"] .chat-room-view .card-body p {
  color: #212529 !important;
}

[data-theme="light"] .chat-room-view .card-body strong {
  color: #212529 !important;
}

/* Member list */
[data-theme="light"] .chat-room-view .list-unstyled li {
  color: #212529 !important;
}

[data-theme="light"] .chat-room-view h1 {
  color: #212529 !important;
}

/* Typing indicators */
[data-theme="light"] .typing-indicators {
  background-color: transparent !important;
  color: #6c757d !important;
}

/* Image modal */
[data-theme="light"] #imageModal .modal-content {
  background-color: #ffffff !important;
}

[data-theme="light"] #imageModal .modal-body {
  background-color: #f8f9fa !important;
}

[data-theme="light"] #modalFilename {
  color: #6c757d !important;
}

/* ==================== Icon Button Size Optimization ==================== */
/* Minimize width for buttons containing only icons */

/* Icon-only buttons - common styles */
.btn-icon,
.btn-sm.btn-icon,
.delete-message-btn,
.btn-download,
.btn-attachment-action,
.file-action-btn,
.message-action-btn {
  width: auto !important;
  min-width: unset !important;
  padding: 0.25rem 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Small icon buttons */
.btn-sm svg,
.btn-sm .bi,
.btn-sm i.bi {
  width: 1rem;
  height: 1rem;
}

/* Buttons with only icon inside - auto width */
.btn:has(> svg:only-child),
.btn:has(> .bi:only-child),
.btn:has(> i:only-child) {
  width: auto !important;
  min-width: unset !important;
  padding: 0.375rem 0.5rem !important;
}

.btn-sm:has(> svg:only-child),
.btn-sm:has(> .bi:only-child),
.btn-sm:has(> i:only-child) {
  padding: 0.25rem 0.375rem !important;
}

/* File attachment action buttons */
.file-attachment .btn,
.attachment-actions .btn,
.file-actions .btn {
  width: auto !important;
  min-width: unset !important;
  padding: 0.25rem 0.5rem !important;
}

/* Message delete/action buttons */
.message-actions .btn,
.comment-actions .btn {
  width: auto !important;
  min-width: unset !important;
  padding: 0.125rem 0.375rem !important;
  font-size: 0.75rem !important;
}

/* Download and trash icon buttons in tables */
td .btn-sm,
td .btn-outline-primary,
td .btn-outline-danger,
td .btn-outline-secondary {
  width: auto !important;
  min-width: unset !important;
  padding: 0.25rem 0.5rem !important;
}

/* Action column buttons */
.action-buttons .btn,
.actions .btn,
.btn-group-sm .btn {
  width: auto !important;
  min-width: unset !important;
}

/* Specific icon button types */
.btn-download,
.btn-delete,
.btn-edit,
.btn-view,
.btn-trash {
  width: auto !important;
  min-width: unset !important;
  padding: 0.25rem 0.5rem !important;
}

/* Chat message action buttons */
.message .delete-message-btn,
.message .btn-reaction,
.message .btn-reply {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
}

/* File list action buttons */
.file-list .btn,
.document-list .btn,
.attachment-list .btn {
  width: auto !important;
  min-width: unset !important;
  padding: 0.25rem 0.5rem !important;
}

/* Alert/notification close buttons */
.alert .btn-close,
.toast .btn-close,
.modal .btn-close {
  width: auto !important;
  min-width: unset !important;
}

/* Icon buttons in navbars */
.navbar .btn:has(svg),
.navbar .btn:has(.bi) {
  width: auto !important;
  min-width: unset !important;
  padding: 0.375rem 0.5rem !important;
}

/* ==================== Mobile Responsive - Icon Button Size Fix ==================== */
/* Prevent icon buttons from expanding on mobile viewports */

@media (max-width: 768px) {
  /* Prevent full-width button expansion for icon buttons */
  .btn-icon,
  .btn-sm.btn-icon,
  .delete-message-btn,
  .btn-download,
  .btn-attachment-action,
  .file-action-btn,
  .message-action-btn,
  .btn-trash,
  .btn-delete,
  .btn-edit,
  .btn-view {
    width: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Icon-only buttons should never expand */
  .btn:has(> svg:only-child),
  .btn:has(> .bi:only-child),
  .btn:has(> i:only-child) {
    width: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
  }

  .btn-sm:has(> svg:only-child),
  .btn-sm:has(> .bi:only-child),
  .btn-sm:has(> i:only-child) {
    width: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    padding: 0.25rem 0.375rem !important;
  }

  /* Override for mobile file remove button - borderless X icon */
  #mobile-remove-file-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    flex: 0 0 32px !important;
    background: none !important;
    border: none !important;
    color: #adb5bd !important;
  }

  #mobile-remove-file-btn:hover {
    color: #f87171 !important;
  }

  /* Table action buttons */
  td .btn,
  td .btn-sm {
    width: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
  }

  /* Button groups should not expand icon buttons */
  .btn-group .btn:has(svg),
  .btn-group .btn:has(.bi),
  .btn-group-sm .btn:has(svg),
  .btn-group-sm .btn:has(.bi) {
    width: auto !important;
    min-width: unset !important;
    flex: 0 0 auto !important;
  }

  /* Action column buttons */
  .action-buttons .btn,
  .actions .btn,
  .file-actions .btn,
  .attachment-actions .btn {
    width: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
  }

  /* Chat message action buttons - fixed small size */
  .message .delete-message-btn,
  .message .btn-reaction,
  .message .btn-reply {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    padding: 0 !important;
    flex: 0 0 28px !important;
  }

  /* File list/document list action buttons */
  .file-list .btn,
  .document-list .btn,
  .attachment-list .btn {
    width: auto !important;
    min-width: unset !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
  }

  /* Prevent d-grid from expanding icon buttons */
  .d-grid .btn:has(svg:only-child),
  .d-grid .btn:has(.bi:only-child) {
    width: auto !important;
    min-width: unset !important;
    justify-self: start !important;
  }

  /* Prevent flex containers from expanding icon buttons */
  .d-flex .btn:has(svg:only-child),
  .d-flex .btn:has(.bi:only-child) {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* Extra small screens */
@media (max-width: 576px) {
  /* Even smaller padding on very small screens */
  .btn-icon,
  .btn-sm.btn-icon,
  .delete-message-btn,
  .btn-download,
  .btn-attachment-action,
  .file-action-btn,
  .message-action-btn {
    padding: 0.2rem 0.4rem !important;
  }

  .btn-sm:has(> svg:only-child),
  .btn-sm:has(> .bi:only-child),
  .btn-sm:has(> i:only-child) {
    padding: 0.2rem 0.35rem !important;
  }

  /* Chat message buttons slightly smaller */
  .message .delete-message-btn,
  .message .btn-reaction,
  .message .btn-reply {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    flex: 0 0 26px !important;
  }
}

/* ==================== Mobile Light Mode - Force Light Backgrounds ==================== */
/* Ensure light backgrounds on mobile when data-theme="light" */

@media (max-width: 1024px) {
  /* Force light body background */
  html[data-theme="light"] body,
  [data-theme="light"] body {
    background-color: #f8f9fa !important;
  }

  /* Chat room view - light background */
  [data-theme="light"] .chat-room-view {
    background-color: #f8f9fa !important;
  }

  /* Chat input container area */
  [data-theme="light"] .chat-input-container {
    background-color: #f8f9fa !important;
  }

  /* The actual input form area */
  [data-theme="light"] .chat-input-form {
    background-color: #ffffff !important;
    border-radius: 1.5rem;
    padding: 0.25rem;
  }

  /* Messages container */
  [data-theme="light"] #messages-container {
    background-color: #e8e9ea !important;
  }

  /* Mobile bottom nav */
  [data-theme="light"] .mobile-bottom-nav {
    background-color: #ffffff !important;
  }
}

/* ==================== Circular Icon Buttons (Mobile Only) ==================== */
/* Ensure attach file and similar buttons are perfectly circular on mobile */

@media (max-width: 768px) {
  #mobile-attach-file-btn,
  #attach-file-btn,
  .btn-attach,
  .chat-send-btn {
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
}

/* Smaller circular buttons on very small screens */
@media (max-width: 576px) {
  #mobile-attach-file-btn,
  #attach-file-btn,
  .btn-attach,
  .chat-send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
  }
}

/* ==================== Light Mode Navigation Bar ==================== */
/* Dark navbar with light text in light mode */

/* Dropdown menus in light mode navbar - keep light background */
[data-theme="light"] .navbar .dropdown-menu {
  background-color: #ffffff !important;
  border-color: #dee2e6 !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .navbar .dropdown-item {
  color: #212529 !important;
}

[data-theme="light"] .navbar .dropdown-item:hover,
[data-theme="light"] .navbar .dropdown-item:focus {
  background-color: #f8f9fa !important;
  color: #000000 !important;
}

[data-theme="light"] .navbar .dropdown-item.active {
  background-color: #e9ecef !important;
  color: #000000 !important;
}

[data-theme="light"] .navbar .dropdown-header {
  color: #6c757d !important;
}

[data-theme="light"] .navbar .dropdown-divider {
  border-color: #dee2e6 !important;
}

/* ==================== Common Content Box - Dark Mode ==================== */
[data-theme="dark"] .content-box {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .content-box h3,
[data-theme="dark"] .content-box h4 {
  color: #ffffff !important;
}

/* ==================== Common Tab Navigation - Dark Mode ==================== */
[data-theme="dark"] .tab-navigation {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .tab-navigation .tab-item {
  color: #adb5bd !important;
}

[data-theme="dark"] .tab-navigation .tab-item:hover {
  color: #4a9eff !important;
  background: #2d2d2d !important;
}

[data-theme="dark"] .tab-navigation .tab-item.active {
  color: #4a9eff !important;
  border-bottom-color: #4a9eff !important;
}

/* ==================== Common Search Input - Dark Mode ==================== */
[data-theme="dark"] .search-input-box .input-icon {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-input-box .form-control {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .search-input-box .form-control:focus {
  border-color: #4a9eff !important;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15) !important;
}

[data-theme="dark"] .search-input-box .form-control::placeholder {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-input-box .btn-clear {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-input-box .btn-clear:hover {
  color: #e0e0e0 !important;
}

/* ==================== Common Chip/Tag Buttons - Dark Mode ==================== */
[data-theme="dark"] .chip {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .chip:hover {
  border-color: #4a9eff !important;
  background: #1a3a52 !important;
  color: #4a9eff !important;
}

/* ==================== Common Tag Links - Dark Mode ==================== */
[data-theme="dark"] .tag-link {
  background: #2d2d2d !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .tag-link:hover {
  background: #0d6efd !important;
  color: #ffffff !important;
}

/* ==================== Common List Items - Dark Mode ==================== */
[data-theme="dark"] .item-list .list-item {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .item-list .list-item:hover {
  background: #2d2d2d !important;
}

[data-theme="dark"] .item-list .list-item-icon {
  color: #adb5bd !important;
}

[data-theme="dark"] .item-list .list-item-text {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .item-list .list-item-time {
  color: #adb5bd !important;
}

/* ==================== Common Help Text - Dark Mode ==================== */
[data-theme="dark"] .help-text {
  color: #adb5bd !important;
}

[data-theme="dark"] .help-text strong {
  color: #4a9eff !important;
}

/* ==================== Common Suggestion Dropdown - Dark Mode ==================== */
[data-theme="dark"] .suggestion-dropdown {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .suggestion-dropdown .dropdown-header {
  background: #2d2d2d !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .suggestion-dropdown .dropdown-title {
  color: #adb5bd !important;
}

[data-theme="dark"] .suggestion-dropdown .dropdown-item {
  color: #e0e0e0 !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .suggestion-dropdown .dropdown-item:hover {
  background: #2d2d2d !important;
}

[data-theme="dark"] .suggestion-dropdown .dropdown-item-icon {
  color: #adb5bd !important;
}

[data-theme="dark"] .suggestion-dropdown .dropdown-item-type {
  color: #adb5bd !important;
}

/* ==================== Search Page Specific - Dark Mode ==================== */
/* Search bar component */
[data-theme="dark"] .search-bar-component {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .search-tabs {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .search-tab {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-tab:hover {
  color: #4a9eff !important;
  background: #2d2d2d !important;
}

[data-theme="dark"] .search-tab.active {
  color: #4a9eff !important;
  border-bottom-color: #4a9eff !important;
}

[data-theme="dark"] .search-icon {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-bar-component .search-input,
[data-theme="dark"] .search-input-container .search-input {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .search-bar-component .search-input:focus,
[data-theme="dark"] .search-input-container .search-input:focus {
  border-color: #4a9eff !important;
  box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.15) !important;
}

[data-theme="dark"] .search-bar-component .search-input::placeholder,
[data-theme="dark"] .search-input-container .search-input::placeholder {
  color: #adb5bd !important;
}

[data-theme="dark"] .btn-clear {
  color: #adb5bd !important;
}

[data-theme="dark"] .btn-clear:hover {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .search-suggestions {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .suggestions-header {
  background: #2d2d2d !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .suggestions-title {
  color: #adb5bd !important;
}

[data-theme="dark"] .suggestion-item {
  color: #e0e0e0 !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .suggestion-item:hover {
  background: #2d2d2d !important;
}

[data-theme="dark"] .suggestion-icon {
  color: #adb5bd !important;
}

[data-theme="dark"] .suggestion-type {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-help-text {
  color: #adb5bd !important;
}

[data-theme="dark"] .search-help-text strong {
  color: #4a9eff !important;
}

/* Quick suggestions section */
[data-theme="dark"] .quick-suggestions {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .quick-suggestions h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .suggestion-chip {
  background: #2d2d2d !important;
  border-color: #444 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .suggestion-chip:hover {
  border-color: #4a9eff !important;
  background: #1a3a52 !important;
  color: #4a9eff !important;
}

/* Search history section */
[data-theme="dark"] .search-history {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .search-history h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .history-item {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .history-item:hover {
  background: #2d2d2d !important;
}

[data-theme="dark"] .history-icon {
  color: #adb5bd !important;
}

[data-theme="dark"] .history-query {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .history-time {
  color: #adb5bd !important;
}

/* Popular searches section */
[data-theme="dark"] .popular-searches {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .popular-searches h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .popular-tag {
  background: #2d2d2d !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .popular-tag:hover {
  background: #0d6efd !important;
  color: #ffffff !important;
}

/* ==================== Dashboard Dark Mode ==================== */
/* Dashboard header - gradient stays the same for both themes */
[data-theme="dark"] .dashboard-header,
[data-theme="light"] .dashboard-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

[data-theme="dark"] .dashboard-title,
[data-theme="dark"] .dashboard-subtitle,
[data-theme="dark"] .dashboard-time,
[data-theme="light"] .dashboard-title,
[data-theme="light"] .dashboard-subtitle,
[data-theme="light"] .dashboard-time {
  color: white !important;
}

/* Widget Cards */
[data-theme="dark"] .widget-card {
  background: #1e1e1e !important;
  border-color: #333 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .widget-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .widget-header {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .widget-title {
  color: #ffffff !important;
}

[data-theme="dark"] .widget-footer {
  background: #252525 !important;
  border-top-color: #333 !important;
}

/* Stats Cards */
[data-theme="dark"] .stat-card {
  background: #1e1e1e !important;
  border-color: #333 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .stat-card-clickable::after {
  color: #adb5bd !important;
}

[data-theme="dark"] .stat-card-clickable:hover {
  border-color: #4a9eff !important;
}

[data-theme="dark"] .stat-label {
  color: #adb5bd !important;
}

/* Quick Actions */
[data-theme="dark"] .quick-action {
  background: #1e1e1e !important;
  border-color: #333 !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] .quick-action:hover {
  border-color: #4a9eff !important;
  color: #4a9eff !important;
  box-shadow: 0 8px 25px rgba(74, 158, 255, 0.2) !important;
}

[data-theme="dark"] .quick-action-desc {
  color: #adb5bd !important;
}

/* Todo Items */
[data-theme="dark"] .todo-item {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .todo-item:hover {
  background: #2d2d2d !important;
}

[data-theme="dark"] .todo-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .todo-meta {
  color: #adb5bd !important;
}

/* Notification Items */
[data-theme="dark"] .notification-item {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .notification-item.unread {
  background: rgba(14, 165, 233, 0.1) !important;
  border-left-color: #0ea5e9 !important;
}

[data-theme="dark"] .notification-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .notification-message {
  color: #adb5bd !important;
}

[data-theme="dark"] .notification-time {
  color: #6c757d !important;
}

/* Mention Items */
[data-theme="dark"] .mention-item {
  border-color: #333 !important;
}

[data-theme="dark"] .mention-item:hover {
  background: #2d2d2d !important;
  border-color: #444 !important;
}

[data-theme="dark"] .mention-item.unread {
  background: rgba(0, 123, 255, 0.1) !important;
  border-left-color: #4a9eff !important;
}

[data-theme="dark"] .mention-item.pinned {
  background: rgba(255, 193, 7, 0.1) !important;
  border-left-color: #ffc107 !important;
}

/* Activity Items */
[data-theme="dark"] .activity-item {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .activity-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .activity-desc {
  color: #adb5bd !important;
}

[data-theme="dark"] .activity-time {
  color: #6c757d !important;
}

/* Placeholder Widgets */
[data-theme="dark"] .placeholder-widget {
  background: #252525 !important;
  border-color: #444 !important;
  color: #adb5bd !important;
}

[data-theme="dark"] .placeholder-icon {
  opacity: 0.3;
}

[data-theme="dark"] .placeholder-title {
  color: #e0e0e0 !important;
}

[data-theme="dark"] .placeholder-desc {
  color: #adb5bd !important;
}

/* Loading Skeleton */
[data-theme="dark"] .loading-skeleton {
  background: linear-gradient(
    90deg,
    #2d2d2d 25%,
    #3d3d3d 50%,
    #2d2d2d 75%
  ) !important;
}

/* Modal in dark mode */
[data-theme="dark"] .modal-content {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .modal-header {
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .modal-title {
  color: #ffffff !important;
}

[data-theme="dark"] .modal-footer {
  border-top-color: #333 !important;
}

/* ==================== Accordion (Collapsible Sections) ==================== */
[data-theme="dark"] .accordion {
  --bs-accordion-bg: #1e1e1e;
  --bs-accordion-border-color: #333;
}

[data-theme="dark"] .accordion-item {
  background: #1e1e1e !important;
  border-color: #333 !important;
}

[data-theme="dark"] .accordion-button {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-color: #333 !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
  background: #2d2d2d !important;
  color: #ffffff !important;
  box-shadow: inset 0 -1px 0 #333 !important;
}

[data-theme="dark"] .accordion-button::after {
  filter: invert(1) brightness(0.8);
}

[data-theme="dark"] .accordion-button:focus {
  border-color: #4a9eff !important;
  box-shadow: 0 0 0 0.25rem rgba(74, 158, 255, 0.25) !important;
}

[data-theme="dark"] .accordion-body {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-top-color: #333 !important;
}

[data-theme="dark"] .accordion-button .badge.bg-secondary {
  background: #444 !important;
  color: #adb5bd !important;
}

/* Dark mode - Todo Widget */
[data-theme="dark"] .todo-widget-item {
  background: #2d2d2d;
  color: #e0e0e0;
}

[data-theme="dark"] .todo-widget-item:hover {
  background: #3a3a3a;
}

[data-theme="dark"] .todo-widget-item .fw-bold,
[data-theme="dark"] .todo-widget-item .text-dark {
  color: #ffffff !important;
}

[data-theme="dark"] .todo-stat-box,
[data-theme="dark"] .todo-stat-box.bg-light,
[data-theme="dark"] #todo-stats .bg-light {
  background: #2d2d2d !important;
  border: 1px solid #444 !important;
}

[data-theme="dark"] .todo-stat-box:hover {
  background: #3a3a3a !important;
}

[data-theme="dark"] #todo-stats .text-muted {
  color: #adb5bd !important;
}

/* Dark mode - Todo Widget Tabs */
[data-theme="dark"] .todo-tabs {
  border-bottom-color: #444;
}

[data-theme="dark"] .todo-tabs .nav-link {
  color: #adb5bd;
}

[data-theme="dark"] .todo-tabs .nav-link:hover {
  color: #4a9eff;
}

[data-theme="dark"] .todo-tabs .nav-link.active {
  color: #4a9eff;
  border-bottom-color: #4a9eff;
}

[data-theme="dark"] .todo-list-scrollable::-webkit-scrollbar-track {
  background: #2d2d2d;
}

[data-theme="dark"] .todo-list-scrollable::-webkit-scrollbar-thumb {
  background: #555;
}

[data-theme="dark"] .todo-list-scrollable::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* ==================== Form Validation Errors (All Modes) ==================== */
/* Yii2 validation error messages - red color for visibility */
/* Supports both yii\widgets\ActiveForm and yii\bootstrap5\ActiveForm */

.help-block-error,
.invalid-feedback,
.has-error .help-block,
.field-has-error .help-block,
.is-invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback {
  color: #dc3545 !important;
  display: block;
}

.has-error .form-control,
.has-error .form-select,
.field-has-error .form-control,
.field-has-error .form-select,
.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
  border-color: #dc3545 !important;
}

.has-error .control-label,
.field-has-error .control-label {
  color: #dc3545 !important;
}

/* ==================== Form Validation Errors (Dark Mode) ==================== */
/* Yii2 validation error messages */
/* Supports both yii\widgets\ActiveForm and yii\bootstrap5\ActiveForm */

[data-theme="dark"] .help-block-error,
[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .has-error .help-block,
[data-theme="dark"] .field-has-error .help-block,
[data-theme="dark"] .is-invalid ~ .invalid-feedback,
[data-theme="dark"] .was-validated .form-control:invalid ~ .invalid-feedback,
[data-theme="dark"] .was-validated .form-select:invalid ~ .invalid-feedback {
  color: #f87171 !important;
}

[data-theme="dark"] .has-error .form-control,
[data-theme="dark"] .has-error .form-select,
[data-theme="dark"] .field-has-error .form-control,
[data-theme="dark"] .field-has-error .form-select,
[data-theme="dark"] .form-control.is-invalid,
[data-theme="dark"] .form-select.is-invalid,
[data-theme="dark"] .was-validated .form-control:invalid,
[data-theme="dark"] .was-validated .form-select:invalid {
  border-color: #f87171 !important;
}

[data-theme="dark"] .has-error .control-label,
[data-theme="dark"] .field-has-error .control-label {
  color: #f87171 !important;
}

/* ==================== Notification Dropdown (Dark Mode) ==================== */
[data-theme="dark"] .notification-dropdown {
  background: #1e1e1e !important;
  border: 1px solid #333 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-header {
  background: #2d2d2d !important;
  color: #ffffff !important;
  border-bottom: 1px solid #333 !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-header a {
  color: #4a9eff !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-item {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  border-bottom-color: #333 !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-item:hover {
  background: #2d2d2d !important;
  color: #ffffff !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-item.text-muted {
  color: #adb5bd !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-item small,
[data-theme="dark"] .notification-dropdown .dropdown-item .text-muted {
  color: #888 !important;
}

[data-theme="dark"] .notification-dropdown .dropdown-item strong,
[data-theme="dark"] .notification-dropdown .dropdown-item .fw-bold {
  color: #ffffff !important;
}

/* Meeting view page - Dark mode */
[data-theme="dark"] .meeting-view .bg-light,
[data-theme="dark"] .meeting-view .bg-body-secondary {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}

/* ==========================================
   Global Search - Dark Mode
   ========================================== */
[data-theme="dark"] .global-search-wrapper {
  background: #2d2d2d;
  border-color: #444;
}

[data-theme="dark"] .global-search-wrapper:focus-within {
  border-color: #4a9eff;
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.2);
}

[data-theme="dark"] .global-search-icon {
  color: #adb5bd;
}

[data-theme="dark"] .global-search-input {
  color: #e0e0e0;
  background: transparent;
}

[data-theme="dark"] .global-search-input::placeholder {
  color: #6c757d;
}

[data-theme="dark"] .global-search-clear {
  color: #adb5bd;
}

[data-theme="dark"] .global-search-clear:hover {
  background: #3a3a3a;
  color: #e0e0e0;
}

[data-theme="dark"] .global-search-results {
  background: #1e1e1e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .global-search-results .search-results-header {
  background: #2d2d2d;
  border-bottom-color: #333;
}

[data-theme="dark"] .global-search-results .search-results-header h5 {
  color: #ffffff;
}

[data-theme="dark"] #search-results-content {
  background: #1e1e1e;
}

[data-theme="dark"] .search-result-section {
  background: #2d2d2d;
}

[data-theme="dark"] .search-result-section .section-header {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: #333;
}

[data-theme="dark"] .search-result-section .section-header h6 {
  color: #e0e0e0;
}

[data-theme="dark"] .search-result-item:hover {
  background: #3a3a3a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .search-result-item .result-icon {
  background: #1e1e1e;
}

[data-theme="dark"] .search-result-item .result-title {
  color: #ffffff;
}

[data-theme="dark"] .search-result-item .result-meta {
  color: #adb5bd;
}

[data-theme="dark"] .search-result-item .result-arrow {
  color: #6c757d;
}

[data-theme="dark"] .no-results-message h5 {
  color: #e0e0e0;
}

[data-theme="dark"] .no-results-message .text-muted {
  color: #adb5bd !important;
}