/* ====================================================================
   Pidisplay — design tokens (z docs/design/pidisplay.pen)
   ==================================================================== */
:root {
  --bg-page: #14171f;
  --bg-panel: #1f2330;
  --bg-panel-elevated: #2a2f3e;
  --bg-input: #14171f;
  --border-subtle: #b07852;
  --text-primary: #f5f5f7;
  --text-secondary: #a8b0bf;
  --text-muted: #8a919e;
  --brand: #ff7a3d;
  --brand-dim: #cc5e2f;
  --brand-text: #1a0d05;
  --danger: #dc2626;
  --warning: #fbbf24;
  --info: #22d3ee;
  --success: #22c55e;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
}

/* ====================================================================
   Base
   ==================================================================== */
html, body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
body { padding: var(--space-md); }
.container, .container-fluid { padding-left: var(--space-sm); padding-right: var(--space-sm); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--bg-panel-elevated); border-radius: 6px; }
::-webkit-scrollbar-corner { background: var(--bg-page); }

/* ====================================================================
   Heartbeat bar (peer sync status na RPi; na webu navíc uživatel a odhlášení
   přes .has-user — vlastní lišta, odlišná od RPi)
   ==================================================================== */
.heartbeat-bar {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  text-align: right;
  padding: 0 var(--space-xs);
}
.heartbeat-bar-email i { color: var(--brand); margin-right: var(--space-xs); }

