/*
  Carbon shared component layer.
  Loaded after app CSS so shared UI primitives stay consistent while app CSS
  keeps ownership of app-specific layout and data presentation.
*/

:root {
  --carbon-control-size: 52px;
  --carbon-control-icon: 24px;
  --carbon-control-compact: 42px;
  --carbon-field-bg: rgba(0, 0, 0, .04);
  --carbon-field-bg-focus: rgba(0, 0, 0, .06);
  --carbon-card-border: rgba(0, 0, 0, .08);
  --carbon-card-shadow: 0 14px 36px rgba(30, 38, 64, .08);
  --carbon-card-shadow-hover: 0 18px 42px rgba(30, 38, 64, .10);
  --carbon-modal-shadow: 0 30px 90px rgba(30, 38, 64, .18);
  --carbon-scrim: rgba(246, 248, 252, .78);
}

:where(
  h1,
  h2,
  h3,
  h4,
  table,
  table td,
  table th,
  .carbon-heading,
  .carbon-modal-title,
  .carbon-card-title,
  .modal-head,
  .app-title,
  .brand-title,
  .toolbar-title,
  .toolbar .label,
  .tool-label,
  .dashboard-card-title,
  .card-title,
  .card-subtitle,
  .metric-value,
  .metric-number,
  .big,
  .amount,
  .money,
  .carbon-donut-center,
  .donut-center .big,
  .donut span,
  .reports-donut-label,
  .upload-agg-pct,
  .upload-agg-unit,
  .upload-agg-state
) {
  font-family: var(--font-title, var(--font-ui, system-ui, sans-serif));
  letter-spacing: -.025em;
  text-transform: none;
}

:where(table, table td) {
  font-weight: 400;
}

:where(table th) {
  font-family: var(--font-title, var(--font-ui, system-ui, sans-serif));
  font-weight: 400;
  letter-spacing: -.025em;
  text-transform: none !important;
}

:where(
  h1,
  .carbon-heading,
  .carbon-modal-title,
  .app-title,
  .brand-title,
  .metric-value,
  .metric-number,
  .big,
  .amount,
  .money,
  .carbon-donut-center,
  .donut-center .big,
  .donut span,
  .upload-agg-pct
) {
  font-weight: 380;
}

:where(
  h2,
  h3,
  h4,
  table th,
  .carbon-card-title,
  .modal-head,
  .toolbar-title,
  .toolbar .label,
  .tool-label,
  .dashboard-card-title,
  .card-title,
  .card-subtitle,
  .reports-donut-label,
  .upload-agg-state
) {
  font-weight: 430;
}

/* Buttons */
:where(.carbon-button, .btn, .pill-btn, .primary-btn, .ghost-btn) {
  border-radius: 999px;
  font-family: var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0;
}

:where(.carbon-button, .pill-btn, .primary-btn, .ghost-btn, .modal footer .btn, .modal-actions .pill-btn, .modal-actions .primary-btn, .modal-actions .ghost-btn) svg {
  display: none;
}

