/* ═══════════════════════════════════════════════════
   matrix.css – Spezifische Styles für Qualifikationsmatrix
═══════════════════════════════════════════════════ */

/* ── Header Ergänzungen ── */
.mhdr { gap: 0.75rem; }
.hdr-save-wrap { flex: 1; display: flex; justify-content: center; }
.save-status {
  font-size: 0.75rem; font-weight: 600; padding: 4px 12px;
  border-radius: 99px; letter-spacing: 0.04em; transition: all 0.3s;
}
.save-ok  { background: var(--green-bg); color: var(--green); border: 1px solid rgba(63,185,80,0.3); }
.save-pend{ background: var(--ylw-bg);   color: var(--yellow); border: 1px solid rgba(210,153,34,0.3); }

/* ── Toolbar ── */
.m-toolbar {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--bg2); border-bottom: 1px solid var(--bdr);
}
.tb-group { display: flex; flex-direction: column; gap: 4px; }
.tb-right { margin-left: auto; }
.tb-input, .tb-select {
  background: var(--bg3); border: 1px solid var(--bdr2);
  border-radius: var(--r-sm); color: var(--txt);
  padding: 7px 10px; font-size: 0.82rem; font-family: var(--font);
  outline: none; transition: border-color 0.2s;
  min-width: 150px;
}
.tb-input:focus, .tb-select:focus { border-color: var(--acc); }
.tb-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; padding-right: 26px;
}
.tb-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-warn   { color: var(--yellow) !important; border-color: rgba(210,153,34,0.4) !important; }
.btn-warn:hover { background: var(--ylw-bg) !important; }

