/* Modern dark CIC theme - all rules scoped under body.ui-modern */

body.ui-modern {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  background: #05090d;
}

body.ui-modern #app {
  border: none;
  background: #0b1218;
}

body.ui-modern #titlebar {
  background: #0e161d;
  border-bottom: 1px solid #22323d;
  color: #9fc2d4;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
body.ui-modern #titlebar .tbtn { display: none; }

body.ui-modern #menubar {
  background: #0e161d;
  border-bottom: 1px solid #22323d;
  color: #c8dbe6;
}
body.ui-modern #menubar .menu:hover,
body.ui-modern #menubar .menu.open { background: #1d3240; color: #4db8ff; }
body.ui-modern #menubar .menu u { text-decoration: none; }

body.ui-modern .menupop {
  background: #101b23;
  border: 1px solid #2a3f4d;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  color: #c8dbe6;
  padding: 4px;
}
body.ui-modern .menupop .mi { border-radius: 4px; padding: 5px 14px; }
body.ui-modern .menupop .mi:hover { background: #1d3240; color: #4db8ff; }
body.ui-modern .menupop .mi.disabled { color: #4b5c66; }
body.ui-modern .menupop .mi.disabled:hover { background: none; color: #4b5c66; }
body.ui-modern .menupop .sep { border-top: 1px solid #22323d; border-bottom: none; }

body.ui-modern #cmdbar {
  background: #0e161d;
  border-bottom: 1px solid #22323d;
  height: 34px;
}
body.ui-modern button.b95 {
  background: #14202a;
  border: 1px solid #2a3f4d;
  border-radius: 5px;
  color: #c8dbe6;
  padding: 3px 10px;
  transition: background .1s, border-color .1s;
}
body.ui-modern button.b95:hover:not(:disabled) { background: #1d3240; border-color: #35c8ff; color: #fff; }
body.ui-modern button.b95:active:not(:disabled) { background: #0d3a52; border-color: #35c8ff; }
body.ui-modern button.b95:disabled { color: #4b5c66; text-shadow: none; }
body.ui-modern button.b95.default { outline: 1px solid #35c8ff; }
body.ui-modern #tcindicator {
  background: #05131c;
  border: 1px solid #2a3f4d;
  border-radius: 5px;
  color: #4db8ff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

body.ui-modern #playarea { background: #05090d; }

/* --- modern grid layout containers --- */
body.ui-modern #mlayout {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 330px;
  grid-template-rows: 1fr 34px;
  grid-template-areas: "map dock" "timebar dock";
}
body.ui-modern #mmap {
  grid-area: map; position: relative; overflow: hidden;
  background: #0a141c;
}
body.ui-modern #mdock {
  grid-area: dock;
  background: #0c141b;
  border-left: 1px solid #22323d;
  display: flex; flex-direction: column;
  overflow: hidden;
}
body.ui-modern #mtimebar {
  grid-area: timebar;
  background: #0e161d;
  border-top: 1px solid #22323d;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  color: #c8dbe6;
}
body.ui-modern #mtimebar .clock {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #4db8ff;
  white-space: nowrap;
}

body.ui-modern .dock-section {
  display: flex; flex-direction: column;
  border-bottom: 1px solid #22323d;
  min-height: 0;
}
body.ui-modern .dock-head {
  padding: 5px 10px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #6f8794;
  background: #0e161d;
  flex: 0 0 auto;
}
body.ui-modern #mcontacts { flex: 0 1 26%; }
body.ui-modern #mreport { flex: 1 1 40%; }
body.ui-modern #mfeed { flex: 1 1 34%; border-bottom: none; }
body.ui-modern .dock-body { flex: 1; overflow-y: auto; padding: 4px 6px; min-height: 0; }

body.ui-modern .contact-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 6px; border-radius: 4px;
  color: #c8dbe6; cursor: default;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  white-space: nowrap; overflow: hidden;
}
body.ui-modern .contact-row:hover { background: #14212b; }
body.ui-modern .contact-row.sel { background: #0d3a52; color: #fff; }
body.ui-modern .contact-row .dot {
  width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto;
}
/* Identity on the left, range and track quality on the right, so the eye can
   run down either column on its own. */
body.ui-modern .contact-row .c-main {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
body.ui-modern .contact-row .c-id { color: inherit; }
body.ui-modern .contact-row .c-name { color: #8ea6b4; margin-left: 6px; }
body.ui-modern .contact-row.sel .c-name { color: #bcd6e4; }
body.ui-modern .contact-row .c-meta {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 7px;
  font-size: 10px;
}
body.ui-modern .contact-row .c-rng { color: #a9c0cd; }
body.ui-modern .contact-row .c-detail { color: #6c8496; }
/* How much the position can still be trusted. */
body.ui-modern .contact-row .c-detail.fresh { color: #55d68a; }
body.ui-modern .contact-row .c-detail.aging { color: #ffd24d; }
body.ui-modern .contact-row .c-detail.stale { color: #ff8f5a; }
body.ui-modern .contact-sep {
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: #6c8496; padding: 6px 6px 2px; border-top: 1px solid #1b2b36;
  margin-top: 4px;
}

body.ui-modern .feed-entry {
  padding: 3px 6px;
  border-left: 2px solid #2a3f4d;
  margin: 2px 0;
  color: #a9c0cd;
  font-size: 11px;
  line-height: 1.35;
}
body.ui-modern .feed-entry .ftime {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #5f7684; font-size: 10px;
}
body.ui-modern .feed-entry.critical { border-left-color: #ff5555; color: #ffd5d5; }
body.ui-modern .feed-entry.launch { border-left-color: #ff9f45; }

/* mini-map overlay */
body.ui-modern #mminimap {
  position: absolute; left: 10px; top: 10px; z-index: 40;
  border: 1px solid #2a3f4d; border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  background: #0a141c;
}

/* hover tooltip */
body.ui-modern #mtooltip {
  position: absolute; z-index: 60;
  background: rgba(10, 20, 28, 0.94);
  border: 1px solid #35c8ff;
  border-radius: 5px;
  padding: 6px 9px;
  color: #c8dbe6;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  pointer-events: none;
  white-space: nowrap;
}
body.ui-modern #mtooltip .tt-title { color: #4db8ff; font-weight: 700; }
body.ui-modern #mtooltip .tt-hint {
  margin-top: 5px; padding-top: 4px; border-top: 1px solid #24384696;
  color: #7e97a6; font-size: 10px;
}

/* --- notification stack ---------------------------------------------------
   Staff traffic that is worth looking up for but is not a question. Sits over
   the map, top-right, clear of the mini-map. Never blocks input: pointer
   events are enabled only on the cards themselves. */
body.ui-modern #mnotes {
  /* Bottom-right: the mini-map owns the top-left and the command rail the
     bottom-left, so this is the one corner nothing else wants. */
  position: absolute; bottom: 10px; right: 10px;
  width: 280px; max-width: calc(100% - 20px); z-index: 40;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
body.ui-modern #mnotes .note {
  pointer-events: auto;
  position: relative;
  background: rgba(16, 27, 35, .94);
  border: 1px solid #2a3f4d;
  border-left: 3px solid #35c8ff;
  border-radius: 6px;
  padding: 7px 22px 7px 9px;
  font-size: 11px; line-height: 1.35; color: #c8dbe6;
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
  opacity: 0; transform: translateX(14px);
  transition: opacity .22s ease, transform .22s ease;
}
body.ui-modern #mnotes .note.in { opacity: 1; transform: translateX(0); }
body.ui-modern #mnotes .note.out { opacity: 0; transform: translateX(14px); }
body.ui-modern #mnotes .note.note-go { cursor: pointer; }
body.ui-modern #mnotes .note.note-go:hover { background: rgba(22, 40, 53, .97); border-color: #35c8ff; }
body.ui-modern #mnotes .note .note-time {
  display: block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9px; color: #7e97a6; letter-spacing: .06em; margin-bottom: 2px;
}
body.ui-modern #mnotes .note .note-x {
  position: absolute; top: 4px; right: 6px;
  color: #6c8496; cursor: pointer; font-size: 13px; line-height: 1;
}
body.ui-modern #mnotes .note .note-x:hover { color: #c8dbe6; }
body.ui-modern #mnotes .note.contact { border-left-color: #ffd24d; }
body.ui-modern #mnotes .note.launch  { border-left-color: #ff8f5a; }
body.ui-modern #mnotes .note.critical {
  border-left-color: #ff5555;
  background: rgba(44, 18, 20, .95);
  color: #ffd9d9;
}

/* Report styling inside the dock.
   The report markup is shared with the classic shell, which relies on the
   page's default black text over a grey Win95 panel. Nothing here used to
   restate the colour, so on the dark dock the whole Selected Group panel -
   speed, course, every unit and its damage - rendered black on near-black at
   a contrast ratio of 1.13:1. It was invisible. */
body.ui-modern #reportbody { position: static; inset: auto; color: #c8dbe6; }
body.ui-modern #reportbody table { border-collapse: collapse; width: 100%; }
body.ui-modern #reportbody td { padding: 1px 4px; color: #c8dbe6; }
/* Label column reads quieter than the value it labels. */
body.ui-modern #reportbody td:first-child { color: #8ea6b4; }
body.ui-modern #reportbody b { color: #9fd8e8; }
body.ui-modern #mreport .rname { color: #4db8ff; font-weight: 700; }
body.ui-modern #mreport .sunk,
body.ui-modern #reportbody .sunk { color: #ff5555; text-decoration: line-through; }

/* --- dialogs / widgets (same DOM as retro, dark skin) --- */
body.ui-modern .dialog {
  background: #101b23;
  border: 1px solid #2a3f4d;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.7);
  color: #c8dbe6;
}
body.ui-modern .dialog .dtitle {
  background: #0e161d;
  border-bottom: 1px solid #22323d;
  border-radius: 8px 8px 0 0;
  color: #4db8ff;
  font-weight: 600;
  height: 24px;
}
body.ui-modern .dialog fieldset { border: 1px solid #22323d; border-radius: 5px; }
body.ui-modern .dialog input[type=text],
body.ui-modern .dialog input[type=number],
body.ui-modern .dialog select {
  background: #05131c;
  border: 1px solid #2a3f4d;
  border-radius: 4px;
  color: #c8dbe6;
}
body.ui-modern .listbox {
  background: #05131c;
  border: 1px solid #2a3f4d;
  border-radius: 4px;
  color: #c8dbe6;
}
body.ui-modern .listbox .li.sel { background: #0d3a52; color: #fff; }
body.ui-modern .listbox .li.dim { color: #4b5c66; }
body.ui-modern .grid {
  background: #05131c;
  border: 1px solid #2a3f4d;
  border-radius: 4px;
  color: #c8dbe6;
}
body.ui-modern .grid th {
  background: #0e161d;
  border: none; border-bottom: 1px solid #2a3f4d;
  color: #6f8794;
}
body.ui-modern .grid tr.sel td { background: #0d3a52; color: #fff; }
body.ui-modern .sunken, body.ui-modern .raised {
  background: #05131c; border: 1px solid #2a3f4d; border-radius: 4px; color: #c8dbe6;
}
body.ui-modern .stafftext {
  background: #05131c; border: 1px solid #2a3f4d; border-radius: 4px; color: #c8dbe6;
}
body.ui-modern .staffface { border: 1px solid #2a3f4d; border-radius: 4px; }

body.ui-modern #statusbar {
  background: #0e161d; border-top: 1px solid #22323d; color: #c8dbe6;
}
body.ui-modern #statusbar .cell { border: 1px solid #22323d; border-radius: 4px; }

/* setup screens */
body.ui-modern #setup { background: radial-gradient(ellipse at center, #10202c 0%, #05090d 75%); }
body.ui-modern h1.gametitle { color: #4db8ff; text-shadow: 0 0 24px rgba(53,200,255,.5); font-family: system-ui, sans-serif; font-style: normal; letter-spacing: 0.04em; }
body.ui-modern .setupdlg .desc {
  background: #05131c; border: 1px solid #2a3f4d; border-radius: 4px; color: #c8dbe6;
}
body.ui-modern .formation-canvas { background: #0a141c; }

/* =====================================================================
   Command mode - context-sensitive shell (body.ui-modern.ui-command)
   No toolbar, no menu bar: a slim top strip, a context action rail and
   a command palette carry every order.
   ===================================================================== */

body.ui-command #ctopbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: #0e161d;
  border-bottom: 1px solid #22323d;
}
body.ui-command #ctopbar .ctitle {
  font-weight: 700; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: #6f8794;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 30%;
}
body.ui-command #ctopbar .csearch {
  flex: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; max-width: 420px;
  background: #05131c; border: 1px solid #2a3f4d; border-radius: 6px;
  color: #6f8794; font-family: inherit; font-size: 11px;
  padding: 5px 8px; text-align: left;
}
body.ui-command #ctopbar .csearch:hover { border-color: #35c8ff; color: #c8dbe6; }
body.ui-command #ctopbar .csearch kbd {
  background: #14202a; border: 1px solid #2a3f4d; border-radius: 3px;
  padding: 1px 5px; font-family: ui-monospace, Menlo, monospace; font-size: 10px;
}
body.ui-command #ctopbar .ctime { margin-left: auto; display: flex; align-items: center; gap: 4px; }
body.ui-command #ctopbar .cbtn {
  background: #14202a; border: 1px solid #2a3f4d; border-radius: 4px;
  color: #c8dbe6; font-family: inherit; font-size: 11px; padding: 3px 8px;
}
body.ui-command #ctopbar .cbtn:hover { background: #1d3240; border-color: #35c8ff; }
body.ui-command #ctopbar .ctc {
  min-width: 52px; text-align: center; color: #4db8ff;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}
body.ui-command #ctopbar .cclock {
  color: #6f8794; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  white-space: nowrap; padding-left: 8px;
}

/* context action rail */
body.ui-command #crail {
  position: absolute; left: 10px; bottom: 10px; z-index: 45;
  width: 300px;
  background: rgba(12, 20, 27, 0.96);
  border: 1px solid #2a3f4d; border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.55);
  padding: 8px;
}
body.ui-command .crail-head { margin-bottom: 7px; }
body.ui-command .crail-title {
  display: block; color: #4db8ff; font-weight: 700; font-size: 12px;
}
body.ui-command .crail-sub {
  display: block; color: #6f8794; font-size: 10px;
  font-family: ui-monospace, Menlo, monospace; margin-top: 1px;
}
body.ui-command .crail-rec {
  display: block; width: 100%; text-align: left;
  background: linear-gradient(180deg, #123a52, #0d2f42);
  border: 1px solid #35c8ff; border-radius: 6px;
  padding: 7px 9px; margin-bottom: 8px; color: #eaf6ff;
  font-family: inherit;
}
body.ui-command .crail-rec:hover { background: linear-gradient(180deg, #16496a, #103b53); }
body.ui-command .rec-tag {
  display: block; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: #35c8ff; margin-bottom: 2px;
}
body.ui-command .rec-act { display: block; font-weight: 700; font-size: 12px; }
body.ui-command .rec-why { display: block; font-size: 10px; color: #9fc2d4; margin-top: 2px; line-height: 1.35; }
body.ui-command .crail-chips { display: flex; flex-wrap: wrap; gap: 5px; }
body.ui-command .chip {
  background: #14202a; border: 1px solid #2a3f4d; border-radius: 999px;
  color: #c8dbe6; font-family: inherit; font-size: 11px; padding: 3px 10px;
}
body.ui-command .chip:hover { background: #1d3240; border-color: #35c8ff; color: #fff; }
body.ui-command .chip-none { color: #4b5c66; font-size: 11px; font-style: italic; }

/* command palette */
body.ui-command .cpalette,
.cpalette {
  position: absolute; z-index: 3000;
  left: 50%; top: 12%; transform: translateX(-50%);
  width: min(560px, 88vw);
  background: #101b23; border: 1px solid #35c8ff; border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0,0,0,.75);
  overflow: hidden;
}
.cpalette .cpal-input {
  width: 100%; box-sizing: border-box;
  background: #0a141c; border: none; border-bottom: 1px solid #22323d;
  color: #eaf6ff; font-family: inherit; font-size: 14px; padding: 12px 14px;
  outline: none;
}
.cpalette .cpal-list { max-height: 46vh; overflow-y: auto; padding: 5px; }
.cpalette .cpal-row {
  display: flex; align-items: baseline; gap: 9px;
  padding: 7px 10px; border-radius: 6px; color: #c8dbe6; font-size: 12px;
}
.cpalette .cpal-row.sel { background: #0d3a52; }
.cpalette .cpal-row:hover { background: #14212b; }
.cpalette .cpal-label { font-weight: 600; white-space: nowrap; }
.cpalette .cpal-hint { color: #6f8794; font-size: 11px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpalette .cpal-row kbd {
  background: #14202a; border: 1px solid #2a3f4d; border-radius: 3px;
  padding: 1px 5px; font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #6f8794;
}
.cpalette .cpal-none { padding: 14px; color: #4b5c66; text-align: center; font-size: 12px; }

/* Formation editor drag ghost, dark skin. */
body.ui-modern .formghost {
  background: rgba(16, 27, 35, .96);
  border: 1px solid #35c8ff;
  border-radius: 4px;
  color: #c8dbe6;
  box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
body.ui-modern .formghost.over { border-color: #55d68a; color: #d8ffe8; }