/* ============================================================
   DostawaManager — Dark Mode (Saturn Import Design System)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Design System tokens */
  --bg:        #f4f4f4;
  --surface:   #ffffff;
  --surface2:  #f0f0f0;
  --border:    #e0e0e0;
  --border-light: #ebebeb;
  --text:      #111111;
  --text2:     #666666;
  --text3:     #aaaaaa;
  --accent:    #4F46E5;
  --ok:        #2a9d5c;   /* szmaragd = status „zatwierdzone" (jak w gridzie) */
  --warn:      #d4820a;   /* ambra = status „szkic" (jak w gridzie) */
  --err:       #A32D2D;   /* ceglasty = błąd/danger (jak przycisk anuluj w gridzie) */
  --r:         6px;

  /* ── Paleta statusów tras (wcześniej wklejana na sztywno w wielu miejscach) ── */
  --st-draft:    #185FA5;  /* szkic */
  --st-approved: #3B6D11;  /* zatwierdzona / „ok" w gridzie */
  --st-settle:   #EF9F27;  /* do rozliczenia */
  --st-archived: #888780;  /* archiwum */
  --st-service:  #B4B2A9;  /* serwis */
  /* ── Semantyczne akcenty tekstu/obwódek i jasne tła statusów ── */
  --ink-amber:   #854F0B;  /* tekst/obwódki ostrzeżeń */
  --tint-green:  #EAF3DE;  /* jasne tło „ok/zatwierdzone" */
  --tint-red:    #FCEBEB;  /* jasne tło błędu/„bez trasy" */
  --tint-amber:  #FFF3E0;  /* jasne tło ostrzeżenia */
  --tint-blue:   #EBF4FF;  /* jasne tło info/„szkic" */

  /* ── Neutralna skala szarości (te same wartości, wcześniej wklejane wprost) ── */
  --white:    #ffffff;   /* biel (tło/tekst na kolorze) — osobno od --surface */
  --gray-50:  #fafafa;
  --gray-75:  #f9f9f9;
  --gray-100: #eeeeee;
  --gray-150: #ececec;
  --gray-200: #dddddd;
  --gray-300: #cccccc;
  --gray-400: #bbbbbb;
  --gray-500: #999999;
  --gray-600: #888888;
  --gray-700: #777777;
  --gray-800: #555555;
  --gray-850: #444444;
  --gray-900: #333333;
  --gray-950: #222222;
  /* (istniejące szarości, na które też mapujemy: --bg #f4f4f4 · --surface2 #f0f0f0 · --border #e0e0e0
      · --border-light #ebebeb · --text3 #aaa · --text2 #666 · --text #111) */

  /* ── Skala typografii (px, 1:1 z istniejących rozmiarów) ── */
  --fs-9:9px; --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  /* ── Skala odstępów 4px (do użycia w redesignie; legacy px zostają do przebudowy ekranu) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  /* Legacy aliases (used by inline styles in HTML) */
  --primary:        #4F46E5;
  --primary-dark:   #3730A3;
  --primary-light:  #4F46E510;
  --success:        #2a9d5c;
  --success-light:  #eaf6ef;
  --warning:        #d4820a;
  --warning-light:  #fef3e2;
  --danger:         #A32D2D;
  --danger-light:   #FCEBEB;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   10px;
  --radius-pill: 99px;
  --font: 'IBM Plex Sans', sans-serif;
  --topbar-h: 48px;
  --sidebar-w: 440px;
  --map-sidebar-w: 300px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  font-size: var(--fs-14);
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--surface2); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ══════════════════════════════
   TOPBAR
══════════════════════════════ */
.tbtn {
  font-size: var(--fs-11);
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
  transition: all .15s;
}
.tbtn:hover { background: var(--surface2); color: var(--text); border-color: var(--gray-300); }
.tbtn.primary { background: var(--accent); color: var(--white); border-color: var(--accent); font-weight: 600; }
.tbtn.primary:hover { background: #4338CA; border-color: #4338CA; }
.tbtn.success { background: var(--ok); color: var(--white); border-color: var(--ok); font-weight: 600; }
.tbtn.danger { color: var(--err); border-color: var(--err); }
.tbtn.danger:hover { background: var(--danger-light); }
.tbtn:disabled { opacity: .35; cursor: not-allowed; }

/* ══════════════════════════════
   SCREENS
══════════════════════════════ */
.screen { display: none; flex: 1; overflow: hidden; }
.screen.active { display: flex; }

/* ══════════════════════════════
   ROUTES LIST
══════════════════════════════ */
#screen-routes { flex-direction: column; overflow-y: auto; background: var(--bg); }

/* Wyszukiwarka zamówień na trasach */
.route-order-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
  margin-left: auto;
}
/* W topbarze: stała szerokość, bez rozpychania */
#topbar .route-order-search-wrap { flex: none; width: 260px; max-width: 260px; margin: 0; }
#route-global-search {
  width: 100%;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
#route-global-search:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #4F46E515; }
#route-global-search::placeholder { color: var(--text3); }

#route-global-results { display: none; }
#route-global-results.open { display: block; }

/* Stary .list-header — alias dla innych ekranów */
.list-header {
  padding: 12px 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.list-header h2 { font-size: var(--fs-14); font-weight: 600; color: var(--text); font-family: 'IBM Plex Mono', monospace; }

/* Routes grid — full-width row list */
/* ═══════════════════════════════════════════════════
   Widok listy tras — stały grid
   Kolumny: nazwa | daty | statystyki | postęp | zespół | akcje
   ═══════════════════════════════════════════════════ */

/* Stary sbadge — zostaje dla edytora */
.sbadge {
  font-size: var(--fs-10);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
}
.sbadge.draft              { background: #ff950018; color: var(--warn); border: 1px solid #ff950035; }
.sbadge.approved           { background: var(--success-light); color: var(--ok); border: 1px solid #2a9d5c30; }
.sbadge.settled            { background: var(--surface2); color: var(--text3); border: 1px solid var(--border); }
.sbadge.pending_settlement { background: #4F46E512; color: var(--accent); border: 1px solid #4F46E550; }
.progress-label { display: none; }

.empty-state { text-align: center; padding: 50px; color: var(--text3); }
.empty-state .ei { font-size: 36px; margin-bottom: 10px; opacity: .4; }

/* ══════════════════════════════
   CALENDAR
══════════════════════════════ */
#screen-calendar { flex-direction: column; background: var(--bg); overflow-y: auto; }
#cal-wrap { padding: 16px 20px; flex: 1; }
.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cal-nav h3 { font-size: var(--fs-15); font-weight: 600; color: var(--text); flex: 1; text-align: center; font-family: 'IBM Plex Mono', monospace; }
.cal-nav button {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  font-size: var(--fs-13);
  transition: all .15s;
}
.cal-nav button:hover { background: var(--surface2); color: var(--text); }

.cal-grid {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 16px;
}
.cal-head-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); }
.cal-head-cell { padding: 8px; text-align: center; font-size: var(--fs-11); font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(76px, auto); }
.cal-cell {
  min-height: 76px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }

/* Resource timeline */
#resource-timeline { margin-top: 16px; }
#resource-timeline h4 { font-size: var(--fs-12); font-weight: 600; color: var(--text2); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .05em; }
.rt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rt-name { font-size: var(--fs-12); color: var(--text2); width: 120px; flex-shrink: 0; }
.rt-bar-wrap { flex: 1; background: var(--surface2); border-radius: 3px; height: 22px; overflow: hidden; }
.rt-bar {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: var(--fs-10);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rt-bar.free { background: var(--surface2); color: var(--text3); }
.rt-bar.busy { background: var(--err); color: white; }
.rt-status { font-size: var(--fs-11); white-space: nowrap; }
.rt-status.free { color: var(--ok); }
.rt-status.busy { color: var(--err); }

/* ══════════════════════════════
   MAP VIEW
══════════════════════════════ */
#screen-mapview { flex-direction: row; }
#map-sidebar {
  width: var(--map-sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
#map-sidebar-head {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#map-sidebar-head h3 { font-size: var(--fs-13); font-weight: 600; color: var(--text); font-family: 'IBM Plex Mono', monospace; }

#map-routes-list { flex: 1; overflow-y: auto; }
.route-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.route-toggle-row:hover { background: var(--surface2); }
.route-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.route-toggle-name { flex: 1; font-size: var(--fs-12); color: var(--text); font-weight: 500; }
.route-toggle-meta { font-size: var(--fs-10); color: var(--text3); }

#map-stops-panel { flex: 1; overflow-y: auto; user-select: none; }
.ms-route-header {
  padding: 6px 10px;
  font-size: var(--fs-11);
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ms-stop {
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 7px;
  cursor: grab;
  transition: background .1s;
}
.ms-stop:hover { background: var(--surface2); }
.ms-stop.drag-over-top { border-top: 2px solid var(--accent); }
.ms-stop.dragging { opacity: .35; }
.ms-num {
  width: 20px; height: 20px;
  border-radius: 50%;
  color: white;
  font-size: var(--fs-10);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.ms-info { flex: 1; min-width: 0; }
.ms-name { font-size: var(--fs-12); font-weight: 600; color: var(--text); }
.ms-addr { font-size: var(--fs-11); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-eta { font-size: var(--fs-11); color: var(--accent); font-weight: 500; margin-top: 1px; }
.ms-drag { font-size: var(--fs-14); color: var(--text3); flex-shrink: 0; cursor: grab; margin-top: 2px; }
.ms-break-row {
  padding: 5px 10px 5px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  background: #ff950010;
}
.ms-break-txt { font-size: var(--fs-11); color: var(--warn); flex: 1; }
.ms-break-del { font-size: var(--fs-12); color: var(--text3); cursor: pointer; padding: 0 3px; }
.ms-break-del:hover { color: var(--err); }
.ms-break-icon { font-size: var(--fs-12); }

#map-main { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }
#map-depot-tag {
  position: absolute; bottom: 26px; left: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 4px 9px;
  font-size: var(--fs-11); color: var(--text2);
}
#map-legend {
  position: absolute; top: 10px; right: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 10px;
  font-size: var(--fs-11);
}
.legend-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: var(--text2); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════
   EDITOR
══════════════════════════════ */
#screen-editor { flex-direction: row; }

#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

#editor-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ehead-row { display: flex; align-items: center; gap: 6px; }

#route-name-input {
  flex: 1;
  font-size: var(--fs-13);
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 5px 8px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
#route-name-input:focus { border-color: var(--accent); }
#route-name-input:disabled { opacity: .5; cursor: not-allowed; }
/* Nazwa trasy zablokowana (kod automatyczny) — wygląd „read-only", bez ramki edycji */
#route-name-input.locked,
#route-name-input[readonly] {
  border-color: transparent;
  background: transparent;
  cursor: default;
}
#route-name-input.locked:focus,
#route-name-input[readonly]:focus { border-color: transparent; }

.sbadge-sm {
  font-size: var(--fs-10);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
}

.date-row { display: flex; gap: 5px; align-items: center; font-size: var(--fs-12); color: var(--text2); flex-wrap: wrap; }
.date-row label { white-space: nowrap; font-weight: 600; color: var(--text2); font-size: var(--fs-11); }
.date-row input[type=date],
.date-row input[type=time] {
  font-size: var(--fs-11);
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
}
.date-row input:focus { border-color: var(--accent); }

/* Editor tabs */
#tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.stab {
  flex: 1;
  padding: 9px 4px;
  font-size: var(--fs-12);
  text-align: center;
  cursor: pointer;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--font);
  transition: all .15s;
}
.stab:hover { color: var(--text); }
.stab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Filters */
#filters {
  display: flex;
  gap: 4px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--surface);
}
.fbtn {
  font-size: var(--fs-11);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.fbtn:hover { color: var(--text); border-color: var(--gray-300); }
.fbtn.active { background: #4F46E515; color: var(--accent); border-color: var(--accent); }

/* Search input in sidebar */
#order-search {
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-12);
  outline: none;
  flex-shrink: 0;
}
#order-search::placeholder { color: var(--text3); }
#order-search:focus { background: var(--surface2); }

/* Order list */
#list-wrap { flex: 1; overflow-y: auto; }

.oitem {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  transition: background .1s;
}
.oitem:hover { background: var(--surface2); }
.oitem.sel { background: #4F46E510; border-left: 3px solid var(--accent); padding-left: 9px; }
.oitem.in-other-route { opacity: .38; pointer-events: none; }

.ochk { width: 15px; height: 15px; min-width: 15px; margin-top: 3px; accent-color: var(--accent); cursor: pointer; }
.oinfo { flex: 1; min-width: 0; }

.onum-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 3px; }
.onum { font-size: var(--fs-13); font-weight: 700; color: var(--text); line-height: 1.3; font-family: 'IBM Plex Mono', monospace; }

