/* Dark Mode CSS for Spotbot Web App */

/* Root CSS Variables for Light Mode (Default) */
:root {
    /* Background colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f3f3;
    --bg-tertiary: #f0f0f0;
    --bg-card: #ffffff;
    --bg-hover: #dddddd7c;
    --bg-navbar: linear-gradient(180deg,#ffffff 50%,#ffffffc6 100%);
    --bg-popup: rgba(0, 0, 0, 0.5);
    --bg-message-bubble: #f1f1f1;
    --bg-button: #f0f0f088;
    --bg-snoozed: rgba(0, 0, 0, 0.66);
    --bg-dropdown: linear-gradient(0deg, rgb(255, 255, 255) 20%, rgba(240, 240, 240, 0.9));
    
    /* Text colors */
    --text-primary: #000000;
    --text-secondary: #525252;
    --text-muted: #a5a5a5;
    --text-on-dark: #ffffff;
    
    /* Border colors */
    --border-primary: #262626;
    --border-secondary: #e5e5e5;
    --border-accent: #0bb6d1;
    
    /* Shadow colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    
    /* Status colors */
    --status-red: #ff0000;
    --status-green: #0bd136;
    
    /* Time colors */
    --time-color: #2f2f2f80;
    --time-border-color: #cccccc5b;
    
    /* Icon colors */
    --icon-color: rgb(33, 33, 33);
    --icon-hover: #0bb7d185;
}

/* Dark Mode CSS Variables */
[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2a2a2a;
    --bg-card: #2d2d2d;
    --bg-hover: #3a3a3a;
    --bg-navbar: linear-gradient(180deg,#242424 50%,#1f1f1fc6 100%);
    --bg-popup: rgba(0, 0, 0, 0.8);
    --bg-message-bubble: #2d2d2d;
    --bg-button: #3a3a3a;
    --bg-snoozed: rgba(0, 0, 0, 0.85);
    --bg-dropdown: linear-gradient(0deg, rgb(36, 36, 36) 20%, rgba(42, 42, 42, 0.9));
    
    /* Text colors */
    --text-primary: #e8e8e8;
    --text-secondary: #b8b8b8;
    --text-muted: #888888;
    --text-on-dark: #ffffff;
    
    /* Border colors */
    --border-primary: #444444;
    --border-secondary: #3a3a3a;
    --border-accent: #0bb6d1;
    
    /* Shadow colors */
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.5);
    
    /* Status colors */
    --status-red: #ff4444;
    --status-green: #44ff44;
    
    --time-border-color: #44444480;
    
    /* Icon colors */
    --icon-color: #e8e8e8;
    --icon-hover: #0bb7d1aa;
}

/* Apply light mode styles explicitly */
:root .registrationNavbar {
    background-color: white !important;
}

/* Apply dark mode to body and main elements */
[data-theme="dark"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] #page-wrapper {
    background: var(--bg-secondary);
}

[data-theme="dark"] #page-inner {
    background-color: var(--bg-card) !important;
}

/* Navbar dark mode */
[data-theme="dark"] .navbar {
    background: var(--bg-navbar) !important;
}

[data-theme="dark"] .registrationNavbar {
    background-color: #242424 !important;
}

[data-theme="dark"] .navbar-icon {
    color: var(--icon-color);
}

[data-theme="dark"] .navbar-icon:hover {
    color: #cccccc !important;
}

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

[data-theme="dark"] .navbar-toggler i {
    color: #ffffff !important;
}

[data-theme="dark"] .navbar-toggler:hover {
    color: var(--border-accent) !important;
}

[data-theme="dark"] .navbar-toggler:hover i {
    color: var(--border-accent) !important;
}

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

[data-theme="dark"] .icon-button i {
    color: #ffffff !important;
}

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

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

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

[data-theme="dark"] #Message_options_menu > a.navbar-icon {
    color: #ffffff !important;
}

[data-theme="dark"] #Message_options_menu > a.navbar-icon i {
    color: #ffffff !important;
}

