/* Page-specific rules only. Shared chrome (design tokens, body/.wrap,
     .brand*, .title/.subtitle, .back-link, .icon-btn*, .header-actions,
     .conn-pill*, .page-nav/.page-tab and shared mobile overrides) lives
     in /static/common.css. Loaded via <link> BEFORE this block, so
     inline rules here still win on tie-breaks.

     NOTE — details.html intentionally keeps its own `.card` rule and
     some token overrides below. Its design predates the Tesla palette
     used by flow/control, using a solid card fill + subtitle in
     JetBrains Mono. Those stay inline. */

  /* Palette overrides — details.html uses a different card fill +
     greater saturation than flow/control's translucent frosted cards.
     The `body` background gradients and `.title`/`.subtitle` colour
     come from common.css + these overrides. */
  :root {
    --bg: #0b0f1a;
    --bg-2: #111725;
    --card: #151c2c;
    --card-hi: #1b2235;
    --border: rgba(255, 255, 255, 0.06);
    --text: #e7ebf3;
    --text-dim: #8892a8;
    --grid: #60a5fa;
    --solar: #fbbf24;
    --battery: #34d399;
    --load: #fb923c;
    --danger: #f87171;
    --ok: #22c55e;
  }
  /* details.html-specific resets: a universal margin/padding zero
     (stronger than common.css's `* { box-sizing: border-box }`) and
     fixed 100% body height so the dashboard fills the viewport. */
  * { margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(96,165,250,0.08), transparent 60%),
      radial-gradient(900px 500px at 90% 10%, rgba(251,191,36,0.06), transparent 55%),
      var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 32px clamp(16px, 3vw, 80px) 80px;
    font-feature-settings: "tnum" 1, "cv11" 1;
    -webkit-font-smoothing: antialiased;
  }
  /* Details view has no `.wrap` padding of its own — gutter comes from
     body padding above. */
  .wrap { margin: 0 auto; padding: 0; }
  /* Header: mirrors flow.html + control.html — brand-mark + title + subtitle
     on the left, action cluster on the right. Keeps the three pages feeling
     like one app. */
  header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 28px; gap: 24px;
  }
  /* Details-specific subtitle override: mono instead of Inter. */
  .subtitle { font-family: 'JetBrains Mono', monospace; }
  .status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim);
         box-shadow: 0 0 12px currentColor; }
  .dot.ok { background: var(--ok); color: var(--ok); }
  .dot.stale { background: var(--danger); color: var(--danger); }

  .grid {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
  }
  .card {
    grid-column: span 4;
    background: linear-gradient(180deg, var(--card), var(--card-hi));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 22px 24px;
    position: relative;
    overflow: hidden;
  }
  .card::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(600px 200px at 0% 0%, rgba(255,255,255,0.02), transparent 70%);
  }
  .card-head {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 14px;
  }
  .chip {
    width: 6px; height: 20px; border-radius: 3px; flex-shrink: 0;
  }
  .chip.grid { background: var(--grid); }
  .chip.solar { background: var(--solar); }
  .chip.battery { background: var(--battery); }
  .chip.load { background: var(--load); }

  .metric { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
  .metric .v { font-size: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .metric .u { font-size: 15px; color: var(--text-dim); font-weight: 500; }
  .metric.small .v { font-size: 24px; font-weight: 500; }
  .metric.small .u { font-size: 13px; }
  .sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

  .row-sep { border-top: 1px solid var(--border); margin: 16px 0 14px; }
  /* Two-column grid: label takes remaining space, value gets its natural
     width. `minmax(0, 1fr)` is load-bearing — without it the label column
     refuses to shrink below intrinsic content size, which on narrow
     viewports pushes the value off-column and makes long labels appear
     to overlap the value (the original complaint on mobile). */
  .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    align-items: baseline;
    padding: 4px 0;
    font-size: 14px;
  }
  .row .k {
    color: var(--text-dim);
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* Value is always right-aligned; nowrap keeps "680.985 kWh" together
     rather than breaking between number and unit. Values are short
     enough that this never forces the label to overflow — the label
     column wraps first. */
  .row .v {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  .bar-wrap { margin-top: 14px; }
  .bar-label { display: flex; justify-content: space-between; font-size: 12px;
               color: var(--text-dim); margin-bottom: 6px; }
  .bar { height: 8px; background: rgba(255,255,255,0.05); border-radius: 999px; overflow: hidden; }
  .bar > span {
    display: block; height: 100%; border-radius: inherit;
    transition: width 700ms cubic-bezier(.2,.7,.2,1);
  }
  .bar.battery > span { background: linear-gradient(90deg, #10b981, #34d399); }
  .bar.load > span { background: linear-gradient(90deg, #f97316, #fb923c); }

  .card.span6 { grid-column: span 6; }
  .card.span12 { grid-column: span 12; }
  .card-head .right {
    margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: 0.1em;
    color: var(--text-dim);
  }

  .totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .total-cell { }
  .total-cell .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
                        color: var(--text-dim); margin-bottom: 4px; }
  .total-cell .val { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .total-cell .unit { font-size: 12px; color: var(--text-dim); margin-left: 4px; font-weight: 400; }

  .flag {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; font-weight: 600;
    background: rgba(52, 211, 153, 0.12); color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
  }
  .flag.neg { background: rgba(251, 146, 60, 0.12); color: #fb923c;
              border-color: rgba(251, 146, 60, 0.3); }
  .flag.zero { background: rgba(136, 146, 168, 0.12); color: var(--text-dim);
               border-color: rgba(136, 146, 168, 0.2); }

  @media (max-width: 960px) {
    .card { grid-column: span 6; }
    .card.span6, .card.span12 { grid-column: span 12; }
    .totals { grid-template-columns: repeat(2, 1fr); }
  }
  .pulse {
    animation: pulse 320ms ease-out;
  }
  @keyframes pulse {
    0% { background-color: rgba(96,165,250,0.08); }
    100% { background-color: transparent; }
  }

  /* Inverter-params inline banner */
  .inline-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
  .inline-val { font-size: 22px; font-weight: 600; }
  .inline-u { font-size: 14px; color: var(--text-dim); margin-left: 4px; }
  .inline-mono { font-size: 14px; color: var(--text-dim); font-family: 'JetBrains Mono', monospace; }

  /* Important Parameters grid */
  .key-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 960px) { .key-grid { grid-template-columns: repeat(2, 1fr); } }
  .kv {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .kv-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
  .kv-val { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .kv-u { font-size: 13px; color: var(--text-dim); margin-left: 4px; font-weight: 500; }

  .mono-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); margin-left: 8px; }
  .mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

  .row .v.mono { font-size: 13px; }
  .row .v.strong { font-weight: 600; color: var(--grid); }

  .time-bar {
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.2);
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 18px;
    display: flex; gap: 12px; align-items: center; justify-content: center;
    font-size: 13px;
  }
  .time-label { color: var(--grid); letter-spacing: 0.04em; }
  .time-val { font-family: 'JetBrains Mono', monospace; color: var(--text); }

  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 48px;
  }
  @media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

  .hint { margin-left: 8px; font-size: 11px; color: var(--text-dim); font-weight: 400; }

  .header-actions { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

  /* `.back-link`, `.icon-btn*`, `.conn-pill*`, `.page-nav`, `.page-tab`
     are defined in /static/common.css. Details-specific dot pulse
     animation for the legacy `.dot` status indicator stays below. */

  .dot.connecting, .dot.disconnecting {
    background: #fbbf24; color: #fbbf24;
    animation: dotPulse 1s ease-in-out infinite;
  }
  @keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 8px currentColor; }
    50% { box-shadow: 0 0 18px currentColor; }
  }
  .dot.disconnected { background: #64748b; color: #64748b; }

  /* ---------- Mobile overrides ---------- (last in the stylesheet so
     they outweigh base rules defined later in source order. Breakpoint
     matches flow.html and control.html so the three pages feel identical.
     Shared chrome mobile tweaks live in common.css.) */
  @media (max-width: 640px) {
    body { padding: 20px 14px 48px; }
    .card { grid-column: span 12; padding: 18px; }
    .metric .v { font-size: 36px; }
    /* Header: brand + dot + power-btn fit in one row now that navigation
       lives in the `.page-nav` segmented control below. */
    header { gap: 12px; margin-bottom: 14px; align-items: center; }
    /* Time bar: the inline F/S/M explainers crowd out the update
       timestamp on narrow screens. Stack them below on their own row. */
    .time-bar { flex-wrap: wrap; padding: 10px 14px; gap: 8px; font-size: 12px; }
    .time-bar > span[style*="margin-left: auto"] {
      margin-left: 0 !important; width: 100%;
      justify-content: space-between; gap: 8px !important;
      font-size: 10.5px !important;
    }
    .key-grid { gap: 10px; }
    .kv { padding: 10px 12px; }
    .kv-val { font-size: 20px; }
    .totals { gap: 10px; }
    .total-cell .val { font-size: 20px; }
  }