/* ReserveDB — Bundeswehr CD (Digitaler Styleguide v2.1, DESIGN §7a).
   Light theme, Big-Blue text, gold only as minimal accent. No Bundeswehr
   logo/claim: internal tool, not official communication. */

:root {
  --big-blue: #13293d;   /* Blue 1 big-stone — Grundton */
  --blue-2: #2a3e50;     /* pickled-bluewood */
  --blue-3: #425464;     /* fiord */
  --gold: #debb6b;       /* Gold 1 — minimal accents only */
  --gold-2: #f2e4c4;     /* mint-julep */
  --gray-1: #74818e;
  --gray-2: #a1a9b1;
  --gray-3: #b9bfc4;
  --gray-4: #d3d6d9;
  --gray-5: #e7e9eb;
  --gray-6: #f3f4f5;
  --status-red: #aa0000;
  --status-green: #006600;
  --status-yellow: #f9b600;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--big-blue);
  background: #fff;
}

/* --- Header: Big-Blue bar, Bebas brand ------------------------------- */
header.site {
  background: var(--big-blue);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0 1.25rem;
  min-height: 3.25rem;
  flex-wrap: wrap;
}
header.site .brand {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  border-bottom: 3px solid var(--gold);
  line-height: 1.4;
}
header.site nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
header.site a { color: #fff; text-decoration: none; }
header.site a:hover { text-decoration: underline; }
header.site .who {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: .875rem;
  color: var(--gray-3);
}
header.site .who a { color: #fff; }

main { padding: 1.5rem 1.25rem 3rem; max-width: 76rem; margin: 0 auto; }

/* --- Typography ------------------------------------------------------- */
h1, h2, h3 {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--big-blue);
  margin: 0 0 .75rem;
}
h1 { font-size: 2.125rem; line-height: 1.3; margin-top: .5rem; }
/* Gold Begleitungs-Linie: reserved for structuring content (Styleguide S.8) */
h2 {
  font-size: 1.375rem;
  line-height: 1.35;
  margin-top: 2rem;
  padding-left: .625rem;
  border-left: 4px solid var(--gold);
}
.muted { color: var(--gray-1); font-size: .875rem; font-family: 'PT Sans', sans-serif; letter-spacing: 0; }
a { color: var(--blue-2); }
code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .8125rem;
  background: var(--gray-6);
  padding: .125rem .375rem;
  word-break: break-all;
}

