/* DearBill design-system component styles.
 * Extracted verbatim from the design bundle's _ds_bundle.js (the <style> blocks it
 * injects at runtime). Do not edit by hand — regenerate with: npm run build:css
 */
.db-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-pill); overflow: hidden; flex: none;
    background: var(--orange-100); color: var(--orange-800);
    font-family: var(--font-sans); font-weight: var(--weight-bold);
    border: 2px solid var(--surface-card); box-shadow: 0 0 0 1px var(--border);
    user-select: none;
  }
  .db-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .db-avatar--sm { width: 36px; height: 36px; font-size: 14px; }
  .db-avatar--md { width: 48px; height: 48px; font-size: 18px; }
  .db-avatar--lg { width: 64px; height: 64px; font-size: 24px; }
  .db-avatar--xl { width: 88px; height: 88px; font-size: 32px; }

.db-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans); font-weight: var(--weight-bold);
    font-size: var(--text-xs); line-height: 1; white-space: nowrap;
    padding: 6px 12px; border-radius: var(--radius-pill);
  }
  .db-badge--lg { font-size: var(--text-sm); padding: 8px 16px; }
  .db-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; opacity: .85; }
  .db-badge--paid    { background: var(--status-paid-bg);    color: var(--status-paid-fg); }
  .db-badge--due     { background: var(--status-due-bg);     color: var(--status-due-fg); }
  .db-badge--overdue { background: var(--status-overdue-bg); color: var(--status-overdue-fg); }
  .db-badge--info    { background: var(--status-info-bg);    color: var(--status-info-fg); }
  .db-badge--neutral { background: var(--linen-200);         color: var(--ink-700); }
  .db-badge--brand   { background: var(--orange-100);        color: var(--orange-800); }
  .db-badge--accent  { background: var(--teal-100);          color: var(--teal-800); }

