/*
 * Night Ops theme — dark console overlay for the AdminLTE 2 / Bootstrap 3
 * admin panel. Loaded after AdminLTE.min.css and the skins bundle so these
 * rules win the cascade; !important is used deliberately here since this
 * file's entire job is overriding a large existing framework, not being
 * layered under something else.
 *
 * Palette carries over from the "Night Ops" mockup direction the user
 * picked: near-black ground, cyan for live/primary, amber for warning/idle,
 * a muted slate for secondary text.
 */

:root {
    --no-bg:           #0A0E13;
    --no-surface:      #131A22;
    --no-surface-alt:  #182029;
    --no-line:         #1C242D;
    --no-ink:          #E6EAEE;
    --no-ink-soft:     #8B96A3;
    --no-ink-faint:    #5B6672;
    --no-accent:       #2DD4E8;
    --no-accent-ink:   #04262B;
    --no-warning:      #E8A33D;
    --no-danger:       #E8635D;
    --no-success:      #3DDC97;
    --no-input-bg:     #0F161D;
}

/* ---------- base / layout ---------- */
body,
.wrapper,
.content-wrapper,
.right-side {
    background: var(--no-bg) !important;
    color: var(--no-ink) !important;
}
a { color: var(--no-accent); }
a:hover, a:focus { color: #6FE3F0; }

/* ---------- header + sidebar ---------- */
.main-header .navbar,
.main-header .logo,
.main-header .logo:hover {
    background: var(--no-surface) !important;
    border-bottom: 1px solid var(--no-line);
}
.main-header .navbar .nav > li > a {
    color: var(--no-ink-soft) !important;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .sidebar-toggle:hover {
    color: var(--no-ink) !important;
    background: var(--no-surface-alt) !important;
}
.main-header .navbar-custom-menu .dropdown-menu {
    background: var(--no-surface) !important;
    border: 1px solid var(--no-line);
    color: var(--no-ink);
}
.main-header .navbar-custom-menu .dropdown-menu li.user-header {
    background: var(--no-surface-alt) !important;
}
.main-header .navbar-custom-menu .dropdown-menu li.user-footer {
    background: var(--no-surface) !important;
    border-top: 1px solid var(--no-line);
}

.main-sidebar,
.left-side {
    background: var(--no-bg) !important;
    border-right: 1px solid var(--no-line);
}
.sidebar-menu > li > a {
    color: var(--no-ink-soft) !important;
    border-left: 3px solid transparent;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a {
    color: var(--no-ink) !important;
    background: var(--no-surface) !important;
    border-left-color: var(--no-accent);
}
.sidebar-menu > li.treeview.active > a {
    background: var(--no-surface) !important;
}
.sidebar-menu .treeview-menu > li > a {
    color: var(--no-ink-faint) !important;
}
.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li > a.active {
    color: var(--no-accent) !important;
}
.sidebar-menu .treeview-menu {
    background: var(--no-bg) !important;
}
.user-panel { border-bottom: 1px solid var(--no-line); }
.user-panel .info,
.user-panel .info a {
    color: var(--no-ink) !important;
}

/* ---------- content boxes ---------- */
.box,
.nav-tabs-custom,
.small-box,
.info-box,
.modal-content,
.panel {
    background: var(--no-surface) !important;
    border: 1px solid var(--no-line) !important;
    color: var(--no-ink);
    box-shadow: none !important;
}
/* .box-footer is another AdminLTE sub-region with its own explicit
   background separate from .box/.box-body - same pattern as the
   .tab-content bug: overriding the outer wrapper doesn't reach it.
   Shows up as a white bar under "View All...", "Save Changes",
   "Search"/"Export" buttons across the dashboard, forms, and logs. */
.box-footer,
.modal-footer,
.main-footer,
.main-footer strong,
.main-footer b,
.main-footer p {
    background: var(--no-surface-alt) !important;
    border-top: 1px solid var(--no-line) !important;
    color: var(--no-ink) !important;
}

.box-header,
.nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--no-line) !important;
    background: transparent !important;
}
.box-title, .box-header > h3 {
    color: var(--no-ink) !important;
}
.box.box-default > .box-header {
    background: var(--no-surface-alt) !important;
}
/* AdminLTE's nav-tabs-custom gives its .tab-content/.tab-pane an
   explicit white background of its own, separate from the card
   wrapper above - overriding the wrapper alone leaves this inner
   layer still white, which is exactly what the last screenshot
   showed (light text now legible in principle, but against a
   background that was never actually changed here). */
.nav-tabs-custom .tab-content,
.tab-pane,
.tab-content {
    background: var(--no-surface) !important;
    color: var(--no-ink) !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    background: var(--no-surface) !important;
    color: var(--no-accent) !important;
    border-color: var(--no-line) !important;
}
.nav-tabs-custom > .nav-tabs > li > a {
    color: var(--no-ink-soft) !important;
}

/* dashboard stat widgets keep their semantic color as an accent stripe,
   but sit on the dark surface instead of a solid saturated block */
.small-box > .inner { color: var(--no-ink) !important; }
.small-box h3, .small-box p { color: var(--no-ink) !important; }
/* AdminLTE's own bg-* utility classes (bg-aqua, bg-teal, bg-navy, bg-purple,
   bg-maroon, etc. - there are more of these than the 4 handled explicitly
   below) set background-color with their own !important on a two-class
   selector (.small-box.bg-X), which ties on specificity with a plain
   .small-box rule and can still win depending on source order. Matching
   that specificity here with an attribute selector - [class*="bg-"] counts
   the same as a second class - and loading after AdminLTE's CSS is what
   actually guarantees every color variant goes dark, not just the 4 named
   ones. (Found via screenshot: an "Online Devices" stat tile using a bg-*
   class outside the 4 explicitly listed kept its original solid fill.) */
.small-box[class*="bg-"] {
    background: var(--no-surface) !important;
    border-left: 4px solid var(--no-accent) !important;
}
.small-box.bg-aqua    { border-left-color: var(--no-accent)  !important; }
.small-box.bg-green   { border-left-color: var(--no-success) !important; }
.small-box.bg-yellow  { border-left-color: var(--no-warning) !important; }
.small-box.bg-red     { border-left-color: var(--no-danger)  !important; }
.small-box .icon      { color: rgba(255,255,255,0.06) !important; }

/* ---------- callouts / alerts ---------- */
.callout {
    background: var(--no-surface) !important;
    color: var(--no-ink) !important;
    border-left-width: 4px !important;
}
.callout-success { border-color: var(--no-success) !important; }
.callout-danger   { border-color: var(--no-danger) !important; }
.callout-warning  { border-color: var(--no-warning) !important; }
.callout-info     { border-color: var(--no-accent) !important; }
.alert {
    background: var(--no-surface) !important;
    color: var(--no-ink) !important;
    border: 1px solid var(--no-line) !important;
}

/* ---------- forms ---------- */
.form-control,
.input-group-addon,
select.form-control,
textarea.form-control {
    background: var(--no-input-bg) !important;
    border: 1px solid var(--no-line) !important;
    color: var(--no-ink) !important;
}
.form-control:focus {
    border-color: var(--no-accent) !important;
    box-shadow: 0 0 0 2px rgba(45,212,232,0.15) !important;
}
.form-control::placeholder { color: var(--no-ink-faint); }
label { color: var(--no-ink-soft); }
/* Browser autofill (seen on the GB140 track form's IMEI/date fields, which
   carry values via GET and so get remembered/autofilled) paints its own
   white background through a UA style that plain background-color can't
   reach - only the inset box-shadow trick overrides it. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--no-ink) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--no-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--no-input-bg) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---------- buttons ---------- */
.btn-primary {
    background: var(--no-accent) !important;
    border-color: var(--no-accent) !important;
    color: var(--no-accent-ink) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: #6FE3F0 !important;
    border-color: #6FE3F0 !important;
}
.btn-default {
    background: var(--no-surface-alt) !important;
    border-color: var(--no-line) !important;
    color: var(--no-ink) !important;
}
.btn-success { background: var(--no-success) !important; border-color: var(--no-success) !important; color: #04261A !important; }
.btn-warning { background: var(--no-warning) !important; border-color: var(--no-warning) !important; color: #2B1B02 !important; }
.btn-danger  { background: var(--no-danger)  !important; border-color: var(--no-danger)  !important; color: #2B0704 !important; }

/* ---------- labels / badges ---------- */
.label-success { background: var(--no-success) !important; color: #04261A !important; }
.label-warning { background: var(--no-warning) !important; color: #2B1B02 !important; }
.label-danger  { background: var(--no-danger)  !important; color: #2B0704 !important; }
.label-info,
.label-primary { background: var(--no-accent) !important; color: var(--no-accent-ink) !important; }
.label-default { background: var(--no-surface-alt) !important; color: var(--no-ink-soft) !important; }

/* ---------- tables ---------- */
.table {
    color: var(--no-ink) !important;
}
.table > thead > tr > th {
    border-bottom: 2px solid var(--no-line) !important;
    color: var(--no-ink-soft) !important;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--no-line) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--no-surface-alt) !important;
}
.table-hover > tbody > tr:hover {
    background: #1B2530 !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
    border: 1px solid var(--no-line) !important;
}

/* ---------- pagination (dirPagination / bootstrap) ---------- */
.pagination > li > a,
.pagination > li > span {
    background: var(--no-surface) !important;
    border: 1px solid var(--no-line) !important;
    color: var(--no-ink-soft) !important;
}
.pagination > .active > a,
.pagination > .active > span {
    background: var(--no-accent) !important;
    border-color: var(--no-accent) !important;
    color: var(--no-accent-ink) !important;
}

/* ---------- misc: horizontal rules, headings, dropdown menus ---------- */
hr { border-top: 1px solid var(--no-line); }
h1, h2, h3, h4, h5, h6 { color: var(--no-ink); }
.dropdown-menu {
    background: var(--no-surface) !important;
    border: 1px solid var(--no-line) !important;
}
.dropdown-menu > li > a {
    color: var(--no-ink-soft) !important;
}
.dropdown-menu > li > a:hover {
    background: var(--no-surface-alt) !important;
    color: var(--no-ink) !important;
}

/* ---------- device telemetry panel (markerapi_*.php) ---------- */
/* Bootstrap's own paragraph/bold-text color otherwise wins over the
   inherited body color here, leaving values dim against the dark bg */
#tab_1 p,
#tab_1 p b,
#header p,
#header b {
    color: var(--no-ink) !important;
}

/* the Trip Summary card is a custom component with its own hardcoded
   white background/dark text, defined in markerapi_gb140.php's own
   <style> block - not an AdminLTE/Bootstrap class, so it needs its
   own explicit override rather than inheriting anything above */
.trip-summary-card {
    background-color: var(--no-surface) !important;
    border-color: var(--no-line) !important;
    color: var(--no-ink) !important;
}
.trip-summary-header {
    border-bottom-color: var(--no-line) !important;
}
.trip-summary-header h3 {
    color: var(--no-ink) !important;
}
.trip-summary-content .label {
    color: var(--no-ink-soft) !important;
}
.trip-summary-content .value {
    color: var(--no-ink) !important;
}

/* ---------- Select2 dropdowns (IMEI pickers etc.) ---------- */
/* Select2 ships its own light-themed CSS, unrelated to Bootstrap/AdminLTE,
   so none of the rules above touch it - deliberately deferred during the
   initial reskin, now themed on request. */
.select2-container--default .select2-selection--single {
    background: var(--no-input-bg) !important;
    border: 1px solid var(--no-line) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--no-ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--no-ink-soft) transparent transparent transparent !important;
}
.select2-dropdown {
    background: var(--no-surface) !important;
    border: 1px solid var(--no-line) !important;
    color: var(--no-ink) !important;
}
.select2-search--dropdown .select2-search__field {
    background: var(--no-input-bg) !important;
    border: 1px solid var(--no-line) !important;
    color: var(--no-ink) !important;
}
.select2-results__option {
    background: var(--no-surface) !important;
    color: var(--no-ink) !important;
}
.select2-results__option--highlighted[aria-selected] {
    background: var(--no-accent) !important;
    color: var(--no-accent-ink) !important;
}
.select2-results__option[aria-selected="true"] {
    background: var(--no-surface-alt) !important;
    color: var(--no-ink) !important;
}
.select2-container--default .select2-results > .select2-results__options {
    background: var(--no-surface) !important;
}

/* ---------- login / register pages ---------- */
body.login-page, body.register-page {
    background: var(--no-bg) !important;
}
.login-box-body, .register-box-body {
    background: var(--no-surface) !important;
    border: 1px solid var(--no-line) !important;
    color: var(--no-ink) !important;
    box-shadow: none !important;
}
.login-box-msg, .register-box-msg {
    color: var(--no-ink-soft) !important;
}
.login-box a, .register-box a {
    color: var(--no-accent) !important;
}