/* Alerts -see docs/strategy/design-system/21-alert.md */

.alert {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  padding: var(--space-3);
  font-size: var(--font-size-caption);
  line-height: 1.45;
  color: var(--text);
  background: var(--surface);
}

.alert.success { border-color: var(--success-border); background: var(--success-bg); }
.alert.warning { border-color: var(--warning-border); background: var(--warning-bg); }
.alert.error   { border-color: var(--error-border);   background: var(--error-bg); }
.alert.info    { border-color: var(--info-border);    background: var(--info-bg); }

/* Icon + message layout -only alerts that actually carry a leading
   icon (svg or .glyph) get row layout; plain text-only alerts (no
   wrapper div, just inline strong/text) stay untouched. */
.alert:has(> svg),
.alert:has(> .glyph) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.alert > svg,
.alert > .glyph {
  flex-shrink: 0;
}

.alert:has(> svg) > div,
.alert:has(> .glyph) > div {
  flex: 1;
  min-width: 0;
}

.alert strong {
  font-weight: 700;
}

/* Offline-sync status line -bootstrap.js::statusLine sets data-level in place. */
#mboko-sync-status:empty { display: none; }
#mboko-sync-status[data-level="info"]  { border-color: var(--info-border);    background: var(--info-bg); }
#mboko-sync-status[data-level="ok"]    { border-color: var(--success-border); background: var(--success-bg); }
#mboko-sync-status[data-level="warn"]  { border-color: var(--warning-border); background: var(--warning-bg); }
#mboko-sync-status[data-level="error"] { border-color: var(--error-border);   background: var(--error-bg); }

.mboko-sync-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}