/* Network & Storage presentation. Scoped to the existing GRiD window. */
#grid-cockpit .grid-body #network-panel:not(.is-minimized):not(.is-maximized),
#grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned:not(.is-minimized):not(.is-maximized),
#grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned:not(.is-minimized):not(.is-maximized):has(#network-vps[open]) {
  height: auto;
  min-height: 0;
  max-height: min(76vh, 760px);
  border: 1px solid #0875b8;
  background: #040b18;
  box-shadow: 0 0 16px #006aff4d, inset 0 0 18px #003a8340;
}
#grid-cockpit #network-panel>.panel-header {
  min-height: 45px;
  background: #020b1a;
  border-bottom: 1px solid #096baf;
}
#grid-cockpit #network-panel>.panel-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #70d4ff;
  font-size: 15px;
  letter-spacing: .08em;
}
#grid-cockpit #network-panel>.panel-header h2 i { color: #05caff; font-size: 17px; }
#grid-cockpit .grid-body #network-panel:not(.is-minimized)>.network-storage-layout,
#grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned>.network-storage-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 7px;
  min-height: 0;
  max-height: none;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}
#grid-cockpit #network-panel .network-storage-layout>.network-service-card,
#grid-cockpit #network-panel .network-storage-layout>#network-vpn {
  display: block;
  flex: none;
  min-width: 0;
  margin: 0;
  border: 1px solid #075eae;
  border-radius: 8px;
  background: linear-gradient(120deg, #07172b, #030c19 75%);
  box-shadow: inset 0 0 11px #0059ac28;
}
#grid-cockpit #network-panel .network-storage-layout>#network-gateix,
#grid-cockpit #network-panel .network-storage-layout>#network-storage { border-color: #8d2fc5; }
#grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 25.2px;
  min-height: 25.2px;
  max-height: 25.2px;
  padding: 2px 7px;
  border-bottom: 1px solid transparent;
  color: #14ceff;
}
#grid-cockpit #network-panel .network-storage-layout>#network-vpn>summary {
  box-sizing: border-box;
  height: 25.2px; min-height: 25.2px; max-height: 25.2px;
  padding: 2px 7px; gap: 6px;
}
#grid-cockpit #network-panel .network-storage-layout>.network-service-card[open]>summary { border-bottom-color: #08608b; }
#grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary::before { border-left-color: #ed4be6; animation: none; }
#grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary>i { color: #af9eff; font-size: 15px; }
#grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary>strong { color: #0ce0ff; font-size: 12px; letter-spacing: .06em; }
#grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary>span { min-width: 0; color: #96baff; font-size: 9px; }
#grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary>b {
  margin-left: auto;
  padding: 2px 6px;
  color: #b9c6d8;
  border: 1px solid #536174;
  border-radius: 5px;
  background: #18212d;
  white-space: nowrap;
  font-size: 9px;
}
#grid-cockpit #network-panel #network-gateix>summary>b { color: #b9c6d8; border-color: #536174; background: #18212d; }
#grid-cockpit #network-panel .network-service-card>summary>b.is-online { color: #6cffa4; border-color: #1b7352; background: #082a22; }
#grid-cockpit #network-panel #network-agent-card>summary #runic-version { max-width: none; overflow: visible; white-space: nowrap; font-size: 9px; }
#grid-cockpit #network-panel .network-service-card>summary>b.is-offline { color: #ff8799; border-color: #843b4a; background: #2b141b; }
#grid-cockpit #network-panel .network-service-card>summary>b.is-warn { color: #ffd47b; border-color: #826a35; background: #2b2416; }
#grid-cockpit #network-panel .network-storage-layout .network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 12px;
  padding: 3px 12px 8px;
}
#grid-cockpit #network-panel .network-storage-layout .network-grid>div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  min-height: 27px;
  padding: 5px 0;
  border-bottom: 1px solid #0c4768;
  color: #87bde0;
  font-size: 9px;
}
#grid-cockpit #network-panel .network-metric-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#grid-cockpit #network-panel .network-storage-layout .network-grid b {
  flex: none;
  color: #e2f6ff;
  font-size: 11px;
  text-align: right;
}
#grid-cockpit #network-panel .network-service-note { padding: 12px; color: #adc3d7; font-size: 10px; }
#grid-cockpit #network-panel .network-metrics {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) repeat(2,minmax(0,.85fr));
  align-items: center;
  gap: 5px;
  padding: 9px 8px;
}
#grid-cockpit #network-panel .network-metrics>a { color: #17d9fa; font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }
#grid-cockpit #network-panel .network-metrics>a { grid-column: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#grid-cockpit #network-panel .network-metrics>div { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-width: 0; gap: 4px; color: #84b8dc; font-size: 9px; }
#grid-cockpit #network-panel .network-metrics b { flex: none; color: #eff9ff; font-size: 11px; white-space: nowrap; }
#grid-cockpit #network-panel .network-storage-layout .network-agent-actions {
  position: static;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  height: auto;
  border: 0;
}
#grid-cockpit #network-panel .network-storage-layout .network-agent-actions #runic-refresh,
#grid-cockpit #network-panel .network-storage-layout .network-agent-actions .tray-download {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-height: 29px;
  padding: 5px 9px;
  color: #10ceff;
  border: 1px solid #0384c4;
  border-radius: 5px;
  background: #061b2b;
  font-size: 9px;
  font-weight: 700;
}
#grid-cockpit #network-panel .network-storage-layout .network-agent-actions .tray-download { color: #f054eb; border-color: #bb2bbb; background: #170b24; }
#grid-cockpit #network-panel .network-storage-layout .network-agent-actions :is(#runic-refresh,.tray-download) {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 29px !important;
  white-space: nowrap;
}
#grid-cockpit #network-storage .network-storage-links {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  padding: 8px;
}
#grid-cockpit #network-storage .network-storage-tile {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 47px;
  padding: 6px 8px;
  color: #b7e7ff;
  border: 1px solid #117cb3;
  border-radius: 6px;
  background: #061c30;
  text-decoration: none;
}
#grid-cockpit #network-storage .network-storage-tile>i:first-child { flex: none; color: #6cbaff; font-size: 16px; }
#grid-cockpit #network-storage .network-storage-tile>i:last-child:not(:first-child) { margin-left: auto; color: #09cfff; font-size: 10px; }
#grid-cockpit #network-storage .network-storage-tile span { display: flex; flex-direction: column; min-width: 0; }
#grid-cockpit #network-storage .network-storage-tile strong { color: #bce9ff; font-size: 10px; }
#grid-cockpit #network-storage .network-storage-tile small,
#grid-cockpit #network-storage .network-storage-tile code { overflow: hidden; color: #24d4fb; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#grid-cockpit #network-storage .network-storage-tile:hover { border-color: #2ae4ff; box-shadow: 0 0 9px #00aaff55; }
@container(max-width:400px) {
  #grid-cockpit #network-storage .network-storage-links { grid-template-columns: 1fr; }
}
@media(max-width:390px) {
  #grid-cockpit #network-panel>.panel-header h2 { font-size: 12px; }
  #grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary { gap: 5px; padding-inline: 6px; }
  #grid-cockpit #network-panel .network-storage-layout>.network-service-card>summary>span { font-size: 8px; }
  #grid-cockpit #network-panel #network-gateix>summary>span { display: none; }
}
@media(max-width:350px) {
  #grid-cockpit #network-panel .network-storage-layout .network-grid { grid-template-columns: 1fr; }
  #grid-cockpit #network-panel .network-metrics :is(a,div) { font-size: 8px; }
}

