/* Detailné obrazovky v ABRA podobe (vetva `abra`, js/18-abra-detaily.js).
   Hlavička a lišta majú triedy z formulára dokladu (js/17), tu je len to,
   čím sa pôvodné karty a polia prispôsobia — jemné čiary, popis v rámčeku,
   miesto pre lepiacu lištu. Farby naše (tmavomodrá + žltá). */

html.abra .abd-screen { padding-bottom: 24px; }
html.abra .abd-screen.abd-ma-listu { padding-bottom: 0; }

/* Hlavička ako pri faktúre — biela karta nad obsahom. */
html.abra .abd-head { background: #fff; border: 1px solid var(--ab-line, #eceef1); border-radius: 12px; margin-bottom: 14px; }
html.abra .abd-head .abf-head { border-bottom: 0; }

/* Karty: bez tieňa, jemná čiara, viac vzduchu. */
html.abra .abd-screen .card { box-shadow: none !important; border: 1px solid var(--ab-line, #eceef1) !important; border-radius: 12px !important; background: #fff; }
html.abra .abd-screen .card h4,
html.abra .abd-screen .card .section-title { font-size: 13px; font-weight: 700; color: var(--ab-text, #14202e); letter-spacing: 0; text-transform: none; }

/* Polia s popisom v rámčeku (ako .abf-f) — pôvodný popis bol nad poľom
   veľkými písmenami; tu je malý, v rámčeku, bez verzálok. */
html.abra .abd-screen .abd-f { margin-top: 14px !important; margin-bottom: 8px !important; }
html.abra .abd-screen .abd-f > label {
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important;
  font-size: 11px !important; color: var(--ab-mut, #6b7685) !important; margin: 0 !important;
}
html.abra .abd-screen .abd-f > input,
html.abra .abd-screen .abd-f > select,
html.abra .abd-screen .abd-f > textarea {
  background: #fff !important; border: 1px solid #dfe2e7 !important; border-radius: 4px !important;
  box-shadow: none !important; min-height: 42px; font-size: 14px;
}
html.abra .abd-screen .abd-f > input:focus,
html.abra .abd-screen .abd-f > select:focus,
html.abra .abd-screen .abd-f > textarea:focus { border-color: #14202e !important; box-shadow: 0 0 0 1px #14202e inset !important; }
html.abra .abd-screen .abd-f > input:disabled,
html.abra .abd-screen .abd-f > select:disabled,
html.abra .abd-screen .abd-f > textarea:disabled { background: #fafbfc !important; color: #4a5668; }

/* Riadky polí — rovnaké medzery ako mriežka formulára dokladu. */
html.abra .abd-screen .row { gap: 4px 22px !important; }

/* Ghost tlačidlá v kartách (Pridať súbor, Naplánovať…) — jemne, bez tieňa. */
html.abra .abd-screen .card .btn.btn-ghost { box-shadow: none; border: 1px solid var(--ab-line, #eceef1); background: #fff; }

/* Lepiaca lišta: na celú šírku obsahu, prilepená k spodku okna. */
html.abra .abd-bar { margin: 16px -16px 0; border-radius: 0 0 12px 12px; }

/* Zákazka pre technika: veľké akcie ostávajú, len jemnejšie okraje. */
html.abra .screen.abd-screen .timer-card,
html.abra .screen.abd-screen .job-card { box-shadow: none; }

@media (max-width: 767px) {
  html.abra .abd-head { border-radius: 10px; margin-bottom: 10px; }
  html.abra .abd-head .abf-head { padding: 10px 12px; gap: 8px; }
  html.abra .abd-head .abf-num { font-size: 18px; }
  html.abra .abd-bar { margin: 12px -12px 0; border-radius: 0; }
  /* Technik ťuká palcom — lišta s veľkými cieľmi. */
  html.abra .abd-bar .abf-close, html.abra .abd-bar .abf-save-m { min-height: 48px; }
  html.abra .abd-screen .abd-f > input,
  html.abra .abd-screen .abd-f > select,
  html.abra .abd-screen .abd-f > textarea { min-height: 46px; font-size: 16px; }
}

/* Skladový doklad: zaškrtávacie „naložené" v tabuľke položiek nemá dostať
   vzhľad textového poľa z .abf-lines. */
html.abra .abf-lines input[type=checkbox] { padding: 0 !important; min-height: 0 !important; border: 0 !important; width: 17px; height: 17px; }

/* ── „Ďalšie možnosti ▾" v detaile ─────────────────────────────────────
   Čiara z js/17 počíta s odsadením formulára dokladu (24 px); karta
   detailu má 18 px, preto vlastné záporné okraje. */
html.abra .abd-screen .abf-more { margin: 18px -18px 14px; grid-column: 1 / -1; }
html.abra .abd-screen .abd-extra { display: none !important; grid-column: 1 / -1; }
html.abra .abd-screen .abf.abf-open .abd-extra { display: block !important; }
html.abra .abd-screen .abf.abf-open .abd-extra-grid { display: grid !important; }
html.abra .abd-screen .card.abf { padding-bottom: 14px; }

/* ── Položky v tabuľke (materiál, práce, výdavok, kalkulácia) ───────── */
html.abra .abd-screen .abd-ltable { margin: 10px 0 8px; }
html.abra .abd-screen .abd-ltable table { border-spacing: 0 6px; }
html.abra .abd-screen .abd-ltable th { text-transform: none !important; letter-spacing: 0 !important; }
html.abra .abd-screen .abd-ltable td { border-top: 0 !important; background: #fff; }
html.abra .abd-screen .abd-ltable td.abd-r,
html.abra .abd-screen .abd-ltable th.r { text-align: right; font-variant-numeric: tabular-nums; }
html.abra .abd-screen .abd-ltable tfoot td { background: transparent; font-weight: 700; }
html.abra .abd-screen .abd-ltable tr.total td,
html.abra .abd-screen .abd-ltable tr.sum td { font-weight: 700; }

@media (max-width: 767px) {
  html.abra .abd-screen .abf-more { margin: 14px -12px 12px; }
  html.abra .abd-screen .abf-more button { min-height: 44px; }
  html.abra .abd-screen .abd-ltable { overflow-x: auto; }
  html.abra .abd-screen .abf-lbar button { min-height: 44px; }
}

/* ── eSkladník (js/14) v náhľade ABRA ───────────────────────────────────
   Modul má vlastné štýly pod `.esk` a vlastnú tmavú hlavičku s tehlami —
   to sú naše farby a tie ostávajú. Zjemňujú sa len čiary a tiene, aby
   sedel so zvyškom náhľadu, a na telefóne sa zväčšia ciele pre prst. */
html.abra .esk .tile,
html.abra .esk .card { box-shadow: none !important; border: 1px solid var(--ab-line, #eceef1) !important; border-radius: 12px !important; }
html.abra .esk .topbar.light { border-bottom: 1px solid var(--ab-line, #eceef1); }
html.abra .esk .section-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important; color: var(--ab-mut, #6b7685) !important; }
html.abra .esk .searchbar,
html.abra .esk .esk-select { border-radius: 9px !important; }

@media (max-width: 767px) {
  html.abra .esk .btn { min-height: 48px; }
  html.abra .esk .tile { min-height: 120px; }
  html.abra .esk .icon-btn { min-width: 44px; min-height: 44px; }
}

/* Vypočítané polia: sivé, needitovateľné, s otáznikom (ABRA skladová karta). */
html.abra .abd-f.abd-ro { position: relative; }
html.abra .abd-f.abd-ro input, html.abra .abd-f.abd-ro select, html.abra .abd-f.abd-ro textarea {
  background: #f5f6f8 !important; color: #5b6776 !important; border-color: #eceef1 !important; cursor: default;
}
html.abra .abd-ro-help {
  position: absolute; left: 10px; bottom: 11px; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid #d7dbe1; color: #97a1ad; font-size: 11px; line-height: 14px; text-align: center; cursor: help; background: #fff;
}
html.abra .abd-f.abd-ro input, html.abra .abd-f.abd-ro select { padding-left: 32px !important; }

/* Pod-záložky v „Ďalších možnostiach": zvislé menu vľavo, panel vpravo. */
html.abra .abd-podz { display: grid; grid-template-columns: 190px 1fr; gap: 18px; grid-column: 1 / -1; margin-top: 4px; }
html.abra .abd-podz-menu { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--ab-line); padding-right: 10px; }
html.abra .abd-podz-t {
  border: 0; background: none; text-align: left; font: inherit; font-size: 13.5px; color: #4a5566;
  padding: 9px 12px; border-radius: 9px; cursor: pointer;
}
html.abra .abd-podz-t:hover { background: var(--ab-soft); }
html.abra .abd-podz-t.on { background: var(--ab-soft); color: var(--ab-text); font-weight: 600; box-shadow: inset 2px 0 0 var(--bysec-yellow-500, #f5c451); }
html.abra .abd-podz-p { display: none; }
html.abra .abd-podz-p.on { display: block; }
@media (max-width: 767px) { html.abra .abd-podz { grid-template-columns: 1fr; } html.abra .abd-podz-menu { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ab-line); } }

/* Kontrola poľa: červený rámik a hláška priamo pri poli. */
html.abra .abf-f.abf-zle input, html.abra .abf-f.abf-zle select, html.abra .abf-f.abf-zle textarea {
  border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.10) !important;
}
html.abra .abf-err { color: #c0392b; font-size: 11.5px; margin: 4px 0 0 2px; }

/* ── Zákazka ako doklad (dispečer na počítači) ─────────────────────────
   Ivan 2026-09-20: pohľad na zákazku má byť ako na faktúru; časovač je
   len technikov pohľad na tablete a mobile. */
html.abra .abf-ro {
  min-height: 38px; display: flex; align-items: center; padding: 8px 12px;
  background: #f7f8fa; border: 1px solid var(--ab-line); border-radius: 9px;
  font-size: 13.5px; color: var(--ab-text);
}
html.abra .abf-ro-multi { display: block; white-space: pre-wrap; line-height: 1.5; min-height: 64px; }
html.abra .abf-lock {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 14px; border-radius: 10px; font-size: 13px;
  background: rgba(46,158,90,.10); color: #1E6B3C; border: 1px solid rgba(46,158,90,.28);
}
html.abra .abf-side-h small { color: var(--ab-mut); font-size: 11.5px; font-weight: 500; }
html.abra #jobActivitiesList table, html.abra #materialsListLive table { width: 100%; }

/* Zaškrtávacie políčko vo formulári: bolo roztiahnuté na šírku poľa
   (Ivan 2026-09-20 „je moc veľké"). Malé, naše farby, pri popise. */
html.abra .abf input[type="checkbox"],
html.abra .abd-f input[type="checkbox"],
html.abra .abf-f input[type="checkbox"],
html.abra .sf-field input[type="checkbox"] {
  width: 18px !important; height: 18px !important; min-width: 18px !important;
  flex: none !important; padding: 0 !important; margin: 4px 0 0 !important;
  border-radius: 5px !important; accent-color: #14202e; box-shadow: none !important;
  background: #fff !important; appearance: auto !important;
}