:root{
  --bg:#f3f6fb;--card:#fff;--text:#172033;--muted:#64748b;--line:#dbe3ef;--primary:#2563eb;--green:#0f766e;--red:#b91c1c;--warn:#b45309;--soft:#eff6ff;--shadow:0 16px 40px rgba(15,23,42,.08);--radius:18px
}
*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#eaf1fb 0%,var(--bg) 240px);color:var(--text)}
a{color:var(--primary);font-weight:700}.top{max-width:1400px;margin:0 auto;padding:26px 28px 16px;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.top h1{margin:0 0 6px;font-size:30px}.top p{margin:0;color:var(--muted);line-height:1.45}.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.badge{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#334155;text-decoration:none;box-shadow:0 8px 24px rgba(15,23,42,.05)}.badge.ok{color:#166534}.badge.bad{color:#991b1b}
.tabs{max-width:1400px;margin:0 auto;padding:0 28px 18px;display:flex;gap:10px;flex-wrap:wrap}.tabs button,.buttonlike,button{border:1px solid var(--line);border-radius:12px;background:#fff;color:#334155;font-weight:800;padding:11px 14px;cursor:pointer;text-decoration:none;font-size:14px}.tabs button.active{background:var(--primary);color:#fff;border-color:var(--primary)}main{max-width:1400px;margin:0 auto;padding:0 28px 38px}.screen{display:none}.screen.active{display:block}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.span8{grid-column:span 8}.span6{grid-column:span 6}.span4{grid-column:span 4}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card h2{margin:0 0 14px}.card h3{margin:16px 0 10px}.notice{border-left:4px solid var(--primary);background:var(--soft);padding:12px 14px;border-radius:12px;color:#1e3a8a;line-height:1.45}.row{display:grid;grid-template-columns:repeat(12,1fr);gap:12px;margin:12px 0}label{display:block;grid-column:span 3;font-weight:700;font-size:13px;color:#334155}label.wide{grid-column:span 6}label.full{grid-column:span 12;margin-top:10px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 11px;font:inherit;background:#fff;color:var(--text);margin-top:6px}textarea{min-height:82px;resize:vertical}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.primary{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}.secondary{background:#e2e8f0!important;color:#0f172a!important}.red{background:var(--red)!important;color:#fff!important}.green{background:var(--green)!important;color:#fff!important}.checks{max-height:235px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;padding:4px;border:1px solid var(--line);border-radius:14px}.check{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff;font-weight:600}.check input{width:auto;margin:0}.partLine{display:grid;grid-template-columns:2fr .7fr 1.5fr auto;gap:8px;margin:8px 0}.partLine button{padding:8px 11px}.info{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:12px;line-height:1.5;color:#334155}.filters{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;align-items:end;margin:12px 0}.filters label{grid-column:span 2}.filters label:nth-child(5){grid-column:span 3}.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:14px;margin-top:12px}table{width:100%;border-collapse:collapse;min-width:1100px;background:#fff}th,td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top;font-size:13px}th{background:#f8fafc;text-align:left;position:sticky;top:0}.tag{display:inline-block;border-radius:999px;background:#e0f2fe;color:#075985;padding:3px 8px;font-size:12px;font-weight:800;margin:2px}.tag.red{background:#fee2e2!important;color:#991b1b!important}.tag.green{background:#dcfce7!important;color:#166534!important}.muted{color:var(--muted)}.statsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.kpi{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px;padding:18px}.kpi span{color:var(--muted);font-weight:700}.kpi b{display:block;font-size:34px;margin-top:8px}.barRow{display:grid;grid-template-columns:minmax(150px,1.2fr) 3fr 70px;gap:10px;align-items:center;margin:9px 0}.bar{height:18px;background:#e2e8f0;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#38bdf8);border-radius:999px}.toast{position:fixed;right:22px;bottom:22px;background:#0f172a;color:#fff;padding:13px 16px;border-radius:14px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);transition:.2s;z-index:10;max-width:420px}.toast.show{opacity:1;transform:translateY(0)}.empty{color:var(--muted);padding:14px;text-align:center}.adminLayout{display:grid;grid-template-columns:250px 1fr;gap:16px}.side{display:flex;flex-direction:column;gap:8px}.side button{text-align:left}.side button.active{background:var(--primary);color:white}.editTable input,.editTable select{margin:0}.editTable td:last-child{white-space:nowrap}.topSmall{max-width:1400px;margin:0 auto;padding:22px 28px 12px;display:flex;justify-content:space-between;gap:16px;align-items:center}.passwordBox{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.passwordBox label{grid-column:auto;min-width:250px}
@media(max-width:1000px){.top{flex-direction:column}.span8,.span6,.span4{grid-column:span 12}.statsGrid{grid-template-columns:repeat(2,1fr)}label,label.wide,.filters label{grid-column:span 12}.partLine{grid-template-columns:1fr}.adminLayout{grid-template-columns:1fr}.filters{grid-template-columns:1fr}.row{grid-template-columns:1fr}.topSmall{flex-direction:column;align-items:flex-start}}
@media print{.tabs,.top .badges,button,input,select,textarea,.filters{display:none!important}.screen{display:block}.screen:not(.active){display:none}.card{box-shadow:none}}

/* Новые блоки: карта аварии и вкладка поездов */
.mapBox{border:1px solid var(--line);border-radius:16px;padding:12px;margin:14px 0;background:#f8fafc}.mapHead{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.mapArea{position:relative;width:100%;min-height:260px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}.mapArea img{display:block;max-width:100%;height:auto;margin:0 auto}.emptyMap{display:flex;align-items:center;justify-content:center;color:var(--muted);padding:28px;text-align:center}.mapMarker{position:absolute;width:22px;height:22px;border-radius:50%;background:#ef4444!important;border:3px solid #fff!important;box-shadow:0 0 0 3px rgba(239,68,68,.35),0 8px 20px rgba(0,0,0,.3);transform:translate(-50%,-50%);padding:0!important;z-index:3}.mapNote{margin-top:8px}.span12{grid-column:span 12}.innerGrid{box-shadow:none}.trainKpi{grid-template-columns:repeat(4,1fr)}.trainKpi .kpi b{font-size:24px}.commentItem{border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;background:#fff}.commentItem p{margin:8px 0 0;line-height:1.45}.commentItem span{display:block;margin-top:2px;font-size:12px}
@media(max-width:1000px){.span12{grid-column:span 12}.trainKpi{grid-template-columns:repeat(2,1fr)}}


/* Интерактивные блоки аварий: активны только желтые прямоугольники */
.mapArea{min-height:320px;text-align:left}
.mapImageWrap{position:relative;display:inline-block;background:#fff;line-height:0}
.mapImageWrap img{display:block;max-width:none;width:auto;height:auto;margin:0;user-select:none;pointer-events:none}
.mapOverlay{position:absolute;inset:0;z-index:2;pointer-events:none}
.mapBlock{position:absolute;padding:0!important;border:2px solid rgba(180,83,9,.65)!important;border-radius:2px!important;background:rgba(254,240,138,.34)!important;color:#111827!important;box-shadow:none!important;font-size:10px!important;font-weight:900!important;line-height:1!important;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:auto;opacity:.72}
.mapBlock:hover{background:rgba(250,204,21,.72)!important;border-color:#b45309!important;opacity:1;z-index:4}
.mapBlock.selected{background:rgba(250,204,21,.92)!important;border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.25)!important;opacity:1;z-index:5}
.mapBlock.vertical span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:9px}


/* Правки: ручной выбор локомотивов, статусы поездов, карта без дублей подписей */
.smallNotice{font-size:13px;margin-bottom:10px}.smallTableWrap{max-height:360px;overflow:auto}.locoStatusPanel{margin:12px 0 18px}.locoStatusSelect{min-width:170px}.mapBlock{background:rgba(250,204,21,.01)!important;border:2px solid rgba(180,83,9,.04)!important;color:transparent!important;font-size:0!important;opacity:1}.mapBlock span{display:none!important}.mapBlock:hover{background:rgba(250,204,21,.42)!important;border-color:#b45309!important;opacity:1}.mapBlock.selected{background:rgba(250,204,21,.78)!important;border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.24)!important}.mapBlock.vertical span{display:none!important}

/* Правки: список поездов перенесён во вкладку "Поезда", журнал с подробностями */
.trainListWrap{max-height:520px;overflow:auto}
.trainListWrap table{min-width:520px}
.selectedTrainRow td{background:#eff6ff!important}
.recordActions{white-space:nowrap;min-width:170px}
.recordActions button{padding:7px 9px;margin:2px}
.recordDetailsRow td{background:#f8fafc!important;padding:0!important}
.recordDetails{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:10px;padding:14px;line-height:1.45;border-top:1px solid var(--line)}
.recordDetails div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}
@media(max-width:1000px){.recordDetails{grid-template-columns:1fr}.recordActions{white-space:normal}.trainListWrap table{min-width:420px}}


/* Правки 2026-06-29: карта аварии без внутренней прокрутки, адаптивные активные блоки, статистика запчастей */
#accident .mapArea{overflow:visible;min-height:0;padding:8px}
#accident .mapImageWrap{position:relative;display:block;width:100%;max-width:var(--map-natural-width,100%);margin:0 auto;background:#fff;line-height:0}
#accident .mapImageWrap img{display:block;width:100%;height:auto;max-width:100%;margin:0;user-select:none;pointer-events:none}
#accident .mapOverlay{position:absolute;inset:0;z-index:2;pointer-events:none}
#accident .mapBlock{position:absolute;pointer-events:auto}
#serviceLocomotiveText,#accidentLocomotiveText{background-color:#fff}
.sectionHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.sectionHead h2{margin-bottom:6px}
.partsKpi{grid-template-columns:repeat(4,1fr);margin-top:10px}
.partsKpi .kpi b{font-size:26px}
@media(max-width:1000px){.partsKpi{grid-template-columns:repeat(2,1fr)}}

/* Car accident map */
.carMapBox{border:1px solid var(--line);border-radius:16px;padding:12px;margin:14px 0;background:#f8fafc}
.carMapImageWrap{position:relative;width:100%;line-height:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.carMapImageWrap img{display:block;width:100%;height:auto;max-width:100%;margin:0;user-select:none;pointer-events:none}
.carMapImageWrap:not(.readonly){cursor:crosshair}
.carMapMarkers{position:absolute;inset:0;z-index:3;pointer-events:none}
.carMapDot{position:absolute;width:10px;height:10px;border-radius:50%;background:#ef4444!important;border:2px solid #fff!important;box-shadow:0 0 0 2px rgba(239,68,68,.35),0 4px 10px rgba(0,0,0,.35);transform:translate(-50%,-50%);padding:0!important;min-width:0!important;min-height:0!important;pointer-events:auto}
.carMapDot.selected{width:12px;height:12px;background:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.25),0 5px 12px rgba(0,0,0,.38)}
.mapAccidentItem{border-top:1px solid var(--line);padding:8px 0;line-height:1.35}
/* Fix: keep cars page normal width, enlarge only car maps inside normal page width */
#carAccidentForm{grid-column:span 12}
#carAccident .carMapBox{width:100%}
#carAccident .carMapImageWrap{width:100%;max-width:100%;margin:0 auto}
#carStatsMapWrap.carMapImageWrap{width:100%;max-width:100%;margin:0 auto}
.sideGroup{margin:12px 0 4px;padding:6px 8px;border-radius:10px;background:#eef2ff;color:#3730a3;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}

/* Update: train section quick filter, deletable comments, rail accident heat maps, admin save all */
.commentItemWithAction .commentTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.smallCommentDelete{padding:5px 8px!important;border-radius:9px!important;font-size:12px!important}
.sectionBlockGroup{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.sectionBlockGroup h3{margin:4px 0 8px!important;color:#334155}
.railProblemMaps{display:grid;grid-template-columns:1fr;gap:16px}
.railProblemSection{border:1px solid var(--line);border-radius:14px;padding:12px;background:#f8fafc}
.railProblemSection h3{margin:0 0 10px}
.railProblemMapWrap{position:relative;width:100%;max-width:var(--map-natural-width,100%);margin:0 auto;line-height:0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.railProblemMapWrap img{display:block;width:100%;height:auto;max-width:100%;user-select:none;pointer-events:none}
.railProblemOverlay{position:absolute;inset:0;z-index:2;pointer-events:none}
.railProblemBlock{position:absolute;border:2px solid rgba(153,27,27,.6);border-radius:2px;box-shadow:0 0 0 2px rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.railProblemBlock span{background:rgba(15,23,42,.72);border-radius:999px;padding:2px 5px;line-height:1}
.adminTableHead{margin:14px 0 8px}.adminTableHead h3{margin:0!important}
#carsListTable tbody tr,#trainListTable tbody tr{cursor:pointer}
#carsListTable tbody tr:hover td,#trainListTable tbody tr:hover td{background:#f8fafc}
@media(max-width:1000px){.railProblemMaps{grid-template-columns:1fr}}


/* Thematic branding update */
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:
radial-gradient(circle at top right, rgba(14,165,233,.12), transparent 22%),
radial-gradient(circle at top left, rgba(16,185,129,.10), transparent 25%),
radial-gradient(circle at 50% 0, rgba(245,158,11,.10), transparent 28%);z-index:-1}
.brandTop{background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.96));border:1px solid rgba(219,227,239,.9);border-radius:26px;box-shadow:0 20px 48px rgba(15,23,42,.10);padding:20px 22px;align-items:center;position:relative;overflow:hidden}
.brandTop::after{content:"";position:absolute;inset:auto -40px -40px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, rgba(37,99,235,.10), transparent 70%);pointer-events:none}
.brandIntro{display:flex;gap:18px;align-items:center;min-width:0}
.brandLogoBox{background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px 12px;box-shadow:0 12px 32px rgba(15,23,42,.08);flex:0 0 auto}
.brandLogo{display:block;width:220px;max-width:100%;height:auto}
.brandText h1{margin:0 0 8px;font-size:34px;line-height:1.1}
.brandText p{margin:0;color:var(--muted);line-height:1.5;max-width:760px}
.brandMeta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.brandChip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:800;color:#334155;box-shadow:0 8px 20px rgba(15,23,42,.05)}
.brandChip strong{color:#0f172a}
.creatorCard{background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #bfdbfe;border-radius:20px;padding:14px 16px;min-width:240px;box-shadow:0 14px 34px rgba(37,99,235,.10)}
.creatorLabel{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#1d4ed8;font-weight:900;margin-bottom:6px}
.creatorName{font-size:18px;font-weight:900;color:#0f172a;line-height:1.2}
.creatorRole{margin-top:4px;color:#334155;font-weight:700}
.top.brandTop .badges,.topSmall.brandTop .badges{justify-content:flex-end}
.heroRibbon{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,#2563eb,#0ea5e9);color:#fff;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:900;box-shadow:0 10px 24px rgba(37,99,235,.18);margin-bottom:10px}
.pageFooter{max-width:1400px;margin:0 auto 26px;padding:0 28px}
.pageFooterCard{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:16px 18px}
.pageFooterCard b{display:block;font-size:16px;margin-bottom:4px}
.pageFooterCard p{margin:0;color:var(--muted);line-height:1.45}
.footerMiniLogo{width:110px;height:auto;opacity:.92}
@media(max-width:1000px){.brandIntro{flex-direction:column;align-items:flex-start}.brandText h1{font-size:28px}.brandLogo{width:180px}.brandTop{padding:18px}.creatorCard{width:100%}.pageFooterCard{flex-direction:column;align-items:flex-start}.footerMiniLogo{width:90px}}


/* Theme refinement: unified header, equal spacing, icons, collapsible statistic cards */
.brandTop{margin-bottom:18px}
.brandTop .badges{align-self:center}
.brandTop.compactBrand{justify-content:space-between}
.brandText .brandSub{margin:4px 0 0;color:var(--muted);font-weight:700}
.tabs button{display:inline-flex;align-items:center;gap:6px}
.collapsibleCard{position:relative}
.cardCollapseHead,.collapsibleCard>.sectionHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cardCollapseHead h2{margin:0!important}
.collapseBtn{padding:7px 10px!important;border-radius:10px!important;font-size:12px!important;background:#f1f5f9!important;color:#334155!important}
.collapsibleCard.is-collapsed>.cardCollapseHead~*,
.collapsibleCard.is-collapsed>.sectionHead~*,
.collapsibleCard.is-collapsed>h3,
.collapsibleCard.is-collapsed>p,
.collapsibleCard.is-collapsed>div:not(.cardCollapseHead):not(.sectionHead){display:none!important}
.collapsibleCard.is-collapsed{padding-bottom:14px}
.collapsibleCard.is-collapsed .collapseBtn{background:#dbeafe!important;color:#1d4ed8!important}
@media(max-width:1000px){.brandTop{margin-bottom:14px}}


/* Fix collapse behavior: compact preview instead of empty stretched cards */
#stats > .grid, #carStats > .grid{align-items:start}
.collapsibleCard{align-self:start}
.collapsibleBody{max-height:430px;overflow:hidden;position:relative;transition:max-height .2s ease}
.collapsibleBody::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.collapsibleCard.is-expanded .collapsibleBody{max-height:none;overflow:visible}
.collapsibleCard.is-expanded .collapsibleBody::after{display:none}
.collapsibleCard.is-collapsed>.cardCollapseHead~*,
.collapsibleCard.is-collapsed>.sectionHead~*,
.collapsibleCard.is-collapsed>h3,
.collapsibleCard.is-collapsed>p,
.collapsibleCard.is-collapsed>div:not(.cardCollapseHead):not(.sectionHead){display:block!important}
.collapsibleCard.is-collapsed{padding-bottom:18px}
.collapsibleCard .collapseBtn{background:#dbeafe!important;color:#1d4ed8!important}


/* Update: section buttons for rail problem places and bottom arrow expansion */
.sectionSwitcher{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.sectionSwitchBtn{padding:8px 12px!important;border-radius:999px!important;background:#f8fafc!important;color:#334155!important;border:1px solid var(--line)!important;font-size:13px!important}
.sectionSwitchBtn.active{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
.cardCollapseHead,.collapsibleCard>.sectionHead{margin-bottom:10px}
.collapsibleBody{max-height:430px;overflow:hidden;position:relative;transition:max-height .2s ease}
.collapsibleBody::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58px;background:linear-gradient(180deg,rgba(255,255,255,0),var(--card));pointer-events:none}
.collapsibleCard.is-expanded .collapsibleBody{max-height:none;overflow:visible}
.collapsibleCard.is-expanded .collapsibleBody::after,.collapsibleCard.no-expand-needed .collapsibleBody::after{display:none}
.expandFooter{display:flex;justify-content:center;align-items:center;margin-top:8px}
.expandArrow{width:40px;height:34px;line-height:1;border-radius:999px!important;padding:0!important;font-size:24px!important;font-weight:900!important;background:#dbeafe!important;color:#1d4ed8!important;border:1px solid #bfdbfe!important;box-shadow:0 8px 20px rgba(37,99,235,.12)}
.expandArrow:hover{background:#bfdbfe!important}
.collapseBtn{display:none!important}


/* Pretty expand button instead of plain arrow symbol */
.expandFooter{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:12px;
}
.expandArrow{
  width:auto!important;
  min-width:148px!important;
  height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border-radius:999px!important;
  padding:0 16px!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  background:linear-gradient(135deg,#eff6ff,#dbeafe)!important;
  color:#1d4ed8!important;
  border:1px solid #bfdbfe!important;
  box-shadow:0 10px 24px rgba(37,99,235,.14)!important;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease!important;
}
.expandArrow:hover{
  background:linear-gradient(135deg,#dbeafe,#bfdbfe)!important;
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(37,99,235,.20)!important;
}
.expandArrow:active{transform:translateY(0)}
.expandText{line-height:1;white-space:nowrap}
.chevronIcon{
  width:22px;
  height:22px;
  border-radius:999px;
  background:#2563eb;
  position:relative;
  flex:0 0 auto;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}
.chevronIcon::before{
  content:"";
  position:absolute;
  left:50%;
  top:48%;
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translate(-50%,-60%) rotate(45deg);
}
.chevronIcon.up::before{
  top:56%;
  transform:translate(-50%,-35%) rotate(225deg);
}


/* Expand controls: top and bottom buttons; keep visible for "all time" long stats */
.cardCollapseHead,.collapsibleCard>.sectionHead{
  align-items:center;
}
.expandTopButton{
  min-width:126px!important;
  height:34px!important;
  padding:0 13px!important;
  font-size:12px!important;
  margin-left:auto!important;
}
.expandFooter{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:12px;
}
.no-expand-needed .collapsibleBody{
  max-height:none!important;
  overflow:visible!important;
}
.no-expand-needed .collapsibleBody::after{
  display:none!important;
}
.collapsibleCard:not(.is-expanded):not(.no-expand-needed) .collapsibleBody{
  max-height:430px!important;
  overflow:hidden!important;
}
.collapsibleCard.is-expanded .collapsibleBody{
  max-height:none!important;
  overflow:visible!important;
}
.collapsibleCard.is-expanded .collapsibleBody::after,
.collapsibleCard.no-expand-needed .collapsibleBody::after{
  display:none!important;
}


/* Final collapse behavior: default collapsed, no buttons for short blocks */
.collapsibleCard:not(.is-expanded):not(.no-expand-needed) .collapsibleBody{
  max-height:430px!important;
  overflow:hidden!important;
  position:relative!important;
}
.collapsibleCard:not(.is-expanded):not(.no-expand-needed) .collapsibleBody::after{
  display:block!important;
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:58px;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--card));
  pointer-events:none;
}
.collapsibleCard.is-expanded .collapsibleBody,
.collapsibleCard.no-expand-needed .collapsibleBody{
  max-height:none!important;
  overflow:visible!important;
}
.collapsibleCard.is-expanded .collapsibleBody::after,
.collapsibleCard.no-expand-needed .collapsibleBody::after{
  display:none!important;
}
.collapsibleCard.no-expand-needed .expandTopButton,
.collapsibleCard.no-expand-needed .expandFooter{
  display:none!important;
}
.expandTopButton{
  min-width:126px!important;
  height:34px!important;
  padding:0 13px!important;
  font-size:12px!important;
  margin-left:auto!important;
}


/* Unified database status badge colors */
.brandChip.ok{color:#166534;border-color:#bbf7d0;background:#f0fdf4}
.brandChip.bad{color:#991b1b;border-color:#fecaca;background:#fef2f2}


/* Planning page */
.planningFilters label{grid-column:span 3}
.compactRow{grid-template-columns:repeat(2,1fr)}
.compactRow label{grid-column:span 1}
.planningCards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.employeePlanCard{align-self:start}
.employeeSummaryPills{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.progressBig{height:18px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:8px 0 14px}
.progressBig i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#22c55e);border-radius:999px}
.miniProgress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;min-width:92px;margin-bottom:5px}
.miniProgress i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#22c55e);border-radius:999px}
.planningHelp{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:10px;line-height:1.45}
.planningHelp div{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:12px}
.planningTableWrap table{min-width:1280px}
.planningTaskTable input{min-width:90px}
.planningTaskTable .taskTitleInput{min-width:260px}
.planningTaskTable .dayCommentInput{min-width:190px}
@media(max-width:1000px){.planningFilters label{grid-column:span 12}.planningHelp{grid-template-columns:1fr}.employeeSummaryPills{justify-content:flex-start}}


/* Planning improvements: autosave, quick tasks, permanent deletion, detailed history */
.planningTaskTable input,
#employeesTable input{
  min-width:120px;
}
.savingRow td{
  background:#fffbeb!important;
}
.savedRow td{
  background:#ecfdf5!important;
  transition:background .35s ease;
}
.historyDetailsRow td{
  background:#f8fafc!important;
  padding:14px!important;
}
.historyDetailsBox{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.historyTaskCard{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px;
}
.historyTaskCard h3{
  margin:0 0 4px!important;
}
.miniHistoryTable{
  min-width:620px;
}
#quickTaskForm + hr{
  border:0;
  border-top:1px solid var(--line);
  margin:16px 0;
}
.employeePlanCard .recordActions button,
#employeesTable .recordActions button{
  white-space:nowrap;
}


/* Planning layout polish */
.planningWorkGrid{align-items:start;margin-top:16px}
.planningSideStack{display:grid;grid-template-columns:1fr;gap:16px;align-self:start}
.planningCards{margin-top:0!important}
.planningMiniCard h2{margin-bottom:12px!important}
.planningForm{display:grid;grid-template-columns:1fr;gap:12px}
.planningForm label.full{margin-top:0!important}
.planningForm input,.planningForm select,.planningForm textarea{margin-top:6px}
.planningActionBtn{width:100%;margin-top:2px;text-align:center;justify-content:center}
.planningHelpCard{padding-bottom:16px}
.compactPlanningHelp{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;line-height:1.35!important}
.compactPlanningHelp div{padding:9px 10px!important;border-radius:12px!important}
#quickTaskForm + hr{display:none!important}
@media(max-width:1000px){.planningSideStack,.planningCards{grid-column:span 12!important}.planningWorkGrid{gap:16px}}


/* Planning horizontal cards update */
.planningTopBlocks{margin-top:16px;align-items:stretch}
.planningTopBlocks>.planningMiniCard{height:100%}
.planningTopBlocks .planningHelpCard{display:flex;flex-direction:column}
.planningCards{margin-top:16px!important}
.planningSideStack{display:contents}
@media(max-width:1000px){.planningTopBlocks>.planningMiniCard{grid-column:span 12!important}}

/* Planning shifts */
#employeesTable select.empShift{min-width:120px}
.planningFilters label{min-width:150px}


/* Planning history by date range and shared technical employees */
.historyFilters label{grid-column:span 3}
.historyStats .kpi b{font-size:28px}
.historyTaskList{display:grid;grid-template-columns:1fr;gap:14px}
.historyMonthGroup{border:1px solid var(--line);border-radius:16px;background:#f8fafc;padding:12px}
.historyMonthGroup h3{margin:0 0 10px!important;color:#334155}
.historyTaskLine{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;margin:10px 0}
.historyTaskMain{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}
.historyTaskDays{margin-top:10px}
.historyChart{display:grid;grid-template-columns:1fr;gap:10px}
.historyChartRow{display:grid;grid-template-columns:minmax(140px,.9fr) minmax(220px,2fr) minmax(220px,1.4fr);gap:10px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px}
.historyChartBar{height:18px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.historyChartBar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#22c55e);border-radius:999px}
#employeesTable select.empRole,#employeesTable select.empShift{min-width:130px}
@media(max-width:1000px){.historyFilters label{grid-column:span 12}.historyChartRow{grid-template-columns:1fr}.historyTaskMain{display:block}.historyTaskMain .employeeSummaryPills{margin-top:10px}}


/* Planning: pie chart by tasks, no shift UI */
.pieWrap{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:22px;
  align-items:center;
}
.pieChart{
  width:260px;
  height:260px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08), 0 12px 30px rgba(15,23,42,.08);
}
.pieCenter{
  width:118px;
  height:118px;
  border-radius:50%;
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 4px 18px rgba(15,23,42,.14);
}
.pieCenter b{
  font-size:22px;
  line-height:1;
}
.pieCenter span{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
}
.pieLegend{
  display:grid;
  gap:9px;
}
.pieLegendRow{
  display:grid;
  grid-template-columns:14px minmax(160px,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.pieLegendRow i{
  width:14px;
  height:14px;
  border-radius:999px;
  display:block;
}
.pieLegendRow span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pieLegendRow b{
  white-space:nowrap;
}
@media(max-width:760px){
  .pieWrap{grid-template-columns:1fr}
  .pieChart{width:220px;height:220px;margin:auto}
  .pieLegendRow{grid-template-columns:14px 1fr}
  .pieLegendRow b{grid-column:2}
}


/* Planning: employee progress bar shows selected workday completion against 11 hours */
.dayProgress::after{
  content:"Рабочий день: 11 часов";
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}
.employeePlanCard .progressBig.dayProgress{
  margin-bottom:22px;
}