/* ALLSUBARU — общий стиль всех программ сайта (lk.allsubaru.su/shared/theme.css). Владелец, 08.10.2026: цвета «как в Базоне»,
   вариант Б (docs/owner-fixes/80-bazon-B.png, цвета сняты со снимков Базона); меню — 77-menu-*.png, правила — app/docs/STYLE.md.

   Как пользоваться
   1. Подключить в <head> раньше своих стилей:  <link rel="stylesheet" href="/shared/theme.css?v=17">
      (?v= — номер версии; меняется при правке этого файла, чтобы браузеры взяли новый сразу).
   2. Цвета брать только из переменных --as-*: background:var(--as-bar) и т. д. Свои цвета для полосы, меню, кнопок не задавать.
   3. Готовые классы: .as-bar (верхняя полоса), .as-bar-home (⌂ на главную), .as-side (левое меню), .as-btn / .as-btn-primary,
      на телефоне — .as-act-main / .as-act / .as-acts (действия) и .as-go (переход со «›»), STYLE.md «Кнопки и переходы на телефоне»,
      .as-card, .as-table; плотный вид — .as-page, .as-head, .as-blocks, .as-fold, .as-chip, .as-note (STYLE.md «Плотность»).
   3а. Окно выбора вместо системного списка (12.10.2026): <script src="/shared/as-select.js?v=1" defer></script> — все <select>
      страницы открываются окном сайта (STYLE.md «Окно выбора»); свой список браузера — <select data-native>.
   3б. «Вышла новая версия — обновить» (12.10.2026): <script src="/shared/version.js?v=1" defer></script> (STYLE.md «Новая версия»).
   4. Свёрнуто ли меню — cookie allsubaru_menu=collapsed|expanded, path=/ (одна на все программы).
   Файл лежит в app (public/shared/theme.css) и выкладывается вместе с ним. */

:root{
 --as-bar:#344054;            /* верхняя полоса — того же серо-синего, что меню (как в Базоне) */
 --as-bar-text:#e4e7ec;
 --as-bar-tab-on:#293240;     /* выбранная вкладка полосы */
 --as-bar-tab-on-text:#ffffff; /* текст выбранной вкладки — белый, цвет раздела — полоской снизу (09.10.2026) */
 --as-side:#344054;           /* левое меню, как в Базоне */
 --as-side-text:#cccfd4;
 --as-side-hover:#ffffff17;
 --as-side-line:#ffffff26;
 --as-side-active:#293240;    /* выбранный пункт — темнее меню */
 --as-side-active-text:#ffffff; /* его текст белый, значок и полоска слева — цвета раздела (09.10.2026) */
 /* цвета разделов — из логотипа (владелец 09.10.2026); страница говорит, где она: <html data-as-section="reprice|zakupki|zarplata|procenty|zadachi|zadaniya|osmotr|team"> */
 --as-c-reprice:#3eb5f1;      /* Проценка — голубой «SUBARU» */
 --as-c-zakupki:#d7569c;      /* Закупки — розовый «ALL» */
 --as-c-zarplata:#2e8b5a;     /* Зарплата — зелёный */
 --as-c-procenty:#fff343;     /* Проценты с продаж — жёлтый полосы */
 --as-c-zadachi:#7a5af8;      /* Задачи — фиолетовый (владелец 13.10.2026, prototypes/zadachi) */
 --as-c-zadachi-ink:#5b3fd6;  /* его текст */
 --as-c-zadachi-bg:#f1edff;   /* фон его значка */
 /* «вариант А» (владелец 16.10.2026, prototypes/cveta-razdelov-A.png): Задания, Осмотр, Команда и Управление */
 --as-c-zadaniya:#f07c3e;     /* Задания — оранжевый */
 --as-c-zadaniya-ink:#c2551d; --as-c-zadaniya-bg:#fdeee6;
 --as-c-osmotr:#14a8a0;       /* Осмотр — бирюзовый */
 --as-c-osmotr-ink:#0e7f79;   --as-c-osmotr-bg:#e3f6f5;
 --as-c-team:#667085;         /* Команда и Управление — серо-синий */
 --as-c-team-ink:#475467;     --as-c-team-bg:#eef0f3;
 --as-section:#e4e7ec;        /* цвет текущего раздела; на главной и в «Настройках» — нейтральный */
 --as-section-ink:#c4cad4;    /* он же для линий на светлом фоне */
 --as-accent:#2f7fd8;         /* главные кнопки (синие — смысловой цвет, не меняется) */
 --as-accent-hover:#2a71c2;
 --as-accent-text:#fff;
 --as-page:#eaecf0;           /* рабочая область */
 --as-head:#f9fafb;           /* шапка таблицы */
 --as-highlight:#fef5d5;      /* выбранный фильтр или столбец — бледно-жёлтый */
 --as-card:#fff;
 --as-text:#1f2b3d;
 --as-muted:#6c7b91;
 --as-border:#dbe1e9;
 --as-danger:#c2453b;
 --as-warn:#e0a800;
 --as-ok:#2e9e5b;
 --as-radius:10px;
 --as-bar-h:52px;
 --as-side-w:236px;
 --as-side-w-collapsed:64px;
 --as-chat-space:96px;        /* место снизу страницы под круглую кнопку чата */
 --as-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,Helvetica,sans-serif;
}

