/* ===========================================================================
   UI Uploader – integrace Uppy do vizuálu TipMoto.com
   Design language: industriální/dílenský, Verdana family, ostré rohy,
   confidence-first typography. Převzato z motoinzerce, akcent přebarven.
   =========================================================================== */

/* TipMoto: akcent je červený (#ff0000), plochy zůstávají neutrální – varianta A,
   schválil Jirka 2026-09-17. Chybové stavy si Dashboard kreslí sám (#a51523 na
   #fdeff1); --uiu-red je na tutéž hodnotu srovnaná, ať web nemá dvě chybové červené. */
:root {
  --uiu-akcent: #ff0000;
  --uiu-akcent-dark: #a30f0f;
  --uiu-akcent-soft: #f2f2f2;
  --uiu-akcent-focus: rgba(255, 0, 0, 0.35);
  --uiu-green: #2d8f3c;
  --uiu-green-soft: #e6f4ea;
  --uiu-grey-100: #f5f5f5;
  --uiu-grey-200: #ebebeb;
  --uiu-grey-300: #d0d0d0;
  --uiu-grey-500: #888;
  --uiu-grey-700: #444;
  --uiu-ink: #1a1a1a;
  --uiu-red: #a51523;
  --uiu-warning: #b8860b;
}

.ui-uploader {
  margin: 1.5em 0;
  background: #fff;
  border: 1px solid var(--uiu-grey-300);
  border-top: 3px solid var(--uiu-akcent);
  font-family: Verdana, "Arial CE", "Helvetica CE", Helvetica, Arial, sans-serif;
}
.ui-uploader__head {
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, var(--uiu-grey-100) 0%, #fff 100%);
  border-bottom: 1px solid var(--uiu-grey-200);
}
.ui-uploader__title-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ui-uploader__title {
  margin: 0;
  /* 🔴 Nadpis je TEXT, ne akce, proto barva textu webu a ne akcent (Jirka 2026-09-17).
     Červená tím zůstává vyhrazená prvkům, které něco dělají: linka, ikony, odkazy,
     průběh. --uiu-akcent-dark se schválně NEMĚNÍ - drží ještě hover odkazu
     „vyberte ze souborů" a hover tlačítka úprav, a ty červené zůstat mají. */
  color: var(--uiu-ink);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.2px;
}
.ui-uploader__lead {
  margin: 8px 0 10px 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--uiu-grey-700);
  line-height: 1.5;
}
.ui-uploader__lead li {
  margin: 0 0 2px 0;
  padding: 0;
}
.ui-uploader__lead li:last-child {
  margin-bottom: 0;
}
/* Na dotykovém zařízení dělají záložka „Webkamera" a nativní tlačítko „Vyfotit"
   totéž (Webcam má mobileNativeCamera = true), takže by v panelu byly dvě shodné
   cesty vedle sebe. Nechává se nativní – nepotřebuje getUserMedia ani vlastní UI. */
@media (pointer: coarse) and (hover: none) {
  .ui-uploader__mount .uppy-DashboardTab[data-uppy-acquirer-id="Webcam"] {
    display: none;
  }
}

/* Znak ✎ (U+270E) nemá glyf v systémovém fontu iOS a vykreslí se jako prázdný
   obdélníček. Kreslí se proto jako inline SVG, které vypadá všude stejně. */
.ui-uploader__lead .ico-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--uiu-akcent);
  color: #fff;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: -3px;
}
.ui-uploader__lead .ico-edit svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: currentColor;
}
.ui-uploader__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px dashed var(--uiu-grey-200);
  padding-top: 8px;
}
.ui-uploader__meta li {
  flex: 1;
  min-width: 160px;
  padding: 4px 12px 4px 0;
  font-size: 11px;
  color: var(--uiu-grey-500);
}
.ui-uploader__meta li span {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9px;
  display: block;
  margin-bottom: 1px;
}
.ui-uploader__meta li strong {
  color: var(--uiu-ink);
  font-size: 12px;
  font-weight: bold;
}
.ui-uploader__mount {
  padding: 0;
  background: #fafafa;
}
/* `hidden` na sekci musí přebít display z .ui-uploader, jinak by se skrytá
   sekce stejně vykreslila. */
#ui-uploader[hidden],
#uploader-klasicky[hidden] {
  display: none !important;
}
.ui-uploader__zpet {
  margin: 0 0 10px 0;
  padding: 8px 12px;
  background: var(--uiu-grey-100, #f2f2f2);
  border-left: 3px solid var(--uiu-akcent);
  font-size: 12px;
  color: var(--uiu-grey-700);
}
.ui-uploader__zpet a {
  color: var(--uiu-akcent);
  font-weight: bold;
}
/* Neurčitý indikátor při KLASICKÉM odeslání (1.5). Bajtový průběh tu nejde –
   nativní POST prohlížeč nereportuje a server upload za běhu nevidí. */
.ui-uploader__odesilani {
  margin: 10px 0 0 0;
  padding: 8px 12px;
  background: var(--uiu-grey-100, #f2f2f2);
  border-left: 3px solid var(--uiu-akcent);
  font-size: 12px;
  font-weight: bold;
  color: var(--uiu-grey-700);
}
.ui-uploader__odesilani::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border: 2px solid var(--uiu-akcent);
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: uiu-toci 0.8s linear infinite;
}
@keyframes uiu-toci { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ui-uploader__odesilani::before { animation: none; }
}

.ui-uploader__zaloha {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--uiu-grey-700);
}
.ui-uploader__zaloha a {
  color: var(--uiu-akcent);
}
.ui-uploader__foot {
  padding: 10px 18px;
  background: #fffbe6;
  border-top: 1px solid #f0d97a;
  font-size: 11px;
}
.ui-uploader__notice {
  color: #6b4900;
}
.ui-uploader__notice a {
  color: var(--uiu-akcent);
  font-weight: bold;
}
.ui-uploader__noscript {
  padding: 16px;
  background: #fdecea;
  color: var(--uiu-red);
  border-top: 1px solid #f5b7b1;
  font-weight: bold;
}

/* === Uppy Dashboard overrides – integrace do vizuálu TipMoto === */
.ui-uploader__mount .uppy-Dashboard-inner {
  border: none;
  border-radius: 0;
  background: #fafafa;
  font-family: inherit;
}
.ui-uploader__mount .uppy-Dashboard-AddFiles {
  border: 2px dashed var(--uiu-grey-300);
  background: #fff;
  margin: 14px;
  border-radius: 2px;
  transition: border-color .15s, background .15s;
}
.ui-uploader__mount .uppy-Dashboard-AddFiles:hover,
.ui-uploader__mount .uppy-Dashboard.uppy-Dashboard--isDraggingOver .uppy-Dashboard-AddFiles {
  border-color: var(--uiu-akcent);
  background: var(--uiu-akcent-soft);
}
.ui-uploader__mount .uppy-Dashboard-browse {
  color: var(--uiu-akcent);
  font-weight: bold;
  text-decoration: underline;
}
.ui-uploader__mount .uppy-Dashboard-browse:hover {
  color: var(--uiu-akcent-dark);
}
.ui-uploader__mount .uppy-Dashboard-AddFiles-title {
  color: var(--uiu-ink);
  font-weight: normal;
}
.ui-uploader__mount .uppy-Dashboard-note {
  color: var(--uiu-grey-500);
  font-size: 11px;
}
.ui-uploader__mount .uppy-DashboardTab-name {
  font-size: 12px;
}

