/*
 * Dark mode for Octopusta.
 *
 * This project ships AdminLTE v3.0.5, which has NO dark mode of its own
 * (it arrived in AdminLTE 3.1), so the whole theme is defined here.
 * Everything is scoped under body.dark-mode, so the light UI is untouched.
 */

/* ---- the switch in the navbar ---- */
#themeSwitch { cursor: pointer; }
#themeSwitch i { font-size: 16px; line-height: 1; }

body.dark-mode {
    --d-bg:      #16191d;  /* page background, the darkest layer */
    --d-surface: #22272c;  /* cards, modals, dropdowns           */
    --d-raised:  #2c3238;  /* inputs, table headers              */
    --d-line:    #3a424a;  /* borders                            */
    --d-text:    #e8edf2;  /* main text                          */
    --d-muted:   #a3aeb8;  /* secondary text                     */
}

/* ---- shell ---- */
body.dark-mode,
body.dark-mode .wrapper,
body.dark-mode .content-wrapper { background-color: var(--d-bg) !important; color: var(--d-text); }
body.dark-mode .content-wrapper > .content,
body.dark-mode .content-header { color: var(--d-text); }
/* anything that did not say otherwise inherits light text */
body.dark-mode .content-wrapper p,
body.dark-mode .content-wrapper span,
body.dark-mode .content-wrapper li,
body.dark-mode .content-wrapper td,
body.dark-mode .content-wrapper th,
body.dark-mode .content-wrapper dt,
body.dark-mode .content-wrapper dd,
body.dark-mode .content-wrapper h1, body.dark-mode .content-wrapper h2,
body.dark-mode .content-wrapper h3, body.dark-mode .content-wrapper h4,
body.dark-mode .content-wrapper h5, body.dark-mode .content-wrapper h6,
body.dark-mode .modal-body p, body.dark-mode .modal-body span,
body.dark-mode .modal-body td, body.dark-mode .modal-body th { color: inherit; }
body.dark-mode .main-footer { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-muted); }
body.dark-mode .content-header h1,
body.dark-mode .content-header h4 { color: var(--d-text); }
body.dark-mode .main-header.navbar-dark { background-color: var(--d-surface); border-color: var(--d-line); }
body.dark-mode .navbar-dark .nav-link,
body.dark-mode .navbar-dark .navbar-nav .nav-link { color: var(--d-text); }
body.dark-mode .breadcrumb { background-color: transparent; }
body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a { color: var(--d-muted); }

/* ---- cards ---- */
body.dark-mode .card { background-color: var(--d-surface); color: var(--d-text); box-shadow: 0 0 1px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3); }
body.dark-mode .card-header,
body.dark-mode .card-footer { background-color: transparent; border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .card-title { color: var(--d-text); }
body.dark-mode .card.card-outline { border-top-width: 3px; }
body.dark-mode .card-tools .btn-tool { color: var(--d-muted); }
body.dark-mode .card-tools .btn-tool:hover { color: var(--d-text); }
body.dark-mode .card-comments,
body.dark-mode .card-comment { background-color: var(--d-raised); color: var(--d-text); }

/* ---- tables ---- */
body.dark-mode .table { color: var(--d-text); }
body.dark-mode .table td,
body.dark-mode .table th { border-color: var(--d-line); }
body.dark-mode .table thead th { border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .table .thead-light th,
body.dark-mode .thead-light th { background-color: var(--d-raised); color: var(--d-text); border-color: var(--d-line); }
body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th { border-color: var(--d-line); }
body.dark-mode .table-hover tbody tr:hover { background-color: rgba(255,255,255,.055); color: var(--d-text); }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); }
/* the status rows this project uses, kept readable instead of pale pastel */
body.dark-mode .table .table-danger,  body.dark-mode .table-danger  > td { background-color: rgba(220,53,69,.22) !important; color: var(--d-text); }
body.dark-mode .table .table-warning, body.dark-mode .table-warning > td { background-color: rgba(255,193,7,.20) !important; color: var(--d-text); }
body.dark-mode .table .table-success, body.dark-mode .table-success > td { background-color: rgba(40,167,69,.20) !important; color: var(--d-text); }
body.dark-mode .table .table-info,    body.dark-mode .table-info    > td { background-color: rgba(23,162,184,.20) !important; color: var(--d-text); }
body.dark-mode .table .table-active,  body.dark-mode .table-active  > td { background-color: rgba(255,255,255,.07) !important; }

