/* Floor plan drawing (see js/desk-map.js). Uses the colours of whichever page it sits in. */
.deskmap { width: 100%; height: auto; display: block; background: var(--surface, #fff); border: 1px solid var(--line, #D6DCEB); border-radius: 14px; touch-action: manipulation; }
.deskmap .dm-room { fill: none; stroke: var(--line, #C9D1E6); stroke-width: 8; }
.deskmap .dm-deco { fill: var(--mist, #E4E9F4); stroke: var(--line, #C9D1E6); stroke-width: 4; }
.deskmap .dm-hatch { fill: url(#dm-hatch); }
.deskmap .dm-pat-bg { fill: var(--mist, #E4E9F4); }
.deskmap .dm-pat-line { stroke: var(--line, #C9D1E6); }
.deskmap text { font-family: var(--font-body, system-ui, sans-serif); fill: var(--muted, #526080); font-size: 46px; text-anchor: middle; pointer-events: none; }
.deskmap text.dm-small { font-size: 36px; }
.deskmap .dm-chair { fill: var(--mist, #E4E9F4); stroke: var(--muted, #7C86A6); stroke-width: 5; opacity: .8; }
.deskmap .dm-desk { cursor: pointer; outline: none; }
.deskmap .dm-desk.editable { cursor: grab; }
.deskmap .dm-top { fill: var(--surface, #fff); stroke: var(--ok, #23844F); stroke-width: 9; transition: fill .15s, stroke .15s; }
.deskmap .dm-desk text.dm-name { fill: var(--ink, #18213F); font-family: var(--font-display, system-ui, sans-serif); font-weight: 800; font-size: 100px; }
.deskmap .dm-desk text.dm-name.dm-sm { font-size: 72px; }
.deskmap .dm-mon { fill: var(--muted, #526080); stroke: none; }
.deskmap .dm-desk:hover .dm-top, .deskmap .dm-desk:focus-visible .dm-top { stroke-width: 14; }
.deskmap .dm-desk:focus-visible .dm-top { stroke: var(--focus, #1F6FEB); }
.deskmap .dm-desk.part .dm-top { stroke: var(--honey, #F2B33D); fill: color-mix(in srgb, var(--honey, #F2B33D) 22%, var(--surface, #fff)); }
.deskmap .dm-desk.taken .dm-top { fill: url(#dm-taken); stroke: var(--closed, #7C86A6); cursor: not-allowed; }
.deskmap .dm-desk.taken text.dm-name { fill: var(--muted, #526080); }
.deskmap .dm-desk.mine .dm-top { fill: var(--navy, #253A6E); stroke: var(--navy, #253A6E); }
.deskmap .dm-desk.mine text.dm-name { fill: var(--on-navy, #fff); }
.deskmap .dm-desk.mine .dm-mon { fill: var(--on-navy, #fff); }
.deskmap .dm-desk.inuse .dm-top { fill: color-mix(in srgb, var(--navy, #253A6E) 25%, var(--surface, #fff)); stroke: var(--navy, #253A6E); }
.deskmap .dm-desk.selected .dm-top { fill: var(--honey, #F2B33D); stroke: var(--on-honey, #2A1F06); stroke-width: 14; }
.deskmap .dm-desk.selected text.dm-name { fill: var(--on-honey, #2A1F06); }
.deskmap .dm-desk.selected .dm-mon { fill: var(--on-honey, #2A1F06); }
.deskmap .dm-desk.off { opacity: .35; }
.dm-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .88rem; color: var(--muted, #526080); }
.dm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dm-legend i { display: inline-block; width: 18px; height: 14px; border-radius: 4px; border: 2px solid var(--ok, #23844F); background: var(--surface, #fff); }
.dm-legend i.part { border-color: var(--honey, #F2B33D); background: color-mix(in srgb, var(--honey, #F2B33D) 25%, var(--surface, #fff)); }
.dm-legend i.taken { border-color: var(--closed, #7C86A6); background: repeating-linear-gradient(135deg, var(--mist, #E4E9F4) 0 4px, var(--surface, #fff) 4px 8px); }
.dm-legend i.mine { border-color: var(--navy, #253A6E); background: var(--navy, #253A6E); }
.dm-legend i.sel { border-color: var(--on-honey, #2A1F06); background: var(--honey, #F2B33D); }
.dm-legend i.inuse { border-color: var(--navy, #253A6E); background: color-mix(in srgb, var(--navy, #253A6E) 25%, var(--surface, #fff)); }
.deskmap .dm-handle { fill: var(--honey, #F2B33D); stroke: var(--on-honey, #2A1F06); stroke-width: 5; cursor: nwse-resize; touch-action: none; }

.deskmap .dm-line { fill: none; }
.deskmap .dm-arrow { fill: none; stroke: var(--muted, #526080); stroke-width: 6; stroke-linecap: round; }
.deskmap .dm-door { stroke: var(--navy, #253A6E); stroke-width: 14; stroke-linecap: round; }
.deskmap .staffdesk { cursor: default; pointer-events: none; }
.deskmap .staffdesk .dm-top { fill: var(--mist, #E4E9F4); stroke: var(--closed, #7C86A6); stroke-width: 6; stroke-dasharray: 18 12; }
.deskmap text.dm-staff { font-size: 22px; }
.deskmap .dm-desk.staffpick .dm-top { fill: var(--mist, #E4E9F4); stroke: var(--closed, #7C86A6); stroke-dasharray: 18 12; }