/* Barvy podle loga HSE Cloud: tmavé kovové pozadí, zelená (značka, OK),
   modrá (voda, čerpání), červená (teplota, alarm). */
:root {
  --brand-dark: #1b1c1e; --brand-dark-2: #2e3033; --brand-green: #4a9f41; --brand-blue: #105891; --brand-red: #b62b25;
  --bg: #eef0f2; --card: #fff; --text: #1d2226; --muted: #67717a; --line: #dadfe3;
  --accent: #3f8c37; --accent-text: #fff; --link: #105891;
  --ok: #3f8c37; --bad: #b62b25; --off: #8a939b;
  --temp: #b62b25; --water: 16, 88, 145; --strip: 63, 140, 55;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121315; --card: #1c1e20; --text: #e7eaec; --muted: #9aa3aa; --line: #2d3033;
    --accent: #5bb551; --accent-text: #0e1a0c; --link: #5aa6e6;
    --ok: #5bb551; --bad: #e0534c; --off: #6d757c;
    --temp: #e0534c; --water: 90, 166, 230; --strip: 91, 181, 81;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
main { max-width: 1040px; margin: 0 auto; padding: 20px 16px 32px; }
h1 { font-size: 1.5rem; margin: .1em 0 .3em; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .7em; } h3 { font-size: .92rem; margin: 1.4em 0 .5em; color: var(--muted); font-weight: 600; }
a { color: var(--link); }

/* Záhlaví s logem – tmavý „kartáčovaný kov“ jako pozadí loga */
.top { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between;
       padding: 8px 20px; color: #e9ecee;
       background: linear-gradient(90deg, #141516 0%, var(--brand-dark) 35%, var(--brand-dark-2) 100%);
       border-bottom: 3px solid var(--brand-green); }
.top .brand { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.top .brand img { height: 54px; width: auto; display: block;
       -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
               mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.top .brand .site { font-size: .95rem; font-weight: 600; color: #cfd5da; border-left: 1px solid #44484c; padding-left: 14px; }
.top nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.top nav a, .top button.link { color: #e9ecee; text-decoration: none; }
.top nav a:hover, .top button.link:hover { color: #8fd486; }
.who { color: #a9b1b8; }
.inline { display: inline; margin: 0; }

button { font: inherit; font-weight: 600; background: var(--accent); color: var(--accent-text); border: 0; border-radius: 6px; padding: 8px 14px; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button.link { background: none; color: var(--link); padding: 0; font-weight: 400; }
button.danger { background: var(--bad); color: #fff; }
button.small { padding: 4px 10px; font-size: .9em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow); }
.card.narrow { max-width: 420px; margin: 48px auto; }
.card.narrow h1 { text-align: center; }
label { display: block; margin-bottom: 12px; font-size: .9em; color: var(--muted); }
input, select { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.card.narrow button { width: 100%; padding: 10px; }
.muted { color: var(--muted); } .small { font-size: .85em; }
.error { color: var(--bad); } .notice { color: var(--ok); }

/* Přehled strojů */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.machine { display: block; color: inherit; text-decoration: none; border-top: 3px solid var(--off); transition: border-color .15s; }
.machine.is-online { border-top-color: var(--brand-green); }
.machine:hover { border-color: var(--accent); }
.mtitle { margin-bottom: 14px; }
.mhead, .mtitle, .hrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.badge { font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 3px 10px; border-radius: 99px; color: #fff; background: var(--off); white-space: nowrap; }
.badge.ok { background: var(--ok); color: var(--accent-text); } .badge.off { background: var(--off); }
.alarm, .warn { color: var(--bad); font-weight: 600; margin-top: 6px; }
.warn { background: var(--card); border: 1px solid var(--bad); border-left-width: 4px; border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }

/* Detail stroje */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); border-left: 4px solid var(--line); }
.stat.temp { border-left-color: var(--temp); } .stat.water { border-left-color: rgb(var(--water)); }
.big { font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; }
.item .v { font-weight: 700; } .item .v.on { color: var(--ok); } .item .v.bad { color: var(--bad); } .item .v.offv { color: var(--muted); }
.item .rem { font-size: .8em; color: var(--muted); display: block; text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.stale .items, .stale .stats .big { opacity: .45; }
.seg { display: inline-flex; }
.seg button { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 0; padding: 5px 12px; font-weight: 500; }
.seg button + button { border-left: 0; }
.seg button:first-child { border-radius: 6px 0 0 6px; } .seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button.on { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.chartbox { position: relative; height: 230px; }
.total { font-size: .9rem; color: var(--muted); margin: -.2em 0 .6em; }
.total b { color: var(--text); font-size: 1.05rem; }
.strip { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; margin: 3px 0; }
.strip .lbl { font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip canvas { width: 100%; height: 18px; display: block; border-radius: 3px; background: var(--bg); }
.axis { display: grid; grid-template-columns: 150px 1fr; gap: 8px; font-size: .75em; color: var(--muted); }
.axis div:last-child { display: flex; justify-content: space-between; }
.tip { position: fixed; pointer-events: none; background: var(--text); color: var(--bg); font-size: .8em; padding: 4px 8px; border-radius: 4px; z-index: 10; }

/* Administrace */
table { width: 100%; border-collapse: collapse; font-size: .92em; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .85em; }
.tablewrap { overflow-x: auto; }
.token { font-family: ui-monospace, Consolas, monospace; word-break: break-all; background: var(--bg); padding: 10px; border-radius: 6px; border: 1px dashed var(--accent); }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.row label { flex: 1 1 160px; margin-bottom: 0; }
.checks label { display: inline-flex; gap: 6px; align-items: center; margin: 0 14px 6px 0; color: var(--text); }
.checks input { width: auto; display: inline; margin: 0; }

@media (max-width: 640px) {
  .top { padding: 8px 12px; }
  .top .brand img { height: 42px; }
  .top .brand .site { display: none; }
  .strip, .axis { grid-template-columns: 95px 1fr; }
}

/* Animované schéma stroje (scenes/*.php) */
.scene-wrap { background: #373a3d; border-radius: 8px; overflow: hidden; }
.scene svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.scene .mk { fill: #2a2d30; stroke: #cfd5da; stroke-width: 2; }
.scene .mk-t { fill: #fff; font: 700 17px system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.scene .on .mk { fill: var(--brand-green); stroke: #fff; }
.scene .level.on .mk, .scene .alarm-item.on .n { fill: var(--brand-red); background: var(--brand-red); }

/* 1 Čerpadlo */
.scene .pump-body { fill: #2a2d30; stroke: #8a939b; stroke-width: 4; }
.scene .pump .impeller path { stroke: #8a939b; stroke-width: 6; stroke-linecap: round; fill: none; }
.scene .pump-hub { fill: #8a939b; }
.scene .impeller { transform-box: view-box; transform-origin: 262px 568px; }
.scene .pump.on .pump-body { stroke: #5aa6e6; filter: drop-shadow(0 0 8px rgba(90,166,230,.8)); }
.scene .pump.on .impeller path, .scene .pump.on .pump-hub { stroke: #5aa6e6; fill: #5aa6e6; }
.scene .pump.on .impeller { animation: hse-spin 1s linear infinite; }

/* 2 Trubka – proudění */
.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 9; stroke-linecap: round; }
.scene .pipe.on .pipe-flow { stroke: #5aa6e6; stroke-dasharray: 10 12; opacity: .95;
  filter: drop-shadow(0 0 4px rgba(90,166,230,.9)); animation: hse-flow .8s linear infinite; }

/* 3, 4 Ventily */
.scene .valve-ring { fill: none; stroke: transparent; stroke-width: 4; }
.scene .valve.on .valve-ring { stroke: #6fd162; transform-box: fill-box; transform-origin: center; animation: hse-pulse 1.6s ease-out infinite; }

/* 5 Vypouštění oleje */
.scene .oil-glow { fill: transparent; }
.scene .oil.on .oil-glow { fill: rgba(232,163,23,.18); stroke: #e8a317; stroke-width: 2; }
.scene .oil-pipe { stroke: transparent; stroke-width: 5; }
.scene .oil.on .oil-pipe { stroke: rgba(232,163,23,.5); }
.scene .drop { fill: #e8a317; opacity: 0; }
.scene .oil.on .drop { animation: hse-drop1 1.4s ease-in infinite; }
.scene .oil.on .drop:nth-of-type(3), .scene .oil.on .drop:nth-of-type(4) { animation-name: hse-drop2; }
.scene .oil.on .drop.d2 { animation-delay: .7s; }

/* 6 Hladina */
.scene .level-glow { fill: transparent; }
.scene .level.on .level-glow { fill: rgba(182,43,37,.22); stroke: var(--brand-red); stroke-width: 3; animation: hse-blink 1.4s ease-in-out infinite; }

/* Legenda pod schématem */
.legend { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.legend li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }
.legend .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: #2a2d30; color: #fff; }
.legend li.on .n { background: var(--brand-green); }
.legend .l { flex: 1; }
.legend .s { font-weight: 700; color: var(--muted); text-align: right; }
.legend li.on .s { color: var(--ok); }
.legend li.alarm-item.on .s { color: var(--bad); }
.legend .s small { display: block; font-weight: 400; font-size: .78em; color: var(--muted); }
.scene.stale svg { filter: grayscale(1) brightness(.75); }
.scene.stale .on * { animation: none !important; }

@keyframes hse-spin { to { transform: rotate(360deg); } }
@keyframes hse-flow { to { stroke-dashoffset: -22; } }
@keyframes hse-pulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes hse-drop1 { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(52px); opacity: 0; } }
@keyframes hse-drop2 { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
@keyframes hse-blink { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .scene .valve.on .valve-ring { transform: none; }
  .scene .pipe.on .pipe-flow { stroke-dasharray: none; }
}