/* MeshBuddy home polish pass: cleaner command surface, no map logic changes. */

@media (min-width: 901px) and (pointer: fine) {
  body {
    background:
      linear-gradient(180deg, #0b100d 0%, #060908 56%, #040706 100%);
  }

  .tac-class-bar {
    min-height: 16px;
    padding: 1px 10px;
    letter-spacing: .24em;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
  }

  .page {
    height: calc(100vh - 16px);
  }

  .topbar {
    padding: 0 16px;
    border-bottom-color: rgba(70, 224, 107, .24);
    background: rgba(12, 17, 14, .98);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .34);
  }

  .brand {
    height: 74px;
    gap: 14px;
  }

  .logo {
    width: 64px;
    height: 64px;
    border-color: rgba(70, 224, 107, .50);
    background: #050706;
  }

  .logo img {
    filter: drop-shadow(0 0 6px rgba(70, 224, 107, .24));
  }

  .title {
    font-size: 24px;
    letter-spacing: .13em;
  }

  .subtitle {
    color: rgba(215, 224, 217, .62);
    letter-spacing: .08em;
  }

  .tac-readouts {
    gap: 0;
    height: 46px;
    border: 1px solid rgba(70, 224, 107, .14);
    background: rgba(5, 9, 7, .42);
  }

  .tac-cell {
    min-width: 92px;
    padding: 0 13px;
    border-right: 1px solid rgba(70, 224, 107, .12);
  }

  .tac-cell .cap {
    color: rgba(140, 163, 148, .78);
  }

  .tac-cell .val {
    color: rgba(239, 245, 240, .92);
  }

  .tac-meshcon {
    height: 46px;
    border: 0;
    border-left: 1px solid rgba(70, 224, 107, .18);
    padding: 0 16px;
    background: rgba(5, 9, 7, .52);
  }

  .topbar > nav.actions.tac-actions-split {
    grid-template-rows: 36px auto;
    min-height: 74px;
    border-top-color: rgba(70, 224, 107, .12);
  }

  .tac-action-primary {
    border-bottom-color: rgba(70, 224, 107, .12);
  }

  .tac-action-overlays {
    gap: 5px;
    row-gap: 5px;
    padding: 5px 0 6px;
  }

  .topbar > nav.actions.tac-actions-split .tac-action-primary > a.btn,
  .topbar > nav.actions.tac-actions-split .tac-action-overlays > button,
  .tac-viewgroup button,
  .tac-quietlinks a.btn {
    height: 28px;
    min-height: 28px;
    padding: 0 11px;
    border-color: rgba(142, 164, 148, .28);
    background: rgba(18, 25, 21, .84);
  }

  .tac-viewgroup {
    border-color: rgba(142, 164, 148, .30);
    margin-right: 8px;
  }

  .tac-viewgroup button {
    border-left-color: rgba(142, 164, 148, .20);
  }

  .tac-quietlinks {
    gap: 7px;
  }

  .tac-quietlinks a.btn {
    min-width: 86px;
  }

  button:hover,
  .btn:hover,
  a.btn:hover {
    border-color: rgba(70, 224, 107, .64);
    background: rgba(19, 34, 25, .90);
  }

  button.layers-on,
  button.radar-on,
  button.solar-on,
  button.traffic-on,
  button.tower-on,
  button.uls-on,
  button.cell-on,
  button.lms-on,
  button.faa-on,
  button.adsb-on {
    background: rgba(10, 31, 18, .94);
    border-color: rgba(70, 224, 107, .78);
    box-shadow: inset 0 -2px 0 var(--tac-green);
  }

  .map-layout {
    grid-template-columns: minmax(270px, 310px) minmax(520px, 1fr) minmax(280px, 318px);
    background: #040706;
  }

  .sidebar {
    padding: 10px;
    border-right-color: rgba(70, 224, 107, .16);
    background: rgba(12, 18, 15, .96);
  }

  .sidebar.right {
    border-left-color: rgba(70, 224, 107, .16);
  }

  .panel {
    border-color: rgba(70, 224, 107, .20);
    background: rgba(12, 18, 15, .92);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
  }

  .panel::before,
  .panel::after {
    opacity: .78;
  }

  .panel-head {
    min-height: 36px;
    padding: 8px 12px;
    border-bottom-color: rgba(70, 224, 107, .18);
    background: rgba(18, 26, 21, .88);
    color: rgba(239, 245, 240, .96);
  }

  .panel-body {
    padding: 11px 12px;
  }

  .form-row {
    margin-bottom: 12px;
  }

  .form-row label {
    margin-bottom: 6px;
    color: rgba(140, 163, 148, .86);
  }

  input,
  select {
    height: 32px;
    min-height: 32px;
    border-color: rgba(142, 164, 148, .22);
    background-color: rgba(5, 9, 7, .80);
  }

  .check-row {
    min-height: 25px;
    margin: 4px 0;
    color: rgba(215, 224, 217, .92);
  }

  .tac-panel-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .tac-panel-actions #btnExport {
    grid-column: 1 / -1;
  }

  .npn-solar-center-home-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .stat {
    min-height: 60px;
    border-color: rgba(70, 224, 107, .16);
    background: linear-gradient(180deg, rgba(10, 18, 13, .88), rgba(5, 9, 7, .94));
  }

  .stat .num {
    color: var(--tac-green);
    text-shadow: 0 0 12px rgba(70, 224, 107, .22);
  }

  #dataStatus {
    display: grid;
    gap: 5px;
    padding-top: 4px;
  }

  .tac-data-row {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .contact-browser {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 7px;
  }

  .contact-letter {
    width: 22px;
    min-width: 22px;
    border-color: rgba(70, 224, 107, .20);
    background: rgba(70, 224, 107, .055);
  }

  .node-list {
    gap: 7px;
    padding-right: 3px;
  }

  .node-item {
    padding: 9px 10px 9px 12px;
    border-color: rgba(142, 164, 148, .18);
    background: rgba(7, 12, 10, .82);
  }

  .node-item:hover {
    background: rgba(16, 27, 21, .96);
    border-color: rgba(70, 224, 107, .28);
  }

  .node-name {
    font-size: 14px;
    letter-spacing: .025em;
  }

  #map {
    border-left: 1px solid rgba(70, 224, 107, .18);
    border-right: 1px solid rgba(70, 224, 107, .18);
  }

  .tac-map-frame {
    border-color: rgba(70, 224, 107, .14);
    background:
      linear-gradient(90deg, rgba(70,224,107,.20), transparent 16%, transparent 84%, rgba(70,224,107,.20)) top / 100% 1px no-repeat,
      linear-gradient(180deg, rgba(70,224,107,.20), transparent 14%, transparent 86%, rgba(70,224,107,.20)) left / 1px 100% no-repeat;
  }

  .maplibregl-ctrl-top-left {
    top: 18px;
    left: 18px;
  }

  .maplibregl-ctrl-group {
    background: rgba(7, 13, 10, .82) !important;
    border-color: rgba(70, 224, 107, .20) !important;
  }

  .maplibre-panel,
  #npn-panel-dock.npn-panel-dock {
    border-color: rgba(70, 224, 107, .24) !important;
    background: rgba(8, 14, 11, .92) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .40) !important;
  }

  #npn-panel-dock.npn-panel-dock {
    width: 238px !important;
  }
}