:where(.primary-btn, .btn.brand, .carbon-button.is-primary) {
  background: var(--brand1, #2253f4);
  border-color: var(--brand1, #2253f4);
  color: #fff;
}

:where(.btn.danger, .primary-btn.danger, .pill-btn.danger, .carbon-button.is-danger) {
  background: var(--bad, #ff5c7a);
  border-color: var(--bad, #ff5c7a);
  color: #fff;
}

/* Icon buttons */
:where(.carbon-icon-button, .icon-btn, .statement-icon-btn, .client-card-action) {
  align-items: center;
  border-radius: 999px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

:where(.carbon-icon-button, .statement-icon-btn, .client-card-action) {
  min-height: var(--carbon-control-size);
  min-width: var(--carbon-control-size);
}

:where(.carbon-icon-button, .statement-icon-btn, .client-card-action) svg {
  display: block;
  height: var(--carbon-control-icon);
  width: var(--carbon-control-icon);
}

:where(.icon-btn:hover, .carbon-icon-button:hover, .statement-icon-btn:hover, .client-card-action:hover) {
  transform: translateY(-1px);
}

:where(.icon-btn:active, .carbon-icon-button:active, .statement-icon-btn:active, .client-card-action:active) {
  transform: translateY(0);
}

/* Toolbar icon buttons are allowed to remain toolbar-specific, but share scale. */
:where(.toolbar .icon-btn) {
  min-height: 52px;
  min-width: 52px;
}

:where(.toolbar .icon-btn .icon svg) {
  height: 24px;
  width: 24px;
}

/* Destructive icon buttons: pink tint at rest, solid pink on hover. */
:where(
  .carbon-icon-button.is-danger,
  .client-card-action--delete,
  .icon-btn.delete-action,
  .row-actions .icon-btn[data-action="delete"],
  .task-chip .chip-actions .icon-btn[data-act="remove"],
  button[id^="colDel-"].icon-btn,
  #wsDeleteBtn.icon-btn,
  .statement-icon-btn[data-delete-record],
  .statement-icon-btn[data-delete-transaction],
  .statement-icon-btn[data-delete-invoice],
  .statement-icon-btn[data-delete-estimate],
  .statement-icon-btn[data-dismiss-invoice-suggestion],
  .attch-del,
  .attch-del .icon-btn
) {
  background: var(--bad-tint, #ffe4eb) !important;
  border-color: transparent !important;
  color: var(--bad, #ff5c7a) !important;
  box-shadow: none;
}

:where(
  .carbon-icon-button.is-danger,
  .client-card-action--delete,
  .icon-btn.delete-action,
  .row-actions .icon-btn[data-action="delete"],
  .task-chip .chip-actions .icon-btn[data-act="remove"],
  button[id^="colDel-"].icon-btn,
  #wsDeleteBtn.icon-btn,
  .statement-icon-btn[data-delete-record],
  .statement-icon-btn[data-delete-transaction],
  .statement-icon-btn[data-delete-invoice],
  .statement-icon-btn[data-delete-estimate],
  .statement-icon-btn[data-dismiss-invoice-suggestion],
  .attch-del,
  .attch-del .icon-btn
) :where(svg, svg path, .icon, .icon svg, .icon svg path) {
  fill: currentColor !important;
  stroke: currentColor !important;
}

:where(
  .carbon-icon-button.is-danger:hover,
  .carbon-icon-button.is-danger:focus-visible,
  .client-card-action--delete:hover,
  .client-card-action--delete:focus-visible,
  .icon-btn.delete-action:hover,
  .icon-btn.delete-action:focus-visible,
  .row-actions .icon-btn[data-action="delete"]:hover,
  .row-actions .icon-btn[data-action="delete"]:focus-visible,
  .task-chip .chip-actions .icon-btn[data-act="remove"]:hover,
  .task-chip .chip-actions .icon-btn[data-act="remove"]:focus-visible,
  button[id^="colDel-"].icon-btn:hover,
  button[id^="colDel-"].icon-btn:focus-visible,
  #wsDeleteBtn.icon-btn:hover,
  #wsDeleteBtn.icon-btn:focus-visible,
  .statement-icon-btn[data-delete-record]:hover,
  .statement-icon-btn[data-delete-record]:focus-visible,
  .statement-icon-btn[data-delete-transaction]:hover,
  .statement-icon-btn[data-delete-transaction]:focus-visible,
  .statement-icon-btn[data-delete-invoice]:hover,
  .statement-icon-btn[data-delete-invoice]:focus-visible,
  .statement-icon-btn[data-delete-estimate]:hover,
  .statement-icon-btn[data-delete-estimate]:focus-visible,
  .statement-icon-btn[data-dismiss-invoice-suggestion]:hover,
  .statement-icon-btn[data-dismiss-invoice-suggestion]:focus-visible,
  .attch-del:hover,
  .attch-del:focus-visible,
  .attch-del .icon-btn:hover,
  .attch-del .icon-btn:focus-visible
) {
  background: var(--bad, #ff5c7a) !important;
  color: #fff !important;
  filter: none !important;
}

/* Ldgr statement actions share one circular control language. */
:where(.statement-actions .statement-icon-btn, .statement-post-cell .statement-icon-btn, .statement-post-cell .statement-icon-static) {
  background: var(--soft, #f4f5f3) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--muted, #6e6f75) !important;
  height: 52px !important;
  min-height: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
  width: 52px !important;
}

:where(.statement-actions .statement-icon-btn svg, .statement-post-cell .statement-icon-btn svg, .statement-post-cell .statement-icon-static svg) {
  height: 24px !important;
  width: 24px !important;
}

:where(.statement-actions .statement-icon-btn:hover, .statement-actions .statement-icon-btn:focus-visible, .statement-post-cell .statement-icon-btn:hover, .statement-post-cell .statement-icon-btn:focus-visible) {
  background: var(--brand1, #2253f4) !important;
  color: #fff !important;
}

:where(.statement-actions .statement-icon-btn:hover svg path, .statement-actions .statement-icon-btn:focus-visible svg path, .statement-post-cell .statement-icon-btn:hover svg path, .statement-post-cell .statement-icon-btn:focus-visible svg path) {
  fill: currentColor !important;
  stroke: currentColor !important;
}

:where(.statement-actions .statement-icon-btn[data-delete-record], .statement-actions .statement-icon-btn[data-delete-transaction], .statement-actions .statement-icon-btn[data-delete-invoice], .statement-actions .statement-icon-btn[data-delete-estimate], .statement-actions .statement-icon-btn[data-dismiss-invoice-suggestion]) {
  background: var(--bad-tint, #ffe4eb) !important;
  color: var(--bad, #ff5c7a) !important;
}

:where(.statement-actions .statement-icon-btn[data-delete-record]:hover, .statement-actions .statement-icon-btn[data-delete-record]:focus-visible, .statement-actions .statement-icon-btn[data-delete-transaction]:hover, .statement-actions .statement-icon-btn[data-delete-transaction]:focus-visible, .statement-actions .statement-icon-btn[data-delete-invoice]:hover, .statement-actions .statement-icon-btn[data-delete-invoice]:focus-visible, .statement-actions .statement-icon-btn[data-delete-estimate]:hover, .statement-actions .statement-icon-btn[data-delete-estimate]:focus-visible, .statement-actions .statement-icon-btn[data-dismiss-invoice-suggestion]:hover, .statement-actions .statement-icon-btn[data-dismiss-invoice-suggestion]:focus-visible) {
  background: var(--bad, #ff5c7a) !important;
  color: #fff !important;
}

/* Taskr workspace delete is a toolbar tile, not a standalone destructive action. */
:where(.toolbar #wsDeleteBtn.icon-btn) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #f3f5f2 !important;
  min-height: 60px;
  min-width: 60px;
  padding: 6px 4px;
}

:where(.toolbar #wsDeleteBtn.icon-btn:hover, .toolbar #wsDeleteBtn.icon-btn:focus-visible) {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

:where(.toolbar #wsDeleteBtn.icon-btn .icon, .toolbar #wsDeleteBtn.icon-btn .label, .toolbar #wsDeleteBtn.icon-btn svg, .toolbar #wsDeleteBtn.icon-btn svg path) {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Modals and popovers */
:where(.modal, .carbon-modal-backdrop) {
  background: var(--carbon-scrim) !important;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

:where(.modal.show, .modal[aria-hidden="false"], .carbon-modal-backdrop.is-open) {
  display: flex;
}

:where(.modal .scrim) {
  cursor: default;
}

:where(.modal .scrim[data-close]) {
  cursor: pointer;
}

:where(.modal .card, .carbon-modal-card, .invoice-modal-card, .settings-card, .app-message-card, .carbon-auth-card) {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e1e4ea);
  border-radius: var(--radius-modal, 28px);
  box-shadow: var(--carbon-modal-shadow);
  color: var(--ink, #1f232c);
}

:where(.modal header, .modal-head, .app-message-card .modal-head.compact) {
  color: var(--brand1, #2253f4);
  font-family: var(--font-title, var(--font-ui, system-ui, sans-serif));
  font-weight: 380;
  letter-spacing: -.025em;
}

:where(.modal footer, .modal-actions, .form-actions, .app-message-card .modal-actions) {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

:where(.field label, .form-group label, .modal-entry-form label, .settings-grid label, .item-form-grid label) {
  color: #555;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

:where(.field input, .field select, .field textarea, .modal-entry-form input, .modal-entry-form select, .modal-entry-form textarea, .settings-grid input, .settings-grid select, .settings-grid textarea, .item-form-grid input, .item-form-grid select, .item-form-grid textarea) {
  background: var(--carbon-field-bg);
  border-color: transparent;
  color: var(--ink, #1f232c);
  font-family: var(--font-ui, system-ui, sans-serif);
}

:where(.field input, .field select, .field textarea, .modal-entry-form input, .modal-entry-form select, .modal-entry-form textarea, .settings-grid input, .settings-grid select, .settings-grid textarea, .item-form-grid input, .item-form-grid select, .item-form-grid textarea):focus {
  background: var(--carbon-field-bg-focus);
  outline: none;
}

/* Login gates */
:where(.foundry-gate-overlay, .carbon-auth-backdrop, .login-shell) {
  background: rgba(246, 248, 252, .82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

:where(.foundry-gate-card, .foundry-gate-modal .card, .card.card--gate, .login-card, .carbon-auth-card) {
  background: var(--panel, #fff);
  border: 1px solid var(--line, #e1e4ea);
  border-radius: 28px;
  box-shadow: 0 20px 58px rgba(30, 38, 64, .13);
  color: var(--ink, #1f232c);
  padding: 32px;
  width: min(560px, calc(100vw - 40px));
}

:where(.projctr-login-card) {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ink, #1f232c);
}

:where(.foundry-gate-title, .foundry-gate-modal header, .card.card--gate header, .login-card h1, .carbon-auth-card h2, .projctr-login-card header) {
  color: var(--brand1, #2253f4);
  font-family: var(--font-title, var(--font-ui, system-ui, sans-serif));
  font-size: 36px;
  font-weight: 430;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 18px;
}

:where(.login-brandmark, .carbon-auth-card img, .projctr-login-card .splash-brandmark, .splash-logo.splash-brandmark) {
  height: auto;
  margin: 0 0 20px;
  width: min(220px, 54vw);
}

:where(.foundry-gate-sub, .gate-kicker, .login-copy, .carbon-auth-card .eyebrow) {
  color: var(--muted, #6f7480);
  font-size: 18px;
  font-weight: 430;
  line-height: 1.45;
}

:where(.foundry-gate-form, .login-form, .carbon-auth-card, .card.card--gate section, .projctr-login-card) {
  gap: 18px;
}

:where(.foundry-gate-label, .login-form label, .carbon-auth-card label:not(.remember-row), .card.card--gate .field label, .foundry-gate-modal .field label, .projctr-login-card .field label) {
  color: #555;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

:where(.foundry-gate-input, .login-form input, .carbon-auth-card input.input, .card.card--gate input[type="password"], .card.card--gate input[type="text"], .card.card--gate input[type="email"], .foundry-gate-modal input[type="password"], .projctr-login-card input[type="password"]) {
  background: rgba(34, 83, 244, .09);
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--ink, #1f232c);
  font-size: 18px;
  height: 56px;
  outline: none;
  padding: 0 clamp(18px, 2.4vw, 24px);
  width: 100%;
}

:where(.foundry-gate-input:focus, .login-form input:focus, .carbon-auth-card input.input:focus, .card.card--gate input:focus, .foundry-gate-modal input[type="password"]:focus, .projctr-login-card input[type="password"]:focus) {
  background: rgba(34, 83, 244, .12);
  border-color: rgba(34, 83, 244, .36);
  box-shadow: none;
}

:where(.remember-row, .foundry-gate-remember, .projctr-remember, .remember-field) {
  color: #555;
  font-size: 16px;
  gap: 12px;
}

:where(.remember-row input[type="checkbox"], .foundry-gate-remember input[type="checkbox"], .projctr-remember input[type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  background: #d9dde6;
  border: 1px solid rgba(25, 31, 46, .18);
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(25, 31, 46, .16);
  cursor: pointer;
  height: 32px;
  margin: 0;
  min-height: 32px;
  min-width: 58px;
  position: relative;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  width: 58px;
}

:where(.remember-row input[type="checkbox"], .foundry-gate-remember input[type="checkbox"], .projctr-remember input[type="checkbox"])::after {
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(25, 31, 46, .18);
  content: "";
  height: 26px;
  left: 3px;
  position: absolute;
  top: 2px;
  transition: transform .16s ease;
  width: 26px;
}

:where(.remember-row input[type="checkbox"]:checked, .foundry-gate-remember input[type="checkbox"]:checked, .projctr-remember input[type="checkbox"]:checked) {
  background: var(--good, #18d62b);
  border-color: var(--good, #18d62b);
}

:where(.remember-row input[type="checkbox"]:checked, .foundry-gate-remember input[type="checkbox"]:checked, .projctr-remember input[type="checkbox"]:checked)::after {
  transform: translateX(26px);
}

:where(.foundry-gate-btn, .foundry-gate-modal .btn.brand, .projctr-login-gate .btn.brand, .card.card--gate footer .btn.brand, .login-form .primary-btn, .carbon-auth-card .primary-button) {
  background: var(--brand1, #2253f4);
  border: 1px solid var(--brand1, #2253f4);
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 430;
  height: 56px;
  min-width: min(190px, 100%);
  padding: 0 clamp(26px, 4vw, 42px);
}

:where(.card.card--gate footer .btn.ghost, .foundry-gate-modal .btn:not(.brand)) {
  background: #fff;
  border: 1px solid rgba(34, 83, 244, .28);
  border-radius: 999px;
  color: var(--brand1, #2253f4);
  height: clamp(48px, 6.5vw, 64px);
  padding: 0 clamp(20px, 3vw, 30px);
}

:where(.foundry-gate-error, .auth-error, .login-message, #projctrLoginError) {
  color: var(--bad, #ff5c7a);
  font-size: clamp(14px, 1.7vw, 18px);
  min-height: 1.4em;
}

/* Toggles */
:where(.switch, .carbon-toggle-track) {
  --toggle-width: 58px;
  --toggle-height: 32px;
}

:where(.card.card--gate .switch, .remember-field .switch) {
  --toggle-width: 58px;
  --toggle-height: 32px;
  flex: 0 0 58px;
}

:where(.switch) {
  display: inline-block;
  height: var(--toggle-height);
  position: relative;
  width: var(--toggle-width);
}

:where(.switch input) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

:where(.switch .slider, .carbon-toggle-track) {
  background: #d9dde6;
  border: 0;
  border-radius: 999px;
  inset: 0;
  position: absolute;
  transition: background .16s ease;
}

:where(.switch .slider)::after,
:where(.carbon-toggle-track)::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(25, 31, 46, .16);
  content: "";
  height: 26px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform .16s ease;
  width: 26px;
}

:where(.switch input:checked + .slider, .carbon-toggle input:checked + .carbon-toggle-track) {
  background: var(--good, #18d62b);
}

:where(.switch input:checked + .slider)::after,
:where(.carbon-toggle input:checked + .carbon-toggle-track)::after {
  transform: translateX(26px);
}

:where(.card.card--gate .switch .slider, .remember-field .switch .slider)::after {
  height: 26px;
  left: 3px;
  top: 2px;
  width: 26px;
}

:where(.card.card--gate .switch input:checked + .slider, .remember-field .switch input:checked + .slider)::after {
  transform: translateX(26px);
}

@media (max-width: 520px) {
  :where(.foundry-gate-card, .foundry-gate-modal .card, .card.card--gate, .login-card, .carbon-auth-card) {
    border-radius: 28px;
  }

  :where(.foundry-gate-title, .foundry-gate-modal header, .card.card--gate header, .login-card h1, .carbon-auth-card h2, .projctr-login-card header) {
    font-size: 32px;
  }

  :where(.foundry-gate-sub, .gate-kicker, .login-copy, .carbon-auth-card .eyebrow) {
    font-size: 16px;
  }

  :where(.foundry-gate-label, .login-form label, .carbon-auth-card label:not(.remember-row), .card.card--gate .field label, .foundry-gate-modal .field label, .projctr-login-card .field label, .remember-row, .foundry-gate-remember, .projctr-remember, .remember-field) {
    font-size: 15px;
  }

  :where(.foundry-gate-input, .login-form input, .carbon-auth-card input.input, .card.card--gate input[type="password"], .card.card--gate input[type="text"], .card.card--gate input[type="email"], .foundry-gate-modal input[type="password"], .projctr-login-card input[type="password"]) {
    font-size: 17px;
    height: 52px;
  }

  :where(.foundry-gate-btn, .foundry-gate-modal .btn.brand, .projctr-login-gate .btn.brand, .card.card--gate footer .btn.brand, .login-form .primary-btn, .carbon-auth-card .primary-button) {
    font-size: 17px;
    height: 52px;
  }
}

/* Toasts */
:where(#toast, .toast, .carbon-toast-stack) {
  bottom: 22px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 12000;
}

:where(#toast, .toast) {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(34, 83, 244, .18);
  border-radius: 18px;
  box-shadow: var(--shadow-soft, 0 18px 50px rgba(30, 38, 64, .10));
  color: var(--ink, #1f232c);
  display: flex;
  gap: 14px;
  height: auto;
  max-height: min(180px, calc(100vh - 48px));
  min-height: 64px;
  opacity: 0;
  padding: 14px 18px;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

:where(#toast.show, .toast.show, .toast.is-visible) {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

:where(.toast-icon, .carbon-toast-icon) {
  align-items: center;
  background: rgba(34, 83, 244, .10);
  border-radius: 14px;
  color: var(--brand1, #2253f4);
  display: inline-flex;
  flex: 0 0 auto;
  height: 42px;
  justify-content: center;
  width: 42px;
}

:where(.toast-icon svg, .carbon-toast-icon svg) {
  fill: currentColor;
  height: 22px;
  width: 22px;
}

:where(.toast-text, .carbon-toast-text) {
  color: var(--ink, #1f232c);
  font: 720 16px/1.35 var(--font-ui, system-ui, sans-serif);
  letter-spacing: 0;
}

:where(#toast[data-kind="error"], #toast[data-kind="bad"], .toast[data-kind="error"], .toast[data-kind="bad"]) {
  border-color: rgba(255, 92, 122, .30);
}

:where(#toast[data-kind="error"] .toast-icon, #toast[data-kind="bad"] .toast-icon, .toast[data-kind="error"] .toast-icon, .toast[data-kind="bad"] .toast-icon) {
  background: var(--bad-tint, #ffe4eb);
  color: var(--bad, #ff5c7a);
}

:where(#toast[data-kind="warn"] .toast-icon, .toast[data-kind="warn"] .toast-icon) {
  background: var(--warn-tint, #fff4d8);
  color: var(--warn, #ffb020);
}

/* Cards */
:where(.dashboard-card, .mini-donut-card, .client-card, .user-card, [data-dashboard-card], .settings-card-group, .reports-panel) {
  border: 1px solid var(--carbon-card-border);
  border-radius: var(--radius-card, 18px);
  box-shadow: var(--carbon-card-shadow);
}

:where(.dashboard-card:hover, .mini-donut-card:hover, .client-card:hover, .user-card:hover) {
  box-shadow: var(--carbon-card-shadow-hover);
}

/* Donuts */
:where(.carbon-donut, .donut.is-carbon-donut .carbon-donut, .donut-shell.is-carbon-donut .carbon-donut, .statement-flow-donut.is-carbon-donut .carbon-donut, .spend-mix-donut.is-carbon-donut .carbon-donut) {
  display: block;
  height: auto;
  max-width: 100%;
  overflow: visible;
}

:where(.carbon-donut-center, .donut-center .big) {
  font-family: var(--font-title, var(--font-ui, system-ui, sans-serif));
  font-weight: 380;
  letter-spacing: -.025em;
}

:where(.donut-layout, .carbon-donut-layout) {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr);
}

:where(.donut-legend, .carbon-donut-legend) {
  color: var(--ink, #1f232c);
  font-family: var(--font-ui, system-ui, sans-serif);
  font-weight: 520;
}

@media (max-width: 680px) {
  :where(.donut-layout, .carbon-donut-layout) {
    grid-template-columns: 1fr;
  }
}