/* SJV5: notices under the menu, the backup rhythm, plans and payment, billing tables, the monitoring pages, and the phone-app steps.
   Colours come from the theme (/theme.css); nothing here is a fixed brand colour. */

/* ------------------------------------------------------------ notices under the menu */
.notices { max-width: var(--page-w); margin: 0 auto; padding: 0.75rem var(--gutter) 0; display: grid; gap: 0.5rem; }
.notices .notice { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.notices .notice > span { flex: 1 1 18rem; }

.pwa-steps { margin: 0.25rem 0 0.75rem; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.pwa-steps li { padding-left: 0.2rem; }

/* ------------------------------------------------------------ small shared pieces */
.plain-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.1rem; }
.plain-list > li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.plain-list > li:last-child { border-bottom: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: end; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.form-grid { display: grid; gap: 1rem; margin: 0.5rem 0 1rem; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { font-weight: 700; padding: 0; margin-bottom: 0.4rem; }
.radio-list { display: grid; gap: 0.5rem; }
.radio-line { display: block; padding: 0.55rem 0.8rem; border: 2px solid var(--line-strong); border-radius: var(--radius-small); background: var(--surface); font-weight: 700; }
.radio-line:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.radio-line input { margin-right: 0.5rem; }
.radio-line small { font-weight: 400; margin-left: 1.6rem; overflow-wrap: anywhere; }
.btn.disabled, a.btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.bar-cell { width: 40%; }
.mini-bar { display: block; height: 0.55rem; min-width: 2px; border-radius: 3px; background: var(--primary); }
.data-table tr.off { opacity: 0.6; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ backup */
.rhythm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.inline-field { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.inline-field input[type=number] { width: 5.5rem; min-height: 2.4rem; }
.backup-progress { margin: 0.5rem 0; font-weight: 700; }

/* ------------------------------------------------------------ plan and payment (parents) */
.plan-state { font-size: var(--step-1); margin: 0.25rem 0 0.5rem; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; margin: 0.75rem 0; }
.plan-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; text-align: left; padding: 1rem 1.1rem;
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
.plan-card:hover { border-color: var(--primary); }
.plan-card.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary) inset; }
.pc-name { font: 800 var(--step-1)/1.2 var(--font-heading); }
.pc-price { font: 800 var(--step-3)/1.1 var(--font-heading); }
.pc-price small { font: 600 0.85rem/1 var(--font-body); color: var(--ink-soft); }
.pc-sub, .pc-desc { color: var(--ink-soft); font-size: 0.9rem; }
.pc-list { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.coupon-line { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0; }
.coupon-line input { max-width: 14rem; min-height: 2.4rem; }
.plan-summary { margin: 0.5rem 0 0.75rem; }
.price-lines { margin: 0 0 0.75rem; max-width: 24rem; }
.price-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border-bottom: 1px solid var(--line); }
.price-lines dt, .price-lines dd { margin: 0; }
.price-lines .total { font-weight: 800; font-size: var(--step-1); border-bottom: 0; border-top: 2px solid var(--line-strong); margin-top: 0.2rem; padding-top: 0.45rem; }
.pay-details { margin: 0 0 1rem; display: grid; gap: 0.2rem; }
.pay-details > div { display: flex; gap: 1rem; }
.pay-details dt { width: 9rem; color: var(--ink-soft); }
.pay-details dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ monitoring */
.mon-overall { display: flex; align-items: center; gap: 0.6rem; }
.mon-dot { --c: var(--ink-soft); display: inline-grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; background: var(--c); font-style: normal; font-size: 0.95rem; line-height: 1; }
.mon-dot i { font-style: normal; }
.mon-checks { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.mon-checks > li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.mon-checks > li:last-child { border-bottom: 0; }
.mon-checks p { margin: 0.1rem 0 0; color: var(--ink-soft); }
.mon-checks .mon-dot { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; margin-top: 0.1rem; }
.mon-channels { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.15rem; }
.mon-channels > li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.mon-channels > li:last-child { border-bottom: 0; }
.mon-channels p { margin: 0.1rem 0 0; }
.mon-channels code.path { overflow-wrap: anywhere; }
.mon-routes { margin: 0; padding-left: 1.2rem; }
.mon-routes li { padding: 0.12rem 0; overflow-wrap: anywhere; }
.mon-timeline { display: flex; gap: 2px; height: 1.6rem; }
.mon-timeline i { flex: 1 1 0; min-width: 0; }
.mon-timeline i, .mon-legend i { display: block; border-radius: 2px; background: var(--line-strong); }
.mon-timeline i.lv-ok, .mon-legend i.lv-ok { background: var(--good); }
.mon-timeline i.lv-warn, .mon-legend i.lv-warn { background: var(--warn); }
.mon-timeline i.lv-critical, .mon-legend i.lv-critical { background: var(--bad); }
.mon-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); }
.mon-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.mon-legend i { width: 0.8rem; height: 0.8rem; }
.mon-fig { margin: 1rem 0 0; }
.mon-fig figcaption { font-weight: 700; margin-bottom: 0.25rem; }
.mon-chart { width: 100%; max-width: 34rem; height: auto; display: block; }
.mon-chart .grid { stroke: var(--line); stroke-width: 1; }
.mon-chart .tick { fill: var(--ink-soft); font-size: 12px; }
.mon-chart .bar { fill: var(--primary); }
.mon-chart .bar:hover { fill: var(--primary-deep); }
.mon-fig details { margin-top: 0.4rem; }

@media (max-width: 40rem) {
  .field-row { grid-template-columns: 1fr; }
  .bar-cell { display: none; }
  .pay-details > div { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .plan-card { transition: none; } }