[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .navbar-nav .nav-link:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-nav .active-link .nav-link {
    background-color: var(--border-accent);
    color: var(--text-on-dark);
}

/* Messages dark mode */
[data-theme="dark"] .message-bubble {
    background-color: var(--bg-message-bubble);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .message-buttons > button {
    background-color: var(--bg-button);
    color: var(--text-primary);
    
}

[data-theme="dark"] .message-buttons > button:hover {
    background-color: var(--bg-hover);
}

[data-theme="dark"] .time-received {
    background-color: #1a1a1a;
    color: #ffffff80;
}

[data-theme="dark"] .message-row {
    border-bottom: 1px solid #292929;
}

/* Popup dark mode */
[data-theme="dark"] .popupContainer {
    background-color: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 0 10px var(--shadow-medium);
}

[data-theme="dark"] .popupOver {
    background-color: var(--bg-popup);
}

[data-theme="dark"] .close {
    color: #ffffff !important;
    background-color: transparent !important;
}

[data-theme="dark"] .close i {
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 50%;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

[data-theme="dark"] .close:hover i {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Close-p button dark mode (used in offcanvas) */
[data-theme="dark"] .close-p {
    color: #ffffff !important;
    background-color: transparent !important;
}

[data-theme="dark"] .close-p i {
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 50%;
    padding: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

[data-theme="dark"] .close-p:hover i {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Buttons dark mode */
[data-theme="dark"] .button {
    background-color: var(--border-accent);
    color: var(--text-on-dark);
}

[data-theme="dark"] .registration_button {
    background-color: var(--border-accent);
    color: var(--text-on-dark);
}

[data-theme="dark"] .grey_button {
    background-color: #666 !important;
    color: var(--text-primary) !important;
}

/* Input fields dark mode */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] select{
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="email"]:focus,
[data-theme="dark"] input[type="tel"]:focus {
    border: 1px solid var(--border-accent);
}

/* Dropdown dark mode */
[data-theme="dark"] .dropdown-bottom {
    background: var(--bg-dropdown);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .dropdown-bottom > div {
    background-color: var(--bg-button);
    border: 1px solid var(--border-primary);
}

/* Spotbot list dark mode */
[data-theme="dark"] #spotbotsContainer {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .spotbot_styling {
    background-color: var(--bg-card);
    border: 1px solid var(--border-accent);
}

[data-theme="dark"] .section {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .nested-table {
    color: var(--text-primary);
}

/* Snooze elements dark mode */
[data-theme="dark"] .snoozed_2nd {
     background-color: rgb(0 0 0 / 42%);
}

[data-theme="dark"] .snoozed_until {
    background-color: rgba(0, 0, 0, 0.9) !important;
}

/* OnOff popup dark mode */
[data-theme="dark"] .onoffContent {
    background: var(--bg-dropdown);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .cameras {
    background-color: var(--bg-button);
    border: 1px solid var(--border-primary);
}

/* Toggle switches dark mode */
[data-theme="dark"] .slider {
    background-color: var(--border-primary);
}

[data-theme="dark"] input:checked + .slider {
    background-color: var(--border-accent);
}

/* Account popup dark mode */
[data-theme="dark"] .fullscreen-popup {
    background-color:  #1a1a1a97;
}

[data-theme="dark"] .fullscreen-popup-header {
    box-shadow: 0 2px 4px var(--shadow-light);
}


/* Status table dark mode */
[data-theme="dark"] .status-table {
    color: var(--text-primary);
}

/* Tab container dark mode */
[data-theme="dark"] .tab-checkbox-container {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .tab-label {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .tab-checkbox:checked + .tab-label {
    background-color: var(--border-accent);
    color: var(--text-on-dark);
}

/* Offcanvas dark mode */
[data-theme="dark"] .offcanvas {
    background-color: #24242495 !important;
    color: var(--text-primary);
}

[data-theme="dark"] .offcanvas-header {
    border-bottom: 1px solid var(--border-accent);
}

[data-theme="dark"] .offcanvas-sbname {
    background-color: var(--bg-tertiary);
}

/* Round buttons dark mode */
[data-theme="dark"] .round-button {
    background-color: var(--bg-button);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .greenround-button {
    background-color: rgba(11, 209, 54, 0.3);
    border: 1px solid var(--status-green);
    color: var(--text-primary);
}

[data-theme="dark"] .redround-button {
    background-color: rgba(255, 73, 73, 0.3);
    border: 1px solid var(--status-red);
    color: var(--text-primary);
}

/* Bottom nav dark mode */
[data-theme="dark"] #bottom_nav {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .navbar.fixed-bottom {
    background-color: var(--bg-secondary) !important;
    border-top: 0.5px solid var(--border-secondary);
}

/* Notification div dark mode */
[data-theme="dark"] #notification_activate_div {
    background-color: var(--bg-secondary);
    box-shadow: 0px -5px 10px var(--shadow-light);
}

/* Spinner dark mode */
[data-theme="dark"] .spin {
    border: 8px solid var(--bg-tertiary);
    border-top: 8px solid var(--border-accent);
}

/* Modal dark mode */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--border-accent);
}

/* Section nested dark mode */
[data-theme="dark"] .section.nested {
    background-color: var(--bg-tertiary);
}

/* Error messages dark mode */
[data-theme="dark"] .error-msg {
    color: #ff6666;
}

/* Top message date dark mode */
[data-theme="dark"] .top-message-date {
    background-color: rgb(26 26 26 / 80%);
    backdrop-filter: blur(5px);
}

/* Scroll down button dark mode */
[data-theme="dark"] .scroll-down-button {
    background-color: rgba(96, 96, 96, 0.8);
    border: 1px solid var(--border-primary);
}

/* Selection mode dark mode */
[data-theme="dark"] .selector > i {
    background-color: rgba(153, 153, 153, 0.6);
}

[data-theme="dark"] .msg-selected .selector > i {
    background-color: rgba(255, 255, 255, 0.9);
}

/* WebRTC component dark mode adjustments */
[data-theme="dark"] .webrtc-floating-controls {
    background-color: rgba(40, 40, 40, 0.9);
}

/* WebRTC close button - same style for both light and dark modes */
[data-theme="dark"] .webrtc-close-btn {
    /* Inherit the same styles from light mode - no changes needed */
}

/* Options menu dark mode */
[data-theme="dark"] .options {
    background-color: var(--bg-card);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .options a {
    color: var(--text-primary);
}

/* Account button dark mode */
[data-theme="dark"] .account-button {
    background-color: var(--border-accent);
    border: 2px solid var(--border-accent);
}

/* Snooze button dark mode */
[data-theme="dark"] .snooze-button {
    background-color: var(--bg-button);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .snoozed .snooze-button {
    background-color: rgb(120, 120, 120) !important;
    color: var(--text-on-dark) !important;
    border: 1px solid var(--border-primary) !important;
}

/* Logo switching for dark mode */
/* Hide original logos and replace with dark-mode friendly versions */

/* Small logos (20px height) */
[data-theme="dark"] img[src*="SpotBot-Logo-fav.png"][style*="20px"] {
        content: url("../../assets/img/fixed/icon_white-180x180.png");
}

/* Medium logos (25px height) */
[data-theme="dark"] img[src*="SpotBot-Logo-fav.png"][style*="25px"] {
        content: url("../../assets/img/fixed/icon_white-180x180.png");
}

/* Large logos (50px height) */
[data-theme="dark"] img[src*="SpotBot-Logo-fav.png"][style*="50px"] {
        content: url("../../assets/img/fixed/icon_white-180x180.png");
}

/* Extra large logos (70px height) */
[data-theme="dark"] img[src*="SpotBot-Logo-fav.png"][style*="70px"] {
        content: url("../../assets/img/fixed/icon_white-180x180.png");
}

/* Full black logo replacement */
[data-theme="dark"] img[src*="SpotBot_Logo-FULL-BLACK"] {
        content: url("../../assets/img/fixed/logo.png");
}

/* Generic SpotBot logo replacement */
[data-theme="dark"] img[src*="SpotBot-Logo-fav.png"]:not([style*="max-width"]) {
        content: url("../../assets/img/fixed/icon_white-180x180.png");
}

/* For logos with max-width styles */
[data-theme="dark"] img[src*="SpotBot-Logo-fav.png"][style*="max-width"] {
        content: url("../../assets/img/fixed/icon_white-180x180.png");
}

/* Snooze action buttons dark mode */
[data-theme="dark"] .snooze-action-btn {
    background-color: var(--bg-button) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .snooze-action-btn:hover {
    background-color: var(--bg-hover) !important;
}

/* Camera selection section dark mode */
[data-theme="dark"] .camera-selection-section .form-check {
    border: 1px solid var(--border-primary) !important;
}

/* Highlighted icon dark mode */
[data-theme="dark"] .highlighted-icon {
    color: #ffffff !important;
}

/* Grey icon dark mode */
[data-theme="dark"] .grey-icon {
    color: #ffffff !important;
}



[data-theme="dark"] .form-switch > input {
    border-color: #d0d0d0 !important;
}