/* ---- forms ---- */
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .custom-file-label,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode input[type="time"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="password"],
body.dark-mode select { background-color: var(--d-raised); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .form-control:focus,
body.dark-mode select:focus { background-color: var(--d-raised); border-color: #6c8694; color: var(--d-text); box-shadow: 0 0 0 .2rem rgba(108,134,148,.25); }
body.dark-mode .form-control::placeholder { color: #8d979f; }
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] { background-color: #3a4147; color: var(--d-muted); }
body.dark-mode .input-group-text { background-color: #3a4147; border-color: var(--d-line); color: var(--d-text); }
body.dark-mode label,
body.dark-mode .col-form-label { color: var(--d-text); }
body.dark-mode .form-text,
body.dark-mode small.text-muted { color: var(--d-muted) !important; }
body.dark-mode .custom-control-label { color: var(--d-text); }
body.dark-mode .custom-control-label::before { background-color: var(--d-raised); border-color: #6c757d; }
body.dark-mode .form-check-label { color: var(--d-text); }
body.dark-mode option { background-color: var(--d-raised); color: var(--d-text); }
/* date pickers draw a black icon that disappears on dark */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }

/* ---- buttons ---- */
body.dark-mode .btn-default,
body.dark-mode .btn-light { background-color: var(--d-raised); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .btn-default:hover,
body.dark-mode .btn-light:hover { background-color: #4a535a; border-color: #5b656e; color: #fff; }
body.dark-mode .btn-outline-secondary,
body.dark-mode .btn-outline-dark { color: var(--d-text); border-color: var(--d-line); }
body.dark-mode .btn-outline-secondary:hover { background-color: var(--d-raised); color: #fff; }
body.dark-mode .close { color: var(--d-text); text-shadow: none; opacity: .8; }
body.dark-mode .close:hover { color: #fff; opacity: 1; }

/* ---- modals, dropdowns, popovers ---- */
body.dark-mode .modal-content { background-color: var(--d-surface); color: var(--d-text); }
body.dark-mode .modal-header,
body.dark-mode .modal-footer { border-color: var(--d-line); }
body.dark-mode .modal-title { color: var(--d-text); }
body.dark-mode .dropdown-menu { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .dropdown-item { color: var(--d-text); }
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus { background-color: var(--d-raised); color: #fff; }
body.dark-mode .dropdown-divider { border-color: var(--d-line); }
body.dark-mode .dropdown-header { color: var(--d-muted); }
body.dark-mode .popover { background-color: var(--d-surface); border-color: var(--d-line); }
body.dark-mode .popover-header { background-color: var(--d-raised); color: var(--d-text); border-color: var(--d-line); }
body.dark-mode .popover-body { color: var(--d-text); }

/* ---- feedback blocks ---- */
body.dark-mode .alert-success { background-color: rgba(40,167,69,.22); border-color: rgba(40,167,69,.5); color: #b7ecc4; }
body.dark-mode .alert-danger  { background-color: rgba(220,53,69,.22); border-color: rgba(220,53,69,.5); color: #f5c2c7; }
body.dark-mode .alert-warning { background-color: rgba(255,193,7,.20); border-color: rgba(255,193,7,.45); color: #ffe39a; }
body.dark-mode .alert-info    { background-color: rgba(23,162,184,.22); border-color: rgba(23,162,184,.5); color: #a8e4ef; }
body.dark-mode .alert-secondary,
body.dark-mode .alert-light   { background-color: var(--d-raised); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .callout { background-color: var(--d-raised); color: var(--d-text); box-shadow: none; }
body.dark-mode .badge-light { background-color: var(--d-raised); color: var(--d-text); }
body.dark-mode .badge-secondary { background-color: #5a6268; color: #fff; }
body.dark-mode .progress { background-color: var(--d-line); }
body.dark-mode .list-group-item { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .list-group-item-action:hover { background-color: var(--d-raised); color: #fff; }

/* ---- navs and pagination ---- */
body.dark-mode .nav-tabs { border-color: var(--d-line); }
body.dark-mode .nav-tabs .nav-link { color: var(--d-muted); }
body.dark-mode .nav-tabs .nav-link:hover { border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .nav-tabs .nav-link.active { background-color: var(--d-surface); border-color: var(--d-line) var(--d-line) var(--d-surface); color: var(--d-text); }
body.dark-mode .nav-pills .nav-link { color: var(--d-text); }
/* tabs sitting on a coloured card header need to stay readable */
body.dark-mode .card-tabs .card-header .nav-link:not(.active) { color: rgba(255,255,255,.85); }
body.dark-mode .card-tabs .card-header .nav-link:not(.active):hover { color: #fff; }
body.dark-mode .tab-content { color: var(--d-text); }
body.dark-mode .page-link { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .page-link:hover { background-color: var(--d-raised); color: #fff; }
body.dark-mode .page-item.disabled .page-link { background-color: var(--d-surface); border-color: var(--d-line); color: #6c757d; }

/* ---- adminlte widgets ---- */
body.dark-mode .info-box { background-color: var(--d-surface); color: var(--d-text); }
body.dark-mode .info-box .info-box-text,
body.dark-mode .info-box .info-box-number { color: var(--d-text); }
body.dark-mode .small-box { color: #fff; }
body.dark-mode .user-panel { border-color: var(--d-line); }
body.dark-mode .timeline > div > .timeline-item { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-text); box-shadow: none; }
body.dark-mode .timeline > div > .timeline-item > .timeline-header { border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .timeline::before { background-color: var(--d-line); }
body.dark-mode .error-page .error-content h3,
body.dark-mode .error-page .error-content p { color: var(--d-text); }
body.dark-mode .direct-chat-text { background-color: var(--d-raised); border-color: var(--d-line); color: var(--d-text); }

/* ---- plugins used across the project ---- */
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple,
body.dark-mode .select2-container--bootstrap4 .select2-selection { background-color: var(--d-raised); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--d-text); }
body.dark-mode .select2-dropdown { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .select2-search__field { background-color: var(--d-raised) !important; border-color: var(--d-line) !important; color: var(--d-text) !important; }
body.dark-mode .select2-results__option { color: var(--d-text); }
body.dark-mode .select2-results__option--highlighted { background-color: #4a535a !important; color: #fff; }
body.dark-mode .daterangepicker { background-color: var(--d-surface); border-color: var(--d-line); color: var(--d-text); }
body.dark-mode .daterangepicker .calendar-table { background-color: var(--d-surface); border-color: var(--d-line); }
body.dark-mode .daterangepicker td.off { background-color: var(--d-surface); color: #6c757d; }
body.dark-mode .daterangepicker td.available:hover { background-color: var(--d-raised); }
body.dark-mode .daterangepicker .drp-buttons { border-color: var(--d-line); }
body.dark-mode .ui-widget-content { background: var(--d-surface); color: var(--d-text); border-color: var(--d-line); }

/* ---- utilities that paint light ---- */
body.dark-mode .bg-white { background-color: var(--d-surface) !important; color: var(--d-text) !important; }
body.dark-mode .bg-light { background-color: var(--d-raised) !important; color: var(--d-text) !important; }
body.dark-mode .text-dark { color: var(--d-text) !important; }
body.dark-mode .text-black-50 { color: var(--d-muted) !important; }
body.dark-mode .text-muted { color: var(--d-muted) !important; }
body.dark-mode .border,
body.dark-mode .border-top,
body.dark-mode .border-bottom,
body.dark-mode .border-left,
body.dark-mode .border-right { border-color: var(--d-line) !important; }
body.dark-mode hr { border-color: var(--d-line); }
body.dark-mode code { background-color: var(--d-raised); color: #e685b5; }
body.dark-mode pre { background-color: var(--d-raised); color: var(--d-text); border-color: var(--d-line); }
body.dark-mode a { color: #8ab4f8; }
body.dark-mode a.btn,
body.dark-mode .nav-link,
body.dark-mode .dropdown-item,
body.dark-mode .page-link,
body.dark-mode a.badge { color: inherit; }
body.dark-mode .btn-primary, body.dark-mode .btn-success, body.dark-mode .btn-danger,
body.dark-mode .btn-warning, body.dark-mode .btn-info { color: #fff; }

/* dark text written inline, it would vanish on a dark page */
body.dark-mode [style*="color:#000" i],
body.dark-mode [style*="color: #000" i],
body.dark-mode [style*="color:#111" i],
body.dark-mode [style*="color:#222" i],
body.dark-mode [style*="color:#333" i],
body.dark-mode [style*="color: #333" i],
body.dark-mode [style*="color:#374151" i],
body.dark-mode [style*="color:#212529" i],
body.dark-mode [style*="color:#343a40" i],
body.dark-mode [style*="color:#495057" i],
body.dark-mode [style*="color:black" i] { color: var(--d-text) !important; }

/* pages that hard code a white background inline, this project has ~60 of them */
body.dark-mode [style*="background:#fff" i],
body.dark-mode [style*="background: #fff" i],
body.dark-mode [style*="background-color:#fff" i],
body.dark-mode [style*="background-color: #fff" i],
body.dark-mode [style*="background:white" i],
body.dark-mode [style*="background-color:white" i] { background-color: var(--d-surface) !important; color: var(--d-text) !important; }

/* ---- surveys module, its cards and answer rows are painted white on purpose ---- */
body.dark-mode .sv-tile { background: var(--d-raised); border-color: var(--d-line); }
body.dark-mode .sv-tile .sv-tile-value { color: var(--d-text); }
body.dark-mode .sv-score .progress { background-color: var(--d-line); }
body.dark-mode .sv-meta { color: var(--d-muted); }

body.dark-mode .sv-form { --sv-accent: #2dd4bf; --sv-accent-soft: rgba(45,212,191,.14); --sv-line: #4b545c; --sv-ink: #e9ecef; --sv-muted: #adb5bd; }
body.dark-mode .sv-form .svopt,
body.dark-mode .sv-form .svscale-dot,
body.dark-mode .sv-form .svfld { background: var(--d-raised); color: var(--d-text); }
body.dark-mode .sv-form .svopt:hover { background: #454e56; border-color: #5b656e; }
body.dark-mode .sv-form .svopt.is-on { background: rgba(45,212,191,.12); border-color: #2dd4bf; }
body.dark-mode .sv-form .svopt.is-on .svopt-mark { background: #2dd4bf; border-color: #2dd4bf; }
body.dark-mode .sv-form .svopt-mark::after { background: #1f2d2b; }
body.dark-mode .sv-form .svopt-multi .svopt-mark::after { background: transparent; border-color: #1f2d2b; }
body.dark-mode .sv-form .svscale-item.is-on .svscale-dot { background: #2dd4bf; border-color: #2dd4bf; color: #10302d; }
body.dark-mode .sv-form .svq-num,
body.dark-mode .sv-form .svq-weight { background: rgba(45,212,191,.15); color: #2dd4bf; }
body.dark-mode .sv-form .svq-weight-off { background: #434b52; color: #9aa4ab; }
body.dark-mode .sv-form .svfld:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,.15); }
body.dark-mode .sv-form .svq.sv-missing { background: rgba(220,53,69,.12); }

body.dark-mode .svm-body { background: #2f353a; }
body.dark-mode .svm-bar { background: var(--d-raised); border-color: var(--d-line); }
body.dark-mode .svm-footer { background: var(--d-surface); border-color: var(--d-line); }
body.dark-mode .svm-note { background: rgba(45,212,191,.12); color: #a7f3d0; }
body.dark-mode .svm-note-plain { background: var(--d-raised); border-color: var(--d-line); color: #ced4da; }
body.dark-mode .svm-label { color: #ced4da; }
body.dark-mode .svm-progress { background: var(--d-line); }
body.dark-mode .svm-chip-off { background: #434b52; color: #9aa4ab; }