/* ============================================================
   Domovská stránka: router v hero a farebné režimy SpeedFusion.
   Všetko ostatné je v styles.css (aj tmavá sekcia režimov).
   ============================================================ */

:root {
  --led: #3ccf7f;
  --fail: #e5484d;         /* LED pri výpadku */

  /* Farby liniek v routeri */
  --c-m1: #2d6cdf;
  --c-m2: #e0702a;
  --c-sl: #8a979c;
  --c-op: #d39f08;
}

/* ---------- Hero: text hore, router pod ním cez celú šírku ---------- */
.hero h1 { max-width: 16em; }

/* Router s káblami */
.rig {
  margin-top: 48px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
/* Výkres na milimetrovom papieri s vnútorným rámikom */
.rig-sheet {
  position: relative;
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -1px -1px;
}
.rig-sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line-strong);
  pointer-events: none;
}
.rig-svg { position: relative; display: block; width: 100%; height: auto; max-height: 400px; padding: 28px 32px 6px; overflow: hidden; }
.rig-svg text { font-family: var(--font); }
/* Popisová tabuľka v rohu výkresu */
.rig .title-block { margin: 0 10px 10px auto; width: calc(100% - 20px); }

.c-name { fill: var(--ink); font-family: var(--font-head); font-size: 16px; font-weight: 600; transition: opacity 0.3s; }
.c-name.off { opacity: 0.4; }
.cable { cursor: pointer; transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.45s; }
.cable .wire { fill: none; stroke: var(--c); stroke-width: 6; stroke-linecap: round; }
.cable .flow {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.85;
  stroke-width: 2;
  stroke-dasharray: 2 14;
  stroke-linecap: round;
  animation: flow var(--d) linear infinite;
}
.cable .plug { fill: var(--c); }
.cable .tip { fill: #b9c2c4; }
.cable.off { transform: translateX(-38px); opacity: 0.38; }
.cable.off .flow { visibility: hidden; }
.cable.fail .flow { visibility: hidden; }

/* Antény mobilných modemov */
.ant { cursor: pointer; transition: opacity 0.45s; }
.ant-stick, .ant-base { fill: var(--graphite); }
.ant-tip { fill: var(--c); transition: fill 0.2s; }
.wave {
  fill: none;
  stroke: var(--c);
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: wave 1.6s ease-out infinite;
}
.wave.w2 { animation-delay: 0.3s; }
.ant.off { opacity: 0.35; }
.ant.off .wave, .ant.fail .wave { visibility: hidden; }
.ant.fail .ant-tip { fill: var(--fail); }
@keyframes wave { 0%, 100% { opacity: 0.15; } 40% { opacity: 1; } }

.cable-spare path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 6 6; }

.dev { fill: var(--graphite); }
.dev-name { fill: var(--on-dark); font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.socket { fill: #0d1214; }
.socket-free { fill: none; stroke: #66737a; stroke-dasharray: 2 2; }
.port-name { fill: var(--on-dark-muted); font-size: 14px; font-weight: 500; }
.led { fill: #3d484c; transition: fill 0.2s; }
.led.on { fill: var(--led); filter: drop-shadow(0 0 3px var(--led)); }
.led.fail { fill: var(--fail); filter: drop-shadow(0 0 3px var(--fail)); }

.rig .tunnel { fill: none; stroke: var(--accent); transition: stroke-width 0.45s, stroke 0.3s; }
.rig .tunnel-flow {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.8;
  stroke-dasharray: 3 9;
  animation: flow-tunnel 0.5s linear infinite;
}
.t-label { fill: var(--accent); font-size: 14.5px; font-weight: 700; }
.hub { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; transition: stroke 0.3s; }
.hub-name { fill: var(--ink); font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.hub-sub { fill: var(--muted); font-size: 14px; }
.rig.down .tunnel { stroke: var(--line); }
.rig.down .tunnel-flow { visibility: hidden; }
.rig.down .hub { stroke: var(--danger); stroke-dasharray: 5 4; }

@keyframes flow { to { stroke-dashoffset: -16; } }
@keyframes flow-tunnel { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .cable .flow, .rig .tunnel-flow, .wave { animation: none; }
  .cable, .rig .tunnel { transition: none; }
}

/* Ovládanie pod routerom */
.rig-panel {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.rig-switches { align-self: center; padding: 22px 32px 26px; }
.switches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.switch {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 11px 14px 11px 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: inset 5px 0 0 var(--c);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.2s, background 0.2s;
}
.switch:hover { border-color: var(--ink); }
.sw-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.sw-state { font-size: 14.5px; color: var(--muted); }
.switch[aria-pressed="false"] {
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: inset 5px 0 0 var(--line);
}
.switch[aria-pressed="false"] .sw-name { color: var(--muted); }
.switch[aria-pressed="false"] .sw-state { color: var(--danger); }
.switch.fail { box-shadow: inset 5px 0 0 var(--fail); }
.switch.fail .sw-state { color: var(--danger); font-weight: 700; }

.rig-readout { padding: 22px 32px 26px; border-left: 1px solid var(--line); background: var(--paper); }
.ro-status { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; line-height: 1.3; }
.ro-status::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0 4px rgba(60, 207, 127, 0.18);
}
.rig.down .ro-status { color: var(--danger); }
.rig.down .ro-status::before { background: var(--danger); box-shadow: 0 0 0 4px rgba(180, 55, 47, 0.15); }
.ro-values { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 28px; margin: 16px 0 14px; }
.ro-values dt { font-size: 14.5px; color: var(--muted); }
.ro-values dd { font-family: var(--font-head); font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ro-bar { display: flex; height: 10px; overflow: hidden; background: var(--line); }
.ro-bar span { background: var(--c); flex-basis: 0; transition: flex-grow 0.45s; }
.ro-bar span + span { border-left: 2px solid var(--paper); }
.ro-note { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ---------- Responzivita ---------- */
@media (max-width: 1000px) {
  .rig-panel { grid-template-columns: 1fr; }
  .rig-readout { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .rig { margin-top: 36px; }
  .rig-svg { padding: 18px 10px 4px; }
  /* Schéma sa na mobile zmenší asi na polovicu, popisy preto zväčšíme.
     Mená liniek sú v tlačidlách pod schémou, v schéme ich skryjeme. */
  .c-name, .port-name { display: none; }
  .dev-name, .hub-name { font-size: 21px; }
  .t-label, .hub-sub { font-size: 17px; }
  .rig-switches, .rig-readout { padding: 18px 16px 20px; }
  .switches { grid-template-columns: 1fr 1fr; }
}