/* The notification centre (lean-rollout ticket 236), in design A's own language.
   Every value is a token from finance_app/static/tokens.css; nothing here is a hex, a pixel
   (bar the hairline the rest of the app uses) or a duration.

   The composition: the three counts lead, the danger one first and in the danger look, so the
   eye lands on what has to be fixed now; under them the switch between every company and the
   company in view, and the way to the alert history; then the items, grouped by severity and
   by company, each a quiet card whose start edge carries its severity. Colour is never the
   only carrier: every group and every count says its severity in words. */

/* --- the two ways in: the sidebar bell and the top bar ------------------------------- */
#notify-count[data-tone=warning]:not(:empty){background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text)}
.notify-top{display:inline-flex;align-items:center;gap:var(--space-6);padding-inline:var(--space-12)}
.notify-top-count:empty{display:none}
.notify-top-count{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--space-20);block-size:var(--space-20);padding-inline:var(--space-6);border-radius:var(--radius-pill);background:var(--color-badge-failed-bg);color:var(--color-badge-failed-text);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:var(--leading-none)}
.notify-top-count[data-tone=warning]{background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text)}
.notify-top[aria-current=page]{border-color:var(--color-action-primary);color:var(--color-action-primary)}
body:has(#workspace[hidden]) .notify-top{display:none}
@media (max-width:700px){
  .notify-top{inline-size:var(--size-44);padding-inline:0;justify-content:center;position:relative}
  .notify-top-count{position:absolute;inset-block-start:calc(var(--space-6) * -1);inset-inline-end:calc(var(--space-6) * -1)}
}

/* --- heading and freshness ----------------------------------------------------------- */
.nt-heading>div{min-inline-size:0}
.nt-freshness{display:inline-flex;align-items:flex-start;gap:var(--space-8);margin:0;font-size:var(--text-xs);color:var(--color-text-secondary)}
.nt-freshness .status-dot{margin-block-start:var(--space-6)}
#notifications-panel[data-notifications-state=ready] .nt-freshness .status-dot{background:var(--color-feedback-success-text)}
#notifications-panel[data-notifications-state=stale] .nt-freshness,
#notifications-panel[data-notifications-state=error] .nt-freshness{color:var(--color-feedback-error-text)}
#notifications-panel[data-notifications-state=stale] .nt-freshness .status-dot,
#notifications-panel[data-notifications-state=error] .nt-freshness .status-dot{background:var(--color-feedback-error-text)}
.nt-error{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12);margin:0 0 var(--space-20);padding:var(--space-12) var(--space-16);border:1px solid var(--color-border-danger);border-radius:var(--radius-card);background:var(--color-feedback-error-bg)}
.nt-error p{margin:0;color:var(--color-feedback-error-text);flex:1 1 0;min-inline-size:0}

/* --- the counts, the switch, the history --------------------------------------------- */
.nt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16);margin:0 0 var(--space-24)}
.nt-counts{display:flex;flex-wrap:wrap;gap:var(--space-12);list-style:none;margin:0;padding:0;flex:1 1 auto;min-inline-size:0}
.nt-count{display:flex;align-items:baseline;gap:var(--space-8);padding:var(--space-10) var(--space-16);border:1px solid var(--color-border-default);border-radius:var(--radius-card);background:var(--color-surface-card);color:var(--color-text-secondary);font-size:var(--text-sm)}
.nt-count strong{font-size:var(--text-xl);font-weight:var(--weight-bold);line-height:var(--leading-none);color:var(--color-text-primary)}
.nt-count[data-severity=danger]{border-color:var(--color-border-danger);background:var(--color-feedback-error-bg);color:var(--color-feedback-error-text)}
.nt-count[data-severity=danger] strong{font-size:var(--text-display-sm);color:var(--color-feedback-error-text)}
.nt-count[data-severity=warning]{border-color:var(--color-border-lead);background:var(--color-feedback-hold-bg);color:var(--color-feedback-hold-text)}
.nt-count[data-severity=warning] strong{color:var(--color-feedback-hold-text)}
.nt-count[data-empty=true]{border-color:var(--color-border-default);background:var(--color-surface-card);color:var(--color-text-secondary)}
.nt-count[data-empty=true] strong{font-size:var(--text-xl);color:var(--color-text-primary)}
.nt-filter{display:inline-flex;border:1px solid var(--color-border-default);border-radius:var(--radius-control);overflow:hidden}
.nt-filter-option{min-block-size:var(--size-44);border:0;border-radius:0;background:var(--color-surface-card);color:var(--color-text-secondary);font-weight:var(--weight-medium)}
.nt-filter-option+.nt-filter-option{border-inline-start:1px solid var(--color-border-default)}
.nt-filter-option:hover{background:var(--color-action-ghost-hover);color:var(--color-text-primary)}
.nt-filter-option[aria-pressed=true]{background:var(--color-surface-selected);color:var(--color-action-primary);font-weight:var(--weight-semibold)}