/* Preview area – 4:3 aspect + show whole photo (no crop) */
.ui-uploader__mount .uppy-Dashboard-Item-preview,
.ui-uploader__mount .uppy-Dashboard-Item-previewInnerWrap {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  /* Měkké světlé pozadí = letterbox/pillarbox kolem fotky.
     Integruje se se světlou paletou webu; fotky vyniknou kontrastem. */
  background: #d8d8d8 !important;
}
.ui-uploader__mount .uppy-Dashboard-Item-previewImg,
.ui-uploader__mount .uppy-Dashboard-Item-preview img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}
/* Total tile height se přizpůsobí (Uppy default je fixed 210px – zrušíme) */
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item {
  height: auto !important;
}
/* Šířka dlaždice podle počtu na řádek (1.10). Číslo nastavuje JS stejnou funkcí, podle
   které Uppy dělí fotky do řádků (UPPY_ITEMS_PER_ROW) – Uppy sám má 33/25/20 %.
   Jen od .uppy-size--md výš; pod tím je seznam pod sebou. 30px = okraje 2 × 15px. */
.ui-uploader__mount .uppy-size--md .uppy-Dashboard-filesInner > .uppy-Dashboard-Item {
  width: calc(100% / var(--uiu-za-radek, 3) - 30px);
}

/* File tiles + drag-reorder + HLAVNÍ badge */
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item {
  position: relative;
  cursor: grab;
  /* 🔴 Žádný přechod na transform: Sortable při každém pohybu čte aktuální matici
     klonu a přičítá k ní posun, animovaný transform ho nechá za kurzorem. */
  transition: box-shadow .15s;
  -webkit-user-select: none;
  user-select: none;
}
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item:hover {
  box-shadow: 0 0 0 2px var(--uiu-akcent-soft);
}
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item.ui-sort-chosen {
  cursor: grabbing;
}
/* Místo v mřížce, kam fotka dopadne: zesvětlená kopie v čárkovaném rámu akcentní barvy */
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item.ui-sort-ghost {
  opacity: 0.35;
  outline: 2px dashed var(--uiu-akcent);
  outline-offset: -2px;
  background: var(--uiu-akcent-soft);
  border-radius: 3px;
}
/* Fotka, která jede pod kurzorem: ostrá, mírně natočená, se stínem – „opravdu ji držím" */
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item.ui-sort-drag {
  cursor: grabbing;
  opacity: 0.96 !important;          /* Sortable nastavuje inline 0.8 */
  transition: none !important;
  transform: rotate(1.5deg);         /* Sortable si matici přečte a jen k ní přičítá posun */
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0,0,0,.30), 0 0 0 2px var(--uiu-akcent);
  z-index: 100000;
}
/* Během tahu se nic neoznačuje a kurzor „drží" i mimo dlaždici */
body.ui-sorting,
body.ui-sorting * {
  cursor: grabbing !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
/* Dosednutí na novém místě */
@keyframes uiu-dopad {
  0%   { box-shadow: 0 0 0 0 var(--uiu-akcent-focus); transform: scale(1.04); }
  100% { box-shadow: 0 0 0 14px rgba(0,0,0,0); transform: scale(1); }
}
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item.ui-sort-dropped {
  animation: uiu-dopad .5s ease-out;
}
/* Název souboru na jeden řádek. Dlaždice jsou floaty a řádky Uppy mají nulovou výšku,
   takže vyšší dlaždice (název zalomený na dva řádky) „zasekne" floaty dalšího řádku
   vpravo od sebe a na začátku řádku vznikne mezera. Uppy to řeší pevnou výškou
   dlaždice, kterou jsme kvůli poměru 4:3 zrušili – stejnou výšku drží tohle pravidlo.
   Celý název zůstává v atributu title. */
.ui-uploader__mount .uppy-Dashboard-Item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
  min-width: 0;
}
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item.is-hlavni::before {
  content: 'HLAVNÍ';
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 20;
  background: var(--uiu-green);
  color: #fff;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  padding: 3px 7px 2px;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.ui-uploader__mount .uppy-Dashboard-filesInner > .uppy-Dashboard-Item.is-hlavni {
  outline: 2px solid var(--uiu-green);
  outline-offset: -2px;
}

