:root {
  --brand: #00c2d4;
  --brand-hover: #00adbe;
  --brand-ink: #111719;
  --brand-soft: #e0f7f9;
  --brand-edge: #007b88;
  --brand-secondary: #a4e8df;
  --surface: #f3f6f6;
  --graphite: #222729;
  --graphite-raised: #343c3e;
  --ink: #202b31;
  --muted: #5a6d78;
  --line: #dce5e9;
}

body { color: var(--ink); background: #ffffff; }
#main { background: var(--surface); }
button, input, select, textarea { transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-edge);
  outline-offset: 3px;
}
.button { min-height: 40px; border-radius: 6px; font-size: 13px; }
.button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 700; }
.button.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.button.primary:active { background: #009dac; }
.button:not(.primary):hover { background: #edf6f8; border-color: #a7c6ce; }
.icon-button { color: #47606c; }
.icon-button:hover { color: var(--brand-edge); background: var(--brand-soft); }
input, select, textarea { border-color: #cbd9df; border-radius: 6px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-edge); box-shadow: 0 0 0 3px #00c2d420; }
label { font-size: 13px; }
small, .muted { color: var(--muted); }

.shell { grid-template-columns: 184px minmax(0,1fr); }
.sidebar { background: var(--graphite); border-right: 1px solid #3b454a; color: #c5d0d6; }
.sidebar-logo { padding: 24px 22px 30px; display: flex; justify-content: flex-start; }
.sidebar-brand { position: relative; display: block; width: 148px; max-width: 100%; }
.sidebar-brand .logo { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
/* Keep the approved wordmark silhouette; only its descending X stroke is cyan. */
.logo-lockup { position: relative; display: block; }
.logo-lockup::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--brand);
  mask: url('/assets/redix-geometrica-05.png') center / contain no-repeat;
  clip-path: polygon(73.3% 20%, 79.7% 20%, 96.8% 81%, 89.5% 81%);
}
.brand-compact {
  display: none; position: relative; width: 36px; height: 36px;
}
.brand-compact::before, .brand-compact::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  mask: url('/assets/redix-geometrica-05.png') no-repeat right -5px center / 149px auto;
}
.brand-compact::after {
  background: var(--brand);
  clip-path: polygon(3% 8%, 31% 8%, 100% 92%, 73% 92%);
}
.auth-top .logo-lockup { width: 100px; }
.auth-top .logo { filter: brightness(0) invert(1); }
.sidebar nav { gap: 8px; padding: 0 12px; }
.nav-item { position: relative; min-height: 44px; font-size: 13px; font-weight: 500; gap: 10px; padding: 12px 10px; color: #c5d0d6; border-radius: 5px; justify-content: flex-start; }
.nav-item span, .local-label { display: block; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { background: var(--graphite-raised); color: #fff; }
.nav-item.active { background: color-mix(in srgb, var(--brand) 15%, var(--graphite)); color: #fff; font-weight: 650; box-shadow: inset 3px 0 var(--brand); }
.nav-item.active svg { color: var(--brand); }
.nav-item.active:hover { background: color-mix(in srgb, var(--brand) 22%, var(--graphite)); }
.nav-item:focus-visible { outline-color: var(--brand); }
.sidebar-bottom { padding: 14px 12px; border-top-color: #3b454a; }
.local-label { color: #a4b5be; font-size: 9px; padding: 8px 12px; }

.topbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); min-height: 76px; }
.topbar-brand { display: none; }
.topbar-brand b { color: var(--brand); }
.company-block { gap: 12px; }
.company-block > svg { width: 32px; height: 32px; padding: 8px; border-radius: 8px; color: var(--brand-edge); background: var(--brand-soft); }
.company-block strong { font-size: 14px; font-weight: 700; }
.company-block small, .user-block small { font-size: 11px; color: var(--muted); }
.network-picker { border-left-color: var(--line); }
.network-picker select { background: #fff; font-weight: 600; color: #415269; border-color: #cfdce5; color-scheme: light; }
.network-picker select:hover { background: var(--surface); border-color: var(--brand-edge); }
.topbar .icon-button { color: #415269; }
.topbar .icon-button:hover { background: var(--brand-soft); color: var(--brand-edge); }
.topbar button:focus-visible, .topbar select:focus-visible { outline-color: var(--brand); }
.user-block strong { font-size: 13px; }
.avatar { width: 36px; height: 36px; background: var(--brand-secondary); color: var(--brand-ink); border: 1px solid var(--brand-secondary); border-radius: 6px; font-size: 12px; font-weight: 600; }

.map-toolbar { gap: 4px; padding: 6px; background: #fffffffa; border-color: #fff; box-shadow: 0 4px 20px #0d242c33, 0 0 0 1px #20353e18; border-radius: 8px; }
.tool { width: 38px; height: 38px; color: #425c69; border-radius: 5px; }
.tool svg { width: 20px; height: 20px; }
.tool:hover { color: var(--brand-edge); background: var(--brand-soft); }
.tool.chosen { color: var(--brand-ink); background: var(--brand); box-shadow: none; }
.tool[data-tool=delete].chosen { color:#fff; background:#bc3047; }
#map[data-tool=delete] .map-marker:hover { outline:2px solid #bc3047; outline-offset:3px; }
.tool-divider { background: #d9e4e9; margin: 6px 2px; }
.layers-panel { top: 74px; border-color: #c6dbe2; box-shadow: 0 8px 24px #172b3830; border-radius: 8px; }
.layers-panel input { accent-color: var(--brand-edge); }
.map-legend { padding: 9px 12px; background: #ffffffed; border: 1px solid #fff; box-shadow: 0 2px 12px #172b3826; border-radius: 6px; color: #364e5b; }
.map-footer { padding-top: 8px; padding-bottom: 8px; color: #4f6570; font-size: 11px; }
#tool-status { color: #006e7e; font-weight: 600; }
.map-marker { width: 34px; height: 34px; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 3px 8px #15273266, 0 0 0 1px #15273233; }
.map-marker svg { width: 19px; height: 19px; stroke-width: 1.8; }
.map-marker .network-equipment-icon { width: 23px; height: 23px; }
.map-marker { color: var(--marker-ink, #fff); }
.map-marker.marker-pop:not(.inactive) { border-color: var(--brand-secondary); }
.map-marker.marker-pop { width:44px; height:44px; }
.map-marker.marker-pop svg { width:27px; height:27px; }
.map-marker.marker-client { position:relative; width:28px; height:28px; border-radius:6px; }
.map-marker.marker-client svg { width:16px; height:16px; }
.map-marker.marker-client.onu-los { background:#c92338!important; color:#fff!important; }
.map-marker.marker-client.onu-power-fail { background:#b85a00!important; color:#fff!important; }
.map-marker.marker-client.onu-offline { background:#5b6870!important; color:#fff!important; }
.map-marker.marker-client.onu-los::after,.map-marker.marker-client.onu-power-fail::after,.map-marker.marker-client.onu-offline::after,.map-marker.marker-client.onu-online::after { position:absolute;right:-5px;top:-5px;width:12px;height:12px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:9px;font-weight:800;line-height:1;color:#fff;box-shadow:0 1px 3px #0008; }
.map-marker.marker-client.onu-los::after { content:'!';background:#a50019; }
.map-marker.marker-client.onu-power-fail::after { content:'!';background:#963e00; }
.map-marker.marker-client.onu-offline::after { content:'−';background:#37474f; }
.map-marker.marker-client.onu-online::after { content:'';background:#16a34a; }
.client-onu-status { margin:10px 0;padding:8px 10px;border-radius:6px;background:#eef3f5;color:#405964;font-size:12px;line-height:1.4; }
.client-onu-status[data-state=los] { background:#ffebee;color:#a31329; }
.client-onu-status[data-state=power_fail] { background:#fff2df;color:#8f4600; }
.client-onu-status[data-state=offline] { background:#edf0f2;color:#40515c; }
.client-onu-status[data-state=online] { background:#e6f5eb;color:#176b35; }
.onu-legend-swatch { display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:3px;vertical-align:middle; }
.onu-legend-online { background:#16a34a; }.onu-legend-los { background:#c92338; }.onu-legend-power { background:#b85a00; }.onu-legend-offline { background:#5b6870; }
.marker-movable,.marker-movable .map-marker { cursor:grab; }
.leaflet-dragging .marker-movable,.leaflet-dragging .marker-movable .map-marker { cursor:grabbing; }
.legend-line:not(.inactive) { border-color: var(--brand); }
.map-marker.selected { outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: 0 3px 10px #0006; }
.leaflet-tooltip { border: 0; background: var(--graphite); color: #fff; padding: 7px 10px; box-shadow: 0 3px 12px #0003; font-size: 12px; }
.leaflet-tooltip-top:before { border-top-color: var(--graphite); }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--graphite); }
.leaflet-tooltip-left:before { border-left-color: var(--graphite); }
.leaflet-tooltip-right:before { border-right-color: var(--graphite); }
.leaflet-control-zoom { border: 0 !important; border-radius: 6px !important; box-shadow: 0 3px 16px #15273240 !important; overflow: hidden; }
.leaflet-control-zoom a { color: #006b7b !important; }

.inspector { top: 76px; border-color: #d4e1e6; border-top: 3px solid var(--brand); border-radius: 8px; box-shadow: 0 10px 35px #14282f33; padding: 18px; }
.inspector-title { gap: 10px; margin-bottom: 18px; }
.inspector-title h2 { font-size: 18px; }
.type-icon { width: 34px; height: 34px; border-radius: 7px; }
.type-icon svg { width: 19px; height: 19px; }
.type-box, .type-cable { background: var(--brand-soft); color: var(--brand-edge); }
.type-closure { background: var(--brand-edge); color: #fff; }
.type-pop { background: var(--graphite); color: #fff; }
.type-pole { background: #e9eff2; color: #415c6a; }
.type-client { background: #f9e9f2; color: #a43871; }
.status { font-weight: 600; }
.status.installed { color: #12694d; background: #e0f4e9; }
.status.planned { color: #81530d; background: #fff1d5; }
.detail-meta { color: #5b707b; }
.toast { background: var(--graphite); border-left: 3px solid var(--brand); color: #f5fafb; }

.page-title h1 { font-size: 26px; font-weight: 700; }
.eyebrow { color: #537482; }
.table-wrap { border-top: 1px solid var(--line); }
th { color: #536c79; background: #edf3f5; font-weight: 700; }
tr:hover td { background: var(--surface); }
dialog { border: 1px solid #d6e1e5; border-top: 4px solid var(--brand); border-radius: 8px; box-shadow: 0 24px 90px #101e2b55; }
dialog::backdrop { background: #101b2480; }
dialog header h2 { font-size: 20px; font-weight: 700; }
dialog label { color: #3c515e; }
dialog footer { background: #f7fafb; margin: 22px -25px -22px; padding: 17px 25px; }
.auth-page { background: var(--graphite); }
.wordmark b { color: var(--brand); }
.auth-panel { border-top: 0; border-radius: 7px; padding-top: 34px; }
.auth-panel .logo-lockup { width: 230px; max-width: 100%; margin: 0 auto 26px; }
.auth-panel .logo-lockup .logo { width: 100%; margin: 0; }
.text-button { color: var(--brand-edge); }
.auth-panel .button.primary { color: var(--brand-ink); }

.pop-heading { border-bottom-color: #d6e1e6; }
.pop-heading h1 { font-weight: 700; }
.pop-rack-choice.selected { border-color: var(--brand-secondary); background: var(--brand-soft); color: var(--brand-edge); }
.rack-elevation { border-color: #303d44; }
.pop-section-heading h2 { color: #243d49; font-weight: 700; }

@media (max-width: 1050px) {
  .shell { grid-template-columns: 64px minmax(0,1fr); }
  .brand-compact { display: block; }
  .nav-item span, .local-label { display: none; }
  .nav-item { justify-content: center; }
  .topbar-brand { display: none; }
  .network-picker select { max-width: 180px; }
  .sidebar-logo { padding: 22px 12px 28px; display: flex; justify-content: center; }
  .sidebar-brand { display: none; }
  .sidebar nav { padding: 0 8px; }
  .nav-item { padding: 13px 8px; }
  .sidebar-bottom { padding: 14px 8px; }
}
@media (max-width: 720px) {
  .shell { grid-template-columns: 52px minmax(0,1fr); }
  .topbar-brand { display: none; }
  .sidebar-logo { padding: 20px 6px 24px; }
  .network-picker select { max-width: none; }
  .sidebar nav, .sidebar-bottom { padding-left: 5px; padding-right: 5px; }
  .nav-item { padding: 12px 6px; }
  .company-block { gap: 8px; }
  .company-block > svg { width: 30px; height: 30px; padding: 6px; }
  .company-block strong { font-size: 13px; max-width: 155px; }
  .avatar { width: 32px; height: 32px; }
  .map-toolbar { gap: 2px; padding: 5px; }
  .tool { width: 33px; height: 35px; }
  .tool svg { width: 18px; height: 18px; }
  .layers-panel { top: 112px; }
  .map-footer { font-size: 9px; padding: 7px 10px; gap: 6px; }
  .map-legend { font-size: 9px; padding: 7px 8px; }
  .inspector { top: auto; bottom: 42px; padding: 14px; }
  .inspector-title h2 { font-size: 16px; }
  .pop-heading h1 { font-size: 18px; }
  .page-title h1 { font-size: 23px; }
}
@media (pointer: coarse) { .tool { min-width: 40px; min-height: 40px; } .layers-panel { top: 120px; } }
@media (prefers-reduced-motion: reduce) { button, input, select, textarea { transition: none; } }
.type-catalog .optical-view-tabs { margin: 0 0 12px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.type-catalog table { min-width: 740px; }
.type-catalog td small { display: block; margin-top: 4px; color: #607782; }
.type-catalog td:last-child { white-space: nowrap; width: 200px; }
.type-catalog td:first-child { min-width: 150px; }
.type-catalog td:nth-child(2) { min-width: 150px; }
.type-color-cell { min-width: 128px; }
.cable-buffer-summary { display: block; padding: 10px 0; border-block: 1px solid #dce5e8; font-size: 12px; color: #445e6b; }
.splitter-individual-loss { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
.splitter-individual-loss input { width: 16px; height: 16px; margin: 0; }
.cable-width-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.cable-width-picker legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: #445e6b; }
.cable-width-options { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
.cable-width-option { position: relative; min-width: 0; cursor: pointer; }
.cable-width-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.cable-width-preview { display: flex; align-items: center; justify-content: center; height: 44px; width: 100%; border: 1px solid #cad9df; border-radius: 4px; background: #f3f5f6; }
.cable-width-preview > span { display: block; width: 70%; background: var(--cable-preview-color,#263238); border-radius: 8px; box-shadow: 0 0 0 .5px #26323833; }
.cable-width-option input:checked + .cable-width-preview { border: 2px solid #007d8b; background: #e8f6f7; }
.cable-width-option:hover .cable-width-preview { border-color: #007d8b; }
.cable-width-option input:focus-visible + .cable-width-preview { outline: 2px solid #007d8b; outline-offset: 2px; }
.cable-width-detail { display: inline-block; width: 64px; border-radius: 8px; box-shadow: 0 0 0 .5px #26323833; vertical-align: middle; }
.type-color-single { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.type-color-single code { font-size: 11px; color: #526975; }
.color-field { min-width: 0; display: grid; gap: 8px; }
.field-grid > .color-field { grid-column: 1 / -1; }
.color-field-label { font-size: 13px; font-weight: 600; color: #445e6b; }
.color-palette { min-width: 0; color: #263238; background: #fff; }
.color-suggestions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px 8px; }
.color-option { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 5px 3px; border: 0; border-radius: 4px; background: transparent; color: #334955; font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.color-option:hover { background: #eef3f5; }
.color-swatch { display: block; flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #0002; }
.color-option[aria-pressed="true"] .color-swatch { outline: 2px solid #263238; outline-offset: 3px; }
.color-option[aria-pressed="true"] { font-weight: 700; }
.color-custom { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; margin-top: 10px; border-top: 1px solid #e2e8ec; font-size: 12px; }
.color-palette .color-custom input[type="color"] { flex: 0 0 38px; width: 38px; height: 30px; padding: 2px; margin: 0; cursor: pointer; }
.color-custom output { margin-left: auto; font-size: 11px; color: #607782; font-family: monospace; }
.color-trigger { display: grid; place-items: center; width: 100%; height: 36px; background: #fff; border: 1px solid #cad9df; border-radius: 4px; cursor: pointer; }
.color-trigger:hover { border-color: #009dad; }
.color-option:focus-visible, .color-trigger:focus-visible { outline: 2px solid #007d8b; outline-offset: 2px; }
.color-palette[popover] { position: fixed; inset: auto; margin: 0; width: 310px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 14px; border: 1px solid #cad9df; border-radius: 6px; box-shadow: 0 8px 28px #172d3a26; }
.network-location-help { margin:8px 0; color:#536d78; font-size:12px; line-height:1.4; }
.network-location-wrap { position:relative; overflow:hidden; border:1px solid #c8dadd; border-radius:6px; }
#network-location-map { height: min(38vh, 300px); min-height:190px; width:100%; background:#e6edef; }
#dialog:has(#network-location-map) { width:620px; }
#dialog .network-location-wrap .tile-error { position:absolute; z-index:1000; bottom:8px; left:8px; right:8px; }
.map-toolbar .tool { position:relative; }
.map-toolbar .tool::after { content:attr(aria-label); position:absolute; top:calc(100% + 9px); left:0; z-index:1200; padding:6px 9px; border-radius:5px; background:#23363e; color:#fff; font-size:12px; font-weight:500; line-height:1.25; white-space:nowrap; box-shadow:0 3px 10px #0003; pointer-events:none; opacity:0; visibility:hidden; }
.map-toolbar .tool:hover::after, .map-toolbar .tool:focus-visible::after { opacity:1; visibility:visible; }
.color-reserved-note { margin:8px 0 0; font-size:12px; line-height:1.4; color:#536d78; }
.color-reserved-current { padding-top:8px; }