/* ==========================================================================
   FAKAP UI — warstwa wyglądu (sidebar + zakładki z licznikami + karty)
   Dołączać PO styles.css:  <link rel="stylesheet" href="fakap-ui.css">
   Nic nie nadpisuje istniejących klas — wszystko na nowych nazwach (fu-*).
   ========================================================================== */

:root{
  --fu-acc:#3F7A00;              /* limonka marki, przyciemniona do czytelności */
  --fu-acc-soft:rgba(140,255,0,.14);
  --fu-on-acc:#fff;              /* tekst na akcencie */
  --fu-bg:#F2F3F1;               /* tło obszaru roboczego */
  --fu-panel:#FFFFFF;            /* sidebar, topbar, karty */
  --fu-card:#FFFFFF;
  --fu-row:#FBFBFA;              /* wiersz pozycji wewnątrz karty */
  --fu-line:#E4E4E1;
  --fu-line-soft:#EFEFEC;
  --fu-tx:#17181A;
  --fu-tx2:#5C5F5C;
  --fu-tx3:#9A9C98;
  --fu-chip-bg:#EDEEEB;
  --fu-chip-tx:#4F5250;
  --fu-sh:0 1px 2px rgba(16,20,30,.05), 0 1px 8px rgba(16,20,30,.04);
  --fu-sh-hi:0 4px 16px rgba(16,20,30,.10);
  --fu-r:14px;
  --fu-r-sm:9px;
  --fu-side:236px;
  --fu-topbar:60px;
  --fu-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
html[data-theme="dark"]{
  --fu-acc:#8CFF00;              /* na ciemnym tle wchodzi czysta limonka marki */
  --fu-acc-soft:rgba(140,255,0,.16);
  --fu-on-acc:#0d0d0d;
  /* Neutralna czerń jak w styles.css — bez granatowego podbicia */
  --fu-bg:#0D0D0D;
  --fu-panel:#161616;
  --fu-card:#1A1A1A;
  --fu-row:#202020;
  --fu-line:#333333;
  --fu-line-soft:#262626;
  --fu-tx:#ECECEC;
  --fu-tx2:#B2B2B2;
  --fu-tx3:#808080;
  --fu-chip-bg:#272727;
  --fu-chip-tx:#BDBDBD;
  --fu-sh:0 1px 2px rgba(0,0,0,.35);
  --fu-sh-hi:0 6px 20px rgba(0,0,0,.45);
}

/* ---------- Szkielet ---------------------------------------------------- */
.fu-shell{display:flex;min-height:100vh;background:var(--fu-bg);font-family:var(--fu-font);color:var(--fu-tx)}
.fu-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fu-page{padding:26px 30px 60px;max-width:1320px;width:100%}
.fu-h1{font-size:30px;font-weight:750;letter-spacing:-.02em;margin:0 0 18px}
.fu-h2{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:26px 0 10px}

/* ---------- Sidebar ----------------------------------------------------- */
.fu-side{
  width:var(--fu-side);flex:0 0 var(--fu-side);background:var(--fu-panel);
  border-right:1px solid var(--fu-line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
}
.fu-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 16px;border-bottom:1px solid var(--fu-line-soft)}
.fu-brand img{height:30px;width:auto;display:block}
.fu-brand b{font-size:16px;font-weight:750;letter-spacing:-.02em}
.fu-nav{padding:12px 12px 18px;display:flex;flex-direction:column;gap:2px}
.fu-sec{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fu-tx3);padding:14px 10px 6px}
.fu-sec:first-child{padding-top:4px}
.fu-nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  font-size:14px;font-weight:500;color:var(--fu-tx2);background:none;border:0;width:100%;
  text-align:left;cursor:pointer;transition:background .13s,color .13s;
}
.fu-nav-item:hover{background:var(--fu-line-soft);color:var(--fu-tx)}
.fu-nav-item.is-active{background:var(--fu-acc-soft);color:var(--fu-acc);font-weight:600}
.fu-nav-item:focus-visible{outline:2px solid var(--fu-acc);outline-offset:1px}
.fu-nav-ico{width:18px;text-align:center;font-size:15px;opacity:.9;flex:0 0 18px}
.fu-nav-item.is-active .fu-nav-ico{opacity:1}
.fu-badge{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--fu-acc);color:var(--fu-on-acc,#fff);font-size:11px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.fu-badge.is-muted{background:var(--fu-chip-bg);color:var(--fu-chip-tx)}
.fu-side-foot{margin-top:auto;padding:14px 18px 18px;font-size:12px;color:var(--fu-tx3);border-top:1px solid var(--fu-line-soft)}

/* ---------- Topbar ------------------------------------------------------ */
.fu-topbar{
  height:var(--fu-topbar);display:flex;align-items:center;gap:14px;padding:0 30px;
  background:var(--fu-panel);border-bottom:1px solid var(--fu-line);
  position:sticky;top:0;z-index:20;
}
.fu-search{
  flex:0 1 460px;display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;
  background:var(--fu-bg);border:1px solid var(--fu-line);border-radius:11px;color:var(--fu-tx3);
}
.fu-search input{flex:1;border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--fu-tx)}
.fu-search input::placeholder{color:var(--fu-tx3)}
.fu-top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.fu-burger{display:none}

