/* ==========================================================================
   PCS — Layout (Header / Sidebar / Grid Big-Screen)
   ========================================================================== */

.app-shell {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-rows: 64px 1fr 36px;
  grid-template-columns: 224px 1fr;
  grid-template-areas:
    "header header"
    "side   main"
    "footer footer";
}

.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid var(--pcs-line);
  background: linear-gradient(90deg, rgba(8,16,32,0.95), rgba(8,16,32,0.6));
  backdrop-filter: blur(8px);
}
.app-header .brand {
  font-weight: 700;
  letter-spacing: 0.18em;
  font-size: 16px;
  color: var(--pcs-blue-200);
  text-shadow: var(--pcs-glow-text);
  display: flex; align-items: center; gap: 10px;
}
.app-header .brand .logo-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: conic-gradient(from 90deg, #38bdf8, #6366f1, #22d3ee, #38bdf8);
  box-shadow: var(--pcs-shadow-blue);
  position: relative;
}
.app-header .brand .logo-mark::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--pcs-bg-0);
  border-radius: 6px;
  border: 1px solid rgba(120, 220, 255, 0.5);
}
.app-header .crumb {
  color: var(--pcs-text-soft);
  font-size: 13px;
  letter-spacing: 0.12em;
}
.app-header .spacer { flex: 1; }
.app-header .clock {
  font-family: var(--pcs-mono);
  font-size: 14px;
  color: var(--pcs-blue-200);
  text-shadow: var(--pcs-glow-text);
  padding: 4px 10px;
  border: 1px solid var(--pcs-line);
  border-radius: var(--pcs-radius-sm);
  background: rgba(8, 16, 32, 0.6);
}
.app-header .user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--pcs-line-strong);
  background: rgba(14, 165, 233, 0.08);
}
.app-header .user-chip .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pcs-good);
  box-shadow: 0 0 10px var(--pcs-good);
}

.app-side {
  grid-area: side;
  border-right: 1px solid var(--pcs-line);
  background: linear-gradient(180deg, rgba(8,16,32,0.7), rgba(4,10,22,0.5));
  padding: 16px 10px;
  overflow-y: auto;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--pcs-radius-md);
  color: var(--pcs-text-soft);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: all var(--pcs-fast) var(--pcs-ease);
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.nav-list li a:hover {
  background: rgba(56, 189, 248, 0.08);
  color: var(--pcs-blue-200);
  border-color: var(--pcs-line);
}
.nav-list li a.active {
  background: linear-gradient(90deg, rgba(56,189,248,0.18), rgba(56,189,248,0.04));
  color: var(--pcs-blue-50);
  border-color: var(--pcs-line-strong);
  box-shadow: inset 0 0 12px rgba(56, 189, 248, 0.18);
}
.nav-list li a .ico {
  width: 18px; height: 18px; display: inline-block;
  background: currentColor;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}

.app-main {
  grid-area: main;
  position: relative;
  overflow: auto;
  padding: 16px;
}

.app-footer {
  grid-area: footer;
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  font-size: 12px;
  color: var(--pcs-text-mute);
  border-top: 1px solid var(--pcs-line);
  background: rgba(2, 5, 13, 0.85);
}
.app-footer .pill {
  padding: 2px 8px;
  border: 1px solid var(--pcs-line);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pcs-mono);
}
.app-footer .pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pcs-good); box-shadow: 0 0 8px currentColor; color: var(--pcs-good); }
.app-footer .pill.bad .dot { background: var(--pcs-bad); color: var(--pcs-bad); }
.app-footer .pill.warn .dot { background: var(--pcs-warn); color: var(--pcs-warn); }

/* Big-screen dashboard grid */
.dashboard-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 320px 1fr 360px;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "device   linechart  kpi"
    "device   barchart   histogram"
    "pie      eventlog   minimap";
  height: calc(100vh - 64px - 36px - 32px);
  min-height: 720px;
}
.area-device     { grid-area: device; }
.area-linechart  { grid-area: linechart; }
.area-barchart   { grid-area: barchart; }
.area-pie        { grid-area: pie; }
.area-histogram  { grid-area: histogram; }
.area-kpi        { grid-area: kpi; }
.area-eventlog   { grid-area: eventlog; }
.area-minimap    { grid-area: minimap; }

@media (max-width: 1500px) {
  .dashboard-grid {
    grid-template-columns: 280px 1fr 320px;
  }
}
@media (max-width: 1280px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-template-areas:
      "device  kpi"
      "linechart linechart"
      "barchart histogram"
      "pie      eventlog";
  }
  .area-minimap { display: none; }
}