/* Local Windows share action; reachability is reported by FORTECA TRAY. */
#grid-cockpit #network-storage button.network-samba-tile {
  width: 100%;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
#grid-cockpit #network-storage .network-samba-status { color: #b9c6d8; font-weight: 700; }
#grid-cockpit #network-storage .network-samba-status[data-state="connected"] { color: #65f5a1; }
#grid-cockpit #network-storage .network-samba-status[data-state="disconnected"] { color: #ff8b9f; }
#grid-cockpit #network-storage .network-samba-status[data-state="unknown"] { color: #ffd47b; }
#grid-cockpit .v3-center > #network-storage > summary > strong {
  flex: none;
}
#grid-cockpit .v3-center > #network-storage > summary > .network-samba-feedback {
  flex: 1;
  min-width: 0;
  color: #b9daf0;
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* GATEiX authorization status and registered server list. */
#grid-cockpit .grid-body #network-panel:not(.is-minimized):not(.is-maximized),
#grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned:not(.is-minimized):not(.is-maximized):has(#network-vps[open]) { max-height: min(88vh, 900px); }
@media(min-width:1500px) {
  #grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned #network-vps[open] { display: block; flex: none; }
  #grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned #network-vps[open]>.network-grid { flex: none; grid-template-rows: repeat(3, auto); }
}
#grid-cockpit #network-panel .gateix-servers { display: grid; gap: 5px; padding: 1px 12px 3px; }
#grid-cockpit #network-panel .gateix-list-heading { display: flex; justify-content: space-between; padding: 5px 12px 3px; color: #84c9f0; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
#grid-cockpit #network-panel .gateix-registry-servers { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
#grid-cockpit #network-panel .gateix-denied { margin: 5px 12px 0; border: 1px solid #514d91; border-radius: 5px; background: #081026; }
#grid-cockpit #network-panel .gateix-denied>summary { display: flex; justify-content: space-between; cursor: pointer; padding: 7px 8px; color: #ff8799; font-size: 9px; font-weight: 700; letter-spacing: .05em; }
#grid-cockpit #network-panel .gateix-denied>.gateix-servers { max-height: 180px; overflow-y: auto; padding: 0 6px 6px; scrollbar-width: thin; }
#grid-cockpit #network-panel .gateix-servers>p { margin: 0; color: #adc3d7; font-size: 10px; }
#grid-cockpit #network-panel .gateix-server { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 6px 8px; border: 1px solid #514d91; border-radius: 5px; background: #081026; }
#grid-cockpit #network-panel .gateix-server>span:first-child { display: flex; align-items: baseline; flex: 1; min-width: 0; gap: 8px; }
#grid-cockpit #network-panel .gateix-server strong { flex: 0 1 auto; min-width: 0; color: #dce9ff; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#grid-cockpit #network-panel .gateix-server small { min-width: 0; overflow: hidden; color: #86b8da; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
#grid-cockpit #network-panel .gateix-server-meta { display: flex; flex: none; align-items: baseline; gap: 8px; }
#grid-cockpit #network-panel .gateix-server-meta b { color: #b2c8dd; font-size: 9px; }
#grid-cockpit #network-panel .gateix-server-meta b[data-result="ALLOW"] { color: #6cffa4; }
#grid-cockpit #network-panel .gateix-server-meta b[data-result="DENY"] { color: #ff8799; }
#grid-cockpit #network-panel .gateix-note { margin: 0; padding: 6px 12px 9px; font-size: 9px; }

