/* Faktúry Družba — all interface styling.
   Extracted from base.html so it is reviewable and diffable on its own.
   Served by the StaticFiles mount that already serves the logo; the link
   carries a ?v= built from this file's contents, because the deploy path
   (rsync, docker build, rollout) has no other cache-busting story. */

  :root {
    --paper:#fafaf7; --card:#ffffff; --ink:#1b1f23; --mut:#6b7280;
    --line:#e6e7e2; --green:#1d6a4c; --green-soft:#e4efe9;
    --amber:#b4690e; --amber-soft:#faf0e0; --red:#b3402e; --red-soft:#f8e7e3;
    --mono:ui-monospace,'SF Mono',Menlo,monospace;
  }
  * { box-sizing:border-box; }
  body { margin:0; font:15px/1.55 -apple-system,'Inter','Segoe UI',sans-serif;
         background:var(--paper); color:var(--ink); }
  a { color:var(--green); }

  /* signature: barcode stripe */
  .stripe { height:6px; background:repeating-linear-gradient(90deg,
      var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 9px, transparent 9px 12px,
      var(--ink) 12px 13px, transparent 13px 18px); }

  header { background:var(--card); border-bottom:1px solid var(--line); }
  .headrow { max-width:1080px; margin:0 auto; padding:.7rem 1.2rem;
             display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  .brand { display:flex; align-items:center; gap:.8rem; text-decoration:none; color:inherit; }
  .brand img { height:44px; width:auto; image-rendering:-webkit-optimize-contrast; }
  header h1 { margin:0; font-size:1.05rem; letter-spacing:.14em; text-transform:uppercase; }
  header h1 .co { color:var(--green); }
  nav { display:flex; gap:.35rem; }
  nav a { color:var(--mut); font-size:.84rem; text-decoration:none; font-weight:600;
          padding:.35rem .85rem; border-radius:99px; transition:all .15s ease; }
  nav a:hover { color:var(--green); background:var(--green-soft); }
  .langsw { display:inline-flex; gap:.15rem; align-items:center; margin:0 .2rem; }
  .langsw button { background:none; border:0; color:var(--mut); font-size:.74rem;
                   font-weight:700; letter-spacing:.06em; padding:.25rem .4rem;
                   border-radius:6px; box-shadow:none; cursor:pointer; }
  .langsw button:hover { color:var(--green); background:var(--green-soft);
                         transform:none; box-shadow:none; }
  .langsw button.on { color:var(--green); background:var(--green-soft); }

  main { max-width:1080px; margin:1.6rem auto 3rem; padding:0 1.2rem; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px;
          padding:1.3rem 1.5rem; margin-bottom:1.3rem;
          box-shadow:0 1px 2px rgba(27,31,35,.04); }
  .zones { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
  @media (max-width:720px){ .zones{grid-template-columns:1fr;} }
  .zone h2 { margin:0 0 .3rem; font-size:1rem; }
  .zone p { margin:.15rem 0 1rem; color:var(--mut); font-size:.84rem; }
  /* upload dropzone */
  input#file-input { position:absolute; width:1px; height:1px; opacity:0;
                     overflow:hidden; clip:rect(0 0 0 0); }
  .dropzone { display:flex; flex-direction:column; align-items:center; gap:.35rem;
              padding:1.6rem 1rem 1.3rem; border:2px dashed #cfd3c9; border-radius:12px;
              background:#fcfcfa; cursor:pointer; text-align:center; color:var(--mut);
              transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dropzone:hover, .dropzone.dragging { border-color:var(--green); background:var(--green-soft);
              color:var(--green); }
  .dropzone.has-file { border-style:solid; border-color:var(--green); background:var(--green-soft);
              color:var(--green); }
  .dropzone svg { opacity:.75; }
  .dz-title { font-size:.95rem; font-weight:600; color:inherit; max-width:100%;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dropzone.has-file .dz-title { font-family:var(--mono); font-size:.88rem; }
  .dz-sub { font-size:.74rem; color:var(--mut); letter-spacing:.03em; }
  input#file-input:focus-visible ~ .dropzone { outline:2px solid var(--green); outline-offset:2px; }
  .upload-foot { display:flex; justify-content:space-between; align-items:center;
                 gap:1rem; margin-top:1rem; flex-wrap:wrap; }
  .toggle-text small { display:block; font-weight:400; color:var(--mut); font-size:.72rem; }

  .toggle { display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; user-select:none; }
  .toggle input { position:absolute; opacity:0; width:1px; height:1px; }
  .toggle .track { width:42px; height:24px; border-radius:99px; background:#d6d8d0;
                   position:relative; transition:background .18s ease; flex:0 0 auto; }
  .toggle .knob { position:absolute; top:3px; left:3px; width:18px; height:18px;
                  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
                  transition:left .18s ease; }
  .toggle input:checked + .track { background:var(--green); }
  .toggle input:checked + .track .knob { left:21px; }
  .toggle input:focus-visible + .track { outline:2px solid var(--green); outline-offset:2px; }
  .toggle-text { font-size:.86rem; font-weight:600; color:var(--ink); }
  button { background:linear-gradient(180deg, #237a58, var(--green)); color:#fff; border:0;
           padding:.6rem 1.35rem; border-radius:10px; font-size:.88rem; font-weight:600;
           cursor:pointer; box-shadow:0 1px 2px rgba(29,106,76,.35), inset 0 1px 0 rgba(255,255,255,.15);
           transition:all .15s ease; }
  button:hover { transform:translateY(-1px); box-shadow:0 3px 8px rgba(29,106,76,.3),
                 inset 0 1px 0 rgba(255,255,255,.15); }
  button:active { transform:translateY(0); box-shadow:0 1px 2px rgba(29,106,76,.35); }
  button.danger { background:linear-gradient(180deg, #c04c38, var(--red));
                  box-shadow:0 1px 2px rgba(179,64,46,.35), inset 0 1px 0 rgba(255,255,255,.15); }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline:2px solid var(--green); outline-offset:2px; }

  table { width:100%; border-collapse:collapse; font-size:.86rem; }
  th { text-align:left; padding:.5rem .6rem; color:var(--mut); font-weight:600;
       font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
       border-bottom:2px solid var(--line); }
  td { padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:middle; }
  tbody tr:hover { background:#f4f6f3; }
  td code, .idcode { font-family:var(--mono); font-size:.84rem; background:#f0f1ec;
    padding:.1rem .45rem; border-radius:5px; letter-spacing:.08em; }

  .badge { display:inline-flex; align-items:center; gap:.35rem; padding:.12rem .6rem;
           border-radius:99px; font-size:.75rem; font-weight:600; white-space:nowrap; }
  .badge::before { content:''; width:.45rem; height:.45rem; border-radius:50%;
                   background:currentColor; }
  .badge.ok { background:var(--green-soft); color:var(--green); }
  .badge.warn { background:var(--amber-soft); color:var(--amber); }
  .badge.err { background:var(--red-soft); color:var(--red); }
  .badge.plain { background:#eef0ea; color:var(--mut); }
  a.badge { text-decoration:none; cursor:pointer; transition:filter .12s ease; }
  a.badge:hover { filter:brightness(.93); }
  span.badge.off { background:#eef0ea; color:#a8aeb8; cursor:default; }

  .conf { display:inline-block; width:52px; height:6px; border-radius:3px;
          background:var(--line); position:relative; vertical-align:middle; }
  .conf i { position:absolute; inset:0 auto 0 0; border-radius:3px; }

  .filterbar { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:flex-end;
               margin-bottom:1.1rem; }
  .filterbar label { display:flex; flex-direction:column; gap:.2rem;
                     font-size:.72rem; color:var(--mut); }
  .filterbar label.chk { flex-direction:row; align-items:center; gap:.35rem; }
  .filterbar input, .filterbar select, form.grid input {
    padding:.42rem .55rem; border:1px solid #d6d8d0; border-radius:8px;
    font-size:.87rem; background:var(--card); }
  .pager { display:flex; gap:.35rem; justify-content:center; align-items:center;
           margin-top:1.2rem; font-size:.85rem; }
  .pager a, .pager span { padding:.25rem .65rem; border:1px solid var(--line);
      border-radius:8px; text-decoration:none; color:var(--ink); background:var(--card); }
  .pager a:hover { border-color:var(--green); }
  .pager .cur { background:var(--green); color:#fff; border-color:var(--green); }

  .flags { background:var(--amber-soft); border:1px solid #ecd7b4; border-radius:10px;
           padding:.8rem 1.1rem; margin-bottom:1.2rem; font-size:.88rem; }
  .flags li { color:var(--amber); margin:.15rem 0; }
  .msg { background:var(--green-soft); border:1px solid #c4dccd; border-radius:10px;
         padding:.65rem 1rem; margin-bottom:1.1rem; color:var(--green); font-size:.9rem; }

  form.grid label, fieldset.fs label { display:flex; flex-direction:column; gap:.25rem;
                    font-size:.74rem; color:var(--mut); font-weight:600;
                    letter-spacing:.03em; text-transform:uppercase; }
  form.grid input, fieldset.fs input {
    padding:.48rem .6rem; border:1px solid #d6d8d0; border-radius:8px;
    font-size:.92rem; background:var(--card); color:var(--ink); font-weight:400;
    letter-spacing:normal; text-transform:none; width:100%; }
  fieldset.fs { border:1px solid var(--line); border-radius:12px; margin:0 0 1.1rem;
                padding:1rem 1.2rem 1.2rem; background:#fcfcfa; }
  fieldset.fs legend { font-size:.8rem; font-weight:700; letter-spacing:.09em;
                       text-transform:uppercase; color:var(--green); padding:0 .5rem; }
  .regcheck { display:inline-flex; align-items:center; gap:.25rem; margin-left:.5rem;
              padding:.1rem .6rem; border-radius:99px; font-size:.68rem; font-weight:700;
              letter-spacing:.02em; text-transform:none; text-decoration:none; }
  .regcheck.ok { background:var(--green-soft); color:var(--green); border:1px solid #bcd6c6; }
  .regcheck.warn { background:var(--amber-soft); color:var(--amber); border:1px solid #ecd7b8; }
  a.regcheck[href]:hover { filter:brightness(.92); }
  .fgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem 1rem; }
  .fgrid.cols2 { grid-template-columns:1fr 1fr; }
  @media (max-width:760px){ .fgrid, .fgrid.cols2 { grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .fgrid, .fgrid.cols2 { grid-template-columns:1fr; } }
  fieldset.fs input.suspect { border-color:var(--amber); background:var(--amber-soft); }
  fieldset.fs label.suspect::after { content:'⚠ skontroluj'; color:var(--amber);
                                     font-size:.66rem; margin-top:.1rem; }
  .full { grid-column:1/-1; }
  .span2 { grid-column:span 2; }
  @media (max-width:520px){ .span2 { grid-column:auto; } }
  .rowdel { color:var(--red); text-decoration:none; font-weight:600; }
  .batchbar { display:flex; gap:.8rem; align-items:center; margin-bottom:.9rem;
              padding:.55rem .9rem; background:var(--green-soft); border:1px solid #bcd6c6;
              border-radius:10px; font-size:.85rem; font-weight:600; color:var(--green); }
  .batchbar button { padding:.4rem .9rem; font-size:.8rem; }
  td input[type=checkbox], th input[type=checkbox] { width:15px; height:15px; accent-color:var(--green); cursor:pointer; }
  @media (prefers-reduced-motion: no-preference) {
    .card { transition:box-shadow .15s ease; }
  }

  /* review: two columns + preview with lens */
  .review-cols { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,42%); gap:1.4rem;
                 align-items:start; }
  @media (max-width:920px){ .review-cols { grid-template-columns:1fr; } }
  .review-side { position:sticky; top:max(1rem, calc((100vh - 84vh) / 2));
                 align-self:start; }
  .preview-panel { border:1px solid var(--line); border-radius:12px;
                   background:#fcfcfa; overflow:hidden; }
  .preview-bar { display:flex; justify-content:space-between; align-items:center;
                 padding:.5rem .8rem; border-bottom:1px solid var(--line); }
  .pv-btn { background:var(--card); color:var(--ink); border:1px solid var(--line);
            padding:.2rem .6rem; border-radius:7px; font-size:.78rem; box-shadow:none; }
  .pv-btn:hover { transform:none; border-color:var(--green); color:var(--green); box-shadow:none; }
  .pv-wrap { position:relative; max-height:calc(84vh - 42px); overflow:auto; }
  .pv-wrap.lens-active { cursor:none; }
  .pv-wrap img { display:block; width:100%; height:auto; }
  #pv-lens { display:none; position:fixed; z-index:60; width:600px; height:340px;
             border-radius:8px; border:2px solid var(--green);
             box-shadow:0 4px 16px rgba(27,31,35,.3);
             background-repeat:no-repeat; pointer-events:none; background-color:#fff; }

  /* grouped review flags */
  .fbox { border-radius:10px; padding:.7rem 1rem; margin-bottom:.8rem; font-size:.86rem; }
  .fbox ul { margin:.3rem 0 0; padding-left:1.2rem; }
  .fbox li { margin:.15rem 0; }
  .fbox-sub { margin:.15rem 0 0; font-size:.78rem; color:var(--mut); }
  .fbox.amber { background:var(--amber-soft); border:1px solid #ecd7b8; }
  .fbox.amber strong, .fbox.amber li { color:var(--amber); }
  .fbox.blue { background:#e8eef7; border:1px solid #c3d4ea; }
  .fbox.blue strong, .fbox.blue li { color:#31597f; }
  .fbox.grey { background:#f0f1ec; border:1px solid var(--line); }
  .fbox.grey strong, .fbox.grey li { color:var(--mut); }
  .fbox.red { background:var(--red-soft); border:1px solid #e3b8ae; }
  .fbox.red strong, .fbox.red li { color:var(--red); }
  .fbox.greenv { background:var(--green-soft); border:1px solid #bcd6c6; }
  .fbox.greenv strong { color:var(--green); }
  .lines-table { font-size:.82rem; }
  .lines-table th { font-size:.68rem; padding:.3rem .35rem; }
  .lines-table td { padding:.25rem .35rem; border-bottom:0; }
  .lines-table input { width:100%; padding:.35rem .45rem; border:1px solid #d6d8d0;
                       border-radius:6px; font-size:.84rem; }
  fieldset.suspect-fs { border-color:var(--amber); background:#fdfaf2; }
  fieldset.fs input:disabled, .lines-table input:disabled {
    background:#eef0ea; color:#a2a8b0; cursor:not-allowed; border-color:var(--line); }
  button:disabled { opacity:.45; cursor:not-allowed; transform:none !important;
                    box-shadow:none !important; }

  /* process flow diagram */
  .flow { max-width:640px; margin:1.2rem 0 0; }
  .fstep { display:flex; gap:1rem; background:#fcfcfa; border:1px solid var(--line);
           border-radius:12px; padding:.9rem 1.1rem; }
  .fstep p { margin:.25rem 0 0; font-size:.86rem; color:var(--mut); }
  .fstep strong { font-size:.95rem; }
  .fnote { background:var(--green-soft); border-radius:8px; padding:.4rem .6rem; }
  .fnum { flex:0 0 2rem; height:2rem; border-radius:50%; background:var(--ink); color:#fff;
          display:flex; align-items:center; justify-content:center; font-weight:700;
          font-family:var(--mono); }
  .farrow { text-align:center; color:var(--green); font-size:1.2rem; padding:.25rem 0;
            font-weight:700; }
  .farrow small { color:var(--mut); font-size:.72rem; font-weight:400; }

  /* row actions: an icon plus a readable label, not a title= tooltip */
  .rowacts { display:flex; gap:.15rem; align-items:center; flex-wrap:nowrap; }
  .rowact { display:inline-flex; align-items:center; gap:.25rem; text-decoration:none;
            color:var(--mut); font-size:.74rem; font-weight:600; white-space:nowrap;
            padding:.3rem .5rem; border-radius:7px; cursor:pointer;
            transition:background .12s ease, color .12s ease; }
  .rowact:hover { background:var(--green-soft); color:var(--green); }
  .rowact.danger { color:var(--red); }
  .rowact.danger:hover { background:var(--red-soft); color:var(--red); }
  .rowact[aria-busy='true'] { opacity:.45; pointer-events:none; }
  /* the label is what makes the target big enough and reachable; it collapses
     on narrow viewports, where the icon plus title= is the fallback */
  @media (max-width:1180px) { .rowact span { display:none; } }

  /* numbers behind a disclosure — present, exact, not shouted */
  details.numbers summary { cursor:pointer; font-size:.76rem; color:var(--mut);
                            font-weight:600; list-style:none; padding:.2rem .5rem;
                            border-radius:7px; display:inline-block; }
  details.numbers summary::-webkit-details-marker { display:none; }
  details.numbers summary::before { content:'▸ '; }
  details.numbers[open] summary::before { content:'▾ '; }
  details.numbers summary:hover { background:var(--green-soft); color:var(--green); }
  details.numbers dl { display:grid; grid-template-columns:auto auto; gap:.1rem .7rem;
                       margin:.5rem 0 0; font-size:.78rem; }
  details.numbers dt { color:var(--mut); }
  details.numbers dd { margin:0; text-align:right; font-family:var(--mono); }

  /* in-page confirmation */
  #askbox { position:fixed; inset:0; background:rgba(27,31,35,.35); display:none;
            align-items:center; justify-content:center; z-index:70; padding:1rem; }
  #askbox.on { display:flex; }
  .askbody { background:var(--card); border:1px solid var(--line); border-radius:14px;
             padding:1.4rem 1.6rem; max-width:30rem; width:100%;
             box-shadow:0 10px 40px rgba(27,31,35,.2); }
  .askbody h3 { margin:0 0 .5rem; font-size:.95rem; letter-spacing:.04em;
                text-transform:uppercase; color:var(--mut); }
  .askbody p { margin:0 0 1.2rem; font-size:.92rem; line-height:1.5; }
  .askacts { display:flex; gap:.6rem; justify-content:flex-end; }

  /* processing overlay */
  #busy { position:fixed; inset:0; background:rgba(250,250,247,.9); display:none;
          align-items:center; justify-content:center; z-index:50; }
  #busy.on { display:flex; }
  .busybox { background:var(--card); border:1px solid var(--line); border-radius:14px;
             padding:2rem 2.5rem; text-align:center; max-width:22rem;
             box-shadow:0 8px 30px rgba(27,31,35,.12); }
  .busybox h3 { margin:.8rem 0 .3rem; font-size:1rem; }
  .busybox p { margin:0; color:var(--mut); font-size:.83rem; }
  .busybar { height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
  .busybar i { display:block; height:100%; width:35%; background:repeating-linear-gradient(90deg,
      var(--green) 0 2px, transparent 2px 5px, var(--green) 5px 9px, transparent 9px 11px);
      animation:slide 1.4s ease-in-out infinite; }
  @keyframes slide { 0%{transform:translateX(-100%);} 100%{transform:translateX(300%);} }
  @media (prefers-reduced-motion: reduce) { .busybar i { animation:none; width:100%; } }


/* ---------- admin: tabbed panels ---------------------------------------
   The panel used to be a five-card masonry where every form was a .filterbar
   (flex-wrap), so field widths depended on how long the labels happened to be
   and the layout reflowed differently in each language. Tabs are server-side
   (?tab=) rather than JavaScript: an admin screen should be linkable, should
   survive a POST-redirect, and should not depend on script to show its
   content. */
.tabs { display:flex; gap:.2rem; flex-wrap:wrap; align-items:flex-end;
        border-bottom:1px solid var(--line); margin:0 0 1.6rem; }
.tabs a { padding:.55rem 1.15rem; text-decoration:none; color:var(--mut);
          font-size:.87rem; font-weight:600; border-radius:9px 9px 0 0;
          border:1px solid transparent; border-bottom:0; margin-bottom:-1px;
          transition:color .12s ease, background .12s ease; }
.tabs a:hover { color:var(--green); background:var(--green-soft); }
.tabs a.on { color:var(--green); background:var(--card);
             border-color:var(--line); }
.tabs .count { font-weight:700; font-size:.76rem; opacity:.75; margin-left:.35rem; }

/* one titled block inside a tab */
.section { margin:0 0 2.2rem; }
.section:last-child { margin-bottom:0; }
.section > h3 { margin:0 0 .25rem; font-size:.78rem; font-weight:700;
                letter-spacing:.1em; text-transform:uppercase; color:var(--green); }
.section > p.hint { margin:.15rem 0 1.1rem; color:var(--mut); font-size:.85rem;
                    line-height:1.5; max-width:64ch; }

/* forms: a real grid, so a field's width comes from the layout and not from
   the length of its label */
.formgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
            gap:.9rem 1.1rem; align-items:end; }
.formgrid > label { display:flex; flex-direction:column; gap:.3rem;
                    font-size:.72rem; font-weight:700; letter-spacing:.05em;
                    text-transform:uppercase; color:var(--mut); min-width:0; }
.formgrid input, .formgrid select {
    padding:.5rem .6rem; border:1px solid #d6d8d0; border-radius:8px;
    font-size:.9rem; background:var(--card); color:var(--ink);
    font-weight:400; letter-spacing:normal; text-transform:none; width:100%; }
.formgrid input:disabled { background:#eef0ea; color:#a2a8b0; cursor:not-allowed; }
.formgrid input[readonly] { background:#f4f6f3; color:var(--mut); }
.formgrid > label.chk { flex-direction:row; align-items:center; gap:.5rem;
                        text-transform:none; letter-spacing:normal;
                        font-size:.85rem; font-weight:600; color:var(--ink);
                        align-self:center; }
.formgrid > label.chk input { width:16px; height:16px; accent-color:var(--green); }
.formgrid > .full { grid-column:1/-1; }
.formactions { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
               margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.formactions .note { color:var(--mut); font-size:.78rem; max-width:52ch; }

/* tables inside admin panels */
table.data { width:100%; border-collapse:collapse; font-size:.86rem;
             margin-bottom:.4rem; }
table.data th { text-align:left; padding:.45rem .6rem; color:var(--mut);
                font-weight:700; font-size:.7rem; text-transform:uppercase;
                letter-spacing:.06em; border-bottom:2px solid var(--line); }
table.data td { padding:.5rem .6rem; border-bottom:1px solid var(--line);
                vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }
table.data td.num, table.data th.num { text-align:right; font-family:var(--mono); }
table.data th.num { font-family:inherit; }
table.data .rowacts-inline { display:flex; gap:.45rem; align-items:center; }
table.data .rowacts-inline form { margin:0; }