/* ------------------------------------------------ vapordon stage, 2 colour

   the fleet tokens and backgrounds go olive and gold, the proxy repaints the hard coded colours from here on
   fonts, corners and controls still look like the real sites
*/

/* all the fleet tokens get olive-washed, the sites dont even notice */
:root, body {
  --bg:         var(--v-control) !important;
  --bg-card:    var(--v-control) !important;
  --bg-card2:   var(--v-window) !important;
  --card:       var(--v-control) !important;
  --surface:    var(--v-control) !important;
  --surface-2:  var(--v-window) !important;
  --surface2:   var(--v-window) !important;
  --hover:      var(--v-darkbg) !important;
  --border:     var(--v-shade) !important;
  --border2:    var(--v-shade) !important;
  --edge:       var(--v-shade) !important;
  --grid:       var(--v-shade) !important;
  --text:       var(--v-text) !important;
  --fg:         var(--v-text) !important;
  --text-2:     var(--v-dim) !important;
  --text-mid:   var(--v-dim) !important;
  --text-dim:   var(--v-dim) !important;
  --text-muted: var(--v-dim) !important;
  --muted:      var(--v-dim) !important;
  --mut:        var(--v-dim) !important;
  --dim:        var(--v-dim) !important;
  --faint:      var(--v-off) !important;
  --fine:       var(--v-off) !important;
  --green:      var(--v-gold) !important;
  --green-dark: var(--v-sel) !important;
  --green-dim:  var(--v-window) !important;
  --green-wash: rgba(149, 136, 49, .22) !important;
  --green-glow: transparent !important;
  --acc:        var(--v-gold) !important;
  --acc2:       var(--v-sel) !important;
  --accent:     var(--v-gold) !important;
  --ok:         var(--v-ok) !important;
  --amber:      var(--v-amber) !important;
  --amber-dim:  #8e6a2c !important;
  --warn:       var(--v-amber) !important;
  --red:        var(--v-red) !important;
  --danger:     var(--v-red) !important;
  --crit:       var(--v-red) !important;
  --blue:       #a9b8c4 !important;
  --blue-dim:   var(--v-window) !important;
  color-scheme: dark;
}

html { background: var(--v-control) !important; }
body { background: var(--v-control) !important; color: var(--v-text) !important; }
h1, .brand, .wordmark { color: var(--v-gold) !important; }
h2, h3 { color: var(--v-gold) !important; }
h4, h5 { color: var(--v-text) !important; }
small, .small, .muted, .fine, .hint, .sub, .subtitle { color: var(--v-dim); }
::selection { background: var(--v-sel); color: var(--v-bright); }
a:not([class]), a.link, .linkish, .link-btn {
  color: var(--v-bright) !important;
  text-decoration: none !important;
}
a:not([class]):hover, a.link:hover, .linkish:hover, .link-btn:hover { text-decoration: underline !important; }
.card, .stat-card, .file-card, .modal-content, .modal-box, .panel, .sheet, .server, .upload-card,
.toolbar-card, .toast, .more-menu-popup, .react-popover, .seen-popover, dialog, #tab-live, #tab-graphs {
  background-color: var(--v-control) !important;
}

/* ------------------------------------------------ status dots

   these keep their meaning: green round = up, red square = down, amber = waking or warning, grey = asleep
   the global square corners would turn every dot into the same little box, so the round ones come back here
*/

.dot, .status-dot, .meta-dot { border-radius: 50% !important; }
.dot.up, .dot.on, .dot.live, .status-dot.live, .status-dot.online, .status-dot.connected { background: var(--v-ok) !important; }
.dot.down, .dot.off, .status-dot.offline, .status-dot.error { background: var(--v-bad-dot) !important; border-radius: 1px !important; }
.status-dot.connecting, .status-dot.reconnecting { background: var(--v-amber) !important; }

/* whatever is picked goes gold like an armed menu item, the sinking in comes with the controls */
.active, .on, .selected, [aria-selected="true"], [aria-pressed="true"] { color: var(--v-gold) !important; }

.modal, .drop-overlay, .page-drop-overlay, .lightbox, [class*="overlay"]:not(.leaflet-overlay-pane) {
  background-color: rgba(30, 34, 26, .55) !important;
}
.error, .err, .l-err, .ue-error { color: #e8a58f !important; }
.warn, .warning, .l-warn, .cm-warn, .tdn-warn { color: var(--v-amber) !important; }