.obadge-row { margin-bottom: 4px; }
.badge {
  font-size: var(--fs-11);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
}
.b-before   { background: #4a8ef015; color: #7ab3f5; border: 1px solid #4a8ef040; }
.b-avizacja { background: #ff950018; color: var(--warn); border: 1px solid #ff950040; }
.b-intime   { background: var(--success-light); color: var(--ok); border: 1px solid #00cc8840; }
.b-overdue  { background: var(--danger-light); color: var(--err); border: 1px solid #A32D2D40; }
.b-done     { background: var(--surface2); color: var(--text3); border: 1px solid var(--border); }
.b-paid     { background: var(--success-light); color: var(--ok); border: 1px solid #00cc8840; }
.b-partial  { background: #ff950018; color: var(--warn); border: 1px solid #ff950040; }
.b-unpaid   { background: var(--danger-light); color: var(--err); border: 1px solid #A32D2D40; }

.payment-badge { font-size: var(--fs-11); font-weight: 600; }
.oaddr { font-size: var(--fs-11); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oproducts { font-size: var(--fs-11); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.onote { font-size: var(--fs-10); color: var(--warn); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Append btn */
.oitem-append {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: var(--fs-10);
  padding: 2px 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
  font-family: var(--font);
  transition: all .15s;
}
.oitem-append:hover { background: #4F46E512; border-color: var(--accent); }

/* Route stop list */
#route-wrap { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

.ritem {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  cursor: grab;
  transition: background .1s;
}
.ritem:hover { background: var(--surface2); }
.ritem.next-stop { background: #4F46E510; border-left: 3px solid var(--accent); padding-left: 9px; }
.ritem.done-stop { opacity: .4; }
.ritem.avizacja-stop { background: #ff950010; border-left: 3px solid var(--warn); padding-left: 9px; }
.ritem.drag-over { border-top: 2px solid var(--accent); }
.ritem.dragging { opacity: .35; }

.rnum {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: var(--fs-10);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-family: 'IBM Plex Mono', monospace;
}
.rinfo { flex: 1; min-width: 0; }
.rname { font-size: var(--fs-12); font-weight: 600; color: var(--text); }
.raddr { font-size: var(--fs-11); color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reta { font-size: var(--fs-11); color: var(--accent); font-weight: 600; margin-top: 1px; font-family: 'IBM Plex Mono', monospace; }
.rleg { font-size: var(--fs-10); color: var(--text3); }
.rdel { background: none; border: none; color: var(--text3); cursor: pointer; padding: 0 3px; font-size: var(--fs-14); flex-shrink: 0; }
.rdel:hover { color: var(--err); }

/* Break row */
.break-row {
  padding: 5px 10px 5px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  background: #ff950010;
}
.break-txt { font-size: var(--fs-11); color: var(--warn); flex: 1; }
.break-edit { font-size: var(--fs-11); color: var(--text3); cursor: pointer; padding: 0 3px; }
.break-edit:hover { color: var(--text); }
.break-del { font-size: var(--fs-12); color: var(--text3); cursor: pointer; padding: 0 3px; }
.break-del:hover { color: var(--err); }
.break-icon { font-size: var(--fs-12); }

/* Settings tab (Szczegóły) */
#view-settings-inner { flex: 1; overflow-y: auto; padding: 12px; }

.speed-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--fs-12); color: var(--text2); }
.speed-row input[type=range] { flex: 1; accent-color: var(--accent); }
#speed-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--accent);
  width: 36px;
}

/* Assign chips */
.assign-label { font-size: var(--fs-11); color: var(--text3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.assign-row { display: flex; flex-wrap: wrap; gap: 5px; }
.assign-chip {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
}
.assign-chip:hover { border-color: var(--gray-300); color: var(--text); }
.assign-chip.selected { background: #4F46E515; border-color: var(--accent); color: var(--accent); }
.assign-sum {
  font-size: var(--fs-11);
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  margin-top: 4px;
}
#assign-bar { background: transparent; border: none; padding: 0; }

/* Bottom panel */
#bottom {
  border-top: 1px solid var(--border);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
#sel-info { font-size: var(--fs-11); color: var(--text2); padding: 4px 2px; }
#route-sum { font-size: var(--fs-12); color: var(--text2); padding: 4px 2px; }
#route-sum strong { color: var(--accent); font-family: 'IBM Plex Mono', monospace; }

.btn-row { display: flex; gap: 6px; }

/* Approved overlay */
#approved-overlay {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(59,109,17,.92);
  color: white;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  border-radius: 99px;
  font-size: var(--fs-12);
  font-weight: 600;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  pointer-events: none;
}
#approved-overlay.show { display: flex; }

#editor-map-wrap { flex: 1; position: relative; }
#editor-map { width: 100%; height: 100%; }
#editor-map-tip {
  position: absolute; bottom: 26px; left: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 5px 10px;
  font-size: var(--fs-11); color: var(--text2);
}
#depot-tag {
  position: absolute; bottom: 52px; left: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 4px 9px;
  font-size: var(--fs-11); color: var(--text2);
}

/* ══════════════════════════════
   MODALS
══════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}
.modal-overlay.show { display: flex; }

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 500px;
  max-width: 92vw;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-box h3 {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
  font-family: 'IBM Plex Mono', monospace;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-footer button {
  padding: 7px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-family: var(--font);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: all .15s;
}
.modal-footer button:hover { border-color: var(--gray-300); color: var(--text); }

/* Settings modal — niemal pełny ekran (dużo miejsca na listy/obsady) */
#settings-box {
  width: 1600px;
  max-width: 96vw;
  height: 94vh;
  max-height: 94vh;
  overflow: hidden;
  gap: 10px;
}
.set-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.set-tab {
  padding: 8px 14px;
  font-size: var(--fs-12);
  cursor: pointer;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
}
.set-tab:hover { color: var(--text); }
.set-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.set-pane { display: none; }
.set-pane.active {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 2px 10px;
}
.set-sec { margin-bottom: 18px; }
.set-sec h4 {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.dict-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dict-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.d-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  flex-shrink: 0;
  background: var(--surface);
}
.d-name { flex: 1; font-size: var(--fs-12); color: var(--text); }
.d-sub { font-size: var(--fs-11); color: var(--text2); }
.dict-del { background: none; border: none; color: var(--text3); cursor: pointer; font-size: var(--fs-15); padding: 0 3px; }
.dict-del:hover { color: var(--err); }
.add-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.add-row input {
  flex: 1;
  min-width: 80px;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
}
.add-row input:focus { border-color: var(--accent); }
.add-row button {
  padding: 6px 12px;
  background: #4F46E515;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.add-row button:hover { background: #4F46E515; }
.add-row select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-12);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

/* ── Zarządzanie obsadami (Ustawienia → Obsady) ── */
.asg-form {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 12px 12px 14px; margin-bottom: 16px;
}
.asg-form-title {
  font-size: var(--fs-10); font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
}
.asg-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.asg-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.asg-field > span {
  font-size: var(--fs-9); font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .05em;
}
.asg-field select, .asg-field input {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--fs-12); background: var(--bg); color: var(--text); font-family: var(--font);
  outline: none; width: 100%; min-width: 0;
}
.asg-field select:focus, .asg-field input:focus { border-color: var(--accent); }
.asg-add-btn {
  margin-top: 12px; width: 100%; padding: 9px; background: var(--accent); color: var(--white);
  border: none; border-radius: var(--radius-md); font-size: var(--fs-13); font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: filter .12s;
}
.asg-add-btn:hover { filter: brightness(1.08); }

.asg-list { display: flex; flex-direction: column; }
.asg-group { margin-bottom: 14px; }
.asg-group-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border-light);
}
.asg-car { font-size: var(--fs-13); color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.asg-car b { font-weight: 700; }
.asg-car-model { font-size: var(--fs-11); color: var(--text3); font-weight: 400; }
.asg-group-count {
  margin-left: auto; font-size: var(--fs-10); font-weight: 700; color: var(--text3);
  background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 1px 8px;
}
.asg-group.carless .asg-car { color: var(--ink-amber); }

.asg-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); margin-bottom: 5px; transition: border-color .12s;
}
.asg-card:hover { border-color: var(--text3); }
.asg-card.carless { background: #FFFCF6; border-color: #F0D9A8; }
.asg-card-main { flex: 1; min-width: 0; }
.asg-dates {
  font-size: var(--fs-12); font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.asg-crew { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.asg-drv {
  font-size: var(--fs-11); color: var(--text2); background: var(--surface2);
  border-radius: 99px; padding: 2px 9px; white-space: nowrap;
}
.asg-chip {
  font-size: var(--fs-9); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 99px;
}
.asg-chip.now  { background: var(--success-light); color: var(--success); }
.asg-chip.soon { background: var(--primary-light);  color: var(--accent); }
.asg-chip.nocar{ background: var(--warning-light); color: var(--warning); }
.asg-actions { display: flex; gap: 5px; flex-shrink: 0; }
.asg-btn {
  font-size: var(--fs-11); font-weight: 600; padding: 5px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  cursor: pointer; font-family: var(--font); white-space: nowrap; transition: all .12s;
}
.asg-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--primary-light); }
.asg-btn.danger:hover { border-color: var(--err); color: var(--err); background: var(--danger-light); }

.asg-hist-btn {
  font-size: var(--fs-11); font-weight: 600; color: var(--text2); background: var(--surface2);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 7px 12px;
  cursor: pointer; width: 100%; margin-top: 4px; font-family: var(--font);
}
.asg-hist-btn:hover { border-color: var(--text3); }
.asg-empty {
  font-size: var(--fs-12); color: var(--text3); padding: 16px; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius-md);
}

/* ── Moduł Serwis: sub-zakładki + książka serwisowa ── */
.svc-subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.svc-subtab {
  padding: 8px 14px; font-size: 12.5px; cursor: pointer; color: var(--text2);
  background: none; border: none; border-bottom: 2px solid transparent; font-family: var(--font);
}
.svc-subtab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.svc-pane { display: none; }
.svc-pane.active { display: block; }

.svc-summary { font-size: 12.5px; margin-bottom: 12px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.svc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.svc-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
/* Auto z otwartym zgłoszeniem — wyraźny czerwony sygnał, nie „OK" */
.svc-card-alert { border-color: #e0a0a0; background: #fdf5f5; }
.svc-card-alert:hover { border-color: #b23636; }
.svc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.svc-plate { font-weight: 700; font-size: 13.5px; font-family: 'IBM Plex Mono', monospace; }
.svc-model { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.svc-km { font-size: var(--fs-15); font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }
.svc-oil { font-size: var(--fs-12); margin-top: 4px; line-height: 1.35; }
.svc-meta { font-size: var(--fs-11); color: var(--text3); margin-top: 4px; }
.svc-lvl { font-size: var(--fs-10); font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.svc-empty { font-size: var(--fs-12); color: var(--text3); padding: 20px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-md); }

.svc-km-big { font-size: var(--fs-18); font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.svc-sec { margin-top: 16px; }
.svc-sec-h { font-size: var(--fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border-light); }
.svc-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.svc-row:last-child { border-bottom: none; }
.svc-sub { font-size: 11.5px; color: var(--text2); }
.svc-btn {
  font-size: var(--fs-11); font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  cursor: pointer; font-family: var(--font); white-space: nowrap; transition: all .12s;
}
.svc-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--primary-light); }
.svc-btn.primary { background: var(--accent); color: var(--white); border-color: var(--accent); }
.svc-btn.primary:hover { filter: brightness(1.08); color: var(--white); }
.svc-btn.danger:hover { border-color: var(--err); color: var(--err); background: var(--danger-light); }
.svc-addform { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* ── Powiązanie usterka ↔ serwis ── */
/* Chip statusu serwisu przy zgłoszeniu (brak / zaplanowany / wykonany) */
.svc-lnk-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-10); font-weight: 700;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.svc-lnk-chip.none { background: #fbeaea; color: #b23636; }
.svc-lnk-chip.open { background: #e8f0fa; color: var(--st-draft); }
.svc-lnk-chip.done { background: #eaf6ef; color: var(--st-approved); }
.svc-lnk-chip.neutral { background: var(--border-light); color: var(--text3); }
/* Odznaka zwrotna „z usterki" na zadaniu serwisowym */
.svc-lnk-chip.from-report { background: #fbeaea; color: #b23636; }
/* Zagnieżdżona karta powiązanego serwisu — łącznik (pionowa linia + „↳") */
.svc-link { position: relative; margin-top: 8px; padding-left: 16px; }
.svc-link::before { content: ""; position: absolute; left: 3px; top: -2px; bottom: 12px; width: 2px;
  background: var(--st-draft); opacity: .45; border-radius: 2px; }
.svc-link::after { content: ""; position: absolute; left: 3px; bottom: 12px; width: 10px; height: 2px;
  background: var(--st-draft); opacity: .45; }
.svc-link.done::before, .svc-link.done::after { background: var(--st-approved); }
.svc-link-card { background: #e8f0fa; border: 1px solid rgba(24,95,165,.28); border-radius: 7px; padding: 7px 10px; }
.svc-link-card.done { background: #eaf6ef; border-color: rgba(59,109,17,.28); }
.svc-link-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.svc-link-arrow { color: var(--st-draft); font-weight: 700; }
.svc-link.done .svc-link-arrow { color: var(--st-approved); }
.svc-link-title { font-weight: 700; font-size: var(--fs-12); }
/* Pasek segmentów w liście zgłoszeń */
.svc-rep-seg { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.svc-rep-seg button { font-size: var(--fs-11); font-weight: 600; padding: 5px 12px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; font-family: var(--font); }
.svc-rep-seg button:hover { border-color: var(--accent); color: var(--accent); }
.svc-rep-seg button.on { background: var(--accent); border-color: var(--accent); color: var(--white); }
.svc-rep-seg .seg-count { background: rgba(0,0,0,.12); border-radius: 99px; padding: 0 6px; font-size: var(--fs-10); }
.svc-rep-seg button.on .seg-count { background: rgba(255,255,255,.25); }

/* Break modal */
#break-box { width: 380px; }
.break-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.break-form label { font-size: var(--fs-12); font-weight: 600; color: var(--text2); }
.break-form input, .break-form select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-12);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
}
.break-form input:focus, .break-form select:focus { border-color: var(--accent); }

/* Order detail panel — styl jak lista tras */
.od-panel {
  width: 1040px;
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 44px rgba(17,17,17,.20), 0 2px 8px rgba(17,17,17,.08);
}

/* Dwukolumnowe ciało modala: lewa = STAN (odczyt), prawa = AKCJE (praca operatora).
   Sekcje jako osobne karty na neutralnym tle — czytelniejszy podział niż płaskie kreski. */
.od-panel-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface2, #fafafa);
}
.od-col {
  min-width: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.od-col-right { border-left: none; }
/* Każda sekcja = karta */
.od-section, .od-storage {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
#od-leadtime-section { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
#od-delivery-section { border-radius: 12px; overflow: hidden; }

/* Wiersz w nagłówku: korekta statusu + przycisk Przypnij/Odepnij obok siebie */
.od-head-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 8px;
}
.od-head-actions #attach-to-route-btn { flex-shrink: 0; }

/* Paski terminów (dostawa + produkcja) obok siebie zamiast jeden pod drugim */
#od-leadtime-section { display: flex; flex-wrap: wrap; }
#od-leadtime-section > div { flex: 1 1 220px; min-width: 0; }
#od-leadtime-section > div + div { border-left: 1px solid var(--border-light); }

/* Lista notatek — własny scroll, żeby nie rozpychała kolumny */
#od-notes-list { max-height: 240px; overflow-y: auto; }

/* Wąskie okno → powrót do jednej kolumny */
@media (max-width: 900px) {
  .od-panel { width: 540px; overflow-y: auto; }
  .od-panel-body { display: block; }
  .od-col { overflow: visible; }
  .od-col-right { border-left: none; }
  #od-notes-list { max-height: none; }
}

/* Nagłówek */
.od-panel-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.od-panel-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.od-panel-id {
  font-family: var(--mono);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 2px;
  letter-spacing: .02em;
}
.od-panel-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.od-panel-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.od-close-btn {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text3);
  cursor: pointer;
  font-size: var(--fs-13);
  display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s;
}
.od-close-btn:hover { background: var(--surface2); color: var(--text); }

/* Sekcje — karty (border/tło ustawione wyżej w .od-section, .od-storage) */
.od-section-label {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-family: var(--mono);
  padding: 11px 16px 3px;
}

/* Wiersze danych */
.od-data-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-light);
}
.od-data-row:last-child { border-bottom: none; }
.od-data-row:hover { background: var(--primary-lt)08; }
.od-data-note-row { align-items: flex-start; }
.od-data-label {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  width: 76px;
  flex-shrink: 0;
  padding-top: 2px;
  font-family: var(--mono);
}
.od-data-value {
  flex: 1;
  font-size: var(--fs-13);
  color: var(--text);
  min-width: 0;
  line-height: 1.5;
}
.od-data-mono { font-family: var(--mono); font-weight: 700; font-size: var(--fs-13); color: var(--primary); }
.od-data-muted { color: var(--text2); font-size: var(--fs-12); }

/* Produkty */
.od-products { display: flex; flex-direction: column; gap: 4px; }
.od-product-row { display: flex; align-items: center; gap: 8px; }
.od-product-name { flex: 1; font-size: var(--fs-13); color: var(--text); font-weight: 500; }
.od-product-qty {
  font-size: var(--fs-10);
  color: var(--primary);
  background: var(--primary-lt, var(--tint-blue));
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-family: var(--mono);
  border: 1px solid var(--primary)20;
}

/* Notatki */
.od-note-area {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-12);
  resize: vertical;
  min-height: 58px;
  font-family: var(--font);
  line-height: 1.5;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.od-note-area:focus { border-color: var(--primary); }

/* Notatka w liście */
.od-note-item {
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-light);
}
.od-note-item:last-child { border-bottom: none; }
.od-note-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.od-note-ts {
  font-size: var(--fs-10);
  color: var(--text3);
  font-family: var(--mono);
}
/* Autor notatki — wyróżniony, żeby od razu było widać kto ją dodał */
.od-note-author {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--border-light);
  color: var(--text2);
  font-weight: 700;
  letter-spacing: .02em;
}
.od-note-author-unknown {
  background: none;
  padding-left: 0;
  font-weight: 400;
  font-style: italic;
  color: var(--text3);
}
.od-note-del {
  font-size: var(--fs-10);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: none;
  color: var(--text3);
  cursor: pointer;
  font-family: var(--mono);
}
.od-note-del:hover { background: var(--danger-lt); color: var(--danger); border-color: var(--danger)40; }
.od-note-text {
  font-size: var(--fs-13);
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.5;
}
.od-note-hidden {
  font-size: var(--fs-10);
  color: var(--text3);
  margin-top: 3px;
  font-family: var(--mono);
}

/* Dodaj notatkę */
.od-note-add {
  padding: 12px 18px;
  background: var(--surface2);
}
.od-note-add-label {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-family: var(--mono);
  margin-bottom: 7px;
}
.od-note-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}

/* Sekcje-karty prawej kolumny (magazynowanie, płatność, priorytet…) */
.od-storage {
  padding: 12px 16px;
  background: var(--surface);
}
.od-storage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.od-storage-label {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-family: var(--mono);
}
.od-storage-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.od-storage-field {
  flex: 1;
}
.od-storage-sublabel {
  font-size: var(--fs-10);
  color: var(--text3);
  font-family: var(--mono);
  margin-bottom: 4px;
}
.od-storage-window {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--primary-lt);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: none;
}
.od-storage-window-label {
  font-size: var(--fs-10);
  color: var(--primary);
  font-weight: 700;
  font-family: var(--mono);
  margin-bottom: 2px;
}
.od-storage-window-val {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
}

/* Stopka */
.od-panel-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface2);
  flex-shrink: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.od-action-btn {
  font-size: var(--fs-11);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 600;
  transition: background .1s;
  white-space: nowrap;
}
.od-action-btn:hover { background: #e8eaf6; border-color: var(--gray-400); }
.od-action-save {
  background: var(--primary-lt, var(--tint-blue));
  color: var(--primary);
  border-color: #185FA540;
}
.od-action-save:hover { background: #d4eaff; }
.od-action-attach {
  background: var(--ok-lt, var(--tint-green));
  color: var(--ok);
  border-color: #97C45988;
}
.od-action-attach:hover { background: #d4eac4; }

/* ── MODAL 1b: pasek stanu (oś czasu) + trzy kolumny ── */
.od-panel-1b { width: 1200px; max-width: 97vw; }
.od-h1b {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
  border-radius: 16px 16px 0 0; flex-shrink: 0;
}
.od-id-chip {
  font-family: var(--mono); font-weight: 700; font-size: var(--fs-11);
  color: var(--primary); background: var(--tint-blue, #EBF4FF);
  border-radius: 6px; padding: 4px 8px; letter-spacing: .04em;
}
.od-name-1b { font-weight: 600; font-size: 20px; letter-spacing: -.015em; color: var(--text); }
.od-h1b-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.od-primary-btn {
  height: 32px; padding: 0 16px; border: 1px solid var(--primary); background: var(--primary);
  color: #fff; border-radius: 8px; font-weight: 700; font-size: var(--fs-12); cursor: pointer; white-space: nowrap;
}
.od-primary-btn:hover { filter: brightness(.94); }
.od-timeline { padding: 14px 18px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.od-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.od-strip > * { background: var(--surface); }
.od-cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; align-items: start;
  flex: 1; min-height: 0; background: var(--surface2, #fafafa);
}
.od-c {
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  max-height: 62vh; overflow-y: auto; border-left: 1px solid var(--border); min-width: 0;
}
.od-c-items { border-left: none; }
.od-c-comm { background: var(--surface2, #fafafa); }
.od-c-title {
  display: flex; align-items: center; gap: 8px;
  font: 700 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text3);
}
.od-c-sub { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gray-500); font-size: 10px; }
.od-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.od-card-label { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }
.od-item-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; }
.od-mini-btn {
  height: 28px; padding: 0 10px; border: 1px solid var(--border-strong, #d0d0d0);
  background: var(--surface); color: var(--text); border-radius: 7px; font: 600 11px var(--font); cursor: pointer; white-space: nowrap;
}
.od-mini-btn:hover { background: var(--surface2, #f0f0f0); }
/* Pasek stanu jak w makiecie: kompaktowa płatność (bez długiego opisu) + kolorowe akcenty u góry */
/* Host edytora terminu produkcji pod osią czasu — sam z siebie niewidoczny (edytor pokazuje stopka) */
#od-leadtime-section { border: none; border-radius: 0; overflow: visible; }
/* Wąsko → jedna kolumna */
@media (max-width: 1000px) {
  .od-panel-1b { width: 560px; }
  .od-cols { grid-template-columns: 1fr; }
  .od-c { max-height: none; border-left: none; border-top: 1px solid var(--border); }
  .od-strip { grid-template-columns: 1fr; }
}

.od-leadtime-box {
  border-radius: 0;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  border: none;
  border-bottom: 1px solid;
}
.od-leadtime-box.before { background: #4a8ef010; border-color: #4a8ef040; }
.od-leadtime-box.intime { background: var(--success-light); border-color: #00cc8840; }
.od-leadtime-box.overdue { background: var(--danger-light); border-color: #A32D2D40; }
.od-leadtime-icon { font-size: var(--fs-20); flex-shrink: 0; }
.od-leadtime-label { font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.od-leadtime-value { font-size: var(--fs-13); font-weight: 700; }

/* PDF modal */
#pdf-box { width: 680px; }
.pdf-sub { font-size: var(--fs-12); color: var(--text2); }
.pdf-assign { font-size: var(--fs-12); color: var(--text2); padding: 6px 10px; background: var(--surface2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.pdf-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-12);
}
.pdf-n {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: white !important;
  font-size: var(--fs-11);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.pdf-info { flex: 1; }
.pdf-name { font-size: var(--fs-13); font-weight: 700; color: var(--text); }
.pdf-addr { font-size: var(--fs-12); color: var(--text2); }
.pdf-meta { font-size: var(--fs-11); color: var(--text3); margin-top: 2px; }
.pdf-times { text-align: right; flex-shrink: 0; }
.pdf-eta { font-size: var(--fs-13); color: var(--accent); font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.pdf-win { font-size: var(--fs-10); color: var(--ok); font-weight: 600; }

/* SMS modal */
#sms-box { width: 520px; }
.sms-preview {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: var(--fs-12);
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.sms-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.sms-chk { margin-top: 2px; accent-color: var(--accent); }
.sms-info { flex: 1; min-width: 0; }
.sms-name { font-size: var(--fs-12); font-weight: 600; color: var(--text); }
.sms-phone { font-size: var(--fs-11); color: var(--text2); }
.sms-msg { font-size: var(--fs-10); color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sms-status { font-size: var(--fs-10); white-space: nowrap; }
.sms-status.sent { color: var(--ok); font-weight: 600; }
.sms-status.pending { color: var(--warn); }
.sms-counter { font-size: var(--fs-11); color: var(--text2); margin-bottom: 8px; }
.sms-tpl-row { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 10px; }
.sms-tpl-row textarea {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-12);
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
}
.sms-tpl-row textarea:focus { border-color: var(--accent); }
.sms-vars { font-size: var(--fs-10); color: var(--text3); margin-top: 4px; }

/* Settle modal */
#settle-box { width: 520px; }
.settle-summary {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.settle-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.settle-summary-row:last-child { border-bottom: none; font-weight: 700; font-size: var(--fs-13); padding-top: 6px; color: var(--text); }
.settle-order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.settle-order-row:last-child { border-bottom: none; }
.settle-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  flex-shrink: 0;
  background: var(--surface2);
}
.settle-oinfo { flex: 1; min-width: 0; }
.settle-oname { font-size: var(--fs-12); font-weight: 600; color: var(--text); }
.settle-ometa { font-size: var(--fs-11); color: var(--text2); }
.settle-ostatus { font-size: var(--fs-11); font-weight: 600; white-space: nowrap; }
.settle-ostatus.ok { color: var(--ok); }
.settle-ostatus.err { color: var(--err); }
.settle-ostatus.pending { color: var(--warn); }
.settle-progress { width: 100%; height: 5px; background: var(--surface2); border-radius: 3px; margin: 10px 0; overflow: hidden; }
.settle-progress-bar { height: 100%; background: var(--accent); border-radius: 3px; transition: width .3s; }
.shopify-note {
  font-size: var(--fs-11);
  color: var(--text2);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-top: 10px;
}

/* ══════════════════════════════
   TOAST
══════════════════════════════ */
#toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-size: var(--fs-13);
  color: var(--text);
  z-index: 9000;
  display: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  animation: toastIn .2s ease;
  max-width: 340px;
}
#toast.show { display: block; }
#toast.success { border-left: 3px solid var(--ok); }
#toast.error   { border-left: 3px solid var(--err); }
#toast.warn    { border-left: 3px solid var(--warn); }
@keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════
   SPIN
══════════════════════════════ */
.spin {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════
   LOGIN
══════════════════════════════ */
#login-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: var(--bg);
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#login-box {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  padding: 36px 32px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#login-logo { font-size: var(--fs-20); font-weight: 600; color: var(--text); text-align: center; font-family: 'IBM Plex Mono', monospace; }
#login-logo span { color: var(--accent); }
#login-sub { font-size: var(--fs-12); color: var(--text3); text-align: center; margin-bottom: 6px; }
.login-label { font-size: var(--fs-11); font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .07em; }
.login-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  outline: none;
  transition: border-color .15s;
}
.login-input:focus { border-color: var(--accent); }
#login-submit {
  width: 100%;
  padding: 11px;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s;
}
#login-submit:hover { background: #4338CA; }
#login-error { font-size: var(--fs-12); color: var(--err); text-align: center; display: none; background: var(--danger-light); border: 1px solid var(--err); border-radius: var(--radius-sm); padding: 7px 10px; }
#login-badge { font-size: var(--fs-10); color: var(--text3); text-align: center; }

/* ══════════════════════════════
   ROUTE RENDER TOGGLE (editor map)
══════════════════════════════ */
/* Jeden box z trzema przełącznikami (prawy górny róg mapy edytora) */
#editor-map-toggles {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  display: none;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  padding: 5px 2px;
}
#editor-map-toggles.shown { display: flex; }
/* Pojedynczy przełącznik wewnątrz boxu: etykieta nad pionowym suwakiem */
#route-render-toggle, #route-points-toggle, #route-vehicles-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  cursor: pointer;
  user-select: none;
}
#route-render-toggle.visible, #route-points-toggle.visible, #route-vehicles-toggle.visible { display: flex !important; }
/* Delikatny pionowy separator tylko MIĘDZY widocznymi przełącznikami */
#editor-map-toggles > .visible ~ .visible { border-left: 1px solid var(--border); }
#route-toggle-label, .map-toggle-label { font-size: var(--fs-9); font-weight: 600; color: var(--text2); white-space: nowrap; text-align: center; }
#route-toggle-switch, .map-toggle-switch {
  width: 15px; height: 23px;
  background: var(--surface2);
  border-radius: 3px;
  position: relative;
  border: 1.5px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  transition: none;
}
#route-toggle-switch.on, .map-toggle-switch.on { border-color: var(--accent); }
#route-toggle-knob, .map-toggle-knob {
  position: absolute;
  left: 2px; right: 2px;
  height: 9px;
  background: var(--surface);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: top .1s ease;
  top: 2px;
  border: 1px solid var(--border);
}
#route-toggle-switch.on #route-toggle-knob, .map-toggle-switch.on .map-toggle-knob { top: calc(100% - 11px); background: var(--accent); }
#route-toggle-switch::after, .map-toggle-switch::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text3);
  top: calc(100% - 6px);
  transition: background .15s;
}
#route-toggle-switch.on::after, .map-toggle-switch.on::after { background: var(--accent); box-shadow: 0 0 3px rgba(200,255,0,.5); top: 2px; }

/* ══════════════════════════════
   PRINT
══════════════════════════════ */
@media print {
  body { overflow: visible !important; color: #000 !important; background: white !important; }
  body > *:not(#pdf-overlay) { display: none !important; }
  #pdf-overlay {
    display: block !important;
    /* MUSI być static — element position:fixed drukuje się tylko na 1. stronie.
       Statyczny przepływ pozwala treści paginować na kolejne strony. */
    position: static !important;
    inset: auto !important;
    height: auto !important;
    max-height: none !important;
    background: white !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #pdf-overlay .modal-box {
    box-shadow: none !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: white !important;
    color: #000 !important;
  }
  .modal-footer { display: none !important; }
  .pdf-row { page-break-inside: avoid; }
  .pdf-name, .pdf-addr, .pdf-meta { color: #000 !important; }
  .pdf-eta { color: var(--st-draft) !important; }
}

/* ── Nowy widok kalendarza ── */
.cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: var(--fs-11);
  align-items: center;
  color: var(--text2);
}
.cal-legend span { display: flex; align-items: center; gap: 5px; }
.cal-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cal-legend-sms { margin-left: auto; color: var(--text3); gap: 4px; }
.cal-legend-sms b { font-weight: 700; color: var(--text2); }

/* Nadzpisanie starych styli komórek */
.cal-cell.has-events { background: #fafbff; }
.cal-cell:hover { background: #f4f6ff; }

/* Numer dnia — używamy cal-day (JS używa tej klasy) */
.cal-day {
  font-size: var(--fs-11);
  color: var(--text3);
  margin-bottom: 3px;
  font-weight: 500;
}
.cal-day.today {
  background: var(--primary);
  color: white !important;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-10);
}
.cal-cell.other-month .cal-day { color: var(--gray-300); }
.cal-cell.other-month { opacity: .7; }

/* Bary tras na kalendarzu */
.cal-bars { min-height: 24px; }
.cal-route-bar {
  height: 15px;
  margin-bottom: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: opacity .12s;
}
.cal-route-bar:hover { opacity: .72 !important; }
.cal-bar-label {
  font-size: var(--fs-10);
  font-weight: 600;
  color: white;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Lista tras tygodnia/miesiąca pod kalendarzem — rytm jak grid tras */
.cal-route-list-item {
  padding: 8px 12px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid;
  cursor: pointer;
  transition: background .1s;
}
.cal-route-list-item:hover { background: #f7f8ff; }

/* Sandbox toggle styl w topbarze */
#sandbox-toggle-wrap { transition: background .2s, border-color .2s, color .2s; }

/* ══════════════════════════════════════════════════════
   Widok zakładki "Trasa" — lista przystanków w edytorze
   ══════════════════════════════════════════════════════ */

/* Nagłówek i stopka listy */
.r-hdr {
  padding: 10px 14px;
  background: var(--success-light, var(--tint-green));
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
  flex-shrink: 0;
}
.r-ftr {
  padding: 8px 14px;
  font-size: var(--fs-11);
  color: var(--text2, var(--text2));
  border-top: 1px solid var(--border);
  background: var(--surface, var(--gray-50));
  font-weight: 500;
  flex-shrink: 0;
}
.drag-hint {
  padding: 5px 14px;
  font-size: var(--fs-11);
  color: var(--text3, var(--gray-500));
  background: var(--gray-75);
  border-bottom: 1px solid var(--border-light, var(--surface2));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.add-break-editor {
  font-size: var(--fs-11);
  padding: 2px 8px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  color: var(--gray-800);
  margin-left: auto;
}
.add-break-editor:hover { background: var(--surface2); }

/* Karta przystanku */
.route-stop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light, var(--surface2));
  background: white;
  transition: background .12s;
  position: relative;
}
.route-stop:hover { background: #fafbff; }
.route-stop.dragging { opacity: .45; }
.route-stop.drag-over { border-top: 2px solid var(--primary, var(--st-draft)); }

/* Uchwyt drag */
.dh {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  cursor: grab;
  flex-shrink: 0;
  opacity: .35;
}
.dh:hover { opacity: .7; }
.dh span {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--text3, var(--text3));
  border-radius: 2px;
}

/* Numer kolejny */
.snum {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary, var(--st-draft));
  color: white;
  font-size: var(--fs-12);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Treść */
.sname {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--primary, var(--st-draft));
  font-family: var(--mono);
}
.saddr {
  font-size: var(--fs-12);
  color: var(--text2, var(--text2));
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.smeta {
  font-size: var(--fs-11);
  color: var(--text3, var(--gray-500));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ETA, okno, dystans */
.seta {
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--st-draft);
  background: var(--tint-blue);
  padding: 2px 7px;
  border-radius: 99px;
}
.swindow {
  font-size: var(--fs-11);
  color: var(--gray-800);
  background: #f5f5f5;
  padding: 2px 7px;
  border-radius: 99px;
}
.sdist {
  font-size: var(--fs-11);
  color: var(--gray-600);
  padding: 2px 6px;
}

/* Przycisk SMS na przystanku */
.stop-sms {
  font-size: var(--fs-11);
  padding: 3px 10px;
  border: 1px solid #b3d4f5;
  border-radius: 6px;
  background: var(--tint-blue);
  color: var(--st-draft);
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
}
.stop-sms:hover { background: #d4eaff; }
.stop-sms.sent {
  background: var(--tint-green);
  border-color: #97C459;
  color: var(--st-approved);
  cursor: default;
}

/* Przycisk odepnij */
.stop-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--gray-300);
  font-size: var(--fs-14);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .12s, background .12s;
}
.stop-remove:hover { color: #e24b4a; background: var(--tint-red); }

/* Wiersz postoju (przerwa) */
.break-row-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light, var(--surface2));
  background: var(--gray-75);
  font-size: var(--fs-12);
  transition: background .12s;
}
.break-row-editor.drag-over { border-top: 2px solid var(--st-settle); }
.break-drag-handle {
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: grab;
  opacity: .35;
}
.break-drag-handle span {
  display: block;
  width: 14px;
  height: 2px;
  background: var(--text3);
  border-radius: 2px;
}
.break-del {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--gray-300);
  font-size: var(--fs-14);
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.break-del:hover { color: #e24b4a; background: var(--tint-red); }

/* Szybkie wyszukiwanie zamówień w zakładce Trasa */
.rqs-item:hover { background: #f0f6ff !important; }
#route-order-search:focus { border-color: var(--st-draft) !important; box-shadow: 0 0 0 2px #185FA522; }

/* Przycisk: wyślij tel. kierowcy do klienta */
.stop-sms-driver {
  font-size: var(--fs-11);
  padding: 3px 10px;
  border: 1px solid #c5ddf5;
  border-radius: 6px;
  background: #f0f7ff;
  color: #0C447C;
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
  white-space: nowrap;
}
.stop-sms-driver:hover { background: #daeeff; }
.stop-sms-driver.sent {
  background: var(--tint-green);
  border-color: #97C459;
  color: var(--st-approved);
  cursor: default;
}

/* ══════════════════════════════════════════
   Widok odpowiedzi SMS od klientów
   ══════════════════════════════════════════ */
.sms-reply-item {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  transition: background .1s;
}
.sms-reply-item:hover { background: #f7f8ff; cursor: default; }
.sms-reply-item.unread { background: #FAFBFF; border-left: 3px solid var(--st-draft); }
.sms-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.sms-reply-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--st-draft);
  flex-shrink: 0;
}
.sms-reply-client {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sms-reply-orderid {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--fs-11);
  color: var(--st-draft);
  background: var(--tint-blue);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.sms-reply-route {
  font-size: var(--fs-11);
  color: var(--ink-amber);
  background: var(--tint-amber);
  border: 1px solid #EF9F2755;
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.sms-reply-time {
  font-size: var(--fs-11);
  color: var(--text3);
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}
.sms-reply-phone {
  font-size: var(--fs-11);
  color: var(--text3);
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 5px;
}
.sms-reply-text {
  font-size: var(--fs-13);
  color: var(--text);
  background: var(--surface2);
  border-radius: 0 8px 8px 8px;
  padding: 8px 12px;
  display: inline-block;
  max-width: 100%;
  line-height: 1.5;
  margin-bottom: 4px;
}
.sms-reply-addr {
  font-size: var(--fs-11);
  color: var(--text3);
}
/* Lista konwersacji i otwarty wątek — pełna szerokość (fullscreen) */
.sms-pane { width: 100%; }
.sms-thread-pane { width: 100%; }

/* Znacznik potwierdzonego okna dostawy */
.seta-confirmed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--st-approved);
  background: var(--tint-green);
  border: 1px solid #97C45966;
  padding: 2px 8px;
  border-radius: 99px;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
.seta-confirmed.changed {
  color: var(--ink-amber);
  background: var(--tint-amber);
  border-color: #EF9F2766;
}
.seta-confirmed.invalidated {
  color: var(--err);
  background: var(--tint-red);
  border-color: #F0959566;
  font-family: var(--font);
}

/* Wyszukiwarka globalna — przyciski akcji */


/* ══════════════════════════════════════════════════════
   Zakładka TRASA — nowy układ przystanku (stop-row)
   ══════════════════════════════════════════════════════ */
.stop-row {
  display: grid;
  grid-template-columns: 44px 1fr 148px;
  gap: 0 10px;
  padding: 10px 12px 10px 8px;
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid transparent;
  align-items: start;
  background: var(--surface);
  transition: background .1s;
}
.stop-row:hover { background: #fafbff; }
.stop-row.dragging { opacity: .4; }
.stop-row.drag-over { border-top: 2px solid var(--primary); }

/* Lewa kolumna: uchwyt + numer */
.stop-row-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 1px;
}
.stop-row-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: var(--fs-12);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  flex-shrink: 0;
}

/* Środkowa: dane klienta */
.stop-row-client { min-width: 0; }
.stop-row-id {
  font-family: var(--mono);
  font-size: var(--fs-12);
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.stop-row-name {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stop-row-addr {
  font-size: var(--fs-12);
  color: var(--text2);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stop-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1px;
}
.stop-row-phone {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text);
  font-family: var(--mono);
}
.stop-row-lead {
  font-size: var(--fs-10);
  color: var(--text3);
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 3px;
}
.stop-row-product {
  font-size: var(--fs-10);
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Prawa kolumna: ETA + akcje */
.stop-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 148px;
  flex-shrink: 0;
}
.stop-row-eta {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--primary);
  font-family: var(--mono);
  letter-spacing: -.3px;
}
.stop-row-window {
  font-size: var(--fs-10);
  color: var(--text3);
  font-family: var(--mono);
}
.stop-row-dist {
  font-size: var(--fs-10);
  color: var(--text3);
}
.stop-row-actions {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-top: 5px;
}
.stop-row-btn {
  font-size: var(--fs-10);
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 600;
  white-space: nowrap;
  transition: background .1s, color .1s;
}
.stop-row-btn:hover { background: #e8eaf6; color: var(--text); border-color: var(--gray-400); }
.stop-row-btn.ok { background: var(--ok-lt); color: var(--ok); border-color: #97C45988; }
/* SMS wysłany, czeka na raport doręczenia — żółty (zielony dopiero po DELIVERED) */
.stop-row-btn.pending { background: var(--tint-amber); color: var(--ink-amber); border-color: #EF9F2788; }
/* SMS niedoręczony (UNDELIVERED/EXPIRED/REJECTED/ERROR) — czerwony */
.stop-row-btn.fail { background: var(--tint-red); color: var(--err); border-color: #A32D2D55; }
.stop-row-btn.secondary { color: var(--text3); background: transparent; }

/* ── Jednolity chip: identyczna geometria dla WSZYSTKICH plakietek przystanku,
      różni je TYLKO kolor. Zastępuje plakietki z inline'owymi font-size/padding. ── */
.chip {
  display: inline-flex; align-items: center;
  height: 19px; padding: 0 8px;
  font-size: var(--fs-10); font-weight: 600; line-height: 1;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap; letter-spacing: .2px;
  font-family: 'IBM Plex Mono', monospace;
}
.chip.c-green { background: var(--tint-green); color: var(--st-approved); border-color: #97C45966; }
.chip.c-amber { background: var(--tint-amber); color: var(--ink-amber); border-color: #EF9F2766; }
.chip.c-red   { background: var(--tint-red); color: var(--err); border-color: #A32D2D40; }
.chip.c-grey  { background: #F3F4F6; color: #9CA3AF; border-color: #E5E7EB; }
.chip.c-blue  { background: #EAF2FD; color: #2B6CB0; border-color: #4a8ef040; }

/* ── SMS jako jednowierszowy pomarańczowy monit pod godziną (bez pudełka/bulleta) ── */
.sms-monit { font-size: var(--fs-11); font-weight: 600; font-family: 'IBM Plex Mono', monospace;
  color: #C2410C; white-space: nowrap; line-height: 1.2; margin-top: 1px; }
.sms-monit.okwin { color: var(--st-approved); }

/* ── Zwarty pasek akcji: złączone przyciski (pill), zamiast luźnych bulletów ── */
.acts { display: inline-flex; border: 1px solid var(--border);
  border-radius: var(--radius-pill); overflow: hidden; background: var(--surface); }
.acts button {
  border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text2);
  height: 24px; padding: 0 10px; font-size: var(--fs-11); font-weight: 600;
  font-family: 'IBM Plex Mono', monospace; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  transition: background .1s, color .1s;
}
.acts button:first-child { border-left: 0; }
.acts button:hover { background: #eef0fb; color: var(--text); }
.acts button.sent    { color: var(--st-approved); background: var(--tint-green); }
.acts button.pending { color: var(--ink-amber); background: var(--tint-amber); }
.acts button.fail    { color: var(--err); background: var(--tint-red); }
.acts button.danger  { color: var(--err); }
.acts button.danger:hover { background: var(--tint-red); }
.acts button:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Wariant A: czas montażu jako pierwszy, EDYTOWALNY segment paska (planowanie/szkic) */
.acts button.time { color: var(--ink-amber); background: var(--tint-amber); }
.acts button.time:hover { background: #FCE9CC; }

/* ── Metryki zamówienia: wartość · waga · kubatura (szybki sygnał „duże/drogie” vs „taniocha”) ── */
.stop-row-metrics { font-size: var(--fs-13); font-family: 'IBM Plex Mono', monospace; color: #6f7681;
  margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stop-row-metrics .val { color: var(--text); font-weight: 700; }
.stop-row-metrics .big { color: #7a3ea0; }   /* duże/drogie — lekki akcent */

/* ══════════════════════════════════════════════════════
   Zakładka ZAMÓWIENIA — nowy układ (order-row)
   ══════════════════════════════════════════════════════ */
.order-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface);
  transition: background .1s;
  cursor: pointer;
}
.order-row:hover { background: #fafbff; }
.order-row.sel { background: var(--tint-blue); }
.order-row.in-other-route { opacity: .6; }
.order-row-body { flex: 1; min-width: 0; }
.order-row-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.order-row-id {
  font-family: var(--mono);
  font-size: var(--fs-11);
  font-weight: 700;
  flex-shrink: 0;
}
.order-row-name {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.order-row-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.order-row-mid {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.order-row-addr {
  font-size: var(--fs-11);
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.order-row-lead {
  font-size: var(--fs-10);
  color: var(--text3);
  background: var(--surface2);
  padding: 1px 6px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.order-row-bot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.order-row-phone {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text);
  font-family: var(--mono);
  flex-shrink: 0;
}
.order-row-product {
  font-size: var(--fs-10);
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-row-action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-top: 1px;
}
.order-row-pin {
  font-size: var(--fs-10);
  padding: 2px 10px;
  border: 1px solid #185FA540;
  border-radius: var(--radius-pill);
  background: var(--primary-lt, var(--tint-blue));
  color: var(--primary);
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  white-space: nowrap;
  transition: background .1s;
}
.order-row-pin:hover { background: #d4eaff; border-color: var(--primary); }
.order-row-in-route {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-lt);
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

.stop-row-date {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text2);
  font-family: var(--mono);
  letter-spacing: .3px;
}

/* Dzień tygodnia nad godziną ETA */
.stop-row-day {
  font-size: var(--fs-10);
  font-weight: 700;
  color: var(--text3);
  font-family: var(--mono);
  letter-spacing: .5px;
  line-height: 1.1;
}

/* Wiersz badge + ID w jednej linii */
.stop-row-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.stop-row-orderid {
  font-family: var(--mono);
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--primary);
}

/* Data dostawy — czytelna, ciemna */
.stop-row-leadtime {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--text2);
  margin: 2px 0;
}

/* ── ASSIGN CHIPS — wybór kierowców i pojazdu ── */
.achip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: var(--fs-11);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--mono);
  white-space: nowrap;
  transition: background .1s, color .1s, border-color .1s;
  margin: 2px;
}
.achip:hover { background: #e8eaf6; color: var(--text); border-color: var(--gray-400); }
.achip.sel-d1  { background: var(--primary); color: white; border-color: var(--primary); }
.achip.sel-d2  { background: var(--ok);      color: white; border-color: var(--ok); }
.achip.sel-car { background: var(--warn);    color: white; border-color: var(--warn); }
.achip.conflict { opacity: .4; cursor: not-allowed; }
.assign-row { display: flex; flex-wrap: wrap; gap: 0; margin-top: 4px; }

/* ── Podsumowanie trasy — stats bar (overlay na mapie) ── */
#route-stats-bar {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.16);
  z-index: 10;
  white-space: nowrap;
}

/* ── Przyciski akcji w panelu trasy — styl zakładkowy ── */
#bottom .action-group {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
#bottom .action-group button {
  flex: 1;
  padding: 8px 6px;
  font-size: var(--fs-12);
  font-weight: 600;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text2);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s, color .15s;
}
#bottom .action-group button:last-child { border-right: none; }
#bottom .action-group button:hover { background: var(--surface2); color: var(--text); }
#bottom .action-group button.act-active {
  background: var(--primary);
  color: white;
  font-weight: 700;
}
#bottom .action-group button.act-draft {
  background: var(--surface2);
  color: var(--text2);
  font-weight: 700;
  border-right: 1px solid var(--border);
}
#bottom .action-group button.act-active-ok {
  background: #2D6A0F;
  color: white;
  font-weight: 700;
}
#bottom .action-single {
  width: 100%;
  padding: 8px;
  font-size: var(--fs-12);
  font-weight: 600;
  font-family: var(--font);
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, color .15s;
  text-align: center;
}
#bottom .action-single:hover { background: var(--surface2); color: var(--text); }
#bottom .action-single:disabled { opacity: .4; cursor: default; }
#bottom .action-group button:disabled { opacity: .4; cursor: default; }

/* ── PRZEŁĄCZNIK TRYBU PLANOWANIA (termin klienta / produkcji) ── */
.plan-mode-toggle {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  background: var(--surface, var(--white));
  border: 1px solid var(--border, var(--border));
  border-radius: 99px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  overflow: hidden;
}
.pm-btn {
  font-size: var(--fs-12);
  font-weight: 600;
  padding: 7px 16px;
  border: none;
  background: transparent;
  color: var(--text2, var(--text2));
  cursor: pointer;
  font-family: var(--font, sans-serif);
  transition: background .15s, color .15s;
}
.pm-btn:hover { background: var(--surface2, var(--surface2)); }
.pm-btn.active {
  background: var(--accent);
  color: var(--white);
}

/* ── PANEL FILTRA PRODUKCJI (edytor trasy) ── */
#prod-filter-panel {
  position: absolute;
  top: 56px;
  left: 12px;
  z-index: 11;
  width: 210px;
  background: var(--surface, var(--white));
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  padding: 12px 14px;
}
.pfp-title {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text2, var(--gray-850));
  margin-bottom: 9px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pfp-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-13);
  color: var(--text, var(--gray-950));
  margin-bottom: 8px;
  cursor: pointer;
}
.pfp-row:last-of-type { margin-bottom: 0; }
.pfp-row input { width: 15px; height: 15px; cursor: pointer; }
.pfp-dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.pfp-sep {
  border-top: 1px solid var(--border-light, var(--gray-100));
  margin: 12px 0 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   KALENDARZ v7 „obietnice" — tablica tygodnia (auto × dni) + panel obietnic
   Klasy: .wk / .lane / .bar / .crew / .pm-* / .tray / .kpi / .pd-*  (render: renderCalendar)
   ══════════════════════════════════════════════════════════════════════════ */
#cal-wrap{ display:flex; flex-direction:column; flex:1; min-height:0; padding:0; }

/* ── Górna belka ── */
#cal-wrap .board-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; flex-shrink:0; padding:11px 18px; background:var(--surface); border-bottom:1px solid var(--border); }
#cal-wrap .wknav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#cal-wrap .wknav h1{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-20); font-weight:600; letter-spacing:-.025em; white-space:nowrap; color:var(--text); }
#cal-wrap .wknav h1 .yr{ color:var(--text3); font-weight:400; }
#cal-wrap .nav-btn{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:9px; background:var(--white); color:var(--text2); font-size:var(--fs-16); cursor:pointer; transition:.15s; }
#cal-wrap .nav-btn:hover{ background:#F4F5F7; color:var(--text); border-color:#CFD4DA; }
#cal-wrap .today-btn{ margin-left:4px; padding:7px 14px; border-radius:9px; border:1px solid #CFCCF7; background:#F2F1FE; color:#4038C7; font-size:var(--fs-12); font-weight:600; cursor:pointer; transition:.15s; }
#cal-wrap .today-btn:hover{ background:#E8E6FD; }
#cal-wrap .wk-span{ display:flex; gap:2px; margin-left:6px; padding:2px; background:#F1F3F5; border:1px solid var(--border); border-radius:10px; }
#cal-wrap .ws-btn{ padding:5px 11px; border:none; border-radius:8px; background:transparent; color:var(--text2); font-family:'IBM Plex Mono',monospace; font-size:var(--fs-12); font-weight:600; letter-spacing:-.02em; cursor:pointer; transition:.15s; }
#cal-wrap .ws-btn:hover{ color:var(--text); }
#cal-wrap .ws-btn.is-on{ background:var(--white); color:var(--text); box-shadow:0 1px 2px rgba(20,24,32,.12); }
#cal-wrap .kpis{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
#cal-wrap .kpi{ display:flex; align-items:baseline; gap:7px; padding:7px 13px; border-radius:10px; background:#F7F8FA; border:1px solid var(--border); white-space:nowrap; }
#cal-wrap .kpi b{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-15); font-weight:600; letter-spacing:-.02em; color:var(--text); }
#cal-wrap .kpi span{ font-size:var(--fs-12); color:var(--text3); font-weight:500; }
#cal-wrap .kpi.warn{ background:#FEF6E7; border-color:#F2DFB6; }
#cal-wrap .kpi.warn b{ color:#8A5000; }
#cal-wrap .kpi.alert{ background:#FDECEB; border-color:#F3C9C6; }
#cal-wrap .kpi.alert b{ color:#C0392F; }

/* ── Body dwukolumnowe ── */
#cal-wrap .board-body{ flex:1; display:flex; min-height:0; }
#cal-wrap .grid-pane{ flex:1; min-width:0; overflow:auto; padding:14px; }
#cal-wrap .wk{ display:grid; grid-template-columns:190px repeat(6,minmax(168px,1fr)); min-width:1198px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(20,24,32,.05); }

/* ── Strefa pod kalendarzem: lewa kolumna (siatka + pod-kalendarz), tray z prawej ── */
#cal-wrap .cal-main{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
#cal-wrap .cal-under{ flex-shrink:0; display:flex; flex-direction:column; max-height:44vh; overflow-y:auto; }

/* ── Trasy bez obsady — „wiszą" pod kalendarzem do drag&drop ── */
#cal-wrap .board-unassigned{ border-top:1px solid var(--border); background:#FFF7F2; padding:10px 16px 12px; }
#cal-wrap .board-unassigned:empty{ display:none; }
#cal-wrap .uc-head{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
#cal-wrap .uc-head .uc-ic{ width:15px; height:15px; color:#C0392F; display:flex; }
#cal-wrap .uc-head .uc-ic svg{ width:15px; height:15px; }
#cal-wrap .uc-head h4{ font-size:var(--fs-11); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#9b3030; margin:0; }
#cal-wrap .uc-count{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; color:#fff; background:#C0392F; border-radius:99px; padding:1px 8px; }
#cal-wrap .uc-hint{ margin-left:auto; font-size:var(--fs-11); color:var(--text3); }
#cal-wrap .uc-list{ display:flex; gap:8px; flex-wrap:wrap; }
#cal-wrap .uc{ display:flex; align-items:stretch; gap:8px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--gray-300, #cbd0d6); border-radius:9px; padding:8px 10px; min-width:212px; max-width:290px; cursor:pointer; box-shadow:0 1px 2px rgba(20,24,32,.05); }
#cal-wrap .uc[draggable="true"]{ cursor:grab; }
#cal-wrap .uc[draggable="true"]:active{ cursor:grabbing; }
#cal-wrap .uc.draft{ border-left-color:#185FA5; }
#cal-wrap .uc.approved{ border-left-color:#3B6D11; }
#cal-wrap .uc.settle{ border-left-color:#B45309; }
#cal-wrap .uc-grip{ display:flex; align-items:center; color:var(--text3); }
#cal-wrap .uc-grip svg{ width:16px; height:16px; }
#cal-wrap .uc-grip.warn{ color:#C0392F; }
#cal-wrap .uc-body{ min-width:0; flex:1; }
#cal-wrap .uc-top{ display:flex; align-items:center; gap:6px; }
#cal-wrap .uc-name{ font-size:var(--fs-13); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cal-wrap .uc-badge{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:99px; padding:1px 6px; background:#EEF0F2; color:var(--text2); flex:0 0 auto; }
#cal-wrap .uc-meta{ font-size:var(--fs-11); color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Obsady w tym tygodniu — zwijany pasek pod kalendarzem ── */
#cal-wrap .board-crews{ flex-shrink:0; border-top:1px solid var(--border); background:var(--surface); }
#cal-wrap .cs-toggle{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:10px 16px; cursor:pointer; font-family:inherit; text-align:left; }
#cal-wrap .cs-toggle:hover{ background:#FAFBFC; }
#cal-wrap .cs-caret{ width:15px; height:15px; color:var(--text3); transition:transform .15s ease; flex:0 0 auto; }
#cal-wrap .board-crews.open .cs-caret{ transform:rotate(90deg); }
#cal-wrap .cs-toggle h4{ font-size:var(--fs-11); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); margin:0; }
#cal-wrap .cs-hint{ margin-left:auto; font-size:var(--fs-11); font-weight:600; color:var(--accent); }
#cal-wrap .cs-body{ display:none; padding:0 16px 14px; }
#cal-wrap .board-crews.open .cs-body{ display:block; }
#cal-wrap .cs-count{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text2); background:#F1F3F5; border-radius:99px; padding:1px 8px; }
#cal-wrap .cs-legend{ display:flex; gap:6px; margin:0 0 9px; }
#cal-wrap .cs-empty{ font-size:var(--fs-12); color:var(--text3); }
#cal-wrap .cs-list{ display:flex; flex-direction:column; gap:2px; }
#cal-wrap .cs-row{ display:grid; grid-template-columns:118px minmax(170px,1.3fr) 116px auto minmax(120px,1fr); align-items:center; gap:12px; padding:7px 8px; border-radius:8px; }
#cal-wrap .cs-row:nth-child(odd){ background:#FAFBFC; }
#cal-wrap .cs-van{ display:flex; align-items:center; gap:6px; }
#cal-wrap .cs-plate{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:var(--text); }
#cal-wrap .cs-svc{ font-size:10px; font-weight:700; color:#8a5000; background:#FEF3E2; border-radius:99px; padding:1px 6px; }
#cal-wrap .cs-crew{ display:flex; flex-wrap:wrap; gap:8px 12px; }
#cal-wrap .cs-crew .drv{ display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-13); color:var(--text); }
#cal-wrap .cs-crew .drv i{ width:8px; height:8px; border-radius:50%; background:var(--c,#9aa); flex:0 0 auto; }
#cal-wrap .cs-crew .drv.off{ color:var(--text3); text-decoration:line-through; }
#cal-wrap .cs-crew .drv em{ font-style:normal; font-size:10px; font-weight:700; color:#8a5000; background:#FEF3E2; border-radius:99px; padding:0 5px; text-decoration:none; }
#cal-wrap .cs-term{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text2); white-space:nowrap; }
#cal-wrap .cs-days{ display:flex; gap:3px; }
#cal-wrap .cs-chip{ font-size:10.5px; font-weight:700; letter-spacing:.02em; color:var(--text3); background:#EEF0F2; border-radius:5px; padding:2px 6px; min-width:24px; text-align:center; }
#cal-wrap .cs-chip.out{ opacity:.32; }
#cal-wrap .cs-chip.idle{ background:#E8EBEF; color:var(--text2); }
#cal-wrap .cs-chip.route{ background:#E7EFFA; color:#185FA5; }
#cal-wrap .cs-chip.leave{ background:#FEF3E2; color:#8a5000; }
#cal-wrap .cs-chip.svc{ background:#ECEEF0; color:var(--text3); text-decoration:line-through; }
#cal-wrap .cs-chip.sm{ min-width:0; }
#cal-wrap .cs-routes{ display:flex; flex-wrap:wrap; gap:5px; }
#cal-wrap .cs-route{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; color:var(--text); background:#EEF0F2; border-radius:6px; padding:2px 8px; cursor:pointer; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#cal-wrap .cs-route:hover{ background:#E3E7EB; }
#cal-wrap .cs-noroute{ font-size:var(--fs-12); color:var(--text3); }

/* ── Nagłówek dni ── */
#cal-wrap .wk-corner{ display:flex; flex-direction:column; justify-content:center; gap:3px; padding:10px 16px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:#FAFBFC; }
#cal-wrap .wk-corner span{ font-size:var(--fs-11); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); }
#cal-wrap .wk-corner b{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-13); font-weight:600; color:var(--text2); }
#cal-wrap .wk-day{ padding:9px 12px 8px; border-left:1px solid var(--border-light); border-bottom:1px solid var(--border); background:#FAFBFC; }
#cal-wrap .wk-day.is-today{ background:#F1F0FE; box-shadow:inset 0 -2px 0 var(--accent); }
#cal-wrap .wk-day-top{ display:flex; align-items:baseline; gap:8px; }
#cal-wrap .dow{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); }
#cal-wrap .dnum{ font-family:'IBM Plex Mono',monospace; font-size:23px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--text); }
#cal-wrap .wk-day.is-today .dnum{ color:#4038C7; }
#cal-wrap .chip-today{ margin-left:auto; font-size:var(--fs-11); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--white); background:var(--accent); border-radius:99px; padding:2px 7px; }
#cal-wrap .cap{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
#cal-wrap .cap-meter{ display:flex; gap:2px; height:4px; border-radius:99px; overflow:hidden; background:#E7EAEE; }
#cal-wrap .cap-busy{ background:#C6CBD2; }
#cal-wrap .cap-free{ background:#7BAE4B; }
#cal-wrap .cap-txt{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; color:var(--st-approved); display:flex; gap:6px; }
#cal-wrap .cap-txt.full{ color:#C0392F; }
#cal-wrap .cap-txt em{ color:#A6453E; font-style:normal; font-weight:500; }

/* ── Obietnice w nagłówku dnia ── */
#cal-wrap .pm-strip{ margin-top:8px; display:flex; flex-direction:column; gap:3px; padding-top:7px; border-top:1px dashed #D8DCE1; cursor:pointer; }
#cal-wrap .pm-strip.empty{ margin-top:8px; padding-top:7px; border-top:1px dashed #D8DCE1; font-size:11.5px; color:#B6BCC4; }
#cal-wrap .pm-strip:hover .pm-cnt{ color:var(--text); }
#cal-wrap .pm-strip.is-open{ border-top-color:var(--accent); }
#cal-wrap .pm-head{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-bottom:1px; }
#cal-wrap .pm-cnt{ font-size:var(--fs-11); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
#cal-wrap .pm-f{ font-size:var(--fs-11); font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-radius:99px; padding:1px 6px; white-space:nowrap; }
#cal-wrap .pm-f.shift{ background:#FAEEDA; color:var(--ink-amber); }
#cal-wrap .pm-f.none{ background:var(--tint-red); color:#C0392F; }
#cal-wrap .pm{ display:flex; align-items:center; gap:5px; min-width:0; padding:3px 6px; border-radius:6px; background:#F4F6F8; cursor:grab; transition:.15s; }
#cal-wrap .pm:hover{ background:#EAEDF1; }
#cal-wrap .pm:active{ opacity:.45; }
#cal-wrap .pm i{ width:6px; height:6px; border-radius:50%; flex-shrink:0; background:#8FAF6A; }
#cal-wrap .pm b{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:-.02em; color:var(--text2); }
#cal-wrap .pm-note{ margin-left:auto; font-size:var(--fs-11); font-weight:500; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cal-wrap .pm.shift{ background:#FAEEDA; box-shadow:inset 0 0 0 1px #EBD6AE; }
#cal-wrap .pm.shift i{ background:var(--st-settle); }
#cal-wrap .pm.shift b{ color:#6B3F08; }
#cal-wrap .pm.shift .pm-note{ color:var(--ink-amber); font-weight:600; }
#cal-wrap .pm.none{ background:var(--white); box-shadow:inset 0 0 0 1px #C0392F; }
#cal-wrap .pm.none i{ background:#C0392F; }
#cal-wrap .pm.none b{ color:#8E2B23; }
#cal-wrap .pm.none .pm-note{ color:#C0392F; font-weight:600; }
#cal-wrap .pm-note.fit{ font-family:'IBM Plex Mono',monospace; font-weight:700; letter-spacing:-.02em; color:var(--st-draft)!important; background:var(--tint-blue); border-radius:99px; padding:1px 6px; margin-left:auto; }
#cal-wrap .pm-note.nofit{ font-style:italic; font-weight:600; }

/* ── Wiersz auta ── */
#cal-wrap .lane{ display:grid; grid-column:1/-1; grid-template-columns:190px 1fr; border-bottom:1px solid var(--border); }
#cal-wrap .lane:last-of-type{ border-bottom:none; }
#cal-wrap .lane:hover .lane-van{ background:#F7F8FA; }
#cal-wrap .lane-van{ display:flex; align-items:center; gap:10px; padding:0 16px; min-height:82px; border-right:1px solid var(--border); background:#FCFCFD; transition:background .15s; }
#cal-wrap .van-ic{ width:19px; height:19px; color:#AEB4BD; flex-shrink:0; }
#cal-wrap .van-ic svg{ width:100%; height:100%; display:block; }
#cal-wrap .van-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
#cal-wrap .plate{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-15); font-weight:600; letter-spacing:-.02em; white-space:nowrap; color:var(--text); }
#cal-wrap .van-state{ font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:5px; color:var(--text3); }
#cal-wrap .van-state::before{ content:''; width:6px; height:6px; border-radius:50%; background:#7BAE4B; }
#cal-wrap .van-state.serwis{ color:#8A5000; }
#cal-wrap .van-state.serwis::before{ background:var(--st-settle); }
#cal-wrap .lane-body{ display:flex; flex-direction:column; background:var(--white); min-width:0; }
#cal-wrap .lane-track{ position:relative; display:grid; grid-template-columns:repeat(6,1fr); flex:1; min-height:52px; }
#cal-wrap .cell{ border-left:1px solid var(--border-light); position:relative; }
#cal-wrap .cell.is-today{ background:#FAFAFE; box-shadow:inset 1px 0 0 rgba(79,70,229,.22),inset -1px 0 0 rgba(79,70,229,.22); }
#cal-wrap .cell.is-free{ cursor:pointer; transition:background .15s; background:radial-gradient(circle at 50% 50%,#DEE2E7 1.1px,transparent 1.3px) 0 0/10px 10px; }
#cal-wrap .cell.is-free:hover{ background:#EEF6E4; }
#cal-wrap .cell.is-service{ background:repeating-linear-gradient(45deg,#F2F2F0,#F2F2F0 6px,#E9E9E6 6px,#E9E9E6 12px); }
#cal-wrap .cell-add{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-15); font-weight:600; color:var(--white); background:#7BAE4B; box-shadow:0 2px 6px rgba(20,24,32,.2); opacity:0; transition:opacity .15s; pointer-events:none; }
#cal-wrap .cell.is-free:hover .cell-add{ opacity:1; }
#cal-wrap .cell.drop-hot{ background:#E6F0FF!important; box-shadow:inset 0 0 0 2px var(--st-draft); }

/* ── Pasek trasy ── */
#cal-wrap .bar{ position:absolute; top:5px; bottom:5px; z-index:2; container-type:inline-size; border-radius:9px; padding:7px 11px; display:flex; flex-direction:column; justify-content:center; gap:5px; overflow:hidden; cursor:pointer; color:var(--white);
  box-shadow:0 1px 3px rgba(20,24,32,.22),inset 0 0 0 1px rgba(255,255,255,.14); transition:.15s; }
#cal-wrap .bar:hover{ filter:brightness(1.07); box-shadow:0 4px 14px rgba(20,24,32,.24),inset 0 0 0 1px rgba(255,255,255,.3); }
#cal-wrap .bar.draft{ background:var(--st-draft); }
#cal-wrap .bar.approved{ background:var(--st-approved); }
#cal-wrap .bar.settle{ background:var(--st-settle); color:#3A2400; }
#cal-wrap .bar.archived{ background:var(--st-archived); background-image:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(255,255,255,.16) 6px,rgba(255,255,255,.16) 12px); }
#cal-wrap .bar.no-crew{ box-shadow:0 1px 3px rgba(20,24,32,.22),inset 0 0 0 2px #C0392F; }
#cal-wrap .bar-load{ position:absolute; top:6px; right:9px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; line-height:1; letter-spacing:-.02em; opacity:.92; }
#cal-wrap .bar-head{ display:flex; align-items:center; gap:7px; min-width:0; padding-right:44px; }
#cal-wrap .bar-name{ font-family:'IBM Plex Mono',monospace; font-size:14.5px; font-weight:700; letter-spacing:-.02em; line-height:1; white-space:nowrap; }
#cal-wrap .bar-flag{ display:flex; align-items:center; gap:4px; flex-shrink:0; font-size:var(--fs-11); font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:#C0392F; color:var(--white); border-radius:99px; padding:2px 7px 2px 5px; white-space:nowrap; }
#cal-wrap .bf-ic{ width:11px; height:11px; }
#cal-wrap .bf-ic svg{ width:100%; height:100%; display:block; }
#cal-wrap .bar-foot{ display:flex; align-items:center; gap:9px; min-width:0; flex-wrap:nowrap; }
#cal-wrap .bar-dir{ display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; font-size:var(--fs-12); font-weight:500; opacity:.95; }
#cal-wrap .bar-dir-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
#cal-wrap .flag{ display:inline-block; width:16px; height:11px; border-radius:2px; flex-shrink:0; box-shadow:0 0 0 1px rgba(0,0,0,.2); }
#cal-wrap .flag.f-pl{ background:linear-gradient(to bottom,var(--white) 50%,#DC143C 50%); }
#cal-wrap .flag.f-de{ background:linear-gradient(to bottom,var(--text) 33.33%,#DD0000 33.33%,#DD0000 66.66%,#FFCE00 66.66%); }
#cal-wrap .flag.f-at{ background:linear-gradient(to bottom,#ED2939 33.33%,var(--white) 33.33%,var(--white) 66.66%,#ED2939 66.66%); }
#cal-wrap .flag.f-cz{ background:linear-gradient(to bottom,var(--white) 50%,#D7141A 50%); position:relative; overflow:hidden; }
#cal-wrap .flag.f-cz::before{ content:''; position:absolute; inset:0; width:50%; background:#11457E; clip-path:polygon(0 0,100% 50%,0 100%); }
#cal-wrap .sms{ margin-left:auto; flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:6px; }
#cal-wrap .sms-meter{ display:none; gap:1.5px; width:26px; height:5px; border-radius:99px; overflow:hidden; background:rgba(0,0,0,.26); }
@container (min-width:210px){ #cal-wrap .bar .sms-meter{ display:flex; } }
#cal-wrap .sms-meter i{ display:block; }
#cal-wrap .s-ok{ background:var(--white); }
#cal-wrap .s-re{ background:#FFD166; }
#cal-wrap .s-no{ background:rgba(255,255,255,.3); }
#cal-wrap .sms-nums{ display:flex; align-items:center; gap:5px; }
#cal-wrap .sms-nums b{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
#cal-wrap .sms-sent{ opacity:.82; }                 /* ✉ wysłane / łącznie */
#cal-wrap .sms-ok{ color:var(--white); }            /* ✓ potwierdzone — biały = wyraźny na kolorowym pasku */
#cal-wrap .sms-ok.all{ color:#CFF6D6; }             /* komplet potwierdzony */
#cal-wrap .sms-re{ color:#FFD166; }                 /* ↩ odpisał / odmowa */
#cal-wrap .bar.settle .sms-re{ color:#8A5000; }
#cal-wrap .bar.settle .sms-meter{ background:rgba(0,0,0,.2); }
#cal-wrap .bar.settle .s-re{ background:#8A5000; }
#cal-wrap .bar.service{ background:var(--st-service)!important; color:#33322E; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; cursor:pointer; box-shadow:none; }
#cal-wrap .bar.service:hover{ filter:brightness(0.94); box-shadow:inset 0 0 0 1px #7A786F; }
#cal-wrap .svc-ic{ width:15px; height:15px; flex-shrink:0; color:#6B5A34; }
#cal-wrap .svc-ic svg{ width:100%; height:100%; display:block; }
#cal-wrap .svc-txt{ font-size:var(--fs-12); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* ── Pas ekipy ── */
#cal-wrap .lane-crew{ background:var(--surface2); border-top:1px solid var(--border-light); }
#cal-wrap .crew-track{ position:relative; min-height:30px; }
#cal-wrap .crew{ position:absolute; top:4px; bottom:4px; display:flex; align-items:center; gap:12px; padding:0 9px; border-radius:6px; overflow:hidden; }
#cal-wrap .drv{ display:flex; align-items:center; gap:6px; min-width:0; flex-shrink:1; }
#cal-wrap .drv i{ width:7px; height:7px; flex-shrink:0; border-radius:50%; background:var(--c); }
#cal-wrap .drv b{ font-size:var(--fs-12); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cal-wrap .drv.off i{ background:var(--white); box-shadow:inset 0 0 0 1.5px #B23A34; }
#cal-wrap .drv.off b{ color:#B23A34; text-decoration:line-through; text-decoration-thickness:1px; opacity:.85; }
#cal-wrap .crew-warn{ font-size:var(--fs-12); font-weight:600; color:#8A5000; font-style:italic; padding-left:4px; white-space:nowrap; }
#cal-wrap .crew-warn.leave{ color:#B23A34; font-style:normal; font-weight:700; text-transform:uppercase; font-size:var(--fs-11); letter-spacing:.08em; padding-left:0; }
#cal-wrap .crew.none{ background:transparent; }
#cal-wrap .crew.leave{ background:#FCECEB; }
#cal-wrap .crew.partial{ background:transparent; }
#cal-wrap .crew-ic{ width:13px; height:13px; flex-shrink:0; color:#B23A34; margin-left:2px; }
#cal-wrap .crew-ic svg{ width:100%; height:100%; display:block; }
#cal-wrap .crew-ic.sm{ width:11px; height:11px; opacity:.8; }

/* ── Prawy panel (tray) ── */
#cal-wrap .tray{ width:322px; flex-shrink:0; border-left:1px solid var(--border); background:var(--surface); overflow-y:auto; padding:14px 14px 26px; display:flex; flex-direction:column; gap:18px; }
#cal-wrap .tray-sec h4{ font-size:var(--fs-11); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); display:flex; align-items:center; gap:8px; margin-bottom:9px; }
#cal-wrap .tray-sec h4 b{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text2); background:#F1F3F5; border-radius:99px; padding:2px 8px; letter-spacing:0; }
#cal-wrap .tray-note{ font-size:var(--fs-12); color:var(--text3); line-height:1.45; margin:-4px 0 9px; }
#cal-wrap .pd-row{ display:flex; gap:8px; padding:9px 10px; margin-bottom:7px; border-radius:10px; background:#FBFCFD; border:1px solid var(--border); border-left:3px solid #8FAF6A; }
#cal-wrap .pd-row.shift{ border-left-color:var(--st-settle); background:#FEFBF5; cursor:pointer; }
#cal-wrap .pd-row.none{ border-left-color:#C0392F; background:#FEF7F6; cursor:grab; }
#cal-wrap .pd-row.none:active{ opacity:.45; }
#cal-wrap .pd-grip{ width:15px; height:15px; color:#BFC5CC; flex-shrink:0; margin-top:2px; }
#cal-wrap .pd-grip svg{ width:100%; height:100%; display:block; }
#cal-wrap .pd-row.ok .pd-grip{ opacity:.35; }
#cal-wrap .pd-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
#cal-wrap .pd-top{ display:flex; align-items:center; gap:7px; min-width:0; }
#cal-wrap .pd-top b{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-13); font-weight:700; letter-spacing:-.02em; color:var(--text); }
#cal-wrap .pd-k{ font-size:var(--fs-12); color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cal-wrap .pd-st{ margin-left:auto; flex-shrink:0; font-size:var(--fs-11); font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:2px 7px; }
#cal-wrap .pd-st.ok{ background:var(--tint-green); color:var(--st-approved); }
#cal-wrap .pd-st.shift{ background:#FAEEDA; color:var(--ink-amber); }
#cal-wrap .pd-st.none{ background:var(--tint-red); color:#C0392F; }
#cal-wrap .pd-dates{ display:flex; align-items:flex-end; gap:8px; }
#cal-wrap .pd-d{ display:flex; flex-direction:column; gap:1px; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-12); font-weight:600; color:var(--text); }
#cal-wrap .pd-d em{ font-family:var(--font); font-size:var(--fs-11); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); font-style:normal; }
#cal-wrap .pd-d.bad{ color:var(--ink-amber); }
#cal-wrap .pd-d.miss{ color:#C0392F; }
#cal-wrap .pd-d.fit{ color:var(--st-draft); }
#cal-wrap .pd-d.fit em{ color:var(--st-draft); opacity:.65; }
#cal-wrap .pd-arw{ font-size:var(--fs-12); color:var(--text3); padding-bottom:1px; }
/* Nagłówek dnia w tygodniowej liście obietnic (tray) */
#cal-wrap .pd-day{ display:flex; align-items:center; gap:8px; margin:12px 0 6px; padding-bottom:3px; border-bottom:1px solid var(--border); }
#cal-wrap .pd-day:first-of-type{ margin-top:2px; }
#cal-wrap .pd-day-lbl{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text2); }
#cal-wrap .pd-day-n{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; color:var(--text3); background:#F1F3F5; border-radius:99px; padding:1px 7px; }
#cal-wrap .pd-day.is-sel .pd-day-lbl{ color:#4038C7; }
#cal-wrap .pd-day.is-sel{ border-bottom-color:#CFCCF7; }
/* Miasto + klaster (region) obietnicy */
#cal-wrap .pd-loc{ display:flex; align-items:center; gap:6px; min-width:0; margin-top:-1px; }
#cal-wrap .pd-city{ font-size:var(--fs-12); font-weight:600; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#cal-wrap .pd-cluster{ flex-shrink:0; display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-11); font-weight:700; letter-spacing:.02em; padding:1px 7px 1px 6px; border-radius:99px; color:var(--rc,var(--text2)); background:color-mix(in srgb, var(--rc,var(--text2)) 12%, var(--white)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rc,var(--text2)) 32%, var(--white)); }
#cal-wrap .pd-cluster::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--rc,var(--text2)); flex-shrink:0; }
#cal-wrap .pm-city{ font-size:var(--fs-11); font-weight:600; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* Zwijana sekcja „obiecane i zaopiekowane" */
#cal-wrap .pd-handled{ margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
#cal-wrap .pd-handled > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; font-size:var(--fs-11); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--st-approved); padding:2px 0; user-select:none; }
#cal-wrap .pd-handled > summary::-webkit-details-marker{ display:none; }
#cal-wrap .pd-handled > summary::before{ content:'▸'; font-size:var(--fs-10); color:var(--text3); transition:transform .12s; }
#cal-wrap .pd-handled[open] > summary::before{ transform:rotate(90deg); }
#cal-wrap .pd-handled > summary b{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-11); font-weight:700; color:var(--st-approved); background:var(--tint-green); border-radius:99px; padding:1px 8px; letter-spacing:0; }
#cal-wrap .pd-handled[open]{ padding-bottom:2px; }
#cal-wrap .pd-handled .pd-row.ok{ opacity:.9; }
/* Sugestia dołożenia w nagłówku dnia siatki — zielonkawy akcent „okazji" */
#cal-wrap .pm-strip.sugg{ border-top-color:#CBE3B6; }
#cal-wrap .pm.sugg{ background:#F1F8EA; box-shadow:inset 0 0 0 1px #CBE3B6; cursor:pointer; }
#cal-wrap .pm.sugg:hover{ background:#E8F3DC; }
#cal-wrap .pm.sugg i{ background:#5C9A2E; }
#cal-wrap .pm.sugg b{ color:#2F5B12; }

/* ── Kafelki tras w trayu ── */
#cal-wrap .tc{ display:flex; gap:8px; padding:9px 10px; margin-bottom:7px; border-radius:10px; background:#FBFCFD; border:1px solid var(--border); border-left:3px solid var(--st-draft); cursor:grab; transition:.15s; }
#cal-wrap .tc:hover{ background:#F5F7F9; border-color:#CFD4DA; }
#cal-wrap .tc:active{ opacity:.45; }
#cal-wrap .tc.approved{ border-left-color:var(--st-approved); }
#cal-wrap .tc.settle{ border-left-color:var(--st-settle); }
#cal-wrap .tc.archived{ border-left-color:var(--st-archived); }
#cal-wrap .tc.plain.warn{ border-left-color:var(--st-settle); cursor:default; }
#cal-wrap .tc-grip{ width:15px; height:15px; color:#BFC5CC; flex-shrink:0; margin-top:2px; }
#cal-wrap .tc-grip svg{ width:100%; height:100%; display:block; }
#cal-wrap .tc-grip.warn{ color:#B07A22; }
#cal-wrap .tc-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
#cal-wrap .tc-top{ display:flex; align-items:center; gap:8px; min-width:0; }
#cal-wrap .tc-name{ font-family:'IBM Plex Mono',monospace; font-size:var(--fs-14); font-weight:700; letter-spacing:-.02em; color:var(--text); }
#cal-wrap .tc-load{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; color:var(--text2); }
#cal-wrap .tc-days{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--text2); background:#EEF1F4; border-radius:99px; padding:2px 8px; white-space:nowrap; }
#cal-wrap .tc-badge{ font-size:var(--fs-11); font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:2px 8px; border-radius:99px; margin-left:auto; }
#cal-wrap .tc-badge.draft{ background:#E8F0FA; color:var(--st-draft); }
#cal-wrap .tc-badge.approved{ background:var(--tint-green); color:var(--st-approved); }
#cal-wrap .tc-badge.settle{ background:#FAEEDA; color:var(--ink-amber); }
#cal-wrap .tc-badge.archived{ background:#EEEDEB; color:#6B6A64; }
#cal-wrap .tc-meta{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text3); line-height:1.4; }
#cal-wrap .tc-bot{ display:flex; align-items:center; gap:9px; min-width:0; }
#cal-wrap .tc .bar-dir{ color:var(--text2); }
#cal-wrap .tc .sms-meter{ display:flex; width:34px; background:#DCE0E5; }
#cal-wrap .tc .s-ok{ background:#5C646F; }
#cal-wrap .tc .s-re{ background:#E0952A; }
#cal-wrap .tc .s-no{ background:#C3C8CE; }
#cal-wrap .tc .sms b{ color:var(--text2); }
#cal-wrap .tc .sms em{ color:#B07A22; }
#cal-wrap .tc-crew{ display:flex; flex-wrap:wrap; gap:6px; }

/* ── Legenda ── */
#cal-wrap .tray-sec.legend{ margin-top:auto; border-top:1px solid var(--border); padding-top:14px; }
#cal-wrap .lg{ display:flex; align-items:center; gap:9px; font-size:var(--fs-12); color:var(--text2); padding:3px 0; }
#cal-wrap .lg-s{ width:16px; height:9px; border-radius:3px; flex-shrink:0; }
#cal-wrap .lg-s.draft{ background:var(--st-draft); }
#cal-wrap .lg-s.approved{ background:var(--st-approved); }
#cal-wrap .lg-s.settle{ background:var(--st-settle); }
#cal-wrap .lg-s.archived{ background:var(--st-archived); background-image:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(255,255,255,.4) 3px,rgba(255,255,255,.4) 6px); }
#cal-wrap .lg-s.service{ background:var(--st-service); }
#cal-wrap .lg-sep{ margin:10px 0 4px; font-size:var(--fs-11); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#B6BCC4; }
#cal-wrap .lg-p{ width:16px; height:9px; border-radius:3px; flex-shrink:0; }
#cal-wrap .lg-p.ok{ background:#F4F6F8; box-shadow:inset 0 0 0 1px #D8DCE1; }
#cal-wrap .lg-p.shift{ background:#FAEEDA; box-shadow:inset 0 0 0 1px #EBD6AE; }
#cal-wrap .lg-p.none{ background:var(--white); box-shadow:inset 0 0 0 1px #C0392F; }
#cal-wrap .lg-p.fit{ width:auto; height:auto; font-family:'IBM Plex Mono',monospace; font-size:var(--fs-11); font-weight:700; color:var(--st-draft); background:var(--tint-blue); border-radius:99px; padding:1px 6px; }
#cal-wrap .lg-sms{ display:flex; gap:9px; align-items:flex-start; margin-top:9px; font-size:var(--fs-12); color:var(--text3); line-height:1.45; }
#cal-wrap .lg-sms .sms-meter{ display:flex; width:44px; margin-top:4px; flex-shrink:0; background:#DCE0E5; }
#cal-wrap .lg-sms .s-ok{ background:#5C646F; }
#cal-wrap .lg-sms .s-re{ background:#E0952A; }
#cal-wrap .lg-sms .s-no{ background:#C3C8CE; }
#cal-wrap .lg-sms em{ font-style:normal; font-weight:600; }
#cal-wrap .lg-sms em.ok{ color:var(--text2); }
#cal-wrap .lg-sms em.re{ color:#B07A22; }
#cal-wrap .lg-sms em.no{ color:var(--text3); }

/* Skala <1500px — mniejsza typografia i węższy tray.
   Uwaga: szerokość etykiety (190px) i liczbę kolumn dni ustawia inline renderCalendar(),
   więc siatki NIE zmieniamy tu (inaczej nagłówek i wiersze by się rozjechały). */
@media (max-width:1500px){
  #cal-wrap .tray{ width:292px; }
  #cal-wrap .dnum{ font-size:var(--fs-20); }
  #cal-wrap .bar-name{ font-size:13.5px; }
  #cal-wrap .drv b{ font-size:var(--fs-12); }
}

/* ── ŁADNE MODALE (alert/confirm/prompt) ── */
.app-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(20,20,25,.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s; padding: 20px;
  backdrop-filter: blur(2px);
}
.app-modal-overlay.show { opacity: 1; }
.app-modal {
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  max-width: 400px; width: 100%; padding: 22px 22px 18px;
  transform: translateY(8px) scale(.98); transition: transform .18s;
}
.app-modal-overlay.show .app-modal { transform: translateY(0) scale(1); }
.app-modal-title { font-size: var(--fs-16); font-weight: 700; color: var(--text1); margin-bottom: 8px; }
.app-modal-msg { font-size: var(--fs-14); color: var(--text2); line-height: 1.5; }
.app-modal-input {
  width: 100%; margin-top: 14px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 8px; font-size: var(--fs-14);
  font-family: inherit; box-sizing: border-box;
}
.app-modal-input:focus { outline: none; border-color: var(--accent); }
.app-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.app-modal-btn {
  padding: 9px 18px; border-radius: 99px; font-size: var(--fs-13); font-weight: 600;
  border: none; cursor: pointer; transition: filter .12s, background .12s;
}
.app-modal-btn.cancel { background: var(--gray-150); color: var(--gray-850); }
.app-modal-btn.cancel:hover { background: var(--border); }
.app-modal-btn.ok { background: var(--accent); color: var(--white); }
.app-modal-btn.ok:hover { filter: brightness(1.08); }
.app-modal-btn.ok.danger { background: #D14343; }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE / iPhone — warstwa responsywna (panel logistyka)
   Cel: koniec nachodzenia elementów. Topbar się zawija, nawigacja scrolluje,
   edytor układa się pionowo, karty tras stackują, tabele scrollują poziomo.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  #app { height: 100dvh; }

  /* ── TOPBAR ── zawijany, zwarty */
  #topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--topbar-h);
    padding: 6px 10px;
    gap: 6px 8px;
    row-gap: 6px;
  }
  #topbar > div { min-width: 0; }
  .shopbadge { display: none !important; }
  #logo { font-size: var(--fs-13); }

  /* Nawigacja: poziomy scroll zamiast nachodzenia */
  #nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  #nav::-webkit-scrollbar { display: none; }
  .nav-btn { flex: 0 0 auto; white-space: nowrap; padding: 7px 10px; font-size: var(--fs-12); }

  /* Prawa grupa (search/sandbox/odśwież/ustawienia/wyloguj) — zawijana, pełna szerokość */
  #topbar > div:last-child {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    order: 2;
  }
  #topbar .route-order-search-wrap,
  #topbar-search-wrap { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  #route-global-search { width: 100%; box-sizing: border-box; }
  #route-global-results { width: 100%; }
  .tbtn { flex: 0 0 auto; padding: 7px 12px; }

  /* ── KARTY TRAS ── stackowane (zamiast szerokiego gridu) */
  .rc-header-row { display: none !important; }
  #routes-grid { border-top: none; }
  .route-card.rc-row {
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: none !important;
    min-height: 0;
    padding: 4px 4px;
    border-bottom: 2px solid var(--border);
  }
  .route-card.rc-row > div {
    flex: 1 1 46%;
    border-right: none !important;
    padding: 5px 10px;
    min-width: 0;
  }
  .route-card.rc-row > div:first-child { flex-basis: 100%; }

  /* ── EDYTOR TRASY ── pionowo: lista na górze, mapa pod spodem */
  #screen-editor { flex-direction: column !important; }
  #sidebar {
    width: 100% !important;
    min-width: 0 !important;
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 60vh;
  }
  #editor-map-wrap { flex: none; height: 320px; min-height: 260px; }

  /* Pasek akcji edytora — poziomy scroll, nie nachodzi */
  #bottom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  #bottom > * { flex: 0 0 auto; }

  /* Nagłówek edytora i zakładki — zawijanie/scroll */
  .ehead-row { flex-wrap: wrap; gap: 6px; }
  #route-name-input { min-width: 0; flex: 1 1 140px; }
  #tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .stab { flex: 0 0 auto; white-space: nowrap; }

  /* ── TABELE (statystyki, raporty) ── poziomy scroll zamiast wyłażenia */
  #screen-stats table,
  .screen table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* Karty KPI/statystyk — zawijanie */
  #stats-body > div[style*="flex"] { flex-wrap: wrap !important; }

  /* ── MODALE ── prawie pełny ekran, przewijalne */
  .modal-box, .modal-sheet, #settings-box, .app-modal-card,
  [id$="-overlay"] > div:not([id$="-overlay"]) {
    max-width: 96vw !important;
    max-height: 90vh !important;
    overflow: auto !important;
    box-sizing: border-box;
  }

  /* Globalna wyszukiwarka — dropdown na pełną szerokość */
  #route-global-results { left: 0 !important; right: 0 !important; width: 100% !important; }
}

/* Bardzo wąskie ekrany (iPhone mini / SE) */
@media (max-width: 430px) {
  .route-card.rc-row > div { flex-basis: 100%; }
  .nav-btn { padding: 6px 8px; font-size: var(--fs-11); }
  #editor-map-wrap { height: 260px; }
}

/* MOBILE — poprawki po testach na iPhone (kalendarz, nagłówek listy tras, mapa) */
@media (max-width: 820px) {
  /* Nagłówek listy tras: „+ Nowa trasa" nie ucinaj — zawijaj i nie ściskaj przycisku */
  .routes-toolbar-top { flex-wrap: wrap; gap: 8px; padding: 10px 12px 8px; }
  .routes-toolbar-top h2 { flex: 1 1 auto; min-width: 0; }
  #routes-new-btn, .routes-toolbar-top .tbtn { flex: 0 0 auto; white-space: nowrap; }
  /* Filtry (Wszystkie/Szkice/…) — poziomy scroll zamiast wyłażenia */
  .routes-toolbar-bottom { padding: 0 12px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .routes-toolbar-bottom::-webkit-scrollbar { display: none; }
  .routes-toolbar-bottom > * { flex: 0 0 auto; }

  /* Kalendarz v7 (auto × dni) — belka i KPI się zawijają, tablica scrolluje poziomo,
     tray ląduje pod siatką (kolumny zamiast dwóch paneli obok siebie). */
  #cal-wrap { padding: 0; }
  #cal-wrap .board-top { padding: 10px 12px; }
  #cal-wrap .kpis { margin-left: 0; width: 100%; }
  #cal-wrap .board-body { flex-direction: column; min-height: 0; }
  #cal-wrap .grid-pane { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px 10px; flex: 0 0 auto; }
  #cal-wrap .cal-main { flex: 0 0 auto; min-height: 0; }
  #cal-wrap .cal-under { max-height: none; overflow: visible; }
  #cal-wrap .tray { width: 100%; flex-shrink: 0; border-left: none; border-top: 1px solid var(--border); }
  #cal-wrap .uc { min-width: 0; max-width: none; flex: 1 1 100%; }
  #cal-wrap .uc-head { flex-wrap: wrap; }
  #cal-wrap .cs-row { grid-template-columns: 1fr; gap: 6px; padding: 9px 8px; border-bottom: 1px solid var(--border-light); border-radius: 0; }
  #cal-wrap .cs-row:nth-child(odd) { background: transparent; }

  /* Miesięczny kalendarz (jeśli używany) — też scroll */
  .cal-grid { overflow-x: auto; }

  /* Pasek przełączników na mapie edytora — nie wyłaź poza ekran */
  #editor-map-toggles { max-width: calc(100vw - 20px); overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
}

/* MOBILE v3 — edytor: PRZYWRÓĆ widoczność listy dostaw + czytelność (iPhone) */
@media (max-width: 820px) {
  /* Sidebar = główny obszar (lista przystanków/zamówień), bez sztywnego limitu 60vh */
  #sidebar { max-height: none !important; flex: 1 1 auto !important; min-height: 0 !important; }
  /* Widoki zakładek wypełniają sidebar, listy w środku się przewijają */
  #view-orders, #view-route, #view-settings { flex: 1 1 auto !important; min-height: 0 !important; }
  #list-wrap, #route-list { flex: 1 1 auto !important; min-height: 120px; overflow-y: auto !important; }
  /* Mapa mniejsza, pod listą */
  #editor-map-wrap { flex: 0 0 auto !important; height: 200px !important; min-height: 200px !important; }

  /* Pasek akcji: kompaktowy, max ~30% wysokości z własnym scrollem — nie zjada listy */
  #bottom { max-height: 30vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px; gap: 5px; }
  #bottom .action-group button, #bottom .action-single { padding: 9px 6px; font-size: 12.5px; }

  /* Filtry zamówień w edytorze — poziomy scroll */
  #filters { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  #filters::-webkit-scrollbar { display: none; }
  #filters .fbtn { flex: 0 0 auto; white-space: nowrap; }

  /* Nagłówek listy tras: tytuł skraca się, „+ Nowa trasa" zawsze w całości (koniec ucinania/slivera) */
  .routes-toolbar-top { flex-wrap: nowrap; }
  .routes-toolbar-top h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #routes-new-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Karta trasy — zwarte odstępy (mniej rozstrzelony, bardziej czytelny układ) */
  .route-card.rc-row { padding: 6px 6px; }
  .route-card.rc-row > div { padding: 2px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE v4 — NATURALNY PRZEPŁYW (przewijanie całego ekranu zamiast
   wewnętrznego scrolla paneli, który zapadał wysokości flex i chował listę)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* Każdy ekran przewija się w całości; topbar zostaje na górze (poza .screen) */
  .screen.active { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }

  /* EDYTOR TRASY — pełny przepływ: head, tabs, CAŁA lista, przyciski, mapa — i scroll ekranu */
  #screen-editor { flex-direction: column !important; overflow-y: auto !important; }
  #sidebar {
    width: 100% !important; min-width: 0 !important;
    max-height: none !important; height: auto !important;
    flex: 0 0 auto !important; overflow: visible !important;
  }
  #view-orders, #view-route, #view-settings {
    flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  }
  /* Listy pokazują się w CAŁOŚCI (bez wewnętrznego, zapadającego się scrolla) */
  #list-wrap, #route-list {
    flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
    max-height: none !important; overflow: visible !important;
  }
  #editor-map-wrap { flex: 0 0 auto !important; height: 300px !important; min-height: 300px !important; }
  #bottom { max-height: none !important; overflow: visible !important; }
}

/* ══ MODAL 1b — korekta wg projektu (typografia, skala, oś czasu, pasek statusu, kolumny) ══ */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}
.od-panel-1b {
  /* tokeny projektu (aliasy na paletę aplikacji) */
  --fg-1: #111111; --fg-2: #555555; --fg-3: #7d7d7d;
  --surface-2: #fafafa; --border: #e5e5e5; --border-strong: #d0d0d0;
  --amber: #854F0B; --amber-bg: #FAEEDA; --amber-line: #EF9F27;
  --red: #c8322f; --red-bg: #FCEBEB; --red-line: #e24b4a;
  --green: #3B6D11; --green-bg: #EAF3DE; --blue: #185FA5; --blue-bg: #EBF4FF; --violet: #7E22CE;
  --font: var(--font-sans); --mono: var(--font-mono);
  font-family: var(--font-sans); font-size: 12px; line-height: 1.45; color: var(--fg-1);
  width: min(1440px, 96vw); max-width: 1440px; margin: auto;
}
/* 1. Sans = całe UI (nadpisuje odziedziczone „mono” z klas wspólnych z innymi widokami) */
.od-panel-1b .od-c-title, .od-panel-1b .od-card-label, .od-panel-1b .od-storage-label,
.od-panel-1b .od-section-label, .od-panel-1b .od-data-label, .od-panel-1b .od-storage-sublabel,
.od-panel-1b .od-storage-window-label, .od-panel-1b .od-tile-label, .od-panel-1b .od-tile-k,
.od-panel-1b .od-tl-title, .od-panel-1b .od-tl-alert,
.od-panel-1b button, .od-panel-1b .badge, .od-panel-1b .od-panel-badges span,
.od-panel-1b .od-action-btn, .od-panel-1b .od-mini-btn, .od-panel-1b .od-note-del, .od-panel-1b .rgs-btn,
.od-panel-1b textarea, .od-panel-1b .od-status-sel { font-family: var(--font-sans); }
/* Mono TYLKO: numer zamówienia, NS, ilości, daty/godziny, kwoty, telefon, trasa, tablice, pola date/time */
.od-panel-1b .od-id-chip, .od-panel-1b .od-mono, .od-panel-1b #od-phone-val, .od-panel-1b .od-data-mono,
.od-panel-1b input[type=date], .od-panel-1b input[type=time], .od-panel-1b input[type=tel],
.od-panel-1b .od-storage-window-val, .od-panel-1b #od-payment-status,
.od-panel-1b .od-tl-pill, .od-panel-1b .od-tl-ref, .od-panel-1b .od-tl-tick, .od-panel-1b .od-tl-today,
.od-panel-1b .od-tl-win span, .od-panel-1b .od-tl-old span { font-family: var(--font-mono); }

/* 2. Skala */
.od-panel-1b .od-name-1b { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.od-panel-1b .od-id-chip { font-size: 11px; font-weight: 600; }
.od-panel-1b .od-c-title, .od-panel-1b .od-card-label, .od-panel-1b .od-storage-label,
.od-panel-1b .od-section-label, .od-panel-1b .od-tile-label, .od-panel-1b .od-tl-title {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-3);
}
.od-panel-1b .od-c-sub { font-size: 10px; color: var(--fg-3); }
.od-panel-1b .od-storage-sublabel, .od-panel-1b .od-data-label, .od-panel-1b .od-tile-k, .od-panel-1b .od-storage-window-label {
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3);
}
.od-panel-1b .od-panel-badges span, .od-panel-1b .badge { font-size: 11px; font-weight: 600; }
.od-panel-1b .od-action-btn, .od-panel-1b .od-mini-btn, .od-panel-1b .od-note-del { font-size: 11px; font-weight: 600; }
.od-panel-1b .od-primary-btn, .od-panel-1b .od-status-sel { font-size: 12px; font-weight: 600; }
.od-panel-1b .od-storage-window-val { font-size: 12px; font-weight: 600; }
.od-panel-1b #od-phone-val { font-size: 13px; font-weight: 600; }

/* 3. Modal — szerokość i wyśrodkowanie: patrz .od-panel-1b (max-width 1440px, margin auto) */

/* 17. Kolumny: border-left między kolumnami, „Komunikacja” na --surface-2, max-height 800px */
.od-panel-1b .od-cols { background: var(--surface); }
.od-panel-1b .od-c { max-height: 800px; overflow: auto; border-left: 1px solid var(--border); background: var(--surface); }
.od-panel-1b .od-c-items { border-left: none; }
.od-panel-1b .od-c-comm { background: var(--surface-2); }
.od-panel-1b .od-card, .od-panel-1b .od-item-card, .od-panel-1b .od-section, .od-panel-1b .od-storage { border-radius: 10px; }
.od-panel-1b #od-shopify-note-row { background: var(--surface-2); }
/* 14. Niedostarczone pozycje + Historia wizyt */
.od-panel-1b .od-failed-card { border-left: 4px solid var(--red-line); }
/* 15. Do kontaktu */
.od-panel-1b #od-contact-section { border-left: 4px solid var(--amber-line); }

/* 10–12. Pasek statusu: siatka 2 kafli rozdzielonych 1px tła kontenera; kafel = --surface + border-top 3px w kolorze statusu,
   bez własnej ramki / radius / cienia; treść do góry (align-items:start), kafle równej wysokości (grid rozciąga tło). */
.od-panel-1b .od-strip {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; align-items: start;
  background: var(--border); border-bottom: 1px solid var(--border);
}
.od-panel-1b .od-strip > .od-tile, .od-panel-1b #od-payment-section, .od-panel-1b #od-delivery-section {
  display: block; align-self: stretch; background: var(--surface); padding: 12px 16px; box-sizing: border-box;
  border: 0; border-top: 3px solid var(--border-strong); border-radius: 0; box-shadow: none; overflow: visible; margin: 0;
}
.od-panel-1b #od-payment-section { border-top-color: var(--red-line); }
.od-panel-1b #od-delivery-section { border-top-color: var(--violet); }
.od-panel-1b .od-tile-label { font: 600 9px var(--font-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--fg-3); }
.od-panel-1b .od-tile-amount { font: 700 20px var(--font-mono); color: var(--fg-1); line-height: 1.2; margin-top: 4px; letter-spacing: -.01em; }
.od-panel-1b .od-tile-sub { font: 600 10px var(--font-sans); margin-top: 2px; }
.od-panel-1b .od-tile-btn, .od-panel-1b #od-markpaid-btn {
  display: none; height: 26px; padding: 0 10px; width: auto; margin-top: 6px; border-radius: 6px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-1);
  font: 600 10px var(--font-sans); cursor: pointer; white-space: nowrap;
}
.od-panel-1b #od-markpaid-btn:hover { background: var(--surface-2); }
.od-panel-1b .od-tile-main { font: 700 15px var(--font-mono); color: var(--fg-1); line-height: 1.2; margin-top: 4px; }
.od-panel-1b .od-tile-line { font: 400 10px/1.5 var(--font-sans); color: var(--fg-1); margin-top: 2px; }
.od-panel-1b .od-tile-line .od-tile-k { font: inherit; font-family: var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--fg-3); }
.od-panel-1b .od-tile-line .od-mono { font-family: var(--font-mono); }

/* 18. Korekta statusu (operator) = select 32px, radius 8px, obok przycisku głównego */
.od-panel-1b .od-status-sel {
  height: 32px; padding: 0 28px 0 10px; border-radius: 8px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg-2); cursor: pointer; max-width: 190px; width: 190px; min-width: 0;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237d7d7d' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.od-panel-1b .od-status-sel:hover { border-color: var(--fg-3); }
/* 19. Odepnij — kontur (kolory ustawia JS: tło transparent, border --red-line, tekst --red) */
.od-panel-1b .od-primary-btn { height: 32px; border-radius: 8px; font-weight: 600; }

/* 16. Stopka */
.od-panel-1b .od-panel-footer { align-items: center; }
.od-panel-1b .od-footer-sep { width: 1px; height: 18px; background: var(--border-strong); margin: 0 2px; }
.od-panel-1b .od-action-btn { border-radius: 8px; height: 28px; padding: 0 12px; }

/* 4–9. Oś czasu */
.od-panel-1b .od-timeline { padding: 12px 18px 14px; }
.od-panel-1b .od-tl-head { display: flex; align-items: center; gap: 10px; }
.od-panel-1b .od-tl-alert {
  font-size: 10px; font-weight: 600; color: #fff; background: var(--red-line);
  border-radius: 99px; padding: 2px 9px; white-space: nowrap;
}
.od-panel-1b .od-tl-canvas { position: relative; height: 132px; margin-top: 8px; }
/* Znacznik punktowy (produkcja / trasa): pastylka → nóżka 1px → kropka 7px na linii osi (top:106px) */
.od-panel-1b .od-tl-point {
  position: absolute; top: 0; height: 110px; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.od-panel-1b .od-tl-pill {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid; border-radius: 99px;
  padding: 3px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.3;
}
.od-panel-1b .od-tl-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.od-panel-1b .od-tl-leg { width: 1px; flex: 1; }
.od-panel-1b .od-tl-end { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); flex-shrink: 0; }
.od-panel-1b .od-tl-ref-label {
  position: absolute; left: 0; top: 29px; font-size: 9px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber); font-family: var(--font-sans);
}
.od-panel-1b .od-tl-ref {
  position: absolute; top: 26px; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber);
  border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 500; white-space: nowrap;
}
.od-panel-1b .od-tl-win {
  position: absolute; top: 46px; height: 28px; background: var(--blue-bg); border: 1px solid var(--blue);
  border-radius: 99px; display: flex; align-items: center; justify-content: center; z-index: 2; box-sizing: border-box;
}
.od-panel-1b .od-tl-win span { font-size: 10px; font-weight: 600; color: var(--blue); white-space: nowrap; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
.od-panel-1b .od-tl-old {
  position: absolute; top: 84px; height: 0; border-top: 2px dashed var(--border-strong); z-index: 3;
  display: flex; justify-content: flex-start;
}
.od-panel-1b .od-tl-old span {
  position: absolute; top: -8px; background: var(--surface); padding: 0 6px; font-size: 9px; color: var(--fg-3);
  text-decoration: line-through; white-space: nowrap; line-height: 14px;
}
.od-panel-1b .od-tl-axis { position: absolute; left: 0; right: 0; top: 106px; height: 1px; background: var(--border-strong); }
.od-panel-1b .od-tl-tick { position: absolute; top: 94px; transform: translateX(-50%); font-size: 9px; color: var(--fg-3); white-space: nowrap; }
.od-panel-1b .od-tl-tick::after { content: ''; position: absolute; left: 50%; top: 13px; width: 1px; height: 5px; background: var(--border-strong); }
.od-panel-1b .od-tl-today-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--red-line); z-index: 1; }
.od-panel-1b .od-tl-today {
  position: absolute; top: 112px; transform: translateX(-50%); z-index: 3;
  background: var(--red-line); color: #fff; border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 600; white-space: nowrap;
}
@media (max-width: 1000px) {
  .od-panel-1b { width: min(560px, 96vw); }
  .od-panel-1b .od-c { max-height: none; border-left: none; }
}
/* Siatka kolumn: pełnej wysokości linie rozdzielające; gdy ekran niższy niż kolumny — przewija się obszar kolumn */
.od-panel-1b .od-cols { align-items: stretch; overflow: auto; }
/* Kolumny modalu: sekcje-karty (overflow:hidden) nie mogą się kurczyć jako elementy flex — inaczej treść jest
   obcinana i kolumna „nie ma czego przewijać". Wiersz siatki = dostępna wysokość panelu, każda kolumna przewija się sama. */
.od-panel-1b .od-cols { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.od-panel-1b .od-c { min-height: 0; }
.od-panel-1b .od-c > * { flex-shrink: 0; }
/* Wiersze formularzy w kartach (obiecany termin, magazynowanie, okno godzinowe): pola daty mają stałą minimalną
   szerokość, więc wiersz się zawija — przyciski schodzą pod pola zamiast wychodzić poza kartę. Przyciski kompaktowe. */
.od-panel-1b .od-storage-row { flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.od-panel-1b .od-storage-field { flex: 1 1 130px; min-width: 0; }
.od-panel-1b .od-storage-field input { min-width: 0; box-sizing: border-box; height: 32px; padding: 0 10px; font-size: 12px; }
.od-panel-1b .od-storage-row > button {
  height: 32px; padding: 0 14px; border-radius: 8px; font: 600 11px var(--font-sans); margin-bottom: 0 !important;
}
.od-panel-1b .od-storage-row > .od-note-del { height: 32px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-2); }


/* ══════════════════════════════════════════════════════════════════
   TOKENY (lista tras + topbar) — kolory tylko przez tokeny; motyw ciemny pod [data-theme="dark"]
══════════════════════════════════════════════════════════════════ */
:root {
  --fg-1: #111111; --fg-2: #555555; --fg-3: #7d7d7d; --fg-4: #a5a5a5;
  --surface-2: #fafafa; --surface-3: #f0f0f0; --border-strong: #d0d0d0;
  --blue: #185FA5; --blue-bg: #EBF4FF;
  --green: #3B6D11; --green-bg: #EAF3DE;
  --amber: #854F0B; --amber-bg: #FAEEDA; --amber-line: #EF9F27;
  --red: #c8322f; --red-bg: #FCEBEB; --red-line: #e24b4a;
  --sky: #0369A1; --sky-bg: #E0F2FE;
  --violet: #7E22CE;
}
[data-theme="dark"] {
  --bg: #0e0f11; --surface: #17191c; --surface2: #1c1f23; --border: #2c3035; --border-light: #262a2f;
  --text: #eceef1; --text2: #b3b9c1; --text3: #8a9199;
  --fg-1: #eceef1; --fg-2: #b3b9c1; --fg-3: #8a9199; --fg-4: #6b727a;
  --surface-2: #1c1f23; --surface-3: #24272c; --border-strong: #3c424a;
  --blue: #6FB0EE; --blue-bg: #14293c;
  --green: #9FD164; --green-bg: #1d2a14;
  --amber: #F0B65C; --amber-bg: #2e2213; --amber-line: #EF9F27;
  --red: #F08A88; --red-bg: #2e1616; --red-line: #e24b4a;
  --sky: #6FC6F0; --sky-bg: #0f2a3a;
  --violet: #C79BF2;
}

/* ══════════════════════════════════════════════════════════════════
   TOPBAR — 3 zakładki + „Więcej ▾", wyszukiwarka, Odśwież / Nowa trasa / użytkownik
══════════════════════════════════════════════════════════════════ */
#topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 52px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0; font-family: var(--font-sans); position: relative; z-index: 300;
}
.tb-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tb-right { display: flex; align-items: center; gap: 6px; }
#logo { font: 700 15px var(--font-sans); letter-spacing: -.02em; color: var(--fg-1); }
#logo span { color: var(--blue); }
.shopbadge { font: 500 10px var(--font-mono); padding: 2px 7px; border-radius: 99px; background: var(--surface-3); color: var(--fg-3); }
#nav { display: flex; align-items: center; gap: 2px; }
.nav-btn {
  height: 30px; padding: 0 12px; border-radius: 8px; border: none; background: transparent;
  color: var(--fg-2); font: 500 12px var(--font-sans); cursor: pointer; transition: background .12s, color .12s;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nav-btn:hover { background: var(--surface-3); color: var(--fg-1); }
.nav-btn.active { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.nav-btn .caret { font-size: 10px; color: var(--fg-3); }
.nav-more { position: relative; }
.nav-sum {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--red-line); color: #fff; font: 700 9px var(--font-mono); line-height: 16px;
}
.nav-menu {
  display: none; position: absolute; top: 36px; left: 0; min-width: 230px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2); z-index: 400;
}
.nav-menu.right { left: auto; right: 0; }
.nav-more.open > .nav-menu { display: block; }
.nav-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  height: 30px; padding: 0 10px; border: none; border-radius: 7px; background: transparent;
  color: var(--fg-1); font: 500 12px var(--font-sans); cursor: pointer; text-align: left; white-space: nowrap;
}
.nav-menu-item:hover { background: var(--surface-3); }
.nav-menu-item.active { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.nav-menu-item.danger { color: var(--red); }
.nav-menu-item.danger:hover { background: var(--red-bg); }
.nav-pill {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 6px;
  border-radius: 99px; font: 700 9px var(--font-mono); line-height: 16px;
}
.nav-pill.red { background: var(--red-bg); color: var(--red); }
.nav-pill.amber { background: var(--amber-bg); color: var(--amber); }
.nav-pill.gray { background: var(--surface-3); color: var(--fg-2); }
.nav-pill.gray.over { background: var(--red-bg); color: var(--red); }
/* Wyszukiwarka w topbarze */
#topbar .route-order-search-wrap { position: relative; flex: 1 1 340px; width: auto; max-width: 340px; margin: 0; }
.tb-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-4); font-size: 14px; line-height: 1; pointer-events: none; }
#route-global-search {
  width: 100%; height: 30px; padding: 0 10px 0 26px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--fg-1); font: 400 12px var(--font-sans); outline: none; transition: border-color .12s;
}
#route-global-search:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
#route-global-search::placeholder { color: var(--fg-4); }
/* Przyciski topbara */
.tb-btn {
  height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--fg-1); font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.tb-btn:hover { background: var(--surface-3); }
.tb-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.tb-btn.primary:hover { filter: brightness(.94); }
.tb-btn .caret { font-size: 10px; color: var(--fg-3); }
.tb-btn.primary .caret { color: #fff; }
@media (max-width: 1100px) { #topbar .route-order-search-wrap { max-width: 220px; } }

/* ══════════════════════════════════════════════════════════════════
   LISTA TRAS — pasek filtrów, tabela, wiersze, akcje, stopka
══════════════════════════════════════════════════════════════════ */
#screen-routes { flex-direction: column; overflow-y: auto; background: var(--bg); font-family: var(--font-sans); color: var(--fg-1); }
/* 2. Pasek filtrów */
.rl-filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.rl-seg { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rl-segbtn + .rl-segbtn { border-left: 1px solid var(--border); }
.rl-segbtn {
  height: 28px; padding: 0 12px; border: none; background: var(--surface-2); color: var(--fg-2);
  font: 500 12px var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.rl-segbtn:hover { color: var(--fg-1); }
.rl-segbtn.active { background: var(--surface); color: var(--fg-1); font-weight: 600; }
.rl-segbtn .cnt { font: 600 10px var(--font-mono); color: var(--fg-4); }
.rl-segbtn .cnt:empty { display: none; }
.rl-segbtn.active .cnt { color: var(--blue); }
.rl-seg .rl-seg-archive { margin-left: 7px; border-left: 1px solid var(--border); }
.rl-count { font: 400 11px var(--font-sans); color: var(--fg-3); }
.rl-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rl-sort-label { font: 600 9px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.rl-select {
  height: 28px; padding: 0 26px 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface);
  color: var(--fg-1); font: 500 12px var(--font-sans); cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237d7d7d' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
/* 3. Siatka — JEDNA definicja kolumn */
:root { --rl-grid: 180px minmax(0,1fr) 150px 182px 210px 220px 108px; }
#routes-grid { display: flex; flex-direction: column; background: var(--surface); }
.rl-head {
  display: grid; grid-template-columns: var(--rl-grid); align-items: center;
  padding: 0 16px 0 20px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.rl-head > div { padding: 8px 8px 8px 0; font: 600 9px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
#routes-grid .rl-row {
  --rl-accent: var(--border-strong);
  display: grid; grid-template-columns: var(--rl-grid); align-items: start; min-height: 58px; box-sizing: border-box;
  padding: 10px 16px; border-bottom: 1px solid var(--border); border-left: 4px solid var(--rl-accent);
  box-shadow: inset 4px 0 0 var(--rl-accent);
  cursor: pointer; position: relative; transition: background .1s;
}
#routes-grid .rl-row:hover { background: var(--surface-2); }
#routes-grid .rl-row.st-draft { --rl-accent: var(--amber-line); }
#routes-grid .rl-row.st-ready { --rl-accent: var(--sky); }
#routes-grid .rl-row.st-approved { --rl-accent: var(--green); }
#routes-grid .rl-row.st-pending { --rl-accent: var(--blue); }
#routes-grid .rl-row.st-settled { --rl-accent: var(--border-strong); }
.rl-c { min-width: 0; padding-right: 8px; display: flex; flex-direction: column; gap: 2px; }
.rl-mono { font: 500 12px/1.45 var(--font-mono); color: var(--fg-1); }
.rl-mono.sub { color: var(--fg-2); }
.rl-mono.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-sub { font: 400 11px/1.4 var(--font-sans); color: var(--fg-3); }
.rl-idle { font: 500 11px var(--font-sans); color: var(--fg-4); }
.rl-missing { font: 500 11px var(--font-sans); color: var(--red); }
/* 4. Trasa */
.rl-name-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rl-num { font: 700 14px var(--font-mono); color: var(--fg-1); letter-spacing: -.01em; }
.rl-status { display: inline-flex; align-items: center; border-radius: 99px; padding: 3px 9px; font: 600 10px var(--font-sans); white-space: nowrap; line-height: 1.2; }
.rl-status.st-draft { background: var(--amber-bg); color: var(--amber); }
.rl-status.st-ready { background: var(--sky-bg); color: var(--sky); }
.rl-status.st-approved { background: var(--green-bg); color: var(--green); }
.rl-status.st-pending { background: var(--blue-bg); color: var(--blue); }
.rl-status.st-settled { background: var(--surface-3); color: var(--fg-3); }
.rl-attrib { font: 400 10px var(--font-sans); color: var(--fg-4); margin-top: 2px; }
.rl-meta { display: flex; gap: 10px; align-items: center; font: 600 10px var(--font-mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; margin-top: 1px; }
.rl-meta-i { cursor: pointer; white-space: nowrap; }
.rl-meta-i:hover { text-decoration: underline; }
.rl-meta .g { color: var(--green); } .rl-meta .r { color: var(--red); } .rl-meta .a { color: var(--amber); }
.rl-attrib .rl-mono { font: 400 10px var(--font-mono); color: var(--fg-4); }
#screen-routes .rc-badge { display: inline-flex; align-items: center; border-radius: 99px; padding: 3px 9px; font: 600 10px var(--font-sans); white-space: nowrap; line-height: 1.2; background: var(--surface-3); color: var(--fg-2); }
/* 5. Lokalizacje */
.rl-loc { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rl-cc { border-radius: 99px; padding: 2px 8px; font: 700 10px var(--font-mono); white-space: nowrap; }
.rl-cc.pl { background: var(--blue-bg); color: var(--blue); }
.rl-cc.at { background: var(--sky-bg); color: var(--sky); }
.rl-cc.xx { background: var(--surface-3); color: var(--fg-2); }
.rl-reg { border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); border-radius: 99px; padding: 2px 9px; font: 500 11px var(--font-sans); white-space: nowrap; }
.rl-more-n { font: 500 11px var(--font-sans); color: var(--fg-4); cursor: help; }
/* 6. Dane */
.rl-c-stats { padding-right: 4px; }
.rl-chips .rc-start-chip, .rl-chips .live-badge { font-size: 10px; padding: 1px 7px; }
/* Ostrzeżenie produkcji = ta sama pastylka co status trasy (miękkie tło, bez ramki), bez
   podświetlania całej komórki — wcześniej różowe tło + pasek + obrys gryzły się z resztą wiersza. */
#screen-routes .rc-prodwarn { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font: 500 10px var(--font-sans); line-height: 14px; background: var(--red-bg); color: var(--red); border: 0; border-radius: 99px; padding: 1px 7px; white-space: nowrap; cursor: help; width: fit-content; }
#screen-routes .rc-prodwarn .ic { font-size: 9px; }
.rl-sub-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
#screen-routes .rl-sub-row .rc-prodwarn { margin-top: 0; }
/* 2. Postęp: chipy (start / na żywo / poza kolejnością) w jednej linii, pasek pod nimi; treść wyśrodkowana do linii paska */
.rl-c-prog { align-self: stretch; justify-content: center; padding-right: 14px; }
.rl-chips { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
.rl-chips:empty { display: none; }
.rl-track { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.rl-fill { height: 100%; border-radius: 2px; background: var(--blue); transition: width .3s; }
.rl-fill.done { background: var(--green); }
.rl-fill.zero { background: var(--fg-4); }
.rl-prog-meta { display: flex; align-items: center; font: 600 11px var(--font-mono); color: var(--fg-1); }
.rl-prog-meta > span:last-child { margin-left: auto; }
.rl-prog-meta .run { color: var(--blue); } .rl-prog-meta .done { color: var(--green); } .rl-prog-meta .zero { color: var(--fg-4); }
.rl-c-prog .rc-start-chip { align-self: flex-start; }
.rl-drv { font: 500 12px/1.5 var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-team2 { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.rl-plate { font: 600 11px var(--font-mono); color: var(--fg-2); }
.rl-phone { font: 500 11px var(--font-mono); color: var(--blue); text-decoration: none; }
.rl-phone:hover { text-decoration: underline; }
/* 7. Akcje */
.rl-c-acts { flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; position: relative; padding-right: 0; align-self: center; width: 100%; }
.rl-btn { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-1); font: 600 11px var(--font-sans); cursor: pointer; white-space: nowrap; }
.rl-btn:hover { background: var(--surface-3); }
.rl-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.rl-btn.primary:hover { filter: brightness(.94); }
.rl-more { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-2); font: 700 14px/1 var(--font-sans); cursor: pointer; flex-shrink: 0; }
.rl-more:hover { background: var(--surface-3); color: var(--fg-1); }
.rl-menu {
  display: none; position: absolute; top: 34px; right: 0; min-width: 200px; padding: 6px; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2);
}
.rl-row.menu-open .rl-menu { display: block; }
.rl-row.menu-open { z-index: 6; }
.rl-menu-item { display: block; width: 100%; height: 30px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; color: var(--fg-1); font: 500 12px var(--font-sans); text-align: left; cursor: pointer; white-space: nowrap; }
.rl-menu-item:hover { background: var(--surface-3); }
.rl-menu-item.danger { color: var(--red); }
.rl-menu-item.danger:hover { background: var(--red-bg); }
/* 8. Stopka */
.rl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: var(--surface-2); border-top: 1px solid var(--border); font: 400 11px var(--font-sans); color: var(--fg-3); }
.empty-state { text-align: center; padding: 50px; color: var(--fg-3); font: 400 12px var(--font-sans); }
/* Wąskie ekrany — wiersz w kolumnie */
@media (max-width: 1000px) {
  .rl-head { display: none; }
  .rl-row { display: flex; flex-direction: column; gap: 8px; }
  .rl-c-acts { justify-content: flex-start; }
}


/* ══════════════════════════════════════════════════════════════════
   WYSZUKIWARKA (topbar) — panel 520px, wiersz 44px w siatce 74 / 1fr / 92 / 28
══════════════════════════════════════════════════════════════════ */
#topbar #route-global-results {
  position: absolute; top: 36px; right: 0; left: auto; width: 620px; max-width: calc(100vw - 32px);
  padding: 6px; max-height: 420px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2);
  z-index: 500; font-family: var(--font-sans);
}
#topbar #route-global-results.open { display: block; }
/* Wiersz: NUMER · PILNOŚĆ · NAZWISKO+ADRES (+ termin) · AKCJE — jeden rząd 44px */
.rgs-row {
  display: grid; grid-template-columns: 74px 104px minmax(0,1fr) 76px; align-items: center; gap: 10px;
  height: 44px; padding: 0 10px; border-radius: 7px; cursor: pointer; min-width: 0;
}
.rgs-row:hover { background: var(--surface-3); }
.rgs-row.active { background: var(--blue-bg); color: var(--fg-1); }
.rgs-c1 { font: 600 12px var(--font-mono); color: var(--blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgs-c2 { justify-self: start; min-width: 0; }
.rgs-pill { display: inline-block; border-radius: 99px; padding: 2px 8px; font: 600 10px var(--font-sans); white-space: nowrap; }
.rgs-pill.red { background: var(--red-bg); color: var(--red); }
.rgs-pill.amber { background: var(--amber-bg); color: var(--amber); }
.rgs-pill.green { background: var(--green-bg); color: var(--green); }
.rgs-pill.blue { background: var(--blue-bg); color: var(--blue); }
.rgs-pill.gray { background: var(--surface-3); color: var(--fg-2); }
.rgs-c3 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rgs-txt { flex: 1 1 auto; min-width: 0; font: 500 12px var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rgs-txt .rgs-sep, .rgs-txt .rgs-sub { color: var(--fg-3); font-weight: 400; }
.rgs-term { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--font-mono); color: var(--fg-2); white-space: nowrap; }
.rgs-tdot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-4); }
.rgs-tdot.blue { background: var(--blue); } .rgs-tdot.green { background: var(--green); } .rgs-tdot.red { background: var(--red-line); }
.rgs-c1 mark, .rgs-txt mark { background: var(--amber-bg); color: var(--fg-1); font-weight: inherit; padding: 0 1px; border-radius: 2px; }
.rgs-c4 { justify-self: end; display: flex; gap: 6px; }
.rgs-ico { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg-1); font-size: 13px; line-height: 1; cursor: pointer; opacity: .45; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.rgs-row:hover .rgs-ico, .rgs-row.active .rgs-ico { opacity: 1; }
.rgs-ico:hover { background: var(--surface-3); }
.rgs-head { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 4px; padding: 6px 10px; background: var(--surface-2); font: 600 9px var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.rgs-foot { height: 32px; display: flex; align-items: center; justify-content: center; margin: 4px -6px -6px; border-top: 1px solid var(--border); font: 600 11px var(--font-sans); color: var(--blue); cursor: pointer; }
.rgs-foot:hover { background: var(--surface-2); }
.rgs-state { padding: 14px 10px; font: 500 12px var(--font-sans); color: var(--fg-3); }
.rgs-hint { margin-top: 4px; font: 400 11px var(--font-sans); color: var(--fg-3); }


/* ══════════════════════════════════════════════════════════════════
   LISTA TRAS — hierarchia typograficzna (mono tylko na cyfrach, jedna dominanta na komórkę, cichy ink)
   Poziomy: dominanta 500 13px (--fg-1 tylko numer trasy, reszta --fg-2) · 500 12px --fg-2 · 400 11px --fg-4 · etykiety 500 10px .12em --fg-4
══════════════════════════════════════════════════════════════════ */
#routes-grid { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
#routes-grid .rl-mono, #routes-grid .rl-dom, #routes-grid .n, #routes-grid .rl-num, #routes-grid .rl-plate, #routes-grid .rl-phone, #routes-grid .rl-pm, #routes-grid .rl-pct, #routes-grid .rl-meta {
  font-family: var(--font-mono); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
/* 4. rytm: stała wysokość 56px, linie bazowe dominant na jednej wysokości */
#routes-grid .rl-row { height: 56px; min-height: 56px; padding: 10px 16px; align-items: start; border-bottom: 0; overflow: hidden; }
#routes-grid .rl-row + .rl-row { border-top: 1px solid rgba(0,0,0,.05); }
#routes-grid .rl-c { gap: 0; }
#routes-grid .rl-l1, #routes-grid .rl-name-line, #routes-grid .rl-c-dates > .rl-dom, #routes-grid .rl-drv { height: 18px; line-height: 18px; display: flex; align-items: center; }
#routes-grid .rl-c-dates { display: flex; flex-direction: column; }
#routes-grid .rl-c-dates > :first-child { height: 18px; line-height: 18px; display: flex; align-items: baseline; gap: 5px; }
/* poziomy */
#routes-grid .rl-dom { font: 500 13px var(--font-mono); color: var(--fg-2); }
#routes-grid .rl-sec { font: 400 11px var(--font-mono); color: var(--fg-4); }
#routes-grid .rl-sec .n { font: 400 11px var(--font-mono); color: var(--fg-4); }
#routes-grid .u { font: 400 11px var(--font-sans); color: var(--fg-4); margin-left: 3px; }
#routes-grid .u.dot { margin: 0 5px; }
#routes-grid .rl-sub, #routes-grid .rl-idle, #routes-grid .rl-attrib { font: 400 11px var(--font-sans); color: var(--fg-4); }
#routes-grid .rl-num { font: 500 13px var(--font-mono); color: var(--fg-1); }   /* jedyna pełna czerń w wierszu */
#routes-grid .rl-meta { font: 500 10px var(--font-mono); }
#routes-grid .rl-drv { font: 500 12px var(--font-sans); color: var(--fg-2); }
#routes-grid .rl-team2 { height: 16px; line-height: 16px; }
#routes-grid .rl-plate, #routes-grid .rl-phone { font: 400 11px var(--font-mono); color: var(--fg-4); }
#routes-grid .rl-row:hover .rl-phone { color: var(--blue); }
#routes-grid .rl-mono { font-weight: 500; }
#routes-grid .rl-reg { font: 400 11px var(--font-sans); color: var(--fg-3); padding: 1px 8px; }
#routes-grid .rl-cc { font: 500 10px var(--font-mono); padding: 1px 7px; opacity: .85; }
#routes-grid .rl-loc { max-height: 36px; overflow: hidden; gap: 3px; }
#routes-grid .rl-status { font-weight: 500; padding: 2px 8px; }
#routes-grid .rl-sub-row { height: 16px; line-height: 16px; }
/* etykiety kolumn i subheadery grup */
#routes-grid .rl-head { height: 28px; align-items: center; }
#routes-grid .rl-head > div { padding: 0 8px 0 0; font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }
#routes-grid .rl-group {
  position: sticky; top: 28px; z-index: 1; height: 28px; display: flex; align-items: center; padding: 0 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4);
}
/* 5. postęp */
#routes-grid .rl-c-prog { align-self: start; justify-content: flex-start; }
#routes-grid .rl-barline { width: 100%; }
#routes-grid .rl-track { width: 100%; height: 3px; border-radius: 2px; background: var(--surface-3); margin: 0; }
#routes-grid .rl-fill { background: var(--blue); opacity: .75; }
#routes-grid .rl-fill.done { background: var(--green); opacity: .75; }
#routes-grid .rl-fill.zero { display: none; }
#routes-grid .rl-prog-meta { height: 16px; line-height: 16px; display: flex; align-items: center; gap: 6px; }
#routes-grid .rl-pm { font: 500 11px var(--font-mono); color: var(--fg-2); }
#routes-grid .rl-pm .s { color: var(--fg-4); }
#routes-grid .rl-pm .ok { color: var(--green); }
#routes-grid .rl-pct { font: 400 11px var(--font-mono); color: var(--fg-4); margin-left: auto; }
#routes-grid .rl-chips { display: inline-flex; gap: 4px; margin-left: auto; overflow: hidden; }
#routes-grid .rl-chips .rc-start-chip, #routes-grid .rl-chips .live-badge { font-size: 9.5px; padding: 0 6px; line-height: 15px; }
/* 6. akcje: Rozlicz jedyny primary; Cofnij ghost; „⋯" bez ramki */
#routes-grid .rl-btn { height: 28px; font: 600 11px var(--font-sans); }
#routes-grid .rl-btn.ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
#routes-grid .rl-btn.ghost:hover { background: var(--surface-3); }
#routes-grid .rl-more { width: 26px; height: 26px; border-color: transparent; background: transparent; color: var(--fg-4); }
#routes-grid .rl-more:hover { border-color: var(--border-strong); color: var(--fg-2); }
#routes-grid .rl-c-acts { align-self: center; }
#routes-grid .rl-prog-meta > span:last-child { margin-left: 0; }
#routes-grid .rl-prog-meta > .rl-pct, #routes-grid .rl-prog-meta > .rl-chips { margin-left: auto; }
#routes-grid .rl-prog-meta > .rl-pct + .rl-chips { margin-left: 6px; }

/* ══════════════════════════════════════════════════════════════════
   EDYTOR TRASY — refaktor (fundamenty 0.x, nagłówek, zakładki, dodawanie, ostrzeżenia, przystanki,
   postoje/noclegi, stopka, nakładki mapy, pasek KPI, proporcje). Tokeny jak na liście tras.
══════════════════════════════════════════════════════════════════ */
#screen-editor { font-family: var(--font-sans); color: var(--fg-1); font-variant-numeric: tabular-nums; }
#screen-editor .mono, #screen-editor .sr-id, #screen-editor .sr-eta, #screen-editor .sr-win, #screen-editor .sr-amt, #screen-editor .sr-load,
#screen-editor .sr-dist, #screen-editor .sr-term, #screen-editor .br-len, #screen-editor .kpi-v, #screen-editor .eh-dates, #screen-editor .eh-time,
#screen-editor .stab-n, #screen-editor .rw-scope, #screen-editor #route-name-input, #screen-editor .stop-row-num, #screen-editor .sr-min, #screen-editor .sms-monit {
  font-family: var(--font-mono); font-weight: 500; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
#screen-editor .u { font: 400 10px var(--font-sans); color: var(--fg-4); margin-left: 2px; }
/* 11. proporcje: panel 400px, własny scroll środka; nagłówek, zakładki i stopka przyklejone */
:root { --sidebar-w: 400px; }
#sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); }
#route-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; scrollbar-gutter: stable; }

/* 2. nagłówek trasy */
#editor-head { padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); gap: 8px; }
.ehead-row { display: flex; align-items: center; gap: 8px; }
.eh-back { height: 26px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg-2); font: 500 11px var(--font-sans); cursor: pointer; white-space: nowrap; }
.eh-back:hover { background: var(--surface-3); }
#screen-editor #route-name-input { flex: 0 1 auto; width: auto; min-width: 60px; max-width: 120px; font-size: 16px; font-weight: 500; color: var(--fg-1); padding: 0; border: 0; background: transparent; }
.sbadge-sm { font: 500 10px var(--font-sans); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.sbadge-sm.st-draft { background: var(--amber-bg); color: var(--amber); }
.sbadge-sm.st-ready { background: var(--green-bg); color: var(--green); }
.sbadge-sm.st-approved { background: var(--green-bg); color: var(--green); }
.sbadge-sm.st-settled { background: var(--blue-bg); color: var(--blue); }
.eh-dates { margin-left: auto; font: 400 11px var(--font-mono); color: var(--fg-4); white-space: nowrap; cursor: pointer; }
.ehead-start { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.eh-lbl { font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); flex-shrink: 0; }
.eh-start-addr { flex: 1; min-width: 0; font: 500 12px var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eh-time { width: 76px; height: 24px; padding: 0 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--fg-1); font: 500 12px var(--font-mono); text-align: right; cursor: pointer; }
.eh-time:hover, .eh-time:focus { border-color: var(--border-strong); background: var(--surface); outline: none; }
.eh-readonly { padding: 6px 10px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font: 500 11px var(--font-sans); align-items: center; }
.eh-presence { padding: 6px 10px; border-radius: 8px; background: var(--red-bg); color: var(--red); font: 500 11px var(--font-sans); }

/* 3. zakładki */
#tabs { height: 38px; border-bottom: 1px solid var(--border); background: var(--surface); }
.stab { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 4px; font: 500 12px var(--font-sans); color: var(--fg-2); border-bottom: 2px solid transparent; }
.stab:hover { color: var(--fg-1); }
.stab.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.stab-n { font: 400 10px var(--font-mono); color: var(--fg-4); }
.stab-n:empty { display: none; }

/* 4. dodawanie zamówień */
#route-quick-add { padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
.rqa-row { display: flex; gap: 6px; align-items: center; }
.rqa-wrap { position: relative; flex: 1; min-width: 0; }
.rqa-input { width: 100%; height: 30px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg-1); font: 400 12px var(--font-sans); outline: none; }
.rqa-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.rqa-add { height: 30px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue); color: #fff; font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.rqa-add:hover { filter: brightness(.94); }
.rqa-results { position: absolute; top: 34px; left: 0; width: 620px; max-width: calc(100vw - 32px); padding: 6px; max-height: 420px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2); z-index: 120; font-family: var(--font-sans); }

/* 5. ostrzeżenia — karty */
.rw-card { margin: 8px 10px 0; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border); border-left: 4px solid var(--border-strong); background: var(--surface); }
.rw-card.red { border-left-color: var(--red-line); } .rw-card.amber { border-left-color: var(--amber-line); } .rw-card.info { border-left-color: var(--fg-3); }
.rw-r1 { display: flex; align-items: center; gap: 8px; list-style: none; cursor: default; }
.rw-r1::-webkit-details-marker { display: none; }
.rw-name { font: 600 11px var(--font-sans); } .rw-card.red .rw-name { color: var(--red); } .rw-card.amber .rw-name { color: var(--amber); } .rw-card.info .rw-name { color: var(--fg-3); }
.rw-scope { font: 400 10px var(--font-mono); color: var(--fg-3); }
.rw-act { margin-left: auto; height: 22px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--fg-2); font: 500 10px var(--font-sans); cursor: pointer; white-space: nowrap; }
.rw-act:hover { background: var(--surface-3); }
.rw-r2 { margin-top: 3px; font: 400 11px/1.4 var(--font-sans); color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 6.1 nagłówek listy przystanków */
.rl-stops-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.rsh-title { font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }
.rsh-hint { font: 400 10px var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsh-add { margin-left: auto; height: 24px; padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: 99px; background: transparent; color: var(--fg-2); font: 500 11px var(--font-sans); cursor: pointer; white-space: nowrap; }
.rsh-add:hover { background: var(--surface-3); }

/* 6.2–6.6 wiersz przystanku: 34px | 1fr, trzy pasy, stała wysokość */
#screen-editor .stop-row { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 0 6px; padding: 8px 10px 8px 6px; height: 122px; box-sizing: border-box;
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent; background: var(--surface); align-items: start; overflow: hidden; cursor: pointer; transition: background .1s; }
#screen-editor .stop-row:hover { background: var(--surface-2); }
#screen-editor .stop-row.is-selected { border-left-color: var(--blue); }
#screen-editor .stop-row.dragging { opacity: .4; }
#screen-editor .stop-row.drag-over { box-shadow: inset 0 2px 0 0 var(--blue); }
#screen-editor .stop-row.is-done { opacity: .62; }
#screen-editor .stop-row.is-warn { background: var(--amber-bg); }
#screen-editor .stop-row.is-warn:hover { background: var(--amber-bg); }
#screen-editor .stop-row-left { display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 0; }
#screen-editor .dh { opacity: 1; padding-top: 2px; }
#screen-editor .dh span { background: var(--fg-4); width: 12px; height: 2px; }
#screen-editor .stop-row-num { width: 22px; height: 22px; border-radius: 50%; background: var(--blue); color: #fff; font: 500 11px var(--font-mono); display: flex; align-items: center; justify-content: center; }
#screen-editor .stop-row-num.n-done { background: var(--green); } #screen-editor .stop-row-num.n-amber { background: var(--amber-line); } #screen-editor .stop-row-num.n-accent { background: var(--sr-accent, var(--blue)); }
.sr-body { min-width: 0; display: flex; flex-direction: column; }
/* PAS 1 */
.sr-b1 { display: flex; align-items: flex-start; gap: 8px; height: 38px; }
.sr-b1-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-idline { display: flex; align-items: center; gap: 5px; height: 18px; overflow: hidden; white-space: nowrap; }
.sr-id { font: 500 13px var(--font-mono); color: var(--blue); flex-shrink: 0; }
.sr-nameline { display: flex; align-items: baseline; gap: 6px; height: 16px; overflow: hidden; white-space: nowrap; }
.sr-name { font: 500 12px var(--font-sans); color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; }
.sr-city { font: 400 11px var(--font-sans); color: var(--fg-4); flex-shrink: 0; }
.sr-b1-r { flex-shrink: 0; display: flex; align-items: baseline; gap: 5px; height: 18px; }
.sr-day { font: 500 10px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-4); }
.sr-eta { font: 500 15px var(--font-mono); color: var(--fg-1); }
.sr-win { font: 400 10px var(--font-mono); color: var(--fg-4); }
/* PAS 2 */
.sr-b2 { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 18px 14px; align-items: center; border-top: 1px dashed var(--border); padding-top: 2px; height: 36px; box-sizing: border-box; }
.sr-b2-l { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.sr-amt { font: 500 12px var(--font-mono); color: var(--fg-2); }
.sr-load { font: 400 11px var(--font-mono); color: var(--fg-4); overflow: hidden; text-overflow: ellipsis; }
.sr-b2-r { justify-self: end; }
.sr-dist { font: 400 11px var(--font-mono); color: var(--fg-4); white-space: nowrap; }
.sr-products { grid-column: 1 / -1; font: 400 10px var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* PAS 3 */
.sr-b3 { display: flex; align-items: center; gap: 8px; height: 28px; margin-top: 2px; }
.sr-b3-l { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.sr-term { font: 500 11px var(--font-mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; }
#screen-editor .sms-monit { font: 500 11px var(--font-mono); color: var(--amber); margin: 0; }
#screen-editor .sms-monit.okwin { color: var(--green); }
.sr-b3-r { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.sr-min { height: 22px; padding: 0 8px; border-radius: 99px; border: 0; background: var(--amber-bg); color: var(--amber); font: 500 10px var(--font-mono); display: inline-flex; align-items: center; cursor: default; white-space: nowrap; }
button.sr-min { cursor: pointer; }
.sr-btn { height: 24px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--fg-2); font: 600 11px var(--font-sans); cursor: pointer; white-space: nowrap; }
.sr-btn:hover { background: var(--surface-3); }
.sr-btn.sent { color: var(--green); border-color: var(--green); background: var(--green-bg); }
.sr-btn.pending { color: var(--amber); border-color: var(--amber-line); background: var(--amber-bg); }
.sr-btn.fail, .sr-btn.danger { color: var(--red); border-color: var(--red-line); }
.sr-btn.fail { background: var(--red-bg); }
.sr-more { width: 24px; height: 24px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--fg-4); font: 700 13px/1 var(--font-sans); cursor: pointer; }
.sr-more:hover { border-color: var(--border-strong); color: var(--fg-2); }
.sr-x { width: 22px; height: 22px; border: 0; background: transparent; color: var(--fg-4); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; }
.sr-x:hover { color: var(--red); background: var(--red-bg); }
/* plakietki w edytorze: sans 500 10px, tokeny */
#screen-editor .chip { height: 18px; padding: 0 7px; font: 500 10px var(--font-sans); border: 0; letter-spacing: 0; }
#screen-editor .chip.c-green { background: var(--green-bg); color: var(--green); }
#screen-editor .chip.c-amber { background: var(--amber-bg); color: var(--amber); }
#screen-editor .chip.c-red { background: var(--red-bg); color: var(--red); }
#screen-editor .chip.c-blue { background: var(--blue-bg); color: var(--blue); }
#screen-editor .chip.c-grey { background: var(--surface-3); color: var(--fg-3); }

/* 7. postoje i noclegi — podrzędne */
#screen-editor .break-row-editor { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 8px; background: var(--surface-2); border: 0; border-bottom: 1px solid var(--border); font-family: var(--font-sans); cursor: pointer; }
#screen-editor .break-row-editor.drag-over { box-shadow: inset 0 2px 0 0 var(--blue); border-top: 0; }
#screen-editor .break-row-editor .dh { padding-top: 0; }
.br-handle-ph { width: 12px; flex-shrink: 0; }
.br-kind { font: 600 12px var(--font-sans); color: var(--fg-2); flex-shrink: 0; }
.br-len { font: 500 12px var(--font-mono); color: var(--fg-1); flex-shrink: 0; }
.br-len.night { color: var(--violet); }
.br-ctx { flex: 1; min-width: 0; font: 400 11px var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-x { width: 22px; height: 22px; border: 0; background: transparent; color: var(--fg-4); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; flex-shrink: 0; }
.br-x:hover { color: var(--red); background: var(--red-bg); }
.br-link { flex-shrink: 0; height: 26px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg-2); font: 500 11px var(--font-sans); text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.br-link:hover { background: var(--surface-3); }
#screen-editor .night-row { cursor: default; }
#screen-editor .r-ftr { font: 400 11px var(--font-sans); color: var(--fg-4); background: var(--surface-2); border-top: 1px solid var(--border); }

/* 8. stopka panelu */
#bottom { padding: 10px; gap: 8px; border-top: 1px solid var(--border); background: var(--surface); }
.eb-seg { display: flex; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.eb-seg button { flex: 1; height: 30px; border: 0; background: var(--surface-2); color: var(--fg-2); font: 500 12px var(--font-sans); cursor: pointer; }
.eb-seg button.act-draft, .eb-seg button.act-active { background: var(--surface); color: var(--fg-1); font-weight: 600; }
.eb-seg button:disabled { opacity: .45; cursor: default; }
.eb-row { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.eb-stage { display: flex; flex-direction: column; }
.eb-primary { flex: 1; height: 32px; padding: 0 12px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue); color: #fff; font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.eb-primary:hover { filter: brightness(.94); }
.eb-primary:disabled { background: var(--surface-2); border-color: var(--border); color: var(--fg-4); cursor: default; filter: none; }
.eb-stage .eb-primary { width: 100%; }
.eb-outline { height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg-2); font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.eb-outline:hover { background: var(--surface-3); }
.eb-more { position: relative; }
.eb-menu { display: none; position: absolute; bottom: 38px; right: 0; min-width: 230px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2); z-index: 50; }
.eb-more.open .eb-menu { display: block; }
.eb-menu button { display: block; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-1); font: 500 12px var(--font-sans); text-align: left; cursor: pointer; white-space: nowrap; }
.eb-menu button:hover { background: var(--surface-3); }
.eb-menu button:disabled { opacity: .4; cursor: default; }
.eb-menu button.danger { color: var(--red); }
.eb-menu button.danger:hover { background: var(--red-bg); }

/* 9. mapa — przełącznik trybu, warstwy, legenda */
#screen-editor .plan-mode-toggle { display: flex; gap: 1px; height: 30px; background: var(--border); border: 1px solid var(--border); border-radius: 99px; box-shadow: 0 2px 10px rgba(0,0,0,.1); overflow: hidden; }
#screen-editor .pm-btn { height: 28px; padding: 0 14px; background: var(--surface-2); color: var(--fg-2); font: 500 12px var(--font-sans); }
#screen-editor .pm-btn.active { background: var(--surface); color: var(--fg-1); font-weight: 600; }
#screen-editor #editor-map-toggles { position: absolute; top: 10px; right: 10px; z-index: 10; display: none; flex-direction: column; gap: 6px; width: 170px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
#screen-editor #editor-map-toggles.shown { display: flex; }
#screen-editor #editor-map-toggles > .visible ~ .visible { border-left: 0; }
.ml-title { font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }
#screen-editor .ml-row { display: none; align-items: center; gap: 8px; padding: 0; cursor: pointer; user-select: none; flex-direction: row; }
#screen-editor .ml-row.visible { display: flex !important; }
#screen-editor .map-toggle-label, #screen-editor #route-toggle-label { font: 400 12px var(--font-sans); color: var(--fg-1); text-align: left; }
#screen-editor .map-toggle-switch, #screen-editor #route-toggle-switch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: none; position: relative; flex-shrink: 0; }
#screen-editor .map-toggle-switch::after, #screen-editor #route-toggle-switch::after { display: none; }
#screen-editor .map-toggle-knob, #screen-editor #route-toggle-knob { display: none; }
#screen-editor .map-toggle-switch.on, #screen-editor #route-toggle-switch.on { background: var(--blue); border-color: var(--blue); }
#screen-editor .map-toggle-switch.on::before, #screen-editor #route-toggle-switch.on::before { content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#editor-legend { position: absolute; top: 132px; right: 10px; z-index: 10; width: 170px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
#editor-map-toggles:not(.shown) ~ #editor-legend { top: 10px; }
.lg-row { display: flex; align-items: center; gap: 8px; font: 400 11px var(--font-sans); color: var(--fg-2); }
.lg-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex-shrink: 0; }
.lg-dot.lg-ring { background: var(--surface); box-shadow: 0 0 0 2px var(--blue); }
#screen-editor #approved-overlay { display: none !important; }
#screen-editor #prod-filter-panel { top: 50px; border-radius: 10px; }
#screen-editor .pfp-title { font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }

/* 10. pasek KPI */
#screen-editor #route-stats-bar { bottom: 16px; border-radius: 12px !important; background: var(--border) !important; border: 1px solid var(--border) !important; box-shadow: 0 4px 20px rgba(0,0,0,.12) !important; gap: 1px; overflow: hidden; max-width: calc(100% - 32px); }
.kpi-t { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 14px; background: var(--surface); min-width: 72px; }
.kpi-v { display: flex; align-items: baseline; gap: 3px; font: 500 16px var(--font-mono); color: var(--fg-1); line-height: 1; white-space: nowrap; }
.kpi-v.red { color: var(--red); } .kpi-v.amber { color: var(--amber); } .kpi-v.green { color: var(--green); }
.kpi-u { font: 400 10px var(--font-sans); color: var(--fg-4); }
.kpi-den { font: 400 10px var(--font-mono); color: var(--fg-4); }
.kpi-l { font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }
.kpi-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; margin-right: 3px; background: var(--fg-4); }
.kpi-dot.green { background: var(--green); } .kpi-dot.amber { background: var(--amber-line); } .kpi-dot.red { background: var(--red-line); }

/* 11.4 wąski ekran: mapa pod panelem, KPI przyklejone do dołu */
@media (max-width: 1199px) {
  #screen-editor { flex-direction: column; overflow-y: auto; }
  #sidebar { width: 100% !important; min-width: 0 !important; max-height: 60vh; }
  #editor-map-wrap { min-height: 50vh; }
  #screen-editor #route-stats-bar { position: sticky; bottom: 0; left: 0; transform: none; margin: 0 auto; }
}
/* 1.5 w edytorze nie ma „+ Nowa trasa" — jesteśmy już w trasie */
#app:has(#screen-editor.active) #routes-new-btn { display: none; }
.eh-time { width: 96px; text-align: left; }
.sr-term { flex-shrink: 0; }
#screen-editor .sms-monit { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#screen-editor .stop-row.is-warn, #screen-editor .stop-row.is-warn:hover { background: color-mix(in srgb, var(--amber-bg) 55%, var(--surface)); }


/* ══ EDYTOR TRASY — poprawki po wdrożeniu (kółko numeru, plakietki, 3 pasy, postoje, stopka) ══ */
/* 1. wiersz = [16px uchwyt][22px numer][1fr treść]; bez overflow:hidden na wierszu (zostaje na liście) */
#route-list { overflow-y: auto; overflow-x: hidden; }
#screen-editor .stop-row { grid-template-columns: 16px 22px minmax(0,1fr); gap: 0 6px; padding: 8px 10px 8px 6px; height: 112px; overflow: visible; align-items: start; }
#screen-editor .stop-row-left { display: none; }
.sr-handle { display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; min-height: 22px; overflow: visible; }
.sr-numcol { display: flex; align-items: flex-start; justify-content: center; padding-top: 0; overflow: visible; }
#screen-editor .stop-row-num { width: 22px; height: 22px; flex-shrink: 0; }
#screen-editor .dh { padding-top: 0; }
/* 2. plakietki nigdy się nie kurczą; ellipsis tylko na nazwisku/adresie */
.sr-idline { display: flex; align-items: center; gap: 5px; height: 18px; min-width: 0; overflow: hidden; }
.sr-idline > * { flex: 0 0 auto; white-space: nowrap; }
#screen-editor .chip { flex: 0 0 auto; white-space: nowrap; }
.chip-more { font: 500 10px var(--font-mono); color: var(--fg-4); cursor: help; }
.sr-b1 { height: 34px; }
.sr-b1-l { flex: 1; min-width: 0; overflow: hidden; }
.sr-b1-r { flex: 0 0 auto; }
.sr-nameline { height: 16px; min-width: 0; }
.sr-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sr-sep { color: var(--fg-4); font: 400 11px var(--font-sans); flex: 0 0 auto; }
.sr-city { flex: 0 0 auto; }
/* 4.3 okno godzinowe: --fg-3 (kontrast) */
.sr-win { color: var(--fg-3); }
/* 3. PAS 2 i 3 — odstępy wg spec */
.sr-b2 { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); height: auto; grid-template-rows: 16px 13px; }
.sr-b3 { margin-top: 6px; height: 24px; }
.sr-products { line-height: 13px; }
.sr-min { height: 22px; }
/* 5. postoje i noclegi: 40px, w kolumnie treści, tylko uchwyt, Booking jako link tekstowy */
#screen-editor .break-row-editor { height: 40px; margin-left: 34px; padding: 0 10px 0 6px; gap: 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
#screen-editor .break-row-editor .dh { flex-shrink: 0; }
.br-handle-ph { display: none; }
.br-kind { font: 500 12px var(--font-sans); color: var(--fg-2); }
.br-len { font: 500 12px var(--font-mono); color: var(--fg-1); }
.br-x { width: 20px; height: 20px; font-size: 14px; }
.br-link { height: auto; padding: 0; border: 0; background: transparent; color: var(--blue); font: 500 11px var(--font-sans); }
.br-link:hover { background: transparent; text-decoration: underline; }
/* 6. stopka: kafle 2×2 + segmented + akcje, maks 132px */
#bottom { padding: 8px 10px; gap: 6px; max-height: 132px; box-sizing: border-box; }
.ebs-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ebs-t { background: var(--surface); padding: 4px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ebs-v { font: 500 12px var(--font-mono); color: var(--fg-1); white-space: nowrap; line-height: 1.2; }
.ebs-v .u { font: 400 9px var(--font-sans); color: var(--fg-4); margin-left: 2px; }
.ebs-l { font: 500 9px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }
.ebs-note { font: 400 10px var(--font-sans); color: var(--fg-4); margin-top: 3px; }
.eb-seg button { height: 28px; }
.eb-outline, .eb-primary { height: 32px; }
#screen-editor .r-ftr { display: none; }
/* 7.2 ikona zegara przy godzinie startu */
.eh-time::-webkit-calendar-picker-indicator { width: 16px; height: 16px; opacity: .45; cursor: pointer; margin-left: 2px; }
/* 7.3 licznik zakładki */
.stab-n { font: 400 10px var(--font-mono); color: var(--fg-4); }
/* E. jeden filled primary w panelu: „+ Dodaj" jako kontur w kolorze --blue */
.rqa-add { background: var(--surface); color: var(--blue); border-color: var(--blue); }
.rqa-add:hover { background: var(--blue-bg); filter: none; }


/* ══ EDYTOR — poprawki 3: plakietki (grid pasa 1), daty numeryczne, menu „⋯", SERWIS bez pustego pasa ══ */
.sr-b1 { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: start; }
.sr-b1-l { min-width: 0; overflow: hidden; }
.sr-b1-r { justify-self: end; }
.sr-idline { min-width: 0; overflow: hidden; }
.sr-idline .chip, .sr-idline .sr-id, .sr-idline .chip-more { flex: 0 0 auto; white-space: nowrap; }
.sr-b3-l { min-width: 0; overflow: hidden; }
.sr-term { flex: 0 0 auto; white-space: nowrap; }
.sr-x { display: none; }
.sr-menu-wrap { position: relative; display: inline-flex; }
.sr-menu { display: none; position: absolute; top: 28px; right: 0; min-width: 190px; padding: 6px; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.sr-menu-wrap.open .sr-menu { display: block; }
.sr-menu-wrap.open .sr-more { border-color: var(--border-strong); color: var(--fg-2); }
.sr-menu button { display: block; width: 100%; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--fg-1); font: 500 12px var(--font-sans); text-align: left; cursor: pointer; white-space: nowrap; }
.sr-menu button:hover { background: var(--surface-3); }
.sr-menu button.danger { color: var(--red); }
.sr-menu button.danger:hover { background: var(--red-bg); }
#screen-editor .stop-row { overflow: visible; }
/* SERWIS / P / Z: pas 2 i 3 scalone, wysokość wg treści (bez pustych pasów) */
#screen-editor .stop-row.is-manual { height: auto; }
.sr-b23 { border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 6px; height: auto; min-height: 24px; }
.sr-b23 .sr-b3-l { display: flex; align-items: center; gap: 12px; }
.sr-addr { flex: 1 1 auto; min-width: 0; font: 400 11px var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-b23 .sr-dist { flex: 0 0 auto; }


/* ══ EDYTOR — poprawki 4: kolejność kurczenia (miasto ma ellipsis, nazwisko min 96px), kod kraju jako plakietka,
   „+N" tylko gdy trzeba, baner winiety w jednej linii, „+N pozycje", akcje do prawej ══ */
.sr-nameline { display: flex; align-items: baseline; gap: 5px; height: 16px; min-width: 0; overflow: hidden; }
.sr-name { flex: 0 1 auto; min-width: 96px; max-width: 100%; font: 500 12px var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-sep { flex: 0 0 auto; color: var(--fg-4); font: 400 11px var(--font-sans); }
.sr-city { flex: 1 1 0; min-width: 0; font: 400 11px var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cc { flex: 0 0 auto; font: 500 10px var(--font-mono); color: var(--fg-2); background: var(--surface-3); border-radius: 99px; padding: 1px 6px; line-height: 12px; }
.chip-more { flex: 0 0 auto; margin-left: 4px; }
.rw-r2.one { -webkit-line-clamp: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rw-card { padding: 9px 11px; }
.sr-more-n { color: var(--fg-3); }
.sr-b3-r { margin-left: auto; }
/* kolejność kurczenia: miasto oddaje miejsce pierwsze (ellipsis), nazwisko skraca się dopiero, gdy samo nie mieści się w linii */
.sr-name { flex: 0 0 auto; min-width: 0; max-width: calc(100% - 64px); }
.sr-city { flex: 1 1 auto; min-width: 0; }
.sr-nameline:has(> .sr-name:only-child) .sr-name { max-width: 100%; }
/* pas 1: linia 1 = numer+plakietki | ETA, linia 2 = nazwisko · miasto na CAŁEJ szerokości (nie pod blokiem ETA) */
.sr-b1 { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "id eta" "name name"; grid-template-rows: 18px 16px; gap: 0 8px; align-items: center; height: 34px; }
.sr-b1-l { display: contents; }
.sr-idline { grid-area: id; }
.sr-nameline { grid-area: name; }
.sr-b1-r { grid-area: eta; justify-self: end; align-self: center; }


/* ══ EDYTOR — poprawki 5: prawa krawędź wiersza, wiersze listy nigdy się nie kurczą ani nie nakładają, kwoty, dół listy ══ */
/* 2. elementy listy to zwykłe pozycje w strumieniu — bez kurczenia (flex-shrink:0) i bez pozycjonowania */
#route-list > * { flex: 0 0 auto; position: static; z-index: auto; }
#route-list > .rl-stops-head { position: sticky; }   /* jedyny sticky wewnątrz listy: pasek „PRZYSTANKI" */
#screen-editor .break-row-editor { position: static; box-shadow: none; height: 40px; }
/* 1. wiersz: padding-right 14px, kolumna treści min-width:0; pas 3 jako grid (daty | 45 min | SMS | ⋯) */
#screen-editor .stop-row { box-sizing: border-box; padding: 10px 14px 10px 0; width: 100%; max-width: 100%; }
#screen-editor .stop-row .sr-body { min-width: 0; }
.sr-b3 { display: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 8px; align-items: center; }
.sr-b3-l { min-width: 0; overflow: hidden; }
.sr-b3-r { display: contents; }
.sr-b3-r > * { justify-self: end; }
.sr-b3 .sr-menu-wrap { flex: 0 0 26px; width: 26px; justify-content: flex-end; }
.sr-b3 .sr-more { width: 26px; }
.sr-b23 { grid-template-columns: minmax(0,1fr) auto auto auto; }
.sr-b1-r { padding-right: 0; }
/* 3.3 dół listy nie chowa się pod stopką */
#route-list { padding-bottom: 12px; }
#bottom { position: relative; z-index: 2; background: var(--surface); flex-shrink: 0; }
/* stała wysokość wiersza dopasowana do trzech pasów przy padding 10px (pas1 34 + pas2 38 + pas3 29 + 20) */
#screen-editor .stop-row { height: 122px; }
.sr-b2 { margin-top: 5px; padding-top: 5px; grid-template-rows: 15px 13px; }
.sr-b3 { margin-top: 5px; height: 24px; }
.sr-b23 { margin-top: 5px; padding-top: 5px; }

.sr-b23 { height: auto; min-height: 26px; }


/* ══ EDYTOR — poprawki 6: kolor stanu awizacji na wierszu, edycja postoju inline, stopka o wysokości auto ══ */
/* 1–3. tło + krawędź + kółko wg stanu awizacji (subtelne tokeny) */
#screen-editor .stop-row.av-ok { background: var(--green-bg); border-left-color: var(--green); }
#screen-editor .stop-row.av-changed { background: var(--amber-bg); border-left-color: var(--amber-line); }
#screen-editor .stop-row.av-sent { background: var(--surface); border-left-color: var(--border-strong); }
#screen-editor .stop-row.av-bad { background: var(--red-bg); border-left-color: var(--red-line); }
#screen-editor .stop-row.is-warn { background: var(--surface); }
#screen-editor .stop-row-num.n-red { background: var(--red-line); }
#screen-editor .stop-row-num.n-sent { background: var(--fg-3); }
/* 6. hover: o stopień ciemniej, bez kasowania stanu */
#screen-editor .stop-row.av-ok:hover { background: color-mix(in srgb, var(--green-bg) 80%, var(--surface-3)); }
#screen-editor .stop-row.av-changed:hover { background: color-mix(in srgb, var(--amber-bg) 80%, var(--surface-3)); }
#screen-editor .stop-row.av-bad:hover { background: color-mix(in srgb, var(--red-bg) 80%, var(--surface-3)); }
/* 4. linia SMS w kolorze stanu */
#screen-editor .sms-monit.av-ok { color: var(--green); } #screen-editor .sms-monit.av-changed { color: var(--amber); } #screen-editor .sms-monit.av-bad { color: var(--red); }
/* 5. przycisk SMS: zielony tylko „wysłany i potwierdzony" */
.sr-btn.pending { color: var(--fg-2); border-color: var(--border-strong); background: var(--surface); }
/* 9. kontrast: w pokolorowanych wierszach drugi plan --fg-2 */
#screen-editor .stop-row.av-ok .sr-city, #screen-editor .stop-row.av-ok .sr-load, #screen-editor .stop-row.av-ok .sr-products, #screen-editor .stop-row.av-ok .sr-dist, #screen-editor .stop-row.av-ok .sr-win, #screen-editor .stop-row.av-ok .sr-sep, #screen-editor .stop-row.av-ok .sr-day,
#screen-editor .stop-row.av-changed .sr-city, #screen-editor .stop-row.av-changed .sr-load, #screen-editor .stop-row.av-changed .sr-products, #screen-editor .stop-row.av-changed .sr-dist, #screen-editor .stop-row.av-changed .sr-win, #screen-editor .stop-row.av-changed .sr-sep, #screen-editor .stop-row.av-changed .sr-day,
#screen-editor .stop-row.av-bad .sr-city, #screen-editor .stop-row.av-bad .sr-load, #screen-editor .stop-row.av-bad .sr-products, #screen-editor .stop-row.av-bad .sr-dist, #screen-editor .stop-row.av-bad .sr-win, #screen-editor .stop-row.av-bad .sr-sep, #screen-editor .stop-row.av-bad .sr-day { color: var(--fg-2); }
#screen-editor .stop-row.av-ok .sr-more-n, #screen-editor .stop-row.av-changed .sr-more-n, #screen-editor .stop-row.av-bad .sr-more-n { color: var(--fg-2); }
/* 7. postój / nocleg bez koloru stanu (zostaje --surface-2) — bez zmian; 10. kontrolki postoju */
.br-acts { display: inline-flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.br-ico { width: 22px; height: 22px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--fg-4); font-size: 12px; line-height: 1; cursor: pointer; }
.br-ico:hover { border-color: var(--border-strong); color: var(--fg-2); }
#screen-editor .br-x { margin-left: 0; }
.br-len.as-btn { border: 0; background: transparent; padding: 0; cursor: pointer; font: 500 12px var(--font-mono); color: var(--fg-1); }
.br-len.as-btn:hover { text-decoration: underline; }
.dis, .br-ico.dis, .br-x.dis, .br-len.dis, .dh.dis { opacity: .4; pointer-events: none; }
.break-row-editor.is-editing { cursor: default; }
.br-inp { width: 52px; height: 26px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--fg-1); font: 500 12px var(--font-mono); }
.br-u { font: 400 11px var(--font-sans); color: var(--fg-4); }
.br-save { height: 26px; padding: 0 10px; border: 1px solid var(--blue); border-radius: 6px; background: var(--blue); color: #fff; font: 600 11px var(--font-sans); cursor: pointer; }
.br-cancel { height: 26px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--fg-2); font: 500 11px var(--font-sans); cursor: pointer; }
/* 11. stopka: wysokość auto, grid, safe-area; lista flex:1 1 auto z padding-bottom 16px */
#sidebar { display: flex; flex-direction: column; height: 100%; }
#route-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
#bottom { height: auto; max-height: none; display: grid; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); flex: 0 0 auto; }
#bottom .eb-seg button, #bottom .eb-primary, #bottom .eb-outline, #bottom .eb-stage button { height: 32px; }
#optimize-btn { flex: 1; }
#optimize-btn.eb-outline { color: var(--fg-2); }


/* ══ EDYTOR — poprawki 7: neutralna pastylka czasu montażu; postój/nocleg w siatce przystanków, bez wcięcia ══ */
/* 1. w pokolorowanym wierszu plakietki są neutralne: czas montażu = --surface + obwódka; kolor tylko ≥ 60 min */
#screen-editor .sr-min { background: var(--surface); border: 1px solid var(--border-strong); color: var(--fg-2); font: 500 11px var(--font-mono); gap: 4px; }
#screen-editor .sr-min .ic { font-size: 10px; line-height: 1; opacity: .8; }
#screen-editor .sr-min.long { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
/* 2. postój / nocleg: pełna szerokość, [16 uchwyt][22 pusta][1fr treść], 36px, lewa krawędź 3px --border-strong, nigdy kolor stanu */
#screen-editor .break-row-editor { display: grid; grid-template-columns: 16px 22px minmax(0,1fr); gap: 0 6px; align-items: center;
  height: 36px; margin-left: 0; padding: 0 14px 0 0; box-sizing: border-box; background: var(--surface-2); border-left: 3px solid var(--border-strong); border-bottom: 1px solid var(--border); }
#screen-editor .break-row-editor .dh { justify-self: center; }
.br-ph { display: block; }
.br-body { display: flex; align-items: center; gap: 8px; min-width: 0; }
.br-body .br-ctx { flex: 1; min-width: 0; }
.br-body .br-acts { margin-left: auto; }
#screen-editor .break-row-editor.is-night { background: var(--surface-2); }

/* Topbar: wyszukiwarka tak szeroka jak panel wyników (620px) */
#topbar .route-order-search-wrap { flex: 1 1 620px; max-width: 620px; }
#topbar .tb-right { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
@media (max-width: 1360px) { #topbar .route-order-search-wrap { max-width: 460px; } }
@media (max-width: 1100px) { #topbar .route-order-search-wrap { max-width: 280px; } }


/* ══ LISTA TRAS — POSTĘP i PRZYST./KM: dymek produkcji, pastylka załadunku, marker pozycji kierowcy ══ */
#routes-grid .rl-row { overflow: visible; }
#routes-grid .rl-c { overflow: hidden; }
#routes-grid .rl-c-stats, #routes-grid .rl-c-prog { overflow: visible; }
#routes-grid .rl-row:hover { z-index: 3; }
/* 1. dymek produkcji (jasny) */
.prodwarn-wrap { position: relative; display: inline-flex; }
#screen-routes .rc-prodwarn { cursor: help; }
.pw-tip { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 40; min-width: 260px; max-width: 360px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 8px 32px rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: 8px; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .12s ease .2s, transform .12s ease .2s, visibility 0s linear .2s; pointer-events: none; text-align: left; white-space: normal; font-family: var(--font-sans); }
.pw-tip.flip { left: auto; right: 0; }
.prodwarn-wrap:hover .pw-tip, .prodwarn-wrap:focus-within .pw-tip { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.pw-row { display: flex; flex-direction: column; gap: 2px; }
.pw-l1 { display: flex; align-items: baseline; gap: 6px; }
.pw-id { font: 500 11px var(--font-mono); color: var(--blue); }
.pw-cl { font: 400 11px var(--font-sans); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-l2 { font: 500 12px var(--font-sans); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-l3 { display: flex; align-items: center; gap: 6px; }
.pw-ns { font: 400 10px var(--font-mono); color: var(--fg-4); }
.pw-stage { font: 500 10px var(--font-sans); background: var(--amber-bg); color: var(--amber); border-radius: 99px; padding: 1px 7px; }
.pw-date { font: 500 11px var(--font-mono); color: var(--fg-2); margin-left: auto; }
.pw-date.late { color: var(--red); } .pw-date.same { color: var(--amber); }
.pw-more { font: 400 10px var(--font-sans); color: var(--fg-4); }
.pw-foot { font: 400 10px var(--font-mono); color: var(--fg-4); border-top: 1px solid var(--border); padding-top: 6px; }
/* 2. pastylka załadunku — jeden format, bez zieleni */
#routes-grid .rc-start-chip { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; background: var(--surface); border: 1px solid var(--border-strong); color: var(--fg-2); border-radius: 99px; padding: 1px 8px; font: 500 11px var(--font-mono); line-height: 14px; }
#routes-grid .rc-start-chip .arr { color: var(--fg-4); font-size: 10px; }
#routes-grid .rc-start-chip .src { font-size: 10px; line-height: 1; }
#routes-grid .rc-start-chip.approx { border-style: dashed; }
#routes-grid .rc-ld-line { display: none; }
/* 2.5 / 3. tor POSTĘP: grid 2 rzędów — pasek z markerem / licznik · % · pastylka */
#routes-grid .rl-c-prog { display: grid; grid-template-rows: 18px 16px; row-gap: 0; align-content: start; padding-right: 8px; }
#routes-grid .rl-barline { display: flex; align-items: flex-end; height: 18px; }
#routes-grid .rl-track { position: relative; overflow: visible; width: 100%; height: 3px; margin-bottom: 4px; }
#routes-grid .rl-fill { position: absolute; left: 0; top: 0; height: 3px; border-radius: 2px; }
#routes-grid .rl-markerslot { position: absolute; inset: 0; pointer-events: none; }
#routes-grid .rl-marker-wrap { position: absolute; bottom: 100%; margin-bottom: 2px; transform: translateX(-50%); pointer-events: auto; display: inline-flex; flex-direction: column; align-items: center; }
#routes-grid .rl-marker { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--blue); filter: drop-shadow(0 0 1px var(--surface)); cursor: help; }
#routes-grid .rl-marker.amber { border-top-color: var(--amber-line); } #routes-grid .rl-marker.red { border-top-color: var(--red-line); }
#routes-grid .rl-marker-wrap .live-tip { top: 100%; left: auto; right: auto; transform: translateX(0); }
#routes-grid .rl-prog-meta2 { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; column-gap: 8px; align-items: center; height: 16px; min-width: 0; }
#routes-grid .rl-prog-meta2 .rl-pm { font: 500 11px var(--font-mono); color: var(--fg-2); white-space: nowrap; }
#routes-grid .rl-prog-meta2 .rl-pct { font: 400 11px var(--font-mono); color: var(--fg-4); margin: 0; white-space: nowrap; }
#routes-grid .rl-pm-r { justify-self: end; display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
#routes-grid .rl-lastdone { font: 400 10px var(--font-sans); color: var(--fg-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.pw-head { font: 500 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-4); }
#screen-routes .rc-prodwarn { flex: 0 0 auto; }
/* dymek produkcji nie może być ucinany przez wiersz pomocniczy komórki */
#routes-grid .rl-c-stats .rl-sub-row { overflow: visible; }
#routes-grid .rl-c-stats .rl-sub-row > .rl-sec { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Nota w stopce edytora (np. zwrotka ERP o zamknięciu listy załadunkowej) — pełna szerokość, tokeny */
#bottom .eb-note { display: flex; align-items: baseline; gap: 6px; width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 8px; font: 500 11px var(--font-sans); }
#bottom .eb-note.ok { background: var(--green-bg); color: var(--green); }
#bottom .eb-note .ebn-ic { flex: 0 0 auto; font-weight: 700; }
#bottom .eb-note .ebn-txt { flex: 1 1 auto; min-width: 0; }
#bottom .eb-note .ebn-when { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 500; }

/* Menu „Więcej" w stopce edytora: gdy Optymalizuj wraca do menu, PDF+Więcej są przy prawej krawędzi,
   więc menu (right:0) otwiera się w lewo w obrębie panelu; max-width chroni przy bardzo wąskim panelu */
.eb-menu { max-width: calc(100vw - 24px); }

/* Stan awizacji SMS: „wysłano · czeka na odpowiedź" jest neutralny (nie zielony) — zielony tylko dla dostarczonych */
#screen-editor .sms-monit.av-sent { color: var(--fg-3); font-weight: 500; }
#screen-editor .sr-btn.sent-neutral { color: var(--fg-2); border-color: var(--border-strong); }
#screen-editor .sr-btn.sent-neutral::before { content: "• "; color: var(--fg-4); }

/* Opis stanu awizacji jest klikalny — otwiera modal decyzji (potwierdzenie / odmowa) */
#screen-editor .aviz-hit { cursor: pointer; display: inline-flex; align-items: center; }
#screen-editor .aviz-hit:hover .sms-monit { text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════
   ZDJĘCIA Z DOSTAW — wyszukiwarka model → tkanina → galeria (#screen-photos)
══════════════════════════════════════════════════════════════════ */
#screen-photos { background: var(--bg); font-family: var(--font-sans); color: var(--fg-1); }
#screen-photos .routes-toolbar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 0; }
#screen-photos .routes-toolbar-top h2 { margin: 0; font: 600 18px var(--font-sans); }
.phs-wrap { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 12px 20px 16px; }
.phs-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.phs-step { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.phs-step-hint { font-weight: 400; color: var(--fg-3); }
.phs-step-h { font: 600 12px var(--font-sans); color: var(--fg-2); }
.phs-q { padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-12); background: var(--surface); color: var(--fg-1); }
.phs-list { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.phs-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 7px 8px; border: none; border-radius: 6px; background: transparent; color: var(--fg-1); font: 500 12px var(--font-sans); cursor: pointer; }
.phs-item:hover { background: var(--surface-3); }
.phs-item.on { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
.phs-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phs-cnt { flex-shrink: 0; font: 500 10px var(--font-mono); color: var(--fg-3); }
.phs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.phs-summary { font-size: var(--fs-12); color: var(--fg-2); padding: 2px 0 8px; }
/* grid-auto-rows + flex-shrink:0 w kafelku: przy setkach zdjęć wiersze nie mogą się ściskać (były paski po 8 px) */
.phs-gallery { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-rows: max-content; gap: 12px; align-content: start; }
.phs-empty { padding: 12px; color: var(--fg-3); font-size: var(--fs-12); }
.phs-empty.big { grid-column: 1 / -1; padding: 48px 16px; text-align: center; font-size: var(--fs-13); }
.phs-empty.err { color: var(--red); }
.phs-tile { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); cursor: zoom-in; text-align: left; color: var(--fg-1); }
.phs-tile:hover { border-color: var(--blue); }
.phs-tile > * { flex-shrink: 0; }
.phs-img { display: block; aspect-ratio: 4 / 3; background: var(--surface-3); }
.phs-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phs-noimg { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--fs-11); color: var(--fg-3); }
.phs-cap { display: flex; justify-content: space-between; gap: 6px; padding: 6px 8px; font-size: var(--fs-11); color: var(--fg-2); }
.phs-model { padding: 0 8px 7px; margin-top: -3px; font-size: var(--fs-11); color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phs-ord { font-family: var(--font-mono); font-weight: 600; color: var(--blue); }
.phs-zoom { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.82); align-items: center; justify-content: center; padding: 16px; }
.phs-zoom.open { display: flex; }
.phs-zoom-box { display: flex; flex-direction: column; gap: 8px; max-width: 100%; max-height: 100%; }
.phs-zoom-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: #fff; font-size: var(--fs-13); }
.phs-zoom-nav { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-12); }
.phs-zoom-box img { max-width: calc(100vw - 32px); max-height: calc(100vh - 90px); object-fit: contain; border-radius: 6px; background: #000; }
@media (max-width: 820px) {
  .phs-wrap { flex-direction: column; overflow-y: auto; padding: 10px 16px 16px; }
  .phs-side { width: 100%; }
  .phs-list { max-height: 220px; }
  .phs-gallery { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}