:root{
  --rrad-bg:#0b1220;
  --rrad-card:#101a33;
  --rrad-card2:#0f1730;
  --rrad-accent:#6ee7ff;
  --rrad-accent2:#a78bfa;
  --rrad-text:#e6eefc;
  --rrad-muted:#9fb3d9;
  --rrad-border:rgba(255,255,255,0.10);
}
html,body{height:100%; background:var(--rrad-bg); color:var(--rrad-text); margin:0;}
.app-shell{height:100vh; display:flex; flex-direction:column;}
.topbar{
  background:linear-gradient(90deg, rgba(110,231,255,0.10), rgba(167,139,250,0.10));
  border-bottom:1px solid var(--rrad-border);
  padding:.75rem 1rem;
}
.brand-title{font-weight:800; letter-spacing:.4px;}
.subtle{color:var(--rrad-muted);}
.pill{
  display:inline-block; font-size:.75rem; padding:.2rem .5rem;
  border:1px solid var(--rrad-border); border-radius:999px; color:var(--rrad-muted);
  background:rgba(255,255,255,0.03);
}
.main{flex:1; display:flex; gap:.75rem; padding:.75rem; min-height:0;}
.panel{
  background:linear-gradient(180deg, var(--rrad-card), var(--rrad-card2));
  border:1px solid var(--rrad-border);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  overflow:hidden;
  min-height:0;
}
.panel-hdr{
  padding:.65rem .9rem;
  border-bottom:1px solid var(--rrad-border);
  display:flex; align-items:center; justify-content:space-between;
}
.panel-hdr h6{margin:0; font-weight:800;}
.panel-body{padding:.75rem .9rem; overflow:auto; min-height:0;}
#map{width:100%; flex:1; height:auto; min-height:260px; background:#08101f;}
.left{width:320px; min-width:280px; max-width:380px; display:flex; flex-direction:column;}
.center{flex:1; display:flex; flex-direction:column;}
.right{width:420px; min-width:340px; max-width:520px; display:flex; flex-direction:column;}
.small-muted{font-size:.8rem; color:var(--rrad-muted);}
.hr-soft{border-color:var(--rrad-border); opacity:1;}
.btn-rrad{
  background:rgba(110,231,255,0.14);
  border:1px solid rgba(110,231,255,0.35);
  color:var(--rrad-text);
}
.btn-rrad:hover{background:rgba(110,231,255,0.20);}
.btn-rrad2{
  background:rgba(167,139,250,0.14);
  border:1px solid rgba(167,139,250,0.35);
  color:var(--rrad-text);
}
.btn-rrad2:hover{background:rgba(167,139,250,0.20);}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.nav-tabs .nav-link{color:var(--rrad-muted); border-color:transparent;}
.nav-tabs .nav-link.active{
  color:var(--rrad-text);
  background:rgba(255,255,255,0.04);
  border-color:var(--rrad-border) var(--rrad-border) transparent;
}


/* --- Mobile/tablet responsive layout --- */
@media (max-width: 992px){
  .main{padding:.5rem; gap:.5rem;}
  .left,.right{display:none;}
  .center{width:100%;}
  .topbar{padding:.65rem .75rem;}
  .brand-title{font-size:1rem;}
  .subtle{display:none;}
}

