/* Smart Mapa / Cartografia operacional — incremental, presentation only.
 * Loaded after page styles. State, auth, geo-scope and status colors remain owned
 * by the existing application. Never override display/visibility of gated UI.
 */
:root {
  color-scheme: dark;
  --sm-canvas: #0d171f;
  --sm-surface: #14242e;
  --sm-raised: #1b2e39;
  --sm-border: #304954;
  --sm-text: #edf4f6;
  --sm-secondary: #afc1cc;
  --sm-subtle: #9db0bc;
  --sm-focus: #8edaf2;
  --sm-selected: #264438;
  --sm-action: #18623f;
  --sm-action-hover: #20794f;
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 24px;
  --sm-space-6: 32px;
  --sm-radius-control: 8px;
  --sm-radius-panel: 12px;
  --sm-sidebar-width: 390px;
  --sm-font: "Segoe UI", system-ui, sans-serif;
  --bg: var(--sm-canvas);
  --panel: var(--sm-surface);
  --panel2: var(--sm-raised);
  --line: #283f4a;
  --line2: var(--sm-border);
  --text: var(--sm-text);
  --muted: var(--sm-secondary);
  --muted2: var(--sm-subtle);
  --accent: var(--sm-action);
  --accent-hi: #72d4a3;
}
body[data-sm-page="radio"] { --sm-action: #81421f; --sm-action-hover: #985328; --accent-hi: #efb384; --sm-selected: #3a3028; }
body[data-sm-page="quality"] { --sm-action: #59418b; --sm-action-hover: #6c50a4; --accent-hi: #c4adf2; }
body[data-sm-page="rx"] { --sm-action: #81421f; --accent-hi: #efb384; }
body[data-sm-page="alerts"] { --sm-action: #59418b; --accent-hi: #c4adf2; }
body[data-sm-page="orders"], body[data-sm-page="concentrators"] { --sm-action: #215b78; --accent-hi: #8ecce9; }
body { --accent: var(--sm-action); font-family: var(--sm-font); line-height: 1.45; }
button, input, select, textarea { font-family: inherit; }
button, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { border-radius: var(--sm-radius-control); }
input, textarea { caret-color: var(--sm-focus); }
input::placeholder, textarea::placeholder { color: var(--sm-subtle); opacity: 1; }
select { color-scheme: dark; }
::selection { background: #a6deeb; color: #10242b; }
a { text-underline-offset: 3px; }
:is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--sm-focus);
  outline-offset: 3px;
}
#map-search:focus-within, #cmap-search:focus-within { outline: 3px solid var(--sm-focus); outline-offset: 3px; }
#map-search input:focus-visible, #cmap-search input:focus-visible { outline: none; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
.sm-skip { position: fixed; z-index: 8000; top: 8px; left: 8px; padding: 12px 18px; background: var(--sm-text); color: var(--sm-canvas); border-radius: 8px; transform: translateY(-160%); }
.sm-skip:focus { transform: translateY(0); }
.sm-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Map workspace: consistent width and distinct control groups. */
#app { height: 100vh; height: 100dvh; }
#sidebar { width: var(--sm-sidebar-width); min-width: var(--sm-sidebar-width); }
#sidebar-scroll { padding: 16px 18px; gap: 14px; scrollbar-color: var(--sm-border) transparent; scrollbar-width: thin; }
.topbar, #sidebar-head { padding: 14px 18px; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.topbar h1, #sidebar-head h1 { min-width: 110px; font-size: 16px; line-height: 1.3; letter-spacing: .01em; }
h1 small, #sidebar-head h1 small { font-size: 11.5px; line-height: 1.45; margin-top: 4px; }
.brand-badge { border-radius: 6px; }
#scope-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 11.5px; }
.topbar #scope-badge { order: 5; }
#btn-logout { min-height: 32px; padding: 6px 10px; font-size: 12px; }
h2.sec { font-size: 12px; text-transform: none; letter-spacing: .015em; color: var(--text); line-height: 1.45; }
.filters { gap: 9px; }
.filters label, #login-box label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.filters select, .filters input:not([type="checkbox"]), #btn-refresh { min-height: 36px; font-size: 13px; }
.row2 { gap: 10px; }
#tabs { gap: 4px; }
.tab { min-height: 38px; }
.btn-primary, #btn-back { background: var(--sm-action); border-color: transparent; color: #f6fbf8; }
.btn-primary:hover, #btn-back:hover { background: var(--sm-action-hover); }
/* Navigation is quieter than operational severity. Inline display:none remains authoritative. */
.sm-map-nav { display: flex; flex-direction: column; gap: 6px; }
#btn-radio-utp, #btn-qualidade, #btn-concentradores {
  background: var(--panel2); border: 1px solid var(--line2); box-shadow: none;
  padding: 11px 12px; border-radius: var(--sm-radius-control); color: var(--text);
  font-size: 13px; font-weight: 600; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 0;
}
#btn-radio-utp small, #btn-qualidade small, #btn-concentradores small { color: var(--muted); font-size: 11px; font-weight: 400; }
#btn-radio-utp .sm-icon { color: #efb384; }
#btn-qualidade .sm-icon { color: #c4adf2; }
#btn-concentradores .sm-icon { color: #8ecce9; }
#summary, #cards, #queue-cards { gap: 8px; }
.stat, .card, .qcard { border-radius: var(--sm-radius-panel); padding: 12px 10px; }
.stat b, .card b, .card .n, .qcard b { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 23px; line-height: 1.25; }
.stat span, .card span, .card .l, .qcard > span { font-size: 11px; text-transform: none; letter-spacing: 0; line-height: 1.4; }
.stat.is-active, .card.is-active { box-shadow: inset 0 0 0 1px var(--accent-hi); background: var(--sm-selected); }
#legend { font-size: 12px; gap: 8px; }
#legend .lg-title { font-size: 11px; text-transform: none; letter-spacing: 0; }
#status-msg { font-size: 12px; line-height: 1.5; }
#sync-status { border-radius: var(--sm-radius-panel); padding: 12px; }
.sync-src, .sync-src.olt { padding-block: 4px; }
.sync-src .ago, .sync-sub, .note, .subtitle { font-size: 12px; line-height: 1.5; }
.subtitle { margin-top: 6px; }
.av-warn, .av-partial { color: #e3bd62; }
.av-meta, .av-cov, .av-disc, .av-nodata-note { font-size: 11.5px; }
#map-search { left: calc(var(--sm-sidebar-width) + 60px); top: 18px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); height: 44px; box-shadow: 0 6px 18px #0003; }
#map-search input { font-size: 14px; }
#map-search-clear { min-width: 32px; min-height: 32px; }
#mobile-cluster-btn { left: calc(var(--sm-sidebar-width) + 14px); }
#radio-menu-close { display: none; width: 44px; min-height: 44px; flex-shrink: 0; background: var(--panel2); color: var(--text); border: 1px solid var(--line2); }
#onu-list li { padding: 10px 12px; }
body[data-sm-page="radio"] #status-msg { max-width: calc(100% - var(--sm-sidebar-width) - 36px); left: calc(var(--sm-sidebar-width) + 18px); transform: none; }
/* Authentication uses the same components as the workspace. */
#login-screen { background: var(--bg); overflow-y: auto; padding: 24px; }
#login-box { width: 400px; max-width: 100%; padding: 32px; gap: 20px; border-color: var(--line2); border-radius: 16px; box-shadow: 0 20px 60px #0003; }
#login-box h1 { font-size: 23px; letter-spacing: .01em; line-height: 1.3; }
#login-box input, #btn-login { min-height: 44px; font-size: 16px; }
#login-error { color: #ffb2ac; font-size: 13px; }
/* Read-only admin workspaces. Component selectors do not expose denied panels. */
body[data-sm-layout="report"] header, body[data-sm-page="concentrators"] header { padding: 20px 24px; gap: 10px; }
body[data-sm-layout="report"] header h1, body[data-sm-page="concentrators"] header h1 { font-size: 20px; line-height: 1.3; min-width: 230px; }
body[data-sm-layout="report"] header h1 small, body[data-sm-page="concentrators"] header h1 small { font-size: 12px; line-height: 1.5; max-width: 72ch; }
body[data-sm-layout="report"] main { padding: 24px 24px 48px; max-width: 1440px; }
.hbtn { min-height: 38px; padding: 9px 12px; border-radius: var(--sm-radius-control); line-height: 1.4; font-size: 12px; }
.twrap { border-radius: var(--sm-radius-panel); }
th { padding: 12px; font-size: 11.5px; text-transform: none; letter-spacing: .01em; }
td { padding: 11px 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
td.num { font-variant-numeric: tabular-nums; }
.chip { font-size: 10.5px; line-height: 1.5; }
#controls { gap: 10px; }
#controls select, #controls input, #filters select, #filters input, .selrow select, .selrow input { min-height: 38px; font-size: 13px; max-width: 100%; }
#pager { flex-wrap: wrap; gap: 10px; }
#pager button { min-height: 36px; }
#login-warn { line-height: 1.6; }
#side { width: 324px; padding: 18px; }
#cmap-search { left: 340px; }
#c-search-count { left: 340px; }
@media (hover: hover) and (pointer: fine) {
  #btn-radio-utp:hover, #btn-qualidade:hover, #btn-concentradores:hover { background: #243b47; filter: none; border-color: #526e7c; }
}
@media (max-width: 820px) {
  body[data-sm-page="radio"] #sidebar { width: min(390px, 100vw); min-width: 0; }
  #radio-menu-close { display: block; }
  #sidebar-head h1 { flex: 1; }
  body[data-sm-page="radio"] #map-search { left: 68px; right: 54px; top: calc(env(safe-area-inset-top, 0px) + 12px); width: auto; }
  body[data-sm-page="radio"] #status-msg { left: 12px; max-width: calc(100% - 24px); bottom: 70px; }
  #side { width: 100%; padding: 16px; }
  #cmap-search { left: 12px; }
  #c-search-count { left: 12px; }
}
@media (max-width: 768px) {
  #sidebar { width: min(390px, 100vw); min-width: 0; height: 100dvh; }
  #sidebar-scroll { padding: 16px; }
  .topbar, #sidebar-head { padding: 14px 16px; }
  #map-search { left: 68px; right: 54px; top: calc(env(safe-area-inset-top, 0px) + 12px); width: auto; }
  #map-search input { font-size: 16px; }
  .filters select, .filters input:not([type="checkbox"]), button.hbtn, a.hbtn, #tabs button, .seg button, #btn-refresh, #btn-back, #btn-logout { min-height: 44px; }
  .filters select, .filters input:not([type="checkbox"]), #controls input, #controls select, #filters select, #filters input, .selrow input, .selrow select { font-size: 16px; }
  #mobile-menu-btn, #btn-drawer-close { min-width: 44px; min-height: 44px; }
  #map-search-clear { width: 32px; height: 36px; }
  #mobile-cluster-btn { left: 12px; }
  body[data-sm-layout="report"] header, body[data-sm-page="concentrators"] header { padding: 16px; }
  body[data-sm-layout="report"] header h1, body[data-sm-page="concentrators"] header h1 { flex-basis: 100%; min-width: 0; font-size: 19px; }
  body[data-sm-layout="report"] main { padding: 20px 16px 40px; }
  body[data-sm-layout="report"] #cards, #queue-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #controls > input { min-width: 0; width: 100%; }
  .selrow label { max-width: 100%; }
  #login-box { padding: 24px; }
  #login-screen { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .search-pulse::before, .search-pulse::after, .sdot.run { animation: none; }
  .stat-clickable, .card-clickable, #sidebar, #drawer { transition: none; }
  .stat-clickable:active, .card-clickable:active { transform: none; }
  html { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid Highlight; }
  .stat.is-active, .card.is-active, .tab.active, .tab.on { outline: 2px solid Highlight; }
}
:root .sm-map-presets { margin:12px 0;padding:12px;border:1px solid #304954;border-radius:12px;background:#14242e; }
.sm-map-presets summary { cursor:pointer;min-height:44px;font-weight:700; }
.sm-map-presets label { display:block;margin:10px 0 4px; }
.sm-map-presets select { width:100%;min-height:44px; }
.sm-map-presets p { font-size:12px;line-height:1.5;color:#afc1cc;overflow-wrap:anywhere; }
.sm-map-preset-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
.sm-map-preset-actions button { min-height:44px;flex:1 1 90px; }
/* Shared customer context, including the map's Leaflet popup entry. */
body[data-sm-page="fiber"] .so-customer-dialog{box-sizing:border-box;color:#edf4f6;background:#14242e;border:1px solid #304954;border-radius:12px;width:min(900px,calc(100vw - 24px));max-height:90vh;padding:24px;overflow:auto;font:14px/1.5 var(--sm-font,system-ui)}
body[data-sm-page="fiber"] .so-customer-dialog::backdrop{background:#000a}
body[data-sm-page="fiber"] .so-customer-dialog>button{float:right;min-height:44px}
body[data-sm-page="fiber"] .so-customer-dialog h2{padding-right:90px;overflow-wrap:anywhere}
body[data-sm-page="fiber"] .so-customer-dialog dt{color:#afc1cc;margin-top:12px}
body[data-sm-page="fiber"] .so-customer-dialog dd{margin:0;overflow-wrap:anywhere}
body[data-sm-page="fiber"] .so-customer-dialog h3{margin-top:28px}
body[data-sm-page="fiber"] .so-customer-dialog .so-scroll{overflow:auto;border:1px solid #304954;border-radius:8px}
body[data-sm-page="fiber"] .so-customer-dialog table{border-collapse:collapse;min-width:100%;white-space:nowrap;text-align:left}
body[data-sm-page="fiber"] .so-customer-dialog td,body[data-sm-page="fiber"] .so-customer-dialog th{padding:12px;border-bottom:1px solid #304954}
body[data-sm-page="fiber"] .so-customer-dialog :focus-visible{outline:3px solid #8edaf2;outline-offset:2px}