/* верхняя полоса */
.as-bar{height:var(--as-bar-h);display:flex;align-items:center;gap:6px;padding:0 12px;background:var(--as-bar);color:var(--as-bar-text);font-family:var(--as-font);font-size:14px}
.as-bar a{color:inherit;text-decoration:none}
.as-bar-tab{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:8px;font-weight:600;color:var(--as-bar-text)}
.as-bar-tab:hover{background:#ffffff14}
.as-bar-tab.on{background:var(--as-bar-tab-on);color:var(--as-bar-tab-on-text)}

/* ⌂ на главную (владелец 08.10.2026): слева в тёмной полосе каждого раздела, ведёт на lk.allsubaru.su/.
   <a class="as-bar-home" href="/" aria-label="Главная" title="Главная"><svg …домик lucide House 19 px…/><span>Главная</span></a>
   На компьютере — «⌂ Главная», на телефоне — круглая кнопка ⌂ (подпись прячется). На главной — класс on. */
.as-bar-home{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-width:38px;padding:0 12px;border:0;border-radius:9px;background:#ffffff14;color:var(--as-bar-text);font:600 14px var(--as-font);text-decoration:none;cursor:pointer;flex:none}
.as-bar-home:hover{background:#ffffff26;color:#fff}
.as-bar-home svg{flex:none}
.as-bar-home.on,.as-bar-home[aria-current=page]{background:var(--as-bar-tab-on);color:var(--as-bar-tab-on-text)}
@media (max-width:700px){.as-bar-home{width:42px;height:42px;padding:0;border-radius:50%}.as-bar-home span{display:none}}

/* левое меню: развёрнутое и свёрнутое (64 px, значки; наведение — подпись из data-tip, без раскрытия) */
.as-side{width:var(--as-side-w);background:var(--as-side);color:var(--as-side-text);display:flex;flex-direction:column;padding:10px 10px 12px;font-family:var(--as-font);font-size:14px;min-height:0}
.as-side.is-collapsed{width:var(--as-side-w-collapsed);padding:10px 8px}
.as-side-head{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 4px 0 10px;margin-bottom:8px;flex:none}
.as-side-head b{color:#fff;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-side.is-collapsed .as-side-head{justify-content:center;padding:0}
.as-side.is-collapsed .as-side-head b{display:none}
.as-side-toggle{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--as-side-text);background:#ffffff1a;border:0;cursor:pointer;flex:none}
.as-side-toggle:hover{background:#ffffff2a;color:#fff}
.as-side-nav{display:flex;flex-direction:column;gap:2px;min-height:0;overflow-y:auto}
.as-side-bottom{margin-top:auto;padding-top:8px;border-top:1px solid var(--as-side-line);display:flex;flex-direction:column;gap:2px;flex:none}
.as-side-item{display:flex;align-items:center;gap:12px;width:100%;height:42px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--as-side-text);font:inherit;font-weight:500;text-align:left;text-decoration:none;cursor:pointer;position:relative}
.as-side-item svg{flex:none}
.as-side-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-side-item:hover{background:var(--as-side-hover);color:#fff}
.as-side-item[aria-current=page],.as-side-item.on{background:var(--as-side-active);color:var(--as-side-active-text)}
.as-side-item:disabled{opacity:.5;cursor:default}
/* счётчик пункта меню (владелец 11.10.2026, prototypes/knopki-standart/1011-menu-schetchik.jpg): таблетка справа в строке, по центру
   по высоте, 22 px, шрифт 13 px — одинаково у выбранного и невыбранного; в свёрнутом меню на компьютере — точка у значка */
.as-side-item{position:relative;box-sizing:border-box}
@media (max-width:700px){.as-side.is-collapsed .as-side-item>span.as-count{display:inline-block}}
.as-side .as-side-item>span.as-count,.as-count{display:inline-block;position:static;margin-left:auto;flex:none;align-self:center;min-width:22px;height:22px;line-height:22px;padding:0 7px;border-radius:11px;font-size:13px;font-weight:700;text-align:center;background:var(--as-warn);color:#1f2a3a;overflow:visible;text-overflow:clip;box-sizing:border-box}
.as-side.is-collapsed .as-side-item{justify-content:center;padding:0}
.as-side.is-collapsed .as-side-item span{display:none}
@media (min-width:701px){.as-side.is-collapsed .as-side-item>span.as-count{display:block;position:absolute;top:8px;right:12px;width:10px;min-width:0;height:10px;padding:0;font-size:0;line-height:0;border-radius:50%;box-shadow:0 0 0 2px var(--as-side)}}
.as-side.is-collapsed .as-side-item[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#0f1726;color:#fff;padding:6px 10px;border-radius:7px;white-space:nowrap;font-size:13px;font-weight:500;box-shadow:0 6px 18px #0005;z-index:90;pointer-events:none}
.as-side.is-collapsed .as-side-item[data-tip]:hover::before{content:'';position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#0f1726;border-left:0;z-index:90}

/* низ страницы раздела: место под круглую кнопку чата, чтобы последняя строка и ползунок прокрутки не уходили под неё
   (владелец 08.10.2026). Класс на прокручиваемую рабочую область или padding-bottom:var(--as-chat-space) у неё. */
.as-chat-space{padding-bottom:var(--as-chat-space)}

/* кнопки, карточка, таблица */
.as-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--as-border);background:#fff;color:var(--as-text);border-radius:8px;padding:6px 12px;font:600 14px var(--as-font);cursor:pointer}
.as-btn:hover{background:#f4f7fb}
.as-btn-primary{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--as-accent);background:var(--as-accent);color:var(--as-accent-text);border-radius:8px;padding:6px 12px;font:600 14px var(--as-font);cursor:pointer}
.as-btn-primary:hover{background:var(--as-accent-hover);border-color:var(--as-accent-hover)}
.as-btn:disabled,.as-btn-primary:disabled{opacity:.5;cursor:default}
/* Единый компактный вид (владелец 08.10.2026; образец — «Зарплата → Выплаты», «График», «Сводка»; правило — STYLE.md «Плотность») */
.as-page{padding:16px 20px;max-width:1440px;margin:0 auto;font:14px/1.4 var(--as-font);color:var(--as-text)}
.as-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.as-head>h1{font-size:20px;font-weight:600;margin:0}
.as-note{font-size:13px;color:var(--as-muted)}
.as-card{background:var(--as-card);border:1px solid var(--as-border);border-radius:12px;padding:12px 14px;margin-bottom:12px;min-width:0;overflow-wrap:anywhere}
.as-card>h2{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;margin:0 0 6px}
.as-card.as-flush{padding:0}.as-card.as-flush>h2{padding:12px 14px 4px;margin:0}
.as-blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px;align-items:start}.as-blocks>.as-card{margin:0}
.as-table{width:100%;border-collapse:collapse;background:var(--as-card);font-size:14px}
.as-table th{text-align:left;font-size:12.5px;font-weight:400;color:var(--as-muted);background:var(--as-head);border-bottom:1px solid var(--as-border);padding:6px 10px;white-space:nowrap}
.as-table td{border-bottom:1px solid #eef1f5;padding:5px 10px;line-height:1.3}
.as-table td .as-btn,.as-table td .as-btn-primary{padding:3px 10px;font-size:13px}
.as-table tr.as-group td{font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--as-muted);background:var(--as-head);padding:4px 10px}
.as-table.as-grid th,.as-table.as-grid td{padding:3px;text-align:center;font-size:13px}
.as-fold{border-top:1px solid var(--as-border)}
.as-fold>summary{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:14px;cursor:pointer;list-style:none}
.as-fold>summary::-webkit-details-marker{display:none}
.as-fold>summary::before{content:"";flex:none;width:6px;height:6px;border-right:2px solid var(--as-muted);border-bottom:2px solid var(--as-muted);transform:rotate(-45deg);margin:0 3px}
.as-fold[open]>summary::before{transform:rotate(45deg)}
.as-fold>summary:hover{background:#f8fafc}
.as-fold>summary .as-note{font-weight:400}
.as-fold>:not(summary){margin:0 14px 10px}
.as-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;border:1px solid var(--as-border);background:#fff;font-size:13px}
@media (max-width:700px){.as-page{padding:10px 12px}.as-blocks{grid-template-columns:1fr}}

/* телефон: меню — панель слева по кнопке ☰ (класс is-open у .as-side-drawer); первый пункт — «⌂ Главная»:
   <a class="as-side-item as-side-home" href="/" data-tip="Главная"><svg …House 19 px…/><span>Главная</span></a> */
@media (max-width:700px){
 .as-side-drawer{position:fixed;top:0;bottom:0;left:0;width:min(300px,86vw);z-index:80;transform:translateX(-100%);transition:transform .2s}
 .as-side-drawer.is-open{transform:none;box-shadow:12px 0 40px #0005}
 .as-side-drawer .as-side-item{height:50px;font-size:16px}
 .as-backdrop{position:fixed;inset:0;background:#0007;z-index:75}
 .as-side-home{border-bottom:1px solid var(--as-side-line);border-radius:9px 9px 0 0;margin-bottom:4px}
}

/* Кнопка «кто вошёл» справа в верхней полосе (владелец 08.10.2026, 5.2): пара к «⚙ Управление ˅» — та же высота, скругление и шрифт,
   в одну строку: значок человечка, «Ильдар С.» (имя и первая буква фамилии), стрелка. Отличие — светлая рамка вместо жёлтой.
   Разметка во всех программах одна: <div class="bar-menu bar-user"><button class="bar-btn">[UserRound] Имя Ф. [ChevronDown]</button>… */
.bar-user>.bar-btn{border-color:#ffffff40}
.bar-user>.bar-btn:hover{border-color:#ffffff66}
/* «Чат» в верхней полосе (владелец 08.10.2026): та же кнопка, что «Управление» и «Ильдар С.» — значок, «Чат», кружок с числом новых.
   Круглой кнопки в углу больше нет; левое меню кнопку «Чат» не показывает. */
button.bar-btn.bar-chat{background:#ffffff14;border-color:#ffffff40;color:var(--as-bar-text)}
button.bar-btn.bar-chat:hover{background:#ffffff26;border-color:#ffffff66;color:#fff}
button.bar-btn.bar-chat.on{background:var(--as-bar-tab-on);border-color:var(--as-bar-tab-on-text);color:var(--as-bar-tab-on-text);box-shadow:none}
[data-chat-launcher="side"]{display:none!important}

/* Цвет раздела (владелец 09.10.2026, макет docs/owner-fixes/106-logo-colors.jpg): полоска под выбранной вкладкой вверху, полоска слева и значок
   у выбранного пункта меню, точка у названия раздела в меню, линия под заголовком страницы (.as-head>h1 или .as-title). Полоса и меню —
   серо-синие, текст белый: на всех четырёх цветах читается одинаково. Смысловые цвета (синие кнопки, зелёное, красное, жёлтое «внимание») — свои. */
[data-as-section=reprice]{--as-section:var(--as-c-reprice);--as-section-ink:var(--as-c-reprice)}
[data-as-section=zakupki]{--as-section:var(--as-c-zakupki);--as-section-ink:var(--as-c-zakupki)}
[data-as-section=zarplata]{--as-section:var(--as-c-zarplata);--as-section-ink:var(--as-c-zarplata)}
[data-as-section=zadachi]{--as-section:var(--as-c-zadachi);--as-section-ink:var(--as-c-zadachi)}
[data-as-section=zadaniya]{--as-section:var(--as-c-zadaniya);--as-section-ink:var(--as-c-zadaniya)}
[data-as-section=osmotr]{--as-section:var(--as-c-osmotr);--as-section-ink:var(--as-c-osmotr)}
[data-as-section=team]{--as-section:var(--as-c-team);--as-section-ink:var(--as-c-team)}
[data-as-section=procenty]{--as-section:var(--as-c-procenty);--as-section-ink:#d6c600} /* жёлтая линия на светлом фоне — темнее, иначе не видна */
.as-bar-tab.on,.bar-tab.on{box-shadow:inset 0 -3px 0 var(--as-section)}
.as-side-item[aria-current=page],.as-side-item.on{box-shadow:inset 3px 0 0 var(--as-section)}
.as-side-item[aria-current=page] svg,.as-side-item.on svg{color:var(--as-section)}
[data-as-section] .as-side-head b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--as-section);margin-right:8px;vertical-align:1px}
[data-as-section] .as-head>h1,[data-as-section] .as-title{padding-bottom:4px;border-bottom:3px solid var(--as-section-ink)}

/* Цвет раздела у вкладок верхней полосы — сам значок раздела (владелец 20.10.2026; раньше, 16.10, — цветная точка вместо значка):
   значки те же, что в меню телефона, окрашены в цвет раздела; у выбранной вкладки — как было, снизу полоска цвета раздела.
   Вкладка говорит свой раздел: data-as-dot="reprice|zakupki|zarplata|procenty|zadachi|zadaniya|osmotr" (из /api/portal/menu — поле section).
   Общее для app, «Закупок» и «Зарплаты»: правится только здесь. */
[data-as-dot=reprice]{--as-dot:var(--as-c-reprice)}[data-as-dot=zakupki]{--as-dot:var(--as-c-zakupki)}[data-as-dot=zarplata]{--as-dot:var(--as-c-zarplata)}
[data-as-dot=procenty]{--as-dot:var(--as-c-procenty)}[data-as-dot=zadachi]{--as-dot:var(--as-c-zadachi)}[data-as-dot=zadaniya]{--as-dot:var(--as-c-zadaniya)}[data-as-dot=osmotr]{--as-dot:var(--as-c-osmotr)}[data-as-dot=team]{--as-dot:var(--as-c-team)}
.bar-tabs .bar-tab[data-as-dot]>svg,.bar-tabs .bar-tab[data-as-dot]>.bar-rub{color:var(--as-dot)}
/* читаемость на тёмной полосе #344054 (значок ≥ 3:1): розовый «Закупок», зелёный «Зарплаты» и фиолетовый «Задач» — светлее того же цвета, только в полосе */
.bar-tabs .bar-tab[data-as-dot=zarplata]{--as-dot:#4cc287}.bar-tabs .bar-tab[data-as-dot=zadachi]{--as-dot:#a28cfb}.bar-tabs .bar-tab[data-as-dot=zakupki]{--as-dot:#e36fad}
/* Узкий компьютер и планшет, 701–1180 px (ПВ-301, аудит 09.10.2026): верхняя полоса не помещалась — справа уходили «Управление» и имя,
   страница становилась шире экрана. До 1180 px вкладки разделов — только значками (название — при наведении, атрибут title),
   до 900 px — и «Чат», «Управление»; имя «Ильдар С.» и числа на кнопках видны всегда. Классы общие с полосами Закупок и Зарплаты; «.bar-tabs .bar-tab» сильнее их своего «.bar-tab{padding:8px 14px}». */
@media (max-width:1180px){
 .bar-tabs .bar-tab{font-size:0;gap:0;padding:8px 10px}
 .bar-tabs .bar-tab>svg{width:18px;height:18px}
 .bar-tabs .bar-tab .bar-rub{font-size:16px}
 .bar-tabs .bar-tab em{font-size:11px}
}
@media (max-width:900px){
 .bar-right .bar-admin>.bar-btn,.bar-right .bar-btn.bar-chat{font-size:0;gap:4px;padding:7px 9px}
 .bar-right .bar-admin>.bar-btn em,.bar-right .bar-btn.bar-chat em{font-size:11px}
 .bar-right .bar-btn svg{flex:none}
 .bar-right{gap:6px}
}

/* Кнопки и переходы на телефоне (владелец 11.10.2026, prototypes/knopki-standart/; правило — STYLE.md «Кнопки и переходы на телефоне»).
   Действие — кнопка, не синий текст: главное — .as-act-main (большая цветная, как «Пришёл»), остальные — .as-act (рамка, во всю
   ширину, значок + подпись, одна высота). Переход в другой экран — .as-go: карточка нажимается целиком, справа «›».
   Синие ссылки — только внутри текста. */
.as-acts{display:grid;gap:8px}
.as-act{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--as-border);border-radius:12px;background:#fff;color:var(--as-text);font:600 15px/1.25 var(--as-font);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.as-act svg{width:20px;height:20px;flex:none;color:var(--as-muted)}
.as-act:hover{background:#f4f7fb}.as-act:active{background:#eef2f7}
.as-act:disabled,.as-act[aria-disabled=true]{opacity:.5;cursor:default}
.as-act.danger{color:var(--as-danger);border-color:#f4c7c3}.as-act.danger svg{color:var(--as-danger)}
.as-act-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:64px;padding:12px 16px;border:0;border-radius:16px;background:var(--as-accent);color:#fff;font:700 20px/1.2 var(--as-font);text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.as-act-main small{font-weight:400;font-size:14px;opacity:.92}.as-act-main svg{width:28px;height:28px;color:#fff}
.as-act-main.ok{background:var(--as-ok)}.as-act-main.danger{background:var(--as-danger)}
.as-act-main:active{filter:brightness(.95)}.as-act-main:disabled{opacity:.5;cursor:default}
.as-go{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:1px solid var(--as-border);border-radius:12px;background:var(--as-card);color:var(--as-text);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.as-go::after{content:"›";margin-left:auto;padding-left:6px;color:#98a2b3;font-size:24px;line-height:1;flex:none}
.as-go>span{min-width:0}.as-go b{display:block;font-weight:600;font-size:15px}.as-go small{display:block;color:var(--as-muted);font-size:13px}
.as-go svg{width:22px;height:22px;flex:none;color:var(--as-muted)}
.as-go:hover{background:#f7f9fc}.as-go:active{background:#eef2f7}

/* ── Окно выбора (владелец 12.10.2026, /shared/as-select.js) — вместо системного списка браузера, во всех разделах ──
   Телефон: окно снизу — заголовок, ✕, поиск при >8 пунктах, строки по 48 px (главное + серым мелко второе), выбранный отмечен ✓.
   Компьютер: такой же список под полем. Тень, скругления и цвета — как у окон сайта. */
.as-pick{position:fixed;inset:0;z-index:300}
.as-pick.sheet{background:#0f172a66;display:flex;align-items:flex-end}
.as-pick.drop{pointer-events:none}
.as-pick-box{background:var(--as-card,#fff);color:var(--as-text,#1f2b3d);display:flex;flex-direction:column;min-height:0;font-size:15px}
.as-pick.sheet .as-pick-box{width:100%;max-height:78vh;border-radius:16px 16px 0 0;padding:6px 0 calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px #10182833}
.as-pick.drop .as-pick-box{position:fixed;max-height:min(360px,60vh);border:1px solid var(--as-border,#dbe1e9);border-radius:10px;box-shadow:0 10px 30px #1018282e;pointer-events:auto;padding:4px 0;font-size:14px}
.as-pick-hd{flex:none;display:flex;align-items:center;gap:8px;padding:8px 8px 6px 18px}
.as-pick-hd b{flex:1;min-width:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-pick-x{width:40px;height:40px;border:0;border-radius:50%;background:#f2f4f7;color:#475467;font-size:17px;cursor:pointer;flex:none}
.as-pick-search{flex:none;box-sizing:border-box;-webkit-appearance:none;appearance:none;margin:2px 12px 6px;height:40px;border:1px solid var(--as-border,#dbe1e9);border-radius:10px;padding:0 12px;font:inherit;background:#f9fafb;outline:none}
.as-pick-search:focus{border-color:var(--as-accent,#2f7fd8);background:#fff}
.as-pick.drop .as-pick-search{height:34px;margin:4px 8px}
.as-pick-list{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.as-pick-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 18px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.as-pick.drop .as-pick-row{min-height:36px;padding:5px 12px}
.as-pick-row:hover,.as-pick-row:focus-visible{background:#f2f4f7;outline:none}
.as-pick-row.on{background:#eaf2fd;font-weight:600}
.as-pick-row[disabled]{color:#a3adbb;cursor:default}
.as-pick-row i{font-style:normal;color:var(--as-accent,#2f7fd8);font-weight:700;flex:none}
.as-pick-t{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.as-pick-t small{font-size:12.5px;color:var(--as-muted,#6c7b91);font-weight:400}
.as-pick-group{padding:10px 18px 4px;font-size:12px;color:var(--as-muted,#6c7b91);text-transform:uppercase;letter-spacing:.03em}
.as-pick-empty{padding:16px 18px;color:var(--as-muted,#6c7b91)}

/* ── Новая версия (владелец 12.10.2026, /shared/version.js) — плашка внизу: «Вышла новая версия программы · Обновить · ✕» ── */
.as-new{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:250;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);padding:8px 8px 8px 14px;background:var(--as-bar,#344054);color:#fff;border-radius:12px;box-shadow:0 8px 24px #10182840;font-size:14px}
.as-new span{min-width:0}
.as-new-go{flex:none;border:0;border-radius:8px;background:var(--as-accent,#2f7fd8);color:#fff;font:inherit;font-weight:600;padding:8px 12px;cursor:pointer;min-height:36px}
.as-new-x{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff1f;color:#fff;cursor:pointer}
@media (max-width:700px){.as-new{left:12px;right:12px;transform:none;max-width:none}.as-new span{flex:1}}

/* Телефон сотрудника — плитки (владелец 20.10.2026, «делаем 1», палитра 1 — яркие карточки цвета логотипа,
   prototypes/edinyj-vid-plitkami: palitra-1.jpg, ПРАВИЛА.md; STYLE.md «Телефон сотрудника — плитки»).
   Только узкий экран: на компьютере эти классы не ставятся, а где стоят — правила ниже работают до 700 px.
   Сверху вниз: главная карточка .as-hero (одна на экран) → плитки .as-tiles (2 в ряд) → строки-переходы .as-row.
   Цвет экрана — на главной карточке и выбранной вкладке нижней панели: data-as-hero="blue|pink|green|yellow|violet"
   (Сегодня — голубой, Календарь — розовый, Деньги — зелёный, Мой процент — жёлтый, Задачи — фиолетовый). */
[data-as-hero=blue]{--as-hero-a:#4cc0f5;--as-hero-b:#1f8fd6;--as-hero-ink:#fff}
[data-as-hero=pink]{--as-hero-a:#e57bb3;--as-hero-b:#c2457f;--as-hero-ink:#fff}
[data-as-hero=green]{--as-hero-a:#3fa872;--as-hero-b:#23704a;--as-hero-ink:#fff}
[data-as-hero=yellow]{--as-hero-a:#f5d43a;--as-hero-b:#c9a10c;--as-hero-ink:#3a2f00}
[data-as-hero=violet]{--as-hero-a:#8f72fa;--as-hero-b:#6446ee;--as-hero-ink:#fff}
@media (max-width:700px){
 .as-hero{position:relative;overflow:hidden;border-radius:20px;padding:14px 16px 16px;color:var(--as-hero-ink,#fff);
  background:linear-gradient(135deg,var(--as-hero-a,#4cc0f5),var(--as-hero-b,#1f8fd6));box-shadow:0 8px 22px -10px var(--as-hero-b,#1f8fd6)}
 .as-hero::after{content:"";position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;background:#ffffff1f;pointer-events:none}
 .as-hero-cap{font-size:12.5px;opacity:.9}
 .as-hero-big{display:block;font-size:36px;line-height:1.1;font-weight:800;margin:4px 0 2px;letter-spacing:-.01em}
 .as-hero-sub{font-size:12.5px;opacity:.85}
 .as-hero-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin-top:12px;border:0;border-radius:14px;
  background:#fff;color:var(--as-hero-b,#1f8fd6);font:700 16px var(--as-font,inherit);cursor:pointer}
 .as-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .as-tile{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 13px;background:#fff;border:0;border-radius:18px;
  box-shadow:0 1px 3px #1018280f,0 6px 18px #1018280a;color:inherit;text-decoration:none;text-align:left;font:inherit}
 a.as-tile,button.as-tile{cursor:pointer}
 a.as-tile::after,button.as-tile::after{content:"›";position:absolute;right:12px;top:8px;font-size:18px;color:var(--as-muted,#6c7b91)}
 .as-tile-ic,.as-row-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--as-ic-bg,#eef4ff);color:var(--as-ic,#2f6fd8)}
 .as-tile-ic{margin-bottom:6px}
 .as-tile-l{font-size:12.5px;color:var(--as-muted,#6c7b91)}
 .as-tile-v{font-size:19px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .as-tile-s{font-size:12px;color:var(--as-muted,#6c7b91)}
 .as-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;background:#fff;border:0;border-radius:16px;
  box-shadow:0 1px 3px #1018280f;color:inherit;text-decoration:none;text-align:left;font:inherit;cursor:pointer}
 .as-row-ic{width:36px;height:36px}
 .as-row-t{flex:1;min-width:0;display:flex;flex-direction:column}
 .as-row-t b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .as-row-t small{font-size:12.5px;color:var(--as-muted,#6c7b91)}
 .as-row::after{content:"›";font-size:20px;color:var(--as-muted,#6c7b91)}
 /* значки плиток по смыслу: синий — справка, оранжевый — внимание или прогноз, фиолетовый — время и сроки, красный — просрочено, зелёный — готово */
 .ic-info{--as-ic-bg:#e8f3fd;--as-ic:#1f7fc4}.ic-warn{--as-ic-bg:#fdeee4;--as-ic:#c2591c}.ic-time{--as-ic-bg:#efeafd;--as-ic:#6b4fd3}
 .ic-late{--as-ic-bg:#fdecec;--as-ic:#c2453b}.ic-ok{--as-ic-bg:#e6f4ec;--as-ic:#2e8b5a}
 /* выбранная вкладка нижней панели — цвет экрана */
 [data-as-hero] .as-tabbar [aria-current=page]{color:var(--as-hero-b)}
}

/* «Осмотр» — не рабочий раздел (владелец 20.10.2026): в верхней полосе справа, перед «Чат», кнопкой как «Чат» (значок, слово, число).
   Слева — только рабочие разделы. Ссылка «Осмотра» остаётся последней в списке вкладок (/api/portal/menu) — её уводит вправо
   margin-left:auto, полоса вкладок растягивается до правых кнопок. Общее для app, «Закупок» и «Зарплаты»: правится только здесь. */
@media (min-width:701px){
 .app-topbar>.bar-tabs{flex:1 1 auto;min-width:0}
 .bar-tabs .bar-tab[data-as-dot=osmotr]{margin-left:auto;margin-right:2px;padding:7px 12px;background:#ffffff14;border:1px solid #ffffff40!important;border-radius:8px;color:var(--as-bar-text)!important;box-shadow:none}
 .bar-tabs .bar-tab[data-as-dot=osmotr]:hover{background:#ffffff26;border-color:#ffffff66!important;color:#fff!important}
 .bar-tabs .bar-tab.on[data-as-dot=osmotr]{background:var(--as-bar-tab-on);border-color:var(--as-bar-tab-on-text)!important;color:var(--as-bar-tab-on-text)!important}
 .bar-tabs .bar-tab[data-as-dot=osmotr]>svg{color:inherit}
}