/* When the real panels are moved into Bootstrap offcanvas drawers, remove "card" chrome */
.offcanvas .panel{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.offcanvas .panel-hdr{
  border-bottom:1px solid var(--rrad-border);
  padding:.35rem .1rem .65rem .1rem;
}
.offcanvas .panel-body{padding:.5rem .1rem;}


/* Topbar selects */
.topbar-select{
  background: rgba(16,26,51,0.9);
  border: 1px solid var(--rrad-border);
  color: var(--rrad-text);
  min-width: 160px;
}
.topbar-select:focus{ box-shadow: 0 0 0 0.2rem rgba(110,231,255,0.15); border-color: rgba(110,231,255,0.6); }


/* QGIS-style SVG marker wrapper */
.rrad-sym { background: transparent !important; border: none !important; }


.layer-check{margin-bottom:.5rem;}
.layer-check-label{display:flex; flex-direction:column; gap:.2rem; width:100%;}
.layer-check-title{display:block;}
.layer-check-legend{display:block; margin-left:0; padding-left:0;}
.layer-legend{display:flex; flex-direction:column; gap:.18rem; margin-top:.1rem;}
.layer-legend-row{display:flex; align-items:center; gap:.35rem; min-height:18px;}
.layer-legend-text{font-size:.72rem; color:var(--rrad-muted); line-height:1.1;}
.legend-sym{display:inline-flex; align-items:center; justify-content:center; width:24px; min-width:24px; height:18px;}
.legend-sym svg{display:block; overflow:visible;}
.legend-empty{font-size:.72rem; color:var(--rrad-muted);}


/* Legend/icon readability improvements on dark sidebar */
.legend-swatch,
.layer-swatch,
.rrad-legend-swatch,
.rrad-layer-swatch,
.layers-panel svg,
#layerList svg {
  overflow: visible;
}
.legend-swatch svg,
.layer-swatch svg,
.rrad-legend-swatch svg,
.rrad-layer-swatch svg,
#layerList svg {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 0 2px rgba(255,255,255,0.85));
}
.legend-swatch,
.layer-swatch,
.rrad-legend-swatch,
.rrad-layer-swatch {
  border-radius: 4px;
}

/* Optional helper class for dark symbols in sidebar */
.legend-dark-outline {
  filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 2px rgba(255,255,255,0.9));
}


/* Legend readability on dark sidebar */
.layer-legend-row .legend-sym,
.layer-legend .legend-sym,
.legend-sym {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  min-height:20px;
  border-radius:4px;
}
.layer-legend-row .legend-sym svg,
.layer-legend .legend-sym svg,
.legend-sym svg {
  overflow: visible;
  filter: drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 2px rgba(255,255,255,0.95));
}


.search-input{
  background: rgba(16,26,51,0.9);
  border: 1px solid var(--rrad-border);
  color: var(--rrad-text);
}
.search-input:focus{ box-shadow: 0 0 0 0.2rem rgba(110,231,255,0.15); border-color: rgba(110,231,255,0.6); }
.search-results-list{ display:flex; flex-direction:column; gap:.5rem; max-height:52vh; overflow:auto; }
.search-result-item{
  border:1px solid var(--rrad-border);
  border-radius:12px;
  padding:.7rem .85rem;
  background:rgba(255,255,255,0.03);
  cursor:pointer;
}
.search-result-item:hover{ background:rgba(110,231,255,0.08); border-color:rgba(110,231,255,0.30); }
.search-result-title{ font-weight:700; color:var(--rrad-text); }
.search-result-sub{ font-size:.8rem; color:var(--rrad-muted); }
.search-result-meta{ font-size:.78rem; color:var(--rrad-muted); margin-top:.18rem; }


.measure-panel{
  position:fixed;
  top:74px;
  right:18px;
  width:340px;
  max-width:calc(100vw - 32px);
  z-index:1600;
  border:1px solid var(--rrad-border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(11,22,48,0.98), rgba(8,16,36,0.98));
  box-shadow:0 14px 36px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
}
.measure-panel-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  padding:1rem 1rem .65rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.measure-panel-title{
  font-weight:700;
  color:var(--rrad-text);
}
.measure-panel-body{
  padding:1rem;
}
.measure-stats{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:.8rem;
  background:rgba(255,255,255,0.03);
}
.measure-stat-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.measure-stat-row .mono{
  text-align:right;
}
.measure-map-label{
  display:inline-block;
  padding:.18rem .42rem;
  border:1px solid rgba(110,231,255,0.34);
  border-radius:999px;
  background:rgba(8,16,36,0.92);
  color:#dffbff;
  font-size:.72rem;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,0.28);
}
.measure-divicon-wrap{
  background:transparent;
  border:none;
}
#btnMeasure.active{
  box-shadow:0 0 0 0.2rem rgba(110,231,255,0.12);
}
@media (max-width: 992px){
  .measure-panel{
    top:72px;
    right:8px;
    left:8px;
    width:auto;
    max-width:none;
  }
}


