/* #/alerts «التنبيهات» (js/pages/alerts.js): the inbox (main column) + on / off per place (the dashboard's column),
   and the switch row (.tg-row) that the account page uses too. Tokens only (css/tokens.css). */

/* ---------- Layout ---------- */
.al-layout { display: flex; gap: 20px; align-items: flex-start; }
.al-main { flex: 2.2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.al-aside { flex: 1 1 340px; min-width: 0; max-width: 480px; }
.al-side { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1099px) {
  .al-layout { flex-direction: column; align-items: stretch; }
  .al-aside { max-width: none; }
}
.al-list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 700px) { .al-chips .fchip { height: 44px; } }
.al-more { align-self: center; }

/* ---------- One alert ---------- */
.al-card { gap: 12px; position: relative; }
.al-card.unseen { background: var(--card); }
.al-card.unseen::before {
  content: ''; position: absolute; top: 22px; inset-inline-start: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
}
.al-head { display: flex; align-items: center; gap: 12px; }
.al-ic {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--card-2); color: var(--text);
}
.al-ic .ph { font-size: 18px; }
.al-ic.bad { background: var(--bad); color: var(--ink); }
.al-ic.ac { background: var(--ac); color: var(--ink); }
.al-ic.white { background: var(--white); color: var(--ink); }
.al-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-kind { font-size: var(--fs-body); font-weight: 500; }
.al-meta { font-size: var(--fs-small); color: var(--muted-2); }
.al-meta a { color: var(--muted); text-decoration: none; }
.al-meta a:hover { color: var(--ac); }
.al-line { font-size: var(--fs-ui); color: var(--soft); }
.al-spike { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-inner); background: var(--card-2); }
.al-spike .num { color: var(--bad); }
.al-spike-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.al-spike-main { font-size: var(--fs-body); }
.al-monthly { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-inner); background: var(--card-2); }
.al-monthly-h { font-size: var(--fs-body); }
.al-summary { font-size: var(--fs-ui); line-height: 1.7; color: var(--soft); white-space: pre-line; }
.al-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.al-actions .al-seen { margin-inline-start: auto; }

/* ---------- On / off per place ---------- */
.al-watch, .al-push { gap: 14px; }
.al-count { font-family: var(--font-num); font-size: var(--fs-meta); color: var(--muted); padding: 4px 10px; border-radius: var(--r-pill); background: var(--card-2); }
.al-kinds { font-size: var(--fs-small); color: var(--muted-2); line-height: 1.7; }

/* ---------- Switch row (also js/pages/account.js): the whole row is the button ---------- */
.tg-list { display: flex; flex-direction: column; gap: 6px; }
.tg-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: none;
  border-radius: var(--r-tile-sm); background: var(--card-2); color: var(--text); text-align: start;
  transition: background var(--t-fast), opacity var(--t-fast);
}
.tg-row:hover:not(:disabled) { background: var(--raised); }
.tg-row:disabled { opacity: .45; }
.tg-row.busy { opacity: .7; cursor: progress; }
.tg-ic {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--card); color: var(--ac);
}
.tg-ic .ph { font-size: 18px; }
.tg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tg-title { font-size: var(--fs-ui); overflow-wrap: anywhere; }
.tg-sub { font-size: var(--fs-small); color: var(--muted-2); line-height: 1.5; }
.tg-sub:empty { display: none; }
.tg-sub.bad { color: var(--bad-text); }
.tg {
  position: relative; width: 52px; height: 32px; border-radius: var(--r-pill); background: var(--dot-off); flex: none;
  transition: background var(--t-tab) var(--ease);
}
.tg-knob {
  position: absolute; top: 4px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--white);
  transition: transform var(--t-tab) var(--ease);
}
.tg-row[aria-checked="true"] .tg { background: var(--ac); }
.tg-row[aria-checked="true"] .tg-knob { transform: translateX(calc(-20px * var(--flip))); background: #000; }