/* Standalone storage card follows Activity Stream in the center column. */
#grid-cockpit .v3-center > #network-storage {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid #8d2fc5;
  border-radius: 8px;
  background: linear-gradient(120deg, #07172b, #030c19 75%);
  box-shadow: inset 0 0 11px #0059ac28;
}
#grid-cockpit .v3-center > #network-storage > summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 25.2px;
  min-height: 25.2px;
  max-height: 25.2px;
  padding: 2px 7px;
  border-bottom: 1px solid transparent;
  color: #14ceff;
  cursor: pointer;
  list-style: none;
}
#grid-cockpit .v3-center > #network-storage > summary::-webkit-details-marker { display: none; }
#grid-cockpit .v3-center > #network-storage[open] > summary { border-bottom: 1px solid #08608b; }
#grid-cockpit .v3-center > #network-storage > summary::before {
  content: '';
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #ed4be6;
  transform: translateY(1px);
}
#grid-cockpit .v3-center > #network-storage[open] > summary::before { transform: rotate(90deg) translateX(1px); }
#grid-cockpit .v3-center > #network-storage > summary > i { color: #af9eff; font-size: 15px; }
#grid-cockpit .v3-center > #network-storage > summary > strong { color: #0ce0ff; font-size: 12px; letter-spacing: .06em; }
#grid-cockpit #network-storage .network-storage-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#grid-cockpit #network-storage .network-storage-tile { gap: 4px; padding: 6px; }
#grid-cockpit #network-storage .network-storage-tile > i:first-child { font-size: 13px; }
#grid-cockpit #network-storage .network-storage-tile > i:last-child:not(:first-child) { font-size: 8px; }
@media (max-width: 600px) {
  #grid-cockpit .v3-center > #network-storage > summary {
    height: auto; min-height: 25.2px; max-height: none; padding: 4px 7px;
  }
  #grid-cockpit #network-storage .network-storage-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Keep one-pixel tighter spacing between NETWORK service cards. */
#grid-cockpit .grid-body #network-panel:not(.is-minimized)>.network-storage-layout,#grid-cockpit .grid-body #network-panel.multiverse-bottom-aligned>.network-storage-layout{gap:6px}

/* Keep NETWORK heading aligned with its 35px service and storage bars. */
html[data-grid-theme] #grid-cockpit .grid-body #network-panel > .panel-header {
  box-sizing: border-box;
  height: 35px;
  min-height: 35px;
  max-height: 35px;
  padding: 5px 7px;
}

/* Match NETWORK's main heading to the other 25.2px panel bars. */
@media (min-width: 701px) {
  html[data-grid-theme] #grid-cockpit .grid-body #network-panel > .panel-header {
    height: 25.2px;
    min-height: 25.2px;
    max-height: 25.2px;
    padding: 2px 7px;
  }

  /* Match the Storage panel's overall height to the left IDENTITY panel. */
  #grid-cockpit .v3-center > #network-storage {
    box-sizing: border-box;
    height: 113px;
    min-height: 113px;
    max-height: 113px;
  }
}


/* Fit the desktop dashboard in the viewport without clipping its contents. */
@media (min-width: 701px) {
  html[data-grid-theme] #grid-shell { padding-top: 0; padding-bottom: 0; }
  html[data-grid-theme] #grid-cockpit { --gap: 7px; }
}


/* Equalize the top and bottom breathing room inside desktop Storage tiles. */
@media (min-width: 701px) { #grid-cockpit #network-storage .network-storage-tile { min-height: 71px; } }