/* Alerts and inline notices. */
.alert{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm);
  font-size:var(--fs-sm);
  margin-bottom:var(--sp-4);
}
.alert .icon{flex:none;}
/* Something needs attention: the processing amber at 8% (4.75:1). */
.alert--warning{background:var(--status-processing-tint);color:var(--status-processing);}
/* Plain information is neutral grey, not teal: teal is the second chart series
 * only. Text 11.01:1 on --bg-alt; the icon 4.67:1. */
.alert--info{background:var(--bg-alt);color:var(--text-color);}
.alert--info .icon{color:var(--text-secondary);}

/* An alert that links to what it's warning about (e.g. a pending row) —
 * text-decoration is off by default so it doesn't read as a stray link. */
a.alert--link{text-decoration:none;font-weight:600;transition:filter var(--transition);}
a.alert--link:hover,a.alert--link:focus-visible{filter:brightness(.92);}

/* The empty-panel shape every "nothing here" screen shares — a section with no
 * content yet, a failed request (error.html), or a dashboard with no data
 * imported yet. Loaded globally by base.html, so a page that extends the shell
 * never has to link it by hand; error.html links it directly since it is
 * standalone. Its paragraph is --text-secondary (5.80:1); the icon stays muted
 * because the heading beside it says the same thing. */
.placeholder-panel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:var(--sp-8) var(--sp-5);
  background:var(--bg-card);
  border:1px dashed var(--border-color-strong);
  border-radius:var(--radius);
  color:var(--text-secondary);
}
.placeholder-panel .icon-lg{
  width:var(--size-xl);height:var(--size-xl);border-radius:var(--radius);background:var(--bg-alt);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4);color:var(--text-muted);
}
.placeholder-panel .icon-lg svg{width:var(--icon-lg);height:var(--icon-lg);}
.placeholder-panel h2{color:var(--text-secondary);font-size:var(--fs-md);margin-bottom:var(--sp-1-5);}
.placeholder-panel p{font-size:var(--fs-sm);max-width:var(--measure-narrow);line-height:1.5;margin-bottom:var(--sp-2);overflow-wrap:anywhere;}
.placeholder-panel .btn{margin-top:var(--sp-4);min-height:var(--size-lg);}

@media (max-width:560px){
  .placeholder-panel{padding:var(--sp-7) var(--sp-4);}
}