/* ── Legende ── */
.m-legend {
  padding: 6px 1.25rem;
  background: var(--bg3); border-bottom: 1px solid var(--bdr);
  font-size: 0.72rem; color: var(--txt2);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.leg-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px;
}
.sec-linie   { background: #1d4ed844; border: 1px solid #1d4ed866; } /* Linie         → Blau   */
.sec-linv    { background: #16a34a44; border: 1px solid #16a34a66; } /* Verlängerung  → Grün   */
.sec-linr    { background: #b4530444; border: 1px solid #b4530466; } /* Rückstrecke   → Orange */
.sec-lhg     { background: #7c3aed44; border: 1px solid #7c3aed66; } /* Lager HG      → Lila   */
.sec-leg     { background: #0891b244; border: 1px solid #0891b266; } /* Lager EG      → Cyan   */
.sec-keller  { background: #64748b44; border: 1px solid #64748b66; } /* Keller        → Grau   */

/* ── Matrix-Wrap ── */
.matrix-wrap {
  overflow: auto;
  max-height: calc(100vh - 220px);
  -webkit-overflow-scrolling: touch;
}

/* ── Matrix-Tabelle ── */
.matrix-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 0.78rem;
  table-layout: fixed;
}

/* Sticky corner: MA-ID + Modell */
.matrix-table thead th.th-ma,
.matrix-table thead th.th-model,
.matrix-table tbody td.td-ma,
.matrix-table tbody td.td-model {
  position: sticky;
  background: var(--bg2);
  z-index: 10;
}
.matrix-table thead th.th-ma,
.matrix-table tbody td.td-ma   { left: 0;    width: 90px; min-width: 90px; }
.matrix-table thead th.th-model,
.matrix-table tbody td.td-model { left: 90px; width: 76px; min-width: 76px; }

/* ── Name Toggle Adjustments ── */
.show-names .matrix-table thead th.th-ma,
.show-names .matrix-table tbody td.td-ma   { width: 240px; min-width: 240px; }
.show-names .matrix-table thead th.th-model,
.show-names .matrix-table tbody td.td-model { left: 240px; }

/* Sticky header rows */
.matrix-table thead th { position: sticky; z-index: 20; }
.matrix-table thead tr.tr-sec th { top: 0; z-index: 21; }
.matrix-table thead tr.tr-ap th  { top: 25px; }

/* Section-Gruppen-Header */
.th-sec {
  background: var(--bg3); color: var(--txt2);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 4px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--bdr);
}
/* Section colours */
.sec-hd-linie   { background: linear-gradient(rgba(29,78,216,0.2), rgba(29,78,216,0.2)), var(--bg2) !important;   color: #60a5fa !important; } /* Linie        */
.sec-hd-linv    { background: linear-gradient(rgba(22,163,74,0.2), rgba(22,163,74,0.2)), var(--bg2) !important;   color: #4ade80 !important; } /* Verlängerung */
.sec-hd-linr    { background: linear-gradient(rgba(180,83,4,0.2), rgba(180,83,4,0.2)), var(--bg2) !important;    color: #fb923c !important; } /* Rückstrecke  */
.sec-hd-lhg     { background: linear-gradient(rgba(124,58,237,0.2), rgba(124,58,237,0.2)), var(--bg2) !important;  color: #a78bfa !important; } /* Lager HG     */
.sec-hd-leg     { background: linear-gradient(rgba(8,145,178,0.2), rgba(8,145,178,0.2)), var(--bg2) !important;   color: #22d3ee !important; } /* Lager EG     */
.sec-hd-keller  { background: linear-gradient(rgba(100,116,139,0.2), rgba(100,116,139,0.2)), var(--bg2) !important; color: #94a3b8 !important; } /* Keller       */

/* AP-ID header */
.th-ap {
  background: var(--bg3); color: var(--txt3);
  font-size: 0.62rem; font-family: var(--font); font-weight: 600;
  padding: 8px 4px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--bdr);
  width: 32px; min-width: 32px; max-width: 32px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 180px; vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* MA-ID row cells */
.td-ma { 
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--acc); padding: 0 6px; white-space: nowrap; 
  display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 100%;
}
.ma-name { 
  display: none; font-family: var(--font); color: var(--txt); font-size: 0.7rem; font-weight: 400; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 4px; 
}
.show-names .ma-name { display: inline-block; }

.btn-del-ma {
  background: transparent; border: none; color: var(--red); cursor: pointer; padding: 2px;
  font-size: 0.7rem; border-radius: 3px; opacity: 0.5; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.btn-del-ma:hover { opacity: 1; background: rgba(248,81,73,0.15); }
.td-model { padding: 0 4px; }
.td-rtog  { text-align: center; }

/* AP checkboxes */
.td-ap { text-align: center; padding: 3px 2px; width: 32px; min-width: 32px; }
.td-ap input[type="checkbox"] {
  width: 14px; height: 14px; cursor: pointer;
  accent-color: var(--acc);
  transition: transform 0.1s;
}
.td-ap input[type="checkbox"]:hover { transform: scale(1.2); }

/* Row toggle checkbox */
.row-toggle { width: 13px; height: 13px; cursor: pointer; accent-color: var(--green); }

/* Section color-tinting on cells */
.ap-sec-linie   { background: rgba(29,78,216,0.04); }
.ap-sec-linv    { background: rgba(22,163,74,0.04); }
.ap-sec-linr    { background: rgba(180,83,4,0.04); }
.ap-sec-lhg     { background: rgba(124,58,237,0.04); }
.ap-sec-leg     { background: rgba(8,145,178,0.04); }
.ap-sec-keller  { background: rgba(100,116,139,0.04); }

/* Checked cells highlighted */
.td-ap.is-checked           { background: rgba(47,129,247,0.12); }
.ap-sec-linie.is-checked    { background: rgba(29,78,216,0.22); }
.ap-sec-linv.is-checked     { background: rgba(22,163,74,0.22); }
.ap-sec-linr.is-checked     { background: rgba(180,83,4,0.22); }
.ap-sec-lhg.is-checked      { background: rgba(124,58,237,0.22); }
.ap-sec-leg.is-checked      { background: rgba(8,145,178,0.22); }
.ap-sec-keller.is-checked   { background: rgba(100,116,139,0.22); }

/* Body rows */
.matrix-table tbody tr { border-bottom: 1px solid rgba(48,54,61,0.4); }
.matrix-table tbody tr:hover td { background: rgba(33,38,45,0.55) !important; }
.matrix-table tbody tr.hidden-row { display: none; }
.matrix-table tbody tr td { padding-top: 5px; padding-bottom: 5px; }

/* Sticky left cells for body rows need right border */
.td-ma, .td-model, .td-rtog { border-right: 1px solid var(--bdr); }

/* ── Footer Counter ── */
.m-footer {
  padding: 8px 1.25rem;
  background: var(--bg2); border-top: 1px solid var(--bdr);
  font-size: 0.75rem; color: var(--txt2);
  display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.m-counter { display: flex; gap: 4px; align-items: center; }
.m-counter strong { color: var(--acc); font-family: var(--mono); }

/* ── Radar Charts ── */
.radar-section {
  margin: 2rem 1.5rem;
  padding: 1.5rem;
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.radar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bdr);
}
.radar-header h2 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--txt);
  font-weight: 500;
}
.radar-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.radar-card {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.radar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  border-color: var(--bdr2);
}
.radar-card h3 {
  margin: 0 0 10px 0;
  font-size: 0.9rem;
  color: var(--txt);
  text-align: center;
}
.radar-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
  flex-grow: 1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .m-toolbar  { padding: 0.5rem 0.75rem; gap: 0.6rem; }
  .tb-input, .tb-select { min-width: 120px; font-size: 0.78rem; }
  .matrix-wrap { max-height: calc(100vh - 250px); }
  .hdr-save-wrap { display: none; }
}