.heartbeat-bar.has-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  text-align: left;
  font-size: 13px;
}
.user-bar-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.user-bar-who .heartbeat-bar-email {
  font-size: 14px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-bar-who [data-field="heartbeat"] { font-size: 12px; }
.user-bar-actions {
  display: flex;
  gap: var(--space-sm);
}
.user-bar-btn {
  min-height: 40px;
  padding: 0 var(--space-md);
  background: var(--bg-panel-elevated);
  color: var(--text-primary);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.user-bar-btn:hover, .user-bar-btn:focus { color: var(--text-primary); text-decoration: none; background: var(--bg-panel); }

/* ====================================================================
   Tile (header card)
   ==================================================================== */
.tile {
  background: var(--bg-panel);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tile-label {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.tile-label i { color: var(--brand); }
.tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.tile-value-large { font-size: 32px; }
.tile-unit { font-size: 18px; color: var(--text-secondary); font-weight: 400; }
.tile-meta { font-size: 12px; color: var(--text-muted); margin-top: var(--space-xs); }
.tile-meta-brand { color: var(--brand); }

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}
.status-dot.on { background: var(--brand); box-shadow: 0 0 8px rgba(255, 122, 61, 0.5); }

/* ====================================================================
   Chart card + day navigation
   ==================================================================== */
.chart-card {
  background: var(--bg-panel);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
.chart-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}
.chart-header .day-nav { display: flex; gap: var(--space-xs); align-items: center; }
.chart-header .day-label { font-size: 13px; color: var(--text-secondary); }
.chart-header .legend { display: flex; gap: var(--space-md); margin-left: auto; }
.legend-item { display: flex; align-items: center; gap: var(--space-xs); font-size: 11px; color: var(--text-secondary); }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch-boiler { background: var(--brand); }
.swatch-target { background: var(--info); }
.swatch-measured { background: var(--warning); }

.chart {
  background: var(--bg-input);
  border-radius: 6px;
  padding: var(--space-sm);
  height: 240px;
  position: relative;
}
@media (min-width: 768px) {
  .chart { height: 220px; }
}

/* ====================================================================
   Buttons
   ==================================================================== */
.btn-nav {
  width: 30px;
  height: 30px;
  background: var(--bg-panel-elevated);
  color: var(--text-secondary);
  border: 0;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
.btn-nav:hover, .btn-nav:focus { color: var(--text-primary); text-decoration: none; }
.btn-today {
  height: 30px;
  padding: 0 var(--space-md);
  background: var(--brand);
  color: var(--brand-text);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-today:hover, .btn-today:focus { color: var(--brand-text); text-decoration: none; }
.btn-today.inactive {
  background: var(--bg-panel-elevated);
  color: var(--text-secondary);
}

/* Preset buttons row */
.preset-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
/* Presety a reset byly odkazy, od Fáze 2 kroku 0.4 jsou <button> ve formuláři
   (CSRF). Reset proti UA/Bootstrap stylu tlačítek, ať vypadají stejně jako dřív. */
button.btn-preset, button.btn-reset {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.btn-preset {
  flex: 1 1 0;
  min-width: 110px;
  height: 48px;
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  padding: 0 var(--space-sm);
}
.btn-preset:hover, .btn-preset:focus { color: var(--text-primary); text-decoration: none; background: var(--bg-panel-elevated); }
.btn-preset.active {
  background: var(--brand);
  color: var(--brand-text);
  border-color: var(--brand);
  font-weight: 600;
}
.btn-preset.active:hover { background: var(--brand-dim); color: var(--brand-text); }
.btn-reset {
  flex: 0 0 auto;
  min-width: 130px;
  height: 48px;
  background: var(--danger);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-decoration: none;
  padding: 0 var(--space-md);
}
.btn-reset:hover, .btn-reset:focus { background: #b91c1c; color: #ffffff; text-decoration: none; }

/* ====================================================================
   Form (Naplánovat)
   ==================================================================== */
.plan-card {
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.plan-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}
.plan-title i { color: var(--brand); }

.segmented {
  display: flex;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 0;
  margin-bottom: var(--space-md);
}
.segmented-item {
  flex: 1 1 0;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  background: transparent;
}
.segmented-item.active {
  background: var(--brand);
  color: var(--brand-text);
  font-weight: 600;
}

.field-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.field-col { flex: 1 1 0; min-width: 120px; }
.field-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: var(--space-xs); }

.input-dark, select.input-dark {
  width: 100%;
  height: 40px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0 var(--space-md);
  font-size: 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
select.input-dark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23a8b0bf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.input-dark::placeholder { color: var(--text-muted); }
.input-dark:focus { border-color: var(--brand); }
.input-dark:focus-visible { outline: none; }

.btn-primary-orange {
  width: 100%;
  height: 46px;
  background: var(--brand);
  color: var(--brand-text);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary-orange:hover, .btn-primary-orange:focus { background: var(--brand-dim); }

/* ====================================================================
   Compass (weather station, ponecháno)
   ==================================================================== */
.compass {
  margin: 1em;
  width: 4em;
  height: 4em;
  font-size: 1em;
  position: relative;
  border: 2px var(--border-subtle) solid;
  border-radius: 50%;
  background-color: var(--bg-input);
}
.compass .arrow { position: absolute; color: var(--text-primary); text-align: center; font-size: 1.5em; top: 0; left: 0; width: 100%; height: 100%; }
.compass .label { position: absolute; }
.compass .sever { top: -1em; left: 1.6em; }
.compass .jih { bottom: -1em; left: 1.6em; }
.compass .vychod { top: 1.75em; right: -1em; }
.compass .zapad { top: 1.75em; left: -1em; }
.compass .arrow.arrow-1 { color: #3f3f3f; }
.compass .arrow.arrow-2 { color: #6f6f6f; }
.compass .arrow.arrow-3 { color: #9f9f9f; }
.compass .arrow.arrow-4 { color: #cfcfcf; }
.compass .arrow.arrow-5 { color: var(--text-primary); }

/* ====================================================================
   Message page (vypršelý formulář, 404, 500, přihlášení) — G1
   ==================================================================== */
.message-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  overflow-y: auto;
  padding: var(--space-lg);
  gap: var(--space-md);
}
.message-page h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--text-primary); }
.message-page p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.message-page-btn {
  height: 40px;
  padding: 0 var(--space-lg);
  background: var(--brand);
  color: var(--brand-text);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  cursor: pointer;
}
.message-page-btn:hover, .message-page-btn:focus { color: var(--brand-text); text-decoration: none; background: var(--brand-dim); }

/* ====================================================================
   Mobile (xs) tweaks: tiles full width pod sebou, formulář vertikální
   ==================================================================== */
@media (max-width: 767px) {
  body { padding: var(--space-sm); }
  .tile { min-height: 72px; }
  .tile-value-large { font-size: 40px; }
  .preset-row .btn-preset { flex-basis: calc(50% - var(--space-sm) / 2); min-width: 0; }
  .preset-row .btn-reset { flex-basis: 100%; }
  .field-col { flex-basis: calc(50% - var(--space-sm) / 2); }
  .btn-nav { width: 40px; height: 40px; }
  .btn-today { height: 40px; }
  .user-bar-btn { min-height: 44px; }
}