/* Dark Mode Styles for CloudBox */
/* Add this to your layout or create a separate dark-mode.css file */

:root {
    /* Light mode colors (default) */
    --bg-body: #ffffff;
    --bg-card: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-hover: #f1f3f4;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --border-color: #dadce0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --table-stripe: #f8f9fa;
}

[data-theme="dark"] {
    /* Dark mode colors */
    --bg-body: #202124;
    --bg-card: #292a2d;
    --bg-secondary: #35363a;
    --bg-hover: #3c4043;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --border-color: #5f6368;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --sidebar-bg: #292a2d;
    --header-bg: #292a2d;
    --input-bg: #35363a;
    --table-stripe: #2d2e30;
}

/* Body */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.card,
.iq-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 1px 3px var(--shadow-color) !important;
}

.card:hover,
.iq-card:hover {
    box-shadow: 0 4px 6px var(--shadow-color) !important;
}

.card-header {
    background-color: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-body {
    color: var(--text-primary) !important;
}

/* Sidebar */
.iq-sidebar,
.sidebar-default {
    background-color: var(--sidebar-bg) !important;
}

.iq-sidebar-logo,
.iq-sidebar-logo .header-logo {
    background-color: var(--sidebar-bg) !important;
}

.iq-sidebar-menu .iq-menu > li > a {
    color: var(--text-primary) !important;
}

.iq-sidebar-menu .iq-menu > li > a:hover {
    background-color: var(--bg-hover) !important;
}

.iq-sidebar-menu .iq-menu > li.active > a,
.iq-sidebar-menu .iq-menu > li.active > a.collapsed {
    background-color: var(--bg-selected) !important;
    color: var(--gd-primary, #1a73e8) !important;
}

/* Navbar */
.iq-top-navbar {
    background-color: var(--header-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

.iq-navbar-custom .navbar-nav .nav-item .nav-link {
    color: var(--text-primary) !important;
}

.iq-navbar-custom .navbar-nav .nav-item .nav-link:hover {
    color: var(--text-primary) !important;
    background-color: var(--bg-hover) !important;
}

/* Navbar dropdown */
.iq-sub-dropdown {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 6px var(--shadow-color) !important;
}

.iq-sub-card,
.iq-sub-card .card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Footer */
.iq-footer {
    background-color: var(--sidebar-bg) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Forms */
.form-control {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--gd-primary, #1a73e8) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2) !important;
}

.form-control::placeholder {
    color: var(--text-secondary) !important;
}

/* Tables */
.table {
    color: var(--text-primary) !important;
}

.table thead th {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.table tbody tr {
    border-color: var(--border-color) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe) !important;
}

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

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

/* Buttons */
.btn {
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--gd-primary, #1a73e8) !important;
    border-color: var(--gd-primary, #1a73e8) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: var(--gd-primary-hover, #1557b0) !important;
    border-color: var(--gd-primary-hover, #1557b0) !important;
}

.btn-secondary {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.btn-secondary:hover {
    background-color: var(--bg-hover) !important;
}

/* Badges */
.badge {
    background-color: var(--gd-primary, #1a73e8) !important;
    color: #ffffff !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 4px 6px var(--shadow-color) !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-hover) !important;
}

/* Pagination */
.page-link {
    color: var(--gd-primary, #1a73e8) !important;
    background-color: transparent !important;
    border-color: var(--border-color) !important;
}

.page-link:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
}

.page-item.active .page-link {
    background-color: var(--gd-primary, #1a73e8) !important;
    border-color: var(--gd-primary, #1a73e8) !important;
}

/* Search bar */
.iq-search-bar .search-query {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Icons with text */
.las,
.la,
.ri,
.fas,
.fab {
    color: var(--text-primary) !important;
}

/* Links */
a {
    color: var(--gd-primary, #1a73e8) !important;
}

a:hover {
    color: var(--gd-primary-hover, #1557b0) !important;
}

/* Text colors */
.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary,
.text-muted {
    color: var(--text-secondary) !important;
}

/* Breadcrumbs */
.breadcrumb-item a {
    color: var(--text-secondary) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
}

/* File icons */
.icon-small {
    transition: all 0.3s ease;
}

/* Custom scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #5f6368;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #7c8594;
}

/* Chart colors (improve visibility in dark mode) */
[data-theme="dark"] text,
[data-theme="dark"] tspan {
    fill: var(--text-primary) !important;
}

/* Modal */
.modal-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var-theme(--text-primary) !important;
}

.modal-header {
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.modal-footer {
    border-top-color: var(--border-color) !important;
}

/* Toast/alert messages */
.alert {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.alert-primary {
    background-color: rgba(26, 115, 232, 0.1) !important;
    border-color: var(--gd-primary, #1a73e8) !important;
    color: var(--gd-primary, #1a73e8) !important;
}

/* Action bar */
.dashboard1-dropdown .dashboard1-info {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Sidebar bottom */
.sidebar-bottom {
    background-color: var(--sidebar-bg) !important;
    color: var(--text-secondary) !important;
}

/* Welcome content */
.welcome-content h4 {
    color: var(--text-primary) !important;
}

/* Navigation menu icons */
.iq-arrow-left,
.iq-arrow-right {
    color: var(--text-secondary) !important;
}

/* Progress bars */
.progress {
    background-color: var(--bg-secondary) !important;
}

.progress-bar {
    background-color: var(--gd-primary, #1a73e8) !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--text-primary) !important;
    color: var(--bg-body) !important;
}

/* Code blocks */
pre,
code {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Lists */
.list-group-item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Input groups */
.input-group-text {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Custom file icons styling */
.image-thumb .iq-thumb {
    background-color: var(--bg-secondary) !important;
}

/* Storage progress */
.iq-progress-bar .progress {
    background-color: var(--bg-secondary) !important;
}

/* Smooth transitions */
body,
.card,
.btn,
.form-control,
a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode toggle button specific styles */
.dark-mode-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.dark-mode-toggle:hover {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.dark-mode-toggle .fa-moon {
    display: block;
}

.dark-mode-toggle .fa-sun {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .fa-moon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle .fa-sun {
    display: block;
}

/* Logo adjustments for dark mode */
[data-theme="dark"] .header-logo img {
    filter: brightness(0.9);
}

/* Dropdown menu adjustments */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card) !important;
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

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

/* Ensure visibility in all modes */
[data-theme="dark"] .text-white,
[data-theme="dark"] .text-light {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .badge-light {
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
}