/* -------------------------------------------------------
   Global design tokens
------------------------------------------------------- */
:root{
  /* palette */
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: #e6ebf3;
  --line-2: #eef2f7;

  --primary: #2563eb;
  --primary-600:#1d4ed8;
  --success:#16a34a;
  --success-600:#15803d;
  --danger:#dc2626;
  --danger-600:#b91c1c;
  --warning:#f59e0b;

  --rozvoz:#2b7fff;
  --svoz:#ff8a00;

  --radius: 12px;
  --radius-lg: 14px;
  --shadow: 0 8px 24px rgba(2,8,23,.08);
  --ring: 0 0 0 3px rgba(37,99,235,.18);
  --ring-danger: 0 0 0 3px rgba(220,38,38,.18);

  --safe-right: env(safe-area-inset-right);
  --safe-left: env(safe-area-inset-left);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* -------------------------------------------------------
   Base
------------------------------------------------------- */
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  /* Kritické: Odsazení celého obsahu pod fixní App Header (50px) */
  padding-top: 50px; 
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ max-width:100%; height:auto }

a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }

.hidden{ display:none !important }
.spacer{ flex:1 }
.muted{ color:var(--muted) }
small, .small{ font-size:12px; color:var(--muted) }

/* -------------------------------------------------------
   Header (stránkové)
------------------------------------------------------- */
header, 
header[data-ui="app-header"] {
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  z-index: 1000; /* Vysoký z-index */
  display: flex; 
  align-items: center; 
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.85); 
  backdrop-filter: saturate(120%) blur(4px);
  -webkit-backdrop-filter: saturate(120%) blur(4px); 
  height: 50px; 
  overflow-x: auto;
  overflow-y: hidden;
}


/* -------------------------------------------------------
   Buttons
------------------------------------------------------- */
.btn, .btn-ghost, .icon-btn, .link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; user-select:none;
  transition:transform .06s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn{
  padding:10px 14px; border:1px solid var(--primary-600);
  border-radius:var(--radius); background:var(--primary); color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.18);
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn:focus-visible{ outline:none; box-shadow:var(--ring) }

