/* Los Santos MDC - retro "Visual MCT" terminal theme, shared with the CAD/MDT.
   Win2k-era chrome: grey bevels, navy titlebar, chunky toolbar, monospace data
   returns. Adapted from CAD's cad.css so the two terminals match. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --chrome:    #d4d0c8;
  --chrome-dk: #808080;
  --chrome-lt: #ffffff;
  --navy:      #0a246a;
  --navy-lt:   #a6caf0;
  --ink:       #1a1a1a;
  --red:       #c00000;
  --amber:     #b36b00;
  --green:     #0a6b1d;
  --blue:      #0b46a3;
  --mono:      Consolas, 'Courier New', monospace;
}

html, body { height: 100%; }
body {
  font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
  font-size: 13px;
  color: var(--ink);
  background: #3a6ea5;
}
body.plain, body.login-body { background: #10141c; }

/* ── Window chrome ─────────────────────────────────────────────────────────── */
.mct-window {
  display: flex; flex-direction: column;
  height: 100vh;
  background: var(--chrome);
  border: 2px solid; border-color: var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
}

.mct-titlebar {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(90deg, var(--navy), #3a6ea5 70%, var(--navy-lt));
  color: #fff; font-weight: bold; font-size: 12px;
  padding: 3px 8px; flex: 0 0 auto;
}
.mct-titlebar-right { margin-left: auto; display: flex; gap: 14px; font-weight: normal; }
.mct-titlebar-clock { font-family: var(--mono); }

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.mct-toolbar {
  display: flex; gap: 3px; padding: 4px; flex: 0 0 auto;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-dk);
  overflow-x: auto;
}
.fkey {
  display: flex; flex-direction: column; align-items: center;
  min-width: 78px; padding: 3px 8px 4px;
  background: var(--chrome); cursor: pointer; text-decoration: none;
  border: 2px solid; border-color: var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
  font-family: inherit; font-size: 11px; color: var(--ink);
}
.fkey:active, .fkey.on { border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk); background: #c8c4bc; }
.fkey .fi { font-size: 15px; line-height: 1.1; }
.fkey .fl { font-size: 10px; white-space: nowrap; }
.fkey .fi .icon { width: 18px; height: 18px; vertical-align: 0; }

