/* Night instrument: the interface for dusk and night (pixel3/dusk.js).
   main.js sets html.ui-night while the map is more than half into dusk, in the
   auto cycle or with Time of day pinned to Dusk or Lit. Colours only; layout,
   type and icons are the daytime ivory UI's. */

/* The big surfaces fade between the two looks instead of snapping. */
#menubar, #toolbar, #info-panel, #statusbar, #advisor-bubble, #speed-controls,
#paused-indicator, #minimap-container, .diag-item {
  transition: background-color .9s ease, color .9s ease, border-color .9s ease;
}
#minimap-container canvas { transition: filter .9s ease; }

html.ui-night {
  --ui-bg: #1b2133;
  --ui-bg2: #232b41;
  --ui-bg3: #2b344c;
  --ui-border: #3a4560;
  --ui-border-light: #46516c;
  --ui-text: #c6cfe0;
  --ui-text-bright: #eef2f8;
  --ui-text-dim: #8c96ac;
  --ui-accent: #5cc8c4;
  --ui-accent2: #4aa9a6;
  --ui-green: #6cc79a;
  --ui-red: #e07a68;
  --ui-yellow: #e0c062;
  --btn-face: #232b41;
  --btn-hi: #2d3a55;
  --btn-sh: #3a4560;
  color-scheme: dark;
}

html.ui-night #menubar, html.ui-night #toolbar, html.ui-night #info-panel {
  background: var(--ui-bg); color: var(--ui-text); border-color: var(--ui-border);
}
html.ui-night #statusbar { background: var(--ui-bg3); color: var(--ui-text-dim); border-top-color: var(--ui-border); }
html.ui-night #date-display { color: #e8b25c; }

