/* ============================================================
   Bookkizee — ProjectHub dark-theme palette layer
   Dark color values ported from projectmanagement/css/dark.css
   + css/saas-theme.css. Loaded AFTER darkmode/style02.css.
   ============================================================ */

/* ---------- Design tokens (ProjectHub palette) ---------- */
:root {
  --cm-primary:#4f46e5; --cm-primary-dark:#4338ca; --cm-primary-light:#eef2ff;
  --cm-accent:#06b6d4; --cm-ink:#0f172a; --cm-slate:#475569; --cm-muted:#64748b;
  --cm-line:#e2e8f0; --cm-bg:#f6f8fb; --cm-surface:#ffffff; --cm-surface-2:#f8fafc;
  --cm-surface-soft:#f1f5f9; --cm-input-bg:#ffffff; --cm-nav-bg:rgba(255,255,255,.88);
  --cm-overlay:#ffffff; --cm-scrollbar:#cbd5e1; --cm-scrollbar-hover:#94a3b8;
  --cm-hero-end:#ffffff;
  --cm-shadow-sm:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08);
  --cm-shadow-md:0 10px 30px -12px rgba(15,23,42,.18);
  --cm-shadow-lg:0 24px 60px -20px rgba(30,27,75,.28);
}
body.dark {
  --cm-primary:#818cf8; --cm-primary-dark:#a5b4fc; --cm-primary-light:rgba(99,102,241,.18);
  --cm-accent:#22d3ee; --cm-ink:#e2e8f0; --cm-slate:#a7b4c9; --cm-muted:#7d8aa0;
  --cm-line:#26334d; --cm-bg:#0b1220; --cm-surface:#111a2c; --cm-surface-2:#0f1725;
  --cm-surface-soft:#1a2538; --cm-input-bg:#0f1726; --cm-nav-bg:rgba(11,18,32,.82);
  --cm-overlay:#111a2c; --cm-scrollbar:#2b3a55; --cm-scrollbar-hover:#3d4f70;
  --cm-hero-end:#0e1728;
  --cm-shadow-sm:0 1px 2px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.45);
  --cm-shadow-md:0 10px 30px -12px rgba(0,0,0,.65);
  --cm-shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
  color-scheme: dark;
  background-color: var(--cm-bg); color: var(--cm-ink);
}
body.dark,
body.dark a, body.dark div, body.dark p, body.dark small, body.dark strong, body.dark b, body.dark em,
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark label, body.dark li, body.dark ul, body.dark ol, body.dark td, body.dark th,
body.dark input, body.dark textarea, body.dark select, body.dark button,
body.dark .form-control, body.dark .btn, body.dark .btn-cm, body.dark .modal,
body.dark .navbar, body.dark .page-header, body.dark .dropdown-menu, body.dark .table,
body.dark .js-inrow, body.dark .jsf-field {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body.dark .fa, body.dark .fa:before { font-family: FontAwesome; }

/* ---------- Page chrome (sidebar + top bar) ---------- */
body.dark .page-sidebar,
body.dark .page-sidebar-inner,
body.dark .page-sidebar-fixed .page-sidebar,
body.dark .page-sidebar-visible .page-sidebar {
  background-color: var(--cm-surface-2) !important;
  background-image: none !important;
  border-right: 1px solid var(--cm-line);
}
body.dark .page-sidebar .logo-box {
  color: var(--cm-ink) !important;
  border-bottom: 1px solid var(--cm-line);
}
body.dark .page-header {
  background-color: var(--cm-surface) !important;
  border-bottom: 1px solid var(--cm-line);
}
body.dark .page-header .navbar,
body.dark .page-header .navbar-default {
  background: transparent !important;
  border: 0;
}
body.dark .page-header .navbar .navbar-nav > li > a,
body.dark .page-header .navbar .navbar-nav > li > span,
body.dark .page-header .navbar-nav > li > a { color: var(--cm-slate); }
body.dark .page-header .navbar .navbar-nav > li > a:hover { color: var(--cm-ink); }
body.dark .page-header .search-form input {
  background-color: var(--cm-input-bg);
  color: var(--cm-ink);
  border-color: var(--cm-line);
}
body.dark .page-header .search-form input::placeholder { color: var(--cm-muted); }

/* Menu items */
body.dark .page-sidebar .accordion-menu > li > a,
body.dark .page-sidebar-menu ul li a { color: var(--cm-slate); }
body.dark .page-sidebar .accordion-menu > li > a:hover { color: var(--cm-ink); }
body.dark .page-sidebar .accordion-menu > li.active-page > a,
body.dark .page-sidebar-menu ul li.active-page > a { color: var(--cm-primary); }
body.dark .page-sidebar .accordion-menu > li > a i.menu-icon { color: var(--cm-muted); }
body.dark .page-sidebar .accordion-menu .sub-menu { background-color: var(--cm-surface-2) !important; }
body.dark .page-sidebar .accordion-menu .sub-menu a,
body.dark .page-sidebar .accordion-menu .sub-menu li a { color: var(--cm-slate); }
body.dark .page-sidebar .accordion-menu .sub-menu a:hover,
body.dark .page-sidebar .accordion-menu .sub-menu li a:hover { color: var(--cm-ink); }

/* ---------- Content + components (port of ProjectHub dark.css) ---------- */
body.dark .page-content,
body.dark .page-inner,
body.dark .page-content .container { background-color: var(--cm-bg); }
body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6 { color: var(--cm-ink); }
body.dark p { color: var(--cm-slate); }
body.dark a:not([class*="btn"]) { color: var(--cm-primary); }
body.dark a:not([class*="btn"]):hover { color: var(--cm-primary-dark); }
body.dark .text-muted { color: var(--cm-muted) !important; }

/* Panels / cards / boxes */
body.dark .panel,
body.dark .panel-default,
body.dark .panel-white,
body.dark .card,
body.dark .box,
body.dark .dashboard-box {
  background-color: var(--cm-surface) !important;
  border-color: var(--cm-line) !important;
  color: var(--cm-ink);
}
body.dark .panel-heading,
body.dark .panel-footer,
body.dark .panel .panel-title { color: var(--cm-ink); }
body.dark .panel .panel-body { color: var(--cm-ink); }

/* Tables */
body.dark table { color: var(--cm-ink); }
body.dark .table { color: var(--cm-ink); border-color: var(--cm-line); }
body.dark .table > thead > tr > th,
body.dark .table > tbody > tr > th,
body.dark .table > tfoot > tr > th,
body.dark .table > thead > tr > td,
body.dark .table > tbody > tr > td,
body.dark .table > tfoot > tr > td { border-top-color: var(--cm-line); color: var(--cm-ink); }
body.dark .table-striped > tbody > tr:nth-of-type(2n+1) { background-color: var(--cm-surface-2); }
body.dark .table-bordered { border-color: var(--cm-line); }
body.dark .table-hover > tbody > tr:hover { background-color: var(--cm-primary-light); }

/* Forms */
body.dark .form-control,
body.dark .form-select,
body.dark input, body.dark select, body.dark textarea {
  color: var(--cm-ink) !important;
  background-color: var(--cm-input-bg);
  border-color: var(--cm-line);
}
body.dark .form-control:focus { color: var(--cm-ink); background-color: var(--cm-input-bg); }
body.dark .form-control::placeholder { color: var(--cm-muted); }
body.dark .input-group .input-group-addon,
body.dark .input-group-addon,
body.dark .input-group-text {
  background-color: var(--cm-surface-soft);
  color: var(--cm-slate);
  border-color: var(--cm-line);
}
body.dark label { color: var(--cm-slate); }

/* Alerts (ProjectHub pastels) */
body.dark .alert-success { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.3); color:#6ee7b7; }
body.dark .alert-danger  { background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.3); color:#fca5a5; }
body.dark .alert-warning { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.3); color:#fcd34d; }
body.dark .alert-info    { background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.3); color:#93c5fd; }

/* Modals */
body.dark .modal-content,
body.dark .modal-title {
  background-color: var(--cm-surface) !important;
  color: var(--cm-ink);
}
body.dark .modal-header,
body.dark .modal-footer { border-color: var(--cm-line); }

/* Dropdowns */
body.dark .dropdown-menu {
  background-color: var(--cm-surface);
  border: 1px solid var(--cm-line);
  box-shadow: var(--cm-shadow-md);
}
body.dark .dropdown-menu > li > a { color: var(--cm-slate); }
body.dark .dropdown-menu > li > a:hover,
body.dark .dropdown-menu > li > a:focus { color: var(--cm-ink); background-color: var(--cm-primary-light); }
body.dark .dropdown-menu .divider { background-color: var(--cm-line); }

/* Badges / soft chips */
body.dark .badge { color: var(--cm-ink); }
body.dark .label { color: var(--cm-ink); }
body.dark .badge-soft.soft-success { background: rgba(16,185,129,.16); color:#34d399; }
body.dark .badge-soft.soft-warning { background: rgba(245,158,11,.16); color:#fbbf24; }
body.dark .badge-soft.soft-danger  { background: rgba(239,68,68,.16); color:#f87171; }
body.dark .badge-soft.soft-info    { background: rgba(37,99,235,.16); color:#60a5fa; }
body.dark .badge-soft.soft-muted   { background: var(--cm-surface-soft); color: var(--cm-muted); }

/* Progress */
body.dark .progress { background-color: var(--cm-surface-soft); }

/* Scrollbar (ProjectHub) */
body.dark ::-webkit-scrollbar { width: 9px; height: 9px; }
body.dark ::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb { background: var(--cm-scrollbar); border-radius: 99px; border: 2px solid var(--cm-bg); }
body.dark ::-webkit-scrollbar-thumb:hover { background: var(--cm-scrollbar-hover); }

/* ============================================================
   Top bar — professional layout (light + dark)
   ============================================================ */
.page-header {
  display: flex; align-items: center; gap: 18px;
  height: 68px; min-height: 68px; padding: 0 22px !important;
  background: var(--cm-surface);
  border-bottom: 1px solid var(--cm-line);
  overflow: visible;
}
body.dark .page-header {
  background: var(--cm-surface-2) !important;
  height: 68px !important; min-height: 68px; padding: 0 22px !important;
  margin: 0;
}

.page-header .navbar,
.page-header .navbar-default {
  flex: 1 1 auto; display: flex; align-items: center;
  height: 68px !important; min-height: 0; margin: 0;
  background: transparent !important; border: 0;
}
.page-header .navbar .container-fluid { display: flex; align-items: center; width: 100%; padding: 0; }
.page-header .navbar .navbar-header { float: none; margin: 0; }
.page-header .navbar .navbar-collapse {
  display: flex !important; align-items: center; flex: 1 1 auto;
  height: auto !important;
  padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
  border: 0; box-shadow: none;
}

/* Search with leading icon */
.page-header .search-form {
  position: relative; left: auto; right: auto; top: auto;
  flex: 0 0 300px; max-width: 300px;
  margin: 0; height: auto; opacity: 1; background: transparent; z-index: auto;
}
.page-header .search-form form { position: relative; display: flex; align-items: center; margin: 0; }
.page-header .search-form .search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--cm-muted); font-size: 13px; pointer-events: none;
}
.page-header .search-form .search-input {
  height: 40px; border-radius: 11px; padding-left: 34px; padding-right: 34px;
  background: var(--cm-input-bg); border: 1px solid var(--cm-line); color: var(--cm-ink);
  box-shadow: none;
}
.page-header .search-form .search-input::placeholder { color: var(--cm-muted); }
.page-header .search-form .search-input:focus { border-color: var(--cm-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.page-header .search-form #close-search {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--cm-muted); padding: 4px 8px; cursor: pointer;
}

/* Nav clusters */
.page-header .navbar .navbar-nav { display: flex; align-items: center; float: none; }
.page-header .navbar .topbar-right { margin-left: auto; margin-right: 0; gap: 3px; }

/* Ghost icon buttons */
.page-header .topbar-icon,
.page-header .navbar-nav > li > a.topbar-icon {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0 !important; border-radius: 10px;
  color: var(--cm-slate) !important; font-size: 15px; line-height: 1;
  text-decoration: none !important; background: transparent;
  transition: background .15s ease, color .15s ease;
}
.page-header .topbar-icon:hover,
.page-header .navbar-nav > li > a.topbar-icon:hover { background: var(--cm-surface-soft); color: var(--cm-primary) !important; }

/* User dropdown */
.page-header .topbar-user > a.dropdown-toggle {
  display: inline-flex !important; align-items: center; gap: 9px;
  padding: 4px 11px 4px 4px !important; margin-left: 8px; height: auto;
  border: 1px solid var(--cm-line); border-radius: 99px;
  background: var(--cm-surface); text-decoration: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.page-header .topbar-user > a.dropdown-toggle:hover,
.page-header .topbar-user.open > a.dropdown-toggle { border-color: var(--cm-primary); background: var(--cm-primary-light); }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  background: linear-gradient(135deg, var(--cm-primary), #7c3aed);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.topbar-uinfo { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.topbar-uinfo strong { font-size: 12.5px; font-weight: 700; color: var(--cm-ink); }
.topbar-uinfo small { font-size: 10.5px; color: var(--cm-muted); }
.topbar-caret { font-size: 10px; color: var(--cm-muted); }

.page-header .topbar-user .dropdown-menu {
  display: none;
  min-width: 232px; margin-top: 10px; padding: 6px;
  background: var(--cm-surface); border: 1px solid var(--cm-line);
  border-radius: 12px; box-shadow: var(--cm-shadow-md);
}
.page-header .topbar-user.is-open .dropdown-menu {
  display: block;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 10px !important;
}
.page-header .topbar-user .dropdown-menu > li > a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--cm-slate); font-size: 13px; font-weight: 500;
}
.page-header .topbar-user .dropdown-menu > li > a:hover,
.page-header .topbar-user .dropdown-menu > li > a:focus { background: var(--cm-primary-light); color: var(--cm-primary); }
.page-header .topbar-user .dropdown-menu > li > a i { width: 16px; text-align: center; }
.page-header .topbar-user .dropdown-menu .dropdown-header {
  padding: 8px 12px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--cm-muted); font-weight: 700;
}
.page-header .topbar-user .dropdown-menu .divider { background-color: var(--cm-line); margin: 5px 0; }
.page-header .topbar-user .dropdown-menu .topbar-logout { color: #ef4444; }
.page-header .topbar-user .dropdown-menu .topbar-logout:hover { background: rgba(239,68,68,.12); color: #ef4444; }

@media (max-width: 991px) {
  .page-header .search-form { display: none; }
}
@media (max-width: 767px) {
  .page-header { padding: 0 12px !important; gap: 8px; }
  .page-header > #collapsed-sidebar-toggle-button { display: none !important; }
  .page-header .topbar-right > li:not(.topbar-user) { display: none; }
  .topbar-uinfo { display: none; }
  .page-header .topbar-user > a.dropdown-toggle { padding: 4px !important; margin-left: 0; }
  .logo-sm .logo-box { width: auto !important; }
  .logo-sm .logo-box img { width: auto !important; height: 26px; }
}

/* ---------- Global: flat corners (inputs, textareas, buttons) ---------- */
input, textarea, select,
input.form-control, textarea.form-control, select.form-control,
button, .btn, .btn-cm, .btn-default, .btn-primary, .btn-info, .btn-success, .btn-warning {
  border-radius: 0 !important;
}
.modal-content, .modal-header, .modal-footer {
  border-radius: 0 !important;
}

/* ---------- Global: light theme form-control border ---------- */
body:not(.dark) .form-control,
body:not(.dark) input.form-control, body:not(.dark) textarea.form-control, body:not(.dark) select.form-control {
  border-color: #bac0c8 !important;
}

/* ============================================================
   Global: flatpickr calendar theme (light + dark via --cm-*)
   ============================================================ */
.flatpickr-calendar {
  background: var(--cm-surface) !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--cm-shadow-lg) !important;
  overflow: hidden;
}
.flatpickr-calendar.arrowTop:before { border-bottom-color: var(--cm-line) !important; }
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--cm-surface) !important; }
.flatpickr-calendar.arrowBottom:before { border-top-color: var(--cm-line) !important; }
.flatpickr-calendar.arrowBottom:after { border-top-color: var(--cm-surface) !important; }

.flatpickr-calendar .flatpickr-months {
  background: var(--cm-surface-2) !important;
  border-bottom: 1px solid var(--cm-line) !important;
}
/* the CDN themes (material_blue) paint these children blue; they sit on top of
   the .flatpickr-months background above, so they have to be cleared explicitly */
.flatpickr-calendar .flatpickr-months .flatpickr-month {
  background: var(--cm-surface-2) !important;
  color: var(--cm-ink) !important;
  fill: var(--cm-ink) !important;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent !important; }
.flatpickr-calendar .flatpickr-weekdays .flatpickr-weekday { background: transparent !important; }
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  color: var(--cm-ink) !important;
  font-weight: 800;
}
.flatpickr-calendar .flatpickr-monthDropdown-month { color: var(--cm-ink) !important; background: var(--cm-surface) !important; }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper .numInput { color: var(--cm-ink) !important; }
.flatpickr-calendar .flatpickr-current-month .numInputWrapper span { border-color: var(--cm-line) !important; }
.flatpickr-calendar .flatpickr-prev-month svg, .flatpickr-calendar .flatpickr-next-month svg { fill: var(--cm-slate) !important; }
.flatpickr-calendar .flatpickr-prev-month:hover svg, .flatpickr-calendar .flatpickr-next-month:hover svg { fill: var(--cm-primary) !important; }
.flatpickr-calendar .flatpickr-weekday { color: var(--cm-muted) !important; font-weight: 700 !important; }
.flatpickr-calendar .flatpickr-weekdays { background: transparent !important; }

.flatpickr-calendar .flatpickr-innerContainer, .flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-weekdaycontainer { background: var(--cm-surface) !important; }
/* NOTE: do NOT cap .flatpickr-day with max-width. flatpickr lays the days out
   as flex items with flex-basis:14.2857% inside a 307.875px container; capping
   them at a smaller px made 8 days fit per row and broke the 7-column grid. */
.flatpickr-calendar .flatpickr-day {
  color: var(--cm-slate) !important;
  border-radius: 0 !important;
  font-weight: 600;
}
.flatpickr-calendar .flatpickr-day:hover:not(.flatpickr-disabled) {
  background: var(--cm-primary-light) !important;
  color: var(--cm-primary) !important;
  border-color: transparent !important;
}
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange, .flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.startRange.endRange, .flatpickr-calendar .flatpickr-day.endRange.startRange {
  background: var(--cm-primary) !important;
  border-color: var(--cm-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.inRange {
  background: var(--cm-primary-light) !important;
  border-color: var(--cm-primary-light) !important;
  color: var(--cm-slate) !important;
}
.flatpickr-calendar .flatpickr-day.today { border-color: var(--cm-primary); }
.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today.selected:hover { background: var(--cm-primary); color: #fff !important; }
.flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled, .flatpickr-calendar .flatpickr-day.disabled {
  color: var(--cm-muted) !important;
  opacity: .55 !important;
}

.flatpickr-calendar .flatpickr-time {
  background: var(--cm-surface-2) !important;
  border-top: 1px solid var(--cm-line) !important;
}
.flatpickr-calendar .flatpickr-time .numInputWrapper .numInput,
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator,
.flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: var(--cm-ink) !important; }

/* ============================================================
   Global: jQuery DateTimePicker (.xdsoft_datetimepicker) theme
   The widget is appended to <body>, so the dark skin has to be global.
   ============================================================ */
.xdsoft_datetimepicker { border-color: var(--cm-line, #e2e8f0); background: var(--cm-surface, #fff); color: var(--cm-ink, #0f172a); box-shadow: 0 18px 40px -16px rgba(2, 6, 23, .4); }
.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th { background: var(--cm-surface-2, #f5f5f5); border-color: var(--cm-line, #ddd); color: var(--cm-slate, #666); }
.xdsoft_datetimepicker .xdsoft_label { background: var(--cm-surface, #fff); color: var(--cm-ink, #0f172a); }
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { background: var(--cm-surface, #fff); border-color: var(--cm-line, #ccc); }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { border-color: var(--cm-line, #ddd); }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div { background: var(--cm-surface-2, #f5f5f5); border-top-color: var(--cm-line, #ddd); color: var(--cm-slate, #666); }

body.dark .xdsoft_datetimepicker { border-color: #26334d !important; background: #111a2c !important; color: #e2e8f0 !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .78) !important; }
body.dark .xdsoft_datetimepicker .xdsoft_label { background: #111a2c !important; color: #e2e8f0 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { background: #111a2c !important; border-color: #26334d !important; }
body.dark .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option { color: #e2e8f0 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { background: rgba(99, 102, 241, .25) !important; }
body.dark .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { background: #4f46e5 !important; color: #fff !important; }
body.dark .xdsoft_datetimepicker .xdsoft_calendar td, body.dark .xdsoft_datetimepicker .xdsoft_calendar th { background: transparent !important; border-color: #26334d !important; color: #e2e8f0 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_calendar td > div { color: #e2e8f0 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, body.dark .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled { opacity: .4 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, body.dark .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
body.dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { background: #4f46e5 !important; color: #fff !important; }
body.dark .xdsoft_datetimepicker .xdsoft_calendar td:hover, body.dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { background: rgba(99, 102, 241, .28) !important; color: #fff !important; }
body.dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { background: #0f1725 !important; border-color: #26334d !important; }
body.dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div { background: #0f1725 !important; border-top-color: #26334d !important; color: #e2e8f0 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_prev, body.dark .xdsoft_datetimepicker .xdsoft_next { color: #94a3b8 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_today_button, body.dark .xdsoft_datetimepicker .xdsoft_save_selected { color: #818cf8 !important; }
body.dark .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_lbl { color: #94a3b8 !important; }

/* ============================================================
   Global: Bootstrap DateTimePicker (.datetimepicker) theme
   The widget is appended to <body>, so the dark skin has to be global.
   ============================================================ */
body:not(.dark) .datetimepicker { background: var(--cm-surface, #fff); border: 1px solid var(--cm-line, #e2e8f0); color: var(--cm-ink, #0f172a); box-shadow: 0 16px 40px -16px rgba(2, 6, 23, .34); font-family: inherit; }
body:not(.dark) .datetimepicker table tr td, body:not(.dark) .datetimepicker table tr th { color: var(--cm-ink, #0f172a); }
body:not(.dark) .datetimepicker table tr td.day:hover, body:not(.dark) .datetimepicker table tr td.hour:hover, body:not(.dark) .datetimepicker table tr td.minute:hover,
body:not(.dark) .datetimepicker table tr td span:hover, body:not(.dark) .datetimepicker thead tr:first-child th:hover, body:not(.dark) .datetimepicker tfoot th:hover { background: #eef2ff !important; }
body:not(.dark) .datetimepicker table tr td.old, body:not(.dark) .datetimepicker table tr td.new, body:not(.dark) .datetimepicker table tr td span.old { color: #94a3b8; }
body:not(.dark) .datetimepicker table tr td.active, body:not(.dark) .datetimepicker table tr td.active:hover, body:not(.dark) .datetimepicker table tr td span.active, body:not(.dark) .datetimepicker table tr td span.active:hover { background: #4f46e5 !important; color: #fff !important; text-shadow: none !important; }
body:not(.dark) .datetimepicker table tr td.today, body:not(.dark) .datetimepicker table tr td.today:hover { background: #e0e7ff !important; color: #4338ca !important; }
body:not(.dark) .datetimepicker tfoot th { color: var(--brand-blue, #4f46e5); border-top: 1px solid var(--cm-line, #e2e8f0); }

body.dark .datetimepicker { background: #111a2c !important; border: 1px solid #26334d !important; color: #e2e8f0 !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .78) !important; font-family: inherit; }
body.dark .datetimepicker table tr td, body.dark .datetimepicker table tr th { background: transparent !important; color: #cbd5e1 !important; }
body.dark .datetimepicker table tr th.switch, body.dark .datetimepicker thead tr:first-child th { color: #e2e8f0 !important; }
body.dark .datetimepicker table tr td.day:hover, body.dark .datetimepicker table tr td.hour:hover, body.dark .datetimepicker table tr td.minute:hover,
body.dark .datetimepicker table tr td span:hover, body.dark .datetimepicker thead tr:first-child th:hover, body.dark .datetimepicker tfoot th:hover { background: rgba(99, 102, 241, .28) !important; color: #fff !important; }
body.dark .datetimepicker table tr td.old, body.dark .datetimepicker table tr td.new, body.dark .datetimepicker table tr td span.old { color: #64748b !important; }
body.dark .datetimepicker table tr td.disabled, body.dark .datetimepicker table tr td.disabled:hover,
body.dark .datetimepicker table tr td span.disabled, body.dark .datetimepicker table tr td span.disabled:hover { color: #475569 !important; background: transparent !important; }
body.dark .datetimepicker table tr td.active, body.dark .datetimepicker table tr td.active:hover, body.dark .datetimepicker table tr td.active.disabled,
body.dark .datetimepicker table tr td span.active, body.dark .datetimepicker table tr td span.active:hover, body.dark .datetimepicker table tr td span.active.disabled { background: #4f46e5 !important; color: #fff !important; text-shadow: none !important; }
body.dark .datetimepicker table tr td.today, body.dark .datetimepicker table tr td.today:hover, body.dark .datetimepicker table tr td.today.disabled { background: rgba(99, 102, 241, .35) !important; color: #fff !important; }
body.dark .datetimepicker tfoot th { color: #818cf8 !important; border-top: 1px solid #26334d !important; }
body.dark [class*="datetimepicker-dropdown"]:before { border-bottom-color: #26334d !important; }
body.dark [class*="datetimepicker-dropdown"]:after { border-bottom-color: #111a2c !important; }
body.dark [class*="datetimepicker-dropdown-top"]:before { border-top-color: #26334d !important; }
body.dark [class*="datetimepicker-dropdown-top"]:after { border-top-color: #111a2c !important; }