:root{ --bg:#f4f6f3; --panel:#ffffff; --panel2:#f7f9f6; --line:#e3e8e1; --line2:#eef2ec; --text:#1f2a24; --muted:#66716a; --muted2:#9aa49d; --accent:#3f7f5f; --accent-h:#336a4e; --accent-bg:#eaf2ed; /* доход — спокойный шалфейный */ --ok:#3d7d5c; --ok-bg:#ecf4ef; --ok-line:#c6dcd0; /* расход — приглушённый терракотовый */ --bad:#a8605a; --bad-bg:#f9efee; --bad-line:#e6cfcc; /* мастеру — приглушённый лиловый */ --purple:#76689c; --purple-bg:#f1eef7; --purple-line:#d6cfe6; /* списание — серо-синий */ --slate:#5a7383; --slate-bg:#eef3f5; --slate-line:#cfdce2; --warn:#a8722f; --gold:#93702a; --gold-bg:#faf4e7; --r:12px; --r-lg:18px; --sh:0 1px 2px rgba(30,45,35,.04); --sh-lg:0 6px 24px rgba(30,50,38,.09); } /* тема задаётся вручную через data-theme, по умолчанию — как в системе */ :root[data-theme="light"]{ --bg:#f4f6f3; --panel:#ffffff; --panel2:#f7f9f6; --line:#e3e8e1; --line2:#eef2ec; --text:#1f2a24; --muted:#66716a; --muted2:#9aa49d; --accent:#3f7f5f; --accent-h:#336a4e; --accent-bg:#eaf2ed; /* доход — спокойный шалфейный */ --ok:#3d7d5c; --ok-bg:#ecf4ef; --ok-line:#c6dcd0; /* расход — приглушённый терракотовый */ --bad:#a8605a; --bad-bg:#f9efee; --bad-line:#e6cfcc; /* мастеру — приглушённый лиловый */ --purple:#76689c; --purple-bg:#f1eef7; --purple-line:#d6cfe6; /* списание — серо-синий */ --slate:#5a7383; --slate-bg:#eef3f5; --slate-line:#cfdce2; --warn:#a8722f; --gold:#93702a; --gold-bg:#faf4e7; --sh:0 1px 2px rgba(30,45,35,.04); --sh-lg:0 6px 24px rgba(30,50,38,.09); } :root[data-theme="dark"]{ --bg:#1c211f; --panel:#232a27; --panel2:#28302c; --line:#39433d; --line2:#303833; --bg:#1c211f; --panel:#232a27; --panel2:#28302c; --line:#39433d; --line2:#303833; --text:#ccd4cf; --muted:#8e9a94; --muted2:#6c7972; --accent:#6a9c81; --accent-h:#7cab92; --accent-bg:#25322c; --ok:#79ab90; --ok-bg:#232f29; --ok-line:#3a4f44; --bad:#b98c88; --bad-bg:#2e2726; --bad-line:#4e403e; --purple:#9a90b5; --purple-bg:#292633; --purple-line:#3f3a4e; --slate:#8899a2; --slate-bg:#242c30; --slate-line:#39464d; --warn:#b8945f; --gold:#a8935e; --gold-bg:#2b2820; --sh:0 1px 2px rgba(0,0,0,.2); --sh-lg:0 6px 22px rgba(0,0,0,.3); } /* автоматически: ночная тема, если вручную не выбрана */ @media (prefers-color-scheme: dark){ :root:not([data-theme]), :root[data-theme="auto"]{ --bg:#1c211f; --panel:#232a27; --panel2:#28302c; --line:#39433d; --line2:#303833; --text:#ccd4cf; --muted:#8e9a94; --muted2:#6c7972; --accent:#6a9c81; --accent-h:#7cab92; --accent-bg:#25322c; --ok:#79ab90; --ok-bg:#232f29; --ok-line:#3a4f44; --bad:#b98c88; --bad-bg:#2e2726; --bad-line:#4e403e; --purple:#9a90b5; --purple-bg:#292633; --purple-line:#3f3a4e; --slate:#8899a2; --slate-bg:#242c30; --slate-line:#39464d; --warn:#b8945f; --gold:#a8935e; --gold-bg:#2b2820; --sh:0 1px 2px rgba(0,0,0,.2); --sh-lg:0 6px 22px rgba(0,0,0,.3); } } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased} .wrap{max-width:1080px;margin:0 auto;padding:16px 16px 96px} /* верхняя часть закреплена — не уезжает при прокрутке */ .topbar{ position:sticky;top:0;z-index:50; background:var(--bg); padding:10px 0 0; margin:-10px 0 14px; } @supports (backdrop-filter: blur(8px)){ .topbar{background:color-mix(in srgb, var(--bg) 88%, transparent);backdrop-filter:blur(10px)} } header.top{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:nowrap;margin-bottom:10px;padding:10px 14px;background:var(--panel); border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)} .brand{display:flex;align-items:center;gap:12px;min-width:0} .logo{width:36px;height:36px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-h));color:#fff; box-shadow:0 3px 10px rgba(15,122,71,.28)} @media (prefers-color-scheme: dark){.logo{color:#0a100c;box-shadow:0 3px 12px rgba(62,207,142,.22)}} .brand-txt{min-width:0} header.top h1{font-size:17px;margin:0;font-weight:700;letter-spacing:-.3px;line-height:1.2} header.top .sub{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:5px} .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;flex:0 0 auto} .dot.bad{background:var(--bad)} .topright{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex:0 0 auto} /* все элементы шапки одной высоты */ .topright > *{height:40px;display:flex;align-items:center} .topright > button, .topright .srvchip{ padding:0 13px;border-radius:11px;font-size:13px;font-weight:600; border:1.5px solid var(--line);background:var(--panel2);color:var(--text); cursor:pointer;font-family:inherit;transition:all .14s;white-space:nowrap} .topright > button:hover, .topright .srvchip:hover{ border-color:var(--accent);background:var(--accent-bg)} @media (max-width:640px){ .topright > *{height:36px} .topright > button, .topright .srvchip{padding:0 10px;font-size:12px} } /* адрес сервера */ .srvchip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;cursor:pointer; background:var(--panel2);border:1px solid var(--line);border-radius:12px; font-family:inherit;color:var(--text);transition:border-color .13s,background .13s} .srvchip:hover{border-color:var(--accent);background:var(--accent-bg)} .srv-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto} .srv-dot.off{background:var(--bad)} .srv-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0} .srv-txt b{font-size:13px;font-weight:640;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:170px} .srv-txt i{font-size:11px;font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums} .srv-ico{font-size:14px;color:var(--muted);margin-left:2px} /* пользователь */ .avatar{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center; font-size:11.5px;font-weight:750;letter-spacing:.2px;color:#fff; background:linear-gradient(150deg,#0f7a47,#0b5e36)} .avatar.accountant{background:linear-gradient(150deg,#1d6fb8,#155a96)} .avatar.manager{background:linear-gradient(150deg,#a97a12,#8a6110)} .uc-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25} .uc-txt b{font-size:13px;font-weight:640;white-space:nowrap} .uc-txt i{font-size:11px;font-style:normal;color:var(--muted);white-space:nowrap} nav.tabs{display:flex;gap:3px;background:var(--panel);border:1px solid var(--line);padding:4px; border-radius:12px;margin-bottom:14px;overflow-x:auto;box-shadow:var(--sh); scrollbar-width:none;-ms-overflow-style:none} nav.tabs::-webkit-scrollbar{display:none} nav.tabs button{ flex:1 1 auto;white-space:nowrap;cursor:pointer; padding:9px 13px;border-radius:9px; font-size:13.5px;font-weight:600; font-family:inherit;transition:all .14s;letter-spacing:-.1px; border:1.5px solid transparent; background:transparent;color:var(--muted); } /* у каждой вкладки свой цвет — видно, что они разные */ nav.tabs button[data-tab=vvod]:hover:not(.on){color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)} nav.tabs button[data-tab=hist]:hover:not(.on){color:var(--slate);background:var(--slate-bg);border-color:var(--slate-line)} nav.tabs button[data-tab=dyn]:hover:not(.on){color:var(--accent);background:var(--accent-bg);border-color:var(--accent)} nav.tabs button[data-tab=schet]:hover:not(.on){color:var(--purple);background:var(--purple-bg);border-color:var(--purple-line)} nav.tabs button.on{border-color:transparent;color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.14)} nav.tabs button.on[data-tab=vvod]{background:var(--ok)} nav.tabs button.on[data-tab=hist]{background:var(--slate)} nav.tabs button.on[data-tab=dyn]{background:var(--accent)} nav.tabs button.on[data-tab=schet]{background:var(--purple)} @media (prefers-color-scheme: dark){ nav.tabs button.on{color:#0d1512} } .tab{display:none} .tab.on{display:block} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:18px;margin-bottom:14px;box-shadow:var(--sh)} .card h2{font-size:17px;margin:0 0 16px;font-weight:690;letter-spacing:-.3px; display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .card h3{font-size:13px;margin:0 0 10px;font-weight:620;color:var(--muted); text-transform:uppercase;letter-spacing:.4px} .hint{font-weight:400;color:var(--muted);font-size:12.5px;letter-spacing:0} .seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:13px; padding:4px;margin-bottom:18px;gap:3px;flex-wrap:wrap} .seg button{border:0;background:transparent;padding:10px 18px;border-radius:10px;cursor:pointer; font-family:inherit;font-size:14.5px;font-weight:600;color:var(--muted);transition:all .14s} .seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(12,40,24,.12);font-weight:680} /* типы записей — каждый своим цветом, видно сразу */ .seg button[data-type=in]{color:var(--ok)} .seg button[data-type=in].on{background:var(--ok);color:#fff;box-shadow:0 2px 10px rgba(26,127,82,.28)} .seg button[data-type=out]{color:var(--bad)} .seg button[data-type=out].on{background:var(--bad);color:#fff;box-shadow:0 2px 10px rgba(179,66,58,.26)} .seg button[data-type=payout]{color:var(--purple)} .seg button[data-type=payout].on{background:var(--purple);color:#fff;box-shadow:0 2px 10px rgba(107,90,168,.26)} /* новая запись — крупные кнопки-плитки */ .typegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px;align-items:stretch;grid-auto-rows:1fr} .typegrid button{ padding:11px 6px;min-width:0;overflow:hidden;border:1.5px solid var(--line);border-radius:12px;background:var(--panel); font-family:inherit;font-size:13.5px;font-weight:640;cursor:pointer;transition:all .14s; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; color:var(--muted);min-height:0;line-height:1.25; height:100%;align-self:stretch} .typegrid button .ico{font-size:16px;line-height:1} .typegrid button > span:not(.ico):not(.sub2){ display:block;width:100%;text-align:center; font-size:12px;line-height:1.2; overflow:hidden;text-overflow:ellipsis; } .typegrid button .sub2{font-size:10.5px;font-weight:500;opacity:.7;display:none} .typegrid button:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)} .typegrid button[data-type=in]{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)} .typegrid button[data-type=in].on{background:var(--ok);color:#fff;border-color:var(--ok)} .typegrid button[data-type=out]{border-color:var(--bad-line);color:var(--bad);background:var(--bad-bg)} .typegrid button[data-type=out].on{background:var(--bad);color:#fff;border-color:var(--bad)} .typegrid button[data-type=payout]{border-color:var(--slate-line);color:var(--slate);background:var(--slate-bg)} .typegrid button[data-type=payout].on{background:var(--slate);color:#fff;border-color:var(--slate)} .typegrid button[data-type=acc]{border-color:var(--purple-line);color:var(--purple);background:var(--purple-bg)} .typegrid button[data-type=acc]:hover{background:var(--purple);color:#fff;border-color:var(--purple)} .typegrid button[data-type=inv]{border-color:var(--slate-line);color:var(--slate);background:var(--slate-bg)} .typegrid button[data-type=inv].on{background:var(--slate);color:#fff;border-color:var(--slate)} .typegrid button[data-type=pay]{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)} .typegrid button[data-type=pay].on{background:var(--ok);color:#fff;border-color:var(--ok)} .typegrid button[data-type=sup2]{border-color:var(--slate-line);color:var(--slate);background:var(--slate-bg)} .typegrid button[data-type=sup2]:hover{background:var(--slate);color:#fff;border-color:var(--slate)} .typegrid button[data-type=wo]{border-color:var(--line);color:var(--muted);background:var(--panel2)} .typegrid button[data-type=wo].on{background:var(--muted);color:#fff;border-color:var(--muted)} @media (min-width:700px){ .typegrid{gap:10px} .typegrid button{padding:14px 12px;font-size:14.5px;border-radius:13px} .typegrid button .ico{font-size:19px} .typegrid button .sub2{display:block;font-size:11px} } /* история: цветные суммы по смыслу */ td.num.in-sum{color:var(--ok);font-weight:620} td.num.co-sum{color:var(--muted)} td.num.mf-sum{color:var(--purple);font-weight:620} td.num.pr-sum{color:var(--text);font-weight:660} td.num.out-sum{color:var(--bad);font-weight:620} /* суммы в форме */ .preview .item .v.ok{color:var(--ok)} .preview .item .v.bad{color:var(--bad)} .preview .item .v.purple{color:var(--purple)} /* быстрые фильтры в истории */ .quickfilters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .quickfilters button{ padding:9px 15px;border:1.5px solid var(--line);background:var(--panel);border-radius:11px; font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .13s;color:var(--muted)} .quickfilters button:hover{border-color:var(--current,var(--accent))} .quickfilters button.in{border-color:var(--ok-line);color:var(--ok)} .quickfilters button.in.on{background:var(--ok);color:#fff;border-color:var(--ok)} .quickfilters button.out{border-color:var(--bad-line);color:var(--bad)} .quickfilters button.out.on{background:var(--bad);color:#fff;border-color:var(--bad)} .quickfilters button.payout{border-color:var(--purple-line);color:var(--purple)} .quickfilters button.payout.on{background:var(--purple);color:#fff;border-color:var(--purple)} .quickfilters button.all.on{background:var(--accent);color:#fff;border-color:var(--accent)} /* бейджи типов */ .pill-t.in{background:var(--ok-bg);color:var(--ok)} .pill-t.out{background:var(--bad-bg);color:var(--bad)} .pill-t.payout{background:var(--purple-bg);color:var(--purple)} /* балансы мастеров */ .bal-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap} .bal-row:last-child{border-bottom:0} .bal-row .name{flex:1 1 140px;font-weight:640;font-size:14.5px} .bal-row .num{font-variant-numeric:tabular-nums;font-size:14px;min-width:96px;text-align:right} .bal-row .num.acc{color:var(--purple)} .bal-row .num.paid{color:var(--slate)} .bal-row .num.left{font-weight:700;font-size:15.5px} .bal-row .num.left.pos{color:var(--ok)} .bal-row .num.left.zero{color:var(--muted)} .bal-row .lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;font-weight:600} /* карточка разработчика */ .devshop{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap} .devshop:last-child{border-bottom:0} .devshop .nm{flex:1 1 160px} .devshop .nm b{font-size:15px} .devshop .nm i{display:block;font-size:11.5px;color:var(--muted);font-style:normal} .devshop .m{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums} .devshop .m b{color:var(--text);font-size:13.5px} .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px} .grid .full{grid-column:1/-1} label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.1px} input,select{font-family:inherit;font-size:16px;color:var(--text);padding:11px 13px; border:1px solid var(--line);border-radius:10px;background:var(--panel);width:100%; outline:none;transition:border-color .13s,box-shadow .13s;appearance:none} select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 11px center;padding-right:30px} input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.14)} input[type=number]{-moz-appearance:textfield} input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} input.big{font-size:26px;font-weight:700;letter-spacing:-.8px;padding:12px 14px;font-variant-numeric:tabular-nums} /* приход — зелёным: это деньги, которые пришли */ #f-price{ color:var(--ok)!important; font-weight:750; } #f-price::placeholder{color:var(--muted2);font-weight:600} #f-price:focus{color:var(--ok)!important} .checks{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} /* чекбокс: понятная рамка с галочкой, без системного квадратика */ .checks label.chk{flex-direction:row;align-items:flex-start;gap:11px;font-weight:550;font-size:14.5px; color:var(--text);cursor:pointer;padding:12px 14px;border:1.5px solid var(--line); border-radius:12px;background:var(--panel);transition:all .14s;user-select:none;flex:1 1 210px} .checks label.chk:hover{border-color:var(--accent);background:var(--accent-bg)} .checks label.chk:has(input:checked){border-color:var(--accent);background:var(--accent-bg);font-weight:640} .checks label.chk input{position:absolute;opacity:0;width:0;height:0;margin:0} .chk-box{flex:0 0 auto;width:22px;height:22px;border:2px solid var(--line); border-radius:6px;background:var(--bg);position:relative;transition:all .14s;margin-top:1px} .checks label.chk:hover .chk-box{border-color:var(--accent)} .checks label.chk input:checked + .chk-box{background:var(--accent);border-color:var(--accent)} .checks label.chk input:checked + .chk-box::after{ content:"";position:absolute;left:6px;top:2px;width:6px;height:11px; border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)} .checks label.chk input:disabled ~ .chk-txt{opacity:.45} .chk-txt{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0} .chk-txt b{font-weight:700;font-size:14.5px} .chk-txt i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:500} .checks label.chk input:checked ~ .chk-txt b{color:var(--accent)} .checks label.chk input:checked ~ .chk-txt i{color:var(--accent);opacity:.85} /* живой расчёт процента мастера */ .pct-live{grid-column:1/-1;padding:11px 14px;border-radius:11px; background:var(--accent-bg);border:1px solid var(--accent);font-size:13.5px;line-height:1.55} .pct-live .pl-row{display:flex;justify-content:space-between;gap:12px} .pct-live .pl-row b{font-variant-numeric:tabular-nums} .pct-live .pl-hint{display:block;font-size:11.5px;color:var(--muted);font-weight:500;margin-top:3px} .pct-live.zero{background:var(--panel2);border-color:var(--line)} input[type=date]:disabled{opacity:.7;cursor:not-allowed} .preview{margin-top:18px;padding:16px 18px;background:var(--panel2);border:1px solid var(--line); border-radius:14px;display:flex;gap:28px;flex-wrap:wrap} .preview .item{display:flex;flex-direction:column;gap:3px;min-width:104px} .preview .item .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:650} .preview .item .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px} .preview .item .v.ok{color:var(--ok)} .preview .item .v.bad{color:var(--bad)} button.primary{margin-top:18px;width:100%;padding:16px;border:0;border-radius:14px;cursor:pointer; background:var(--accent);color:#fff;font-family:inherit;font-size:17px;font-weight:680; letter-spacing:-.2px;transition:all .13s;box-shadow:0 3px 12px rgba(15,122,71,.28)} button.primary:hover{background:var(--accent-h);box-shadow:0 5px 18px rgba(15,122,71,.34)} button.primary:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(15,122,71,.28)} button.primary:disabled{opacity:.5;cursor:default;box-shadow:none} button.ghost{padding:10px 16px;border:1px solid var(--line);background:var(--panel);border-radius:11px; font-family:inherit;font-size:14.5px;cursor:pointer;color:var(--text);font-weight:580;transition:all .13s} button.ghost:hover{background:var(--panel2)} button.ghost.danger{color:var(--bad);border-color:var(--bad-bg)} button.ghost.danger:hover{background:var(--bad-bg)} button.ghost.on{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)} table{width:100%;border-collapse:collapse;font-size:14px} th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line2);vertical-align:middle} th{font-size:11.5px;color:var(--muted);font-weight:620;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--panel2)} tfoot td{border-top:2px solid var(--line);font-weight:660;padding-top:11px} td.act{width:64px;text-align:right;white-space:nowrap} td.act button{border:0;background:transparent;color:var(--muted2);cursor:pointer;padding:3px 5px; border-radius:6px;font-size:13px;line-height:1} td.act button:hover{background:var(--panel2);color:var(--text)} td.act button.del:hover{color:var(--bad)} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .stat{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px} .stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px} .stat .v{font-size:23px;font-weight:720;font-variant-numeric:tabular-nums;letter-spacing:-.7px} .stat.ok .v{color:var(--ok)} .stat.bad .v{color:var(--bad)} .stat.acc .v{color:var(--accent)} .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px} .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center} .rowline{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line2)} .rowline:last-child{border-bottom:0} .rowline .txt{flex:1;font-size:14px} .rowline input[type=number]{width:68px;padding:6px 8px;font-size:13.5px;text-align:right} .empty{color:var(--muted);font-size:13.5px;padding:18px 0;text-align:center} .note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:10px} .note b{color:var(--text)} .pill-t{display:inline-block;font-size:11px;padding:2px 7px;border-radius:6px;font-weight:650;white-space:nowrap} .pill-t.in{background:var(--ok-bg);color:var(--ok)} .pill-t.out{background:var(--bad-bg);color:var(--bad)} .pill-t.payout{background:var(--accent-bg);color:var(--accent)} /* charts */ .chart{width:100%;overflow:visible} .chart text{font-family:inherit;font-variant-numeric:tabular-nums} .chart .axis{stroke:var(--line);stroke-width:1} .chart .grid-l{stroke:var(--line2);stroke-width:1} .chart .lbl{font-size:11px;fill:var(--muted)} .chart .val{font-size:11px;fill:var(--text);font-weight:600} .chart .bar{fill:var(--accent);transition:opacity .12s} .chart .bar:hover{opacity:.75} .chart .bar.muted{fill:var(--line);} .chart .line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round} .chart .dot-c{stroke:var(--panel);stroke-width:2} .chart .trend{stroke-dasharray:5 4;stroke-width:2;opacity:.75;fill:none} .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--muted)} .legend span{display:inline-flex;align-items:center;gap:6px} .legend i{width:10px;height:10px;border-radius:3px;display:inline-block} .pager{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:14px;font-size:13.5px;color:var(--muted)} .pager button{padding:6px 12px;border:1px solid var(--line);background:var(--panel);border-radius:9px; cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--text);font-weight:560} .pager button:disabled{opacity:.4;cursor:default} .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,90px);background:#14181f;color:#fff; padding:11px 20px;border-radius:11px;font-size:14px;font-weight:560;opacity:0; transition:all .25s;pointer-events:none;z-index:999;box-shadow:0 8px 28px rgba(0,0,0,.3);max-width:90vw;text-align:center} @media (prefers-color-scheme: dark){.toast{background:#e6e9ee;color:#0e1116}} .toast.show{opacity:1;transform:translate(-50%,0)} dialog{border:1px solid var(--line);border-radius:var(--r-lg);padding:0;background:var(--panel); color:var(--text);max-width:460px;width:calc(100% - 32px);box-shadow:var(--sh-lg)} dialog::backdrop{background:rgba(10,14,20,.55);backdrop-filter:blur(2px)} dialog .dlg-h{padding:16px 18px 0;font-size:16px;font-weight:660} dialog .dlg-b{padding:14px 18px 0;max-height:60vh;overflow:auto} dialog .dlg-f{padding:16px 18px;display:flex;gap:8px;justify-content:flex-end} dialog .dlg-f .primary{margin:0;width:auto;padding:10px 22px;font-size:14.5px} .progress{height:6px;background:var(--line2);border-radius:4px;overflow:hidden;margin-top:12px} .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .2s} @media(max-width:640px){ .grid{grid-template-columns:1fr} .wrap{padding:12px 12px 96px} .card{padding:15px} nav.tabs button{padding:8px 10px;font-size:13px} .preview{gap:16px} } /* ===== вход и синхронизация ===== */ #login{ position:fixed;inset:0;background:var(--bg);z-index:900;display:flex; align-items:center;justify-content:center;padding:20px; } #login .box{ background:var(--panel);border:1px solid var(--line);border-radius:18px; padding:28px;width:100%;max-width:400px;box-shadow:var(--sh-lg); } #login h2{font-size:19px;margin:0 0 4px;font-weight:660;letter-spacing:-.3px} #login .sub{font-size:13px;color:var(--muted);margin-bottom:20px} #login label{margin-bottom:12px} #login button{margin-top:6px} #login .err{ background:var(--bad-bg);color:var(--bad);border-radius:9px;padding:9px 12px; font-size:13px;margin-top:12px;display:none } #login .err.show{display:block} #login .login-logo{width:52px;height:52px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(150deg,var(--accent),var(--accent-h));color:#fff; margin-bottom:14px;box-shadow:0 4px 14px rgba(15,122,71,.3)} @media (prefers-color-scheme: dark){#login .login-logo{color:#0a100c}} #login h2{font-size:23px;margin:0 0 4px;font-weight:720;letter-spacing:-.6px} #login .sub{font-size:13.5px;color:var(--muted);margin-bottom:22px} #login .box{padding:28px} #login input{font-size:16px;padding:11px 13px} #login button.primary{padding:14px;font-size:16px} .srvlink{display:flex;align-items:center;gap:7px;width:100%;margin-top:16px;padding:9px 11px; border:1px solid var(--line);background:var(--panel2);border-radius:10px;cursor:pointer; font-family:inherit;font-size:12px;color:var(--muted);justify-content:center;transition:all .13s} .srvlink:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)} .srvlink #lg-srv-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px} .srvlink .srv-ico{font-size:13px} #syncbar{ display:none;align-items:center;gap:6px;font-size:12px;color:var(--muted); padding:4px 10px;border-radius:20px;background:var(--panel);border:1px solid var(--line) } #syncbar.on{display:inline-flex} #syncbar.off{color:var(--bad);border-color:var(--bad-bg);background:var(--bad-bg)} #syncbar .sp{width:8px;height:8px;border-radius:50%;background:var(--ok)} #syncbar.off .sp{background:var(--bad)} #syncbar.busy .sp{background:var(--warn);animation:pulse 1s infinite} @keyframes pulse{50%{opacity:.3}} .userchip b{font-weight:600} /* ==================== ПЕЧАТЬ ==================== */ #print-head{display:none} @media print{ @page{size:A4 landscape;margin:10mm} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} body{background:#fff;color:#000;font-size:11pt} .wrap{padding:0;max-width:none} /* скрываем всё лишнее */ header.top, nav.tabs, .filters, .quickfilters, .toolbar, .pager, #login, .toast, dialog, .sidebar, .card h2 .hint, #tab-dyn, #tab-vvod, #tab-masters, #tab-pts, #tab-set, #tab-dev{display:none !important} /* показываем историю целиком */ .tab{display:block !important} #tab-hist > .card{border:0;box-shadow:none;padding:0;margin:0} #print-head{display:block;margin-bottom:12px} #print-head h1{font-size:16pt;margin:0 0 4px;font-weight:700} .print-sub{font-size:9pt;color:#444} table{width:100%;border-collapse:collapse;font-size:9pt} th{background:#eef2ec !important;color:#000;border-bottom:1.5pt solid #333; font-size:8pt;text-transform:uppercase;letter-spacing:.3px} td{border-bottom:.5pt solid #bbb;padding:4pt 3pt} tbody tr:hover{background:transparent} /* все строки на печати — без постраничного вывода */ #tbl-hist-wrap{overflow:visible !important} td.act, th:last-child{display:none} /* суммы остаются читаемыми в ч/б */ td.num{color:#000 !important;font-weight:600} .pill-t{background:#eee !important;color:#000 !important;border:.5pt solid #999} /* ссылки не печатаем как адреса */ a{color:#000;text-decoration:none} } /* ==================== ВХОД: НА ВСЮ ПЛОЩАДЬ ==================== */ #login{ align-items:stretch;justify-content:center;padding:0; } #login .box{ display:flex;flex-direction:column;justify-content:center; width:100%;max-width:100%;border:0;border-radius:0;box-shadow:none; background:var(--panel);padding:32px 24px;margin:0 auto; } /* телефон: форма растянута, элементы крупные, но не раздутые */ @media (max-width: 640px){ #login{align-items:stretch} #login .box{ max-width:100%;min-height:100dvh;justify-content:center; padding:max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)); gap:0; } #login .login-logo{width:64px;height:64px;border-radius:20px;margin:0 auto 18px} #login .login-logo svg{width:32px;height:32px} #login h2{font-size:27px;text-align:center;margin-bottom:6px} #login .sub{font-size:15px;text-align:center;margin-bottom:30px} #login label{font-size:14.5px;font-weight:600;gap:7px;margin-bottom:15px} #login input{ font-size:17px;padding:15px 16px;border-radius:13px;border-width:1.5px; -webkit-appearance:none; } #login button.primary{ padding:16px;font-size:17.5px;border-radius:14px;margin-top:12px; width:100%; } .srvlink{font-size:13.5px;padding:12px;margin-top:18px;border-radius:12px} .srvlink #lg-srv-txt{max-width:100%} #login .err{font-size:14.5px;padding:12px 14px;border-radius:11px;margin-top:14px} } /* планшет и компьютер: аккуратная карточка по центру */ @media (min-width: 641px){ #login{align-items:center;padding:24px} #login .box{ max-width:400px;border:1px solid var(--line);border-radius:20px; box-shadow:var(--sh-lg);min-height:0;padding:34px 30px; } } /* очень низкий экран (телефон в альбомной) — не растягиваем */ @media (max-height: 520px){ #login .box{min-height:0;padding:20px 22px} #login .login-logo{width:44px;height:44px;margin-bottom:12px} #login h2{font-size:21px} #login .sub{margin-bottom:16px} } /* поле в фокусе — заметнее */ #login input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-bg); } /* ==================== ИСТОРИЯ СЕРВЕРОВ ==================== */ #srv-history{display:flex;flex-direction:column;gap:6px} .srv-item{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 12px;border:1px solid var(--line);border-radius:11px; background:var(--panel2);cursor:pointer;font-family:inherit;text-align:left; transition:all .13s} .srv-item:hover{border-color:var(--accent);background:var(--accent-bg)} .srv-item .dot2{ width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto} .srv-item .dot2.off{background:var(--muted2)} .srv-item .txt2{flex:1;min-width:0} .srv-item .txt2 b{display:block;font-size:13.5px;font-weight:640; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .srv-item .txt2 i{display:block;font-size:11px;font-style:normal;color:var(--muted)} .srv-item .cur{ font-size:10.5px;padding:2px 7px;border-radius:6px; background:var(--accent);color:#fff;font-weight:700;letter-spacing:.3px} /* ==================== ЗАКРЕПЛЕНИЕ НА ТЕЛЕФОНЕ ==================== */ @media (max-width: 640px){ .wrap{padding:0 12px 90px} .topbar{padding:8px 0 0;margin:-8px 0 10px} header.top{padding:9px 11px;gap:8px;border-radius:12px} header.top h1{font-size:15px} header.top .sub{font-size:10.5px} .logo{width:32px;height:32px;border-radius:10px} .logo svg{width:18px;height:18px} /* адрес сервера и пользователь — компактные */ .srvchip{padding:5px 8px;border-radius:10px;gap:6px} .srv-txt b{font-size:11.5px;max-width:90px} .srv-txt i{font-size:9.5px} .srv-ico{display:none} .avatar{width:28px;height:28px;font-size:10.5px} .uc-txt b{font-size:12px} .uc-txt i{font-size:9.5px;max-width:88px;overflow:hidden;text-overflow:ellipsis} nav.tabs{gap:2px;padding:3px;border-radius:11px;margin-bottom:12px} nav.tabs button{padding:8px 10px;font-size:12.5px;border-radius:8px} } /* ==================== ПОСЛЕДНИЙ ПОЛЬЗОВАТЕЛЬ ==================== */ .last-hint{ font-size:12.5px;color:var(--muted); background:var(--accent-bg);border:1px solid var(--line); border-radius:10px;padding:8px 11px;margin-bottom:12px; display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.4; } .last-hint b{color:var(--text);font-weight:640} .last-hint button{ border:0;background:var(--panel);color:var(--accent); font-family:inherit;font-size:12px;font-weight:620;cursor:pointer; padding:3px 9px;border-radius:7px;border:1px solid var(--line); } .last-hint button:hover{background:var(--accent);color:#fff;border-color:var(--accent)} @media (max-width:640px){ .last-hint{font-size:13px;padding:10px 12px;margin-bottom:14px} .last-hint button{font-size:12.5px;padding:4px 10px} } /* ==================== ВЕРСИЯ В ИНТЕРФЕЙСЕ ==================== */ .login-ver{ font-size:11.5px;color:var(--muted2);text-align:center; margin-top:-14px;margin-bottom:20px;font-variant-numeric:tabular-nums; letter-spacing:.2px; } .ver-badge{ display:inline-block;font-size:10px;font-weight:650; padding:1px 6px;border-radius:5px; background:var(--panel2);color:var(--muted2); border:1px solid var(--line);letter-spacing:.2px; font-variant-numeric:tabular-nums;margin-left:4px; } @media (max-width:640px){ .login-ver{font-size:11px;margin-bottom:18px} .ver-badge{font-size:9px;padding:1px 4px} } /* ==================== МЕНЮ ПОЛЬЗОВАТЕЛЯ (как в Google) ==================== */ .usermenu{position:relative;flex:0 0 auto} .um-btn{ display:grid;place-items:center;width:40px;height:40px;padding:0; border:1.5px solid var(--line);border-radius:50%;background:var(--panel2); cursor:pointer;transition:all .14s;font-family:inherit} .um-btn:hover{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-bg)} .um-btn .avatar{ width:32px;height:32px;border-radius:50%;font-size:12px; display:grid;place-items:center;font-weight:700;letter-spacing:.3px} .um-drop{ position:absolute;top:calc(100% + 8px);right:0;z-index:200; min-width:250px;padding:6px; background:var(--panel);border:1px solid var(--line);border-radius:16px; box-shadow:0 12px 40px rgba(10,30,18,.18); opacity:0;visibility:hidden;transform:translateY(-6px) scale(.97); transition:all .15s ease;transform-origin:top right} .um-drop.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .um-head{display:flex;align-items:center;gap:11px;padding:11px 12px 13px} .um-head .avatar{width:40px;height:40px;border-radius:50%;font-size:14px; display:grid;place-items:center;font-weight:700;flex:0 0 auto} .um-info{min-width:0;flex:1} .um-info b{display:block;font-size:14px;font-weight:660;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .um-info i{display:block;font-size:12px;color:var(--muted);font-style:normal; line-height:1.3;margin-top:1px} .um-sep{height:1px;background:var(--line2);margin:4px 8px} .um-item{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 12px;border:0;border-radius:10px;background:transparent; font-family:inherit;font-size:13.5px;font-weight:560;color:var(--text); cursor:pointer;text-align:left;transition:background .12s} .um-item:hover{background:var(--panel2)} .um-item.danger{color:var(--bad)} .um-item.danger:hover{background:var(--bad-bg)} .um-ico{font-size:14px;width:17px;text-align:center;opacity:.75;flex:0 0 auto} @media (max-width:640px){ .um-btn{width:36px;height:36px} .um-btn .avatar{width:28px;height:28px;font-size:11px} .um-drop{min-width:230px;right:-4px} } /* ==================== ШАПКА: ЕДИНЫЙ РАЗМЕР ==================== */ :root{ --hb-h: 36px; --hb-r: 10px; } .topright{ gap:8px; align-items:center; } .topright > *{ height:var(--hb-h); } /* все кнопки и плашки шапки — одинаковой высоты и стиля */ #syncbar, .topright .srvchip, .topright .um-btn{ height:var(--hb-h); border-radius:var(--hb-r); box-sizing:border-box; } .topright .srvchip{ padding:0 12px; font-size:13px; } #syncbar{ padding:0 11px; font-size:12.5px; } /* аватар — круглый, справа, как у Google */ .usermenu{ position:relative; } .um-btn{ width:var(--hb-h); height:var(--hb-h); padding:0; border:1px solid var(--line); background:var(--panel); border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:box-shadow .15s, border-color .15s; } .um-btn:hover{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-bg); } .um-btn .avatar{ width:calc(var(--hb-h) - 4px); height:calc(var(--hb-h) - 4px); font-size:12px; font-weight:700; letter-spacing:.2px; } /* выпадающее меню аккуратно под аватаром */ .um-drop{ right:0; top:calc(100% + 8px); min-width:250px; border-radius:14px; padding:6px; box-shadow:0 12px 36px rgba(12,40,24,.18); } .um-head{ padding:10px 10px 12px; gap:12px; } .um-head .avatar{ width:44px; height:44px; font-size:15px; } .um-info b{ font-size:14px; } .um-info i{ font-size:12px; color:var(--muted); font-style:normal; } .um-sep{ margin:4px 2px; } .um-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:9px; font-size:13.5px; font-weight:560; text-align:left; } .um-ico{ width:20px; text-align:center; color:var(--muted); font-size:14px; } .um-item.danger .um-ico{ color:var(--bad); } /* на телефоне — тот же размер, без сжатия */ @media (max-width:640px){ :root{ --hb-h: 34px; } .topright .srvchip{ padding:0 9px; font-size:12px; } #syncbar{ padding:0 8px; font-size:11.5px; } .srv-txt b{ max-width:none; } } /* ==================== ДЕРЕВО: СЕРВИС → МАСТЕРСКАЯ → ЛЮДИ ==================== */ .tree{display:flex;flex-direction:column;gap:6px} /* сервис */ .tnode{ border:1px solid var(--line);border-radius:13px;background:var(--panel); overflow:hidden;transition:border-color .15s} .tnode.open{border-color:var(--accent)} .tnode-h{ display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer; user-select:none;transition:background .12s} .tnode-h:hover{background:var(--panel2)} .tnode.open .tnode-h{background:var(--accent-bg)} .tarrow{ width:16px;height:16px;flex:0 0 auto;display:grid;place-items:center; color:var(--muted);transition:transform .18s;font-size:10px} .tnode.open .tarrow{transform:rotate(90deg);color:var(--accent)} .tname{flex:1;min-width:0} .tname b{display:block;font-size:14.5px;font-weight:660;letter-spacing:-.2px} .tname i{display:block;font-size:11px;font-style:normal;color:var(--muted2); font-variant-numeric:tabular-nums;margin-top:1px} .tnums{display:flex;gap:16px;flex:0 0 auto;font-size:11.5px;color:var(--muted)} .tnums span{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .tnums b{font-size:13px;font-weight:660;color:var(--text); font-variant-numeric:tabular-nums} /* мастерские внутри */ .tshops{padding:0 12px 12px;display:flex;flex-direction:column;gap:5px} .trow{ display:flex;align-items:center;gap:10px;padding:9px 11px; border:1px solid var(--line);border-radius:10px;background:var(--bg)} .tshoprow{background:var(--panel2)} .tshoprow .ticon{color:var(--accent)} .ticon{width:20px;text-align:center;font-size:13px;color:var(--muted2);flex:0 0 auto} .tlabel{flex:1;min-width:0;font-size:13px;font-weight:600} .tlabel i{font-style:normal;color:var(--muted2);font-weight:400; font-size:11.5px;margin-left:7px;font-variant-numeric:tabular-nums} .tacts{display:flex;gap:5px;flex:0 0 auto;opacity:0;transition:opacity .12s} .trow:hover .tacts{opacity:1} .trow .tacts.always{opacity:1} .tacts button{ border:1px solid var(--line);background:var(--panel);color:var(--muted); font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer; padding:4px 9px;border-radius:7px;white-space:nowrap;transition:all .12s} .tacts button:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .tacts button.danger:hover{background:var(--bad);border-color:var(--bad)} /* пользователь */ .tuser{padding:7px 11px 7px 34px} .tuser .avatar{ width:26px;height:26px;font-size:10px;font-weight:700;flex:0 0 auto; border-radius:50%;display:grid;place-items:center; background:var(--accent-bg);color:var(--accent)} .rbadge{ font-size:10px;font-weight:650;padding:2px 7px;border-radius:6px; letter-spacing:.2px;flex:0 0 auto;white-space:nowrap} .rbadge.dev{background:#ede9fe;color:#5b21b6} .rbadge.admin{background:var(--accent-bg);color:var(--accent)} .rbadge.accountant{background:#dbeafe;color:#1d4ed8} .rbadge.manager{background:#fef3c7;color:#92400e} .rbadge.master{background:#dcfce7;color:#15803d} @media (prefers-color-scheme: dark){ .rbadge.dev{background:#3b2a6b;color:#c4b5fd} .rbadge.accountant{background:#1e3a5f;color:#93c5fd} .rbadge.manager{background:#4a3410;color:#fcd34d} .rbadge.master{background:#14471f;color:#86efac} } @media (max-width:640px){ .tnums{gap:11px} .tnums span:nth-child(4){display:none} .tnode-h{padding:11px 12px} .tname b{font-size:13.5px} .tuser{padding-left:12px} .tacts{opacity:1} .rbadge{font-size:9.5px;padding:2px 5px} } /* ==================== ТЕСТОВЫЕ ПОЛЬЗОВАТЕЛИ НА ВХОДЕ ==================== */ #test-users{margin-top:16px} .test-toggle{ width:100%;display:flex;align-items:center;justify-content:space-between; padding:10px 13px;border:1px dashed var(--line);border-radius:11px; background:transparent;color:var(--muted);font-family:inherit; font-size:12.5px;font-weight:600;cursor:pointer;transition:all .14s; } .test-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)} .test-list{display:none;flex-direction:column;gap:5px;margin-top:8px; max-height:240px;overflow-y:auto} .test-list.open{display:flex} .test-item{ display:flex;align-items:center;gap:9px;width:100%; padding:8px 11px;border:1px solid var(--line);border-radius:10px; background:var(--panel2);cursor:pointer;font-family:inherit;text-align:left; transition:all .12s; } .test-item:hover{border-color:var(--accent);background:var(--accent-bg)} .test-item .ti-role{ font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:5px; background:var(--panel);color:var(--muted);border:1px solid var(--line); flex:0 0 auto;letter-spacing:.2px; } .test-item .ti-login{font-size:12.5px;font-weight:640;color:var(--text)} .test-item .ti-sub{font-size:10.5px;color:var(--muted2);margin-left:auto; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%} @media (max-width:640px){ .test-toggle{font-size:13px;padding:11px 14px} .test-item{padding:9px 12px} .test-item .ti-login{font-size:13px} } /* ==================== ШАПКА 0.4.0: ОДИН БЛОК СТАТУСА ==================== */ /* строка статуса — в одну линию, не переносится, обрезается аккуратно */ .statusline{ display:flex;align-items:center;gap:6px; font-size:11.5px;color:var(--muted); margin-top:3px; max-width:100%; min-width:0; overflow:hidden; white-space:nowrap; } .statusline .st-item{ display:inline-flex;align-items:center;gap:4px; min-width:0;overflow:hidden;text-overflow:ellipsis; } .statusline .st-sep{color:var(--muted2);opacity:.55;flex:0 0 auto} .statusline .ver-badge{ font-size:10px;padding:0 5px;height:15px;line-height:15px; margin:0;flex:0 0 auto; } /* ошибка связи — не вылезает за шапку, а заменяет текст в той же строке */ #st-sync.off{color:var(--bad)} #st-sync.off .dot{background:var(--bad)} #st-sync.busy .dot{background:var(--warn);animation:pulse 1s infinite} /* круглая кнопка обновления — того же размера, что аватар */ .icon-btn{ width:var(--hb-h);height:var(--hb-h);padding:0;flex:0 0 auto; display:grid;place-items:center; border:1px solid var(--line);background:var(--panel);color:var(--muted); border-radius:50%;cursor:pointer; transition:all .15s; } .icon-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)} .icon-btn:active{transform:rotate(180deg)} .icon-btn.spin svg{animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* сервер в выпадающем меню */ .um-srv{ display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:9px;background:var(--panel2); } .um-srv-ico{display:grid;place-items:center;width:20px;flex:0 0 auto} .um-srv-txt{min-width:0;flex:1} .um-srv-txt b{display:block;font-size:12.5px;font-weight:640; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .um-srv-txt i{display:block;font-size:11px;font-style:normal;color:var(--muted)} /* на телефоне шапка ещё компактнее */ @media (max-width:640px){ .statusline{font-size:10.5px;gap:4px} .statusline .ver-badge{font-size:9px;height:14px;line-height:14px} .brand-txt{overflow:hidden} #btn-refresh{width:32px;height:32px} } /* ==================== ИНДИКАТОР ПРОТЯГИВАНИЯ ==================== */ #pull-ind{ position:fixed;left:50%;top:8px;z-index:200; transform:translate(-50%,-60px); background:var(--panel);border:1px solid var(--line); color:var(--muted);font-size:12px;font-weight:600; padding:7px 14px;border-radius:20px; box-shadow:var(--sh-lg); opacity:0;transition:opacity .15s, transform .15s; pointer-events:none;white-space:nowrap; } #pull-ind.show{opacity:1} /* ==================== РАЗДЕЛЫ: СВОЙ ЦВЕТ У КАЖДОГО ==================== */ /* версия рядом с названием проекта */ .h1-ver{ font-size:10.5px;font-weight:700;vertical-align:middle; padding:2px 6px;border-radius:6px;margin-left:6px; background:var(--panel2);color:var(--muted); border:1px solid var(--line);letter-spacing:.3px; font-variant-numeric:tabular-nums; } /* --- плитки типов: 5 штук в ряд на телефоне --- */ .typegrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} .typegrid button[data-type=inv]{ border-color:var(--slate-line);color:var(--slate);background:var(--slate-bg)} .typegrid button[data-type=inv].on{background:var(--slate);color:#fff;border-color:var(--slate)} .typegrid button[data-type=pay]{ border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)} .typegrid button[data-type=pay].on{background:var(--ok);color:#fff;border-color:var(--ok)} /* --- форма меняет цвет по типу операции --- */ #tab-vvod .card{transition:background .2s, border-color .2s} .form-in{border-left:4px solid var(--ok)!important;background:var(--ok-bg)!important} .form-out{border-left:4px solid var(--bad)!important;background:var(--bad-bg)!important} .form-payout{border-left:4px solid var(--purple)!important;background:var(--purple-bg)!important} .form-inv{border-left:4px solid var(--slate)!important;background:var(--slate-bg)!important} .form-pay{border-left:4px solid var(--ok)!important;background:var(--ok-bg)!important} /* --- кнопка «Записать» в цвет раздела --- */ #btn-save, #tab-vvod button.primary{ transition:background .18s, box-shadow .18s; } .btn-in{background:var(--ok)!important;box-shadow:0 3px 12px rgba(20,140,80,.28)!important} .btn-out{background:var(--bad)!important;box-shadow:0 3px 12px rgba(190,50,50,.28)!important} .btn-payout{background:var(--purple)!important;box-shadow:0 3px 12px rgba(120,70,180,.28)!important} .btn-inv{background:var(--slate)!important;box-shadow:0 3px 12px rgba(47,95,168,.28)!important} .btn-pay{background:var(--ok)!important;box-shadow:0 3px 12px rgba(31,122,92,.28)!important} .btn-in, .btn-out, .btn-payout, .btn-inv, .btn-pay{color:#fff!important;border-color:transparent!important} /* подсказка под типом */ #vvod-hint{ font-size:12px;color:var(--muted);margin:-8px 0 14px; padding-left:2px;font-style:italic; } @media (max-width:640px){ .typegrid{gap:7px!important} .typegrid button{padding:9px 3px!important;font-size:10.5px!important;gap:2px!important} .typegrid button .ico{font-size:13px!important} .typegrid button .sub2{display:none!important} .h1-ver{font-size:9px;padding:1px 4px;margin-left:4px} #vvod-hint{font-size:11.5px;margin-bottom:12px} } /* ==================== ПОСТАВЩИКИ ==================== */ .card-sup{border-left:4px solid var(--slate)} .sup-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px;align-items:center; padding:11px 0;border-bottom:1px solid var(--line); } .sup-row:last-of-type{border-bottom:0} .sup-name{font-size:13.5px;font-weight:640;min-width:0; overflow:hidden;text-overflow:ellipsis} .sup-nums{display:flex;gap:14px;font-size:11px;color:var(--muted2)} .sup-nums span{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .sup-nums b{font-size:12.5px;font-weight:640;color:var(--text)} .sup-debt{text-align:right;min-width:96px} .sup-debt b{display:block;font-size:14.5px;font-weight:700; font-variant-numeric:tabular-nums} .sup-debt i{display:block;font-size:10px;font-style:normal; color:var(--muted2);text-transform:lowercase} .sup-row.debt .sup-debt b{color:var(--bad)} .sup-row.over .sup-debt b{color:var(--ok)} .sup-row.zero .sup-debt b{color:var(--muted2)} .sup-total{ display:flex;justify-content:space-between;align-items:center; margin-top:14px;padding-top:13px;border-top:2px solid var(--line); font-size:12.5px;color:var(--muted);font-weight:600; } .sup-total b{font-size:16px;font-weight:750;color:var(--bad); font-variant-numeric:tabular-nums} @media (max-width:640px){ .sup-row{grid-template-columns:1fr auto;gap:6px 10px;padding:10px 0} .sup-name{grid-column:1/-1;font-size:13px} .sup-nums{gap:10px;font-size:10px;justify-content:flex-start} .sup-debt{min-width:84px} .sup-debt b{font-size:13.5px} .sup-total b{font-size:15px} } /* ==================== СПИСОК МАСТЕРОВ: АККУРАТНО ==================== */ .master-staff{background:var(--accent-bg)!important} .badge-staff{ font-size:10px;font-weight:650;padding:2px 7px;border-radius:6px; background:var(--panel);color:var(--muted); border:1px solid var(--line);white-space:nowrap; flex:0 0 auto; } /* rowline — единый вид строки справочника */ .rowline{ display:flex;align-items:center;gap:10px; padding:9px 0;border-bottom:1px solid var(--line); } .rowline:last-child{border-bottom:0} .rowline .txt{flex:1;min-width:0;font-size:13.5px; overflow:hidden;text-overflow:ellipsis} /* ==================== МОБИЛЬНАЯ ВЁРСТКА СПИСКОВ ==================== */ @media (max-width:640px){ /* карточки не должны прилипать к краям */ .card{padding:14px 13px!important;border-radius:14px!important} .card h2{font-size:14.5px!important;margin-bottom:8px!important} .card .hint{font-size:10.5px!important} .rowline{padding:10px 0;gap:8px} .rowline .txt{font-size:13px} .badge-staff{font-size:9px;padding:2px 6px} /* форма сотрудников — поля шириной в половину, а не в кучу */ .toolbar{gap:7px!important} .toolbar input, .toolbar select{ flex:1 1 calc(50% - 4px)!important; min-width:0!important; max-width:calc(50% - 4px)!important; font-size:13.5px!important; padding:10px 11px!important; border-radius:10px!important; } .toolbar button{ flex:1 1 100%!important; padding:11px!important; font-size:14px!important; } /* пояснения под формой — мельче и с воздухом */ .note{font-size:11.5px!important;line-height:1.55!important;margin-top:10px!important} .note b{font-size:12px} /* ошибка загрузки — заметная плашка, а не строка в тексте */ .empty{ font-size:12.5px!important;padding:14px 12px!important; background:var(--panel2);border-radius:10px; text-align:center;color:var(--muted); } } /* очень узкий экран — поля в один столбец */ @media (max-width:400px){ .toolbar input, .toolbar select{ flex:1 1 100%!important; max-width:100%!important; } } /* ==================== ЦВЕТА РАЗДЕЛОВ ==================== */ /* каждый тип операции — свой цвет: кнопка, рамка и мягкий фон формы */ /* цвета карточки формы берём из общих переменных темы — так они меняются и при ручном выборе, и по системе */ :root{ --c-in: var(--ok); --c-in-bg: var(--ok-bg); --c-in-line: var(--ok-line); --c-out: var(--bad); --c-out-bg: var(--bad-bg); --c-out-line: var(--bad-line); --c-pay: var(--purple); --c-pay-bg: var(--purple-bg); --c-pay-line: var(--purple-line); --c-sup: var(--slate); --c-sup-bg: var(--slate-bg); --c-sup-line: var(--slate-line); } /* форма ввода: фон и рамка по типу */ #tab-vvod .card.form-in{background:var(--c-in-bg);border-color:var(--c-in-line)} #tab-vvod .card.form-out{background:var(--c-out-bg);border-color:var(--c-out-line)} #tab-vvod .card.form-payout{background:var(--c-pay-bg);border-color:var(--c-pay-line)} #tab-vvod .card.form-inv, #tab-vvod .card.form-pay{background:var(--c-sup-bg);border-color:var(--c-sup-line)} /* кнопка «Записать» — цвет по типу */ #btn-save{transition:filter .15s, transform .05s} #btn-save:active{transform:scale(.99)} #tab-vvod .card.form-in #btn-save{background:var(--c-in);border-color:var(--c-in);color:#fff} #tab-vvod .card.form-out #btn-save{background:var(--c-out);border-color:var(--c-out);color:#fff} #tab-vvod .card.form-payout #btn-save{background:var(--c-pay);border-color:var(--c-pay);color:#fff} #tab-vvod .card.form-inv #btn-save, #tab-vvod .card.form-pay #btn-save{background:var(--c-sup);border-color:var(--c-sup);color:#fff} /* плитки выбора типа — активная подсвечена своим цветом */ .typegrid button[data-type=in].on{background:var(--c-in);border-color:var(--c-in);color:#fff} .typegrid button[data-type=out].on{background:var(--c-out);border-color:var(--c-out);color:#fff} .typegrid button[data-type=payout].on{background:var(--c-pay);border-color:var(--c-pay);color:#fff} .typegrid button[data-type=inv].on, .typegrid button[data-type=pay].on{background:var(--c-sup);border-color:var(--c-sup);color:#fff} /* раздел «Поставщики» — синий */ #tab-sup .card-sup{background:var(--c-sup-bg);border-color:var(--c-sup-line)} /* мастера — фиолетовый */ #tab-masters .card{background:var(--c-pay-bg);border-color:var(--c-pay-line)} /* ==================== ПОСТАВЩИКИ ==================== */ .sup-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .sup-stat{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel)} .sup-stat span{display:block;font-size:11px;color:var(--muted);font-weight:600} .sup-stat b{display:block;font-size:15px;margin-top:3px;font-variant-numeric:tabular-nums} .sup-stat.debt b{color:var(--c-out)} .sup-stat.pay b{color:var(--c-in)} .sup-stat.wo b{color:var(--c-pay)} .sup-row{border:1px solid var(--c-sup-line);border-radius:12px;padding:11px 13px; margin-bottom:8px;background:var(--panel)} .sup-row.debt{border-left:4px solid var(--c-out)} .sup-row.over{border-left:4px solid var(--c-in)} .sup-row.zero{border-left:4px solid var(--muted2)} .sup-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .sup-name{font-weight:650;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sup-debt{text-align:right;flex:0 0 auto} .sup-debt b{display:block;font-size:15px;font-variant-numeric:tabular-nums} .sup-row.debt .sup-debt b{color:var(--c-out)} .sup-row.over .sup-debt b{color:var(--c-in)} .sup-debt i{font-style:normal;font-size:11px;color:var(--muted)} .sup-nums{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:12px;color:var(--muted)} .sup-nums b{color:var(--text);font-variant-numeric:tabular-nums} .sup-total{display:flex;justify-content:space-between;align-items:center; padding:12px 4px 2px;border-top:1px dashed var(--line);margin-top:6px;font-weight:600} .sup-total b{color:var(--c-out);font-size:16px;font-variant-numeric:tabular-nums} .sup-err{padding:14px;border-radius:12px;background:var(--bad-bg);color:var(--bad); font-size:13px;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .sup-legend{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--muted)} .sup-legend b{color:var(--text)} @media (max-width:640px){ .sup-totals{grid-template-columns:repeat(2,1fr)} .sup-stat b{font-size:14px} } /* ==================== МОБИЛЬНАЯ ВЁРСТКА СПИСКОВ ==================== */ .mlist-row{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 12px;border:1px solid var(--line);border-radius:12px; background:var(--panel);margin-bottom:8px} .mlist-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px} .mlist-info b{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mlist-info i{font-style:normal;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mlist-badge{font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px; background:var(--c-pay-bg);color:var(--c-pay);border:1px solid var(--c-pay-line); flex:0 0 auto;white-space:nowrap} .mlist-row .ghost.danger{flex:0 0 auto;padding:7px 12px;font-size:12.5px} /* формы «добавить» — в одну строку на телефоне, без налезания */ .addrow{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin-top:12px} .addrow input{flex:1 1 180px;min-width:0} .addrow button{flex:0 0 auto} /* сотрудники: сетка полей ФИО — ровно, по 2 в ряд */ .userform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px} .userform input,.userform select{width:100%;min-width:0;box-sizing:border-box} .userform .wide{grid-column:1 / -1} .userform .actions{grid-column:1 / -1;display:flex;justify-content:flex-start} @media (max-width:640px){ .mlist-row{padding:10px 11px} .userform{grid-template-columns:1fr} .userform .wide{grid-column:auto} .addrow{flex-direction:column} .addrow input, .addrow button{width:100%;flex:none} } /* ==================== СЕРВИСНЫЙ КОД ТЕСТОВОГО СПИСКА ==================== */ .test-gate{display:none;flex-direction:column;gap:8px;margin-top:10px; padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)} .test-gate.open{display:flex} .test-gate label{font-size:12px;font-weight:600;color:var(--muted);display:flex; flex-direction:column;gap:6px} .test-gate input{width:100%;box-sizing:border-box;text-align:center; letter-spacing:6px;font-size:17px;padding:11px} .test-gate button{width:100%;padding:11px;font-size:14px} .test-gate button:disabled{opacity:.5;cursor:not-allowed} .test-msg{font-size:12px;color:var(--muted);min-height:16px} .test-msg.bad{color:var(--bad);font-weight:600} /* ==================== СВОДКА «ДЕНЬГИ» ==================== */ .money-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .money-card{border:1px solid var(--line);border-radius:13px;padding:12px 14px; background:var(--panel)} .money-card .mk{font-size:11.5px;color:var(--muted);font-weight:600; text-transform:uppercase;letter-spacing:.4px} .money-card .mv{font-size:20px;font-weight:700;margin-top:5px; font-variant-numeric:tabular-nums;letter-spacing:-.4px} .money-card .md{font-size:11.5px;color:var(--muted);margin-top:3px} .money-card.in{border-left:4px solid var(--c-in)} .money-card.in .mv{color:var(--c-in)} .money-card.out{border-left:4px solid var(--c-out)} .money-card.out .mv{color:var(--c-out)} .money-card.master{border-left:4px solid var(--c-pay)} .money-card.master .mv{color:var(--c-pay)} .money-card.sup{border-left:4px solid var(--c-sup)} .money-card.sup .mv{color:var(--c-sup)} .money-card.net{border-left:4px solid var(--accent);background:var(--accent-bg)} .money-card.net .mv{color:var(--accent)} .money-row{display:flex;justify-content:space-between;align-items:center; padding:9px 2px;border-bottom:1px dashed var(--line);font-size:13.5px} .money-row:last-child{border-bottom:0} .money-row b{font-variant-numeric:tabular-nums} .money-row .neg{color:var(--c-out)} .money-row .pos{color:var(--c-in)} /* период: день / месяц / год */ .period-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .period-bar button{padding:7px 14px;border:1px solid var(--line);border-radius:9px; background:var(--panel);font-family:inherit;font-size:13px;font-weight:600; color:var(--muted);cursor:pointer;transition:all .13s} .period-bar button.on{background:var(--accent);border-color:var(--accent);color:#fff} .period-bar button:hover:not(.on){border-color:var(--accent);color:var(--accent)} @media (max-width:640px){ .money-grid{grid-template-columns:1fr 1fr} .money-card{padding:10px 12px} .money-card .mv{font-size:17px} .money-card .mk{font-size:10.5px} } /* ==================== 0.7.0: РОВНАЯ ШАПКА И МОБИЛЬНАЯ ВЁРСТКА ==================== */ /* защита от горизонтального разъезда на телефоне */ html, body{ max-width:100%; overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* стрелка обновления строго по центру круга */ .icon-btn{ display:flex !important; align-items:center; justify-content:center; line-height:0; } .icon-btn svg{ display:block; width:17px; height:17px; flex:0 0 auto; transform:translateX(0.5px); /* компенсируем неровный край стрелки */ } /* версия рядом с названием — аккуратная метка */ .h1-ver{ display:inline-block; font-size:11px; font-weight:650; vertical-align:middle; padding:1px 7px; margin-left:6px; border-radius:999px; background:var(--panel2); color:var(--muted); border:1px solid var(--line); letter-spacing:.2px; font-variant-numeric:tabular-nums; } /* строка статуса без лишних элементов — не переносится */ .statusline{ display:flex;align-items:center;gap:5px; font-size:11.5px;color:var(--muted); margin-top:3px; overflow:hidden;white-space:nowrap;max-width:100%; } .statusline .st-item{min-width:0;overflow:hidden;text-overflow:ellipsis} /* вкладки: на телефоне прокручиваются, но не обрезаются на середине */ nav.tabs{ scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } nav.tabs button{scroll-snap-align:start} @media (max-width:640px){ header.top{padding:9px 11px;gap:8px} header.top h1{font-size:15px;display:flex;align-items:center;flex-wrap:wrap;gap:4px} .h1-ver{font-size:10px;padding:1px 6px;margin-left:0} .statusline{font-size:10.5px} nav.tabs{padding:4px} nav.tabs button{padding:8px 11px;font-size:12.5px} } /* ==================== ВХОД НА ТЕЛЕФОНЕ: БЕЗ РАЗЪЕЗДА ==================== */ @media (max-width:640px){ #login{ position:fixed;inset:0; display:flex;flex-direction:column; align-items:stretch;justify-content:flex-start; overflow-y:auto;overflow-x:hidden; padding:0; } #login .box{ display:flex;flex-direction:column; justify-content:flex-start; width:100%;max-width:100%; min-height:0; /* ключевое: не растягиваем на весь экран */ flex:0 0 auto; border:0;border-radius:0;box-shadow:none; background:var(--panel); padding:calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 26px); margin:0; gap:0; } #login .login-logo{ width:56px;height:56px;border-radius:17px; margin:0 0 14px; } #login .login-logo svg{width:28px;height:28px} #login h2{font-size:23px;text-align:left;margin:0 0 4px;line-height:1.2} #login .sub{font-size:13.5px;text-align:left;margin-bottom:16px; display:flex;flex-wrap:wrap;gap:4px;align-items:center} #login label{font-size:13.5px;font-weight:600;gap:6px;margin-bottom:12px} #login input{ font-size:16px;padding:13px 14px;border-radius:12px; width:100%;box-sizing:border-box; } #login button.primary{ padding:14px;font-size:15.5px;width:100%; box-sizing:border-box; flex:0 0 auto; /* кнопка не растягивается по высоте */ margin-top:10px; } #login .login-ver{font-size:10.5px;margin:0 0 14px;text-align:left} #login .last-hint,#login #test-users{width:100%;box-sizing:border-box} #login .test-item{width:100%;box-sizing:border-box} } /* ==================== ПОЛОСКА ОБНОВЛЕНИЯ ==================== */ #app-update-bar{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:10px 14px;margin-bottom:10px; border-radius:12px; background:var(--gold-bg);border:1px solid var(--gold); color:var(--gold);font-size:13px;font-weight:600; } #app-update-bar span{flex:1;min-width:0} #app-update-bar button{ padding:7px 14px;border-radius:9px;border:0; background:var(--gold);color:#fff; font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer; white-space:nowrap;flex:0 0 auto; } #app-update-bar button:hover{filter:brightness(1.08)} @media (max-width:640px){ #app-update-bar{font-size:12px;padding:9px 11px} #app-update-bar button{width:100%;padding:9px} } /* метка «начисление» в истории */ .pill-t.acc{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-line)} /* ==================== НАЧИСЛЕНИЕ МАСТЕРУ ==================== */ .btn-accrue{ display:flex;align-items:center;gap:12px;width:100%; margin-top:12px;padding:13px 16px; border:1.5px dashed var(--purple-line);border-radius:13px; background:var(--purple-bg);color:var(--purple); font-family:inherit;cursor:pointer;text-align:left; transition:all .14s; } .btn-accrue:hover{ border-style:solid;border-color:var(--purple); background:color-mix(in srgb, var(--purple-bg) 70%, var(--purple) 6%); } .btn-accrue .acc-ico{ display:flex;align-items:center;justify-content:center; width:30px;height:30px;flex:0 0 auto;border-radius:50%; background:var(--purple);color:#fff;font-size:16px;line-height:0; } .btn-accrue .acc-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .btn-accrue .acc-txt b{font-size:14px;font-weight:680} .btn-accrue .acc-txt i{font-size:11.5px;color:var(--muted);font-style:normal} /* ===== ОКНА ВВОДА: общие правила для всех трёх ===== */ #dlg-accrue,#dlg-move,#dlg-emp,#dlg-sup{ border:0;border-radius:18px;padding:0; max-width:440px;width:calc(100% - 32px); background:var(--panel);color:var(--text); box-shadow:var(--sh-lg); } #dlg-accrue::backdrop,#dlg-move::backdrop, #dlg-emp::backdrop,#dlg-sup::backdrop{background:rgba(20,30,25,.45)} #dlg-accrue .acc-form,#dlg-move .acc-form, #dlg-emp .acc-form,#dlg-sup .acc-form{ padding:24px 24px 20px; display:flex;flex-direction:column;gap:0; box-sizing:border-box; } #dlg-accrue h2,#dlg-move h2, #dlg-emp h2,#dlg-sup h2{ margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.3px; padding:0;line-height:1.25; } #dlg-accrue .sub,#dlg-move .sub, #dlg-emp .sub,#dlg-sup .sub{ font-size:12.5px;color:var(--muted); margin:0 0 18px;line-height:1.5; } #dlg-accrue label,#dlg-move label, #dlg-emp label,#dlg-sup label{ display:flex;flex-direction:column;gap:7px; font-size:12.5px;font-weight:600;color:var(--muted); margin:0 0 13px;padding:0; } #dlg-accrue input,#dlg-accrue select, #dlg-move input,#dlg-move select, #dlg-emp input,#dlg-emp select, #dlg-sup input,#dlg-sup select{ font-family:inherit;font-size:15px;font-weight:500; padding:11px 13px;line-height:1.35; border:1.5px solid var(--line);border-radius:11px; background:var(--panel2);color:var(--text); width:100%;box-sizing:border-box; } #dlg-accrue input:focus,#dlg-accrue select:focus, #dlg-move input:focus,#dlg-move select:focus, #dlg-emp input:focus,#dlg-emp select:focus, #dlg-sup input:focus,#dlg-sup select:focus{ outline:0;border-color:var(--purple);background:var(--panel) } #dlg-accrue .err,#dlg-move .err, #dlg-emp .err,#dlg-sup .err{ display:none;font-size:12.5px;color:var(--bad); background:var(--bad-bg);border-radius:9px; padding:10px 13px;margin:0 0 12px; } #dlg-accrue .err.show,#dlg-move .err.show, #dlg-emp .err.show,#dlg-sup .err.show{display:block} /* переключатель внутри окна — с отступами */ #dlg-emp .seg,#dlg-sup .seg{margin:0 0 18px;padding:4px;width:100%;box-sizing:border-box;display:flex} #dlg-emp .seg button,#dlg-sup .seg button{flex:1;padding:9px 12px;font-size:13.5px} .acc-actions{display:flex;gap:9px;margin-top:6px;align-items:stretch} .acc-actions button{ flex:1 1 0;min-width:0;box-sizing:border-box; /* все свойства принудительно — иначе наследуются от формы */ height:46px!important; padding:0 10px!important; margin:0!important; border-radius:12px!important; font-family:inherit;font-size:14.5px!important;font-weight:650!important; line-height:46px!important; cursor:pointer; border:1.5px solid transparent; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; display:block; } .acc-actions .ghost{background:var(--panel2);color:var(--text);border-color:var(--line)} .acc-actions .primary{background:var(--purple);color:#fff;border-color:var(--purple)} .acc-actions .primary:hover{filter:brightness(1.07)} @media (max-width:420px){ .acc-actions button{font-size:13.5px;padding:12px 8px} } @media (max-width:640px){ #dlg-accrue,#dlg-move,#dlg-emp,#dlg-sup{width:calc(100% - 20px);max-width:none;margin:auto} #dlg-accrue .acc-form,#dlg-move .acc-form, #dlg-emp .acc-form,#dlg-sup .acc-form{padding:20px 18px 16px} #dlg-accrue h2,#dlg-move h2,#dlg-emp h2,#dlg-sup h2{font-size:17.5px} #dlg-accrue input,#dlg-accrue select, #dlg-move input,#dlg-move select, #dlg-emp input,#dlg-emp select, #dlg-sup input,#dlg-sup select{font-size:16px;padding:12px} } /* ==================== СПИСОК СЕРВЕРОВ ==================== */ .srv-item.is-cur{border-color:var(--accent);background:var(--accent-bg)} .ssl-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.3px; padding:1px 5px;margin-left:5px;border-radius:5px;background:var(--ok-bg); color:var(--ok);border:1px solid var(--ok-line);vertical-align:middle;line-height:1.4} #srv-history .srv-item{margin-bottom:6px} #srv-history .srv-item:last-child{margin-bottom:0} /* ==================== ПЕРЕВОД ==================== */ .typegrid button[data-type=move]{ border-color:var(--purple-line);color:var(--purple);background:var(--purple-bg)} .typegrid button[data-type=move]:hover{background:var(--purple);color:#fff;border-color:var(--purple)} .mv-bals{ display:flex;flex-direction:column;gap:4px; margin:0 0 14px;padding:10px 12px; background:var(--panel2);border:1px solid var(--line);border-radius:11px; } .mv-bal{display:flex;justify-content:space-between;gap:10px;font-size:12.5px} .mv-bal span{color:var(--muted)} .mv-bal b{font-variant-numeric:tabular-nums} .mv-bal b.pos{color:var(--ok)} .mv-bal b.neg{color:var(--bad)} /* правила окон — общие, см. выше */ /* ==================== ЛЮДИ ==================== */ .people-search{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .people-search input{flex:1;min-width:160px;font-family:inherit;font-size:14px; padding:10px 12px;border:1.5px solid var(--line);border-radius:10px; background:var(--panel2);color:var(--text)} .people-search select{font-family:inherit;font-size:14px;padding:10px 12px; border:1.5px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text)} .people-search input:focus,.people-search select:focus{outline:0;border-color:var(--accent)} .people-list{display:flex;flex-direction:column;gap:8px} .person{ display:flex;align-items:center;gap:11px;flex-wrap:wrap; padding:11px 13px;border:1px solid var(--line);border-radius:12px; background:var(--panel2); } .person .avatar{ width:34px;height:34px;flex:0 0 auto;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:11.5px;font-weight:700;background:var(--accent-bg);color:var(--accent); } .person-info{flex:1;min-width:120px;display:flex;flex-direction:column;gap:1px} .person-info b{font-size:14px;font-weight:650} .person-info b i{font-size:10.5px;font-weight:500;color:var(--muted);font-style:normal} .person-info span{font-size:11.5px;color:var(--muted)} .person-role{ font-size:11px;font-weight:650;padding:3px 9px;border-radius:7px; background:var(--panel);border:1px solid var(--line);color:var(--muted); white-space:nowrap; } .person-role.dev{color:var(--gold);border-color:var(--gold);background:var(--gold-bg)} .person-role.admin{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)} .person-role.accountant{color:var(--slate);border-color:var(--slate-line);background:var(--slate-bg)} .person-role.manager{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)} .person-role.master{color:var(--purple);border-color:var(--purple-line);background:var(--purple-bg)} .person-act{display:flex;gap:6px;flex:0 0 auto} .person-act button{padding:6px 11px;font-size:12px;border-radius:8px} .person-act .danger{color:var(--bad);border-color:var(--bad-line)} .people-add{margin-top:16px} .people-add summary{ cursor:pointer;padding:12px 14px;border-radius:11px; border:1.5px dashed var(--accent);background:var(--accent-bg);color:var(--accent); font-size:13.5px;font-weight:650;list-style:none; } .people-add summary::-webkit-details-marker{display:none} .people-add[open] summary{margin-bottom:12px} /* ВАЖНО: раскладку задаёт .userform (grid, две колонки). Здесь задаём ТОЛЬКО внешний вид полей. Раньше тут стоял display:flex — он перебивал grid, и форма разъезжалась: селекты выстраивались в один ряд, подписи наложились. Причина: правила одинаковой силы, а это ниже по файлу. */ .people-add .userform{align-items:start} .people-add .userform input,.people-add .userform select{ font-family:inherit;font-size:14px;padding:9px 11px; border:1.5px solid var(--line);border-radius:9px; background:var(--panel2);color:var(--text);min-width:0; } /* «Сервисный центр» и блок нового центра — на всю ширину формы */ .people-add .uf-svc, .people-add .uf-newsrs, .people-add .userform .ghost{grid-column:1 / -1} .people-add .uf-newsrs{display:flex;flex-direction:column;gap:8px} @media (max-width:640px){ .person{gap:9px;padding:10px 11px} .person-info{min-width:100%} .person-act{width:100%} .person-act button{flex:1} } /* метка «перевод» в истории */ .pill-t.move{background:var(--slate-bg);color:var(--slate);border:1px solid var(--slate-line)} /* ==================== СМЕНА РОЛИ В СПИСКЕ ==================== */ .person-role-sel{ font-family:inherit;font-size:11.5px;font-weight:650; padding:5px 8px;border-radius:8px;cursor:pointer; border:1px solid var(--line);background:var(--panel);color:var(--muted); flex:0 0 auto;max-width:130px; } .person-role-sel:focus{outline:0;border-color:var(--accent)} .person-role-sel:disabled{opacity:.55;cursor:default} .person-role-sel.dev{color:var(--gold);border-color:var(--gold);background:var(--gold-bg)} .person-role-sel.admin{color:var(--accent);border-color:var(--accent);background:var(--accent-bg)} .person-role-sel.accountant{color:var(--slate);border-color:var(--slate-line);background:var(--slate-bg)} .person-role-sel.manager{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)} .person-role-sel.master{color:var(--purple);border-color:var(--purple-line);background:var(--purple-bg)} #btn-hist-refresh{white-space:nowrap} #btn-hist-refresh:disabled{opacity:.6;cursor:default} /* ==================== ВСПЛЫВАЮЩИЕ ОКНА (общие) ==================== */ #dlg-in,#dlg-out{ border:0;border-radius:18px;padding:0; max-width:440px;width:calc(100% - 32px); background:var(--panel);color:var(--text); box-shadow:var(--sh-lg); max-height:90vh;overflow-y:auto; } #dlg-in::backdrop,#dlg-out::backdrop{background:rgba(20,30,25,.45)} #dlg-in .acc-form,#dlg-out .acc-form{padding:24px 24px 20px;display:flex;flex-direction:column;box-sizing:border-box} #dlg-in h2,#dlg-out h2{margin:0 0 6px;font-size:19px;font-weight:700;letter-spacing:-.3px} #dlg-in .sub,#dlg-out .sub{font-size:12.5px;color:var(--muted);margin:0 0 18px;line-height:1.5} #dlg-in label,#dlg-out label{display:flex;flex-direction:column;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 13px} #dlg-in input,#dlg-in select,#dlg-out input,#dlg-out select{ font-family:inherit;font-size:15px;font-weight:500;padding:11px 13px;line-height:1.35; border:1.5px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text); width:100%;box-sizing:border-box; } #dlg-in input:focus,#dlg-in select:focus,#dlg-out input:focus,#dlg-out select:focus{ outline:0;border-color:var(--accent);background:var(--panel) } #dlg-in select:disabled{opacity:.5;cursor:not-allowed} #dlg-in .err,#dlg-out .err{display:none;font-size:12.5px;color:var(--bad);background:var(--bad-bg);border-radius:9px;padding:10px 13px;margin:0 0 12px} #dlg-in .err.show,#dlg-out .err.show{display:block} #dlg-in .checks label,#dlg-out .checks label{color:var(--text);font-size:13.5px} #dlg-out #out-sum{color:var(--bad)} #dlg-in #in-sum{color:var(--ok);font-weight:700} #dlg-in input[type=checkbox],#dlg-out input[type=checkbox]{ width:19px;height:19px;padding:0;margin:0;border:0;background:none;flex:0 0 auto;accent-color:var(--accent);cursor:pointer } /* поле даты: нативный вид браузера, без своих отступов - иначе первые символы (день) сдвигаются и видна точка */ input[type=date],#dlg-in input[type=date]{ -webkit-appearance:auto;appearance:auto;min-width:0;width:100%;box-sizing:border-box; text-align:left;direction:ltr;font-variant-numeric:tabular-nums;overflow:visible; } input[type=date]::-webkit-datetime-edit{padding:0;text-indent:0} input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0} input[type=date]::-webkit-date-and-time-value{text-align:left;min-width:4.6em} #dlg-in .checks{margin-top:4px} #dlg-in .checks label{flex-direction:row;align-items:center;gap:11px;margin:0 0 10px;padding:12px 14px; border:1.5px solid var(--line);border-radius:11px;background:var(--panel);font-size:14px;font-weight:550;color:var(--text);cursor:pointer} #dlg-in .checks label:hover{border-color:var(--accent);background:var(--accent-bg)} #dlg-in .checks label:has(input:checked){border-color:var(--accent);background:var(--accent-bg);color:var(--accent)} #dlg-in .checks label span{flex:1 1 auto;line-height:1.35} #dlg-in .checks label i{font-size:11.5px;color:var(--muted)} #dlg-in .bamt{font-size:14px;font-weight:700;color:var(--bad);white-space:nowrap;margin-left:auto} #dlg-in .calc-box{border:1px solid var(--line);border-radius:12px;padding:4px 14px;margin:0 0 14px;background:var(--panel2)} #dlg-in .calc-box:empty{display:none} #dlg-in .cr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0; border-bottom:1px dashed var(--line);font-size:14px;color:var(--text);margin:0} #dlg-in .cr:last-child{border-bottom:0} #dlg-in .cr b{font-weight:700;color:var(--text)} #dlg-in .cr b.bad{color:var(--bad)} #dlg-in .cr b.ok{color:var(--ok)} @media (max-width:640px){ #dlg-in,#dlg-out{width:calc(100% - 20px);max-width:none;margin:auto} #dlg-in .acc-form,#dlg-out .acc-form{padding:20px 18px 16px} #dlg-in h2,#dlg-out h2{font-size:17.5px} #dlg-in input,#dlg-in select,#dlg-out input,#dlg-out select{font-size:16px;padding:12px} } /* ==================== ТЕМА «2027» (новогодняя) ==================== Отдельный набор переменных. Не трогает светлую и ночную: они описаны выше и работают как раньше. */ :root[data-theme="ny"]{ --bg:#0f1a24; --panel:#16232f; --panel2:#1b2a38; --line:#2a3c4d; --line2:#223244; --text:#dfe8ef; --muted:#93a5b5; --muted2:#6d8194; --accent:#4a9fd8; --accent-h:#5db1e6; --accent-bg:#152638; --ok:#5cc99a; --ok-bg:#132a25; --ok-line:#2a5145; --bad:#e0736c; --bad-bg:#2b1a1c; --bad-line:#553034; --purple:#a08fd0; --purple-bg:#1e1a2e; --purple-line:#3f3659; --slate:#89a3b8; --slate-bg:#18242e; --slate-line:#2f4150; --warn:#d9a55f; --gold:#e8c06a; --gold-bg:#2a2416; --r:12px; --r-lg:18px; --sh:0 1px 3px rgba(0,0,0,.3); --sh-lg:0 8px 28px rgba(0,0,0,.45); } /* лёгкий зимний оттенок фона — только в этой теме */ :root[data-theme="ny"] body{ background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(74,159,216,.10), transparent 70%), radial-gradient(ellipse 700px 400px at 85% 105%, rgba(160,143,208,.08), transparent 70%), var(--bg); background-attachment:fixed; } /* золотая полоска у заголовков карточек */ :root[data-theme="ny"] .card h2{ color:var(--text); } :root[data-theme="ny"] .card{ border-color:var(--line); box-shadow:var(--sh), inset 0 1px 0 rgba(232,192,106,.06); } /* логотип и активная вкладка — золотом */ :root[data-theme="ny"] nav.tabs button.on{ box-shadow:0 2px 12px rgba(232,192,106,.18); } /* снежинки: слой поверх, но не перехватывает нажатия */ #ny-snow{ position:fixed; inset:0; pointer-events:none; z-index:60; display:none; } :root[data-theme="ny"] #ny-snow{ display:block; } /* печать всегда на белом — снег и цвета не мешают */ @media print{ #ny-snow{ display:none!important } :root[data-theme="ny"] body{ background:#fff!important } } /* если человек просил меньше движения — снег не показываем */ @media (prefers-reduced-motion: reduce){ #ny-snow{ display:none!important } } /* ==================== СКАЧАТЬ ПРИЛОЖЕНИЕ (экран входа) ==================== */ .apk-link{ display:flex;align-items:center;gap:11px; margin-top:14px;padding:11px 14px; border:1.5px solid var(--line);border-radius:12px; background:var(--panel2);color:var(--text); text-decoration:none;transition:all .14s; } .apk-link:hover{border-color:var(--accent);background:var(--accent-bg)} .apk-link:active{transform:scale(.995)} .apk-link .apk-ico{ display:flex;align-items:center;justify-content:center; width:32px;height:32px;flex:0 0 auto;border-radius:9px; background:var(--accent);color:#fff;font-size:15px;line-height:1; } .apk-link .apk-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .apk-link .apk-txt b{font-size:13.5px;font-weight:650} .apk-link .apk-txt i{font-size:11px;color:var(--muted);font-style:normal} @media (max-width:640px){ .apk-link{padding:10px 12px} .apk-link .apk-txt b{font-size:13px} } /* ==================== ВРЕМЯ СИНХРОНИЗАЦИИ В МЕНЮ ==================== */ /* «синхронизировано в 20:16» или «нет связи 5 мин» — видно, не открывая настройки */ .um-sync{ display:block;font-size:11px;font-style:normal;margin-top:2px; color:var(--muted);font-variant-numeric:tabular-nums; } .um-sync.off{color:var(--bad)} .um-sync.ok{color:var(--ok)} /* ==================== ПЛИТКИ: ТЕКСТ НЕ ПРОПАДАЕТ ПРИ НАЖАТИИ ==================== */ /* Раньше при нажатии фон плитки закрашивался цветом типа, а текст внутри span оставался того же цвета — надпись «исчезала». Теперь принудительно белый текст на всех вложенных элементах активной плитки. */ .typegrid button.on, .typegrid button.on .ico, .typegrid button.on > span, .typegrid button.on > span:not(.ico):not(.sub2){ color:#fff !important; } .typegrid button.on .sub2{color:rgba(255,255,255,.85) !important} /* и на время нажатия — тоже читаемо */ .typegrid button:active, .typegrid button:active .ico, .typegrid button:active > span{color:inherit} .typegrid button[data-type]:active{filter:brightness(.94)} /* убираем синюю рамку выделения на телефоне */ .typegrid button{-webkit-tap-highlight-color:transparent} /* ==================== ВКЛАДКА «ВВОД»: БЕЗ ДУБЛИРОВАНИЯ ФОРМЫ ==================== */ /* Формы ввода открываются окнами. Встроенная форма внизу нужна только для «Списать» — остальное время она скрыта, чтобы не было двух форм сразу. */ #tab-vvod .card.inline-hidden > *:not(h2):not(#vvod-hint):not(.typegrid){ display:none !important; } /* ==================== СПИСОК ПОСТАВЩИКОВ В ОКНЕ ==================== */ /* Системный список (datalist) на телефоне разворачивался на полэкрана и уезжал вниз. Свой список: компактный, сразу под полем, с прокруткой. */ .sup-sug{ margin-top:6px; max-height:148px;overflow-y:auto; border:1px solid var(--line);border-radius:12px; background:var(--panel2); -webkit-overflow-scrolling:touch; } .sup-sug[hidden]{display:none} .sup-sug button{ display:block;width:100%;text-align:left; padding:10px 12px;border:0;background:none; font-family:inherit;font-size:14.5px;color:var(--text); cursor:pointer;border-bottom:1px solid var(--line); -webkit-tap-highlight-color:transparent; } .sup-sug button:last-child{border-bottom:0} .sup-sug button:hover,.sup-sug button:active{background:var(--panel)} /* ==================== ПАНЕЛЬ ЛЮДЕЙ: СЕРВИСНЫЙ ЦЕНТР ==================== */ /* Раньше в карточке сотрудника не было видно, к какому сервисному центру он привязан, и переключить его было нельзя. Теперь сервис — часть карточки. */ .uf-row{display:flex;gap:8px;flex-wrap:wrap} .uf-row > *{flex:1 1 140px;min-width:0} .uf-svc{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted); font-weight:600;margin-top:2px} .uf-svc select{font-size:14px;font-weight:500;color:var(--text)} .uf-newsrs{display:flex;flex-direction:column;gap:8px;padding:11px 13px; border:1px dashed var(--accent);border-radius:11px;background:var(--accent-bg)} .uf-hint{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.45} /* строка «сервисный центр» в карточке человека */ .person-svc{display:flex;align-items:center;gap:7px;flex-wrap:wrap; flex:1 1 100%;margin-top:2px;padding-top:9px;border-top:1px dashed var(--line)} .person-svc-lbl{font-size:11px;color:var(--muted);font-weight:650;letter-spacing:.02em} .person-svc select{font-size:12.5px;padding:5px 8px;border-radius:8px; border:1px solid var(--line);background:var(--panel);color:var(--text); font-weight:600;max-width:230px} .person-svc select:disabled{opacity:.6;cursor:not-allowed} .person-svc .svc-badge{font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:20px; background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent)} .person-svc .svc-warn{font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:20px; background:var(--warn-bg,#3a2b10);color:var(--warn,#e0a030);border:1px solid var(--warn,#e0a030)} /* предупреждение о том, что человек не привязан ни к чему */ .people-warn{margin:10px 0 0;padding:11px 14px;border-radius:11px; border:1px solid var(--warn,#e0a030);background:rgba(224,160,48,.09); font-size:13px;line-height:1.5} .people-warn b{color:var(--warn,#e0a030)} /* ---- подписи типов в истории: счёт и оплата поставщику ---- */ /* Счёт — это не деньги, а обязательство: синий, чтобы не путать с выплатой. Оплата — реальные ушедшие деньги: зелёный, как приход по смыслу не подходит, поэтому отдельный нейтральный цвет. */ .pill-t.inv{background:var(--slate-bg);color:var(--slate);border:1px solid var(--slate-line)} .pill-t.pay{background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok)} /* ---- полоса обновления приложения ---- */ /* Вторая строка мелким шрифтом: откуда взялся номер версии. Раньше было непонятно, «у вас 0.11.37» — это телефон старый или сервер врёт. Теперь написано прямо. */ #app-update-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .upd-lines{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .upd-hint{font-size:11.5px;color:var(--muted);font-weight:500} /* ---- поля сумм: пустое поле, подсказка «0» серым ---- */ input[inputmode="decimal"]::placeholder{ color: var(--muted); opacity: .7; }