/* ============================================================================
   26 · OVERVIEW ACTION CENTER  (/dashboard/:id/overview)

   The Overview page stopped being a static menu and became a triage screen.
   Three families, all prefixed so they can never collide with the page's
   inline styles:

     .hl-*   the "At-a-Glance" pill strip under the plan card — colour-coded,
             clickable, and honest about being empty (a single green pill).

     .ac-*   the Action Center panel — conditional critical alerts and the
             smart-recommendation to-do list.

     .qs-*   Quick Setup — the four preset cards, their hover/focus preview
             (exactly which modules get enabled or disabled), and the deployed
             confirmation state.

   Part of the dashboard stylesheet, split out of the former single style.css.
   LOAD ORDER IS LOAD-BEARING and it is the numeric filename prefix — adding a
   part is dropping in a numbered file. See parts/README.md.
   ========================================================================== */

/* ===== At-a-Glance highlights (.hl-*) ====================================== */

.hl-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .5rem;
}

.hl-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: .8125rem;
  line-height: 1.25;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  min-width: 0;
}

a.hl-pill:hover {
  transform: translateY(-1px);
  border-color: var(--text-muted);
  background: var(--surface-hover);
}

.hl-pill-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.hl-pill-tx {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hl-pill-label { font-weight: 700; white-space: nowrap; }
.hl-pill-sub   { font-size: .6875rem; color: var(--text-muted); white-space: nowrap; }

/* Tones. Each pairs a tinted wash with its own icon colour, so a pill reads
   before it is read. */
.hl-red     { border-color: rgba(239, 68, 68, .45);  background: rgba(239, 68, 68, .1); }
.hl-red     .hl-pill-ic { color: var(--red); }
.hl-yellow  { border-color: rgba(245, 158, 11, .4);  background: rgba(245, 158, 11, .08); }
.hl-yellow  .hl-pill-ic { color: var(--yellow); }
.hl-green   { border-color: rgba(59, 165, 93, .4);   background: rgba(59, 165, 93, .08); }
.hl-green   .hl-pill-ic { color: var(--green); }
.hl-blurple { border-color: rgba(145, 70, 255, .4);  background: rgba(145, 70, 255, .1); }
.hl-blurple .hl-pill-ic { color: #a78bfa; }

/* Loading placeholders reuse the shared .az-spin chrome (21-feedback.css) —
   the muted pill text colour is what gives it its tone, so nothing is added
   here beyond the size the pill's 1em would otherwise inherit. */
.hl-skeleton .az-spin { color: var(--text-muted); }

/* ===== Action Center panel (.ac-*) ========================================= */

.ac-panel-pad { padding: 1rem 1.25rem 1.25rem; }

.ac-block + .ac-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }

.ac-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .875rem;
  margin-bottom: .625rem;
  color: var(--red);
}

.ac-head--yellow { color: var(--yellow); }

.ac-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: .625rem;
  border: 1px solid var(--border);
  background: var(--surface);
}

.ac-row + .ac-row { margin-top: .5rem; }

.ac-row-ic {
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: .1rem;
}

.ac-red    .ac-row-ic { color: var(--red); }
.ac-yellow .ac-row-ic { color: var(--yellow); }
.ac-green  .ac-row-ic { color: var(--green); }

.ac-row-tx { flex: 1; min-width: 0; }

.ac-row-title { font-weight: 600; font-size: .8438rem; }
.ac-row-sub   { font-size: .7813rem; color: var(--text-muted); margin-top: .125rem; line-height: 1.45; }

.ac-row-act { flex-shrink: 0; display: flex; align-items: center; gap: .375rem; }

.ac-delegated-note {
  margin-top: .875rem;
  font-size: .75rem;
  color: var(--text-muted);
}

/* ===== Quick Setup (.qs-*) ================================================== */

.qs-head {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .9375rem;
  margin-bottom: .875rem;
}

.qs-head ion-icon { color: var(--yellow); }

.qs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: .875rem;
}

.qs-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface);
  padding: 1rem;
  cursor: default;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.qs-card:hover,
.qs-card.qs-open,
.qs-card:focus-visible {
  border-color: var(--qs-accent, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  outline: none;
}

.qs-card-top {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .625rem;
}

.qs-card-ic {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(135deg, var(--qs-accent, var(--blurple)), rgba(0, 0, 0, .35));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.qs-card-label   { font-weight: 700; font-size: .9063rem; }
.qs-card-tagline { font-size: .7188rem; color: var(--text-muted); line-height: 1.35; }

.qs-card-desc {
  font-size: .7813rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: .625rem;
}

.qs-quickfact {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .7188rem;
  color: var(--text-muted);
}

.qs-quickfact ion-icon { color: var(--green); flex-shrink: 0; }

/* The preview: exactly what this preset will switch on, switch off, and leave
   for the owner to finish. Hover- AND focus-reachable, never hover-only. */
.qs-preview {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--border);
  animation: qs-fade 160ms ease;
}

@keyframes qs-fade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.qs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .7813rem;
}

.qs-list ion-icon { font-size: .875rem; flex-shrink: 0; }

.qs-on    ion-icon { color: var(--green); }
.qs-off   ion-icon { color: var(--red); }
.qs-setup ion-icon { color: var(--yellow); }

.qs-now { opacity: .65; }

.qs-done-tag {
  font-size: .625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--green);
  border: 1px solid rgba(59, 165, 93, .4);
  border-radius: 999px;
  padding: .05rem .4rem;
  margin-left: .25rem;
}

.qs-setup-head {
  margin-top: .35rem;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.qs-preview-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}

.qs-preview-doc {
  font-size: .7188rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}

.qs-preview-doc:hover { color: var(--text); }

.qs-preview-foot .qs-apply[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Deployed: a brief, calm green confirmation while the grid repaints. */
.qs-card.qs-deployed {
  border-color: rgba(59, 165, 93, .55);
  box-shadow: 0 0 0 1px rgba(59, 165, 93, .35), 0 6px 24px rgba(59, 165, 93, .12);
  animation: qs-deploy-pop 320ms ease;
}

@keyframes qs-deploy-pop {
  0%   { transform: scale(.98); }
  55%  { transform: scale(1.012); }
  100% { transform: scale(1); }
}

/* ===== The Undo toast ======================================================= */
/* Builds on the shared .az-toast chrome (21-feedback.css); it only adds the
   action button and its hover. */

.az-undo-toast { flex-wrap: wrap; }

.az-undo-btn {
  margin-left: auto;
  padding: .35rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(245, 158, 11, .5);
  background: rgba(245, 158, 11, .12);
  color: var(--yellow);
  font-weight: 700;
  font-size: .7813rem;
  cursor: pointer;
  transition: background 120ms ease;
}

.az-undo-btn:hover { background: rgba(245, 158, 11, .22); }

/* ===== Small screens ======================================================== */

@media (max-width: 720px) {
  .hl-pill-sub { display: none; }
  .qs-grid { grid-template-columns: 1fr; }
}