/* Prevent native image drag (matches §6.1 fix) */
.ui-uploader__mount .uppy-Dashboard-Item img,
.ui-uploader__mount .uppy-Dashboard-Item-preview,
.ui-uploader__mount .uppy-Dashboard-Item-previewIcon {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.ui-uploader__mount .uppy-Dashboard-Item-fileInfo,
.ui-uploader__mount .uppy-Dashboard-Item-action {
  pointer-events: auto;
}

/* Action buttons (Edit, Remove) – emphasize edit */
.ui-uploader__mount .uppy-Dashboard-Item-action--edit {
  background: var(--uiu-akcent);
  color: #fff;
  border-radius: 2px;
}
.ui-uploader__mount .uppy-Dashboard-Item-action--edit:hover {
  background: var(--uiu-akcent-dark);
}

/* Image Editor: custom 4:3 + 3:4 ratio buttons – icon-only, matches toolbar language */
.uppy-ratio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 4px;
  border: none;
  margin: 0 2px;
  cursor: pointer;
  transition: background .12s, transform .12s;
}
.uppy-ratio-btn:hover {
  background: rgba(255,255,255,0.18);
}
.uppy-ratio-btn:active {
  transform: scale(0.92);
}
.uppy-ratio-btn.is-active {
  background: var(--uiu-green);
  color: #fff;
}
.uppy-ratio-btn .ratio-icon {
  display: inline-flex;
  width: 100%;
  height: 100%;
}
.uppy-ratio-btn .ratio-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.uppy-ratio-btn .ratio-label {
  /* Skrytý text – zachován pro accessibility (aria-label by stačil, ale bezpečnost) */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Webcam tile in source picker */
.ui-uploader__mount .uppy-DashboardTab[data-uppy-acquirer-id="Webcam"] .uppy-DashboardTab-btn svg {
  fill: var(--uiu-akcent);
}

/* ===========================================================================
   Uppy 5.2.1 nese vlastní modrou #1269cf NATVRDO – nemá pro ni CSS proměnnou.
   Na motoinzerce ladila s modrým akcentem, na TipMotu bije do červené.
   Zjištěno rozborem uppy-5.2.1.min.css: 38 pravidel. Přebarvují se jen ta,
   která se v naší cestě reálně objeví (Dashboard, StatusBar, Webcam, ImageEditor);
   Provider* (Dropbox, Google Drive…) nepoužíváme.
   🔴 Většina se ukáže až při interakci – focus, průběh nahrávání, webkamera –
      takže po pohledu na klidnou stránku vypadá všechno hotově, a není.
   =========================================================================== */
.uppy-DashboardTab-iconMyDevice { color: var(--uiu-akcent); }
.uppy-Dashboard-dropFilesHereHint { border-color: var(--uiu-akcent); }

.uppy-Dashboard-Item-reSelect,
.uppy-Dashboard-serviceMsg-actionBtn,
.uppy-DashboardContent-back,
.uppy-DashboardContent-save,
.uppy-DashboardContent-addMore,
.uppy-StatusBar-actionBtn,
.uppy-StatusBar:not(.is-waiting) .uppy-StatusBar-actionBtn--upload { color: var(--uiu-akcent); }

.uppy-c-btn-primary,
.uppy-Webcam-button--submit,
.uppy-StatusBar-progress { background-color: var(--uiu-akcent); }

.uppy-StatusBar-spinner { fill: var(--uiu-akcent); }

.uppy-Dashboard-browse:focus,
.uppy-Dashboard-browse:hover { border-bottom-color: var(--uiu-akcent); }

.uppy-c-textInput:focus { border-color: var(--uiu-akcent); }

/* Focus ring: plná #ff0000 by byla na obrysu příliš tvrdá, proto poloprůhledná. */
.uppy-c-textInput:focus,
.uppy-c-btn-primary:focus,
.uppy-c-btn-link:focus,
.uppy-Dashboard-Item-action:focus,
.uppy-Dashboard-FileCard-edit:focus,
.uppy-StatusBar-actionCircleBtn:focus,
.uppy-StatusBar-actionBtn--retry:focus,
.uppy-Webcam-button:focus { box-shadow: 0 0 0 3px var(--uiu-akcent-focus); }