/* MUI-совместимые токены для всех экранов act-generator */
:root{
--bg:#f4f6f9;
--card:#ffffff;
--line:rgba(0,0,0,.12); /* MUI divider */
--txt:rgba(0,0,0,.87); /* text.primary */
--mut:rgba(0,0,0,.6); /* text.secondary */
--dis:rgba(0,0,0,.38); /* text.disabled */
--acc:#1976d2; /* primary.main */
--acc-dark:#1565c0; /* primary.dark */
--acc2:#e3f2fd; /* primary lighten bg */
--ok:#2e7d32; /* success.main */
--ok2:#e8f5e9;
--warn:#ed6c02; /* warning.main */
--warn2:#fff4e5;
--err:#d32f2f; /* error.main */
--err2:#fdecea;
--info2:#e3f2fd;
--radius:4px; /* MUI shape.borderRadius */
--shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
--shadow-lg:0 8px 24px rgba(0,0,0,.12);
--font:Roboto,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
}
/* ===== Material Symbols (иконки MUI, как в Figma-наборе) =====
ВАЖНО: шрифт подключается -ом в каждой страницы (НЕ @import — ненадёжно).
font-feature-settings:'liga' обязателен для отрисовки лигатур (имя→глиф). */
.mi{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
font-size:18px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
white-space:nowrap;word-wrap:normal;direction:ltr;
-webkit-font-feature-settings:'liga';font-feature-settings:'liga';
-webkit-font-smoothing:antialiased;vertical-align:middle;
font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24}
.mi.sm{font-size:16px} .mi.lg{font-size:22px}
a .mi{vertical-align:-3px}
/* ===== Единая навигация по разделам (MUI Tabs) — на всех экранах ===== */
.appbar{background:var(--card);border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:0;padding:0 20px;box-shadow:var(--shadow)}
.appbar .brand{font:600 14px/1 var(--font);color:var(--txt);letter-spacing:.02em;
padding:16px 24px 16px 0;margin-right:8px;white-space:nowrap}
.appbar .nav{display:flex;align-items:stretch;gap:0;flex:1;min-width:0}
.appbar .tab{position:relative;display:inline-flex;align-items:center;gap:7px;
padding:16px 18px;color:var(--mut);text-decoration:none;font:600 13px/1 var(--font);
text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid transparent;
transition:color .15s,background .15s;white-space:nowrap}
.appbar .tab:hover{color:var(--txt);background:rgba(25,118,210,.04)}
.appbar .tab.active{color:var(--acc);border-bottom-color:var(--acc)}
.appbar .tab .cnt{background:var(--acc2);color:var(--acc);border-radius:20px;
padding:1px 8px;font-size:11px;font-weight:700;letter-spacing:0}
.appbar .tab.active .cnt{background:var(--acc);color:#fff}
.appbar .spacer{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:12px}
.appbar .act-btn{background:#eef1f6;color:var(--txt);border:none;border-radius:7px;
padding:8px 14px;font:600 13px var(--font);cursor:pointer;transition:background .15s}
.appbar .act-btn:hover{background:#e3e8ef}
.appbar .act-btn.primary{background:var(--acc);color:#fff}
.appbar .act-btn.primary:hover{background:var(--acc-dark)}
@media(max-width:760px){
.appbar{padding:0 10px;overflow-x:auto}
.appbar .brand{display:none}
.appbar .tab{padding:14px 12px;font-size:12px}
}
/* Единый MUI-стиль для всех select (своя стрелка-шеврон, без нативной) */
select{
-webkit-appearance:none;-moz-appearance:none;appearance:none;
font:14px/1.4 var(--font);color:var(--txt);cursor:pointer;
padding-right:30px !important;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 6px center;background-color:#fff}
select::-ms-expand{display:none}
select:focus{outline:none}
/* select внутри ячеек таблицы — прозрачный фон, стрелка ближе */
td select{background-color:transparent;padding-right:22px !important;background-position:right 4px center}
/* MUI Outlined Text Field с floating label */
.mui-field{position:relative;margin-top:8px}
.mui-field>input,.mui-field>select,.mui-field>textarea{
width:100%;font:14px/1.4 var(--font);color:var(--txt);
background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:14px 12px 10px;transition:border-color .15s,box-shadow .15s}
.mui-field>select{padding:13px 12px 11px}
.mui-field>input:hover,.mui-field>select:hover,.mui-field>textarea:hover{border-color:var(--txt)}
.mui-field>input:focus,.mui-field>select:focus,.mui-field>textarea:focus{
outline:none;border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.mui-field>label{
position:absolute;top:13px;left:9px;padding:0 4px;background:#fff;color:var(--mut);
font:14px/1 var(--font);pointer-events:none;transition:all .15s}
/* приподнятый label, когда есть значение или фокус */
.mui-field.filled>label,
.mui-field>input:focus~label,.mui-field>select:focus~label,.mui-field>textarea:focus~label{
top:-8px;font-size:12px;color:var(--acc)}
.mui-field.filled>input:not(:focus)~label,
.mui-field.filled>select:not(:focus)~label{color:var(--mut)}
/* error */
.mui-field.error>input,.mui-field.error>select,.mui-field.error>textarea{border-color:var(--err)}
.mui-field.error>input:focus{box-shadow:inset 0 0 0 1px var(--err)}
.mui-field.error>label{color:var(--err)}
.mui-field .help{font-size:12px;color:var(--mut);margin:3px 12px 0}
.mui-field.error .help{color:var(--err)}