/* Header: four zones. Logo stays in the right corner in both languages. */
.header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "line titles controls logo";
  align-items: center;
  column-gap: var(--cell);
  min-height: calc(var(--cell) * 4);
  padding-inline-start: var(--cell);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
[dir="rtl"] .header {
  /* In RTL the first grid column is on the right, so the logo goes first */
  grid-template-areas: "logo titles controls line";
  padding-inline-start: 0;
  padding-inline-end: var(--cell);
}

.header__brandline { grid-area: line; width: calc(var(--cell) * 2); }
.header__titles { grid-area: titles; min-width: 0; }
.header__controls { grid-area: controls; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.header__logo-area { grid-area: logo; }

.header__subtitle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-weight: var(--w-semibold); color: var(--text-muted);
}
.header__clock { font-weight: var(--w-light); font-variant-numeric: tabular-nums; }

/* Logo area: vertical logo, 72 px tall. Monogram is ~59% of height (~42 px),
   so clear space X = 21 px; we reserve 24 px on every side. */
.header__logo-area {
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  border-inline-start: 1px solid var(--border);
  align-self: stretch;
}
[dir="rtl"] .header__logo-area { border-inline-start: 0; border-inline-end: 1px solid var(--border); }
.logo { display: block; height: 72px; width: auto; }
.logo--white { display: none; }

.line-device { display: block; width: 100%; height: auto; }
.line-device line { stroke: var(--lean-blue); stroke-width: 4; stroke-linecap: round; }
.line-device line:nth-child(2n) { stroke: var(--lean-green); }

/* Dashboard grid: 12 columns on desktop */
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--half);
  padding: var(--cell);
  max-width: 1920px;
  margin-inline: auto;
}
.kpis { grid-column: 1 / -1; }
.card--ring { grid-column: span 3; }
.card--heat { grid-column: span 6; }
.card--feed { grid-column: span 3; grid-row: span 2; }
.card--lead { grid-column: span 5; }
.card--summary { grid-column: span 4; }

@media (max-width: 1199px) {
  .dashboard { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card--ring { grid-column: span 2; }
  .card--heat { grid-column: span 4; }
  .card--lead, .card--summary { grid-column: span 3; }
  .card--feed { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 1100px) {
  .header {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "line titles logo" "controls controls logo";
    row-gap: 8px; padding-block: 12px;
  }
  [dir="rtl"] .header { grid-template-areas: "logo titles line" "logo controls controls"; }
  .header__controls { justify-content: flex-start; }
}

@media (max-width: 759px) {
  .dashboard { grid-template-columns: minmax(0, 1fr); padding: var(--half); }
  .dashboard > * { grid-column: 1 / -1 !important; }
  .header { column-gap: var(--half); padding-inline-start: var(--half); }
  [dir="rtl"] .header { padding-inline-end: var(--half); }
  .header__brandline { display: none; }
  .header { grid-template-columns: 1fr auto; grid-template-areas: "titles logo" "controls logo"; }
  [dir="rtl"] .header { grid-template-columns: auto 1fr; grid-template-areas: "logo titles" "logo controls"; }
  h1 { font-size: 22px; }
  /* Logo 60 px tall: monogram ~35 px, X ~18 px; keep 18 px clear space */
  .logo { height: 60px; }
  .header__logo-area { padding: 18px; }
  .btn { padding: 6px 10px; font-size: 13px; }
}