/* ---------- Zakładki z licznikami --------------------------------------- */
.fu-tabs{display:flex;gap:26px;border-bottom:1px solid var(--fu-line);margin:0 0 20px}
.fu-tab{
  display:inline-flex;align-items:center;gap:8px;padding:11px 2px 12px;background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--fu-tx2);transition:color .13s,border-color .13s;
}
.fu-tab:hover{color:var(--fu-tx)}
.fu-tab.is-active{color:var(--fu-acc);border-bottom-color:var(--fu-acc)}
.fu-tab .fu-cnt{
  min-width:20px;padding:2px 7px;border-radius:999px;background:var(--fu-chip-bg);color:var(--fu-chip-tx);
  font-size:11.5px;font-weight:700;line-height:1.35;
}
.fu-tab.is-active .fu-cnt{background:var(--fu-acc-soft);color:var(--fu-acc)}

/* ---------- Nagłówek listy ---------------------------------------------- */
.fu-listhead{display:flex;align-items:center;gap:9px;margin:4px 0 12px;font-size:13px;font-weight:700;letter-spacing:.01em}
.fu-listhead .fu-hint{font-weight:500;color:var(--fu-tx3);letter-spacing:0}

/* ---------- Karta grupy (zlecenie / zamówienie) ------------------------- */
.fu-list{display:flex;flex-direction:column;gap:16px}
.fu-gcard{
  background:var(--fu-card);border:1px solid var(--fu-line);border-radius:var(--fu-r);
  box-shadow:var(--fu-sh);overflow:hidden;transition:box-shadow .15s,border-color .15s;
}
.fu-gcard:hover{box-shadow:var(--fu-sh-hi)}
.fu-gcard-h{
  display:flex;align-items:center;gap:10px;padding:13px 15px;
  border-bottom:1px solid var(--fu-line-soft);cursor:pointer;
}
.fu-gcard-num{font-size:13.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.fu-gcard-name{font-size:13.5px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-gcard-cust{font-size:12.5px;color:var(--fu-tx3);white-space:nowrap}
.fu-gcard-h .fu-spacer{flex:1}
.fu-gcard-b{padding:10px;display:flex;flex-direction:column;gap:8px}

/* wiersz pozycji */
.fu-irow{
  display:flex;align-items:flex-start;gap:11px;padding:11px 13px;
  background:var(--fu-row);border:1px solid var(--fu-line-soft);border-radius:var(--fu-r-sm);
  transition:border-color .12s,background .12s,transform .12s;
}
.fu-irow:hover{border-color:var(--fu-line)}
.fu-handle{
  flex:0 0 12px;color:var(--fu-tx3);font-size:13px;line-height:1.35;cursor:grab;user-select:none;
  letter-spacing:-.08em;
}
.fu-handle:active{cursor:grabbing}
.fu-irow.is-dragging{opacity:.45;transform:scale(.995)}
.fu-drop{outline:2px dashed var(--fu-acc);outline-offset:3px;background:var(--fu-acc-soft)}
.fu-ibody{flex:1;min-width:0}
.fu-ititle{font-size:13.5px;font-weight:650;letter-spacing:-.01em;line-height:1.35;overflow-wrap:anywhere}
.fu-ititle .fu-dot{color:var(--fu-tx3);font-weight:500;margin:0 5px}
.fu-imeta{font-size:12px;color:var(--fu-tx3);margin-top:2px}
.fu-iact{margin-left:auto;display:flex;align-items:center;gap:6px}

/* chipy rozmiarów */
.fu-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.fu-size{
  background:var(--fu-chip-bg);color:var(--fu-chip-tx);border-radius:6px;
  padding:2px 7px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;
}
.fu-size b{font-weight:800}
.fu-size.is-zero{opacity:.45}
.fu-size.is-ok{background:rgba(34,160,90,.13);color:#1E8A4E}
.fu-size.is-miss{background:rgba(224,33,43,.12);color:var(--fu-acc)}

/* ---------- Przyciski / pigułki ----------------------------------------- */
.fu-btn{
  display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;border-radius:9px;
  border:1px solid var(--fu-line);background:var(--fu-panel);color:var(--fu-tx2);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s;
}
.fu-btn:hover{border-color:var(--fu-tx3);color:var(--fu-tx)}
.fu-btn.is-acc{background:var(--fu-acc);border-color:var(--fu-acc);color:var(--fu-on-acc,#fff)}
.fu-btn.is-acc:hover{filter:brightness(1.06)}
.fu-btn:focus-visible{outline:2px solid var(--fu-acc);outline-offset:2px}
.fu-pill{
  display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:999px;
  background:var(--fu-chip-bg);color:var(--fu-chip-tx);font-size:11px;font-weight:700;
}

/* ---------- Pusty stan --------------------------------------------------- */
.fu-empty{
  border:1px dashed var(--fu-line);border-radius:var(--fu-r);padding:34px 20px;text-align:center;
  color:var(--fu-tx3);font-size:13.5px;background:var(--fu-card);
}

/* ---------- Responsywność ------------------------------------------------ */
@media(max-width:900px){
  .fu-side{
    position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--fu-sh-hi);
  }
  .fu-shell.is-nav-open .fu-side{transform:none}
  .fu-shell.is-nav-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50}
  .fu-burger{display:inline-flex}
  .fu-topbar{padding:0 16px}
  .fu-page{padding:18px 16px 48px}
  .fu-h1{font-size:24px}
  .fu-tabs{gap:16px;overflow-x:auto;scrollbar-width:none}
  .fu-tabs::-webkit-scrollbar{display:none}
  .fu-gcard-h{flex-wrap:wrap;row-gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .fu-side,.fu-irow,.fu-gcard,.fu-btn,.fu-tab,.fu-nav-item{transition:none}
}

/* ==========================================================================
   Warstwa startowa (fakap-ui-boot.js) — obsługa przeniesionego szkieletu
   ========================================================================== */
body.fu-on{margin:0;background:var(--fu-bg)}
body.fu-on .fu-shell{align-items:stretch}
.fu-hidden-src{display:none !important}          /* stary pasek zakładek */
.fu-nav-item.is-sub{padding-left:26px;font-size:13.5px;font-weight:500}
.fu-nav-item.is-sub .fu-nav-ico{font-size:12px;opacity:.55}
.fu-nav-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fu-main > *:not(.fu-topbar){max-width:100%}
.fu-topbar #podglad-roli,.fu-topbar select{height:32px;border-radius:9px}
@media(max-width:900px){ body.fu-on .fu-main{width:100%} }

/* ---------- Osadzone narzędzia (kalkulator.html w iframe) ---------------- */
body.fu-on .iframe-wrap{background:transparent;border-color:var(--fu-line);overflow:hidden}
body.fu-on .iframe-wrap iframe{width:100%;display:block;border:0;background:transparent;color-scheme:inherit}