@media (min-width: 1400px) and (pointer: fine) {
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .map-layout {
    grid-template-columns: minmax(288px, 320px) minmax(620px, 1fr) minmax(300px, 326px);
  }
}

@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px) {
  .topbar,
  header.topbar {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .40) !important;
  }

  .topbar .actions,
  nav.actions,
  .actions {
    background: rgba(5, 10, 7, .98) !important;
  }

  .topbar .actions button,
  nav.actions button,
  .actions button,
  .topbar .actions a,
  nav.actions a,
  .actions a {
    border-color: rgba(142, 164, 148, .26) !important;
    background: rgba(18, 25, 21, .90) !important;
  }
}

@media (max-width: 640px) {
  .topbar,
  header.topbar {
    padding-left: 12px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
  }

  .topbar .brand,
  header .brand,
  .brand {
    flex: 1 1 auto !important;
    max-width: calc(100vw - 116px) !important;
  }

  .brand > div:last-child {
    min-width: 0 !important;
  }

  .logo {
    flex: 0 0 42px !important;
  }

  .title {
    max-width: calc(100vw - 176px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .tac-readouts {
    position: absolute !important;
    top: calc(12px + var(--npn-safe-top, 0px)) !important;
    right: 8px !important;
    flex: 0 0 auto !important;
    display: flex !important;
    width: auto !important;
    margin-left: auto !important;
    gap: 0 !important;
    background: transparent !important;
    border: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  .tac-cell-zulu {
    display: grid !important;
    min-width: 82px !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .tac-cell-zulu .cap {
    display: none !important;
  }

  .tac-cell-zulu .val {
    display: block !important;
    color: #ecfdf5 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
  }

  .tac-cell-data,
  .tac-cell-nodes,
  .tac-meshcon {
    display: none !important;
  }
}