:root{
  --paper:#ECEAE2; --surface:#fff; --ink:#20242B; --ink-soft:#5B6270;
  --line:#DAD6C9; --urgent:#E1550C; --urgent-soft:#FBE3D4;
  /* "W trakcie" ma być widoczne, ale nie alarmowe — niebieski, w odróżnieniu
     od pomarańczowego "urgent" (zaległości, liczniki). */
  --progress:#2D5FB8; --progress-soft:#DCE8FA; --progress-line:#B9CDEE;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;}
#app{max-width:720px;margin:0 auto;padding:16px;}
.login{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:60px auto;}
input,button,select,textarea{font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);}
button{background:var(--ink);color:#fff;border:none;cursor:pointer;}
button.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line);}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;padding-bottom:4px;}
.tab{padding:8px 12px;border-radius:20px;background:var(--surface);border:1px solid var(--line);cursor:pointer;white-space:nowrap;position:relative;}
.tab.active{background:var(--ink);color:#fff;}
.tab .badge{background:var(--urgent);color:#fff;border-radius:10px;padding:0 6px;font-size:11px;margin-left:6px;}
.order-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.order-card.done{opacity:0.55;}
.order-meta{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.investment-chip{display:inline-block;padding:2px 8px;border-radius:12px;font-size:11px;color:#fff;margin-bottom:4px;}
/* Zaopatrzeniowiec/admin ma na aktywnej karcie do 5 przycisków (✓ 🚚 💬 ✏️ 🗑);
   w jednym rzędzie nie zmieszczą się obok treści na telefonie, więc na wąskim
   ekranie ograniczamy szerokość do ~3 przycisków i pozwalamy zawijać. */
.actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
/* Rozmiar pod palec (min. 42 px), ikony większe — przy 5-6 przyciskach na
   karcie i tak się zawijają, więc lepiej, żeby były trafialne niż drobne. */
.actions button{min-width:42px;min-height:42px;padding:6px 10px;font-size:18px;line-height:1;}
@media (max-width:600px){
  .actions{max-width:138px;} /* 3 x 42 px + 2 odstępy po 6 px */
}
/* Stan "w trakcie": zaopatrzeniowiec już jedzie po materiał. Chip w metadanych
   karty + delikatne podbarwienie całej karty, żeby pracownik widział to z daleka. */
.in-progress-label{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:10px;background:var(--progress-soft);color:var(--progress);font-weight:600;}
.order-card.in-progress{background:#F6F9FE;border-color:var(--progress-line);}
.order-card.in-progress.has-history+.order-history{border-color:var(--progress-line);border-top-style:dashed;}
.fab{position:fixed;bottom:20px;right:20px;border-radius:50%;width:56px;height:56px;font-size:24px;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:var(--surface);border-radius:12px;padding:18px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px;}
.top-actions{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}
@media (max-width:600px){
  /* Na wąskim ekranie flex-end + overflow potrafi wypchnąć pierwsze elementy
     (imię, przycisk powiadomień) poza lewą krawędź w sposób nieosiągalny
     scrollem (znana przypadłość flexboksa: flex-end + overflow nie pozwala
     przewinąć w stronę ujemną). Dlatego tu przełączamy na flex-start +
     poziomy scroll, tak jak zakładki dni poniżej. */
  .top-actions{justify-content:flex-start;overflow-x:auto;padding-bottom:4px;}
  .top-actions>*{flex-shrink:0;white-space:nowrap;}
}
.investment-group{margin-bottom:20px;}
.investment-group-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.toggle-done{color:var(--ink-soft);font-size:13px;cursor:pointer;margin:6px 0 8px;user-select:none;}
.toggle-done:hover{color:var(--ink);}
.investment-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);}
.investment-row:last-child{border-bottom:none;}
.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;}
.color-swatch.selected{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset;}
.search-box{width:100%;margin-bottom:12px;background:var(--surface);}
/* Wiek zaległości w "Na już" / widoku Inwestycje — trzy stopnie, żeby zamówienie
   zaległe od tygodnia było widoczne na pierwszy rzut oka, a wczorajsze nie krzyczało. */
.overdue-label{margin-left:6px;white-space:nowrap;}
.overdue-1{color:var(--ink-soft);}
.overdue-2{color:#D97706;}
.overdue-3{color:var(--urgent);font-weight:600;}
/* Historia zdarzeń: link w metadanych karty + blok "doklejony" pod kartą (karta
   z rozwiniętą historią traci dolne zaokrąglenie i margines, blok je przejmuje). */
.history-link{cursor:pointer;user-select:none;}
.history-link:hover{color:var(--ink);text-decoration:underline;}
.order-card.has-history{border-radius:10px 10px 0 0;margin-bottom:0;border-bottom:none;}
.order-history{background:var(--surface);border:1px solid var(--line);border-top:1px dashed var(--line);border-radius:0 0 10px 10px;padding:8px 12px;margin-bottom:8px;font-size:12px;color:var(--ink-soft);}
.order-history.done{opacity:0.55;}
.order-history div{padding:2px 0;}