@import "highcharts.css";

/* Light mode (default) variables */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f7f7f7;
    --bg-tertiary: #f5f5f5;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #d9dee4;
    --card-bg: #ffffff;
    --sidebar-bg: #2a3f54;
    --sidebar-text: #e7e7e7;
    --primary-color: #0b2091;
    --primary-hover: #090d6b;
    --input-bg: #ffffff;
    --input-text: #333333;
    --table-header-bg: #f7f7f7;
    --table-row-hover: #f5f5f5;
    --modal-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
    --link-text: #0b2091;
    --nav-bg: #ffffff;
    --nav-text: #000000;
    --contrast-bg: #f7f6f6;
    --tab-bg: #f5f7fa;
    --disabled-bg: #eee;
    --hover-bg: #d9dee4;
    --highcharts-background-color: #ffffff;
    --highcharts-neutral-color-100: #000000;        /* need to be shades of black */
    --highcharts-neutral-color-80: #1e1d1d;
    --highcharts-neutral-color-60: #3a3838;
    --highcharts-neutral-color-40: #999999;
}

/* Dark mode variables */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --text-primary: #e4e4e4;
    --text-secondary: #b0b0b0;
    --border-color: #ddd;
    --card-bg: #2d2d2d;
    --sidebar-bg: #1a1a1a;
    --sidebar-text: #e4e4e4;
    --primary-color: #4d5fd1;
    --primary-hover: #3d4fb1;
    --input-bg: #494848;
    --input-text: #e4e4e4;
    --table-header-bg: #2d2d2d;
    --table-row-hover: #3a3a3a;
    --modal-bg: #2d2d2d;
    --shadow: rgba(0, 0, 0, 0.5);
    --link-text: #47a6f8;
    --nav-bg: #2d2d2d;
    --nav-text: #e4e4e4;
    --contrast-bg: #3a3a3a;
    --tab-bg: #4d535c;
    --disabled-bg: #838080;
    --hover-bg: #404040;
    --highcharts-background-color: #333;
    --highcharts-neutral-color-100: #ffffff;        /* need to be shades of white*/
    --highcharts-neutral-color-80: #f1eded;
    --highcharts-neutral-color-60: #e8ece7;
    --highcharts-neutral-color-40: #e2e3ea;
}

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

[data-theme="dark"] .container.body {
    background-color: var(--bg-primary);
}

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

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

.main_container .nav_menu {
    background-color: var(--nav-bg);
}

[data-theme="dark"] .main_container .nav_menu {
    background-color: var(--nav-bg);
}

.nav.navbar-nav>li>a{
    color: var(--text-primary);
}

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

[data-theme="dark"] .nav.top_full_nav>li:not([class*="current_page"])>a:hover {
    background-color: #5e5d5d !important;
    color: whitesmoke !important;
}

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

[data-theme="dark"] .projects-container .project {
    background-color: #414040;
}

/* Cards and panels */
[data-theme="dark"] .x_panel,
[data-theme="dark"] .panel,
[data-theme="dark"] .tile-stats {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .x_title,
[data-theme="dark"] .x_content {
    color: var(--text-primary);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--border-color);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--primary-color);
}

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

[data-theme="dark"] .table-container,
[data-theme="dark"] #activities-table {
    scrollbar-color: lightslategray var(--bg-tertiary);
}

[data-theme="dark"] a {
    color: var(--link-text);
}
[data-theme="dark"] .table thead th {
    background-color: var(--table-header-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .table tbody tr {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: var(--table-row-hover);
}

[data-theme="dark"] .table td {
    border-color: var(--border-color);
}

/* Buttons */
[data-theme="dark"] .btn-default {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

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

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

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-color);
}

/* Sidebar */
/*[data-theme="dark"] .nav_menu {*/
/*    background-color: var(--sidebar-bg);*/
/*}*/

[data-theme="dark"] .nav.side-menu > li > a {
    color: var(--sidebar-text);
}

[data-theme="dark"] .nav.side-menu > li > a:hover {
    background-color: var(--bg-tertiary);
}


[data-theme="dark"] .mobile-menu-toggle span {
    background-color: #3661f3;
}

/* Top navigation */
[data-theme="dark"] .top_nav {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .navbar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Select2 dropdown */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

[data-theme="dark"] .select2-dropdown {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--disabled-bg);
}

[data-theme="dark"] .select2-results__option {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .panel-default>.panel-heading {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .select2-results__option--highlighted {
    background-color: var(--primary-color);
}

/* Pagination */
[data-theme="dark"] .pagination > li > a,
[data-theme="dark"] .pagination > li > span {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.pagination>.active>a {
    color: #fff;
}

[data-theme="dark"] .pagination>.active>a {
    background-color: #fff;
    border-color: var(--primary-color);
    color: #000;
}

[data-theme="dark"] .pagination > li > a:hover {
    background-color: var(--bg-tertiary);
}

/* Date range picker */
[data-theme="dark"] .daterangepicker {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .daterangepicker .calendar-table {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

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

/* Alerts */
[data-theme="dark"] .alert {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .alert-info {
    background-color: #1a3d5c;
    border-color: #2d5a7e;
}

[data-theme="dark"] .alert-success {
    background-color: #1a4d2e;
    border-color: #2d7048;
}

[data-theme="dark"] .alert-warning {
    background-color: #5c4a1a;
    border-color: #7e6a2d;
}

[data-theme="dark"] .alert-danger {
    background-color: #5c1a1a;
    border-color: #7e2d2d;
}

/* Dropzone */
[data-theme="dark"] .dropzone {
    background-color: var(--input-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .dz-message {
    color: var(--text-secondary);
}

/* Page title */
[data-theme="dark"] .page-title {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Navigation pills and tabs */
[data-theme="dark"] .nav-pills > li > a,
[data-theme="dark"] .nav-tabs > li > a {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .nav-tabs > li > a:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* For attachment body list items */
[data-theme="dark"] .list-group-item {
    background-color: var(--input-bg);
}

[data-theme="dark"] .nav-tabs {
    border-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs > li > a {
    border-color: transparent;
}

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

/* Badges and labels */
[data-theme="dark"] .badge,
[data-theme="dark"] .label {
    color: var(--text-primary);
}

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

/* Loading spinner */
[data-theme="dark"] .loader {
    background-color: rgba(26, 26, 26, 0.9);
}

[data-theme="dark"] .spinner {
    border-color: var(--border-color);
    border-top-color: var(--primary-color);
}