/* --- Tables ----------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: auto; font-size: .875rem; }
th, td {
  border: 1px solid var(--gray-4);
  padding: .375rem .625rem;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--gray-6);
  color: var(--big-blue);
  border-bottom: 2px solid var(--blue-3);
  font-weight: 700;
}
tbody tr:nth-child(even) td { background: var(--gray-6); }

/* --- Status colors (Statusfarben S.10; shape + color, S.15) ----------- */
td.ok, td.warn, td.expired, td.missing { text-align: center; min-width: 3.5rem; }
td.ok       { background: #e2ede2; box-shadow: inset 4px 0 0 var(--status-green); }
td.warn     { background: #fdf0d5; box-shadow: inset 4px 0 0 var(--status-yellow); }
td.expired  { background: #f5dcdc; box-shadow: inset 4px 0 0 var(--status-red); }
td.missing  { background: var(--gray-6); color: var(--gray-2); }
tbody tr:nth-child(even) td.ok      { background: #d8e6d8; }
tbody tr:nth-child(even) td.warn    { background: #f9e9c4; }
tbody tr:nth-child(even) td.expired { background: #f0d0d0; }
tbody tr:nth-child(even) td.missing { background: var(--gray-5); }

.legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .75rem; font-size: .8125rem; color: var(--gray-1); }
.legend span::before {
  content: "";
  display: inline-block;
  width: .75rem; height: .75rem;
  margin-right: .375rem;
  vertical-align: -1px;
}
.legend .l-ok::before      { background: #e2ede2; border-left: 4px solid var(--status-green); }
.legend .l-warn::before    { background: #fdf0d5; border-left: 4px solid var(--status-yellow); }
.legend .l-expired::before { background: #f5dcdc; border-left: 4px solid var(--status-red); }
.legend .l-missing::before { background: var(--gray-6); border: 1px solid var(--gray-4); }

/* --- Matrix: sticky header + identity columns ------------------------- */
.matrix-scroll { overflow: auto; max-height: 75vh; border: 1px solid var(--gray-4); scrollbar-width: thin; }
.matrix-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.matrix-scroll::-webkit-scrollbar-track { background: var(--gray-6); }
.matrix-scroll::-webkit-scrollbar-thumb { background: var(--gray-2); }
.matrix-scroll table { border: 0; }
.matrix-scroll thead th { position: sticky; top: 0; z-index: 3; }
.matrix-scroll thead tr.groups th { top: 0; }
.matrix-scroll thead tr.leaves th { top: 2.0rem; }
.matrix-scroll th.id-col, .matrix-scroll td.id-col { position: sticky; z-index: 2; background: #fff; }
.matrix-scroll thead th.id-col { z-index: 4; background: var(--gray-6); }
.matrix-scroll tbody tr:nth-child(even) td.id-col { background: var(--gray-6); }
.col-te { left: 0; min-width: 4.5rem; }
.col-dg { left: 4.5rem; min-width: 4rem; }
.col-nn { left: 8.5rem; min-width: 9rem; }
.te-cell { font-weight: 700; white-space: nowrap; }
tr.sec-start td { border-top: 2px solid var(--blue-3); }
thead tr.groups th { font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: .5px; text-align: center; }

/* --- Forms & buttons -------------------------------------------------- */
input, select, button, textarea { font: inherit; color: inherit; }
input[type=text], input[type=email], input[type=date], select {
  border: 1px solid var(--gray-2);
  padding: .4375rem .625rem;
  background: #fff;
  min-width: 0;
}
input:focus, select:focus, button:focus { outline: 2px solid var(--blue-3); outline-offset: 1px; }
button, .btn {
  background: var(--big-blue);
  color: #fff;
  border: 1px solid var(--big-blue);
  padding: .4375rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--blue-2); }
form.stack { display: grid; gap: .75rem; max-width: 28rem; }
form.stack label { font-weight: 700; font-size: .875rem; display: grid; gap: .25rem; }
form table th { background: none; border: 0; padding-left: 0; }
form table td { border: 0; }

/* --- Cards / auth pages ----------------------------------------------- */
.card {
  border: 1px solid var(--gray-4);
  border-top: 4px solid var(--big-blue);
  padding: 1.5rem;
  background: #fff;
}
.auth-wrap { display: grid; place-items: center; min-height: 60vh; }
.auth-wrap .card { width: 100%; max-width: 26rem; }

/* --- Messages (Statusfarben für Rückmeldungen) ------------------------ */
ul.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.messages li { padding: .625rem .875rem; border: 1px solid var(--gray-4); margin-bottom: .5rem; }
ul.messages li.success { border-left: 4px solid var(--status-green); background: #e2ede2; }
ul.messages li.error   { border-left: 4px solid var(--status-red); background: #f5dcdc; }
ul.messages li.warning { border-left: 4px solid var(--status-yellow); background: #fdf0d5; }

/* --- Org tree --------------------------------------------------------- */
details.org { margin: .25rem 0 .25rem 1rem; border-left: 1px solid var(--gray-4); padding-left: .75rem; }
details.org > summary {
  cursor: pointer;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-size: 1.125rem;
  letter-spacing: .5px;
  padding: .25rem 0;
}
details.org table { margin: .375rem 0 .625rem; }

@media (max-width: 640px) {
  h1 { font-size: 1.6875rem; }
  main { padding: 1rem .75rem 2.5rem; }
  header.site { gap: .75rem; padding: .5rem .75rem; }
  /* Small screens: only the name stays pinned */
  .col-te, .col-dg { position: static !important; }
  .col-nn { left: 0; min-width: 7.5rem; }
}