/* Menu bar and dropdowns */
html.ui-night .menu-btn, html.ui-night #identity-display { color: var(--ui-text); }
html.ui-night .menu-btn:hover { background: var(--btn-hi); border-color: var(--ui-border-light); }
html.ui-night .menu-btn:active { background: #24445a; }
html.ui-night .menu-btn.toggle-btn.active { background: #24445a; border-color: var(--ui-accent); color: var(--ui-text-bright); }
html.ui-night .menu-item { color: var(--ui-text); }
html.ui-night .menu-item:hover { background: var(--btn-hi); color: var(--ui-text-bright); }
html.ui-night .menu-separator { border-color: var(--ui-border-light); }
html.ui-night .view-btn, html.ui-night .menubar-rot-btn, html.ui-night .speed-btn {
  background: var(--ui-bg3); color: var(--ui-text-bright); border-color: var(--ui-border-light);
}
html.ui-night .speed-btn.active { background: #24445a; border-color: var(--ui-accent); color: var(--ui-text-bright); }

/* Build toolbar and its fly-out panels */
html.ui-night .cat-btn { border-bottom-color: var(--ui-border-light); }
html.ui-night .cat-btn:hover { background: var(--btn-hi); border-color: var(--ui-border-light); }
html.ui-night .cat-label, html.ui-night .tool-label { color: var(--ui-text); }
html.ui-night .cat-count-badge { background: var(--ui-bg3); color: var(--ui-text); border-color: var(--ui-border-light); }
html.ui-night .cat-row.open > .cat-btn, html.ui-night .sidebar-action-btn.active {
  background: #24445a; border-color: var(--ui-accent); box-shadow: inset 3px 0 var(--ui-accent);
}
html.ui-night .cat-row.open > .cat-btn .cat-label, html.ui-night .sidebar-action-btn.active .cat-label,
html.ui-night .sidebar-action-btn.active * { color: var(--ui-text-bright); }
html.ui-night .cat-row.open > .cat-btn::after { border-left-color: var(--ui-accent); }
html.ui-night .cat-panel-items .tool-btn, html.ui-night .tool-btn { background: var(--ui-bg3); border-color: var(--ui-border-light); color: var(--ui-text); }
html.ui-night .tool-btn:hover, html.ui-night .cat-panel-items .tool-btn:hover { background: var(--btn-hi); color: var(--ui-text-bright); }
html.ui-night .tool-btn.active, html.ui-night .cat-panel-items .tool-btn.active { background: #24445a; border-color: var(--ui-accent); color: var(--ui-text-bright); }
html.ui-night .tool-btn.tool-unaffordable { background: #3a2f2a; border-color: #8a6a4a; }
html.ui-night .tool-btn.tool-unaffordable:hover { background: #45372f; }

/* Panels, windows, modals */
html.ui-night .cat-panel, html.ui-night .dropdown-menu, html.ui-night .floating-window, html.ui-night .sim-modal,
html.ui-night #report-modal-box, html.ui-night #ng-panel {
  background: var(--ui-bg2); border-color: var(--ui-border); color: var(--ui-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
html.ui-night .cat-panel-title, html.ui-night .floating-window-title, html.ui-night #report-modal-header, html.ui-night #ng-header {
  background: var(--ui-bg3); color: var(--ui-text-bright); border-bottom-color: var(--ui-border);
}
html.ui-night .floating-window-close:hover { background: #4a2e2c; color: #f0a090; }
html.ui-night .sim-modal-buttons button:hover { background: var(--btn-hi); color: var(--ui-text-bright); }
html.ui-night .sim-modal-buttons button.primary { background: #2f7f80; color: #f4fbfb; }
html.ui-night .sim-modal-buttons button.primary:hover { background: #379394; }
html.ui-night .sim-modal-input, html.ui-night #report-form input, html.ui-night #report-form textarea, html.ui-night #report-form select,
html.ui-night .spo-broadcast-form input {
  background: #161b2b; color: var(--ui-text-bright); border-color: var(--ui-border-light);
}
html.ui-night #cute-tooltip { background: var(--ui-bg2); color: var(--ui-text); border-color: var(--ui-border-light); box-shadow: 0 5px 16px rgba(0, 0, 0, .4); }

/* Info panel */
html.ui-night #info-panel * { border-color: var(--ui-border-light); }
html.ui-night .power-bar-wrap, html.ui-night .zone-bar-wrap, html.ui-night .zone-bar-centered-wrap { background: #39435c; }
html.ui-night .diag-item { background: var(--ui-bg3); color: var(--ui-text); border-color: var(--ui-border); }
html.ui-night .diag-item:hover { background: var(--btn-hi); }

/* Floating map furniture */
html.ui-night #advisor-bubble { background: var(--ui-bg2); color: var(--ui-text); border-color: var(--ui-border); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
html.ui-night #speed-controls, html.ui-night #paused-indicator { background: var(--ui-bg2); color: var(--ui-text); border-color: var(--ui-border); }
html.ui-night #minimap-container { background: var(--ui-bg2); border-color: var(--ui-border); }
html.ui-night #minimap-container canvas { filter: brightness(.55) saturate(.7) hue-rotate(-20deg); }

/* Communications and spaceport windows */
html.ui-night .comms-tabs, html.ui-night .spo-tabs { background: var(--ui-bg3); border-color: var(--ui-border); }
html.ui-night .comms-tab:hover, html.ui-night .spo-tab:hover,
html.ui-night .comms-tab.comms-tab-active, html.ui-night .spo-tab-active { background: #24445a; color: var(--ui-text-bright); }
html.ui-night .comms-tip-tag { background: #24445a; color: var(--ui-text); }
html.ui-night .comms-entry:hover, html.ui-night .comms-advisor-row:hover { background: var(--btn-hi); }
html.ui-night .comms-advisor-mute-btn { background: var(--ui-bg3); color: var(--ui-text); border-color: var(--ui-border-light); }
html.ui-night .spo-ship-card, html.ui-night .spo-event-card, html.ui-night .spo-broadcast { background: var(--ui-bg3); border-color: var(--ui-border); }
html.ui-night .spo-btn { background: var(--ui-bg3); color: var(--ui-text); border-color: var(--ui-border-light); }
html.ui-night .spo-btn:hover:not(:disabled) { background: var(--btn-hi); color: var(--ui-text-bright); }
html.ui-night .spo-btn:disabled, html.ui-night .spo-btn-disabled { background: #222838; color: var(--ui-text-dim); border-color: var(--ui-border); }
html.ui-night .spo-rep-track, html.ui-night .spo-event-progress { background: #39435c; }

/* Building inspect (cutaway) */
html.ui-night .cutaway-overlay { background: rgba(8, 10, 20, .5); }
html.ui-night .cutaway-art-wrap { background: #161b2b; }
html.ui-night .cutaway-pill { background: #24445a; color: #bfe9e6; }
html.ui-night .cutaway-pill-size { background: #3d3326; color: #ecc98f; }
html.ui-night .cutaway-marker-key { background: rgba(27, 33, 51, .92); }

/* Text the ivory theme hardcodes in dark greens */
html.ui-night #advisor-tail { border-top-color: var(--ui-bg2); }
html.ui-night #advisor-text, html.ui-night .comms-entry-text, html.ui-night .comms-tip-text, html.ui-night .comms-advisor-name,
html.ui-night .comms-entry-name, html.ui-night .comms-section-title, html.ui-night .spo-ship-name, html.ui-night .spo-ship-reason,
html.ui-night .spo-rep-level, html.ui-night .spo-broadcast-label, html.ui-night .cat-count-badge { color: var(--ui-text); }
html.ui-night #advisor-speaker, html.ui-night #advisor-name, html.ui-night #advisor-bubble button,
html.ui-night .spo-event-type, html.ui-night .spo-event-effect, html.ui-night .spo-broadcast-active, html.ui-night .spo-btn-compute,
html.ui-night .menu-item.menu-item-active, html.ui-night .group-label-positive, html.ui-night #paused-indicator { color: var(--ui-accent); }
html.ui-night #advisor-role, html.ui-night #advisor-dismiss-btn, html.ui-night .comms-tab, html.ui-night .spo-tab,
html.ui-night .comms-entry-date, html.ui-night .comms-advisor-role, html.ui-night .comms-no-alerts,
html.ui-night .spo-ship-meta, html.ui-night .spo-ship-type, html.ui-night .spo-empty, html.ui-night .spo-footer, html.ui-night .spo-rep-label,
html.ui-night .spo-rep-value, html.ui-night .spo-broadcast-hint, html.ui-night .spo-event-ship, html.ui-night .spo-event-meta,
html.ui-night .spo-log-list li { color: var(--ui-text-dim); }
html.ui-night .floating-window-close, html.ui-night #report-modal-close, html.ui-night #advisor-dismiss-btn:hover { color: var(--ui-text); }
html.ui-night .cat-row.open > .cat-btn .cat-label, html.ui-night .tool-btn.active .tool-label,
html.ui-night .cat-panel-items .tool-btn:hover .tool-label, html.ui-night .comms-tab:hover, html.ui-night .spo-tab:hover,
html.ui-night .comms-tab.comms-tab-active, html.ui-night .spo-tab-active { color: var(--ui-text-bright); }