/* ===== Переключатель вариантов (для показа клиенту) ===== */
#vswitch{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:70;background:#1f2d3d;color:#c9d4df;border-radius:22px;padding:5px 6px 5px 14px;display:flex;gap:4px;align-items:center;font:13px "PT Sans",Arial;box-shadow:0 6px 24px rgba(0,0,0,.25)}
#vswitch b{font-weight:400;margin-right:6px;color:#8fa1b3}
#vswitch a{color:#c9d4df;text-decoration:none;padding:5px 12px;border-radius:16px}
#vswitch a:hover{background:#2c3e52}
#vswitch a.on{background:#4c8bf7;color:#fff}
#vswitch .x{color:#6c7f92;padding:4px 8px;cursor:pointer}

/* ===== общий каркас вариантов с боковой панелью ===== */
body[data-v=grigory],body[data-v=amo],body[data-v=new]{display:flex;min-height:100vh}
body[data-v=grigory] #shell,body[data-v=amo] #shell,body[data-v=new] #shell{flex:1;min-width:0;display:flex;flex-direction:column}
#side{display:none}
body[data-v=grigory] #side,body[data-v=amo] #side,body[data-v=new] #side{display:flex;flex-direction:column;flex:none}

/* ===================================================================== */
/* =============== «Как у Григория» (отчёты amoPoint в amoCRM) ========= */
body[data-v=grigory]{--bg:#f5f5f5;background:#f5f5f5}
body[data-v=grigory] header{display:none}
body[data-v=grigory] #side{width:265px;background:#fff;border-right:1px solid #e3e6e8;padding-top:22px}
body[data-v=grigory] #side .ttl{font-weight:700;font-size:15px;letter-spacing:1.5px;color:#313942;padding:0 30px 18px}
body[data-v=grigory] #side .it{padding:17px 30px;border-top:1px solid #eef0f1;color:#313942;cursor:pointer;font-size:15px}
body[data-v=grigory] #side .it:hover{background:#f8f9fa}
body[data-v=grigory] #side .it.on{color:#1375ab;font-weight:700}
body[data-v=grigory] #side .foot{margin-top:auto;padding:18px 30px;border-top:1px solid #eef0f1;color:#8a96a0;font-size:13px}
body[data-v=grigory] #side .foot a{color:#1375ab;cursor:pointer;display:inline-block;margin-top:6px}
body[data-v=grigory] main{padding:14px 26px 60px}
body[data-v=grigory] .bar h2{font-weight:400;font-size:20px}
body[data-v=grigory] .bar .sub{display:none}
body[data-v=grigory] .btn{background:#4c8bf7;border-radius:3px}
body[data-v=grigory] .btn.ghost{background:#4c8bf7;color:#fff;border:0;font-weight:700}
body[data-v=grigory] .gfilt{background:#fff;border:1px solid #d7dbde;border-radius:3px;padding:7px 12px;font:700 13px "PT Sans",Arial;color:#313942;cursor:pointer;display:inline-flex;gap:6px;align-items:center;margin:4px 0 12px}
body[data-v=grigory] .gfilt:hover{border-color:#b8bfc5}
body[data-v=grigory] .filters{display:none;margin-bottom:12px}
body[data-v=grigory].filt-open .filters{display:flex}
body[data-v=grigory] .kpis{display:none}
body[data-v=grigory] .tablewrap{border:1px solid #e3e6e8;border-radius:0}
body[data-v=grigory] th{text-transform:uppercase;font-size:11.5px;letter-spacing:.6px;color:#8e979e;text-align:center;white-space:normal;vertical-align:middle;padding:14px 10px;background:#fff;border-right:1px solid #eceef0;min-width:70px}
body[data-v=grigory] th.num{text-align:center}
body[data-v=grigory] tr.tot td{background:#fff;color:#313942;top:0;position:static;border-bottom:1px solid #e3e6e8;font-size:12.5px}
body[data-v=grigory] td{padding:16px 10px;border-right:1px solid #eceef0;border-bottom:1px solid #eceef0;white-space:normal;font-size:13.5px}
body[data-v=grigory] td .clip{white-space:normal;max-width:170px}
body[data-v=grigory] td a{color:#8a9aaa;text-decoration:none;border-bottom:1px dashed #a9b6c2}
body[data-v=grigory] tbody tr:hover td{background:#fafbfc}
body[data-v=grigory] .pill{background:none!important;font-weight:400;padding:0;color:#313942!important}
body[data-v=grigory] .pager button{min-width:34px;height:34px;border-radius:3px}
body[data-v=grigory] .drop{border-radius:0}

/* ===================================================================== */
/* ===================== «Как в amoCRM» (список сделок) ================= */
body[data-v=amo]{background:#fff}
body[data-v=amo] #side{width:66px;background:#1d2a39;color:#9fb0c2;align-items:stretch;padding-top:10px}
body[data-v=amo] #side .logo2{width:38px;height:38px;border-radius:50%;background:#4c8bf7;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:17px}
body[data-v=amo] #side .it{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;font-size:10.5px;cursor:pointer;text-align:center;line-height:1.15;color:#a9b8c7}
body[data-v=amo] #side .it svg{width:26px;height:26px;stroke:currentColor}
body[data-v=amo] #side .it:hover{color:#fff}
body[data-v=amo] #side .it.on{color:#fff;background:#2b3a4c}
body[data-v=amo] header{display:none}
body[data-v=amo] #ahead{display:flex;align-items:center;gap:18px;height:64px;padding:0 24px;border-bottom:1px solid #e5e7e9;background:#fff;position:sticky;top:0;z-index:20}
body[data-v=amo] #ahead .t{font-weight:700;font-size:15px;letter-spacing:.8px;text-transform:uppercase;color:#2a3540;white-space:nowrap}
body[data-v=amo] #ahead .srch{flex:1;max-width:520px;position:relative}
body[data-v=amo] #ahead .srch input{width:100%;height:36px;border:0;border-bottom:1px solid #dfe3e6;font:14px "PT Sans",Arial;padding:0 8px 0 30px;outline:none;color:#313942}
body[data-v=amo] #ahead .srch input:focus{border-bottom-color:#4c8bf7}
body[data-v=amo] #ahead .srch svg{position:absolute;left:4px;top:9px;color:#9aa6b2}
body[data-v=amo] #ahead .sp{flex:1}
body[data-v=amo] #ahead .stamp2{color:#8a96a0;font-size:13px;white-space:nowrap}
body[data-v=amo] #ahead .btn{text-transform:uppercase;letter-spacing:.4px;border-radius:3px;padding:9px 16px}
body[data-v=amo] main{padding:0 0 60px}
body[data-v=amo] .filters{display:none;position:absolute;left:96px;top:64px;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.18);border-radius:0 0 4px 4px;max-width:1100px}
body[data-v=amo].filt-open .filters{display:flex}
body[data-v=amo] .bar{padding:10px 24px 0;margin:6px 0 4px}
body[data-v=amo] .bar h2{display:none}
body[data-v=amo] .kpis{padding:0 24px;gap:22px;margin-bottom:8px}
body[data-v=amo] .kpi{border:0;padding:0;min-width:0;background:none}
body[data-v=amo] .kpi .l{text-transform:none;letter-spacing:0;font-size:13px;display:inline}
body[data-v=amo] .kpi .l:after{content:": "}
body[data-v=amo] .kpi .v{display:inline;font-size:14px;font-weight:700}
body[data-v=amo] .tablewrap{border:0;border-top:1px solid #e5e7e9;border-radius:0}
body[data-v=amo] th{background:#fff;text-transform:uppercase;font-size:11px;color:#97a2ac;letter-spacing:.4px;font-weight:700;padding:12px 12px}
body[data-v=amo] tr.tot td{background:#f7f8f9;color:#5b6670;top:38px;border-bottom:1px solid #e5e7e9}
body[data-v=amo] td{padding:11px 12px;border-bottom:1px solid #eef0f2;font-size:14px}
body[data-v=amo] td a{color:#1f6fb2}
body[data-v=amo] tbody tr:hover td{background:#f2f7fd}
body[data-v=amo] td:first-child,body[data-v=amo] th:first-child{padding-left:24px}
body[data-v=amo] .pager{padding:0 24px}
body[data-v=amo] .files,body[data-v=amo] .drop,body[data-v=amo] .actbar,body[data-v=amo] .hint{margin-left:24px;margin-right:24px}
body[data-v=amo] .btn.ghost{background:#fff}

/* ===================================================================== */
/* ======================= Новый вариант (по задачам) ================== */
body[data-v=new]{background:#f4f6f8}
body[data-v=new] header{display:none}
body[data-v=new] #side{width:232px;background:#16212e;color:#c2cedb;padding:18px 12px;gap:2px}
body[data-v=new] #side .brand{color:#fff;font-weight:700;font-size:18px;padding:0 10px 4px}
body[data-v=new] #side .brand span{display:block;font-weight:400;font-size:12px;color:#7f93a8}
body[data-v=new] #side .grp{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:#6c8197;padding:18px 10px 6px}
body[data-v=new] #side .it{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14.5px;color:#c2cedb}
body[data-v=new] #side .it svg{width:18px;height:18px;flex:none;stroke:currentColor;opacity:.85}
body[data-v=new] #side .it:hover{background:#1f2d3d;color:#fff}
body[data-v=new] #side .it.on{background:#4c8bf7;color:#fff}
body[data-v=new] #side .it .cnt{margin-left:auto;background:#e5484d;color:#fff;border-radius:10px;font-size:11.5px;padding:0 7px;font-weight:700}
body[data-v=new] #side .foot{margin-top:auto;font-size:12.5px;color:#7f93a8;padding:10px}
body[data-v=new] #side .foot b{color:#c2cedb;font-weight:400}
body[data-v=new] #side .foot a{display:inline-block;margin-top:8px;color:#8fb7ff;cursor:pointer}
body[data-v=new] #ntop{display:flex;align-items:center;gap:14px;padding:18px 28px 6px;flex-wrap:wrap}
body[data-v=new] #ntop h1{font-size:24px;margin:0 8px 0 0;font-weight:700;color:#1d2733}
body[data-v=new] .seg{display:inline-flex;background:#e7ebef;border-radius:9px;padding:3px;gap:2px}
body[data-v=new] .seg a{padding:6px 12px;border-radius:7px;font-size:13.5px;color:#4b5866;cursor:pointer;white-space:nowrap;text-decoration:none}
body[data-v=new] .seg a:hover{color:#1d2733}
body[data-v=new] .seg a.on{background:#fff;color:#1d2733;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.08)}
body[data-v=new] .seg a .c{color:#8a96a0;font-weight:400;margin-left:4px}
body[data-v=new] .seg a.late.on{color:#d93a3f}
body[data-v=new] #ntop .sp{flex:1}
body[data-v=new] #ntop .srch{position:relative}
body[data-v=new] #ntop .srch input{height:36px;border:1px solid #d8dee4;border-radius:9px;padding:0 12px 0 32px;width:240px;font:14px "PT Sans",Arial;background:#fff}
body[data-v=new] #ntop .srch svg{position:absolute;left:10px;top:10px;color:#8a96a0}
body[data-v=new] .fbtn{height:36px;border:1px solid #d8dee4;background:#fff;border-radius:9px;padding:0 14px;font:14px "PT Sans",Arial;cursor:pointer;display:inline-flex;align-items:center;gap:8px;color:#1d2733}
body[data-v=new] .fbtn .n{background:#4c8bf7;color:#fff;border-radius:9px;font-size:12px;padding:0 7px;font-weight:700}
body[data-v=new] #chips{display:flex;gap:8px;flex-wrap:wrap;padding:4px 28px 0}
body[data-v=new] #chips span{background:#e3edff;color:#2457b8;border-radius:14px;padding:3px 6px 3px 12px;font-size:13px;display:inline-flex;gap:6px;align-items:center}
body[data-v=new] #chips span i{font-style:normal;cursor:pointer;color:#6b8fd6;padding:0 5px;border-radius:8px}
body[data-v=new] #chips span i:hover{background:#c9dbff;color:#2457b8}
body[data-v=new] main{padding:10px 28px 70px}
body[data-v=new] .filters{position:fixed;right:0;top:0;bottom:0;width:360px;z-index:50;flex-direction:column;flex-wrap:nowrap;align-items:stretch;border-radius:0;border:0;box-shadow:-10px 0 40px rgba(0,0,0,.15);padding:22px;overflow:auto;transform:translateX(105%);transition:transform .2s;display:flex}
body[data-v=new].filt-open .filters{transform:none}
body[data-v=new] .filters:before{content:"Фильтры";font-size:20px;font-weight:700;margin-bottom:6px}
body[data-v=new] .filters .f{min-width:0}
body[data-v=new] .filters .f.period{flex-direction:row}
body[data-v=new] .bar h2{display:none}
body[data-v=new] .bar .sub{font-size:13.5px}
body[data-v=new] .kpi{border:0;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);padding:14px 18px;min-width:190px}
body[data-v=new] .tablewrap{border:0;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06)}
body[data-v=new] th{background:#fff;color:#6b7785;font-size:12.5px}
body[data-v=new] tr.tot td{background:#f7f9fb;color:#1d2733}
body[data-v=new] .btn{border-radius:9px}
body[data-v=new] .btn.ghost{border-radius:9px}
body[data-v=new] .drop{border-radius:14px}
/* обзор */
.ovr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ovr .card{background:#fff;border-radius:12px;box-shadow:0 1px 2px rgba(16,24,40,.06);padding:16px 18px}
.ovr .card .l{color:#6b7785;font-size:13px}
.ovr .card .v{font-size:26px;font-weight:700;margin-top:4px;color:#1d2733;font-variant-numeric:tabular-nums;white-space:nowrap}
.ovr .card .s{color:#8a96a0;font-size:12.5px;margin-top:2px}
.ovr .card.red .v{color:#d93a3f} .ovr .card.green .v{color:#2e9b55}
.ovr .card.cta{background:#4c8bf7;color:#fff;cursor:pointer}
.ovr .card.cta .l,.ovr .card.cta .s{color:#dbe7ff} .ovr .card.cta .v{color:#fff;font-size:20px}
.ovr .wide{grid-column:span 2} .ovr .full{grid-column:1/-1}
.ovr h3{margin:0 0 10px;font-size:15px;color:#1d2733}
.ovr .mini{width:100%;border-collapse:collapse;font-size:13.5px}
.ovr .mini td{padding:7px 4px;border-bottom:1px solid #eef1f4;white-space:nowrap}
.ovr .mini td.r{text-align:right;font-variant-numeric:tabular-nums}
.ovr .mini tr{cursor:pointer} .ovr .mini tr:hover td{background:#f7f9fb}
.ovr .lg{display:flex;gap:16px;font-size:12.5px;color:#6b7785;margin:-4px 0 8px}
.ovr .lg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

body[data-v=new] #side .foot .vs{margin-top:14px;font-size:11.5px;line-height:1.6;color:#5f7489}
body[data-v=new] #side .foot .vs a{display:inline;margin:0;color:#7f93a8}
body[data-v=new] #side .foot .vs a.on{color:#c2cedb;font-weight:700}
body[data-v=new] .seg.wrap{flex-wrap:wrap;max-width:100%}
body[data-v=new] .seg .lbl{color:#6b7785;font-size:13px;padding:6px 6px 6px 8px}
body[data-v=new] .fcard{border:0;border-left:4px solid #4c8bf7;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.08)}
body[data-v=new] .fcard.bad{border-left-color:#d98a00}
body[data-v=new] .fcard.red{border-left-color:#d64545;background:#fff8f7}
body[data-v=new] .fcard{padding:11px 14px}
body[data-v=new] .drop.compact{background:#fff}
body[data-v=new] .actbar{position:sticky;bottom:0;background:#f4f6f8;padding:10px 0}
body[data-v=new] #side{position:sticky;top:0;height:100vh;overflow:auto}
body[data-v=new] #side .foot{line-height:1.45}
body[data-v=new] #side .foot .vs{margin-top:10px}
body[data-v=new] tr[data-st] td:last-child .clip{white-space:normal;max-width:300px;min-width:200px}
body[data-v=new] tr[data-st] td:nth-child(5) .clip{max-width:190px}
@media (max-width:1500px){
  body[data-v=new] #side{width:200px}
  body[data-v=new] main{padding:8px 18px 60px} body[data-v=new] #ntop{padding:14px 18px 4px} body[data-v=new] #chips{padding:4px 18px 0}
  body[data-v=new] .bar .sub{display:none}
  body[data-v=new] td,body[data-v=new] th{padding:7px 8px;font-size:13px}
  body[data-v=new] td .clip{max-width:200px}
  body[data-v=new] .kpi{min-width:150px;padding:10px 14px} body[data-v=new] .kpi .v{font-size:18px}
  body[data-v=new] #ntop .srch input{width:190px}
}
