/* Mosrazvitie portal theme. Keep these shared tokens for future screens. */
:root {
  --brand-black: #17171b;
  --brand-red: #e81035;
  --brand-red-dark: #c8102e;
  --brand-rose: #fff0f3;
  --brand-beige: #f8f6f2;
  --brand-border: #e9e4e1;
  --brand-muted: #716b70;
  --brand-shadow: 0 4px 16px #33202905;
  --navy: var(--brand-black);
  --ink: var(--brand-black);
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  --orange: var(--brand-red);
  --orange-dark: var(--brand-red-dark);
  --paper: var(--brand-beige);
  --gray: #949097;
  --green: #258661;
  --red: #d34350;
  --amber: #b47b16;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
}
body {
  background: radial-gradient(ellipse at 100% 0%, #fbe6eb90, transparent 650px), var(--paper);
  font-size: 14px;
  line-height: 1.45;
}
button, a, input, select, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}
.sidebar { width: 264px; padding: 30px 12px 20px; background: #fff; color: var(--ink); border-right: 1px solid var(--line); }
.sidebar .brand { display: block; padding: 0 18px; }
.brand-logo { display: block; width: 180px; height: auto; }
.brand-caption { display: block; color: var(--brand-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 16px; }
.nav-label { margin: 28px 18px 12px; color: var(--brand-muted); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.nav-label>span { background: #f5f2f1; color: var(--brand-muted); border-radius: 6px; padding: 3px 7px; }
#locationNav { scrollbar-color: #d9d0d3 transparent; padding: 1px 2px 6px; }
.location-item { position: relative; border: 0; border-radius: 11px; gap: 10px; padding: 12px 14px; margin-bottom: 4px; }
.location-item:hover { background: #faf7f6; }
.location-item.active { background: var(--brand-rose); border: 0; }
.location-item.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--brand-red); }
.location-caption strong { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; }
.location-caption small { color: var(--brand-muted); font-size: 11px; line-height: 1.5; margin-top: 4px; }
.location-number { color: #8b8187; font-size: 11px; line-height: 19px; }
.location-item.active .location-caption strong, .location-item.active .location-number { color: var(--brand-red-dark); }
.plan-dot { border-color: #c5bcc0; width: 6px; height: 6px; }
.plan-dot.ready { background: var(--brand-red); border-color: var(--brand-red); }
.local-note { color: var(--brand-muted); border-color: var(--line); font-size: 11px; line-height: 1.6; gap: 10px; }
.local-note svg { color: #9c8d93; }
main { margin-left: 264px; max-width: 2000px; padding: 0 30px 24px; }
.topbar { height: 66px; border-bottom: 0; gap: 16px; }
.breadcrumb { color: var(--brand-muted); font-size: 12px; }
.mobile-brand { display: none; }
.connection { color: var(--brand-muted); padding: 7px 10px; background: #ffffffa6; border: 1px solid var(--line); border-radius: 20px; font-size: 11px; white-space: nowrap; }
.connection i { background: var(--gray); }
.connection:hover { border-color: #cfc3c8; background: #fff; }
.page-heading { margin: 0 0 20px; padding: 27px 28px; border: 1px solid #fff; border-radius: 18px; background: linear-gradient(110deg, #fff 15%, #fffaf9 65%, #fce4ea 100%); box-shadow: var(--brand-shadow); }
.eyebrow { color: var(--brand-red-dark); font-size: 10px; font-weight: 700; letter-spacing: 1.25px; }
h1 { font-size: 38px; font-weight: 700; line-height: 1.12; letter-spacing: -1.2px; margin: 10px 0 14px; }
.page-heading p { font-size: 12px; color: var(--brand-muted); }
.divider { color: #cabec3; }
.draft-label { background: #fff; border-color: #eadcde; color: #75636b; font-size: 10px; border-radius: 6px; padding: 4px 8px; }
.primary, .secondary { border-radius: 10px; min-height: 44px; padding: 12px 18px; font-size: 13px; font-weight: 700; }
.primary { background: var(--brand-red); color: #fff; box-shadow: 0 3px 7px #e8103512; }
.primary:hover { background: var(--brand-red-dark); }
.secondary { border-color: #ded5d9; }
.secondary:hover { background: #faf7f8; }
.stats { gap: 12px; padding-bottom: 0; margin-bottom: 20px; }
.stats>div, .stats>div:first-child { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 17px 18px; box-shadow: var(--brand-shadow); }
.stat-label { color: #625b61; font-size: 12px; gap: 7px; }
.stats strong { font-size: 31px; font-weight: 700; margin: 7px 0 3px; letter-spacing: -1px; line-height: 1.2; }
.stat-hint { color: var(--brand-muted); font-size: 10px; line-height: 1.5; display: block; }
.import-summary { background: #fffaf9; border: 1px solid #ebdedf; border-left: 3px solid #e599a8; border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.import-summary strong { font-size: 13px; font-weight: 700; }
.import-summary p { color: var(--brand-muted); font-size: 11px; }
.address-warning, .import-summary .address-warning { color: #8d5d20; }
.workspace { border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--brand-shadow); }
.floor-navigation { padding: 15px 22px; background: #fff; gap: 12px; font-size: 12px; }
.floor-navigation>span:first-child { color: var(--brand-red); }
.floor-navigation label { font-weight: 600; }
select { border-color: #e2dadf; color: #625b61; border-radius: 9px; font-size: 12px; padding: 10px 12px; }
#floorSelect { background: #faf8f7; border-color: #e8dfe3; padding: 9px 12px; }
#planAvailability { color: var(--brand-muted); font-size: 11px; }
.workspace-toolbar { min-height: 66px; padding: 10px 22px; }
.tabs { gap: 6px; align-self: center; background: #f7f4f4; border-radius: 24px; padding: 4px; }
.tab { border: 0; padding: 9px 14px; border-radius: 20px; color: #6a6269; font-size: 12px; font-weight: 600; }
.tab:hover { color: var(--brand-red-dark); }
.tab.selected { background: var(--brand-red); color: #fff; box-shadow: 0 2px 5px #c8102e12; }
.text-button { color: #71666e; font-size: 11px; }
.text-button:hover { color: var(--brand-red-dark); }
.icon-button { color: #756c73; border-radius: 8px; }
.icon-button:hover { background: var(--brand-rose); color: var(--brand-red-dark); }
.map-layout { grid-template-columns: minmax(0,1fr) 300px; }
.map-column { background: #faf9f7; }
.map-viewport { background-image: radial-gradient(#ded7d9 .7px, transparent .7px); background-size: 15px 15px; }
.floor-chip, .zoom-controls { border-color: #e4dce0; border-radius: 9px; box-shadow: 0 2px 5px #4b323508; }
.floor-chip { font-size: 11px; }
.zoom-value { color: #686068; }
.plan-canvas { box-shadow: 0 4px 20px #422a3212; }
.map-bottom { padding: 12px 17px; gap: 12px; }
.map-bottom>span { color: var(--brand-muted); font-size: 10px; }
.equipment-panel { padding: 22px 18px; }
.panel-title h2 { font-size: 15px; font-weight: 700; }
.count-badge { background: var(--brand-rose); color: var(--brand-red-dark); border-radius: 7px; font-weight: 700; min-width: 27px; line-height: 26px; font-size: 11px; }
.search { border-color: #e4dce0; border-radius: 10px; }
.search input { font-size: 11px; padding: 12px 0; color: var(--ink); }
.search svg { color: #8d7d87; }
.search:focus-within { outline: 2px solid var(--brand-red); }
.search input::placeholder { color: #847a81; }
#typeFilter { margin-bottom: 16px; font-size: 11px; }
.device-card { border-radius: 11px; padding: 13px; background: #fff; }
.device-card:hover { border-color: #e5b2be; background: #fff9fa; box-shadow: 0 3px 10px #4b213106; }
.device-card strong { font-size: 12px; font-weight: 600; }
.device-card small { color: var(--brand-muted); font-size: 11px; }
.device-type-icon { background: var(--brand-rose); color: var(--brand-red); width: 34px; height: 34px; border-radius: 9px; }
.device-card-bottom { color: #71666e; font-size: 10px; gap: 7px; }
.placement-note { color: #80717a; border-color: #efe7ea; font-size: 10px; }
.add-card { border-color: #e1bdc6; border-radius: 12px; background: linear-gradient(135deg,#fff,#fff3f5); min-height: 138px; }
.add-card:hover { border-color: var(--brand-red); background: var(--brand-rose); }
.add-circle { background: #ffe2e9; color: var(--brand-red); width: 35px; height: 35px; }
.add-card strong { font-weight: 600; font-size: 12px; }
.add-card>span:last-child { color: var(--brand-muted); font-size: 10px; }
.empty-caption { color: var(--brand-muted); }
.legend { padding: 16px 22px; color: var(--brand-muted); font-size: 10px; }
.legend .legend-title { color: #51484f; }
.legend-info { color: var(--brand-muted); font-size: 10px; }
.page-footer { color: var(--brand-muted); font-size: 10px; padding-top: 17px; }
.page-footer a { color: #6f5c66; }
.page-footer a:hover { color: var(--brand-red-dark); }
.no-plan>span { background: var(--brand-rose); color: var(--brand-red); }
.no-plan h2 { font-weight: 700; }
.no-plan p, .list-heading>span, .list-empty p { color: var(--brand-muted); }
.list-heading h2 { font-size: 17px; font-weight: 700; }
th { background: #faf7f7; color: #71646d; font-weight: 600; font-size: 11px; }
td { border-color: #f0e9ec; }
td small { color: var(--brand-muted); font-size: 11px; }
.status-tag { background: #f3f0f2; color: #706770; border-radius: 7px; }
.list-empty>span { color: #a18694; }
.drawer { width: 500px; box-shadow: -15px 0 60px #31202920; }
.drawer::backdrop, .info-dialog::backdrop { background: #30232d59; }
.drawer-header { background: linear-gradient(110deg,#fff,#fff0f3); padding: 27px; }
.drawer-header h2 { font-weight: 700; }
.drawer-location { color: var(--brand-muted); font-size: 12px; }
.type-fieldset legend, .field, .placement-heading { font-size: 12px; font-weight: 600; }
.type-choice { border-radius: 10px; font-size: 10px; padding: 12px 3px; }
.type-choice svg { color: #8a7c85; }
.type-choice:has(input:checked) { background: var(--brand-rose); border-color: #e790a3; color: var(--brand-red-dark); }
.type-choice:has(input:checked) svg { color: var(--brand-red); }
.type-choice:focus-within { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.required { color: var(--brand-red-dark); }
.field input, .field textarea, .coordinate-fields input { border-color: #e3dbe0; border-radius: 9px; font-size: 12px; }
.field input::placeholder, .field textarea::placeholder { color: #8e8189; }
.field-help { color: var(--brand-muted); font-size: 11px; }
.source-info { background: #f7f3f5; color: #6f5c68; border-radius: 9px; }
#addressWarning { background: #fff7e9; border-radius: 9px; }
.mini-plan { background: #faf8f6; border-radius: 10px; }
.coordinate-fields { color: var(--brand-muted); font-size: 10px; }
.coordinate-fields input[readonly] { background: #f5f1f3; color: #827780; }
.monitor-status p { color: var(--brand-muted); font-size: 11px; }
.monitor-status strong { font-weight: 600; }
.delete-button, .error { color: var(--brand-red-dark); }
.drawer-footer .primary, .drawer-footer .secondary { font-size: 12px; }
.info-dialog { border-radius: 18px; }
.info-illustration { background: var(--brand-rose); color: var(--brand-red); }
.info-dialog p { color: var(--brand-muted); font-size: 13px; }
.toast { background: var(--brand-black); border-radius: 12px; }
.device-model { filter: drop-shadow(0 2px 2px #42272d20); }
.object-number { background: #625861; box-shadow: 0 1px 4px #35273233; }
.object-lock { border-color: #d8ccd3; color: #6a5662; }
@media (min-width: 1600px) { .map-layout { grid-template-columns: minmax(0,1fr) 320px; } }
@media (min-width: 1051px) and (max-width: 1250px) {
  .sidebar { width: 240px; }
  main { margin-left: 240px; padding-left: 22px; padding-right: 22px; }
  .page-heading { padding: 24px; }
  h1 { font-size: 32px; }
  .map-layout { grid-template-columns: minmax(0,1fr) 270px; }
  .stats>div, .stats>div:first-child { padding: 14px; }
}
@media (max-width: 1050px) {
  .sidebar { display: none; }
  main { margin-left: 0; padding-left: 22px; padding-right: 22px; }
  .topbar { height: 84px; }
  .mobile-brand { display: block; }
  .mobile-brand .brand-logo { width: 135px; }
  .breadcrumb { display: none; }
  .mobile-location { margin: 0 0 18px; font-size: 11px; color: var(--brand-muted); }
  .mobile-location select { background: #fff; border-color: #e2dadf; }
  .page-heading { margin-top: 0; }
  .map-layout { grid-template-columns: minmax(0,1fr) 285px; }
}
@media (max-width: 720px) {
  main { padding: 0 14px 22px; }
  .topbar { height: 76px; gap: 8px; }
  .mobile-brand .brand-logo { width: 119px; }
  .connection { font-size: 10px; padding: 7px 9px; gap: 5px; }
  .page-heading { padding: 22px; border-radius: 15px; margin-bottom: 16px; }
  .page-heading h1 { font-size: 31px; letter-spacing: -1px; }
  .page-heading p { font-size: 11px; line-height: 1.6; gap: 5px; }
  .page-heading>.primary { margin-top: 21px; }
  .eyebrow { font-size: 9px; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
  .stats>div, .stats>div:first-child { padding: 15px; border-radius: 12px; }
  .stat-label { font-size: 11px; }
  .stat-label .dot { width: 7px; height: 7px; }
  .stats strong { font-size: 29px; }
  .stat-hint { font-size: 10px; }
  .import-summary { padding: 14px 16px; margin-bottom: 16px; }
  .import-summary p { font-size: 11px; }
  .workspace { border-radius: 14px; }
  .floor-navigation { padding: 14px; gap: 9px; }
  .floor-navigation label { font-size: 11px; }
  #planAvailability { font-size: 10px; }
  .workspace-toolbar { padding: 9px 10px; min-height: 62px; gap: 6px; }
  .tabs { gap: 2px; padding: 3px; }
  .tab { font-size: 10px; padding: 9px 8px; gap: 5px; }
  .toolbar-actions { gap: 3px; }
  .map-layout { grid-template-columns: 1fr; }
  .map-viewport { height: 440px; }
  .map-bottom { padding: 11px 14px; gap: 6px; }
  .map-bottom>span { font-size: 10px; }
  .map-bottom .text-button { font-size: 10px; }
  .equipment-panel { padding: 22px 16px; }
  .device-cards { grid-template-columns: 1fr; }
  .device-card { padding: 15px; }
  .device-card strong { font-size: 13px; }
  .device-card-bottom, .placement-note { font-size: 11px; }
  .search input, #typeFilter { font-size: 12px; }
  .legend { padding: 14px; font-size: 10px; gap: 10px; }
  .page-footer { font-size: 10px; }
  .drawer { width: 100%; }
  .drawer-header { padding: 23px 20px; }
  .drawer-footer { padding: 15px 16px; }
  .type-choice { font-size: 9px; }
  .form-grid { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }