/* QuickBooks "Sync now" card (public/js/qb-sync-now.js). The green is Intuit's own button green (#2CA01C, hover #108000), taken from the
   official "Connect to QuickBooks" button files; the logo is Intuit's file, unaltered, with clear space of half the symbol height. */
.qsn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 24px; padding: 16px 20px 16px 6px;
  border: 1px solid var(--border-light, var(--border)); border-radius: 14px; background: var(--bg-raised); }
.qsn-logo { display: inline-flex; align-items: center; padding: 14px; line-height: 0; } /* clear space = half the 28 px symbol: nothing else inside it */
.qsn-logo img { display: block; height: 28px; width: auto; }
.qsn-logo-night { display: none !important; }
html[data-remodel-mode="night"] .qsn-logo-day { display: none !important; }
html[data-remodel-mode="night"] .qsn-logo-night { display: block !important; }
.qsn-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qsn-when { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--white); }
.qsn-when b { font-weight: 800; }
.qsn-at { font-weight: 500; color: var(--off-white); }
.qsn-what { font-size: 14px; line-height: 20px; color: var(--white); }
.qsn-sub { font-size: 13px; line-height: 18px; color: var(--muted); }
.qsn-err { color: var(--danger, #b42318); font-weight: 600; }
.qsn.is-warn { border-color: color-mix(in srgb, var(--amb, #e0a13a) 60%, var(--border)); }
.qsn-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.qsn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 148px; padding: 0 20px; border-radius: 999px;
  background: #2CA01C; border: 1.5px solid #2CA01C; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .1px; cursor: pointer; transition: background .12s, border-color .12s, transform .06s; }
.qsn-btn:hover:not(:disabled) { background: #108000; border-color: #108000; color: #fff; }
.qsn-btn:active:not(:disabled) { transform: translateY(1px); }
.qsn-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #2CA01C 40%, transparent); }
.qsn-btn:disabled { opacity: .72; cursor: default; }
.qsn-ic { display: inline-flex; width: 18px; height: 18px; }
.qsn-ic svg { width: 18px; height: 18px; }
.qsn-ic.is-spin svg { animation: qsn-spin 1s linear infinite; }
@keyframes qsn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qsn-ic.is-spin svg { animation: none; } }
/* the second button on the card (To check: Sync setup) uses the app's line button */
.qsn-act .acs-btn { min-height: 44px; border-radius: 999px; padding: 0 18px; }

@media (max-width: 760px) {
  .qsn { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 8px 16px 16px; }
  .qsn-logo { padding: 12px 12px 4px 0; }
  .qsn-logo img { height: 24px; }
  .qsn-act { justify-content: stretch; }
  .qsn-act > * { flex: 1 1 140px; }
  .qsn-btn { width: 100%; }
}

/* Night mode: white on #2CA01C is 3.4:1, so the fill is Intuit's own darker button green (#108000, the hover colour of the official
   "Connect to QuickBooks" button files): 5.1:1. Hover goes darker still. While syncing the button stays solid (no fade), so its text stays readable. */
html[data-remodel-mode="night"] .qsn-btn { background: #108000; border-color: #108000; }
html[data-remodel-mode="night"] .qsn-btn:hover:not(:disabled) { background: #0d6b00; border-color: #0d6b00; }
html[data-remodel-mode="night"] .qsn-btn:disabled { opacity: 1; background: #0d6b00; border-color: #0d6b00; }
html[data-remodel-mode="night"] .qsn-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, #2CA01C 55%, transparent); }