.btn.primary{ background:var(--primary); border-color:var(--primary-600); color:#fff }
.btn.danger{ background:var(--danger); border-color:var(--danger-600) }
.btn.danger:focus-visible{ box-shadow:var(--ring-danger) }

.btn-ghost{
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:var(--radius);
  background:#f3f4f6; color:#111827;
}
.btn-ghost:hover{ background:#eef2f7 }
.btn-ghost.danger{ color:#b91c1c; border-color:#f1b4b4; background:#fff5f5 }

/* routes.html filtry – na mobilu pod sebe a text může zalamovat */
.toolbar label{ display:flex; align-items:center; gap:6px; white-space:normal }
@media (max-width: 520px){
  #filters.toolbar{ flex-direction:column; align-items:flex-start; gap:6px; }
  #filters.toolbar label{ width:100%; }
}

.icon-btn{
  width:36px; height:36px; border-radius:999px;
  border:1px solid #e5e7eb; background:#f8fafc;
}
.icon-btn:hover{ background:#eef2f7 }

.link-btn{
  padding:6px 10px; border-radius:8px;
  border:1px solid #e5e7eb; background:#f3f4f6; color:#111827;
}
.link-btn:hover{ background:#eef2f7 }

.disabled, .btn:disabled, .btn-ghost:disabled, .icon-btn:disabled{
  opacity:.6; cursor:default; pointer-events:none;
}

/* -------------------------------------------------------
   Inputs & Forms
------------------------------------------------------- */
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid #ccd4e0;
  border-radius:10px;
  background:#fff; color:var(--text);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--primary-600); box-shadow:var(--ring);
}
input[disabled],select[disabled],textarea[disabled]{ background:#f5f7fb; color:#94a3b8 }

input[type="search"]{ -webkit-appearance:none; appearance:none }
input::placeholder, textarea::placeholder{ color:#94a3b8 }

/* **FIX**: checkbox/radio nesmí mít width:100% */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  height:auto;
  margin:0;
  vertical-align:middle;
  accent-color: var(--primary);
}

/* inline mini ovládací prvky */
.btn-icon{
  border:1px solid #d7dbe3; background:#fff; border-radius:10px; padding:8px 10px;
  transition:background .18s ease, border-color .18s ease, transform .06s ease;
}
.btn-icon:hover{ background:#f8fafc }
.btn-icon:active{ transform:scale(.98) }

/* Doručeno – úzká zelená ikona (✓ / ↺), ať se vejdou i budík + křížek */
.btn-icon.done-toggle{
  padding:8px 8px;
  min-width:2.2em;
  font-weight:700;
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.btn-icon.done-toggle:hover{ background:#bbf7d0; border-color:#4ade80; }
.btn-icon.done-toggle.is-undone{
  color:#15803d;
  background:#f0fdf4;
  border-color:#86efac;
}

/* textarea editor poznámky v app */
.note-edit{
  width:100%; padding:10px 12px; border:1px solid #d7dbe3; border-radius:10px;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
}

/* -------------------------------------------------------
   Cards / Lists / Pills / Badges
------------------------------------------------------- */
.card{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:12px; background:var(--card); box-shadow:var(--shadow);
}
.list{ padding:12px; display:grid; gap:12px }

.pill, .badge, .state-pill{
  font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid #e5e7eb;
  background:#f9fafb; color:#374151; width:max-content;
}
.pill.admin, .badge.admin{ background:#eef2ff; border-color:#c7d2fe; color:#1e3a8a }
.pill.inactive, .badge.inactive, .state-pill.inactive{ background:#fff1f2; border-color:#fecdd3; color:#b91c1c }
.state-pill{ background:#ecfdf5; color:#065f46 }
.state-pill.inactive{ background:#fff1f2; color:#991b1b }

/* malý štítek pro vlastníka ve výpisu tras (admin) */
.owner-tag{
  font-size:12px; color:#4b5563; background:#f3f4f6; border:1px solid #e5e7eb;
  padding:2px 6px; border-radius:999px; margin-left:6px;
}

/* mřížky na users/user_perms */
.grid{ display:grid; grid-template-columns:repeat(2,minmax(160px,1fr)); gap:10px }
.grid2{ display:grid; grid-template-columns:repeat(2,minmax(200px,1fr)); gap:12px }
@media (max-width:860px){
  .grid, .grid2{ grid-template-columns:1fr }
}
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.row1{ display:flex; gap:8px; align-items:center; justify-content:space-between }

/* -------------------------------------------------------
   Toolbars & Filters
------------------------------------------------------- */
.toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:10px 12px; border-bottom:1px solid var(--line-2); background:#fff;
}
.toolbar label{
  display:flex;             
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#374151;
  white-space:normal;       
}
.toolbar .hidden{ display:none !important }

/* **FIX**: routes.html filtry – na mobilu pod sebe */
@media (max-width: 520px){
  #filters.toolbar{ flex-direction:column; align-items:flex-start; gap:6px; }
  #filters.toolbar label{ width:100%; }
}

/* -------------------------------------------------------
   Sheets (pravý panel uživatele)
------------------------------------------------------- */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  z-index: 1500; 
}
.sheet-backdrop.open{ opacity:1; pointer-events:auto }

.sheet{
  position:fixed; top:0; right:0; height:100%; width:320px; max-width:100vw;
  background:#fff; box-shadow:-6px 0 24px rgba(0,0,0,.15);
  transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column;
  border-top-left-radius:16px; border-bottom-left-radius:16px;
  z-index: 1600; 
}
.sheet.open{ transform:translateX(0) }
.sheet header{
  padding:14px; border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:8px; background:#fff;
}
.sheet .content{ padding:14px; display:grid; gap:10px }

/* položky v listu uvnitř panelu */
.sheet .list a, .sheet .list button{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#111827;
}
.sheet .list a:hover, .sheet .list button:hover{ background:#f8fafc }

/* -------------------------------------------------------
   Route list cards (.wp)
------------------------------------------------------- */
.wp{
  display:grid; grid-template-columns:1fr;
  grid-template-areas:'label' 'note' 'topis-toggle' 'topis-detail' 'btns';
  gap:6px; padding:10px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff;
  position:relative; overflow:hidden;
  transition:box-shadow .18s ease, transform .06s ease, border-color .18s ease, background .18s ease;
  will-change:transform;
}
.wp:hover{ box-shadow:0 8px 22px rgba(2,8,23,.06) }

/* Přehled trasy – bez gridu bodů (jinak zbývají prázdné řádky/gap) */
.wp.route-summary{
  display:block;
  gap:0;
  overflow:visible;
}

.wp .label{ grid-area:label; font-weight:600 }
.wp .note{
  grid-area:note; font-size:14px; color:#4b5563;
  background:#f9fbff; border:1px solid #e9eef7; border-radius:10px; padding:8px; white-space:pre-wrap
}
.wp .note.note-filled{
  background:#fff7ed;
  border-color:#fdba74;
  border-left:3px solid #f59e0b;
  color:#9a3412;
  font-size:11px;
  font-weight:500;
  padding:4px 7px;
  line-height:1.35;
}
.wp .btns{ grid-area:btns; display:flex; flex-wrap:wrap; gap:8px }

/* Telefon: všechna ovládací tlačítka bodu na jednom řádku */
@media (max-width: 640px) {
  .wp .btns{
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wp .btns::-webkit-scrollbar{ display: none; }
  .wp .btns .btn-icon{
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 4px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.1;
    text-align: center;
  }
  .wp .btns .btn-icon.done-toggle,
  .wp .btns .btn-icon.call-ahead-btn{
    min-width: 0;
    padding: 6px 4px;
  }
  .wp .btns .btn-icon.wp-type-btn,
  .wp .btns .btn-icon.wp-edit-btn{
    flex: 0 0 auto;
    padding: 6px 5px;
  }
}

.wp-topis-toggle{
  grid-area: topis-toggle;
  width: 100%;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.wp-topis-toggle:hover{ background: #dbeafe; }
.wp-topis-detail{
  grid-area: topis-detail;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 13px;
  color: #374151;
}
.wp-topis-detail .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wp-barcode-wrap{
  text-align: center;
  padding: 10px 8px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.wp-barcode-wrap .wp-barcode-hint{
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
}
.wp-topis-dl{
  display: grid;
  grid-template-columns: minmax(88px, auto) 1fr;
  gap: 4px 10px;
  margin: 0 0 10px;
}
.wp-topis-dl dt{
  margin: 0;
  font-weight: 600;
  color: #64748b;
}
.wp-topis-dl dd{ margin: 0; }
.wp-topis-notes-title{
  font-weight: 600;
  color: #1e40af;
  margin: 8px 0 6px;
}
.wp-topis-notes-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.wp-topis-notes-list li{
  padding: 6px 8px;
  margin-bottom: 4px;
  background: #fff;
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
}
.wp-topis-notes-list .note-meta{
  display: block;
  font-size: 11px;
  color: #92400e;
  margin-bottom: 2px;
}

.badge{ display:inline-block; min-width:26px; text-align:center; border:1px solid #e2e6ee; border-radius:8px; padding:2px 6px; margin-right:6px; background:#f7f9fc }

/* typové zvýraznění */
.wp.rozvoz{ border-left:6px solid var(--rozvoz); background:#f5f9ff }
.wp.svoz{   border-left:6px solid var(--svoz);   background:#fff7ed }

/* smazané body */
.wp.deleted,
.wp.deleted.rozvoz,
.wp.deleted.svoz{
  border-left-color:#dc3545; background:#fff5f5; opacity:1;
  border-bottom-color:rgba(220,53,69,0.25);
}
.wp.deleted .note{ background:#fff5f5; border-color:rgba(220,53,69,0.35); color:#7a1b20 }
.wp.deleted .badge{ border-color:rgba(220,53,69,0.45) }
.wp.deleted .btn-icon,.wp.deleted .btn{ opacity:.55; pointer-events:none; cursor:default }

/* -------------------------------------------------------
   SWIPE „Hotovo“ panel – modernizace (zprava doleva)
------------------------------------------------------- */
.wp::before{
  content:""; position:absolute; inset:0 0 0 auto; width:0;
  background:linear-gradient(90deg,var(--success) 0%,#22c55e 100%);
  opacity:.12; transition:width .22s cubic-bezier(.22,.61,.36,1); pointer-events:none;
}
.wp.show-done-action::before{ width:72px }

/* Okamžitý feedback při označení Hotovo */
.wp.wp-pending-done {
  opacity: 0.45 !important;
  filter: grayscale(0.35);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s ease, filter 0.18s ease;
}
.wp.wp-removing {
  opacity: 0 !important;
  transform: translateX(-28px) scale(0.98);
  max-height: 0;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s ease, max-height 0.28s ease, padding 0.28s ease, margin 0.28s ease;
}

/* Klikatelný panel jen na pravé užší části – ne přes celý řádek */
.swipe-done-btn{
  position:absolute; top:0; right:0; height:100%;
  width: clamp(140px, 36%, 220px);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(0deg,var(--success),#17b154); color:#fff; font-weight:700;
  border:none; border-top-left-radius:12px; border-bottom-left-radius:12px;
  box-shadow:0 6px 20px rgba(22,163,74,.25); z-index:2;
  transform:translateX(100%); transition:transform 220ms cubic-bezier(.22,.61,.36,1);
  -webkit-tap-highlight-color:transparent;
  pointer-events:none;
}
.wp.show-done-action .swipe-done-btn{ transform:translateX(0); pointer-events:auto }

/* jemné odsunutí obsahu, ať je panel vidět */
.wp.show-done-action{ transition:transform 220ms cubic-bezier(.22,.61,.36,1); transform:translateX(-8px) }

.swipe-done-btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.18) 30%,transparent 60%);
  transform:translateX(-120%); transition:transform 600ms cubic-bezier(.22,.61,.36,1);
}
.wp.show-done-action .swipe-done-btn:hover::after{ transform:translateX(20%) }
.wp.show-done-btn:active{ transform:translateX(0) scale(.98) }

/* -------------------------------------------------------
   SWIPE „Editace“ panel – NOVÉ STYLY (zleva doprava)
------------------------------------------------------- */

.wp.show-edit-action::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
    background: linear-gradient(90deg, var(--svoz) 0%, #ffc06e 100%);
    opacity: .12; transition: width .22s cubic-bezier(.22, .61, .36, 1); pointer-events: none;
}
.wp.show-edit-action::before { width: 72px; }

.swipe-edit-btn {
    position: absolute; top: 0; left: 0; height: 100%;
    width: clamp(140px, 36%, 220px);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(0deg, var(--svoz), #ffa520); color: #fff; font-weight: 700;
    border: none; border-top-right-radius: 12px; border-bottom-right-radius: 12px;
    box-shadow: 0 6px 20px rgba(255, 138, 0, 0.25); z-index: 2;
    transform: translateX(-100%); transition: transform 220ms cubic-bezier(.22, .61, .36, 1);
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}
.wp.show-edit-action .swipe-edit-btn { transform: translateX(0); pointer-events: auto; }

/* Posunutí obsahu pro editaci (na opačnou stranu) */
.wp.show-edit-action { 
    transition: transform 220ms cubic-bezier(.22, .61, .36, 1); 
    transform: translateX(8px); /* Posun doprava */
}

.swipe-edit-btn::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(270deg, transparent 0%, rgba(255, 255, 255, .18) 30%, transparent 60%);
    transform: translateX(120%); transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.wp.show-edit-action .swipe-edit-btn:hover::after { transform: translateX(-20%); }
.wp.show-edit-btn:active { transform: translateX(0) scale(.98); }


/* Editace adresy – formulář */
.address-edit-wrap {
    grid-area: note; 
    padding: 8px;
    background: var(--card); 
    border-radius: 10px;
    border: 1px solid var(--line);
}
.address-edit-wrap input {
    margin-bottom: 8px;
    font-size: 14px;
}
.address-edit-wrap .btns {
    justify-content: flex-end;
    margin-top: 8px;
}


@media (prefers-reduced-motion: reduce){
  .wp::before, .swipe-done-btn, .wp.show-done-action,
  .swipe-edit-btn, .wp.show-edit-action { transition:none }
}

/* -------------------------------------------------------
   Route list page – drobnosti
------------------------------------------------------- */
.route-actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap }
.label .state-pill{ margin-left:6px }

/* animace nástupu karet, nenaruší JS */
.list > .wp{ animation: pop .18s ease both }
@keyframes pop{ from{ transform:translateY(2px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* -------------------------------------------------------
   Map & controls (app.html) — app-shell layout
------------------------------------------------------- */
body.app-page {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: var(--app-top-offset, 50px);
}

#app-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

#map {
  flex: 0 0 38vh;
  min-height: 180px;
  max-height: 42vh;
  height: auto;
  border-bottom: 1px solid var(--line-2);
}

#wp-card {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  padding-bottom: 12px;
}

/* Režim pouze mapa - fullscreen */
#map.view-mode-map-only {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  max-height: none;
  flex: none;
  z-index: 500;
  border-bottom: none;
}

/* Režim pouze seznam - skrýt mapu */
#map.view-mode-list-only {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

body.app-page.view-mode-list-only #wp-card {
  flex: 1;
}

.leaflet-marker-bubble { background: transparent; border: none; }

.map-insert-banner {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(10px + var(--safe-top, 0px));
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(76, 29, 149, 0.18);
  color: #4c1d95;
  font-size: 13px;
  line-height: 1.35;
}
.map-insert-banner-text { flex: 1; min-width: 0; }
.map-insert-banner .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.map-insert-banner .btn-ghost {
  flex: 0 0 auto;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: #5b21b6;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  cursor: pointer;
}
body.map-insert-picking #map { cursor: crosshair; }

.controls-bottom {
  position: relative;
  flex: 0 0 auto;
  z-index: 100;
  background: #fff;
  border-top: 2px solid var(--line);
  padding: 10px calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  box-shadow: 0 -8px 24px rgba(2, 8, 23, 0.08);
}

.controls-bottom .btn {
  min-height: 46px;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 12px;
  box-shadow: none;
}

.btn-add-waypoint {
  background: var(--primary);
  border-color: var(--primary-600);
  color: #fff;
}

.btn-nav-next {
  background: var(--success);
  border-color: var(--success-600);
  color: #fff;
}

.btn-nav-next:hover { background: var(--success-600); }

/* 🔄 Seřazení trasy – indikátor stavu VPS route workeru */
#auto-sort-btn.sort-worker-btn {
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
#auto-sort-btn.sort-worker-ok {
  border-color: #16a34a !important;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.28);
}
#auto-sort-btn.sort-worker-down {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.28);
  cursor: not-allowed;
}
#auto-sort-btn.sort-worker-checking {
  opacity: 0.82;
}

/* Skrytý log pro diagnostiku (vybrat / zkopírovat) */
#sort-worker-debug-log {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sort-worker-debug-overlay {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 8px;
  background: rgba(15, 23, 42, 0.55);
}
.sort-worker-debug-panel {
  width: min(640px, 100%);
  max-height: 92vh;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}
.sort-worker-debug-panel h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}
.sort-worker-debug-panel textarea {
  flex: 1;
  min-height: 55vh;
  font: 15px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
}
.sort-worker-debug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.sort-worker-debug-actions .btn,
.sort-worker-debug-actions .btn-ghost {
  min-height: 44px;
  font-size: 16px;
  padding: 10px 16px;
}

/* Fullscreen modal — přidání bodu (nad vším včetně app headeru) */
.add-wp-modal {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  flex-direction: column;
  background: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  max-height: 100dvh;
  overflow: hidden;
}

.add-wp-modal.open {
  display: flex;
}

.add-wp-modal-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
}

.add-wp-modal-bar h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #111827;
}

.add-wp-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 20px;
}

.add-wp-modal-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-2);
  background: #fff;
}

.add-wp-modal-footer .full-width { width: 100%; }

.add-wp-type-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.add-wp-type-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}

.add-wp-type-opt input { width: auto; margin: 0; }

.add-wp-type-rozvoz:has(input:checked) {
  border-color: var(--rozvoz);
  background: #eff6ff;
  color: #1e40af;
}

.add-wp-type-svoz:has(input:checked) {
  border-color: var(--svoz);
  background: #fff7ed;
  color: #9a3412;
}

.add-wp-field {
  display: block;
  margin-bottom: 12px;
}

.add-wp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.add-wp-field-address {
  margin-bottom: 12px;
}

.add-wp-suggest-panel {
  margin: 0 0 12px;
}

.add-wp-suggest {
  position: static !important;
  left: auto;
  right: auto;
  top: auto !important;
  bottom: auto !important;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 36vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e3e8f3;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  z-index: auto;
}

.add-wp-suggest li {
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.add-wp-suggest li:hover {
  background: #f5f7fb;
}

.add-wp-suggest .suggest-section {
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  pointer-events: none;
  cursor: default;
}

.add-wp-suggest li.suggest-saved {
  background: #f0fdf4;
}

.add-wp-suggest li.suggest-saved:hover {
  background: #dcfce7;
}

body.add-sheet-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

body.add-sheet-open header[data-ui="app-header"],
body.add-sheet-open #route-filter-row,
body.add-sheet-open #impersonate-banner,
body.add-sheet-open #controls-bottom,
body.add-sheet-open #app-shell {
  pointer-events: none;
}

/* suggest */
.suggest{
  position:absolute; left:0; right:0; bottom:52px; background:#fff;
  border:1px solid #e3e8f3; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px; margin:6px 0; list-style:none; max-height:45vh; overflow:auto; display:none; 
  z-index: 1001; 
}
.suggest li{ padding:10px; border-radius:10px; cursor:pointer }
.suggest li:hover{ background:#f5f7fb }

/* Našeptávač pro nastavení depa - přepíše obecné .suggest */
.settings-depot-suggest {
  position: absolute !important;
  top: 100% !important;
  bottom: auto !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding: 4px 0 !important;
  max-height: 400px !important;
  z-index: 20001 !important;
  background: white !important;
  border: 2px solid #2563eb !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
.settings-depot-suggest li {
  padding: 14px 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  cursor: pointer !important;
}
.settings-depot-suggest li:hover {
  background: #f0f9ff !important;
}
.settings-depot-suggest li:last-child {
  border-bottom: none !important;
}

/* -------------------------------------------------------
   Misc helpers
------------------------------------------------------- */
#lock-banner{
  margin:8px 12px; padding:10px 12px; border-radius:8px;
  border:1px solid #bfdbfe; background:#eff6ff; color:#1e3a8a; font-size:14px;
}
#lock-banner.warn{ border-color:#fed7aa; background:#fff7ed; color:#9a3412 }

/* table-ish mini layout in users.js cards */
.card .grid > div > label{ display:block; font-size:12px; color:#6b7280 }

/* ensure anchor/buttons inside .list look cohesive app-wide */
.list a, .list button{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; color:#111827; text-decoration:none;
}
.list a:hover, .list button:hover{ background:#f8fafc }

/* =======================================================
   Scoped fixy: stránka Oprávnění uživatele
======================================================= */
.page-user-perms .wrap{ overflow-wrap:anywhere }

.page-user-perms .grid2{
  grid-template-columns: minmax(280px,1fr) minmax(280px,1fr);
}
@media (max-width:860px){
  .page-user-perms .grid2{ grid-template-columns:1fr }
}

/* Vstupy uvnitř .row nemají být full-width */
.page-user-perms .row > input,
.page-user-perms .row > select,
.page-user-perms .row > textarea{
  width:auto;
  max-width:320px;
  flex:1 1 200px;
}

/* Konkrétně kvóta – kompaktnější pole */
.page-user-perms #routeQuota{
  width:160px;
  max-width:160px;
}

/* Přepínače + labely držet v jedné řádce bez přesahu */
.page-user-perms .row{ align-items:center }
.page-user-perms .row label{ display:inline-flex; align-items:center; gap:8px }

/* Dlouhé permission „pilulky“ mohou zalamovat */
.page-user-perms .perm{ display:flex; flex-wrap:wrap; gap:8px }


/* =======================================================
   IMPORT REVIEWER - VYLEPŠENÝ DESIGN
======================================================= */

/* --- 1. Pestřejší stavy (Barvy) --- */

/* OK stav (zelená) */
.addr-cell.ok {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-left: 4px solid #16a34a;
    padding: 10px;
    border-radius: 8px;
}
.addr-verify.ok { font-weight: 700; color: #15803d !important; }

/* VAROVÁNÍ / Nejednoznačné (oranžová) */
.addr-cell.warn {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    padding: 10px;
    border-radius: 8px;
}
.addr-verify.warn { font-weight: 700; color: #b45309 !important; }

/* CHYBA / Nenalezeno (červená) */
.addr-cell.error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    padding: 10px;
    border-radius: 8px;
}
.addr-verify.error { font-weight: 700; color: #991b1b !important; }

/* Výchozí / Čeká (šedá/modrá) */
.addr-cell {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    background: #fff;
    transition: all 0.2s ease;
}

/* --- 2. Layout adresy a akcí --- */
.addr-line { font-size: 1.1em; margin-bottom: 4px; color: #1e293b; font-weight: 600; }
.addr-actions { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

/* Input field pro editaci */
.addr-edit-row {
    display: flex;
    gap: 8px;
    align-items: flex-start; /* Zarovnání na horní okraj pro textarea */
}

/* **FIX VELKÉ TEXTAREA**: Zajištění čitelné plochy pro ruční ověření */
.addr-edit-row textarea.addr-manual-input {
    flex: 1;
    width: 100%;
    min-height: 80px; /* Zvětšeno na 80px */
    font-size: 16px; 
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* --- TLAČÍTKA: Vizuálně výrazné --- */

/* Tlačítko Ověřit (lokální - primární modré) */
.btn-check-verify.btn.primary {
    font-weight: 700 !important;
    padding: 10px 14px !important;
    border-radius: var(--radius) !important;
    background: var(--primary) !important;
    border-color: var(--primary-600) !important;
    color: #fff !important;
    height: 42px; 
    flex-shrink: 0; 
}

/* Tlačítko Použít vybranou (Success Green) */
.btn-confirm-selection {
    align-self: flex-start;
    margin-top: 8px;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    border-radius: var(--radius) !important;
    background: var(--success) !important;
    border-color: var(--success-600) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(22,163,74,.18);
    display: inline-flex;
    gap: 8px;
    align-items: center;
}
.btn-confirm-selection:hover {
    transform: translateY(-1px);
    background: var(--success-600) !important;
}


/* --- 3. KANDIDÁTI (Grid/Dlaždice) --- */
.candidates-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 10px;
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 10px;
}

/* Styl jednoho kandidáta (jako dlaždice/karta) */
.candidate-item {
    display: flex;
    align-items: center; 
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    line-height: 1.3;
}

.candidate-item:hover {
    border-color: var(--primary);
    background: #eff6ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.candidate-item input[type="radio"] {
    flex-shrink: 0;
}

.candidate-item span {
    flex: 1;
    font-weight: 500;
}


/* --- 4. Tabulka obecně (Fix pro PC) --- */
#tbl td.subcell {
    padding: 8px 12px 16px 12px; 
    background: #f8fafc; 
    border-bottom: 2px solid #e2e8f0;
}

/* =======================================================
   KRITICKÝ FIX HLAVIČKY A POSUNU
======================================================= */

/* 1. HLAVIČKA TABULKY: Musí být přilepená POUZE POD APP HEADER (57px) */
#tbl thead {
    position: sticky;
    top: 57px; /* Kritické: Navazuje na App Header */
    z-index: 5; 
    background: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 2. TABULKA: Posuneme celou tabulku dolů, abychom dali prostor pro App Header
   a zabránili překrytí obsahu prvního bodu. */
table#tbl {
    /* Kritické: Přidání 57px nahoře je redundantní k padding-top: 57px na body, 
       ALE v kombinaci se sticky thead je často nutné pro správné zarovnání prvního řádku. */
    margin-top: 57px !important; 
}


/* 3. Fixace prvního řádku pomocí JS spaceru (redundance) */
.sticky-header-spacer {
    display: table-row !important; 
    height: 57px !important; /* Kritické: Výška App Headeru */
    visibility: hidden;
    pointer-events: none;
}


/* --- Mobilní úpravy, aby se spacer nevykresloval jako obrovská mezera --- */
@media (max-width: 768px) {
    /* 1. Skrýt spacer na mobilu (karty se posouvají marginem) */
    .sticky-header-spacer {
        display: none !important;
    }

    /* 2. Reset marginu na tabulce a přidání na první kartu */
    table#tbl {
        margin-top: 0 !important;
    }

/* Debug panel styling */
#debug-panel {
  font-family: 'Courier New', monospace;
}

#debug-panel #debug-content {
  scrollbar-width: thin;
  scrollbar-color: #555 #222;
}

#debug-panel #debug-content::-webkit-scrollbar {
  width: 8px;
}

#debug-panel #debug-content::-webkit-scrollbar-track {
  background: #222;
}

#debug-panel #debug-content::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

#debug-panel #debug-content::-webkit-scrollbar-thumb:hover {
  background: #777;
}

#debug-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

#debug-panel button {
  cursor: pointer;
  transition: background 0.2s;
}

#debug-panel button:hover {
  background: #777 !important;
}

/* -------------------------------------------------------
   Seřazení trasy – progress overlay (fullscreen center)
------------------------------------------------------- */
.sort-progress-overlay{
  position:fixed !important; inset:0 !important; z-index:30000 !important;
  display:none;
  align-items:center !important; justify-content:center !important;
  padding:24px !important; box-sizing:border-box !important;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(14,116,144,.35), transparent 55%),
    radial-gradient(700px 480px at 88% 78%, rgba(37,99,235,.28), transparent 50%),
    rgba(8,15,30,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sort-progress-overlay.is-open{
  display:flex !important;
  animation: sort-overlay-in .28s ease-out;
}
@keyframes sort-overlay-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
.sort-progress-card{
  position:relative;
  width:min(380px, 92vw) !important;
  margin:auto !important;
  background:
    linear-gradient(165deg, rgba(255,255,255,.97) 0%, rgba(239,246,255,.96) 48%, rgba(240,253,250,.95) 100%);
  border: 1px solid rgba(186,230,253,.95);
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55) inset,
    0 28px 70px rgba(8,15,30,.38);
  padding: 32px 28px 26px !important;
  text-align: center !important;
  color: #0f172a;
  transform: translateY(0);
  animation: sort-card-in .38s cubic-bezier(.22,1,.36,1);
}
@keyframes sort-card-in{
  from{ opacity:0; transform: translateY(14px) scale(.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.sort-progress-visual{
  position:relative;
  width:120px; height:120px;
  margin: 0 auto 18px;
}
.sort-progress-svg{ display:block; width:120px; height:120px; }
.sort-progress-track{ stroke:#e2e8f0; }
.sort-progress-arc{
  stroke:#0ea5e9;
  transition: stroke-dashoffset .4s ease;
  filter: drop-shadow(0 0 4px rgba(14,165,233,.35));
}
.sort-progress-route{
  stroke:#94a3b8;
  stroke-dasharray: 120;
  animation: sort-route-draw 2.4s ease-in-out infinite;
  opacity:.85;
}
@keyframes sort-route-draw{
  0%{ stroke-dashoffset:120; opacity:.35; }
  45%{ stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:-120; opacity:.35; }
}
.sort-progress-pin{ fill:#0ea5e9; }
.sort-progress-pin-a{ fill:#2563eb; animation: sort-pin-pulse 1.6s ease-in-out infinite; }
.sort-progress-pin-b{ fill:#0ea5e9; animation: sort-pin-pulse 1.6s ease-in-out .35s infinite; }
.sort-progress-pin-c{ fill:#14b8a6; animation: sort-pin-pulse 1.6s ease-in-out .7s infinite; }
@keyframes sort-pin-pulse{
  0%,100%{ transform: scale(1); opacity:1; }
  50%{ transform: scale(1.35); opacity:.75; }
}
.sort-progress-pct{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 22px; font-weight: 750; letter-spacing: -.03em;
  color: #0f172a;
  pointer-events:none;
}
.sort-progress-title{
  font-size: 20px; font-weight: 750; letter-spacing: -.03em;
  color: #0f172a; margin-bottom: 8px;
}
.sort-progress-msg{
  font-size: 14.5px; color: #475569; min-height: 42px;
  line-height: 1.45; margin-bottom: 18px;
}
.sort-progress-bar-wrap{
  height: 8px; border-radius: 999px;
  background: #e2e8f0; overflow: hidden;
  margin-bottom: 10px;
}
.sort-progress-bar{
  height: 100%; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #0ea5e9 50%, #14b8a6);
  transition: width .45s ease;
  box-shadow: 0 0 12px rgba(14,165,233,.35);
}
.sort-progress-meta{
  font-size: 12px; color: #64748b; min-height: 16px;
  letter-spacing: .01em;
}

/* -------------------------------------------------------
   Volat předem
------------------------------------------------------- */
.btn-icon.call-ahead-btn{
  color: #c2410c;
  border-color: #fdba74;
  background: #fff7ed;
  font-weight: 700;
  min-width: 2.4em;
}
.btn-icon.call-ahead-btn.is-set{
  background: #ffedd5;
  border-color: #fb923c;
  box-shadow: 0 0 0 1px rgba(234,88,12,.15);
}
.btn-icon.call-ahead-btn.is-due{
  animation: call-ahead-pulse 1.4s ease-in-out infinite;
}
@keyframes call-ahead-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(234,88,12,.35); }
  50%{ box-shadow: 0 0 0 4px rgba(234,88,12,.18); }
}
.call-ahead-modal{
  position:fixed; inset:0; z-index:22000;
  display:none; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.call-ahead-modal.is-open{ display:flex !important; }
.call-ahead-dialog{
  width:min(360px, 94vw);
  background:#fff;
  border-radius:16px;
  border:1px solid #fed7aa;
  box-shadow: 0 20px 50px rgba(15,23,42,.28);
  padding:16px 16px 14px;
}
.call-ahead-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.call-ahead-title{ font-size:16px; font-weight:750; color:#9a3412; }
.call-ahead-x{
  border:none; background:#fff7ed; color:#9a3412;
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px;
}
.call-ahead-target{
  font-size:13px; color:#334155; line-height:1.4; margin-bottom:8px;
  padding:8px 10px; background:#fffbeb; border-radius:10px; border:1px solid #fde68a;
}
.call-ahead-hint{ font-size:12px; color:#78716c; margin-bottom:12px; line-height:1.4; }
.call-ahead-presets{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:12px;
}
.call-ahead-presets button{
  border:1px solid #fdba74; background:#fff7ed; color:#9a3412;
  border-radius:10px; padding:12px 10px; font-weight:700; font-size:14px; cursor:pointer;
}
.call-ahead-presets button.is-preferred{ background:#ffedd5; border-color:#f97316; }
.call-ahead-presets button:active{ transform:scale(.98); }
.call-ahead-custom{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.call-ahead-custom label{ font-size:13px; color:#57534e; font-weight:600; }
.call-ahead-custom input{
  width:72px; border:1px solid #e7e5e4; border-radius:8px; padding:8px 10px; font-size:14px;
}
.call-ahead-actions{ display:flex; justify-content:flex-end; }
.call-ahead-banner{
  margin-top:10px; padding:10px 12px;
  background:#fff7ed; border:1px solid #fdba74; border-radius:8px;
  color:#9a3412; font-size:13px; line-height:1.5;
}
.call-ahead-banner strong{ color:#7c2d12; }
.call-ahead-row-hint{
  margin-top:4px; font-size:11px; font-weight:650; color:#c2410c;
}