/* ===================================================================== AUTOMOTO TSL — zunifikowany pasek górny (shared topbar) Wspólny dla WSZYSTKICH aplikacji. Tokeny 1:1 ze stylem zlecenia-app. Ladowany na kazdej apce przez ===================================================================== */ :root{ --atb-bg:#faf9f6; --atb-surface:#fff; --atb-ink:#0f0f0f; --atb-muted:#6b6a65; --atb-line:#e6e4dc; --atb-accent:#d9a227; --atb-accent-d:#b8851a; --atb-accent-l:#fef3d4; --atb-good:#2d8659; --atb-bad:#c1352e; --atb-warn:#c97a14; --atb-shadow-lg:0 12px 40px -6px rgba(15,15,15,.22); --atb-radius:6px; --atb-radius-lg:10px; --atb-font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --atb-mono:'Geist Mono','JetBrains Mono',Consolas,monospace; --atb-h:66px; } /* tag moze dodac padding-top, zeby tresc nie chowala sie pod sticky pasek */ body.has-automoto-topbar{padding-top:var(--atb-h)!important} /* menu huba (#app-header-slot) przyklejone tuz pod paskiem AUTOMOTO */ body.has-automoto-topbar #app-header-slot{position:sticky;top:var(--atb-h);z-index:8000} #automoto-topbar *{box-sizing:border-box} #automoto-topbar{ position:fixed;top:0;left:0;right:0;z-index:9100; background:var(--atb-ink);color:#fff;height:var(--atb-h); display:flex;align-items:center;gap:6px;padding:0 14px 0 18px; font-family:var(--atb-font);font-size:14px;line-height:1.5; box-shadow:0 1px 0 rgba(0,0,0,.25); } #automoto-topbar a{text-decoration:none} /* ---- brand ---- */ #automoto-topbar .atb-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;padding-right:16px} #automoto-topbar .atb-brand .mark{ display:grid;place-items:center;flex-shrink:0; color:#fff;font-weight:800;font-size:20px;letter-spacing:-.5px; /* kolor = awaryjne „A", gdyby logo nie wczytalo */ } #automoto-topbar .atb-brand .mark img{height:55px;width:auto;display:block;object-fit:contain} #automoto-topbar .atb-brand .name{font-weight:700;letter-spacing:.3px;font-size:14.5px;white-space:nowrap} #automoto-topbar .atb-brand .name .accent{color:var(--atb-accent)} /* ===================================================================== BOCZNA SZUFLADA APLIKACJI (☰) — nawigacja apek, lewa strona. Otwierana hamburgerem na KAZDEJ szerokosci. Domyslnie schowana. ===================================================================== */ .atb-appdrawer{ position:fixed;top:0;left:0;bottom:0;z-index:9200; width:300px;max-width:86vw; background:var(--atb-ink);color:#fff; display:flex;flex-direction:column; font-family:var(--atb-font); transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:18px 0 50px -10px rgba(0,0,0,.6); padding-bottom:env(safe-area-inset-bottom); } .atb-appdrawer.open{transform:translateX(0)} .atb-appdrawer-head{ display:flex;align-items:center;gap:10px;flex-shrink:0; padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.12); } .atb-appdrawer-title{font-size:15px;font-weight:700;letter-spacing:.02em;color:#fff;flex:1} .atb-appdrawer-close{ width:34px;height:34px;border-radius:8px;flex-shrink:0; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); color:#e7e5dd;cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.15s; } .atb-appdrawer-close:hover{background:var(--atb-accent);color:#0f0f0f;border-color:var(--atb-accent)} /* ---- przelacznik aplikacji (pionowa lista w szufladzie) ---- */ .atb-appdrawer .atb-switch{ display:flex;flex-direction:column;align-items:stretch;gap:3px; padding:10px;overflow-y:auto;scrollbar-width:thin; } .atb-appdrawer .atb-item{position:relative;display:flex;align-items:center;width:100%} .atb-appdrawer .atb-item > a{ flex:1;min-width:0; color:#cfcdc6;padding:12px 14px;border-radius:9px;font-size:15px;font-weight:500; white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:12px; } .atb-appdrawer .atb-item > a .ico{font-size:19px;opacity:.9;width:24px;text-align:center;flex-shrink:0} .atb-appdrawer .atb-item > a:hover{color:#fff;background:rgba(255,255,255,.07)} .atb-appdrawer .atb-item.active > a{color:#0f0f0f;background:var(--atb-accent);font-weight:600} .atb-appdrawer .atb-item.active > a:hover{background:var(--atb-accent)} .atb-appdrawer .atb-newtab{ flex-shrink:0;width:34px;height:34px;margin-right:4px; opacity:.55;border:none;background:transparent;color:inherit;cursor:pointer; font-size:14px;border-radius:8px;display:grid;place-items:center;transition:.12s; } .atb-appdrawer .atb-newtab:hover{opacity:1;background:rgba(255,255,255,.12)} .atb-appdrawer .atb-item.active .atb-newtab{color:#0f0f0f} .atb-appdrawer .atb-item.active .atb-newtab:hover{background:rgba(0,0,0,.12)} /* ---- prawy klaster ---- */ /* flex-shrink:0 => klaster zawsze w calosci widoczny (nic sie nie chowa za krawedzia); min-width:0 dopuszcza wewnetrzny scroll tylko w ostatecznosci (skrajnie waski ekran). */ #automoto-topbar .atb-right{display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:0;margin-left:auto} #automoto-topbar .atb-chip{ display:flex;align-items:center;gap:6px;height:34px;padding:0 9px;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);transition:all .15s;white-space:nowrap; } #automoto-topbar .atb-chip:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2)} #automoto-topbar .atb-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--atb-muted);flex-shrink:0;transition:.3s} #automoto-topbar .atb-chip .dot.ok{background:#34d07a;box-shadow:0 0 7px #34d07a99} #automoto-topbar .atb-chip .dot.warn{background:#f0b32f;box-shadow:0 0 7px #f0b32f99;animation:atb-pls 1.6s infinite} #automoto-topbar .atb-chip .dot.err{background:#ef5a52;box-shadow:0 0 7px #ef5a5299;animation:atb-pls 1.2s infinite} @keyframes atb-pls{0%,100%{opacity:1}50%{opacity:.4}} #automoto-topbar .atb-chip .lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b9b7b0} /* dwie wersje etykiety czatu: pelna (.lg) i skrocona (.sm) — przelaczane media-query nizej */ #automoto-topbar .atb-chip .lab .sm{display:none} #automoto-topbar .atb-chip .val{font-size:12px;font-weight:600;color:#fff;font-family:var(--atb-mono)} #automoto-topbar .atb-chip .val.dim{color:#9a988f} /* suwak Grafik */ #automoto-topbar .atb-graf{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)} #automoto-topbar .atb-graf .lab{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b9b7b0} #automoto-topbar .atb-toggle{width:40px;height:22px;border-radius:11px;border:none;cursor:pointer;position:relative;background:#3a3a37;transition:background .18s;flex-shrink:0} #automoto-topbar .atb-toggle.on{background:var(--atb-accent)} #automoto-topbar .atb-toggle::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.4)} #automoto-topbar .atb-toggle.on::after{left:21px} #automoto-topbar .atb-toggle:disabled{opacity:.55;cursor:wait} #automoto-topbar .atb-graf .state{font-size:11px;font-weight:600;color:#8d8b84;width:24px} #automoto-topbar .atb-graf .state.on{color:var(--atb-accent)} /* user chip */ #automoto-topbar .atb-user{display:flex;align-items:center;gap:8px;padding-left:10px;margin-left:2px;border-left:1px solid rgba(255,255,255,.12)} #automoto-topbar .atb-user .ui{text-align:right;line-height:1.18} #automoto-topbar .atb-user .un{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;text-decoration:none;cursor:pointer} #automoto-topbar .atb-user a.un:hover{color:var(--atb-accent);text-decoration:underline} #automoto-topbar .atb-user .ur{font-size:10.5px;color:var(--atb-accent);text-transform:uppercase;letter-spacing:.05em;font-weight:600} #automoto-topbar .atb-user .out{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfcdc6;width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:15px;transition:.15s;display:grid;place-items:center} #automoto-topbar .atb-user .out:hover{background:var(--atb-accent);color:#0f0f0f;border-color:var(--atb-accent)} /* ===================================================================== POPOVERY ===================================================================== */ .atb-pop{position:fixed;top:calc(var(--atb-h) + 6px);right:16px;width:344px;background:#fff;color:var(--atb-ink); border:1px solid var(--atb-line);border-radius:var(--atb-radius-lg);box-shadow:var(--atb-shadow-lg); z-index:9300;overflow:hidden;display:none;font-family:var(--atb-font)} .atb-pop.show{display:block;animation:atb-popin .16s ease-out} @keyframes atb-popin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .atb-pop-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--atb-line);background:linear-gradient(180deg,#fff,#fcfbf8)} .atb-pop-head .t{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--atb-muted);flex:1} .atb-pop-head .st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .atb-pop-head .st.ok{color:var(--atb-good)} .atb-pop-head .st.warn{color:var(--atb-warn)} .atb-pop-head .st.err{color:var(--atb-bad)} .atb-pop-body{padding:15px 16px;display:flex;flex-direction:column;gap:12px} .atb-kv{display:flex;justify-content:space-between;font-size:12.5px} .atb-kv .k{color:var(--atb-muted)} .atb-kv .v{font-family:var(--atb-mono);font-weight:600} .atb-acct{display:flex;align-items:center;justify-content:space-between;background:var(--atb-bg);border:1px solid var(--atb-line);border-radius:8px;padding:9px 12px} .atb-acct .who{font-size:12.5px;font-weight:600} .atb-acct .who small{display:block;color:var(--atb-muted);font-weight:500;font-size:11px;margin-top:1px} .atb-btn{font-family:var(--atb-font);font-weight:600;font-size:13px;padding:9px 14px;border-radius:var(--atb-radius);border:1px solid var(--atb-line);background:#fff;color:var(--atb-ink);cursor:pointer;transition:.15s} .atb-btn:hover{border-color:var(--atb-accent)} .atb-btn:disabled{opacity:.6;cursor:wait} .atb-btn.primary{background:var(--atb-accent);border-color:var(--atb-accent);color:#0f0f0f} .atb-btn.primary:hover{background:var(--atb-accent-d);border-color:var(--atb-accent-d)} .atb-btn.full{width:100%} .atb-codebox{display:none;flex-direction:column;gap:8px;padding:11px;background:#fff8e7;border:1px solid #f0dca0;border-radius:8px} .atb-codebox.show{display:flex} .atb-codebox .hint{font-size:12px;color:#7a5d12} .atb-codebox input{font-family:var(--atb-mono);font-size:18px;letter-spacing:6px;text-align:center;padding:9px;border:1px solid var(--atb-line);border-radius:6px;width:100%} .atb-login-msg{font-size:12px;color:var(--atb-muted)} .atb-login-msg.err{color:var(--atb-bad)} .atb-login-msg.ok{color:var(--atb-good)} /* dane logowania TIMOCOM (tylko konto Artura) */ .atb-creds-toggle{font-family:var(--atb-font);font-size:11.5px;font-weight:600;color:var(--atb-muted);background:none;border:none;cursor:pointer;padding:2px 0} .atb-creds-toggle:hover{color:var(--atb-accent-d)} .atb-creds-body{display:none;flex-direction:column;gap:7px;margin-top:7px;padding:11px;background:var(--atb-bg);border:1px solid var(--atb-line);border-radius:8px} .atb-creds-body.show{display:flex} .atb-creds-body .hint{font-size:11px;color:var(--atb-muted);line-height:1.45} .atb-creds-body input{font-family:var(--atb-font);font-size:13px;padding:8px 10px;border:1px solid var(--atb-line);border-radius:6px;width:100%} .atb-creds-body input:focus{outline:none;border-color:var(--atb-accent)} /* widget bota w popoverze */ .atb-bw-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .atb-bw-stat{background:var(--atb-bg);border:1px solid var(--atb-line);border-radius:8px;padding:9px 12px} .atb-bw-stat .l{font-size:10px;color:var(--atb-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px} .atb-bw-stat .v{font-size:16px;font-weight:700} .atb-bw-stat .v.acc{color:var(--atb-accent-d)} .atb-bw-stat .v.ok{color:var(--atb-good)} .atb-bw-stat .v.err{color:var(--atb-bad)} .atb-bw-scan{display:flex;justify-content:space-between;font-size:12px;color:var(--atb-muted)} .atb-bw-scan b{color:var(--atb-ink)} .atb-bw-scan b.stale{color:var(--atb-warn)} .atb-bw-scan b.dead{color:var(--atb-bad)} .atb-bw-errors{background:#fdf2f2;border:1px solid #f3c9c6;border-radius:8px;padding:9px 11px;display:none} .atb-bw-errors.show{display:block} .atb-bw-errors .et{font-size:11px;font-weight:700;color:var(--atb-bad);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;display:flex;justify-content:space-between} .atb-bw-err{font-size:11.5px;color:#7a2e2a;padding:2px 0;border-top:1px solid #f3c9c6} .atb-bw-err .ts{font-family:var(--atb-mono);color:#a8635f;margin-right:6px} /* widget zapytań TIMOCOM w popoverze */ .atb-zap-sum{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;color:var(--atb-muted);text-transform:uppercase;letter-spacing:.04em} .atb-zap-sum b{font-family:var(--atb-mono);font-size:13px;color:var(--atb-ink);font-weight:700} .atb-zap-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto;margin:0 -4px;padding:0 4px} .atb-zap-row{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border:1px solid var(--atb-line);border-radius:8px;background:var(--atb-bg);transition:.13s;cursor:pointer} .atb-zap-row:hover{border-color:var(--atb-accent);background:#fff} .atb-zap-row .r{font-size:12px;font-weight:600;color:var(--atb-ink);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .atb-zap-row .c{display:flex;align-items:center;gap:5px;flex-shrink:0;font-family:var(--atb-mono);font-size:12px} .atb-zap-row .c b{min-width:22px;text-align:center;color:var(--atb-ink);background:#fff;border:1px solid var(--atb-line);border-radius:5px;padding:1px 5px;font-weight:700} .atb-zap-row .c i{min-width:22px;text-align:center;font-style:normal;color:var(--atb-muted);border:1px solid var(--atb-line);border-radius:5px;padding:1px 5px} .atb-zap-row .c i.ok{color:#fff;background:var(--atb-good);border-color:var(--atb-good)} .atb-zap-row .c u{min-width:22px;text-align:center;text-decoration:none;color:#fff;background:var(--atb-warn);border-radius:5px;padding:1px 5px;font-weight:700} .atb-zap-empty{font-size:12px;color:var(--atb-muted);text-align:center;padding:14px 0} .atb-backdrop{position:fixed;inset:0;background:transparent;z-index:9050;display:none} .atb-backdrop.show{display:block} /* dim tylko gdy otwarta boczna szuflada apek (popovery uzywaja przezroczystego tla-lapacza) */ .atb-backdrop.atb-dim{background:rgba(10,10,9,.5)} /* hamburger — ZAWSZE widoczny (obok logo); otwiera boczna szuflade apek */ #automoto-topbar .atb-burger{display:grid;width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);cursor:pointer;flex-shrink:0;place-items:center;padding:0} #automoto-topbar .atb-burger:hover{background:rgba(255,255,255,.13)} #automoto-topbar .atb-burger span{display:block;width:17px;height:2px;background:#e7e5dd;border-radius:2px;position:relative;margin:0 auto} #automoto-topbar .atb-burger span::before,#automoto-topbar .atb-burger span::after{content:'';position:absolute;left:0;width:17px;height:2px;background:#e7e5dd;border-radius:2px} #automoto-topbar .atb-burger span::before{top:-5.5px} #automoto-topbar .atb-burger span::after{top:5.5px} /* wrapper widgetow: DESKTOP = przezroczysty (display:contents => .atb-right inline na pasku); MOBILE (media nizej) = prawa szuflada. Naglowek i przycisk ⋯ tylko na mobile. */ .atb-widgetdrawer{display:contents} .atb-widgetdrawer-head{display:none} #automoto-topbar .atb-widgets-btn{ display:none;width:38px;height:38px;border-radius:9px;flex-shrink:0;place-items:center;padding:0; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#e7e5dd;cursor:pointer; font-size:22px;line-height:1; } #automoto-topbar .atb-widgets-btn:hover{background:rgba(255,255,255,.13)} /* opis ikon 🔔/💬/📨 — ukryty na desktopie (chip=sama ikona), widoczny w prawej szufladzie na mobile */ #automoto-topbar .atb-wlabel{display:none;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b9b7b0} /* ====== DESKTOP CIASNY (duzo chipow, srednio szeroki ekran) ====== Gdy klaster prawy robi sie szeroki, skracamy etykiety czatow, zeby wszystko sie zmiescilo i nawigacja (.atb-switch) nie kurczyla sie do zera. Dotyczy tylko desktopu (>720px) — mobilny tryb ma osobny blok nizej. */ @media (min-width:721px) and (max-width:1650px){ #automoto-topbar .atb-chip .lab .lg{display:none} #automoto-topbar .atb-chip .lab .sm{display:inline} } /* ====== MALY EKRAN ====== Nawigacja apek — lewa szuflada (☰), jak na desktopie. Widgety — PRAWA szuflada (przycisk ⋯), pionowo z PELNYMI etykietami/wartosciami (a nie ściśnięte kropki na pasku). Pasek pokazuje tylko: logo + ☰ + [odstep] + ⋯. */ @media (max-width:720px){ :root{--atb-h:54px} #automoto-topbar{padding:0 8px 0 10px;gap:6px;z-index:9100} #automoto-topbar .atb-brand{padding-right:0} #automoto-topbar .atb-brand .name{display:none} #automoto-topbar .atb-brand .mark img{height:38px} /* przycisk otwierajacy prawa szuflade widgetow */ #automoto-topbar .atb-widgets-btn{display:grid;margin-left:auto} /* wrapper -> prawa szuflada wysuwana z prawej */ .atb-widgetdrawer{ display:flex;flex-direction:column; position:fixed;top:0;right:0;bottom:0;z-index:9200; width:86vw;max-width:320px; background:var(--atb-ink);color:#fff;font-family:var(--atb-font); transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1); box-shadow:-18px 0 50px -10px rgba(0,0,0,.6); padding-bottom:env(safe-area-inset-bottom); } .atb-widgetdrawer.open{transform:translateX(0)} .atb-widgetdrawer-head{ display:flex;align-items:center;gap:10px;flex-shrink:0; padding:16px 14px 12px;border-bottom:1px solid rgba(255,255,255,.12); } .atb-widgetdrawer-title{font-size:15px;font-weight:700;letter-spacing:.02em;color:#fff;flex:1} .atb-widgetdrawer-close{ width:34px;height:34px;border-radius:8px;flex-shrink:0; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12); color:#e7e5dd;cursor:pointer;font-size:15px;display:grid;place-items:center;transition:.15s; } .atb-widgetdrawer-close:hover{background:var(--atb-accent);color:#0f0f0f;border-color:var(--atb-accent)} /* prawy klaster -> pionowo, pelne etykiety i wartosci */ #automoto-topbar .atb-right{ flex-direction:column;align-items:stretch;gap:10px;margin:0;min-width:0; padding:12px 12px calc(12px + env(safe-area-inset-bottom));overflow-y:auto; } #automoto-topbar .atb-right > *{flex:0 0 auto} #automoto-topbar .atb-chip,#automoto-topbar .atb-graf{width:100%;height:auto;padding:11px 13px;justify-content:flex-start} #automoto-topbar .atb-chip .lab,#automoto-topbar .atb-chip .val{display:inline} #automoto-topbar .atb-chip .lab .lg{display:inline} /* pelna etykieta czatu (💬 Prywatny / 💬 Czat X) */ #automoto-topbar .atb-chip .lab .sm{display:none} #automoto-topbar .atb-graf .lab,#automoto-topbar .atb-graf .state{display:inline} #automoto-topbar .atb-right .atb-wlabel{display:inline;margin-left:2px} #automoto-topbar .atb-user{ width:100%;border-left:none;border-top:1px solid rgba(255,255,255,.12); padding:14px 4px 0;margin:6px 0 0;justify-content:space-between; } #automoto-topbar .atb-user .ui{display:block;text-align:left} /* lewa szuflada apek pelnej szerokosci + popovery na pelna szerokosc (nad szuflada) */ .atb-appdrawer{width:86vw;max-width:320px} .atb-pop{right:8px;left:8px;width:auto;top:calc(var(--atb-h) + 6px)} }