.tb-search { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.tb-search input { width: 200px; }

/* ── Body: nav + main ──────────────────────────────────────────────────────── */
.mct-body { display: flex; flex: 1 1 auto; min-height: 0; }

.mct-nav {
  flex: 0 0 180px; overflow-y: auto;
  background: var(--chrome);
  border-right: 2px solid; border-right-color: var(--chrome-lt);
  padding: 4px; display: flex; flex-direction: column;
}
.nav-group { font-size: 9px; font-weight: bold; color: #555; padding: 8px 6px 2px; letter-spacing: 0.08em; }
.mct-nav a {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px; margin: 1px 0;
  color: var(--ink); text-decoration: none; font-size: 12px;
  border: 1px solid transparent;
}
.mct-nav a:hover { border-color: var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt); }
.mct-nav a.on { background: var(--navy); color: #fff; }
.mct-nav a.on .icon { color: #fff; }
.mct-nav a.danger { color: var(--red); }
.nav-foot { margin-top: auto; padding: 8px 6px; border-top: 1px solid var(--chrome-dk); }
.nav-user { font-weight: bold; font-size: 12px; }
.nav-fac { font-size: 10px; color: #555; }

.mct-main { flex: 1 1 auto; overflow-y: auto; padding: 10px; background: #e8e6e0; }

/* ── Status bar ────────────────────────────────────────────────────────────── */
.mct-statusbar {
  display: flex; gap: 0; flex: 0 0 auto; font-size: 11px;
  background: var(--chrome); border-top: 1px solid var(--chrome-lt);
}
.mct-statusbar > span {
  padding: 3px 10px;
  border: 1px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
  margin: 2px 1px; font-family: var(--mono); white-space: nowrap;
}
.sb-spring { flex: 1 1 auto; border: none !important; }
.sb-link { color: var(--green); }

/* ── Panels / typography ───────────────────────────────────────────────────── */
.panel {
  background: #fff; margin-bottom: 10px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
}
.panel-title {
  background: var(--navy); color: #fff;
  font-size: 11px; font-weight: bold; letter-spacing: 0.06em;
  padding: 4px 8px; display: flex; align-items: center; gap: 6px;
}
.panel-title .icon { color: #fff; }
.panel > *:not(.panel-title) { margin: 8px; }
.panel-count { margin-left: auto; font-family: var(--mono); }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.page-head h1 { font-size: 16px; color: var(--navy); letter-spacing: 0.03em; display: flex; align-items: center; gap: 8px; }
.page-head .icon { color: var(--navy); }
.page-sub { font-size: 11px; color: #555; }

.mono { font-family: var(--mono); }
.empty { color: #777; padding: 10px; font-style: italic; }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.tbl { width: calc(100% - 16px); border-collapse: collapse; font-size: 12px; }
.tbl th {
  background: var(--chrome); text-align: left; font-size: 10px; letter-spacing: 0.05em;
  padding: 4px 6px; border: 1px solid var(--chrome-dk);
}
.tbl td { padding: 4px 6px; border: 1px solid #c8c8c8; vertical-align: top; }
.tbl tr:nth-child(even) td { background: #f4f3f0; }
.tbl a { color: var(--blue); }

.kv { width: calc(100% - 16px); border-collapse: collapse; font-size: 12px; }
.kv th { text-align: right; width: 120px; color: #555; padding: 3px 10px 3px 0; vertical-align: top; font-weight: normal; }
.kv td { padding: 3px 0; }

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-block; font-size: 10px; font-weight: bold;
  padding: 1px 6px; border: 1px solid #999; background: #eee; color: #333;
  font-family: var(--mono); letter-spacing: 0.03em;
}
.chip-red   { background: #ffd6d6; border-color: var(--red); color: var(--red); }
.chip-amber { background: #ffe9c2; border-color: var(--amber); color: var(--amber); }
.chip-green { background: #d9f4d9; border-color: var(--green); color: var(--green); }
.chip-blue  { background: #d6e4ff; border-color: var(--blue); color: var(--blue); }
.chip-grey  { background: #eee; }

/* ── Forms / buttons ───────────────────────────────────────────────────────── */
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=datetime-local], select, textarea {
  font-family: inherit; font-size: 12px; padding: 4px 6px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
  background: #fff; width: 100%;
}
textarea { font-family: var(--mono); resize: vertical; }
label { display: block; font-size: 10px; font-weight: bold; color: #444; letter-spacing: 0.04em; }
label input, label select, label textarea { margin-top: 2px; font-weight: normal; }
.form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.form-row > .grow, .grow { flex: 1 1 auto; }
.stack-form { display: flex; flex-direction: column; gap: 8px; }

.btn {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: 11px; font-weight: bold; color: var(--ink);
  background: var(--chrome); padding: 4px 12px;
  border: 2px solid; border-color: var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
}
.btn:active { border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk); }
.btn-primary { background: var(--navy); color: #fff; border-color: #4a6ab0 #051233 #051233 #4a6ab0; }
.btn-primary .icon { color: #fff; }
.btn-danger { background: #a33; color: #fff; border-color: #d77 #611 #611 #d77; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-sm { padding: 1px 6px; font-size: 10px; }
.btn-block { width: 100%; justify-content: center; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.flash { padding: 6px 10px; font-weight: bold; font-size: 12px; margin-bottom: 10px; border: 2px solid; }
.flash-error { background: #ffd6d6; border-color: var(--red); color: var(--red); }
.flash-success { background: #d9f4d9; border-color: var(--green); color: var(--green); }
.flash-info { background: #d6e4ff; border-color: var(--blue); color: var(--blue); }

/* ── Dashboards / grids ────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

.stat-row { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.stat-tile {
  flex: 1 1 160px; background: #fff; padding: 10px 12px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
  display: flex; align-items: center; gap: 12px;
}
.stat-tile .icon { width: 28px; height: 28px; color: var(--navy); }
.stat-val { font-size: 22px; font-weight: bold; font-family: var(--mono); line-height: 1; }
.stat-lbl { font-size: 10px; color: #666; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Subject / person header ───────────────────────────────────────────────── */
.subject-head {
  display: flex; align-items: center; gap: 14px; background: #fff; padding: 10px 12px;
  margin-bottom: 10px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
}
.subject-avatar {
  width: 54px; height: 54px; flex: 0 0 auto; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.subject-avatar .icon { width: 30px; height: 30px; color: #fff; }
.subject-name { font-size: 16px; font-weight: bold; color: var(--navy); }
.subject-meta { font-size: 12px; color: #444; margin-top: 3px; }

/* ── Licence cards ─────────────────────────────────────────────────────────── */
.lic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lic-card {
  background: #fff; padding: 10px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
}
.lic-card.headline { border-color: var(--navy); }
.lic-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lic-card-head .icon { width: 20px; height: 20px; color: var(--navy); }
.lic-card-title { font-weight: bold; font-size: 12px; }
.lic-card-state { margin-left: auto; }
.lic-card form { margin-top: 8px; display: flex; gap: 6px; align-items: flex-end; }
.lic-card form select { width: auto; flex: 1 1 auto; }

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.icon { width: 16px; height: 16px; vertical-align: -3px; }
.icon-sm { width: 13px; height: 13px; vertical-align: -2px; }
.icon-lg { width: 22px; height: 22px; }
.icon-red { color: var(--red); }
.icon-green { color: var(--green); }

/* ── Login / boot screens ──────────────────────────────────────────────────── */
.boot-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.boot-window {
  width: 460px;
  background: var(--chrome);
  border: 2px solid; border-color: var(--chrome-lt) var(--chrome-dk) var(--chrome-dk) var(--chrome-lt);
}
.boot-body { padding: 14px; }
.boot-banner {
  background: #0c1420; color: #6bff8a; font-family: var(--mono);
  font-size: 12px; padding: 10px; margin-bottom: 12px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
  overflow-x: auto;
}
.boot-form { display: flex; flex-direction: column; gap: 8px; }
.boot-form input { font-family: var(--mono); }
.boot-foot { font-size: 10px; color: #666; margin-top: 12px; text-align: center; }

/* ── Chooser (both-module landing) ─────────────────────────────────────────── */
.chooser { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.chooser a {
  flex: 1 1 220px; background: #fff; padding: 20px; text-decoration: none; color: var(--ink);
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-lt) var(--chrome-lt) var(--chrome-dk);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.chooser a:hover { border-color: var(--navy); }
.chooser a .icon { width: 40px; height: 40px; color: var(--navy); }
.chooser a strong { font-size: 14px; color: var(--navy); }
.chooser a span { font-size: 11px; color: #666; }