:root{
  --accent:#FFA600; --accent-dark:#E69500; --accent-soft:#FFF4DB;
  --blue:#008DFF; --ink:#111111; --muted:#6B7280; --line:#E6E8EC;
  --bg:#F4F5F7; --card:#FFFFFF; --col:#ECEEF1; --danger:#D92D20; --ok:#12805C;
  --radius:10px;
}
@media (prefers-color-scheme: dark){ :root{} } /* celowo jasny motyw: system do pracy przez cały dzień */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:15px/1.45 "Nexa",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
.hidden{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:none}

/* przyciski w stylu strony: zaokrąglone, żółte */
.btn{border:1px solid var(--line);background:#fff;border-radius:100px;padding:8px 18px;cursor:pointer;font-weight:600}
.btn:hover{background:#f7f7f8}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#000}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.small{padding:4px 12px;font-size:13px}
.btn.danger{color:var(--danger)}
.link{background:none;border:0;color:var(--blue);cursor:pointer;padding:0}
.err{color:var(--danger);min-height:20px;font-size:14px}

input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;width:100%}
/* jednakowa wysokość i szerokość wszystkich pól i list */
input:not([type=checkbox]),select{height:36px;line-height:20px}
select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center}
input:disabled{background:#F7F8FA;color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1}
.row .btn.small,.stage-row .btn.small{height:36px;padding-top:0;padding-bottom:0}
.row>input,.row>select{width:auto;flex:1 1 0;min-width:0}
.row>.btn{flex:none}
#tDue{flex:0 0 175px}
.dr-h .btn.small{height:34px;padding-top:0;padding-bottom:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:7px}
label>input,label>select,label>textarea{margin-top:4px;font-weight:400;font-size:15px;color:var(--ink)}

/* logowanie */
.login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}
.login-box{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;width:100%;max-width:380px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.login-logo{height:40px;margin-bottom:20px}
.login-box h1{font-size:20px;margin:0 0 18px}
.login-box .btn{width:100%;margin-top:6px;padding:11px}

/* układ */
.app{display:grid;grid-template-columns:208px minmax(0,1fr);height:100%}
.side{background:#fff;border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;overflow:auto}
.side-logo{height:34px;align-self:flex-start;margin:0 8px 22px}
.side-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:14px 10px 6px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 10px;border-radius:8px;color:var(--ink);font-weight:600;cursor:pointer;border-left:3px solid transparent}
.nav:hover{background:#f4f5f7}
.nav.active{background:var(--accent-soft);border-left-color:var(--accent)}
.nav.dropover{outline:2px dashed var(--accent);background:var(--accent-soft)}
.nav .n{font-weight:500;color:var(--muted);font-size:13px}
.badge{background:var(--accent);color:#000;border-radius:100px;padding:0 8px;font-size:12px;font-weight:700}
.badge:empty{display:none}
.side-foot{margin-top:auto;padding:14px 10px 0;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}

.main{display:flex;flex-direction:column;min-width:0;height:100%}
.top{display:flex;gap:12px;align-items:center;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
.top h2{margin:0;font-size:20px;white-space:nowrap}
.search{max-width:420px;margin-left:auto;border-radius:100px;padding:8px 16px}
.content{flex:1;min-height:0;overflow:auto;padding:14px 16px}

/* kanban */
.board{display:flex;gap:8px;align-items:stretch;height:100%}
.col{background:var(--col);border-radius:var(--radius);flex:1 1 0;min-width:96px;max-height:100%;display:flex;flex-direction:column}
.col.dropover{outline:2px dashed var(--accent);background:var(--accent-soft)}
.col-h{padding:10px 8px 6px;font-weight:700;font-size:13px;line-height:1.25;display:flex;justify-content:space-between;gap:6px}
.col-h .n{color:var(--muted);font-weight:500}
.col-b{padding:2px 6px 8px;overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:40px;flex:1}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;word-break:break-word;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card:hover{border-color:var(--accent)}
.card.dragging{opacity:.4}
.card .nm{font-weight:700}
.card .sub{color:var(--muted);font-size:12px}
.card .nw{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:11px;padding:1px 8px;border-radius:100px;background:#F0F1F4;color:#444;font-weight:600}
.tag.warn{background:#FFE9E7;color:var(--danger)}
.tag.src{background:var(--accent-soft);color:#8A5A00}
.tag.won{background:#DDF5EA;color:var(--ok)}
.tag.lost{background:#FFE9E7;color:var(--danger)}

/* panel boczny leada */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:20}
.dr2{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:minmax(0,1fr);gap:0 28px;height:100%}
@media (max-width:1100px){.dr2{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.dr2>.dcol:first-child{grid-row:1/3}}
.dcol{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto}
.tasklist{max-height:24vh;overflow:auto;flex:0 0 auto}
.dcol .tl{flex:1;min-height:90px;overflow:auto;padding-top:2px}
.dcol>.sec:first-child{margin-top:0}
@media (max-width:900px){.dr-b{overflow:auto}.dr2{grid-template-columns:1fr;grid-template-rows:none;height:auto}.dr2>.dcol:first-child{grid-row:auto}.dcol{overflow:visible}.dcol .tl{overflow:visible}}
.drawer{position:fixed;top:0;right:0;bottom:0;left:208px;background:#fff;z-index:30;box-shadow:-8px 0 30px rgba(0,0,0,.12);overflow:auto;display:flex;flex-direction:column}
.dr-h{padding:10px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:flex-start;position:sticky;top:0;background:#fff;z-index:1}
.dr-h{align-items:center}
.dr-h input{font-size:17px;font-weight:700;border-color:transparent;padding:4px 6px;flex:1 1 160px;min-width:120px}
.acts{display:flex;gap:6px;flex:0 0 auto}
.act{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:100px;background:#fff;cursor:pointer;font-weight:600;font-size:13px;white-space:nowrap}
.act svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.act:hover{border-color:var(--accent);background:var(--accent-soft)}
.act.soon{color:var(--muted)}.act.soon:hover{border-color:var(--line);background:#fff}
@media (max-width:1100px){.act{padding:0 10px;font-size:0;gap:0}.act svg{width:18px;height:18px}}
.dr-h input:hover{border-color:var(--line)}
.dr-b{flex:1;min-height:0;padding:10px 18px 12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.sec{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:12px 0 6px}
.row{display:flex;gap:8px;align-items:center}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:14px}
.tl-i{margin-bottom:8px;position:relative}
.tl-i:before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.tl-i.ev-note:before{border-color:var(--accent);background:var(--accent)}
.tl-i .t{font-size:12px;color:var(--muted)}
.tl-i .x{white-space:pre-wrap}
.task{display:flex;gap:10px;align-items:center;padding:4px 0;border-bottom:1px solid var(--line)}
.task.done{color:var(--muted);text-decoration:line-through}
.task input[type=checkbox]{width:auto}

/* tabele / ustawienia */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px;max-width:900px}
.panel h3{margin:0 0 12px;font-size:16px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stage-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.stage-row input{flex:1}
code{background:#F0F1F4;padding:2px 6px;border-radius:6px;font-size:13px;word-break:break-all}
/* pulpit */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:12px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;border-top:3px solid var(--accent)}
.kpi.bad{border-top-color:var(--danger)}
.kn{font-size:24px;font-weight:800;line-height:1.1}.kl{color:var(--muted);font-size:13px;margin-top:2px}
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 12px}
.dash .panel{max-width:none}.dash .wide{grid-column:1/-1}
.bar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:14px}
.bl{width:110px;flex:0 0 110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt{flex:1;background:#F0F1F4;border-radius:100px;height:10px;overflow:hidden}.bt i{display:block;height:100%;background:var(--accent);border-radius:100px}
.due{max-width:200px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#111;color:#fff;padding:10px 18px;border-radius:100px;z-index:50;font-weight:600}
.empty{color:var(--muted);padding:30px;text-align:center}

@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:8px;gap:2px;max-height:130px}
  .side-logo{display:none}.side-title{display:none}.side-foot{margin:0 0 0 auto;border:0;padding:0}
  .search{max-width:none}.top{flex-wrap:wrap}
}

#dd{display:none}
input[type=date],input[type=time]{min-width:0}
.dd{max-width:150px}.dd+.dd{max-width:100px}
#newForm{max-width:720px}
.drawer{box-shadow:none;border-left:1px solid var(--line)}
@media (max-width:820px){.drawer{left:0}}
#tDate{flex:0 0 150px}#tTime{flex:0 0 100px}
#tTitle{flex:1 1 100%}
#tAdd{margin-left:auto}

/* karta leada: dane / zadania / poczta u góry, historia na samym dole */
.dr-b{display:flex;flex-direction:column}
.dr2{flex:1;min-height:0;height:auto}
.hist{flex:0 0 auto;border-top:2px solid var(--line);margin-top:10px;padding-top:8px;max-height:20vh;min-height:84px;overflow:auto;color:#555}
.hist .tl{border-left:0;margin-left:0;padding-left:0;column-width:300px;column-gap:26px}
.hist .tl-i{break-inside:avoid;border-left:2px solid var(--line);padding-left:12px;margin-bottom:6px;font-size:13px}
.hist .tl-i:before{left:-6px;top:4px;width:8px;height:8px}
.tl-i.ev-mail:before{border-color:var(--blue);background:var(--blue)}
@media (max-width:900px){.hist{max-height:none;overflow:visible}}
.mini-mails{margin-top:8px;overflow:auto;flex:1;min-height:60px}
.mi{display:flex;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.mi:hover{background:#FAFAFB}.mic svg,.tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.mi .ms{display:flex;flex-direction:column;min-width:0}.mi .ms small{color:var(--muted)}
.mi.unread b{color:#0060B0}.mi.unread .mic{color:var(--blue)}
/* znaczniki uwagi na kartach */
.tag svg{margin-right:3px}
.tag.mail{background:#E3F1FF;color:#0060B0}
.tag.due.soon{background:#F0F1F4;color:#555}.tag.due.today{background:#FFE9B8;color:#8A5A00}.tag.due.late{background:#FFE2DF;color:var(--danger)}
.card.att-late{border-left:4px solid var(--danger)}.card.att-mail{border-left:4px solid var(--blue)}
/* poczta */
.mailwrap{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:12px;height:100%}
.mlist,.mview{background:#fff;border:1px solid var(--line);border-radius:var(--radius);min-height:0;display:flex;flex-direction:column}
.mtabs{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;border:0;background:none;padding:10px 6px;cursor:pointer;font-weight:600;border-bottom:3px solid transparent}
.tab.on{border-bottom-color:var(--accent);background:var(--accent-soft)}
.mtools{display:flex;gap:8px;padding:8px}.mtools input{flex:1}
.mitems{overflow:auto;flex:1}
.mrow{padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;border-left:4px solid transparent}
.mrow:hover{background:#FAFAFB}.mrow.sel{background:var(--accent-soft)}.mrow.unread{border-left-color:var(--blue)}
.mrow.unread .who,.mrow.unread .mr2{font-weight:800}
.mr1{display:flex;justify-content:space-between;gap:8px}.who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt{color:var(--muted);font-size:12px;white-space:nowrap}
.mr2,.mr3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mr3{color:var(--muted);font-size:13px}
.mview{overflow:auto;padding:14px 18px}
.mhead h3{margin:0 0 4px}.msub{color:#555;font-size:14px}
.mbody{white-space:pre-wrap;margin-top:14px;border-top:1px solid var(--line);padding-top:12px;line-height:1.5}
.notice{background:#FFF4DB;border:1px solid var(--accent);border-radius:8px;padding:8px 12px;margin:10px 0;font-size:14px}
.cform{display:flex;flex-direction:column;flex:1;min-height:0}.cform .grow{flex:1;display:flex;flex-direction:column}.cform textarea{flex:1;min-height:180px;resize:none}
@media (max-width:900px){.mailwrap{grid-template-columns:1fr;height:auto}.mview{min-height:300px}}

/* kalendarz */
.content:has(.calwrap){display:flex;flex-direction:column;overflow:hidden}
.calbar{margin-bottom:10px;flex:0 0 auto}.calttl{font-size:18px;min-width:170px;text-align:center}
.calwrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;flex:1;min-height:0}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:0}
.dow{background:#F7F8FA;font-size:12px;font-weight:700;color:var(--muted);text-align:center;padding:4px;text-transform:uppercase}
.day{background:#fff;padding:3px 4px;overflow:hidden;cursor:pointer;min-width:0}
.day.other{background:#FAFAFB;color:#aaa}.day.sel{outline:2px solid var(--accent);outline-offset:-2px}.day.dropover{background:var(--accent-soft)}
.day.today .dn{background:var(--accent);color:#000;border-radius:100px;display:inline-block;min-width:22px;text-align:center}
.dn{font-size:12px;font-weight:700;margin-bottom:2px;padding:0 4px}
.chip{font-size:12px;padding:1px 6px;margin-bottom:2px;border-radius:5px;background:#F0F1F4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab}
.chip.late{background:#FFE2DF;color:var(--danger)}.chip.today{background:#FFE9B8;color:#8A5A00}.chip.done{background:#E8F5EE;color:var(--ok);text-decoration:line-through}
.more{font-size:11px;color:var(--muted);padding-left:6px}
.calside{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;overflow:auto;min-height:0}
.calside h3{margin:0 0 8px}.cnew{margin:12px 0 6px;display:flex;flex-direction:column;gap:8px}
@media (max-width:900px){.calwrap{grid-template-columns:1fr}.content:has(.calwrap){overflow:auto}.calgrid{min-height:420px}}

/* historia: jedna lista, od najnowszego na górze */
.hist .tl{columns:1;column-width:auto}
.hist .tl-i{display:flex;gap:10px;align-items:baseline;border-left:0;padding-left:16px;margin-bottom:3px}
.hist .tl-i:before{left:2px;top:7px}
.hist .tl-i .t{flex:0 0 190px;white-space:nowrap}
.hist .tl-i .x{flex:1;min-width:0}

/* wąski ekran: kolumny karty leada jedna pod drugą, bez nakładania */
@media (max-width:900px){.dr2{flex:0 0 auto;height:auto;display:block}.dr2>.dcol{min-height:0;margin-bottom:10px}.hist{margin-top:0}}

.notice.ok{background:#E8F5EE;border-color:var(--ok)}
.notice.bad{background:#FFE9E7;border-color:var(--danger)}
button:disabled{opacity:.6;cursor:wait}

.dr-h .btn.back{height:36px;padding:0 20px;font-size:15px;flex:none;box-shadow:0 1px 4px rgba(255,166,0,.5)}

/* notatki: lista pod polem notatki, najnowsza na górze */
.notes{flex:1;min-height:70px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.note{background:#FFFBEF;border:1px solid #F3E2B3;border-left:4px solid var(--accent);border-radius:8px;padding:7px 10px}
.note .t{font-size:12px;color:var(--muted)}.note .x{white-space:pre-wrap}
@media (max-width:900px){.notes{overflow:visible}}

/* poczta: foldery | lista | wiadomość */
.content:has(.mailwrap){overflow:hidden}
.mailwrap{grid-template-columns:176px minmax(260px,360px) minmax(0,1fr)}
.mfold{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 8px;display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto}
.mfold .btn{margin-bottom:8px;padding:8px 6px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;border-radius:8px;cursor:pointer;font-weight:600;border-left:3px solid transparent}
.frow:hover{background:#f4f5f7}.frow.on{background:var(--accent-soft);border-left-color:var(--accent)}
.msync{margin-top:auto;padding:10px 8px 2px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);word-break:break-word}
.clip svg,.att svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:3px}
.clip{color:var(--muted)}
.msub{margin-top:3px}.msub .tag{margin-right:4px}
.matts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.att{border:1px solid var(--line);border-radius:8px;padding:4px 10px;color:var(--ink);font-size:13px;font-weight:600}.att:hover{border-color:var(--accent);background:var(--accent-soft)}.att small{color:var(--muted);font-weight:400}
.mbody{word-break:break-word}
.cform .grid2 label{margin-bottom:7px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{width:min(860px,100%);max-height:100%;box-shadow:0 20px 60px rgba(0,0,0,.25)}
@media (max-width:900px){.content:has(.mailwrap){overflow:auto}.mailwrap{grid-template-columns:1fr}.mfold{flex-direction:row;flex-wrap:wrap;align-items:center}.mfold .btn{margin:0 6px 0 0}.msync{border:0;margin:0;padding:4px 8px}}

/* okno aplikacji ma stałą wysokość ekranu: przewijają się tylko listy w środku, nigdy cała strona */
@media (min-width:821px){.app{grid-template-rows:minmax(0,1fr)}.main{min-height:0}.side{min-height:0}}
@media (min-width:901px){.mailwrap{grid-template-rows:minmax(0,1fr)}}

/* etykiety: jeden kształt i rozmiar, różni je tylko kolor i nazwa */
.lbl{display:inline-block;height:18px;line-height:18px;padding:0 8px;border-radius:4px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}
.lbls{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.card .meta{margin-top:5px}
.lbls.pick{gap:6px;margin-top:0}
.lbl-b{border:0;background:none;padding:0;cursor:pointer;opacity:.28;border-radius:6px;line-height:0;filter:grayscale(.5)}
.lbl-b .lbl{height:22px;line-height:22px;font-size:11px;padding:0 10px}
.lbl-b:hover{opacity:.6}.lbl-b.on{opacity:1;filter:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;flex:0 0 26px;padding:0;display:inline-block}
.sw.cur{box-shadow:0 0 0 2px var(--ink)}
.pal{display:flex;flex-wrap:wrap;gap:8px}
.lbl-prev{flex:0 0 190px;text-align:left}
.stage-row .sw{margin-right:4px}

/* jeden wygląd przycisków: biała z pomarańczową obwódką; główna akcja i wyjście wypełnione; usuwanie na czerwono */
.btn,.btn.small,.act,.dr-h .btn.small,.row .btn.small,.stage-row .btn.small{height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;white-space:nowrap;flex-shrink:0;border-width:1.5px;border-style:solid}
.btn,.act{border-color:var(--accent);background:#fff;color:var(--ink)}
.btn.small,.dr-h .btn.small,.row .btn.small,.stage-row .btn.small{padding:0 14px;font-size:13px}
.act{padding:0 13px}
.btn:hover,.act:hover{background:var(--accent-soft);border-color:var(--accent-dark)}
.btn.primary{background:var(--accent);color:#000}.btn.primary:hover{background:var(--accent-dark)}
.btn.danger{border-color:var(--danger);color:var(--danger)}.btn.danger:hover{background:#FFE9E7;border-color:var(--danger)}
.btn:disabled{opacity:.4}
.act.soon{border-color:var(--line);color:var(--muted)}.act.soon:hover{background:#fff;border-color:var(--line)}
/* wyjście z ekranu (Wróć, Zamknij, Anuluj): zawsze ten sam, wyraźny przycisk */
.btn.back,.dr-h .btn.back{height:36px;padding:0 20px;font-size:15px;background:var(--accent);color:#000;box-shadow:0 1px 4px rgba(255,166,0,.5)}
.login-box .btn{width:100%;height:42px}
.mfold .btn{width:100%}
@media (max-width:1100px){.act{padding:0 10px}}

/* tablica: etykiety jako cienkie kreski; nazwy pokazują się po najechaniu */
.lbars{display:flex;gap:4px;margin:0 0 5px;position:relative;flex-wrap:wrap}
.lbars>i{width:26px;height:4px;border-radius:2px;display:block}
.lbars .tip{display:none;position:absolute;top:9px;left:0;z-index:6;background:#1B1D21;color:#fff;border-radius:8px;padding:6px 9px;font-size:12px;line-height:1.5;max-width:100%;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.lbars:hover .tip{display:block}
.lbars .tip div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbars .tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
/* lead: wszystkie przyciski etykiet tej samej szerokości i wysokości */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.lchip{height:32px;width:100%;display:flex;align-items:center;gap:8px;padding:0 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;cursor:pointer;overflow:hidden;text-align:left}
.lchip i{width:10px;height:10px;border-radius:50%;background:var(--lc);flex:none}
.lchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lchip:hover{border-color:var(--lc)}
.lchip.on{background:var(--lc);border-color:var(--lc);color:var(--lt)}
.lchip.on i{background:var(--lt)}
/* ustawienia: podgląd etykiety zawsze tej samej szerokości */
.lbl-prev .lbl{display:block;width:100%;height:22px;line-height:22px;text-align:center}
/* przyciski w jednym rzędzie mają tę samą szerokość */
.acts .act{min-width:116px}
@media (max-width:1100px){.acts .act{min-width:0;width:40px}}
.dcol>.row:first-child .btn{min-width:104px}

.dcol>.row:first-child .btn{width:112px;min-width:0;padding:0}

/* telefon i SMS */
.modal-box.narrow{width:min(560px,100%);overflow:auto}
.callstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dots{display:inline-flex;gap:5px}
.dot{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#B5BAC2;background:#fff}
.dot.miss{background:var(--danger);border-color:var(--danger);color:#fff}
.call-now{color:var(--ok)}b.err{color:var(--danger)}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rgrid .btn{width:100%}
.chist{max-height:160px;overflow:auto}
.tag.due svg{margin-right:3px}
button#sSend:disabled{cursor:not-allowed}
.tname{flex:0 0 200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tprev{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tform{margin-top:14px;border-top:1px solid var(--line);padding-top:4px}

.dots.click{cursor:pointer}
.callstrip+.row .btn{flex:1}

.dot.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.dots.click .dot:not(.miss):not(.ok):hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}

/* stracony: czerwony, wypełniony */
.btn.lost{background:var(--danger);border-color:var(--danger);color:#fff}.btn.lost:hover{background:#B42318;border-color:#B42318}

.card.att-today{border-left:4px solid var(--accent)}

/* telefon na dziś: zielony (dzwonek zostaje pomarańczowy) */
.tag.due.call.today{background:#D8F3E3;color:#0B6B47}
.card.att-call{border-left:4px solid var(--ok)}

/* literka opiekuna */
.av{width:20px;height:20px;border-radius:50%;color:#fff;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;letter-spacing:-.02em}
.av.none{background:#D9DCE1;color:#fff}
.av.big{width:30px;height:30px;font-size:13px}
.cfoot{display:flex;align-items:center;gap:6px;margin-top:6px}.cfoot .meta{margin-top:0;justify-content:flex-end;flex:1}
.own{display:flex;align-items:center;gap:6px;flex:none}.own select{width:150px;height:36px}
/* filtry tablicy */
.flt{width:auto;max-width:190px;border-radius:100px;padding-left:14px;flex:none}
.flt.on{border-color:var(--accent);background-color:var(--accent-soft);font-weight:700}
.top .search{margin-left:0}.top h2{margin-right:auto}
/* pasek etapów lejka na górze leada */
.stagebar{display:flex;gap:2px;padding:8px 18px 0;flex:none}
.stg{flex:1 1 0;min-width:0;height:30px;border:0;padding:0 6px 0 16px;background:#E4E7EB;color:#4B5563;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.stg:first-child{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);border-radius:6px 0 0 6px;padding-left:10px}
.stg:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);border-radius:0 6px 6px 0}
.stg:hover{background:#D3D8DE}
.stg.done,.stg.cur{background:var(--ok);color:#fff}.stg.done{opacity:.72}.stg.done:hover,.stg.cur:hover{background:#0E6B4C}
.stagebar.lost .stg.done,.stagebar.lost .stg.cur{background:var(--danger)}
.stg b{font-weight:800}
@media (max-width:900px){.stagebar{overflow:auto}.stg{flex:0 0 auto;padding-right:16px}}

.lgrid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}

/* literka opiekuna: sama litera w kolorze osoby, bez kółka, w lewym dolnym rogu karty */
.av{width:auto;height:auto;min-width:12px;border-radius:0;background:none;font-size:13px;font-weight:800;line-height:1;justify-content:flex-start}
.av.none{background:none;color:#C3C8CF}
.av.big{width:auto;height:auto;font-size:20px;min-width:16px}
.cfoot{align-items:flex-end}
/* pasek etapów w kolorach firmy: przebyte jasnopomarańczowe, obecny pomarańczowy, kolejne szare */
.stg.done{background:#FFD98F;color:#5C3B00;opacity:1}
.stg.cur{background:var(--accent);color:#000}
.stg.done:hover,.stg.cur:hover{background:var(--accent-dark);color:#000}
.stagebar.lost .stg.done{background:#F6B8B2;color:#7A1B13}.stagebar.lost .stg.cur{background:var(--danger);color:#fff}

/* karta w lejku: spokojny dół — literka opiekuna po lewej, po prawej ikony z krótkim tekstem w jednej linii, bez kolorowych plam */
.card{padding:9px 10px 8px}
.card .nm{font-size:13.5px;line-height:1.25}
.card .sub{margin-top:1px}
.cfoot{display:flex;align-items:center;gap:6px;margin-top:8px;min-height:16px}
.inds{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:2px 9px;flex:1;min-width:0}
.ind{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1;color:#8A9099}
.ind svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ind.mail{color:var(--blue)}
.ind.late{color:var(--danger)}
.ind.today{color:#C77700}
.ind.call.today{color:var(--ok)}
.inds .tag{font-size:10.5px;padding:1px 7px}

.card .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .nm{overflow-wrap:break-word;word-break:normal;hyphens:auto}

/* literka opiekuna i termin dokładnie w jednej linii: ten sam rozmiar pisma i ta sama wysokość wiersza */
.cfoot{align-items:center}
.cfoot .av,.cfoot .ind{font-size:13px;line-height:16px;height:16px;display:inline-flex;align-items:center}
.cfoot .ind svg{width:14px;height:14px;display:block}
.cfoot{align-items:flex-end}

/* „do zrobienia teraz”: wyraźna zielona plakietka telefonu; „nie dodzwoniono”: wyszarzona karta na dole kolumny */
.cfoot .ind.now{background:#D8F3E3;color:#0B6B47;border-radius:100px;padding:0 7px}
.cfoot .ind.now:not(.call){background:#FFE9B8;color:#8A5A00}
.card.dead{opacity:.5}.card.dead:hover{opacity:1}
.cfoot .ind.dead{color:#8A9099}

/* strona logowania: logo i nagłówek na środku */
.login-logo{display:block;margin:0 auto 22px}
.login-box h1{text-align:center}

/* kafelki pulpitu są klikalne i otwierają listę tego, co się za nimi kryje */
button.kpi{font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:block}
button.kpi:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.modal-box.wide{width:min(980px,100%);display:flex;flex-direction:column;max-height:100%}
.klist{overflow:auto;margin-top:12px;min-height:0}
.klist input[type=checkbox]{width:auto}

/* nagłówki kolumn mają stałą wysokość (miejsce na dwie linie), więc pierwsza karta zaczyna się wszędzie w tym samym miejscu */
.col-h{height:50px;min-height:50px;box-sizing:border-box;align-items:flex-start;overflow:hidden}
.col-h span:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* nazwiska łamią się tylko na spacjach, bez dzielenia wyrazów łącznikiem */
.card .nm{hyphens:manual;-webkit-hyphens:manual}

/* każda karta ma ten sam układ w pionie: rząd na kreski etykiet (także pusty), nazwisko, koncept, stopka */
.lbars{flex-wrap:nowrap;min-height:4px;height:4px;margin:0 0 6px}
.lbars>i{flex:0 1 26px;min-width:6px}

/* symetria: każda karta ma identyczną wysokość i te same linie w tych samych miejscach */
.card{container-type:inline-size}
.card .nm{line-height:17px;height:34px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .sub{line-height:16px;height:16px;margin-top:2px}
.cfoot{height:16px;min-height:16px;margin-top:8px}
.inds{flex-wrap:nowrap;overflow:hidden;gap:0 8px}
/* na wąskiej karcie z kopertą i terminem naraz termin pokazuje samą kolorową ikonę (data jest w podpowiedzi) */
@container (max-width:128px){.inds:has(.ind.mail) .ind:not(.mail){font-size:0;gap:0;padding:0}}

/* kreski etykiet: trzy w rzędzie, stałe miejsce na dwa rzędy (do sześciu etykiet; przy większej liczbie ostatnie pole to „+N”) */
.lbars{display:grid;grid-template-columns:repeat(3,22px);gap:3px 4px;height:11px;min-height:11px;margin:0 0 6px;align-content:start}
.lbars>i{width:22px;min-width:0;height:4px}
.lbars>b{font-size:9px;line-height:4px;height:4px;color:var(--muted);font-weight:800;overflow:visible;white-space:nowrap}
.lbars .tip{top:14px}

/* wąskie karty: kreski zwężają się równo (zawsze trzy w rzędzie), a termin pokazuje samą ikonę zamiast przycinać się z boku */
.lbars{grid-template-columns:repeat(3,minmax(0,22px))}
.lbars>i{width:auto}
.inds{justify-content:flex-end}
.cfoot .ind{flex:none}
@container (max-width:96px){.inds .ind:not(.mail){font-size:0;gap:0;padding:0}.inds .ind.now{padding:0;background:none}}
.col-h span:first-child{overflow-wrap:anywhere}

/* nagłówek kolumny jest wyraźnie oddzielony od kart: ciemniejsze tło i pozioma pomarańczowa linia */
.col-h{background:#E0E3E8;border-bottom:2px solid var(--accent);border-radius:10px 10px 0 0;padding:9px 10px 6px}
.col-b{padding-top:8px}

/* pasek u góry: wyszukiwarka nie kurczy się do kółka, w razie braku miejsca elementy przechodzą do drugiego rzędu */
.top{flex-wrap:wrap;row-gap:8px}
.top .search{flex:1 1 240px;min-width:200px}

/* ściąga kolorów na dole menu */
.side-foot{margin-top:0}
.legend{margin-top:auto;padding:10px 10px 12px;border-top:1px solid var(--line);font-size:12.5px}
.legend-h{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;padding:0 0 8px;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.legend-h span:last-child{text-transform:none;letter-spacing:0;font-weight:600;color:var(--blue)}
.legend-b.hidden+*{display:none}
.lg{display:flex;align-items:center;gap:8px;height:22px;color:#4B5563}
.lg i{width:4px;height:16px;border-radius:2px;flex:none}
.lg b{font-weight:700}
.lg span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg2{height:auto;margin-top:6px;color:var(--muted);font-size:12px}.lg2 span{white-space:normal}
@media (max-width:820px){.legend{display:none}}

.legend{padding:10px 10px 8px;font-size:13px}
.legend-h{padding-bottom:6px}
.lg{height:21px}.lg b{white-space:nowrap}
/* na niskim ekranie ściąga ustępuje miejsca menu */
@media (max-height:640px){.legend{display:none}}

/* kreski etykiet: zawsze jeden rząd; im więcej etykiet, tym krótsze kreski (decyzja Filipa) */
.lbars{display:flex;flex-wrap:nowrap;gap:3px;height:4px;min-height:4px;margin:0 0 6px}
.lbars>i{flex:0 1 26px;width:auto;min-width:3px;height:4px}
.lbars .tip{top:9px}

.side-logo{margin-bottom:14px}
@media (max-height:700px){.legend{display:none}}

/* wyszukiwarka po wszystkich lejkach: lista wyników pod polem */
.searchw{position:relative;flex:1 1 240px;min-width:200px;max-width:460px}
.searchw .search{width:100%;max-width:none;min-width:0;margin:0}
.search-res{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.16);z-index:70;max-height:60vh;overflow:auto;padding:4px}
.sr{padding:8px 12px;border-radius:8px;cursor:pointer}.sr.on,.sr:hover{background:var(--accent-soft)}
.sr span{color:var(--muted)}.sr small{display:block;color:var(--muted);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr.none{cursor:default;color:var(--muted)}.sr.none:hover{background:none}
/* ponowne zgłoszenie i historia zgłoszeń */
.resub{color:#C77700;font-weight:800}
.subs{max-height:96px;overflow:auto;margin-bottom:4px}
/* notatki: edycja i usuwanie */
.note .t{display:flex;justify-content:space-between;gap:8px}
.nact{display:flex;gap:10px;flex:none}.nact .link{font-size:12px}
.nedit{margin-top:4px}
.tl-i.ev-resub:before{border-color:var(--accent);background:var(--accent)}

/* lead: po lewej status, lejek i dane kontaktowe; w środku zadania i notatki; po prawej etykiety i telefon; na dole poczta, a pod nią zwijana historia */
.mailstrip{flex:0 0 auto;border-top:2px solid var(--line);margin-top:10px;padding-top:8px}
.mailstrip .mini-mails{margin-top:4px;max-height:18vh;min-height:0;flex:none;overflow:auto}
.mailstrip .mi{padding:5px 6px;align-items:center}
.mailstrip .mi .ms{flex-direction:row;align-items:baseline;gap:10px;flex:1;min-width:0}
.mailstrip .mi .ms b{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}
.mailstrip .mi .ms small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist{margin-top:8px;max-height:18vh}
.hist .legend-h{padding-bottom:4px}
.hist.closed{min-height:0;max-height:none;overflow:visible}.hist.closed .tl{display:none}
.dcol>.sec:first-child{margin-top:0}
.dcol>.row:first-child+.sec{margin-top:12px}

/* status leada: trzy równe przyciski zawsze w jednym rzędzie */
.dcol>.row:first-child{flex-wrap:nowrap!important}
.dcol>.row:first-child .btn{flex:1 1 0;width:auto;min-width:0;padding:0 6px}
.dcol>.row:first-child .tag{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* nagłówek leada: na ekranach laptopów akcje jako same ikony, żeby nazwisko było widać w całości */
@media (max-width:1500px){.acts .act{min-width:0;width:44px;padding:0;font-size:0;gap:0}.acts .act svg{width:18px;height:18px}}
.dr-h input#f_name{min-width:200px}

@media (max-width:1500px){.stg{font-size:11px;padding:0 3px 0 13px}.stg:first-child{padding-left:8px}}

/* nagłówek leada: status (Wygrany / Stracony) między opiekunem a akcjami; kosz obok „Wróć” */
.stat{display:flex;align-items:center;gap:6px;flex:none}
.stat .btn{width:96px;padding:0}
.stat .tag{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:24px;line-height:22px;padding:0 10px}
.act.trash{width:44px;min-width:0;padding:0;font-size:0;gap:0;border-color:var(--line);color:#8A9099;flex:none}
.act.trash svg{width:18px;height:18px}
.act.trash:hover{border-color:var(--danger);color:var(--danger);background:#FFE9E7}
.dcol>.sec:first-child{margin-top:0}
@media (max-width:1100px){.stat .btn{width:84px;font-size:12px}}

/* przełącznik tablicy: otwarte / wygrane / stracone */
.seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:100px;overflow:hidden;background:#fff;height:36px;max-width:none;padding:0}
.seg button{border:0;background:none;padding:0 14px;height:100%;cursor:pointer;font:inherit;font-weight:600;font-size:14px;color:var(--ink);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button:hover{background:#f4f5f7}
.seg button.on{background:var(--accent);color:#000}
.seg button[data-st="lost"].on{background:var(--danger);color:#fff}.seg button[data-st="won"].on{background:var(--ok);color:#fff}
.card.closed-lost{border-left:4px solid var(--danger);cursor:pointer}.card.closed-won{border-left:4px solid var(--ok);cursor:pointer}
.cfoot .ind.lostr{color:var(--danger);overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%;font-size:12px}
.cfoot .ind.won{color:var(--ok);font-size:12px}

/* ===== karta leada, wersja „ramki”: szare tło, każda sekcja w osobnej białej ramce z wyraźnym tytułem ===== */
.dr-b{background:var(--bg);padding:10px 14px 12px}
.stagebar{background:var(--bg);padding:10px 14px 0}
.dr2{gap:0 12px}
.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;flex:none}
.box:last-child{margin-bottom:0}
.box.grow{flex:1 1 auto;min-height:150px;display:flex;flex-direction:column}
.box .sec,.box>.row>.sec{font-size:12px;font-weight:800;color:var(--ink);letter-spacing:.07em;text-transform:uppercase;margin:0 0 10px;padding-left:9px;border-left:3px solid var(--accent);line-height:14px}
.box .sec .tag{letter-spacing:0;margin-left:4px}
/* lista danych: nazwa po lewej, wartość po prawej, cienka linia między wierszami */
.dl{display:flex;flex-direction:column}
.dlr{display:flex;align-items:center;gap:8px;margin:0;height:38px;border-bottom:1px solid #EEF0F3;font-size:13px;color:var(--muted);font-weight:500}
.dlr:last-child{border-bottom:0}
.dlr>span{flex:0 0 44%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlr>input,.dlr>select{flex:1;min-width:0;height:32px;margin:0;border-color:transparent;background-color:transparent;padding:0 8px;font-size:14.5px;font-weight:600;color:var(--ink);border-radius:6px}
.dlr>select{padding-right:28px;cursor:pointer}
.dlr>input:hover,.dlr>select:hover{background-color:#F4F5F7}
.dlr>input:focus,.dlr>select:focus{background-color:#fff;border-color:var(--accent)}
.dlr>input::placeholder{color:#C3C8CF;font-weight:400}
.dlr>input:disabled{background:transparent}
/* dół: poczta i historia też jako ramki */
.mailstrip.box{border-top:1px solid var(--line);margin-top:10px;padding-top:12px}
.hist.box{border-top:1px solid var(--line);margin-top:0;padding-top:10px;margin-bottom:0}
.hist.box.closed{padding-bottom:10px}
.hist .legend-h{padding-bottom:0}.hist:not(.closed) .legend-h{padding-bottom:8px}
.hist .legend-h .sec{margin:0}
.box .notes{margin-top:2px}
.callstrip+.row{margin-top:10px}

/* lejek wybiera się na początku paska etapów (tak jak opiekuna w nagłówku); data dodania stoi w tytule ramki z danymi */
.fsel{flex:0 0 auto;width:auto;max-width:190px;height:30px;line-height:18px;border-radius:6px;border:1.5px solid var(--accent);padding:0 28px 0 10px;font-weight:700;font-size:12.5px;margin-right:6px;background-color:#fff;background-position:right 9px center}
.sechead{justify-content:space-between;align-items:flex-start;gap:8px}
.added{font-size:12px;color:var(--muted);white-space:nowrap;line-height:14px}
@media (max-width:900px){.fsel{position:sticky;left:0}}

.fsel{max-width:150px}

/* nagłówek leada: literka, opiekun i lejek obok siebie */
.own select{width:140px}
.own .fsel2{width:170px;font-weight:600}
.hbreak{display:none}
/* na węższych ekranach nagłówek ma dwa rzędy: u góry nazwisko, kosz i Wróć; niżej opiekun, lejek, status i akcje */
@media (max-width:1500px){
  .dr-h{flex-wrap:wrap;row-gap:8px}
  .dr-h input#f_name{order:1;flex:1 1 200px}
  .dr-h .act.trash{order:2}
  .dr-h #drClose{order:3}
  .hbreak{display:block;order:4;flex:0 0 100%;height:0}
  .dr-h .own{order:5}.dr-h .stat{order:6}.dr-h .acts{order:7;margin-left:auto}
}

/* laptop: rząd 1 = nazwisko, Wygrany, Stracony, kosz, Wróć; rząd 2 = opiekun, lejek i pięć równych, podpisanych przycisków akcji */
@media (max-width:1500px){
  .dr-h .stat{order:2}.dr-h .act.trash{order:3}.dr-h #drClose{order:4}
  .hbreak{order:5}
  .dr-h .own{order:6}
  .dr-h .acts{order:7;flex:1 1 auto;min-width:0;margin-left:0;justify-content:flex-end}
}
@media (max-width:1500px) and (min-width:901px){
  .acts .act{flex:1 1 0;width:auto;min-width:0;max-width:150px;padding:0 6px;font-size:13px;gap:6px}
  .acts .act svg{width:16px;height:16px;flex:none}
}

/* ===== karta leada przewija się w całości (pod nieruchomym nagłówkiem i paskiem etapów); żadnych małych okienek z własnym przewijaniem ===== */
.drawer{overflow:hidden}
.dr-b{overflow-y:auto;overflow-x:hidden;display:block}
.dr2{display:grid;height:auto;flex:none;grid-template-rows:auto!important;align-items:start}
.dcol{overflow:visible;min-height:0;display:block}
.box.grow{flex:none;min-height:0;display:block}
.notes{overflow:visible;max-height:none;flex:none;display:flex;flex-direction:column;gap:8px}
.tasklist{max-height:none;overflow:visible}
.subs{max-height:none;overflow:visible}
.chist{max-height:260px}
/* długie listy na dole (poczta, historia) mają wysokość do ok. 10 pozycji; dopiero dłuższe przewijają się w ramce */
.mailstrip .mini-mails{max-height:330px}
.hist,.hist.box{max-height:none;overflow:visible}
.hist .tl{max-height:300px;overflow:auto}
.note .x{font-size:14.5px;line-height:1.45}

.toast{display:flex;align-items:center;gap:12px}
.toast.hidden{display:none!important}
.toast-undo{border:1.5px solid var(--accent);background:var(--accent);color:#000;border-radius:100px;padding:3px 14px;font:inherit;font-weight:700;cursor:pointer}
.task input[type=checkbox]{cursor:pointer;width:16px;height:16px;flex:none}

/* logo w menu na środku */
.side-logo{align-self:center;margin-left:0;margin-right:0}

/* koncepty w ustawieniach i załączniki w oknie pisania */
.cfile{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.cfile small{color:var(--muted)}
.atts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.attlist{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}.attlist:empty{display:none}
.attlist .att .link{margin-left:6px;font-size:15px;color:var(--danger)}
.chk{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--ink);font-weight:500}.chk input{width:16px;height:16px;flex:none}
.chk small{color:var(--muted)}

/* automatyzacje */
.panel.wide9{max-width:1100px}
.autogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px;margin-top:8px}
.autogrid .chk{height:36px;border:1px solid var(--line);border-radius:8px;padding:0 10px;cursor:pointer}
.autogrid .chk{white-space:nowrap;overflow:hidden}.autogrid .chk.off{color:var(--muted)}.autogrid .chk small{color:var(--danger);margin-left:auto;padding-left:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px;max-width:640px}
.tl-i.ev-auto:before{border-color:#7048E8;background:#7048E8}

/* ---------- raporty ---------- */
.repflt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:8px}
.repflt select,.repflt input{width:100%;min-width:0;max-width:none;height:36px;margin:0}
.repnote{margin:0 0 12px}
.kpis.rep{grid-template-columns:repeat(6,minmax(0,1fr))}.kd{color:var(--muted);font-size:12px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.repgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.repgrid .panel{max-width:none;min-width:0}.repgrid .wide{grid-column:1/-1}
.repgrid h3 .sub{font-weight:400;font-size:13px;margin-left:6px}
.rhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.rhead h3{margin-bottom:12px}.rhead .seg{margin-bottom:12px}
.cols{display:flex;align-items:flex-end;gap:2px;height:170px;border-bottom:1px solid var(--line);padding-top:18px}
.colw{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.cbar{width:100%;max-width:44px;flex:0 0 auto;background:var(--accent);border-radius:4px 4px 0 0}
.colw:hover .cbar{background:var(--accent-dark)}
.colv{font-size:12px;font-weight:700;line-height:16px;height:16px}
.colw:hover::after{content:attr(data-tip);position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:12px;padding:3px 8px;border-radius:6px;white-space:nowrap;z-index:5;pointer-events:none}
.colw:first-child:hover::after{left:0;transform:none}.colw:last-child:hover::after{left:auto;right:0;transform:none}
.colx{display:flex;gap:2px;margin-top:4px}.colx span{flex:1 1 0;min-width:0;font-size:11px;color:var(--muted);white-space:nowrap;overflow:visible;text-align:center}
.rbar{display:flex;align-items:center;gap:10px;width:100%;height:32px;border:0;background:none;padding:0 6px;margin:0 -6px;width:calc(100% + 12px);font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:6px}
.rbar:hover{background:#F6F7F9}.rbar.still{cursor:default}.rbar.still:hover{background:none}
.rbar .rl{flex:0 0 38%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.rbar b{flex:0 0 34px;text-align:right;font-size:14px}.rbar .rp{flex:0 0 40px;text-align:right;color:var(--muted);font-size:13px}.rbar .rh{flex:0 0 76px;text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.repgrid .wide .rbar .rl{flex-basis:220px}
.rtab th,.rtab td{white-space:nowrap}.rtab th:not(:first-child),.rtab td:not(:first-child){text-align:right}.rtab td:first-child{white-space:normal}
.rt{display:inline-flex;align-items:center;gap:8px;width:150px;max-width:100%}.rt .bt{flex:1}.rt b{flex:0 0 38px;text-align:right}
.repgrid .panel{overflow-x:auto}
.kpis.rep .kl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1300px){.kpis.rep,.repflt{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){.repgrid{grid-template-columns:minmax(0,1fr)}}