/* ============================================================================ IxRocky — базовые стили. Обе темы через data-theme на . Mobile-first. Иконки — inline SVG, currentColor, stroke-width 1.6-1.8. Никаких эмоджи. ============================================================================ */ /* ── Токены ─────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { --bg: #0f1115; --surface: #171a21; --surface-2: #1f232c; --border: #262a36; --border-2: #333846; --text-1: #e7e9ef; --text-2: #b3b8c4; --text-3: #7a808c; --nav-bg: #131620; /* серый нейтральный сайдбар */ --nav-hover: #1c202b; --nav-active: #232836; --accent: #3b82f6; /* базовый — синий; поменяем, когда решишь */ --accent-hi: #2b6ee0; --danger: #ef4444; --success: #10b981; --focus: #3b82f6; --shadow-1: 0 4px 14px rgba(0,0,0,.35); --radius: 10px; } :root[data-theme="light"] { --bg: #f5f6f8; --surface: #ffffff; --surface-2: #f0f2f6; --border: #e3e6ec; --border-2: #d0d5dd; --text-1: #121620; --text-2: #3d4453; --text-3: #6b7180; --nav-bg: #edeef2; --nav-hover: #e2e4ea; --nav-active: #d8dbe3; --accent: #2563eb; --accent-hi: #1d4ed8; --danger: #dc2626; --success: #059669; --focus: #2563eb; --shadow-1: 0 4px 14px rgba(15,23,42,.08); } /* ── Сброс + типографика ───────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box } html,body{ margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--text-1); font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:15px; line-height:1.45; font-feature-settings:"tnum" 1, "kern" 1; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } h1,h2,h3{ margin:0 0 12px; line-height:1.25; letter-spacing:-.01em } h1{ font-size:22px; font-weight:600 } h2{ font-size:18px; font-weight:600 } h3{ font-size:16px; font-weight:600 } p{ margin:0 0 12px; color:var(--text-2) } a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline } ::selection{ background:var(--accent); color:#fff } /* ── Кнопки ────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 14px; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:8px; font:inherit; font-weight:500; font-size:14px; cursor:pointer; transition:background .12s, border-color .12s, color .12s; } .btn:hover{ background:var(--accent-hi); border-color:var(--accent-hi) } .btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px } .btn.ghost{ background:transparent; color:var(--text-1); border-color:var(--border-2); } .btn.ghost:hover{ background:var(--surface-2); border-color:var(--border-2) } .btn.small{ height:32px; padding:0 10px; font-size:13px; vertical-align:middle } /* Чип-чекбокс для мультивыбора конкурентов — фиксированная высота, вертикальный центр */ .chk-chip{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; box-sizing:border-box; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:13px; line-height:1; cursor:pointer; white-space:nowrap; transition: background .12s, border-color .12s; vertical-align:middle; } .chk-chip:hover{ border-color:var(--border-2) } .chk-chip input{ margin:0; accent-color: var(--accent); width:14px; height:14px; flex:none } .chk-chip > span{ line-height:1; display:inline-block } .chk-chip:has(input:checked){ background: color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color:var(--accent) } .btn.small .icon{ width:14px; height:14px } .btn.small .icon svg{ width:14px; height:14px } .btn{ vertical-align:middle } /* ── Поля ввода ────────────────────────────────────────────────────────── */ .field{ display:block; margin:0 0 14px } .field > .label{ display:block; margin:0 0 6px; font-size:12px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; } .input{ width:100%; height:40px; padding:0 12px; background:var(--surface); color:var(--text-1); border:1px solid var(--border); border-radius:8px; font:inherit; font-size:14px; outline:none; transition:border-color .12s, background .12s; } .input:focus{ border-color:var(--accent) } .input::placeholder{ color:var(--text-3) } .err{ color:var(--danger); font-size:13px; min-height:1em; margin-top:8px } /* ── Иконки (утилита) ──────────────────────────────────────────────────── */ .icon{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; color:currentColor; flex:none } .icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round } /* ── Login страница (Apple-glass) ──────────────────────────────────────── */ .login-wrap{ position:relative; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:16px; overflow:hidden; } /* Живой градиентный фон, из-за которого blur заметен */ .login-wrap::before{ content:""; position:absolute; inset:-20%; background: radial-gradient(35% 40% at 20% 25%, color-mix(in oklab, var(--accent) 55%, transparent), transparent 60%), radial-gradient(30% 35% at 80% 30%, color-mix(in oklab, #a855f7 45%, transparent), transparent 60%), radial-gradient(40% 45% at 60% 85%, color-mix(in oklab, #10b981 40%, transparent), transparent 60%), var(--bg); filter:saturate(1.05); animation:bgshift 22s ease-in-out infinite alternate; z-index:0; } @keyframes bgshift{ 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-2%,1%,0) scale(1.03); } 100% { transform:translate3d(2%,-1%,0) scale(1.02); } } .login-box{ position:relative; z-index:1; width:100%; max-width:380px; padding:24px 22px; background: color-mix(in oklab, var(--surface) 62%, transparent); border:1px solid color-mix(in oklab, var(--text-1) 12%, transparent); border-radius:18px; box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in oklab, #fff 14%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); animation:fadeUp .5s ease-out both; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } } .login-brand{ display:flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--text-1); } .login-brand .logo{ width:28px; height:28px; color:var(--accent) } .login-brand .name{ font-size:18px; font-weight:600; letter-spacing:.2px } .login-hint{ color:var(--text-3); font-size:13px; margin-bottom:14px } .theme-toggle{ position:fixed; top:14px; right:14px; width:36px; height:36px; border-radius:10px; background:var(--surface); color:var(--text-2); border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .12s, color .12s, border-color .12s; } .theme-toggle:hover{ color:var(--text-1); border-color:var(--border-2) } .theme-toggle:focus-visible{ outline:2px solid var(--focus); outline-offset:2px } /* ── App-shell (мобилка → топбар; десктоп → сайдбар) ───────────────────── */ .app-shell{ display:grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height:100dvh; } .topbar{ display:flex; align-items:center; gap:12px; height:52px; padding:0 14px; background:var(--nav-bg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; } .topbar .brand{ display:flex; align-items:center; gap:8px; font-weight:600 } .topbar .brand .logo{ width:22px; height:22px; color:var(--accent) } .topbar .spacer{ flex:1 } .topbar .iconbtn{ width:40px; height:40px; border-radius:10px; background:var(--surface-2); color:var(--text-1); border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .topbar .iconbtn:hover{ background:var(--nav-hover); color:var(--text-1); border-color:var(--border-2) } .topbar .iconbtn svg{ width:22px; height:22px } .topbar .iconbtn.hamburger{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 40%, var(--border)); } .main{ padding:16px; max-width:100%; } /* Мобилка: сайдбар — выдвижной оверлей */ .sidebar{ position:fixed; inset:52px 0 0 0; background:var(--nav-bg); border-right:1px solid var(--border); transform:translateX(-100%); transition:transform .18s ease; z-index:25; padding:8px 0; overflow-y:auto; width:min(280px, 84vw); } .sidebar.open{ transform:translateX(0) } .scrim{ position:fixed; inset:52px 0 0 0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .18s; z-index:24; } .scrim.show{ opacity:1; pointer-events:auto } .nav-section{ padding:12px 14px 4px; font-size:10px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3); } .nav-item{ display:flex; align-items:center; gap:10px; padding:9px 14px; color:var(--text-2); font-size:14px; border-left:3px solid transparent; cursor:pointer; transition:color .12s, background .12s, border-color .12s; } .nav-item:hover{ background:var(--nav-hover); color:var(--text-1) } .nav-item.active{ background:var(--nav-active); color:var(--accent); border-left-color:var(--accent); } .nav-item .icon{ width:16px; height:16px } .user-chip{ display:flex; align-items:center; gap:10px; padding:8px 12px; min-height:44px; background:var(--surface-2); color:var(--text-1); border:1px solid var(--border); border-radius:10px; font-size:13px; min-width:0; /* важно для flex-child, чтобы word-wrap работал */ } .user-chip .user-body{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; } .user-chip .user-name{ font-weight:500; word-break:break-word; overflow-wrap:anywhere; } .user-chip .role{ color:var(--text-3); font-size:11px; text-transform:uppercase; letter-spacing:.4px; margin-top:2px; } .user-actions{ display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--border); } .user-actions .actbtn{ flex:1; height:36px; border-radius:8px; background:transparent; color:var(--text-2); border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; font:inherit; font-size:12px; font-weight:500; padding:0 8px; transition:background .12s, color .12s, border-color .12s; } .user-actions .actbtn:hover{ background:var(--nav-hover); color:var(--text-1); border-color:var(--border-2) } .user-actions .actbtn .icon{ width:16px; height:16px } .user-actions .actbtn.danger:hover{ color:var(--danger); border-color:var(--danger) } /* ── Десктоп: сайдбар зафиксирован слева ───────────────────────────────── */ @media (min-width: 900px){ .app-shell{ grid-template-columns: 260px 1fr; grid-template-rows: 1fr; } .topbar{ grid-column: 1 / -1; display:none; /* десктоп: топбара нет, всё в сайдбаре */ } .sidebar{ position:sticky; top:0; align-self:start; height:100dvh; transform:none; border-right:1px solid var(--border); width:auto; display:flex; flex-direction:column; overflow-y:auto; } .scrim{ display:none } .main{ padding:24px 32px } .hamburger{ display:none } } @media (max-width: 899px){ .desktop-only{ display:none !important } } /* ── Welcome splash (после успешного логина) ──────────────────────────── */ .welcome{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); opacity:0; pointer-events:none; transition: opacity .55s ease-out; } .welcome.show{ opacity:1; pointer-events:auto } .welcome.leave{ opacity:0; transition: opacity .7s ease-in } .welcome-card{ text-align:center; padding:34px 30px; max-width:440px; width:calc(100% - 32px); background: color-mix(in oklab, var(--surface) 55%, transparent); border: 1px solid color-mix(in oklab, var(--text-1) 12%, transparent); border-radius:22px; box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in oklab, #fff 14%, transparent); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); transform: translateY(14px) scale(.975); animation: welcomeIn .75s .08s cubic-bezier(.2,.65,.25,1) forwards; } @keyframes welcomeIn{ to{ transform: translateY(0) scale(1); } } .welcome-icon{ width:60px; height:60px; margin:0 auto 16px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent); animation: pop .8s .2s cubic-bezier(.2,.65,.25,1) both; } .welcome-icon svg{ width:30px; height:30px } @keyframes pop{ 0% { transform:scale(.55); opacity:0 } 60% { transform:scale(1.06); opacity:1 } 100% { transform:scale(1); opacity:1 } } .welcome-name{ animation: nameIn .8s .35s cubic-bezier(.2,.65,.25,1) both; } @keyframes nameIn{ from{ opacity:0; transform: translateY(6px) } to { opacity:1; transform: translateY(0) } } .welcome-title{ color:var(--text-2); font-size:14px; letter-spacing:.4px; text-transform:uppercase; margin-bottom:6px; } .welcome-name{ color:var(--text-1); font-size:22px; font-weight:600; letter-spacing:-.01em; } /* ── Плитки на главной ─────────────────────────────────────────────────── */ .home-tiles{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } .home-tile{ display:flex; align-items:center; gap:14px; padding:16px 14px; background:var(--surface); border:1px solid var(--border); border-radius:14px; color:var(--text-1); text-decoration:none; transition: transform .12s ease, border-color .12s, background .12s; min-height:76px; -webkit-tap-highlight-color: transparent; } .home-tile:hover, .home-tile:focus-visible{ border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); transform: translateY(-1px); background:var(--surface-2); } .home-tile:active{ transform:translateY(0) } .home-tile__icon{ width:44px; height:44px; flex:0 0 44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--accent) 15%, transparent); color: var(--accent); } .home-tile__icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7 } .home-tile__body{ flex:1; min-width:0 } .home-tile__title{ font-weight:600; font-size:16px; margin-bottom:2px } .home-tile__desc{ color:var(--text-3); font-size:13px; word-break:break-word } .home-tile__chev{ color:var(--text-3); font-size:24px; line-height:1; padding-left:6px; opacity:.7; transition: transform .15s, color .12s; } .home-tile:hover .home-tile__chev{ color:var(--accent); transform:translateX(2px) } @media (max-width: 640px){ .home-tiles{ grid-template-columns:1fr; gap:10px } .home-tile{ min-height:72px; padding:14px 12px } .home-tile__title{ font-size:15px } } /* ── Страница парсингов ────────────────────────────────────────────────── */ .page-head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .page-head h1{ margin:0 } .p-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) } .p-card{ padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; display:flex; flex-direction:column; gap:10px; transition: transform .15s ease, border-color .12s; } .p-card:hover{ border-color:var(--border-2); transform: translateY(-1px) } .p-card__head{ display:flex; align-items:center; gap:10px } .p-card__title{ font-weight:600; font-size:15px } .p-card__meta{ display:flex; flex-direction:column; gap:2px; color:var(--text-3); font-size:12px } .p-card__foot{ margin-top:auto; padding-top:6px } .p-info{ margin-top:16px; padding:12px 14px; background:var(--surface); border:1px solid var(--border); border-radius:10px; display:grid; gap:10px 24px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); } .p-info__k{ display:block; color:var(--text-3); font-size:11px; text-transform:uppercase; letter-spacing:.4px } .p-info__v{ display:block; color:var(--text-1); font-size:14px; word-break:break-word } .p-info__actions{ grid-column:1 / -1; display:flex; gap:8px } .tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); margin:0 0 16px } .tab{ background:transparent; border:none; color:var(--text-2); padding:10px 14px; font:inherit; font-size:14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition: color .12s, border-color .12s; } .tab:hover{ color:var(--text-1) } .tab.active{ color:var(--accent); border-bottom-color:var(--accent); font-weight:500 } .row-actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; } /* Панель тулбара — все контролы одной высоты, ровно выровнены */ .toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap } .toolbar .toolbar-lbl{ color:var(--text-3); font-size:12px; margin-right:2px } .toolbar .toolbar-ctrl{ height:38px; padding:0 12px; font-size:14px } .toolbar select.toolbar-ctrl{ appearance:none; padding-right:28px; background: var(--surface) linear-gradient(45deg, transparent 50%, var(--text-3) 50%) calc(100% - 14px) 52% / 5px 5px no-repeat, var(--surface) linear-gradient(-45deg, transparent 50%, var(--text-3) 50%) calc(100% - 9px) 52% / 5px 5px no-repeat; } .toolbar .btn{ height:38px } /* Таблицы */ .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch } .tbl{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:10px; font-size:13px; } .tbl th, .tbl td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top } .tbl thead th{ background:var(--surface-2); color:var(--text-3); font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; position:sticky; top:0; } .tbl tbody tr:last-child td{ border-bottom:none } .tbl tfoot td{ background:var(--surface-2); border-top:2px solid var(--border-2); font-weight:600; padding:12px } .tbl .left{ text-align:left } .tbl .right{ text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums } .tbl a{ color:var(--text-1) } .tbl a:hover{ color:var(--accent) } .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px } .small{ font-size:12px } .muted{ color:var(--text-3) } .ellipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100% } .badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:600; border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); } .badge.ok{ color:var(--success); border-color:color-mix(in oklab, var(--success) 40%, var(--border)) } .badge.off{ color:var(--danger); border-color:color-mix(in oklab, var(--danger) 40%, var(--border)) } .badge.running{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 40%, var(--border)) } .cheaper{ color:var(--danger) } .pricier{ color:var(--success) } .cell-clickable{ cursor:pointer; transition: background .12s } .cell-clickable:hover{ background: color-mix(in oklab, var(--accent) 8%, transparent) } .btn-icon-edit, .btn-icon-x{ width:26px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; line-height:1; border:1px solid var(--border); background:transparent; color:var(--text-2); cursor:pointer; vertical-align:middle; margin-left:4px; transition: background .12s, color .12s, border-color .12s; } .btn-icon-edit:hover{ color:var(--accent); border-color:var(--accent) } .btn-icon-x{ background:var(--danger); color:#fff; border-color:var(--danger); font-size:18px; font-weight:700; } .btn-icon-x:hover{ filter:brightness(1.08) } /* Галочка выплаты ЗП Даниила за день */ .dn-cell{ display:inline-flex; align-items:center; gap:8px; justify-content:flex-end } .pay-check{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; border:1px solid var(--border); background:transparent; cursor:pointer; font-size:14px; line-height:1; transition:background .12s, color .12s, border-color .12s; } .pay-check.on{ background:var(--success); border-color:var(--success); color:#fff; font-weight:700 } .pay-check.off{ background:transparent; color:var(--text-1); border-color:var(--border-2); opacity:.55 } .pay-check:hover{ filter:brightness(1.08) } .pay-check:disabled{ opacity:.5; cursor:wait } /* Кликабельная строка таблицы (аналитика по дням → операции за день) */ tr.row-click{ cursor:pointer; transition:background .1s } tr.row-click:hover{ background:var(--nav-hover) } .verified{ display:inline-block; color:var(--success); font-weight:700; margin-right:2px; font-size:12px; vertical-align:middle; } .ext{ display:inline-flex; vertical-align:middle; width:14px; height:14px; color:var(--text-3); margin-left:4px } .ext svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7 } .btn.danger{ background:var(--danger); border-color:var(--danger); color:#fff } .btn.danger:hover{ filter:brightness(1.05) } .btn.ghost.active{ border-color:var(--accent); color:var(--accent) } /* Модалка */ .modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); animation: fadeIn .2s ease-out; padding:16px; } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } .modal-box{ width:100%; max-width:460px; background: color-mix(in oklab, var(--surface) 92%, transparent); border:1px solid var(--border); border-radius:14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); display:flex; flex-direction:column; } .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); } .modal-body{ padding:16px } .modal-foot{ padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; } /* Настройки: сеточка секций */ .settings-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); } .settings-grid section{ margin-top:0 } /* Список назначений доступов в модалке */ .access-list{ display:flex; flex-direction:column; gap:6px } .access-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; } .access-row__label{ flex:1; font-size:13px; word-break:break-word } .access-row__radios{ display:flex; gap:12px; flex-wrap:wrap } .access-row__radios label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer } /* KPI-плитки для аналитики */ .kpi-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) } .kpi{ display:flex; align-items:center; gap:12px; padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:12px; } .kpi__icon{ width:38px; height:38px; border-radius:10px; background: color-mix(in oklab, var(--accent) 15%, transparent); color:var(--accent); display:flex; align-items:center; justify-content:center; } .kpi__icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7 } .kpi__body{ min-width:0 } .kpi__value{ font-size:22px; font-weight:600; font-variant-numeric: tabular-nums } .kpi__label{ color:var(--text-3); font-size:12px; text-transform:uppercase; letter-spacing:.4px } /* Мобильные полировки */ @media (max-width: 640px){ h1{ font-size:20px } h2{ font-size:16px } .main{ padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); } .topbar{ padding-top: env(safe-area-inset-top); height: calc(52px + env(safe-area-inset-top)); } .sidebar,.scrim{ inset: calc(52px + env(safe-area-inset-top)) 0 0 0 } .page-head{ flex-wrap:wrap; gap:10px; align-items:flex-start } .page-head h1{ font-size:18px; flex:1; min-width:0 } .page-head .btn.small{ order:2 } .p-info{ grid-template-columns:1fr } .settings-grid{ grid-template-columns:1fr } /* Модалка: full-screen c прилипающими header/footer, отступ под home indicator */ .modal{ padding:0; align-items:stretch } .modal-box{ max-width:none !important; border-radius:0; height:100dvh; width:100%; display:flex; flex-direction:column; } .modal-head{ position:sticky; top:0; z-index:5; background:var(--surface); border-bottom:1px solid var(--border); padding-top: env(safe-area-inset-top); } .modal-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:12px; } .modal-foot{ position:sticky; bottom:0; z-index:5; background:var(--surface); border-top:1px solid var(--border); padding-bottom: calc(12px + env(safe-area-inset-bottom)); display:flex; gap:8px; } .modal-foot .btn{ flex:1 } /* Таблицы */ .tbl{ font-size:13px } .tbl th, .tbl td{ padding:10px 10px } .tbl th{ font-size:10px } /* Первая колонка (обычно дата/название) — sticky при горизонтальном скролле */ .tbl-sticky-first .tbl th:first-child, .tbl-sticky-first .tbl td:first-child{ position:sticky; left:0; z-index:2; background:var(--surface); box-shadow: 1px 0 0 var(--border); } .tbl-sticky-first .tbl thead th:first-child{ background:var(--surface-2) } .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; scrollbar-width:none } .tabs::-webkit-scrollbar{ display:none } .tab{ padding:12px 14px; flex:none; font-size:14px } .row-actions{ align-items:flex-start; flex-direction:column; gap:8px } .toolbar{ width:100%; flex-wrap:wrap } .toolbar > *{ flex:none } .toolbar .input, .toolbar .btn{ flex:1; min-width:0 } .toolbar-ctrl{ height:44px !important; font-size:15px !important } .kpi-grid{ grid-template-columns:repeat(2, 1fr); gap:8px } .kpi{ padding:10px } .kpi__value{ font-size:16px } .kpi__label{ font-size:10px } .kpi__icon{ width:30px; height:30px } .kpi__icon svg{ width:16px; height:16px } /* Расходы: две таблицы в один столбец на мобилке */ #expTwo{ grid-template-columns:1fr !important } /* Хтмл-модалка расхода — full-screen */ .field .label{ font-size:12px } .input{ height:46px; font-size:16px } /* 16px — не зумит iOS Safari */ .btn{ height:46px; font-size:15px; min-width:44px } .btn.small{ height:38px; font-size:13px } /* День-строки в таблицах — вертикально */ .day-row td{ padding:6px } /* Кликабельные строки — комфортный тап */ tr.row-click td{ padding-top:14px; padding-bottom:14px } /* Тач-таргеты для галочки и иконок */ .pay-check{ width:34px; height:34px; font-size:18px } .btn-icon-edit, .btn-icon-x{ width:38px; height:38px; font-size:16px } .btn-icon-x{ font-size:22px } /* Список операций «карточками» вместо таблицы */ .op-list{ display:flex; flex-direction:column; gap:10px; padding:6px 0 } .op-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; } .op-card__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; } .op-card__kind{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.3px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-2); } .op-card__kind.work{ color:var(--accent); border-color:color-mix(in oklab, var(--accent) 40%, var(--border)) } .op-card__kind.part{ color:var(--success); border-color:color-mix(in oklab, var(--success) 40%, var(--border)) } .op-card__master{ color:var(--text-3); font-size:12px } .op-card__title{ color:var(--text-1); font-size:14px; word-break:break-word } .op-card__meta{ color:var(--text-3); font-size:12px; word-break:break-word } .op-card__nums{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; font-variant-numeric: tabular-nums; font-size:13px; } .op-card__nums div{ display:flex; flex-direction:column; gap:2px } .op-card__nums .l{ color:var(--text-3); font-size:10px; text-transform:uppercase; letter-spacing:.4px } .op-card__acts{ display:flex; gap:8px; margin-top:2px } .op-card__acts .btn{ flex:1 } } /* На десктопе список операций — тоже показываем компактно, но табличкой */ @media (min-width: 641px){ .op-list-mobile{ display:none } .op-list-desktop{ display:block } .mig-days-mobile{ display:none } .mig-days-desktop{ display:block } } @media (max-width: 640px){ .op-list-mobile{ display:block } .op-list-desktop{ display:none } .mig-days-mobile{ display:flex; flex-direction:column; gap:10px } .mig-days-desktop{ display:none } } /* Карточки табло МИГ (мобилка) */ .mig-day-card{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px; -webkit-tap-highlight-color: transparent; } .mig-day-card.row-click{ cursor:pointer; transition:background .12s, border-color .12s } .mig-day-card.row-click:active{ background:var(--surface-2); border-color:var(--border-2) } .mig-day-card__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .mig-day-card__date{ font-weight:700; font-size:15px } .mig-day-card__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 8px; font-variant-numeric: tabular-nums; font-size:13px; } .mig-day-card__grid > div{ display:flex; flex-direction:column; gap:2px; min-width:0 } .mig-day-card__grid .l, .mig-day-card__foot .l{ color:var(--text-3); font-size:10px; text-transform:uppercase; letter-spacing:.4px; } .mig-day-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px dashed var(--border); font-variant-numeric: tabular-nums; font-size:14px; } /* Планшет */ @media (min-width: 641px) and (max-width: 899px){ .kpi-grid{ grid-template-columns:repeat(2, 1fr) } .p-info{ grid-template-columns:1fr 1fr } } /* ── Уважение к prefers-reduced-motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important } .login-wrap::before{ animation:none } }