/* LanguageFlow Prototyp — Milengo-Design (milengo.com): Navy #003B5A, Orange #FA6F2C */

*{box-sizing:border-box;}
body{
  margin:0;background:#f5f5f5;color:#131d2a;
  font-family:Inter,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}

.app{display:flex;background:#f5f5f5;color:#131d2a;text-align:left;min-height:100vh;min-width:1440px;}

/* ── Sidebar ── */
/* Sticky, not scrolling away: the menu is how you leave a long page, so it has to be reachable from
   the bottom of one. `align-self:flex-start` is what makes it work — a flex item stretches to the
   container's height by default, and a sticky box as tall as its container never moves. */
/* The z-index is load-bearing, not decoration. `position:sticky` makes this a stacking context of
   its own, so the `z-index:900` on the "What's new" panel inside only orders things WITHIN the
   sidebar. Against `.main` the sidebar competed on document order alone — and `.main` comes later,
   so every `position:relative` tile in it (the stepper, for one) painted straight over the open
   panel. Anything the layout puts above the page — dialogs (1000/1001), the loading overlay (1100),
   the tour (1199–1201), the view-as bar (1300) — stays above this. */
.sidebar{
  width:230px;flex:none;background:#003b5a;color:#fff;
  display:flex;flex-direction:column;padding:22px 14px 18px;
  position:sticky;top:0;align-self:flex-start;height:100vh;z-index:100;
}
/* Only the long upper list scrolls. `overflow` on the sidebar itself clipped the "What's new" panel,
   which is positioned outside it — and the bottom group has to stay reachable on a short window,
   which is the whole reason the sidebar was pinned. */
.sidebar > nav.nav:first-of-type{overflow-y:auto;min-height:0;}
/* The clear space around the logo is the brand's, not a round number: twice the thickness of the
   ribbon in the symbol, all four sides (Brand Book p. 7–8). At this width the ribbon is ~9px, so
   18px is the floor — the sidebar's own 14px plus these 10px clear it on the sides, the sidebar's
   22px clears it on top, and the 18px below is what separates it from the rule. */
.logo{padding:0 10px 18px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:14px;}
.logo-img{width:100%;max-width:152px;height:auto;display:block;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav a{
  display:flex;align-items:center;gap:11px;color:#c8dae6;text-decoration:none;
  font-size:13.5px;font-weight:500;padding:9px 10px;border-radius:2px;
}
.nav a svg{flex:none;opacity:.85;}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav a.on{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 3px 0 0 #fa6f2c;}
.nav .count{margin-left:auto;background:rgba(255,255,255,.14);border-radius:99px;font-size:11px;font-weight:600;padding:2px 7px;}
.nav a.subitem{padding:6px 10px 6px 38px;font-size:12.5px;color:#a0afbe;}
/* An area that does not exist yet. Same row, same place — dimmed and inert, so the menu stops promising
   a page it would only apologise for. */
.nav .off{
  display:flex;align-items:center;gap:11px;color:#7d95a8;
  font-size:13.5px;font-weight:500;padding:9px 10px;border-radius:2px;cursor:default;user-select:none;
}
.nav .off svg{flex:none;opacity:.45;}
.nav .off.subitem{padding:6px 10px 6px 38px;font-size:12.5px;color:#7d95a8;}
.nav a.subitem.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 3px 0 0 #fa6f2c;}
.sidebar .spacer{flex:1;}
.userbox{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  border-top:1px solid rgba(255,255,255,.14);padding:14px 10px 0;
}
.avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:#fa6f2c;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;
}
.userbox .n{font-size:13px;font-weight:600;color:#fff;}
.userbox .r{font-size:11.5px;color:#a0afbe;}

/* ── Hauptbereich ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid #e1ebf1;
  padding:14px 28px;
}
.topbar .tt{margin-right:auto;}
.topbar h2{font-family:Ubuntu,Inter,sans-serif;font-size:19px;font-weight:700;margin:0;letter-spacing:-.01em;}
.topbar .date{font-size:12.5px;color:#406982;margin-top:1px;}
.search{
  display:flex;align-items:center;gap:9px;background:#eff4f8;border:1px solid #e1ebf1;
  border-radius:2px;padding:9px 13px;width:280px;color:#7d95a8;font-size:13px;cursor:pointer;
}
.iconbtn{
  position:relative;width:38px;height:38px;border-radius:2px;border:1px solid #e1ebf1;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#406982;cursor:pointer;
}
.iconbtn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:#fa6f2c;border:1.5px solid #fff;}
.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:2px;font-size:13.5px;font-weight:600;
  padding:10px 16px;border:1px solid transparent;cursor:pointer;text-decoration:none;
}
.btn.primary{background:#fa6f2c;color:#fff;}
.btn.ghost{background:#fff;color:#003b5a;border-color:#c8dae6;}
/* Stopping the project: a button like the others, but the only grey one on the page — it should be
   findable without ever being the thing the eye goes to first. The danger colour belongs in the dialog,
   where the decision is actually made. */
.btn.tb-cancel{background:#fff;color:#7d95a8;border-color:#e1ebf1;font-weight:600;}
.btn.tb-cancel:hover{color:#b23b3b;border-color:#e8c6c6;background:#fffafa;}

.crumb{font-size:12.5px;color:#7d95a8;}
.crumb b{color:#131d2a;font-weight:600;}
.crumb a{color:inherit;text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

.subtabs{display:flex;gap:2px;background:#fff;border-bottom:1px solid #e1ebf1;padding:0 28px;}
.subtabs a{font-size:12.5px;font-weight:600;color:#406982;padding:10px 12px;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;}
.subtabs a:hover{color:#003b5a;}
.subtabs a.on{color:#003b5a;border-bottom-color:#fa6f2c;}
.subtabs .off{font-size:12.5px;font-weight:600;color:#a0afbe;padding:10px 12px;white-space:nowrap;
  border-bottom:2px solid transparent;cursor:default;user-select:none;}

.content{padding:22px 28px 30px;display:flex;flex-direction:column;gap:18px;}

/* ── KPI-Karten ── */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.kpi{background:#fff;border:1px solid #e1ebf1;border-radius:2px;padding:16px 18px;}
.kpi .lab{font-size:12px;font-weight:600;color:#406982;letter-spacing:.02em;}
.kpi .val{font-family:Ubuntu,Inter,sans-serif;font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi .sub{font-size:12px;margin-top:5px;color:#7d95a8;}
.kpi .sub b{font-weight:600;}
.up{color:#1b8a5a;} .down{color:#c7361f;} .warn-t{color:#a86a0c;}

.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;}
.card{background:#fff;border:1px solid #e1ebf1;border-radius:2px;}
.card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid #eff4f8;}
.card-h h3{font-family:Ubuntu,Inter,sans-serif;font-size:14.5px;font-weight:700;margin:0;margin-right:auto;letter-spacing:-.005em;}
.card-h .link{font-size:12.5px;font-weight:600;color:#003b5a;text-decoration:none;cursor:pointer;}
.filterchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#406982;background:#eff4f8;border:1px solid #e1ebf1;border-radius:99px;padding:5px 11px;cursor:pointer;}
.filterchip.on{background:#003b5a;border-color:#003b5a;color:#fff;}

/* ── Projekttabelle ── */
table.projects{width:100%;border-collapse:collapse;font-size:13px;}
.projects th{
  text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#7d95a8;padding:10px 14px;border-bottom:1px solid #eff4f8;white-space:nowrap;
}
.projects td{padding:13px 14px;border-bottom:1px solid #eff4f8;vertical-align:middle;}
.projects tr:last-child td{border-bottom:0;}
.projects td:first-child,.projects th:first-child{padding-left:18px;}
.projects td:last-child,.projects th:last-child{padding-right:18px;}
.projects tbody tr[data-href]{cursor:pointer;}
.projects tbody tr[data-href]:hover td{background:#f7fafc;}
.pid{font-size:11.5px;font-weight:600;color:#7d95a8;font-variant-numeric:tabular-nums;}
.pname{font-weight:600;margin:1px 0;}
.pclient{font-size:12px;color:#406982;}
.langs{display:inline-flex;align-items:center;gap:5px;background:#eff4f8;color:#003b5a;border-radius:99px;
  font-size:11.5px;font-weight:600;padding:4px 9px;white-space:nowrap;}

.pipe{display:flex;gap:3px;}
.pipe i{width:17px;height:6px;border-radius:3px;background:#e1ebf1;}
.pipe i.done{background:#003b5a;}
.pipe i.act{background:#fa6f2c;}
.pipe i.late{background:#c7361f;}
.pipe-lab{font-size:11.5px;color:#406982;margin-top:6px;white-space:nowrap;}
.pipe-lab b{color:#131d2a;font-weight:600;}

.stime{white-space:nowrap;font-variant-numeric:tabular-nums;}
.stime .t{font-weight:600;font-size:12.5px;}
.stime .p{font-size:11.5px;color:#7d95a8;}
.mbar{width:84px;height:5px;border-radius:3px;background:#e1ebf1;margin-top:6px;overflow:hidden;}
.mbar i{display:block;height:100%;border-radius:3px;background:#fa6f2c;}
.mbar i.over{background:#c7361f;}

.dl{white-space:nowrap;font-variant-numeric:tabular-nums;}
.dl .d{font-weight:600;font-size:12.5px;}
.dl .r{font-size:11.5px;color:#7d95a8;}
.dl .r.hot{color:#c7361f;font-weight:600;}

.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;font-size:11.5px;font-weight:600;padding:4px 10px;white-space:nowrap;}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.ok{background:#e5f4ec;color:#166b46;}
.pill.risk{background:#fdf1dc;color:#a86a0c;}
.pill.crit{background:#fbe9e5;color:#b02f1a;}
.pill.new{background:#eff4f8;color:#235570;}

/* ── Rechte Spalte ── */
.duelist{display:flex;flex-direction:column;}
.due{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid #eff4f8;align-items:flex-start;}
.due:last-child{border-bottom:0;}
.due .tm{flex:none;font-size:12px;font-weight:700;color:#003b5a;font-variant-numeric:tabular-nums;
  background:#eff4f8;border-radius:2px;padding:5px 8px;}
.due .tm.hot{color:#b02f1a;background:#fbe9e5;}
.due .w{font-size:13px;font-weight:600;line-height:1.35;}
.due .m{font-size:12px;color:#406982;margin-top:2px;}

.hbars{padding:8px 18px 16px;display:flex;flex-direction:column;gap:11px;}
.hb{display:grid;grid-template-columns:92px 1fr 44px;align-items:center;gap:10px;font-size:12px;}
.hb .l{color:#406982;font-weight:500;white-space:nowrap;}
.hb .track{height:10px;border-radius:2px;background:#eff4f8;overflow:hidden;}
.hb .track i{display:block;height:100%;border-radius:2px 3px 3px 2px;background:#003b5a;}
.hb .v{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:#131d2a;}
.chart-note{padding:0 18px 14px;font-size:11.5px;color:#7d95a8;}

/* ── Projektdetail ── */
.phead{background:#fff;border:1px solid #e1ebf1;border-radius:2px;padding:18px 20px;}
.phead-top{display:flex;align-items:flex-start;gap:14px;}
.phead h3{font-family:Ubuntu,Inter,sans-serif;font-size:19px;font-weight:700;margin:0 0 3px;letter-spacing:-.01em;}
.phead .cl{font-size:13px;color:#406982;}
.phead .grow{flex:1;}
.meta{display:flex;gap:22px;margin-top:15px;padding-top:14px;border-top:1px solid #eff4f8;flex-wrap:wrap;}
.meta .m{font-size:12px;color:#7d95a8;}
.meta .m b{display:block;font-size:13px;color:#131d2a;font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums;}

.stepper{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}
.step{background:#fff;border:1px solid #e1ebf1;border-radius:2px;padding:12px 12px 11px;position:relative;}
.step .num{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#7d95a8;text-transform:uppercase;}
.step .nm{font-size:12.5px;font-weight:700;margin:4px 0 6px;line-height:1.25;}
.step .who{font-size:11px;color:#406982;}
.step .hrs{font-size:11px;color:#7d95a8;margin-top:6px;font-variant-numeric:tabular-nums;}
.step .hrs b{color:#131d2a;font-weight:600;}
.step .st{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;margin-top:8px;}
/* The border is ONE channel and it means "this is the tile you are on" (.step.sel below).
   done / running / overdue are already spelled out in the tile's own status line, so they colour
   that line and nothing else — four competing border colours in one row read as noise. */
.step.done .st{color:#166b46;}
.step.act .st{color:#b34a12;}
.step.late .st{color:#b02f1a;}
.step.todo{background:#f7fafc;}
.step.todo .nm{color:#406982;}
.step.todo .st{color:#7d95a8;}
.step .st svg{flex:none;}
.step[data-href]{cursor:pointer;}
.step[data-href]:hover{border-color:#a0afbe;box-shadow:0 6px 16px -10px rgba(9,25,40,.3);}
.step.sel,.step.sel[data-href]:hover{border-color:#003b5a;box-shadow:0 0 0 3px rgba(0,59,90,.14);}
/* The ratio is a secondary metric and sits far right. nowrap keeps it in one piece; the status line
   may wrap around it in a narrow column instead of breaking it. */
.step .tasks-hint{margin-left:auto;font-weight:600;color:#7d95a8;font-variant-numeric:tabular-nums;white-space:nowrap;}
.step .st{display:flex;flex-wrap:wrap;row-gap:4px;}

.chk{display:flex;gap:11px;align-items:flex-start;padding:11px 18px;border-bottom:1px solid #eff4f8;font-size:13px;}
.chk:last-child{border-bottom:0;}
.chk .lbl{line-height:1.45;padding-top:3px;}
.chk.done .lbl{color:#7d95a8;text-decoration:line-through;}
.chk-remove{
  border:0;background:transparent;color:#a0afbe;font-size:16px;line-height:1;cursor:pointer;
  padding:2px 6px;border-radius:2px;
}
.chk-remove:hover{background:#fbe9e5;color:#b02f1a;}

.tt-rows{padding:6px 18px 8px;}
.ttr{display:grid;grid-template-columns:170px 1fr 150px;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid #eff4f8;}
.ttr:last-child{border-bottom:0;}
.ttr .nm{font-size:13px;font-weight:600;}
.ttr .nm span{display:block;font-size:11.5px;font-weight:500;color:#7d95a8;margin-top:2px;}
.bars2{display:flex;flex-direction:column;gap:5px;}
.b2{display:flex;align-items:center;gap:8px;}
.b2 .track{flex:1;height:9px;border-radius:2px;background:#eff4f8;overflow:hidden;}
.b2 .track i{display:block;height:100%;border-radius:2px 3px 3px 2px;}
.b2.plan .track i{background:#003b5a;}
.b2.ist .track i{background:#fa6f2c;}
.b2.ist .track i.over{background:#c7361f;}
.b2 .tag{flex:none;width:30px;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:#7d95a8;text-transform:uppercase;}
.b2 .hv{flex:none;width:44px;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}
.ttr .dev{font-size:12px;font-variant-numeric:tabular-nums;text-align:right;}
.ttr .dev b{font-weight:600;}
.legend{display:flex;gap:16px;align-items:center;font-size:12px;color:#406982;}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;}
.legend .pl i{background:#003b5a;}
.legend .is i{background:#fa6f2c;}
.sumline{display:flex;justify-content:flex-end;gap:26px;padding:12px 18px;border-top:1px solid #eff4f8;
  font-size:12.5px;color:#406982;font-variant-numeric:tabular-nums;}
.sumline b{color:#131d2a;font-weight:700;}

.langrow{padding:13px 18px;border-bottom:1px solid #eff4f8;}
.langrow:last-child{border-bottom:0;}
.langrow .top{display:flex;align-items:baseline;gap:8px;}
.langrow .lp{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;}
.langrow .lg{font-size:12px;color:#406982;margin-right:auto;}
.langrow .pc{font-size:12.5px;font-weight:700;color:#003b5a;font-variant-numeric:tabular-nums;}
.langrow .track{height:7px;border-radius:2px;background:#eff4f8;margin-top:8px;overflow:hidden;}
.langrow .track i{display:block;height:100%;border-radius:2px;background:#003b5a;}

.logrow{display:flex;gap:11px;padding:12px 18px;border-bottom:1px solid #eff4f8;font-size:12.5px;}
.logrow:last-child{border-bottom:0;}
.logrow .t{flex:none;width:58px;color:#7d95a8;font-variant-numeric:tabular-nums;font-size:11.5px;padding-top:1px;}
.logrow .x{line-height:1.4;color:#235570;}
.logrow .x b{color:#131d2a;font-weight:600;}

.det-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;}
.det-cols.solo{grid-template-columns:minmax(0,1fr);}
.rstack{display:flex;flex-direction:column;gap:18px;}

/* ── WAT ── */
.projects tr.wgroup td{
  background:#eff4f8;font-size:11px;font-weight:700;color:#003b5a;
  letter-spacing:.06em;text-transform:uppercase;padding:9px 18px;
  border-bottom:1px solid #e1ebf1;border-top:1px solid #e1ebf1;
}
.projects tr.wgroup td .gsub{font-weight:500;text-transform:none;letter-spacing:0;color:#406982;margin-left:10px;}
.vend{display:flex;align-items:center;gap:10px;}
.vend .av{width:30px;height:30px;border-radius:50%;background:#eff4f8;color:#003b5a;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.vend .nm{font-weight:600;font-size:12.5px;}
.vend .id{font-size:11px;color:#7d95a8;margin-top:1px;}
.subt{font-size:11px;color:#7d95a8;margin-top:4px;white-space:nowrap;}
.subt.hot{color:#a86a0c;font-weight:600;}
.num{font-variant-numeric:tabular-nums;white-space:nowrap;}
.num .u{font-size:11px;color:#7d95a8;}

/* ── Platzhalter ── */
.ph-card{max-width:560px;margin:70px auto;padding:44px 40px;text-align:center;}
.ph-card svg{color:#7d95a8;margin-bottom:14px;}
.ph-card h3{font-family:Ubuntu,Inter,sans-serif;font-size:18px;margin:0 0 8px;}
.ph-card p{font-size:13.5px;color:#406982;line-height:1.55;margin:0 0 22px;}

/* ── Formulare ── */
form.button_to{display:inline;margin:0;}
.inline-form{display:flex;align-items:center;gap:8px;}
.pform{display:block;}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;}
.fgrid.one{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#406982;}
.field.span2{grid-column:span 2;}
.field.check{flex-direction:row;align-items:center;gap:9px;padding-top:20px;font-size:13px;color:#131d2a;}
.input{
  font:400 13.5px/1.4 Inter,sans-serif;color:#131d2a;background:#fff;
  border:1px solid #c8dae6;border-radius:2px;padding:9px 11px;width:100%;
}
.input:focus{outline:2px solid rgba(250,111,44,.45);outline-offset:1px;border-color:#fa6f2c;}
.input.slim{width:auto;padding:7px 9px;font-size:12.5px;}
select.input{appearance:auto;}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.form-errors{
  background:#fbe9e5;color:#b02f1a;border-radius:2px;padding:10px 14px;
  font-size:12.5px;font-weight:600;margin-bottom:16px;
}
.btn.small{padding:6px 10px;font-size:11.5px;border-radius:2px;}
.step-actions{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap;}
.row-actions{display:flex;gap:5px;}
.bookform{
  display:flex;gap:8px;align-items:center;padding:12px 18px;
  border-top:1px solid #eff4f8;background:#f7fafc;border-radius:0 0 2px 2px;
}
.bookform.standalone{border-top:0;background:#fff;border-radius:2px;}
.bookform-label{font-size:12px;font-weight:600;color:#406982;white-space:nowrap;}
.todo-check{
  width:24px;height:24px;border-radius:2px;border:1.5px solid #c8dae6;background:#fff;color:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;margin-top:2px;padding:0;
}
.todo-check.checked{background:#1b8a5a;border-color:#1b8a5a;color:#fff;}
.due.done .w{text-decoration:line-through;color:#7d95a8;}
.due.done .m{color:#a0afbe;}

/* ── Workflow designer ── */
.tpl-step{position:relative;padding:16px 18px;display:flex;gap:14px;align-items:flex-start;}
.tpl-step .pform{flex:1;}
.tpl-step .tpl-form{flex:1;min-width:0;}
.tpl-grid{display:grid;grid-template-columns:34px 2fr 1fr 1fr;gap:12px 16px;align-items:end;}
.tpl-grid .tpl-check{grid-column:2 / 5;}
.tpl-pos{
  width:30px;height:30px;border-radius:50%;background:#eff4f8;color:#003b5a;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  align-self:start;margin-top:18px;
}
.tpl-actions{grid-column:2 / 5;display:flex;gap:8px;}
.tpl-side{display:flex;flex-direction:column;gap:6px;flex:none;padding-top:18px;}
textarea.input{resize:vertical;line-height:1.5;}


/* ── Subtask catalog & picker ── */
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:4px;background:#eff4f8;border:1px solid #e1ebf1;border-radius:2px;padding:5px 6px 5px 10px;font-size:12px;font-weight:500;color:#235570;}
.chip form.button_to{display:inline;}
.chip-x{border:0;background:transparent;color:#a0afbe;font-weight:700;font-size:13px;cursor:pointer;padding:0 4px;border-radius:2px;}
.chip-x:hover{background:#fbe9e5;color:#b02f1a;}
.chip.addchip{background:#fff;border-style:dashed;border-color:#c8dae6;color:#003b5a;font-weight:600;text-decoration:none;padding:6px 10px;}
.catalog{border:1px solid #e1ebf1;border-radius:2px;background:#f7fafc;overflow:hidden;max-height:420px;overflow-y:auto;}
.cat-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7d95a8;padding:10px 12px 3px;}
.cat-item{display:flex;align-items:center;gap:9px;padding:6px 12px;border-bottom:1px solid #eff4f8;font-size:12.5px;color:#235570;}
.cat-item:last-child{border-bottom:0;}
.cat-item .add{margin-left:auto;}
.cat-item.in{opacity:.5;}
.picker{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid #eff4f8;}
.picker-col-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7d95a8;margin-bottom:8px;}
.tpl-step.tpl-sel{border-color:#a0afbe;box-shadow:0 0 0 3px rgba(0,59,90,.10);}
.hint-callout{background:#eff4f8;border:1px solid #e1ebf1;border-radius:2px;padding:12px 16px;font-size:12.5px;color:#003b5a;line-height:1.5;}
.hint-callout .link{color:#003b5a;font-weight:600;}

/* ── Client typeahead ── */
.typeahead{
  position:absolute;top:58px;left:18px;width:440px;z-index:20;
  background:#fff;border:1px solid #c8dae6;border-radius:2px;overflow:hidden;
  box-shadow:0 14px 34px -14px rgba(9,25,40,.35);
}
.ta-row{
  display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;cursor:pointer;
  border-bottom:1px solid #eff4f8;
}
.ta-row:last-child{border-bottom:0;}
.ta-row:hover{background:#eff4f8;}
.ta-row b{font-weight:600;}
.ta-meta{color:#406982;font-size:12px;}
.ta-go{margin-left:auto;font-size:11px;color:#003b5a;font-weight:600;}


/* ── Gantt designer ── */
.gantt{padding:16px 18px 14px;}
.g-axis{display:grid;grid-template-columns:200px 1fr;gap:12px;margin-bottom:6px;}
.g-axis .ticks{position:relative;height:16px;font-size:10.5px;color:#7d95a8;font-weight:600;}
.g-axis .ticks span{position:absolute;transform:translateX(-50%);}
.g-row{display:grid;grid-template-columns:200px 1fr;gap:12px;align-items:center;padding:3px 0;}
.g-label{font-size:12px;font-weight:600;color:#235570;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.g-label .par-tag{color:#b34a12;font-weight:700;font-size:10px;margin-left:5px;}
.g-track{position:relative;height:22px;background:#eff4f8;border-radius:2px;}
.g-bar{position:absolute;top:2px;height:18px;border-radius:2px;background:#003b5a;color:#fff;
  font-size:10px;font-weight:600;display:flex;align-items:center;padding:0 7px;white-space:nowrap;
  overflow:hidden;cursor:grab;user-select:none;min-width:10px;}
.g-bar.par{background:#fa6f2c;}
.g-bar.dragging{opacity:.85;box-shadow:0 6px 16px -6px rgba(9,25,40,.5);cursor:grabbing;z-index:5;}
.g-handle{position:absolute;top:2px;width:7px;height:18px;border-radius:3px;background:rgba(255,255,255,.55);cursor:ew-resize;right:1px;z-index:2;}
.g-sel .g-bar{outline:2px solid #003b5a;outline-offset:1px;}


.g-rows{position:relative;}
.g-arrows{position:absolute;left:212px;right:0;top:0;bottom:0;pointer-events:none;z-index:2;}
.ga-v{position:absolute;border-left:2px dashed #a0afbe;}
.ga-h{position:absolute;border-top:2px dashed #a0afbe;}
.ga-tip{position:absolute;width:0;height:0;border:4px solid transparent;border-left:6px solid #7d95a8;transform:translateY(0);} 
.g-bar.plan{background:#e1ebf1;color:#406982;}
.g-bar.done{background:#166b46;}
.g-bar.act{background:#fa6f2c;}
.g-today{position:absolute;top:-4px;bottom:-4px;border-left:2px dashed #fa6f2c;z-index:3;pointer-events:none;}
.g-today::after{content:"today";position:absolute;top:-12px;left:-14px;font-size:9.5px;font-weight:700;color:#b34a12;}
.g-buffer{background:repeating-linear-gradient(45deg,#e5f4ec,#e5f4ec 6px,#d3ecdc 6px,#d3ecdc 12px)!important;color:#166b46!important;}
.legend-chips{display:flex;gap:12px;font-size:11px;color:#406982;align-items:center;flex-wrap:wrap;}
.legend-chips i{display:inline-block;width:12px;height:8px;border-radius:3px;margin-right:5px;}

/* The one project-level action that lives beside the tabs, deliberately the quietest thing there. */
.subtabs .subtab-act{margin-left:auto;border:none;background:none;color:#a0afbe;font-size:12.5px;
  font-weight:600;cursor:pointer;padding:10px 0;text-decoration:none;display:inline-flex;align-items:center;}
.subtabs .subtab-act:hover{color:#b23b3b;}
.subtabs .subtab-actf{margin:0 0 0 auto;display:inline-flex;}
.subtabs .subtab-actf .subtab-act{margin-left:0;}

/* Per-step band weighting: eight narrow factor fields next to the step they belong to. */
.mxwrap{overflow-x:auto;max-width:100%;padding-bottom:2px;}
.mi{width:44px;font:inherit;font-size:12px;height:26px;padding:2px 4px;border:1px solid #e1ebf1;
  border-radius:2px;text-align:center;font-variant-numeric:tabular-nums;color:#131d2a;background:#fff;}
.mi::placeholder{color:#c8dae6;}
.mro{display:inline-block;min-width:38px;color:#a0afbe;font-size:12px;font-variant-numeric:tabular-nums;}
table.mxt [hidden]{display:none;}
table.mxt{border-collapse:collapse;font-size:12px;margin-top:2px;min-width:520px;}
table.mxt th{font-size:10px;font-weight:650;letter-spacing:.03em;text-transform:uppercase;color:#a0afbe;
  text-align:left;padding:0 6px 4px 0;border-bottom:1px solid #eff4f8;white-space:nowrap;}
table.mxt th.c,table.mxt td.c{text-align:center;width:46px;padding-right:0;}
table.mxt td:first-child{white-space:nowrap;padding-right:10px;}
table.mxt td{padding:6px 6px 6px 0;border-bottom:1px solid #eff4f8;vertical-align:middle;}
table.mxt tr:last-child td{border-bottom:none;}
table.mxt .input.slim{max-width:190px;}
.stepn.sm{width:18px;height:18px;font-size:10px;margin-right:7px;display:inline-flex;vertical-align:middle;}

/* The vendor chain: a group row per production step whose selects ARE the decomposition rule, and one
   weighting row per job it becomes. The group row is the only place the two halves meet. */
table.jmx tr.jgrp td{background:#f7fafc;border-bottom:1px solid #e1ebf1;padding:8px 6px 8px 0;}
.jgh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.jprod{font-size:10.5px;font-weight:700;background:#eff4f8;color:#4b82aa;border:1px solid #e1ebf1;
  border-radius:2px;padding:2px 8px;white-space:nowrap;}
.jarr{color:#a0afbe;}
.jsel{max-width:200px;}
table.jmx .jsel.input.slim{max-width:200px;}
/* The type-ahead replaces the select with its own control, so the width has to move with it. */
.jgh .cbx{width:200px;flex:none;}
.jgh .cbx-ctrl{min-height:30px;}
/* A job UniCorN has no grid for: the row cannot follow anything, so the control says so instead of
   offering a curve that belongs to a different type. */
.mxsrc.gridless{border-color:#f0c9ae;background:#fffaf6;color:#a8480e;font-weight:600;}
.jwarn{margin-top:9px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:650;
  color:#a8480e;background:#fff6ee;border:1px solid #f3d8c2;border-radius:2px;padding:4px 10px;}
/* display:inline-flex beats the UA's [hidden]{display:none}, so the warning stayed on screen reading
   "0 of 2 jobs have no grid" while the code believed it had hidden it. */
.jwarn[hidden]{display:none;}

/* The production chain: numbered rows, one select each, plus an empty one to append. */
.steplist{display:flex;flex-direction:column;gap:6px;}
.stepline{display:flex;align-items:center;gap:9px;}
.stepline .stepn{width:21px;height:21px;border-radius:50%;flex:none;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;background:#e5f4ec;color:#166b46;}
.stepline .stepn.off{background:#f7fafc;color:#a0afbe;}
.stepline .input,.stepline .cbx{flex:1;min-width:0;}
/* Which files a step of the chain covers. "All files" is the default and today's behaviour, so only a
   step that limits itself is coloured — the row reads as an exception, not as a setting everyone made. */
.stephead{display:flex;gap:9px;padding-left:30px;margin-bottom:3px;}
.stephead span{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#a0afbe;}
.stephead .c1{flex:1;}
.stephead .c2{flex:none;width:230px;}
.stepline .appl{flex:none;width:230px;}
.stepline .appl.on{border-color:#f0c9ae;background:#fffaf6;color:#a8480e;font-weight:600;}
.filerule{margin:7px 0 3px 30px;border:1px solid #f0c9ae;background:#fffaf6;border-radius:2px;padding:10px 11px 11px;}
.filerule-h{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#b4470f;margin-bottom:8px;}
.filerule-h .m{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600;font-size:11.5px;color:#406982;
  display:flex;align-items:center;gap:6px;}
.filerule-h .m .input{width:64px;height:25px;padding:1px 6px;font-size:11.5px;}
.filerule .cond{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.filerule .cf{flex:none;width:148px;}
.filerule .co{flex:none;width:150px;}
.filerule .cv{flex:1;min-width:0;}
.filerule .cx{flex:none;width:26px;height:26px;border-radius:2px;border:1px solid #e7d3c4;background:#fff;
  color:#b48b71;font-size:13px;line-height:1;cursor:pointer;}
.filerule .cx:hover{color:#8a2f2f;border-color:#e0bfae;}
.filerule .condadd{font-size:11.5px;font-weight:650;color:#a8480e;background:#fff;border:1px dashed #e7d3c4;
  border-radius:2px;padding:5px 11px;margin-top:2px;cursor:pointer;}

/* A multiselect takes the whole row — its options are checkboxes side by side, not a scroll box, because
   "one or maybe two add-ons" has to be readable at a glance. */
.fgrid .field.wide{grid-column:1 / -1;}
.checks{display:flex;flex-wrap:wrap;gap:7px;}
.checks .chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;border:1px solid #e1ebf1;
  border-radius:2px;padding:5px 10px;background:#fff;color:#235570;cursor:pointer;}
.checks .chk:hover{border-color:#c8dae6;}
.checks .chk.on{border-color:#f0c9a8;background:#fff6ef;color:#b4470f;font-weight:650;}
.checks .chk input{margin:0;}
.prov{font-size:10px;font-weight:700;border-radius:2px;padding:1px 5px;background:#fff4ee;color:#b4470f;
  text-transform:lowercase;letter-spacing:.02em;}

/* The six generic flow fields sit behind this button: same on every subtask, rarely touched, and they
   were crowding out the settings that actually belong to the subtask. The button rides in the subtask
   headline; its panel hangs off the form below, so it costs no row of its own. */
.flowbtn{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;color:#406982;
  background:#fff;border:1px solid #e1ebf1;border-radius:2px;padding:4px 9px;cursor:pointer;flex:none;}
.flowbtn:hover{color:#003b5a;border-color:#c8dae6;}
.flowbtn[aria-expanded="true"]{color:#003b5a;border-color:#a0afbe;background:#f7fafc;}
.flowbtn .dot{width:6px;height:6px;border-radius:50%;background:#fa6f2c;display:inline-block;}
.flowbtn.on{color:#b4470f;border-color:#f0d6c2;background:#fff8f3;}
.flowpop{position:absolute;right:2px;top:2px;z-index:40;width:430px;max-width:78vw;
  background:#fff;border:1px solid #e1ebf1;border-radius:2px;padding:12px 14px 14px;
  box-shadow:0 14px 34px -12px rgba(15,25,45,.28);}
.flowpop-h{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#7d95a8;
  margin-bottom:8px;}

/* A cancelled project stays readable, just quiet: nothing is deleted, the steps only lose their actions. */
.cbanner{display:flex;align-items:center;gap:11px;background:#fdf6f6;border:1px solid #efd9d9;border-radius:2px;
  padding:10px 13px;font-size:12.5px;margin-bottom:14px;}
.cbanner .cp{background:#b23b3b;color:#fff;font-size:11px;font-weight:700;border-radius:99px;padding:3px 9px;flex:none;}
.cbanner .ct{color:#6a4a4a;flex:1;min-width:0;}
.cbanner .ct b{color:#4a2e2e;}

/* ── Prototyp-Chrome ── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:60;pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  background:#131d2a;color:#fff;font:500 13px/1.4 Inter,sans-serif;
  padding:11px 18px;border-radius:2px;max-width:520px;text-align:center;
  box-shadow:0 10px 30px -10px rgba(9,25,40,.5);
  opacity:0;transition:opacity .18s,transform .18s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (prefers-reduced-motion: reduce){.toast{transition:none;}}

/* ── Request intake ── */
.ovl{font-size:11px;font-weight:700;letter-spacing:.06em;color:#7d95a8;text-transform:uppercase;margin-bottom:8px;}
.mailbody{font-size:12.5px;color:#235570;line-height:1.6;background:#f7fafc;border:1px solid #e1ebf1;border-radius:2px;padding:12px 14px;}
.mailbody mark{background:#fff4c9;padding:0 2px;border-radius:3px;}
.draft-tbl{width:100%;font-size:12.5px;border-collapse:collapse;}
.draft-tbl td{padding:5px 0;vertical-align:top;}
.draft-tbl td:first-child{color:#7d95a8;width:32%;padding-right:10px;}

/* ── Files tab ── */
.fsrc{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #eff4f8;}
.fico{flex:none;width:38px;height:38px;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.fhead{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.factions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}
.ftree{margin-top:8px;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#406982;background:#f7fafc;border:1px solid #e1ebf1;border-radius:2px;padding:10px 12px;line-height:1.7;}
.ftree .dim{color:#7d95a8;}

/* Step page — matrix-row facets */
.stepfacets-note{font-size:11.5px;color:#7d95a8;padding:2px 2px 8px;}

/* Per-template subtask automation settings (workflow designer) */
.subcfg{border:1px solid #eff4f8;border-radius:2px;margin-bottom:6px;background:#f7fafc}
.subcfg>summary{cursor:pointer;list-style:none;padding:8px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#131d2a}
.subcfg>summary::-webkit-details-marker{display:none}
.subcfg>summary::before{content:"▸";color:#7d95a8;font-size:11px}
.subcfg[open]>summary::before{content:"▾"}
.subcfg[open]>summary{border-bottom:1px solid #eff4f8;background:#fff;border-radius:2px 2px 0 0}
/* The settings sit visibly under their subtask's headline — indented and on a rail, so the headline
   reads as the headline and not as the first line of the form. */
.subcfg>form{padding:11px 12px 12px 20px;margin:0 0 0 11px;border-left:2px solid #e1ebf1;position:relative}
.subcfg .pclient{margin-left:auto;text-align:right}
.subcfg>summary>.flowbtn{margin-left:8px}

/* An escalated checklist item (SubtaskEscalationJob stamped it) */
.wchip.c-late{background:#fdecea;color:#a8261a;border:1px solid #f5c6c0;margin-left:6px}