/* ============================================================================ Тема дашборда MakeBiz. Две палитры по макетам Cloud Design: светлая «Стекло» (1c) и тёмная «Обсидиан» (1a). Подключается ПЕРЕД стилями модуля: Переключение: , значение в localStorage. Правила слоя оформления идут через :root[data-theme] — специфичность выше, чем у стилей внутри модулей, поэтому переопределяют их. ========================================================================== */ /* ─── ТОКЕНЫ: СВЕТЛАЯ «СТЕКЛО» ─────────────────────────────────────────── */ :root, :root[data-theme="light"]{ --bg:#EFF5FF; --surface:rgba(255,255,255,.85); --surface-2:rgba(255,255,255,.6); --card-grad:linear-gradient(155deg,rgba(255,255,255,.85),rgba(255,255,255,.5)); --card-border:rgba(255,255,255,.95); --card-shadow:0 22px 45px -22px rgba(23,60,140,.4), inset 0 1px 0 rgba(255,255,255,.95); --card-shadow-hover:0 28px 56px -20px rgba(23,60,140,.5), inset 0 1px 0 rgba(255,255,255,.95); --shadow-sm:0 6px 14px -8px rgba(23,60,140,.3); --blur:blur(16px); --radius:22px; --radius-sm:16px; --radius-el:12px; --radius-cell:9px; --ink:#0B2B66; --ink-2:#16305F; --ink-strong:#03235F; --muted:#5D6F94; --muted-2:#8A93A6; --border:rgba(160,190,255,.5); --border-soft:rgba(93,111,148,.16); --accent:#074EE8; --accent-grad:linear-gradient(180deg,#1D55D6,#0A38A6); --accent-shadow:0 4px 12px rgba(7,78,232,.35); --hero-grad:linear-gradient(155deg,rgba(4,44,120,.94),rgba(3,35,95,.82)); --hero-ink:#fff; --hero-muted:#DCE6FF; --blue:#013CA4; --blue2:#074EE8; --bright:#074EE8; --green:#0B7A3E; --green-soft:#12934B; --amber:#9A6B00; --amber-soft:#E0A100; --orange:#B25012; --red:#C51929; --red-soft:#B01426; --teal:#0FA9A0; --violet:#5B3FC4; --steel:#9CB5DB; --muted2:#8A93A6; --chip:rgba(255,255,255,.6); --chip2:rgba(7,78,232,.08); --sh:var(--card-shadow); --sh-sm:var(--shadow-sm); --r-card:22px; --r-el:12px; --r-pill:999px; --font:'Golos Text','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; --sidebar-w:232px; --table-head:rgba(4,44,120,.92); --table-head-ink:#fff; --table-sticky:#F6F9FF; --table-total:rgba(7,78,232,.08); --table-total-border:rgba(7,78,232,.25); --table-total-sticky:#E9F0FF; --row-hover:rgba(7,78,232,.05); --row-line:rgba(93,111,148,.16); --heat-green:rgba(26,178,72,.15); --heat-green-ink:#0B7A3E; --heat-amber:rgba(224,161,0,.16); --heat-amber-ink:#9A6B00; --heat-orange:rgba(232,137,74,.2); --heat-orange-ink:#B25012; --heat-red:rgba(197,25,41,.14); --heat-red-ink:#B01426; --heat-empty:rgba(11,43,102,.05); --heat-empty-ink:#8A93A6; --heat-border:rgba(255,255,255,.85); --heat-lab:rgba(255,255,255,.55); --ch-plan:#AFC6EF; --ch-plan-op:1; --ch-fact-1:#2F6BFF; --ch-fact-2:#0540C2; --ch-line:#074EE8; --ch-line-fill:.08; --ch-plan-dash:#B77E00; --ch-fc-dash:#074EE8; --grid-line:rgba(93,111,148,.16); --grid-base:rgba(93,111,148,.35); --axis:#8A93A6; --axis-x:#5D6F94; --s1:#074EE8; --s2:#0FA9A0; --s3:#E0A100; --s4:#8B5CF6; --s5:#E8894A; --s6:#C51929; --track:rgba(11,43,102,.08); --track-inset:inset 0 1px 2px rgba(11,43,102,.18); --bar-green:linear-gradient(90deg,#0FA9A0,#2BD9CE); --bar-amber:linear-gradient(90deg,#E0A100,#F2B92C); --bar-red:linear-gradient(90deg,#C51929,#E4405F); --bar-green-ink:#0F8E86; --bar-amber-ink:#9A6B00; --bar-red-ink:#B01426; --tip-bg:linear-gradient(155deg,rgba(4,44,120,.94),rgba(3,35,95,.85)); --tip-ink:#DCE6FF; --tip-border:rgba(160,190,255,.5); --tip-shadow:0 18px 40px -14px rgba(7,50,150,.5), inset 0 1px 0 rgba(255,255,255,.3); --field-bg:rgba(255,255,255,.7); --field-border:rgba(255,255,255,.95); --field-shadow:0 4px 10px -6px rgba(23,60,140,.3); --focus:0 0 0 3px rgba(7,78,232,.15); --pill-green:rgba(26,178,72,.14); --pill-amber:rgba(224,161,0,.16); --pill-red:rgba(197,25,41,.12); --pill-border:rgba(255,255,255,.9); --empty-border:rgba(11,43,102,.25); --empty-bg:rgba(255,255,255,.4); --seg-bg:rgba(11,43,102,.06); --toggle-on:#03235F; --toggle-on-ink:#fff; --on-bg:#1D55D6; --on-ink:#fff; } /* ─── ТОКЕНЫ: ТЁМНАЯ «ОБСИДИАН» ────────────────────────────────────────── */ :root[data-theme="dark"]{ --bg:#050C1F; --surface:#0E2048; --surface-2:rgba(126,160,255,.06); --card-grad:linear-gradient(165deg,#0E2048 0%,#0A1735 55%,#070F28 100%); --card-border:rgba(126,160,255,.16); --card-shadow:inset 0 1px 0 rgba(170,198,255,.22), 0 22px 44px -20px rgba(1,5,20,.9); --card-shadow-hover:inset 0 1px 0 rgba(170,198,255,.3), 0 28px 56px -18px rgba(1,5,20,.95); --shadow-sm:0 12px 26px -18px rgba(1,5,20,.9); --blur:none; --radius:18px; --radius-sm:16px; --radius-el:12px; --radius-cell:9px; --ink:#F4F7FF; --ink-2:#DCE6FF; --ink-strong:#fff; --muted:#8AA0D4; --muted-2:#5C6F9E; --border:rgba(126,160,255,.35); --border-soft:rgba(126,160,255,.16); --accent:#4DA3FF; --accent-grad:linear-gradient(180deg,#2F6BFF,#0B47D0); --accent-shadow:0 4px 14px rgba(7,78,232,.45); --hero-grad:linear-gradient(90deg,rgba(7,78,232,.55),rgba(7,78,232,.16)); --hero-ink:#fff; --hero-muted:#8AA0D4; --blue:#2E5CD8; --blue2:#4DA3FF; --bright:#4DA3FF; --green:#3ED37B; --green-soft:#4EE690; --amber:#FFC940; --amber-soft:#FFD166; --orange:#FFAE78; --red:#FF6B7A; --red-soft:#FF8A97; --teal:#2BE3C4; --violet:#B7A4FF; --steel:#5C7099; --muted2:#5C6F9E; --chip:rgba(126,160,255,.06); --chip2:rgba(7,78,232,.16); --r-card:18px; --r-el:12px; --table-head:#0D1D44; --table-head-ink:#8AA0D4; --table-sticky:#0B1834; --table-total:rgba(7,78,232,.16); --table-total-border:rgba(126,160,255,.4); --table-total-sticky:#13275C; --row-hover:rgba(77,163,255,.08); --row-line:rgba(126,160,255,.12); --heat-green:rgba(62,211,123,.14); --heat-green-ink:#4EE690; --heat-amber:rgba(255,201,64,.14); --heat-amber-ink:#FFD166; --heat-orange:rgba(255,157,92,.16); --heat-orange-ink:#FFAE78; --heat-red:rgba(255,107,122,.16); --heat-red-ink:#FF8A97; --heat-empty:rgba(126,160,255,.05); --heat-empty-ink:#5C6F9E; --heat-border:rgba(126,160,255,.35); --heat-lab:rgba(126,160,255,.06); --ch-plan:#8FB0E8; --ch-plan-op:.35; --ch-fact-1:#4DA3FF; --ch-fact-2:#0B47D0; --ch-line:#4DA3FF; --ch-line-fill:.1; --ch-plan-dash:#FFC940; --ch-fc-dash:#4DA3FF; --grid-line:rgba(126,160,255,.12); --grid-base:rgba(126,160,255,.28); --axis:#5C6F9E; --axis-x:#8AA0D4; --s1:#4DA3FF; --s2:#3ED37B; --s3:#FFC940; --s4:#C77DFF; --s5:#FF6B7A; --s6:#58E0D0; --track:rgba(126,160,255,.1); --track-inset:inset 0 1px 3px rgba(0,0,0,.55); --bar-green:linear-gradient(90deg,#1FB9AF,#2BD9CE); --bar-amber:linear-gradient(90deg,#E0A100,#FFC940); --bar-red:linear-gradient(90deg,#D8404F,#FF6B7A); --bar-green-ink:#2BD9CE; --bar-amber-ink:#FFC940; --bar-red-ink:#FF8A97; --tip-bg:linear-gradient(165deg,#15284F,#0B1834); --tip-ink:#C9D6F2; --tip-border:rgba(126,160,255,.32); --tip-shadow:0 18px 40px -14px rgba(1,5,20,.9), 0 0 24px rgba(77,163,255,.12); --field-bg:rgba(5,12,31,.6); --field-border:rgba(126,160,255,.22); --field-shadow:none; --focus:0 0 0 3px rgba(77,163,255,.18); --pill-green:rgba(62,211,123,.14); --pill-amber:rgba(255,201,64,.14); --pill-red:rgba(255,107,122,.14); --pill-border:rgba(126,160,255,.3); --empty-border:rgba(126,160,255,.3); --empty-bg:rgba(126,160,255,.04); --seg-bg:rgba(5,12,31,.55); --toggle-on:#4DA3FF; --toggle-on-ink:#04122B; --on-bg:#2F6BFF; --on-ink:#fff; } /* ─── ФОН ПОЛОТНА ──────────────────────────────────────────────────────── */ html{background:var(--bg)} :root[data-theme="light"] body{ background-color:#EFF5FF !important; background-image: radial-gradient(44vw 44vw at 6% -8%, rgba(127,168,255,.45), transparent 62%), radial-gradient(40vw 40vw at 98% 4%, rgba(88,224,208,.34), transparent 62%), radial-gradient(46vw 46vw at 80% 98%, rgba(167,139,250,.32), transparent 62%), linear-gradient(140deg,#E4EDFF 0%,#EFF5FF 55%,#F5F9FF 100%) !important; background-attachment:fixed !important; color:var(--ink); } :root[data-theme="dark"] body{ background-color:#050C1F !important; background-image: linear-gradient(rgba(122,156,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(122,156,255,.05) 1px,transparent 1px) !important; background-size:28px 28px !important; background-attachment:fixed !important; color:var(--ink); } /* ─── КАРТОЧКИ И ПАНЕЛИ ────────────────────────────────────────────────── */ :root[data-theme] .card, :root[data-theme] .kpi:not(.blue), :root[data-theme] .kcard, :root[data-theme] .hcell, :root[data-theme] .scard, :root[data-theme] .dir, :root[data-theme] .dcard, :root[data-theme] .acard, :root[data-theme] .card2, :root[data-theme] .prog, :root[data-theme] .rec, :root[data-theme] .emp, :root[data-theme] .attc, :root[data-theme] .relc, :root[data-theme] .frame-wrap{ background:var(--card-grad); border:1px solid var(--card-border); border-radius:var(--radius); box-shadow:var(--card-shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } :root[data-theme] .hcell, :root[data-theme] .scard{border-radius:var(--radius-sm)} :root[data-theme] .dir:hover, :root[data-theme] .acard:hover{box-shadow:var(--card-shadow-hover);transform:translateY(-2px)} :root[data-theme] .kpi.blue{ background:var(--hero-grad);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--card-shadow)} :root[data-theme] .kpi.blue .kl, :root[data-theme] .kpi.blue .ks{color:var(--hero-muted)} :root[data-theme] .kpi.blue .kv, :root[data-theme] .kpi.blue .ks b{color:var(--hero-ink)} :root[data-theme] .controls, :root[data-theme] .topbar, :root[data-theme] .sidebar{ background:var(--card-grad); border-color:var(--card-border); box-shadow:var(--shadow-sm); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); } :root[data-theme] .frame-note{background:transparent;border-color:var(--card-border);color:var(--muted)} /* ─── МЕНЮ ─────────────────────────────────────────────────────────────── */ :root[data-theme] .nav a{color:var(--ink-2);border-radius:10px} :root[data-theme] .nav a:hover{background:var(--chip2)} :root[data-theme] .nav a.active{ background:var(--hero-grad);color:#fff;border:1px solid var(--border); box-shadow:var(--accent-shadow)} :root[data-theme] .nav .group{color:var(--muted-2)} :root[data-theme] .badge.live,:root[data-theme] .sb.live,:root[data-theme] .dir .badge{ background:var(--pill-green);border:1px solid var(--pill-border);color:var(--green)} :root[data-theme] .badge.demo,:root[data-theme] .sb.demo,:root[data-theme] .dir .badge.demo{ background:var(--pill-amber);border:1px solid var(--pill-border);color:var(--amber)} :root[data-theme] .badge.stub{background:var(--chip);border:1px solid var(--pill-border);color:var(--muted)} :root[data-theme] .nav a.active .badge{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff} /* ─── СЕГМЕНТЫ, ТАБЫ, ЧИПЫ ─────────────────────────────────────────────── */ :root[data-theme] .seg, :root[data-theme] .tabs{background:var(--seg-bg);border:1px solid var(--card-border);border-radius:var(--radius-el);padding:3px;gap:2px} :root[data-theme] .seg button, :root[data-theme] .periods button{background:transparent;color:var(--muted);border-radius:9px;font-weight:700} :root[data-theme] .seg button:hover, :root[data-theme] .periods button:hover{color:var(--ink)} :root[data-theme] .seg button.on, :root[data-theme] .periods button.on, :root[data-theme] .tabs button.on, :root[data-theme] .tab.on, :root[data-theme] .per button.on, :root[data-theme] button.on{ background:var(--accent-grad)!important;color:#fff!important; box-shadow:var(--accent-shadow);border-radius:9px} :root[data-theme] .fchip, :root[data-theme] .chip-f{ background:var(--chip);border:1px solid var(--card-border);color:var(--muted); border-radius:999px;box-shadow:var(--shadow-sm)} :root[data-theme] .fchip.on, :root[data-theme] .chip-f.on{background:var(--accent-grad);border-color:var(--border);color:#fff;box-shadow:var(--accent-shadow)} /* ─── ТАБЛИЦЫ ──────────────────────────────────────────────────────────── */ :root[data-theme] table th{ background:var(--table-head);color:var(--table-head-ink); font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:8px 10px} :root[data-theme] table td{padding:8px 10px;border-bottom:1px solid var(--row-line);color:var(--ink-2)} :root[data-theme] tbody tr:hover td{background:var(--row-hover)} :root[data-theme] tr.total td, :root[data-theme] tr.sum td, :root[data-theme] tfoot td{ background:var(--table-total);border-top:1px solid var(--table-total-border); font-weight:700;color:var(--ink)} :root[data-theme] .neg,:root[data-theme] .bad{color:var(--red);font-weight:700} :root[data-theme] .pos,:root[data-theme] .good{color:var(--green);font-weight:700} /* ─── ТЕПЛОВАЯ КАРТА ───────────────────────────────────────────────────── */ :root[data-theme] .heat{border-collapse:separate;border-spacing:3px} :root[data-theme] .heat td{border-radius:var(--radius-cell);border:1px solid var(--heat-border);padding:6px;font-weight:800} :root[data-theme] .heat td.lab{background:var(--heat-lab);color:var(--ink);font-weight:600;padding:7px 10px;border-color:transparent} :root[data-theme] .heat td i{display:block;font-size:10px;font-weight:600;opacity:.75;font-style:normal;margin-top:1px} :root[data-theme] .heat td.h-g{background:var(--heat-green);color:var(--heat-green-ink)} :root[data-theme] .heat td.h-a{background:var(--heat-amber);color:var(--heat-amber-ink)} :root[data-theme] .heat td.h-o{background:var(--heat-orange);color:var(--heat-orange-ink)} :root[data-theme] .heat td.h-r{background:var(--heat-red);color:var(--heat-red-ink)} :root[data-theme] .heat td.h-0{background:var(--heat-empty);color:var(--heat-empty-ink)} /* ─── ПОЛОСЫ ───────────────────────────────────────────────────────────── */ :root[data-theme] .track,:root[data-theme] .bar-track{ background:var(--track);border-radius:99px;box-shadow:var(--track-inset);overflow:hidden} :root[data-theme] .fill.g,:root[data-theme] .bar.g{background:var(--bar-green)} :root[data-theme] .fill.a,:root[data-theme] .bar.a{background:var(--bar-amber)} :root[data-theme] .fill.r,:root[data-theme] .bar.r{background:var(--bar-red)} /* ─── МОДАЛКА ──────────────────────────────────────────────────────────── */ :root[data-theme] .modal-bg,:root[data-theme] .overlay-modal{ background:rgba(9,20,60,.35);backdrop-filter:blur(6px)} :root[data-theme="dark"] .modal-bg,:root[data-theme="dark"] .overlay-modal{ background:rgba(2,6,16,.62);backdrop-filter:blur(4px)} :root[data-theme] .modal{ background:var(--card-grad);border:1px solid var(--card-border); border-radius:20px;box-shadow:0 40px 80px -30px rgba(3,20,60,.6); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} :root[data-theme="dark"] .modal{box-shadow:0 40px 80px -30px rgba(0,0,0,.9)} /* ─── ТУЛТИПЫ, ПОЛЯ, ПИЛЮЛИ, ПУСТОЕ ────────────────────────────────────── */ :root[data-theme] .tip,:root[data-theme] .htip{ background:var(--tip-bg);color:var(--tip-ink);border:1px solid var(--tip-border); border-radius:14px;padding:11px 14px;box-shadow:var(--tip-shadow); backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)} :root[data-theme] .tip b,:root[data-theme] .htip b{color:#5CE8A0} :root[data-theme] .fld, :root[data-theme] .iconbtn, :root[data-theme] .btn, :root[data-theme] input, :root[data-theme] select, :root[data-theme] textarea, :root[data-theme] .custom-dates select{ background:var(--field-bg);border:1px solid var(--field-border);color:var(--ink); border-radius:10px;box-shadow:var(--field-shadow)} :root[data-theme] .fld:focus,:root[data-theme] input:focus,:root[data-theme] select:focus{ border-color:var(--accent);box-shadow:var(--focus);outline:none} :root[data-theme] .iconbtn:hover{background:var(--surface)} :root[data-theme] .pill.g,:root[data-theme] .st-ok{background:var(--pill-green);border:1px solid var(--pill-border);color:var(--green)} :root[data-theme] .pill.a,:root[data-theme] .st-warn{background:var(--pill-amber);border:1px solid var(--pill-border);color:var(--amber)} :root[data-theme] .pill.r,:root[data-theme] .st-bad{background:var(--pill-red);border:1px solid var(--pill-border);color:var(--red)} :root[data-theme] .empty{ border:1.5px dashed var(--empty-border);border-radius:14px;padding:22px 16px; color:var(--muted);background:var(--empty-bg);text-align:center;font-size:13px} :root[data-theme] .help{background:var(--chip);border:1px solid var(--card-border);color:var(--muted)} :root[data-theme] .help:hover{background:var(--accent-grad);border-color:var(--border);color:#fff} :root[data-theme] ::-webkit-scrollbar-thumb{background:var(--steel);border-radius:999px} /* переключатели валюты и темы в шапке меню */ :root[data-theme] #curToggle,:root[data-theme] #themeToggle{ background:var(--seg-bg)!important;border:1px solid var(--card-border)!important;border-radius:var(--radius-el)} :root[data-theme] #curToggle button{color:var(--muted)} /* строки-секции внутри таблиц и шапка тепловой карты */ :root[data-theme] tr.sec td{background:var(--seg-bg);color:var(--muted);border:0} :root[data-theme] .heat th{background:transparent;color:var(--muted);border:0} /* hero-карточка по варианту 1c: стекло + диагональный блик */ :root[data-theme] .kpi.blue{position:relative;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)} :root[data-theme="light"] .kpi.blue{box-shadow:0 24px 48px -20px rgba(7,50,150,.55), inset 0 1px 0 rgba(255,255,255,.35)} :root[data-theme] .kpi.blue::after{ content:"";position:absolute;left:-30%;top:-80%;width:60%;height:260%;pointer-events:none; background:linear-gradient(75deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(8deg)} :root[data-theme="dark"] .kpi.blue::after{background:linear-gradient(75deg,transparent,rgba(255,255,255,.12),transparent)} :root[data-theme="light"] .kpi.blue .delta, :root[data-theme="light"] .kpi.blue .kd{background:rgba(255,255,255,.92);padding:2px 9px;border-radius:999px;box-shadow:0 3px 8px rgba(3,20,60,.18);vertical-align:middle} /* ─── ОКНО macOS ─────────────────────────────────────────────────────────── Рабочий стол — цветной фон с бликами. Окно — нейтральное полотно: титлбар со светло-серым стеклом и тело окна почти белое (в тёмной — графит). -------------------------------------------------------------------------- */ :root, :root[data-theme="light"]{ --win-bar:rgba(243,245,249,.82); --win-bar-line:rgba(16,24,40,.1); --win-body:#F7F8FB; --win-border:rgba(16,24,40,.12); --win-shadow:0 28px 60px -22px rgba(16,24,40,.32), 0 2px 6px rgba(16,24,40,.08); --win-card:#FFFFFF; --win-card-border:rgba(16,24,40,.08); --win-card-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 22px -14px rgba(16,24,40,.22); } :root[data-theme="dark"]{ --win-bar:rgba(20,28,48,.9); --win-bar-line:rgba(255,255,255,.08); --win-body:#0B1428; --win-border:rgba(255,255,255,.1); --win-shadow:0 30px 70px -24px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.5); --win-card:#131E3C; --win-card-border:rgba(255,255,255,.08); --win-card-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 26px -16px rgba(0,0,0,.7); } /* корпус окна */ :root[data-theme] .main{padding:10px 12px 12px} :root[data-theme] .main > .topbar{ position:sticky;top:0;z-index:40; background:var(--win-bar);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid var(--win-border);border-bottom:1px solid var(--win-bar-line); border-radius:11px 11px 0 0;padding:0 18px 0 74px;height:40px;gap:12px;box-shadow:none} :root[data-theme] .main > .topbar::before{ content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%); width:12px;height:12px;border-radius:50%;background:#FF5F57; box-shadow:20px 0 0 #FEBC2E, 40px 0 0 #28C840, inset 0 0 0 .5px rgba(0,0,0,.18)} :root[data-theme="dark"] .main > .topbar::before{ box-shadow:20px 0 0 #FEBC2E, 40px 0 0 #28C840, inset 0 0 0 .5px rgba(255,255,255,.14)} :root[data-theme] .main > .topbar h1{font-size:13.5px;font-weight:700;letter-spacing:.1px} :root[data-theme] .main > .topbar .asof{font-size:11.5px} :root[data-theme] .main > .content{ background:var(--win-body);backdrop-filter:none; border:1px solid var(--win-border);border-top:0; border-radius:0 0 11px 11px;box-shadow:var(--win-shadow);padding:0} :root[data-theme] .main > .content .frame-wrap{ background:transparent;border:0;box-shadow:none;border-radius:0;backdrop-filter:none} :root[data-theme] .main > .content .frame-wrap iframe{height:calc(100vh - 84px)} :root[data-theme] .main > .content > .section{padding:18px 20px} /* ── ВНУТРИ ОКНА (модуль в iframe): нейтральное полотно вместо цветного фона ── */ :root.in-frame body{ background:var(--win-body) !important;background-image:none !important; } :root.in-frame[data-theme] .card, :root.in-frame[data-theme] .kpi:not(.blue), :root.in-frame[data-theme] .kcard, :root.in-frame[data-theme] .hcell, :root.in-frame[data-theme] .scard, :root.in-frame[data-theme] .dir, :root.in-frame[data-theme] .dcard, :root.in-frame[data-theme] .acard, :root.in-frame[data-theme] .card2, :root.in-frame[data-theme] .prog, :root.in-frame[data-theme] .rec, :root.in-frame[data-theme] .emp, :root.in-frame[data-theme] .attc, :root.in-frame[data-theme] .relc{ background:var(--win-card);border:1px solid var(--win-card-border); box-shadow:var(--win-card-shadow);backdrop-filter:none;-webkit-backdrop-filter:none; border-radius:14px} :root.in-frame[data-theme] .hcell, :root.in-frame[data-theme] .scard{border-radius:12px} :root.in-frame[data-theme] .controls{ background:var(--win-body);backdrop-filter:none;border-bottom:1px solid var(--win-bar-line);box-shadow:none} :root.in-frame[data-theme] .seg, :root.in-frame[data-theme] .tabs{background:var(--seg-bg);border:1px solid var(--win-card-border)} :root.in-frame[data-theme] .fld, :root.in-frame[data-theme] .iconbtn, :root.in-frame[data-theme] .btn, :root.in-frame[data-theme] input, :root.in-frame[data-theme] select{background:var(--win-card);border:1px solid var(--win-card-border);box-shadow:none} :root.in-frame[data-theme] .heat td.lab{background:transparent} :root.in-frame[data-theme="light"] .heat td{border-color:var(--win-card)} /* ============================================================================ МОБИЛЬНЫЙ И ПЛАНШЕТНЫЙ СЛОЙ Цели: iPhone 15 Pro (393×852) и iPad mini 6 (744×1133 / 1133×744). Правила общие для шелла и всех модулей, потому что тема подключена везде. ========================================================================== */ /* ── планшет в портрете и всё, что уже: сетки по две колонки ── */ @media (max-width:1000px){ :root[data-theme] .g4,:root[data-theme] .grid,:root[data-theme] .dirs, :root[data-theme] .dgrid,:root[data-theme] .kpis{grid-template-columns:repeat(2,1fr)!important} :root[data-theme] .g3,:root[data-theme] .g2,:root[data-theme] .split{grid-template-columns:1fr!important} :root[data-theme] .strip{grid-template-columns:repeat(2,1fr)!important} } /* ── телефон ── */ @media (max-width:760px){ /* одна колонка везде */ :root[data-theme] .g4,:root[data-theme] .g3,:root[data-theme] .g2,:root[data-theme] .grid, :root[data-theme] .dirs,:root[data-theme] .dgrid,:root[data-theme] .kpis,:root[data-theme] .strip, :root[data-theme] .split,:root[data-theme] .health,:root[data-theme] .chips{grid-template-columns:1fr!important} /* окно macOS: меньше поля, шапка компактнее, фрейм выше */ :root[data-theme] .main{padding:0!important} :root[data-theme] .main > .topbar{border-radius:0!important;border-left:0;border-right:0; height:46px;padding:0 14px 0 62px!important} :root[data-theme] .main > .topbar::before{left:12px;width:10px;height:10px; box-shadow:16px 0 0 #FEBC2E, 32px 0 0 #28C840, inset 0 0 0 .5px rgba(0,0,0,.18)} :root[data-theme] .main > .topbar h1{font-size:15px} :root[data-theme] .main > .content{border-radius:0!important;border-left:0;border-right:0;box-shadow:none} :root[data-theme] .main > .content .frame-wrap iframe{height:calc(100vh - 46px)!important;min-height:0!important} :root[data-theme] .main > .content > .section{padding:14px 12px} /* меню-полка поверх контента */ :root[data-theme] .sidebar{width:min(86vw,300px)!important;box-shadow:0 0 60px rgba(0,0,0,.4)} :root[data-theme] .burger{width:40px;height:40px;font-size:19px;display:grid!important;place-items:center} :root[data-theme] .nav a{padding:12px 12px!important;font-size:15px} /* вкладки и сегменты — одной лентой с прокруткой пальцем */ :root[data-theme] .tabs,:root[data-theme] .seg,:root[data-theme] .periods{ flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden; -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity} :root[data-theme] .tabs::-webkit-scrollbar,:root[data-theme] .seg::-webkit-scrollbar, :root[data-theme] .periods::-webkit-scrollbar{display:none} :root[data-theme] .tabs button,:root[data-theme] .seg button,:root[data-theme] .periods button{ flex:0 0 auto;scroll-snap-align:start;min-height:40px;font-size:13px} /* панель управления модуля не липнет — на телефоне это съедало треть экрана */ :root[data-theme] .controls{position:static!important;padding:10px 12px!important;margin-bottom:10px} :root[data-theme] .ctl-row{gap:8px} :root[data-theme] .ctl-row .spacer{display:none} /* карточки компактнее */ :root[data-theme] .card,:root[data-theme] .kpi,:root[data-theme] .dcard,:root[data-theme] .scard, :root[data-theme] .hcell,:root[data-theme] .prog{padding:13px 14px!important;border-radius:16px!important} :root[data-theme] .kv,:root[data-theme] .dchv{font-size:22px!important} :root[data-theme] .kl{min-height:0!important} :root[data-theme] #content{padding:0 12px 18px!important} /* таблицы: прокрутка внутри карточки, ничего не сжимается в кашу */ :root[data-theme] .card{overflow-x:auto} :root[data-theme] .card table{min-width:520px} :root[data-theme] .heat{min-width:560px} :root[data-theme] .scroll{max-height:none!important} /* графики: не сжимать в нечитаемое, дать прокрутку */ :root[data-theme] .chart{overflow-x:auto;-webkit-overflow-scrolling:touch} :root[data-theme] .chart svg{min-width:620px} :root[data-theme] .dcspark svg{min-width:0} /* ленты чипов и фильтров переносятся, а не уезжают за экран */ :root[data-theme] .chips-f,:root[data-theme] .fchips,:root[data-theme] .tags, :root[data-theme] .chiprow,:root[data-theme] .filters,:root[data-theme] [class*="chips"]{ flex-wrap:wrap!important;overflow:visible!important;white-space:normal!important} :root[data-theme] .fchip,:root[data-theme] .chip{white-space:nowrap;display:inline-block;margin-bottom:6px} /* подсказки и пилюли крупнее для пальца */ :root[data-theme] .help{width:22px;height:22px;font-size:12px} :root[data-theme] .pill{font-size:10.5px;padding:3px 9px} /* большой текст блоков-пояснений чуть меньше */ :root[data-theme] .lead,:root[data-theme] .note{font-size:12px} } /* ── очень узкие экраны ── */ /* безопасные зоны iPhone: чёлка сверху и полоса жестов снизу */ @media (max-width:760px){ :root[data-theme] .main > .topbar{padding-top:env(safe-area-inset-top)!important; height:calc(46px + env(safe-area-inset-top))} :root[data-theme] .main > .content .frame-wrap iframe{ height:calc(100vh - 46px - env(safe-area-inset-top))!important} :root[data-theme] .sidebar{padding-top:env(safe-area-inset-top)} :root[data-theme] #content{padding-bottom:calc(18px + env(safe-area-inset-bottom))!important} } @media (max-width:400px){ :root[data-theme] .kv,:root[data-theme] .dchv{font-size:20px!important} :root[data-theme] .main > .topbar h1{font-size:14px} } /* ── планшет в ландшафте: меню остаётся, поля тоньше ── */ @media (min-width:901px) and (max-width:1200px){ :root[data-theme] .main{padding:8px 10px 10px} :root[data-theme] .main > .content .frame-wrap iframe{height:calc(100vh - 70px)} }