.db-btn {
    --_bg: var(--brand-strong);
    --_fg: var(--text-on-brand);
    --_bd: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    font-family: var(--font-sans); font-weight: var(--weight-bold);
    line-height: 1; white-space: nowrap; text-decoration: none;
    border: var(--border-width-strong) solid var(--_bd);
    background: var(--_bg); color: var(--_fg);
    border-radius: var(--radius-md); cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }
  .db-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .db-btn:active:not(:disabled) { transform: translateY(1px); }
  .db-btn:disabled { opacity: .5; cursor: not-allowed; }
  .db-btn--block { width: 100%; }

  /* sizes — senior-friendly tap targets */
  .db-btn--sm { min-height: 40px; padding: 8px 16px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
  .db-btn--md { min-height: 50px; padding: 12px 24px; font-size: var(--text-base); }
  .db-btn--lg { min-height: 58px; padding: 16px 30px; font-size: var(--text-lg); border-radius: var(--radius-lg); }

  /* variants */
  .db-btn--primary { --_bg: var(--brand-strong); --_fg: #fff; }
  .db-btn--primary:hover:not(:disabled) { --_bg: var(--orange-700); }
  .db-btn--secondary { --_bg: var(--surface-card); --_fg: var(--text-strong); --_bd: var(--border-strong); }
  .db-btn--secondary:hover:not(:disabled) { --_bg: var(--linen-50); --_bd: var(--ink-300); }
  .db-btn--accent { --_bg: var(--accent-strong); --_fg: #fff; }
  .db-btn--accent:hover:not(:disabled) { --_bg: var(--teal-700); }
  .db-btn--ghost { --_bg: transparent; --_fg: var(--brand-text); --_bd: transparent; }
  .db-btn--ghost:hover:not(:disabled) { --_bg: var(--orange-50); }
  .db-btn--danger { --_bg: var(--red-500); --_fg: #fff; }
  .db-btn--danger:hover:not(:disabled) { --_bg: var(--red-700); }

  .db-btn__icon { display: inline-flex; flex: none; }
  .db-btn__icon svg { display: block; width: 1.15em; height: 1.15em; }
  .db-btn.is-loading { color: transparent; position: relative; }
  .db-btn__spinner {
    position: absolute; width: 1.2em; height: 1.2em; border-radius: 50%;
    border: 2.5px solid currentColor; border-top-color: transparent; opacity: .9;
    animation: db-btn-spin .7s linear infinite;
  }
  .db-btn--secondary .db-btn__spinner, .db-btn--ghost .db-btn__spinner { color: var(--brand-text); }
  @keyframes db-btn-spin { to { transform: rotate(360deg); } }

.db-card {
    background: var(--surface-card);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-body);
  }
  .db-card--flat { box-shadow: none; }
  .db-card--raised { box-shadow: var(--shadow-sm); }
  .db-card--floating { box-shadow: var(--shadow-lg); border-color: transparent; }
  .db-card--pad-none { padding: 0; }
  .db-card--pad-sm { padding: var(--space-4); }
  .db-card--pad-md { padding: var(--space-6); }
  .db-card--pad-lg { padding: var(--space-8); }
  .db-card--accent { border-top: 4px solid var(--brand); }
  .db-card--interactive { cursor: pointer; transition: box-shadow var(--duration-base) var(--ease-standard),
                          transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
  .db-card--interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
  .db-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.db-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    border: var(--border-width-strong) solid transparent;
    background: transparent; color: var(--ink-700); cursor: pointer;
    border-radius: var(--radius-md);
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                transform var(--duration-fast) var(--ease-standard);
  }
  .db-iconbtn svg { display: block; width: 55%; height: 55%; }
  .db-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .db-iconbtn:active:not(:disabled) { transform: translateY(1px); }
  .db-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
  .db-iconbtn--round { border-radius: var(--radius-pill); }

  .db-iconbtn--sm { width: 40px; height: 40px; }
  .db-iconbtn--md { width: 48px; height: 48px; }
  .db-iconbtn--lg { width: 56px; height: 56px; }

  .db-iconbtn--ghost:hover:not(:disabled) { background: var(--orange-50); color: var(--brand-text); }
  .db-iconbtn--secondary { background: var(--surface-card); border-color: var(--border-strong); color: var(--ink-800); }
  .db-iconbtn--secondary:hover:not(:disabled) { background: var(--linen-50); border-color: var(--ink-300); }
  .db-iconbtn--solid { background: var(--brand-strong); color: #fff; }
  .db-iconbtn--solid:hover:not(:disabled) { background: var(--orange-700); }

.db-tag {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-sans); font-weight: var(--weight-semibold);
    font-size: var(--text-sm); line-height: 1;
    padding: 8px 14px; border-radius: var(--radius-pill);
    background: var(--surface-card); color: var(--ink-800);
    border: var(--border-width) solid var(--border-strong);
    cursor: default;
  }
  .db-tag--selectable { cursor: pointer; transition: background var(--duration-fast) var(--ease-standard),
                        border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
  .db-tag--selectable:hover { background: var(--linen-50); border-color: var(--ink-300); }
  .db-tag--selectable:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .db-tag--selected { background: var(--orange-100); border-color: var(--orange-300); color: var(--orange-800); }
  .db-tag__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-right: -4px; border: 0; padding: 0;
    background: transparent; color: inherit; cursor: pointer; border-radius: 50%; opacity: .6;
  }
  .db-tag__remove:hover { opacity: 1; background: rgba(42,33,26,.08); }
  .db-tag__remove svg { width: 14px; height: 14px; display: block; }

.db-alert { display: flex; gap: var(--space-3); align-items: flex-start;
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid; font-family: var(--font-sans); }
  .db-alert__icon { flex: none; width: 26px; height: 26px; display: inline-flex; }
  .db-alert__icon svg { width: 26px; height: 26px; display: block; }
  .db-alert__body { flex: 1; }
  .db-alert__title { font-weight: var(--weight-bold); font-size: var(--text-base); color: var(--text-strong); margin-bottom: 2px; }
  .db-alert__text { font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; }
  .db-alert__close { flex: none; border: 0; background: transparent; cursor: pointer; color: var(--ink-500); padding: 2px; border-radius: var(--radius-sm); }
  .db-alert__close:hover { color: var(--ink-800); }
  .db-alert__close svg { width: 20px; height: 20px; display: block; }
  .db-alert--info    { background: var(--blue-50);  border-color: var(--blue-100);  }
  .db-alert--info    .db-alert__icon { color: var(--blue-500); }
  .db-alert--success { background: var(--green-50); border-color: var(--green-100); }
  .db-alert--success .db-alert__icon { color: var(--green-500); }
  .db-alert--warning { background: var(--amber-50); border-color: var(--amber-100); }
  .db-alert--warning .db-alert__icon { color: var(--amber-600); }
  .db-alert--error   { background: var(--red-50);   border-color: var(--red-100);   }
  .db-alert--error   .db-alert__icon { color: var(--red-500); }
  .db-alert--brand   { background: var(--orange-50);border-color: var(--orange-100);}
  .db-alert--brand   .db-alert__icon { color: var(--brand); }

.db-dialog__overlay { position: fixed; inset: 0; background: rgba(42,33,26,.42);
    backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center;
    padding: var(--space-6); z-index: 1000; animation: db-dialog-fade var(--duration-base) var(--ease-out); }
  .db-dialog { background: var(--surface-card); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); width: 100%; max-width: 480px; overflow: hidden;
    font-family: var(--font-sans); animation: db-dialog-rise var(--duration-slow) var(--ease-out); }
  .db-dialog__head { display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); padding: var(--space-6) var(--space-6) 0; }
  .db-dialog__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold);
    color: var(--text-strong); letter-spacing: var(--tracking-snug); margin: 0; }
  .db-dialog__close { border: 0; background: transparent; cursor: pointer; color: var(--ink-500);
    padding: 4px; border-radius: var(--radius-sm); flex: none; }
  .db-dialog__close:hover { color: var(--ink-900); background: var(--linen-150); }
  .db-dialog__close svg { width: 24px; height: 24px; display: block; }
  .db-dialog__body { padding: var(--space-3) var(--space-6) var(--space-6); font-size: var(--text-base);
    color: var(--text-body); line-height: 1.55; }
  .db-dialog__foot { display: flex; gap: var(--space-3); justify-content: flex-end;
    padding: var(--space-5) var(--space-6); background: var(--surface-sunken); border-top: 1px solid var(--border); }
  @keyframes db-dialog-fade { from { opacity: 0; } }
  @keyframes db-dialog-rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.db-progress { font-family: var(--font-sans); }
  .db-progress__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .db-progress__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
  .db-progress__value { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .db-progress__track { height: 12px; border-radius: var(--radius-pill); background: var(--linen-200); overflow: hidden; }
  .db-progress__fill { height: 100%; border-radius: var(--radius-pill); background: var(--brand);
    transition: width var(--duration-slow) var(--ease-out); }
  .db-progress--success .db-progress__fill { background: var(--green-500); }
  .db-progress--lg .db-progress__track { height: 16px; }

.db-toast { display: flex; align-items: center; gap: var(--space-3);
    background: var(--surface-inverse); color: #F1FBFB;
    border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-lg); font-family: var(--font-sans); max-width: 420px; }
  .db-toast__icon { flex: none; width: 24px; height: 24px; display: inline-flex; }
  .db-toast__icon svg { width: 24px; height: 24px; display: block; }
  /* success reads as a positive, reassuring green */
  .db-toast--success { background: var(--green-700); color: #F2FBF5; }
  .db-toast--success .db-toast__icon { color: #A7E8C2; }
  /* error is the cool crimson danger color */
  .db-toast--error { background: var(--red-700); color: #FDF0F1; }
  .db-toast--error .db-toast__icon { color: #F4B4B8; }
  /* info is a calm, positive deep teal with a brand-orange icon — never black */
  .db-toast--info { background: var(--surface-inverse); color: #F1FBFB; }
  .db-toast--info .db-toast__icon { color: var(--orange-300); }
  .db-toast__msg { flex: 1; font-size: var(--text-base); font-weight: var(--weight-medium); }
  .db-toast__action { border: 0; background: transparent; color: inherit; font-family: var(--font-sans);
    font-weight: var(--weight-bold); font-size: var(--text-sm); cursor: pointer; padding: 4px; text-decoration: underline; text-underline-offset: 3px; opacity: .92; }
  .db-toast__action:hover { opacity: 1; }

.db-choice { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
    font-family: var(--font-sans); color: var(--text-body); min-height: var(--tap-min); padding: 4px 0; }
  .db-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
  .db-choice__box {
    flex: none; width: 26px; height: 26px; margin-top: 1px;
    border: 2px solid var(--border-strong); background: var(--surface-card);
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
    transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }
  .db-choice--checkbox .db-choice__box { border-radius: var(--radius-xs); }
  .db-choice--radio .db-choice__box { border-radius: 50%; }
  .db-choice__box svg { width: 18px; height: 18px; opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast), transform var(--duration-fast); }
  .db-choice__dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(.4); transition: opacity var(--duration-fast), transform var(--duration-fast); }
  .db-choice input:checked + .db-choice__box { background: var(--brand-strong); border-color: var(--brand-strong); }
  .db-choice input:checked + .db-choice__box svg,
  .db-choice input:checked + .db-choice__box .db-choice__dot { opacity: 1; transform: scale(1); }
  .db-choice input:focus-visible + .db-choice__box { box-shadow: var(--focus-ring); }
  .db-choice input:disabled + .db-choice__box { background: var(--linen-200); border-color: var(--border); }
  .db-choice--disabled { opacity: .55; cursor: not-allowed; }
  .db-choice__text { padding-top: 1px; }
  .db-choice__title { font-size: var(--text-base); color: var(--text-strong); font-weight: var(--weight-medium); }
  .db-choice__desc { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }

.db-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
  .db-field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
  .db-field__req { color: var(--brand-text); margin-left: 2px; }
  .db-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
  .db-field__hint--error { color: var(--red-700); font-weight: var(--weight-semibold); }

  .db-input-wrap { display: flex; align-items: center; gap: var(--space-2);
    background: var(--surface-card); border: var(--border-width-strong) solid var(--border-strong);
    border-radius: var(--radius-md); padding: 0 var(--space-4); min-height: 52px;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
  .db-input-wrap:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
  .db-input-wrap--error { border-color: var(--red-500); }
  .db-input-wrap--error:focus-within { box-shadow: 0 0 0 3px var(--red-100); }
  .db-input-wrap--disabled { background: var(--linen-150); opacity: .7; cursor: not-allowed; }
  .db-input {
    flex: 1; border: 0; outline: 0; background: transparent; min-width: 0;
    font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-strong);
    padding: 12px 0; line-height: 1.3;
  }
  /* wrapper owns the focus ring; suppress the global :focus-visible ring on the inner control */
  .db-input:focus-visible, .db-select:focus-visible { box-shadow: none; }
  .db-input::placeholder { color: var(--text-faint); }
  .db-input-wrap__affix { color: var(--text-muted); font-size: var(--text-base); display: inline-flex; align-items: center; }
  .db-input-wrap__affix svg { width: 20px; height: 20px; display: block; }

.db-select-wrap { position: relative; display: flex; align-items: center;
    background: var(--surface-card); border: var(--border-width-strong) solid var(--border-strong);
    border-radius: var(--radius-md); min-height: 52px;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
  .db-select-wrap:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
  .db-select-wrap--error { border-color: var(--red-500); }
  .db-select {
    appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent;
    width: 100%; font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-strong);
    padding: 12px 44px 12px var(--space-4); cursor: pointer; line-height: 1.3;
  }
  .db-select:disabled { cursor: not-allowed; color: var(--text-faint); }
  .db-select__chev { position: absolute; right: 14px; pointer-events: none; color: var(--ink-600); }
  .db-select__chev svg { width: 20px; height: 20px; display: block; }

.db-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer;
    font-family: var(--font-sans); color: var(--text-strong); min-height: var(--tap-min); }
  .db-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
  .db-switch__track {
    position: relative; width: 52px; height: 30px; flex: none; border-radius: var(--radius-pill);
    background: var(--ink-300); transition: background var(--duration-base) var(--ease-standard);
  }
  .db-switch__thumb {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-standard);
  }
  .db-switch input:checked + .db-switch__track { background: var(--brand-strong); }
  .db-switch input:checked + .db-switch__track .db-switch__thumb { transform: translateX(22px); }
  .db-switch input:focus-visible + .db-switch__track { box-shadow: var(--focus-ring); }
  .db-switch input:disabled + .db-switch__track { opacity: .5; }
  .db-switch__label { font-size: var(--text-base); font-weight: var(--weight-medium); }

.db-tabs { display: flex; gap: var(--space-2); border-bottom: 2px solid var(--border); font-family: var(--font-sans); }
  .db-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
    border: 0; background: transparent; cursor: pointer; font-family: var(--font-sans);
    font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-muted);
    padding: 14px var(--space-4); margin-bottom: -2px; border-bottom: 3px solid transparent;
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
  .db-tab:hover { color: var(--text-strong); }
  .db-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
  .db-tab--active { color: var(--brand-text); border-bottom-color: var(--brand); }
  .db-tab__icon { display: inline-flex; }
  .db-tab__icon svg { width: 20px; height: 20px; display: block; }
  .db-tab__count { font-size: var(--text-xs); font-weight: var(--weight-bold); background: var(--linen-200);
    color: var(--ink-700); border-radius: var(--radius-pill); padding: 2px 8px; }
  .db-tab--active .db-tab__count { background: var(--orange-100); color: var(--orange-800); }