/* Page-specific rules only. Shared chrome (design tokens, body/.wrap,
     .brand*, .title/.subtitle, .back-link, .conn-pill*, .page-nav/.page-tab,
     shared mobile overrides) lives in /static/common.css.

     NOTE — control.html keeps its own `.card`, `.card-head`, and
     `.icon-btn` rules below: the control view's cards are smaller
     (16 px radius, 22/26 padding) than flow/details' frosted cards,
     and the control-header icon-btn uses neutral chrome (for the
     Refresh button) rather than the flow/details red/green power
     semantics. */

  header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 24px; }
  /* Control page also defines a button.back-link variant (for the Save
     button in edit mode). Keep these inline — common.css has just the
     anchor form of .back-link. */
  button.back-link {
    font: inherit; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text);
  }
  .back-link:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
  button.back-link:disabled { opacity: 0.6; cursor: wait; }
  /* control.html has its own .header-actions (tighter gap, no align). */
  .header-actions { display: flex; gap: 8px; }

  .card {
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
  }
  .card-head {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-muted); font-weight: 600; margin-bottom: 14px;
  }

  table.settings {
    width: 100%; border-collapse: collapse;
  }
  table.settings td {
    padding: 10px 0; border-bottom: 1px solid var(--card-edge);
    vertical-align: baseline;
  }
  table.settings tr:last-child td { border-bottom: 0; }
  table.settings td.label {
    color: var(--text-dim); font-size: 13px; font-weight: 500; width: 60%;
  }
  table.settings td.value {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px; color: var(--text); text-align: center;
    font-weight: 500;
    width: 220px; white-space: nowrap;
  }
  table.settings td.value .unit {
    color: var(--text-muted); font-family: 'Inter', sans-serif;
    font-weight: 400; margin-left: 4px;
  }
  table.settings td.value .pill {
    display: inline-block; padding: 2px 10px; border-radius: 6px;
    background: rgba(110, 231, 183, 0.08);
    border: 1px solid rgba(110, 231, 183, 0.2);
    color: var(--batt-soft); font-family: 'Inter', sans-serif;
    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
    min-width: 110px; box-sizing: border-box; text-align: center;
  }
  table.settings td.reg {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-muted); font-size: 11px;
    padding-left: 14px; white-space: nowrap;
  }
  /* Per-row refresh-rate tag. Mirrors Detail view's F/S badges. Control
     rows are on the normal slow poll (~30 s) and also refresh on demand
     via the Refresh button in the header. Fault Recovery is a one-shot
     trigger, not a polled value. */
  .footer-note {
    font-size: 12px; color: var(--text-muted); line-height: 1.55;
    margin-top: 20px;
  }
  .footer-note code {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    background: rgba(255,255,255,0.04); padding: 1px 5px; border-radius: 4px;
    font-size: 11px; color: var(--text-dim);
  }

  /* ---------- In-page tab bar ----------
     Visually distinct from the outer `.page-nav` segmented control (which
     uses a filled pill with green active state). These are underline tabs
     with a blue accent — same idiom as browser tabs / Material — so the
     hierarchy reads as: outer = "which page am I on", inner = "which
     section of this page". Two levels that don't blend into each other. */
  .tabs {
    display: flex; gap: 0; margin-bottom: 20px;
    padding: 0; background: transparent;
    border: none; border-bottom: 1px solid var(--card-edge);
    border-radius: 0; backdrop-filter: none;
  }
  .tab {
    flex: 1; font: inherit; font-weight: 600; font-size: 13px;
    padding: 12px 16px; border-radius: 0;
    background: transparent; color: var(--text-dim);
    border: none; border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: -1px;  /* align with parent border */
  }
  .tab:hover:not(.active) { color: var(--text); }
  .tab.active {
    color: var(--grid);
    border-bottom-color: var(--grid);
    background: transparent;
    box-shadow: none;
  }
  .tab svg { width: 16px; height: 16px; stroke: currentColor; }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* Highlight the SBU-relevant row in Input/Output so the user can spot it fast. */
  tr[data-addr="0x0410"] td.label::before,
  tr[data-addr="0x0411"] td.label::before {
    content: "★"; color: var(--batt-soft); margin-right: 6px; opacity: 0.7; font-size: 11px; vertical-align: 1px;
  }

  /* ---------- Edit / Save controls ---------- */
  .row-actions {
    padding-left: 12px; white-space: nowrap;
    display: flex; gap: 6px; justify-content: flex-end; align-items: center;
  }
  .row-btn {
    font-size: 12px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-edge);
    color: var(--text); cursor: pointer;
    transition: all 140ms ease;
    font-family: inherit;
  }
  .row-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
  .row-btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .row-btn.primary { background: rgba(52, 211, 153, 0.14); border-color: rgba(110, 231, 183, 0.35); color: var(--batt-soft); }
  .row-btn.primary:hover:not(:disabled) { background: rgba(52, 211, 153, 0.22); border-color: rgba(110, 231, 183, 0.6); }
  .row-btn.danger  { color: var(--red); }
  /* Action triggers (e.g. Fault Recovery) live in the .value column in place
     of a pill; match the pill column's min-width so they line up with the
     value-pills in other rows. */
  .row-btn.action-trigger { min-width: 110px; }

  /* Notifications card — small one-line description under the label so
     the user knows what the toggle actually does without leaving the
     Control page. */
  table.settings td.label .hint {
    font-size: 11px; color: var(--text-muted); font-weight: 400;
    margin-top: 4px; line-height: 1.4;
  }
  /* Off-state pill — same shape as the green pill, just neutral. ON
     keeps the default green pill styling (rgba(110,231,183,*)). */
  table.settings td.value .pill.off {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
  }
  /* Right-aligned action button when the row is a toggle (no Edit/Save
     pair, so we don't need the flex+gap of .row-actions). */
  .row-btn.toggle-btn { min-width: 84px; }
  /* Color follows the action the button OFFERS, not the current state:
     `.is-on` = state is ON, button label is "Disable"  → red accent.
     `.is-off` = state is OFF, button label is "Enable" → green accent. */
  .row-btn.toggle-btn.is-on  { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); color: var(--red); }
  .row-btn.toggle-btn.is-off { background: rgba(52, 211, 153, 0.14); border-color: rgba(110, 231, 183, 0.35); color: var(--batt-soft); }
  .row-btn.toggle-btn.is-on:hover:not(:disabled)  { background: rgba(248, 113, 113, 0.2); border-color: rgba(248, 113, 113, 0.6); }
  .row-btn.toggle-btn.is-off:hover:not(:disabled) { background: rgba(52, 211, 153, 0.22); border-color: rgba(110, 231, 183, 0.6); }

  /* Inline edit input + select */
  .edit-input, .edit-select {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 14px; color: var(--text); font-weight: 500;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(110, 231, 183, 0.35);
    border-radius: 7px;
    padding: 6px 10px;
    width: 110px; text-align: right;
    outline: none;
  }
  .edit-select { width: 150px; font-family: 'Inter', sans-serif; }
  .edit-input:focus, .edit-select:focus { border-color: var(--batt-soft); box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.14); }

  td.value { position: relative; }
  td.value .write-flash {
    position: absolute; inset: -2px -6px; pointer-events: none;
    border-radius: 6px; background: rgba(110, 231, 183, 0); transition: background 350ms ease;
  }
  td.value.flash-ok .write-flash { background: rgba(110, 231, 183, 0.22); }
  td.value.flash-err .write-flash { background: rgba(248, 113, 113, 0.22); }

  .write-error {
    margin-top: 6px; padding: 8px 12px; border-radius: 8px;
    background: rgba(248, 113, 113, 0.10);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--red); font-size: 12px;
  }
  .write-error.hidden { display: none; }

  /* ---------- Icon-only action button (neutral variant) ----------
     Used for "Refresh" in the header row so the brand + action stays
     visually compact. Similar footprint to the power icon-btn on
     flow/details but uses neutral chrome instead of the red/green power
     semantics. */
  .icon-btn {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; padding: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--card-edge);
    color: var(--text);
    cursor: pointer;
    transition: all 140ms ease;
    font-family: inherit;
  }
  .icon-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
  .icon-btn:active { transform: translateY(1px); }
  .icon-btn:disabled { opacity: 0.55; cursor: wait; }
  .icon-btn svg { width: 18px; height: 18px; }
  /* Refresh-in-progress: spin the icon rather than replacing the button
     innerHTML with text (would break the 40x40 square). */
  .icon-btn.refreshing svg { animation: icon-spin 0.9s linear infinite; }
  @keyframes icon-spin { to { transform: rotate(360deg); } }

  /* `.conn-pill*`, `.page-nav`, `.page-tab` are defined in
     /static/common.css. */

  /* ---------- Mobile overrides ---------- (must stay last — base rules
     like `.card { padding: 22px 26px }` live earlier and would otherwise
     win by source-order tie-break. Shared chrome mobile tweaks live in
     common.css.) */
  @media (max-width: 640px) {
    /* Header: brand + refresh icon-btn fit on one row — nav lives in
       `.page-nav` below. */
    header { gap: 12px; margin-bottom: 14px; align-items: center; }
    .card { padding: 18px 16px; }
    /* Tabs: "Input ⇄ Output" + 14 px icon + 6 px gap ≈ 115 px, which
       exactly equals the per-tab width at 390 px viewport → text wraps to
       two lines. Hide the icons on mobile so the label gets the full width;
       the tab labels alone are unambiguous. */
    .tab { padding: 9px 8px; font-size: 12px; gap: 6px; white-space: nowrap; }
    .tab svg { display: none; }
    /* Hide register column on mobile — debugging detail, not essential. */
    table.settings td.reg { display: none; }
    table.settings td.label { font-size: 12.5px; width: auto; }
    table.settings td.value { font-size: 13px; width: auto; text-align: right; }
    table.settings td.value .pill { min-width: 80px; font-size: 11.5px; padding: 2px 8px; }
    .row-actions { padding-left: 8px; }
    .row-btn { padding: 5px 10px; font-size: 11.5px; }
    .edit-input, .edit-select { width: 90px; font-size: 13px; }
    .edit-select { width: 130px; }
  }