.qgis-feature-label-wrap{ background:transparent; border:none; }
.qgis-feature-label{
  white-space:pre;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
  pointer-events:none;
}


.layer-check-title{display:flex; align-items:center; justify-content:space-between; gap:.5rem;}
.layer-check-title-text{display:inline-block;}
.layer-inline-toggle, .legend-mini-toggle{display:inline-flex; align-items:center; gap:.22rem; font-size:.65rem; color:var(--rrad-muted);}
.layer-inline-toggle input, .legend-mini-toggle input{margin:0;}
.legend-row-spacer{flex:1 1 auto;}
.layer-legend-row{align-items:center;}
.legend-mini-toggle span{letter-spacing:.01em;}
.qgis-feature-label{background:transparent;}


/* Splice View */
.splice-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.splice-stat-card{background:rgba(255,255,255,.04);border:1px solid rgba(122,163,255,.18);border-radius:12px;padding:10px 12px;box-shadow:0 6px 16px rgba(0,0,0,.18);}
.splice-stat-value{font-size:1.05rem;font-weight:700;color:#eef4ff;line-height:1.2;margin-top:2px;word-break:break-word;}
.rrad-accordion .accordion-button{background:rgba(255,255,255,.03);color:#d7e4ff;border:1px solid rgba(122,163,255,.14);border-radius:10px;padding:10px 12px;box-shadow:none;}
.rrad-accordion .accordion-button:not(.collapsed){background:rgba(98,129,227,.16);color:#fff;}
.rrad-accordion .accordion-body{padding-bottom:12px;}
.splice-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(122,163,255,.18);border:1px solid rgba(122,163,255,.24);color:#eaf1ff;font-size:.75rem;margin:0 6px 6px 0;}
.splice-conn{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;}
.splice-arrow{opacity:.75;font-weight:700;}
.splice-mini{font-size:.78rem;opacity:.85;}
.splice-eq-card{background:rgba(255,255,255,.035);border:1px solid rgba(122,163,255,.16);border-radius:10px;padding:10px 12px;margin-bottom:10px;}
.splice-scroll{max-height:280px;overflow:auto;}
.splice-table td,.splice-table th{vertical-align:top;}
@media (min-width:1200px){.splice-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}


/* Details pane resizer */
.pane-splitter{
  width:10px;
  min-width:10px;
  cursor:col-resize;
  align-self:stretch;
  position:relative;
  border-radius:999px;
  background:transparent;
}
.pane-splitter::before{
  content:"";
  position:absolute;
  top:14px; bottom:14px; left:4px; right:4px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(110,231,255,.18), rgba(167,139,250,.18));
  border:1px solid rgba(255,255,255,.08);
}
.pane-splitter:hover::before,
.pane-splitter.dragging::before{background:linear-gradient(180deg, rgba(110,231,255,.32), rgba(167,139,250,.30));}
.right{flex:0 0 var(--details-w,420px); width:var(--details-w,420px); min-width:340px; max-width:720px; display:flex; flex-direction:column;}
.splice-fiber-chip{display:inline-block; padding:2px 8px; border-radius:999px; font-weight:700; font-size:.75rem; margin:0 6px 6px 0; border:1px solid rgba(0,0,0,.18); box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);}
.splice-side-stack{display:flex; flex-wrap:wrap; align-items:flex-start; gap:0;}
.splice-side-note{display:block; margin-top:4px; font-size:.78rem; color:#cfd9ef; opacity:.92;}
.splice-eq-usage{display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(110,231,255,.12); border:1px solid rgba(110,231,255,.28); color:#dffbff; font-size:.74rem; margin:0 6px 6px 0;}
.splice-chip.muted{opacity:.82;}
.splice-table thead th{position:sticky; top:0; background:#1a2230; z-index:1;}
.splice-table tbody tr:nth-child(odd){background:rgba(255,255,255,.02);}
.splice-table tbody tr:hover{background:rgba(110,231,255,.06);}
.splice-eq-card .fw-semibold{font-size:.97rem; color:#eef4ff;}
.splice-eq-card .splice-chip{margin-bottom:4px;}
.splice-section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.splice-port-pill{display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(167,139,250,.14); border:1px solid rgba(167,139,250,.26); color:#efe7ff; font-size:.74rem; margin:0 6px 6px 0;}
@media (max-width: 992px){ .pane-splitter{display:none;} }

.splice-topbar-wrap{align-items:stretch;}
.splice-weather-card{flex:1 1 auto; min-width:0; background:rgba(255,255,255,.04); border:1px solid rgba(122,163,255,.18); border-radius:12px; padding:10px 12px; box-shadow:0 6px 16px rgba(0,0,0,.18);}
.splice-weather-now{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:.18rem 0 .35rem 0;}
.splice-weather-temp{font-size:1.18rem; font-weight:800; color:#eef4ff;}
.splice-weather-code{font-weight:700; color:#dffbff;}
.splice-weather-meta{display:flex; gap:12px; flex-wrap:wrap; font-size:.8rem; color:#c9d8f7;}
.splice-weather-hours{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:.5rem;}
.splice-weather-hour{background:rgba(255,255,255,.03); border:1px solid rgba(122,163,255,.14); border-radius:10px; padding:8px 9px;}
.splice-weather-hour .hr-time{font-size:.76rem; color:#b7c8ea;}
.splice-weather-hour .hr-temp{font-size:.98rem; font-weight:700; color:#eef4ff; margin-top:2px;}
.splice-weather-hour .hr-sub{font-size:.72rem; color:#c9d8f7; margin-top:3px;}


.otdr-controls{
  border:1px solid rgba(146,177,255,.18);
  border-radius:12px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(14,33,88,.22), rgba(6,16,46,.12));
}
.otdr-control-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.otdr-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 14px;
}
.otdr-results-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.otdr-profile-box,
.otdr-scroll-box{
  border:1px solid rgba(146,177,255,.18);
  border-radius:12px;
  background:rgba(5,14,40,.45);
  padding:10px;
}
.otdr-profile-box{ min-height:240px; }
.otdr-scroll-box{ max-height:320px; overflow:auto; }
.otdr-profile-svg{ width:100%; height:220px; display:block; }
.otdr-grid{ stroke:rgba(159,209,255,.10); stroke-width:1; }
.otdr-axis{ stroke:rgba(159,209,255,.55); stroke-width:1.4; }
.otdr-axis-text{ fill:#c9dcff; font-size:11px; font-family:Inter,Segoe UI,Arial,sans-serif; }
.otdr-profile-line{ fill:none; stroke:#5cb0ff; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.otdr-marker-launch{ fill:#ffd166; stroke:#fff2b4; stroke-width:1.2; }
.otdr-marker-splice{ fill:#7bd88f; stroke:#d8ffe0; stroke-width:1.1; }
.otdr-marker-branch{ fill:#ff7f7f; stroke:#ffd3d3; stroke-width:1.1; }
.otdr-marker-terminal{ fill:#d59bff; stroke:#f0ddff; stroke-width:1.1; }
.otdr-marker-maintenance_loop{ fill:#6ee7f2; stroke:#d8fbff; stroke-width:1.1; }
@media (min-width: 1200px){
  .otdr-summary-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .otdr-results-grid{ grid-template-columns:1.15fr 1fr; }
}


.auth-overlay{
  position:fixed;
  inset:0;
  z-index:2500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(5,10,22,0.82);
  backdrop-filter:blur(10px);
}
.auth-card{
  width:min(440px, 100%);
  padding:1.25rem;
  border-radius:18px;
  border:1px solid rgba(110,231,255,0.18);
  background:linear-gradient(180deg, rgba(16,26,51,0.98), rgba(8,16,36,0.98));
  box-shadow:0 18px 46px rgba(0,0,0,0.45);
}
.auth-brand{
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rrad-accent);
  margin-bottom:.5rem;
}
.auth-title{
  font-size:1.35rem;
  font-weight:800;
  margin-bottom:.25rem;
}
.app-shell.auth-locked{
  filter:blur(3px);
  pointer-events:none;
  user-select:none;
}
.admin-modal .modal-body{min-height:50vh;}
.admin-block{
  border:1px solid var(--rrad-border);
  border-radius:14px;
  padding:.9rem;
  background:rgba(255,255,255,0.03);
}
.admin-block-title{
  font-weight:700;
  margin-bottom:.7rem;
}
.admin-grid-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:.75rem;
}
.admin-card{
  border:1px solid var(--rrad-border);
  border-radius:14px;
  padding:.9rem;
  background:rgba(255,255,255,0.03);
}
.admin-card .k{font-size:.8rem;color:var(--rrad-muted);}
.admin-card .v{font-size:1.35rem;font-weight:800;}
.admin-table-wrap{overflow:auto; border:1px solid var(--rrad-border); border-radius:14px;}
.admin-table{margin:0; min-width:980px;}
.admin-table td,.admin-table th{vertical-align:middle; font-size:.82rem;}
.admin-table input[type="text"],
.admin-table input[type="number"],
.admin-table input[type="email"],
.admin-table select{
  min-width:110px;
  background:rgba(16,26,51,0.9);
  border:1px solid var(--rrad-border);
  color:var(--rrad-text);
}
.admin-table .btn{white-space:nowrap;}
.admin-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; color:#d7e3ff;}
.admin-note{font-size:.78rem; color:var(--rrad-muted);}


/* Mobile details drawer: make Details effectively full-screen without changing desktop */
@media (max-width: 992px){
  #offDetails{
    --bs-offcanvas-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  #offDetails .offcanvas-header{
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--rrad-border);
  }
  #offDetailsBody{
    height: calc(100dvh - 64px);
    overflow: hidden;
    padding: 0 !important;
  }
  #offDetailsBody #panelDetails{
    height: 100%;
    min-height: 100%;
    margin: 0;
  }
  #offDetailsBody #panelDetails .panel-hdr{
    display: none;
  }
  #offDetailsBody #panelDetails .panel-body{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
  }
  #offDetailsBody #detailsTabs{
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: .85rem .9rem 0 .9rem;
    background: linear-gradient(180deg, rgba(16,26,51,0.98), rgba(8,16,36,0.96));
    border-bottom: 1px solid var(--rrad-border);
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  #offDetailsBody #detailsTabs .nav-item{
    flex: 0 0 auto;
  }
  #offDetailsBody #detailsTabs .nav-link{
    padding: .7rem .95rem;
    font-size: 1.05rem;
  }
  #offDetailsBody #panelDetails .tab-content{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1rem .95rem 1.25rem .95rem !important;
    -webkit-overflow-scrolling: touch;
  }
  #offDetailsBody #panelDetails .tab-pane{
    min-height: 100%;
  }
  #offDetailsBody #panelDetails .splice-summary-grid,
  #offDetailsBody #panelDetails .otdr-control-grid,
  #offDetailsBody #panelDetails .otdr-summary-grid{
    grid-template-columns: 1fr;
  }
  #offDetailsBody #panelDetails .otdr-results-grid{
    grid-template-columns: 1fr;
  }
  #offDetailsBody #panelDetails .otdr-profile-box{
    min-height: 280px;
  }
  #offDetailsBody #panelDetails .splice-weather-hours{
    grid-template-columns: 1fr;
  }
  #offDetailsBody #panelDetails .accordion-button{
    font-size: 1rem;
  }
}