/* --- nothing to fix -------------------------------------------------------------------- */
.nt-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);margin:0 0 var(--space-28);padding:var(--space-40) var(--space-24);border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);background:var(--color-surface-card);text-align:center}
.nt-empty .icon{inline-size:var(--size-36);block-size:var(--size-36);color:var(--color-feedback-success-text)}
.nt-empty h2{margin:0;font-size:var(--text-xl)}
.nt-empty p{margin:0}

/* --- the items ------------------------------------------------------------------------- */
.nt-list{display:flex;flex-direction:column;gap:var(--space-28)}
.nt-group-title{display:flex;align-items:center;gap:var(--space-10);margin:0 0 var(--space-12);font-size:var(--text-lg)}
.nt-group-count{display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--space-24);block-size:var(--space-24);padding-inline:var(--space-8);border-radius:var(--radius-pill);background:var(--color-surface-sunken);color:var(--color-text-secondary);font-size:var(--text-sm)}
.nt-group[data-severity=danger] .nt-group-count{background:var(--color-badge-failed-bg);color:var(--color-badge-failed-text)}
.nt-group[data-severity=warning] .nt-group-count{background:var(--color-feedback-warning-bg);color:var(--color-feedback-hold-text)}
.nt-company+.nt-company{margin-block-start:var(--space-16)}
.nt-company-name{margin:0 0 var(--space-8);font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.nt-items{display:flex;flex-direction:column;gap:var(--space-12);list-style:none;margin:0;padding:0}
.nt-item{display:flex;flex-direction:column;gap:var(--space-10);padding:var(--space-16) var(--space-20);border:1px solid var(--color-border-default);border-inline-start:var(--space-4) solid var(--color-border-strong);border-radius:var(--radius-card);background:var(--color-surface-card);min-inline-size:0}
.nt-item[data-severity=danger]{border-inline-start-color:var(--color-action-destructive)}
.nt-item[data-severity=warning]{border-inline-start-color:var(--color-feedback-hold-text)}
.nt-item-head{display:flex;align-items:flex-start;gap:var(--space-10);min-inline-size:0}
.nt-title{margin:0;font-size:var(--text-md);color:var(--color-text-primary);overflow-wrap:anywhere}
.nt-facts{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-20);margin:0;font-size:var(--text-sm)}
.nt-fact{display:flex;gap:var(--space-6);min-inline-size:0}
.nt-fact dt{color:var(--color-text-caption)}
.nt-fact dd{margin:0;color:var(--color-text-primary);overflow-wrap:anywhere;min-inline-size:0}
.nt-fix{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-10);padding-block-start:var(--space-10);border-block-start:1px solid var(--color-border-subtle)}
.nt-steps{margin:0;padding-inline-start:var(--space-20);color:var(--color-text-primary);font-size:var(--text-sm)}
.nt-steps li+li{margin-block-start:var(--space-4)}
.nt-caution{color:var(--color-feedback-error-text);font-weight:var(--weight-semibold)}
.nt-who{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary)}
.nt-commands{display:flex;flex-direction:column;gap:var(--space-8);inline-size:100%;list-style:none;margin:0;padding:0}
.nt-command{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-10);padding:var(--space-8) var(--space-10);border:1px solid var(--color-border-subtle);border-radius:var(--radius-control);background:var(--color-surface-sunken)}
.nt-command code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-primary);overflow-wrap:anywhere;min-inline-size:0}
.nt-command-kind{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-secondary);white-space:nowrap}
.nt-command[data-kind=restart] .nt-command-kind{color:var(--color-feedback-hold-text)}
.nt-copy{min-block-size:var(--size-36);padding-block:var(--space-4);font-size:var(--text-sm)}
.nt-go{min-block-size:var(--size-44)}

@media (max-width:700px){
  .nt-tools{align-items:stretch}
  .nt-counts{flex:1 1 100%}
  .nt-count{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-10) var(--space-12)}
  .nt-filter{flex:1 1 100%}
  .nt-filter-option{flex:1 1 0;white-space:normal}
  .nt-history{flex:1 1 100%}
  .nt-item{padding:var(--space-12) var(--space-14)}
  .nt-command{grid-template-columns:minmax(0,1fr) auto}
  .nt-command-kind{grid-column:1/-1}
  .nt-go{inline-size:100%}
}

