/* Plan-first workspace. Brand colours and fonts come from brand.css. */
html, body { height: 100%; }
body { overflow: hidden; }
.sidebar { width: 208px; padding: 14px 8px 10px; }
.sidebar .brand { padding: 0 12px; }
.brand-logo { width: 126px; }
.brand-caption { font-size: 10px; margin-top: 7px; }
.nav-label { margin: 14px 12px 6px; font-size: 9px; }
.location-item { padding: 7px 10px; gap: 7px; margin-bottom: 2px; border-radius: 7px; }
.location-caption strong { font-size: 11px; line-height: 15px; }
.location-caption small { font-size: 10px; margin-top: 1px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.location-number { font-size: 10px; line-height: 15px; }
.plan-dot { margin-top: 5px; width: 5px; height: 5px; }
.sidebar-bottom { padding: 7px 10px 0; }
.local-note { padding-top: 7px; font-size: 9px; line-height: 1.4; }
main { height: 100dvh; min-height: 480px; margin-left: 208px; padding: 6px 14px 7px; max-width: none; display: flex; flex-direction: column; gap: 6px; }
.overview { flex: 0 0 auto; }
.topbar { height: 23px; gap: 8px; }
.breadcrumb { font-size: 10px; }
.connection { font-size: 10px; padding: 2px 7px; gap: 5px; }
.connection svg { width: 12px; height: 12px; }
.page-heading { padding: 5px 10px; margin: 2px 0 4px; border-radius: 9px; gap: 10px; box-shadow: none; min-height: 46px; }
.page-heading .eyebrow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.page-heading h1 { font-size: 19px; line-height: 1.15; letter-spacing: -.45px; margin: 0 0 3px; }
.page-heading p { font-size: 10px; gap: 4px; line-height: 1.3; }
.page-heading p svg { width: 12px; height: 12px; }
.draft-label { padding: 1px 5px; font-size: 9px; margin-left: 2px; }
.page-heading>.primary { min-height: 32px; padding: 7px 11px; font-size: 11px; border-radius: 8px; }
.stats { display: flex; gap: 0; margin: 0; padding: 2px 4px; background: #ffffffb0; border: 1px solid var(--line); border-radius: 7px; min-height: 28px; }
.stats>div, .stats>div:first-child { display: flex; flex: 1; align-items: center; gap: 7px; padding: 1px 10px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.stats>div+div { border-left: 1px solid var(--line); }
.stat-label { font-size: 10px; white-space: nowrap; }
.stats strong { font-size: 17px; line-height: 1; letter-spacing: -.4px; margin: 0; }
.stat-hint { font-size: 9px; line-height: 1.2; margin-left: auto; max-width: 130px; }
.import-summary { margin: 4px 0 0; padding: 3px 8px; background: #fff9f8; border-radius: 6px; border-left-width: 2px; line-height: 1.4; }
.import-summary summary { cursor: pointer; font-size: 10px; list-style: none; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.import-summary summary::-webkit-details-marker { display: none; }
.import-summary summary::after { content: 'Подробнее ⌄'; color: var(--brand-muted); font-size: 9px; margin-left: auto; }
.import-summary[open] summary::after { content: 'Свернуть ⌃'; }
.import-summary summary strong { font-size: 10px; }
.import-summary .summary-counts { color: var(--brand-muted); }
.import-summary summary .address-warning { font-size: 10px; }
.import-summary p { font-size: 11px; margin: 5px 0; }
.workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); background: #fff; gap: 8px; flex-shrink: 0; }
.floor-navigation { padding: 6px 10px; border: 0; gap: 7px; flex-shrink: 0; font-size: 11px; }
.floor-navigation label { font-size: 10px; }
.floor-navigation>span:first-child svg { width: 16px; height: 16px; }
#floorSelect { width: 105px; min-width: 0; padding: 5px 7px; font-size: 11px; border-radius: 6px; }
#planAvailability { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.workspace-toolbar { flex: 1; min-height: 42px; padding: 4px 8px; border: 0; }
.tabs { padding: 3px; }
.tab { font-size: 10px; padding: 5px 10px; gap: 5px; }
.tab svg { width: 14px; height: 14px; }
.toolbar-actions { gap: 6px; }
.toolbar-actions .text-button { font-size: 10px; }
.map-layout { flex: 1; min-height: 0; grid-template-columns: minmax(0,1fr) 280px; }
.workspace:has(.inline-editor:not([hidden])) .map-layout { grid-template-columns: minmax(0,1fr) 336px; }
.map-column { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.map-tools { top: 10px; left: 10px; right: 10px; }
.floor-chip { padding: 5px 8px; font-size: 10px; border-radius: 6px; }
.zoom-controls { border-radius: 7px; }
.zoom-controls .icon-button { height: 28px; width: 28px; }
.zoom-value { height: 28px; min-width: 42px; font-size: 11px; }
.map-viewport { flex: 1; min-height: 0; height: auto; padding: 0; overflow: auto; touch-action: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c6b7bf transparent; cursor: grab; }
.map-viewport.panning { cursor: grabbing; }
.map-viewport.placing { cursor: crosshair; }
.map-viewport:focus-visible { outline-offset: -3px; }
.plan-stage { position: relative; min-width: 100%; min-height: 100%; }
.plan-canvas { position: absolute; margin: 0; max-width: none; cursor: inherit; box-shadow: 0 2px 12px #422a3210; }
.plan-canvas>img { pointer-events: none; }
.no-plan { min-height: 0; height: 100%; position: absolute; inset: 0; max-width: 460px; padding: 35px; }
.map-bottom { min-height: 28px; padding: 4px 10px; gap: 7px; flex-shrink: 0; }
.map-bottom>span { font-size: 10px; max-width: none; }
.map-bottom .text-button { font-size: 10px; padding: 2px 0; }
.equipment-panel { padding: 0; min-height: 0; max-height: none; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.equipment-browser { overflow: auto; padding: 12px; height: 100%; }
.panel-title { margin-bottom: 10px; }
.panel-title h2 { font-size: 13px; }
.count-badge { min-width: 23px; line-height: 23px; font-size: 10px; }
.search input { padding: 8px 0; }
.search { margin-bottom: 6px; border-radius: 7px; }
#typeFilter { padding: 7px 9px; margin-bottom: 10px; border-radius: 7px; }
.device-cards { gap: 6px; }
.device-card { border-radius: 8px; padding: 9px; }
.device-card { position: relative; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.device-card-head { padding-right: 14px; }
.card-drag-grip { position: absolute; top: 4px; right: 3px; width: 22px; height: 30px; display: grid; place-items: center; font-size: 19px; color: #a6959c; touch-action: none; }
.card-drag-hint { margin: -3px 0 8px; font-size: 9px; line-height: 1.4; color: var(--brand-muted); }
.device-card.card-dragging { opacity: .45; border-color: var(--brand-red); }
.dragging-equipment, .dragging-equipment * { cursor: grabbing !important; user-select: none; }
.map-viewport.card-drop-ready { outline: 2px dashed #dba7b5; outline-offset: -4px; }
.map-viewport.card-drop-active { outline-color: var(--brand-red); }
.card-drag-preview { position: fixed; z-index: 1000; pointer-events: none; display: flex; align-items: center; gap: 9px; max-width: 240px; padding: 10px 13px; border: 1px solid #d8c7ce; border-radius: 10px; background: #fffffff5; box-shadow: 0 6px 24px #422a322b; }
.card-drag-preview.valid-drop { border-color: var(--brand-red); background: #fff3f6; }
.card-drag-preview strong { display: block; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.card-drag-preview small { display: block; margin-top: 3px; font-size: 9px; color: var(--brand-muted); }
.card-drag-symbol { width: 36px; flex: 0 0 36px; }
.card-drag-symbol .device-model { width: 36px; height: 38px; }
.card-drag-symbol .mfu-model { display: grid; place-items: center; height: 28px; border: 1px solid #b88998; background: #fff3f6; border-radius: 4px; color: #9b2140; font: 700 10px Arial, sans-serif; }
.device-card strong { font-size: 11px; }
.device-card small { font-size: 10px; margin-top: 2px; }
.device-type-icon { width: 29px; height: 29px; border-radius: 7px; }
.device-type-icon svg { width: 17px; height: 17px; }
.device-card-bottom { margin-top: 6px; font-size: 10px; }
.placement-note { margin-top: 5px; padding-top: 4px; font-size: 9px; }
.type-letter { font: 700 10px/1 Arial, sans-serif; letter-spacing: -.2px; color: var(--brand-red-dark); }
.add-card { min-height: 88px; gap: 5px; margin-top: 8px; }
.add-circle { width: 27px; height: 27px; }
.add-card strong { font-size: 11px; }
.add-card>span:last-child { font-size: 9px; }
.legend { padding: 5px 10px; font-size: 9px; gap: 10px; flex-shrink: 0; min-height: 24px; }
.legend-info { font-size: 9px; }
.page-footer { padding: 0 2px; font-size: 9px; line-height: 1.3; flex-shrink: 0; align-items: center; }
.page-footer p { max-width: none; }
.page-footer a { font-size: 9px; }
.page-footer p svg { width: 11px; height: 11px; margin-top: 0; }
#listView { overflow: auto; min-height: 0; flex: 1; }
.list-heading { padding: 12px 16px; }
.list-heading h2 { font-size: 14px; }
th,td { padding: 10px 15px; }
/* The editor occupies the equipment column; the plan stays fully interactive. */
.inline-editor { height: 100%; min-height: 0; color: var(--ink); }
.inline-editor form { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.drawer-header { padding: 12px 14px; flex-shrink: 0; }
.drawer-header .eyebrow { font-size: 8px; letter-spacing: .7px; }
.drawer-header h2 { font-size: 17px; margin-top: 3px; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px; }
.drawer-location { font-size: 10px; line-height: 1.45; margin-bottom: 12px; }
.type-fieldset { margin-bottom: 12px; }
.type-fieldset legend { font-size: 11px; margin-bottom: 6px; }
.type-choices { grid-template-columns: repeat(4,1fr); gap: 5px; }
.type-choice { font-size: 9px; gap: 6px; padding: 8px 2px; border-radius: 7px; }
.type-choice svg { width: 19px; height: 19px; }
.type-choice .type-letter { height: 19px; display: flex; align-items: center; font-size: 11px; }
.type-choice:has(.type-letter)>span:last-child { display: none; }
.type-choice:has(.type-letter) { justify-content: center; }
.field { font-size: 11px; margin-bottom: 11px; }
.field input, .field textarea { padding: 8px 9px; margin-top: 5px; font-size: 12px; border-radius: 7px; }
.field input::placeholder, .field textarea::placeholder { font-size: 10px; }
.form-grid { gap: 9px; }
.source-info, #addressWarning { font-size: 10px; padding: 7px 9px; margin-bottom: 10px; }
.placement-section { border: 1px solid #eadde2; padding: 10px; border-radius: 8px; background: #fff8fa; margin-bottom: 10px; }
.placement-heading { font-size: 11px; gap: 6px; }
#positionSummary { color: var(--brand-muted); font-size: 10px; font-weight: 400; }
.field-help { font-size: 10px; line-height: 1.5; }
.placement-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.placement-controls .secondary { font-size: 10px; padding: 6px 8px; min-height: 30px; border-radius: 6px; }
.placement-controls .secondary svg { width: 13px; height: 13px; }
.placement-controls .text-button { font-size: 10px; }
.position-lock { font-size: 11px; gap: 7px; }
.position-lock+.field-help { margin: 5px 0 12px; }
.monitor-status { padding-top: 9px; }
.monitor-status p { font-size: 10px; }
.draft-status { font-size: 10px; color: #82616e; padding: 5px 14px 0; min-height: 20px; flex-shrink: 0; }
.drawer-footer { padding: 9px 10px; gap: 5px; align-items: center; flex-shrink: 0; border-top: 0; }
.drawer-footer .primary, .drawer-footer .secondary { font-size: 10px; padding: 8px 10px; min-height: 34px; border-radius: 7px; }
.delete-button { font-size: 9px; }
/* Symbols are a fixed fraction of plan width, so they scale with its geometry. */
.marker.object-marker { --device-size: calc(var(--plan-width, 720px) * .026); width: var(--device-size); height: calc(var(--device-size) * 1.14); border-radius: 3px; transform: translate(-50%,-82%); padding: 0; }
.marker.object-marker.phone { --device-size: calc(var(--plan-width, 720px) * .020); }
.marker.object-marker.mfp { --device-size: calc(var(--plan-width, 720px) * .030); }
.marker.object-marker::before { content: ''; position: absolute; inset: -5px; border-radius: 4px; }
.marker.object-marker.selected::before, .marker.object-marker.draft-marker::before { outline: 1px solid var(--brand-red); background: #e810350c; }
.marker.object-marker:hover, .marker.object-marker:focus-visible, .marker.object-marker.dragging { transform: translate(-50%,-82%); }
.marker.object-marker .device-model { width: 100%; height: auto; }
.marker.object-marker .mfu-model { display: flex; align-items: center; justify-content: center; width: 100%; height: 72%; border: 1px solid #b88998; background: #fff3f6; border-radius: 3px; color: #9b2140; font: 700 calc(var(--device-size) * .29)/1 Arial, sans-serif; letter-spacing: -.3px; pointer-events: none; }
.marker.object-marker .object-number { height: calc(var(--device-size) * .33); min-width: calc(var(--device-size) * .4); border-width: 1px; font-size: calc(var(--device-size) * .23); padding: 0 2px; border-radius: 3px; bottom: 0; }
.marker.object-marker .object-lock { top: -3px; right: -4px; width: calc(var(--device-size) * .28); height: calc(var(--device-size) * .28); font-size: calc(var(--device-size) * .22); border-radius: 2px; }
.toast { bottom: 15px; font-size: 11px; max-width: 600px; }
@media (max-width: 1350px) { .stat-hint { max-width: 95px; font-size: 8px; } .stats>div, .stats>div:first-child { padding-left: 7px; padding-right: 7px; gap: 5px; } .map-layout { grid-template-columns: minmax(0,1fr) 260px; } }
@media (max-width: 1050px) {
  .sidebar { display: none; }
  main { margin-left: 0; padding-left: 10px; padding-right: 10px; }
  .topbar { height: 35px; }
  .mobile-brand .brand-logo { width: 75px; }
  .mobile-location { margin: 2px 0; display: flex; align-items: center; gap: 8px; font-size: 9px; }
  .mobile-location select { margin: 0; padding: 4px 7px; font-size: 10px; }
  .page-heading { margin-top: 2px; }
  .page-heading h1 { font-size: 18px; }
  .stat-hint { max-width: 110px; }
  .page-footer { gap: 6px; }
}
@media (max-width: 760px) {
  body { overflow: auto; }
  main { height: auto; min-height: 100dvh; padding: 5px 8px 10px; }
  .topbar { height: 34px; }
  .page-heading { display: flex; padding: 6px 8px; }
  .page-heading h1 { font-size: 16px; }
  .page-heading p { font-size: 9px; }
  .page-heading>.primary { margin: 0; width: auto; font-size: 10px; padding: 7px 8px; }
  .page-heading>.primary svg { display: none; }
  .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; padding: 5px 0; }
  .stats>div, .stats>div:first-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 0 4px; }
  .stat-label { font-size: 8px; gap: 3px; }
  .stats strong { font-size: 15px; }
  .stat-hint { display: none; }
  .import-summary summary { font-size: 9px; gap: 3px 8px; }
  .import-summary summary strong, .import-summary summary .address-warning { font-size: 9px; }
  .import-summary summary::after { font-size: 9px; }
  .workspace { flex: none; overflow: hidden; }
  .workspace-heading { flex-wrap: wrap; gap: 0; }
  .floor-navigation { padding: 5px 8px; flex: 1; }
  .floor-navigation label { font-size: 10px; }
  #floorSelect { flex: none; width: 90px; }
  .workspace-toolbar { flex-basis: 100%; padding: 3px 6px; min-height: 36px; border-top: 1px solid var(--line); }
  .tab { font-size: 10px; padding: 5px 9px; }
  .map-layout, .workspace:has(.inline-editor:not([hidden])) .map-layout { grid-template-columns: 1fr; flex: none; }
  .map-column { height: clamp(300px,48dvh,500px); }
  .map-viewport { height: auto; }
  .map-bottom { flex-wrap: nowrap; }
  .map-bottom>span { font-size: 8px; }
  .map-bottom .text-button { font-size: 9px; }
  .equipment-panel { border-left: 0; border-top: 1px solid var(--line); height: 430px; }
  .equipment-browser { padding: 10px; }
  .device-cards { display: grid; grid-template-columns: 1fr; }
  .device-card { padding: 10px; }
  .device-card strong { font-size: 12px; }
  .drawer-body { padding: 10px 12px; }
  .inline-editor .form-grid { grid-template-columns: 1fr 1fr; }
  .drawer-location { margin-bottom: 8px; }
  .legend { font-size: 8px; gap: 8px; }
  .legend-title { display: none!important; }
  .page-footer { font-size: 8px; flex-wrap: wrap; }
  .page-footer a { font-size: 9px; }
  .toast { width: calc(100% - 32px); }
}