:root{
  --bg:#0b0d10;
  --panel:#11151a;
  --hover:#151a21;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --border:#232a34;
  --accent:#8b5cf6;
  --accent-600:#7c3aed;
  --green-500:#22c55e;
  --amber-500:#eab308;
  --red-500:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:12px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--text)}

.container{max-width:1300px;margin:0 auto;padding:20px}

.app-header{display:flex;align-items:center;justify-content:space-between;padding-block:16px}
.app-brand{display:flex;align-items:center;gap:10px}
.app-logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-600))}
.app-title{margin:0;font-size:18px;letter-spacing:0.3px}
.toolbar{display:flex;align-items:center;gap:10px}
.divider{width:1px;height:28px;background:var(--border);margin-inline:6px}

.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}
.card.admin{padding:18px}
.card-title{margin:0 0 10px 0;font-weight:600}

.filters .filters-row{display:flex;gap:12px;align-items:center}
.filters .field-inline{display:flex;gap:8px;align-items:center}
.filters .field-inline.right{margin-left:auto}

.table-wrap{padding:0}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{font-size:12px;text-align:left;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--border)}
.table tbody td{padding:12px 14px;border-bottom:1px solid var(--border)}
.table tbody tr:hover{background:var(--hover)}
.table .num{text-align:right}
.table .score, .table .cell-score {text-align: center;}
.table .left{text-align:left}
.cell-strong{font-weight:600}
.row-actions{white-space:nowrap}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);margin-left:8px}
.badge{border-color:var(--badge);color:var(--badge)}
.dot{--s:10px;display:inline-block;width:var(--s);height:var(--s);border-radius:999px;margin-right:6px;background:var(--dot)}

.btn{appearance:none;border:1px solid var(--border);background:#0f1319;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{background:#121821}
.btn.primary{background:var(--accent);border-color:transparent}
.btn.primary:hover{background:var(--accent-600)}
.btn.icon{padding:6px 8px}
.btn.icon.danger:hover{background:#2a1416}

.file-btn{position:relative;overflow:hidden}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}

input[type="text"], input[type="search"], input[type="number"], input#inpOwner, input#inpName, textarea, select{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0f1319;color:var(--text);
}
label{display:grid;gap:6px}
.hint{font-size:12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{border:1px dashed var(--border);border-radius:12px;padding:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .wide{grid-column:1 / -1}

.form-grid input:focus, .form-grid textarea:focus {
  border-color: rgba(139, 92, 246, .45);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
    outline: none;
}

.muted{color:var(--muted)}
.footer{padding-block:20px;text-align:center}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:50}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal-card{position:relative;width:min(720px,92vw);background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.3);overflow:hidden}
.modal-header{padding:14px 16px;border-bottom:1px solid var(--border)}
.modal-title{margin:0}
.modal-body{padding:16px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--border)}

/* Inline-Editing */
.editable{ cursor:text }
.editable:hover{ background:var(--hover) }
.editable.editing{ padding:0 }
.cell-editor{
  width:100%;
  border:1px solid var(--border);
  background:#0f1319;
  color:var(--text);
  padding:6px 8px;
  border-radius:8px;
  outline:none;
}
.cell-editor:focus{ border-color:var(--accent) }

/* Accordion-Details / Notizen */
.hidden{ display:none !important }
.details-row .details-cell{ padding:0; background:var(--hover); border-top:1px solid var(--border) }
.details-wrap{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  padding:14px 16px;
}
.details-col{ flex:1; min-width:0 }
.details-label{ font-size:12px; color:var(--muted); margin-bottom:6px }
.note-view{ white-space:pre-wrap; word-wrap:break-word; color:var(--text) }
.note-edit .note-input{
  width:100%; border:1px solid var(--border); background:#0f1319; color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none; resize:vertical
}
.note-edit .note-input:focus{ border-color:var(--accent) }
.details-actions{ display:flex; gap:8px; align-items:center; padding-left:8px }

/* Small screens */
@media (max-width: 760px){
  .grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .filters .filters-row{flex-wrap:wrap}
}

/* Dropdown als Zellen-Editor */
.cell-editor-select{
  width:100%;
  border:1px solid var(--border);
  background:#0f1319;
  color:var(--text);
  padding:6px 8px;
  border-radius:8px;
  outline:none;
}
.cell-editor-select:focus{ border-color:var(--accent) }

/* Notiz-Zähler */
.note-counter{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  text-align:right;
}
.note-counter.warn{ color:#f59e0b; }   /* amber-500 */
.note-counter.danger{ color:#f43f5e; } /* rose-500 */

/* --- Tabellen-Stabilisierung --- */
.table { table-layout: fixed; }

/* Projektname: 1 Zeile, Ellipsis, bricht sehr lange Tokens notfalls */
.cell-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: anywhere; /* schützt bei extrem langen Wörtern/IDs */
}

/* Schmale, einzeilige Spalten */
.cell-num-sm, .cell-score, .cell-budget, .cell-owner, .cell-date, .actions-col{
  white-space: nowrap;
}

/* Breiten-Tuning (unverbindliche Richtwerte, responsiv okay) */
.cell-budget   { width: 110px; text-align: right; }
.cell-score    { width: 80px;  text-align: right; }
.cell-num-sm   { width: 90px;  text-align: left; } /* Zeit/Budget-Score/Risiko/Qualität */
.cell-owner    { width: 140px; }
.cell-date     { width: 110px; }
.actions-col   { width: 56px; }

/* --- Schlanke Aktionen: nur bei Hover/Fokus zeigen --- */
tbody tr { position: relative; }
.row-actions{
  display: inline-flex; gap: 6px;
  opacity: 0; transform: translateX(6px);
  transition: opacity .15s ease, transform .15s ease;
}

/* sichtbar bei Zeilen-Hover oder Tastaturfokus innerhalb der Zeile */
tbody tr:hover .row-actions,
tbody tr:focus-within .row-actions{
  opacity: 1; transform: translateX(0);
}

/* Platzhalter-Icon-Leiste bleibt schmal */
.row-actions .icon{ padding:4px 6px }


main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Feste Spaltenbreiten via colgroup */
.table { table-layout: fixed; }

/* 1) sehr schmal */
.col-idx     { width: 40px; }

/* 2) Status moderat */
.col-status  { width: 110px; }

/* 3) Projekt soll Platz bekommen (Restbreite) */
.col-project { width: auto; } /* nimmt die übrige Breite */

/* 4–5) Budget/Score schmal rechtsbündig */
.col-budget  { width: 110px; }
.col-score   { width: 90px;  }

/* 6–9) Zeit/Budget-Score/Risiko/Qualität */
.col-attr    { width: 110px; }

/* 10–11) Owner/Datum */
.col-owner   { width: 150px; }
.col-date    { width: 120px; }

/* 12) Aktionen – praktisch 0px */
.col-actions { width: 0px; }

/* Zellen-Feintuning (einzeilig wo sinnvoll) */
.cell-name{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: anywhere;
}
.cell-budget,.cell-score,.cell-num-sm,.cell-owner,.cell-date { white-space: nowrap; }

/* Actions-Spalte kompakt */
.col-actions { width: 44px; }             /* schmale Spalte */
td.actions-col{ padding: 0 6px; }         /* kleine, stabile Innenabstände */

/* Kebab-Container (kein Floating mehr) */
.row-actions{
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Kebab-Button */
.kebab{
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: #0f1319; color: var(--text);
  border-radius: 8px; cursor: pointer;
}
.kebab:hover{ background: #121821 }
.kebab:focus{ outline: 2px solid var(--accent); outline-offset: 2px }

/* Popover-Menü */
.more-menu{
  position: absolute;
  right: 0; top: 100%; margin-top: 6px;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 6px;
  z-index: 10;
}
.more-menu button{
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; gap: 8px; align-items: center;
}
.more-menu button:hover{ background: var(--hover) }
.more-menu button.danger:hover{ background: #2a1416 }

/* Utility */
.hidden{ display:none !important }

/* Container dürfen das Popover NICHT abschneiden */
.card, .table-wrap { overflow: visible !important; }

/* Zeilen in einen Z-Index-Kontext bringen */
tbody tr { position: relative; z-index: 1; }

/* Die Zeile mit geöffnetem Menü steht ganz oben */
tbody tr.menu-open { z-index: 100; }

/* Actions-Spalte: kein Layout-Einfluss */
.col-actions { width: 44px; }
td.actions-col { padding: 0 6px; border: 0; }

/* Kebab + Menü (ohne Floating außerhalb der Zelle) */
.row-actions { position: relative; display: flex; justify-content: flex-end; }
.more-menu{
  position: absolute;
  right: 0; top: 100%; margin-top: 6px;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 6px;
  z-index: 9999;           /* hoch genug über anderen Zeilen */
}
.hidden { display:none !important; }

.snap-chip{ font-size:12px; padding:2px 8px; border:1px solid var(--border); border-radius:999px; margin-left:8px }
.snap-ok{ color:#22c55e }   /* frisch (heute) */
.snap-warn{ color:#eab308 } /* gestern */
.snap-stale{ color:#ef4444 }/* älter */


/* === RTE POPUP REFINEMENTS === */
.rte-header{
  align-items: center;
  gap: 10px;
}
.rte-header .modal-title{
  flex: 1;
  min-width: 0;
}
.rte-header .rte-toolbar{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Unified toolbar button visuals */
.rte-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0f1319;
  line-height: 1;
  font-size: 13px;
  user-select: none;
}
.rte-btn strong, .rte-btn em, .rte-btn u{ font-size: 13px }
.rte-btn:hover{ background:#121821 }
.rte-btn:active{ transform: translateY(1px) }
.rte-btn:focus-visible{ outline: 2px solid rgba(139,92,246,.35); outline-offset: 2px }

/* Editor area sizing & focus */
.rte{
  min-height: 260px;   /* multiline by default */
  max-height: 60vh;
  overflow: auto;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  border-radius: 10px;
  transition: box-shadow .15s ease, border-color .15s ease;
  padding: 0.75rem;
}
.rte:focus{
  border-color: rgba(139,92,246,.45); /* softer */
  box-shadow: 0 0 0 3px rgba(139,92,246,.18); /* subtle glow instead of harsh outline */
  outline: none;
}

/* Make sure table popovers never clip the menu */
.table-wrap{ overflow: visible !important; }

/* Keep kebab menu on top even when row is highlighted */
tbody tr.menu-open{ z-index: 2; }