/* ===== TICKET 269 begin: the centre as the owner's mockup (19 ต.ค. 2569) ===================================
   The heading and "ตรวจล่าสุด" as a tag on its right; one lead card ("ไม่มีเหตุขัดข้องเร่งด่วน", or how many urgent
   problems there are, and the count of each kind under it in words); the switch and the history in one quiet row;
   then one card per kind, its head the kind and "{n} เรื่อง", and a row per item with "ไปแก้" on the right. Every
   value is a token; the cards are the mockup's panel. */
.nt-freshness{align-items:center;padding:var(--space-4) var(--space-8);background:var(--color-surface-sunken);border-radius:var(--radius-control);
  font-weight:var(--weight-medium)}
.nt-freshness .status-dot{margin-block-start:0}
.nt-lead,.nt-empty{display:grid;gap:var(--space-12);margin:0 0 var(--space-20);padding:var(--space-20);background:var(--color-surface-card);
  border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm);text-align:start}
.nt-lead h2,.nt-empty h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.nt-empty{justify-items:start}
.nt-empty .icon{inline-size:var(--size-28);block-size:var(--size-28)}
.nt-empty p{color:var(--color-text-secondary)}
.nt-lead .nt-counts{flex:none;gap:var(--space-4) var(--space-16)}
.nt-lead .nt-count,.nt-lead .nt-count[data-severity],.nt-lead .nt-count[data-empty=true]{flex:none;flex-direction:row;align-items:baseline;gap:var(--space-6);padding:0;
  border:0;background:transparent;color:var(--color-text-secondary)}
.nt-lead .nt-count strong,.nt-lead .nt-count[data-severity] strong,.nt-lead .nt-count[data-empty=true] strong{font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text-primary)}
.nt-lead .nt-count[data-severity=danger][data-empty=false],.nt-lead .nt-count[data-severity=danger][data-empty=false] strong{color:var(--color-feedback-error-text)}
.nt-tools{justify-content:flex-end;gap:var(--space-12);margin:0 0 var(--space-20)}
.nt-tools .nt-filter-option{min-block-size:var(--size-40);font-size:var(--text-sm)}
.nt-history{min-block-size:var(--size-40);color:var(--color-text-link);font-size:var(--text-sm)}
.nt-list{gap:var(--space-20)}
.nt-group{background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-card-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.nt-group-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-12);padding:var(--space-16) var(--space-20);
  border-bottom:1px solid var(--color-border-default)}
.nt-group-title{margin:0;font-size:var(--text-lg)}
.nt-group-count{min-inline-size:0;block-size:auto;padding:var(--space-4) var(--space-8);border-radius:var(--radius-control);font-size:var(--text-xs);font-weight:var(--weight-medium)}
.nt-company+.nt-company{margin-block-start:0;border-top:1px solid var(--color-border-default)}
.nt-company-name{margin:0;padding:var(--space-12) var(--space-20) 0;font-size:var(--text-xs)}
.nt-items{gap:0}
.nt-item{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-12) var(--space-16);padding:var(--space-16) var(--space-20);
  border:0;border-top:1px solid var(--color-border-subtle);border-radius:0;background:transparent}
.nt-items>.nt-item:first-child{border-top:0}
.nt-item[data-severity=danger],.nt-item[data-severity=warning]{border-inline-start:0;box-shadow:none}
.nt-item-main{display:flex;flex-direction:column;gap:var(--space-6);flex:1 1 calc(var(--space-64)*6);min-inline-size:0}
.nt-title{font-size:var(--text-base);font-weight:var(--weight-semibold)}
.nt-facts{gap:var(--space-2) var(--space-12);font-size:var(--text-xs)}
.nt-fact dt,.nt-fact dd{color:var(--color-text-secondary)}
.nt-fix{gap:var(--space-8);padding-block-start:0;border:0}
.nt-steps{font-size:var(--text-xs);color:var(--color-text-secondary)}
.nt-who{font-size:var(--text-xs)}
.nt-item-action{flex:0 0 auto}
.nt-go{min-block-size:var(--size-40)}
@media (max-width:700px){
  .nt-tools{justify-content:stretch}
  .nt-lead,.nt-empty{padding:var(--space-16)}
  .nt-group-head{padding:var(--space-14) var(--space-16)}
  .nt-company-name{padding-inline:var(--space-16)}
  .nt-item{padding:var(--space-14) var(--space-16)}
  .nt-item-action{inline-size:100%}
}
/* ===== TICKET 269 end ===== */