@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=cabinet-grotesk@700,800&display=swap');
/* Dark collectay.com theme: loaded ONLY by login.jsp */
/* ==========================================================
   collectay.com marketing-site theme (dark, blue + green accents)
   Overrides the light tokens above so every app page matches the website.
   ========================================================== */
:root{
  --teal-900:#f5f2ee; --teal-800:#e8e4de; --teal-700:#4da6ff; --teal-600:#00cc88; --teal-500:#00cc88;
  --teal-100:rgba(77,166,255,.13);
  --green-600:#00cc88; --amber:#f97316; --amber-bg:rgba(249,115,22,.14);
  --red:#ff5a5a; --red-bg:rgba(255,90,90,.14);
  --blue:#4da6ff; --blue-bg:rgba(77,166,255,.14);
  --purple:#b794ff; --purple-bg:rgba(183,148,255,.14);
  --ink:#f5f2ee; --muted:#a8a1b2; --paper:#0a0910; --card:#100e19; --line:#272241;
  --shadow-card:0 1px 3px rgba(0,0,0,.4);
  --font-display:'Cabinet Grotesk','Satoshi','Segoe UI',sans-serif;
  --font-body:'Satoshi','Inter','Segoe UI',sans-serif;
}
body{ background:var(--paper); color:var(--ink); }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(#f5f2f00a 1px,transparent 0),linear-gradient(90deg,#f5f2f00a 1px,transparent 0); background-size:48px 48px; }

/* surfaces: everything that was white is now the card colour */
.auth-feature .ic, .auth-info .made-in-india, .input-wrap input, .input-wrap select, .btn-outline, .btn-oauth,
.workflow-card, .info-box, .dropzone, .preview-table, .summary-stat, .progress-ring-wrap, .app-sidebar,
.app-topbar .search-box, .icon-btn, .user-chip-menu, .kpi-card, .panel, .settings-card, .workflow-canvas,
.flow-node, .mobile-nav-toggle{ background:var(--card); }
.auth-info, .wizard-side{ background:linear-gradient(180deg,#0e0c17,#0a0910); }
.workflow-card.disabled, .btn-oauth:hover, .preview-table th{ background:#15122100; background:rgba(255,255,255,.04); }
.data-table td{ border-bottom-color:var(--line); }
.brand-logo, .auth-info h1, .wizard-heading h1, .auth-feature h4{ color:var(--ink); }
.auth-info h1 .accent, .wizard-heading h1 .accent{ background:linear-gradient(90deg,#4da6ff,#00cc88); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-info > p.lede, .app-nav a, .sidebar-widget ul{ color:var(--muted); }
.page-head h1, .kpi-card .value, .auth-card h2{ font-family:var(--font-display); letter-spacing:-.01em; }
.input-wrap input:focus, .input-wrap select:focus{ box-shadow:0 0 0 3px rgba(77,166,255,.22); border-color:#4da6ff; }
.input-wrap input::placeholder{ color:#6f6882; }
.alert-error{ border-color:rgba(255,90,90,.35); }
.alert-success{ background:rgba(0,204,136,.12); color:#00cc88; border-color:rgba(0,204,136,.35); }
.badge-paid, .badge-good, .badge-received, .badge-active, .badge-completed{ background:rgba(0,204,136,.14); color:#00cc88; }

/* primary action = blue-to-green gradient like the website CTAs */
.btn-primary{ color:#0a0910; background:linear-gradient(135deg,#4da6ff,#00cc88); }
.btn-primary:hover{ background:linear-gradient(135deg,#6bb6ff,#19dba0); box-shadow:0 6px 22px rgba(77,166,255,.28); }
.btn-outline{ color:var(--ink); }
.btn-outline:hover{ border-color:#4da6ff; background:rgba(77,166,255,.12); }
.app-nav a.active, .app-nav a:hover{ background:rgba(77,166,255,.13); color:#4da6ff; }
.app-nav a.active{ box-shadow:inset 3px 0 0 #00cc88; }
.sidebar-widget{ background:linear-gradient(135deg,rgba(77,166,255,.14),rgba(0,204,136,.10)); border:1px solid var(--line); }
.sidebar-widget h5{ color:var(--ink); }
.sidebar-workspace .avatar{ background:linear-gradient(135deg,#4da6ff,#00cc88); color:#0a0910; }
.progress-bar-row .fill{ background:linear-gradient(90deg,#4da6ff,#00cc88); }
.progress-tracker .step.done .num, .step-track .node.done .dot-icon{ background:#00cc88; color:#0a0910; }
.progress-tracker .step.active .num, .step-track .node.active .dot-icon{ background:#4da6ff; color:#0a0910; }
.icon-btn .dot-count{ color:#fff; }
.user-chip-menu{ box-shadow:0 10px 30px rgba(0,0,0,.6); }
.sidebar-logout:hover, .user-chip-menu a.danger:hover{ background:rgba(255,90,90,.14); color:#ff5a5a; }
.app-sidebar{ box-shadow:none; }

/* inline light colours written directly in JSPs */
[style*="color:#3c4b49"], [style*="color:#64748b"]{ color:var(--muted) !important; }
[style*="background:#fff"], [style*="background:#f1f5f9"], [style*="background:#fef3c7"], [style*="background:#eaf1ff"]{ background:var(--card) !important; }
[style*="color:#b45309"]{ color:#f97316 !important; }
/* the logo image is dark-on-light: give it a light chip so it stays readable */
.brand-logo img, .auth-info img[src*="logo-full"]{ background:#f5f2ee; border-radius:8px; padding:4px 8px; }

/* ---- dark-theme fixes for page-level <style> blocks (higher specificity than the page rules) ---- */
body .tmpl-card, body .tmpl-actions button, body .tmpl-modal, body .wf-modal, body .invoice-style-card{ background:var(--card); }
body .invoice-style-card.selected{ background:rgba(77,166,255,.12); }
body .reminders-loading-overlay{ background:rgba(10,9,16,.88); }
body .tmpl-modal-overlay, body .wf-modal-overlay{ background:rgba(0,0,0,.65); }
body .legal-doc p, body .legal-doc li{ color:#d6d0dc; }
body .legal-doc h2{ color:var(--ink); }
.alert-danger{ background:var(--red-bg); color:var(--red); border:1px solid rgba(255,90,90,.35); }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]), select, textarea{
  background:var(--card); color:var(--ink); border-color:var(--line); color-scheme:dark;
}
select option{ background:#100e19; color:#f5f2ee; }
.input-wrap input, .input-wrap select{ background:var(--card); }
::selection{ background:rgba(77,166,255,.35); }
/* printed / on-screen invoice sheet is "paper": keep it light with dark text */
.invoice-shell, .invoice-sheet{ background:#fff !important; color:#111827; }
.invoice-sheet [style*="background:#fff"]{ background:#fff !important; }
.invoice-sheet [style*="color:#3c4b49"], .invoice-sheet [style*="color:#64748b"]{ color:#4b5563 !important; }
.invoice-sheet h1, .invoice-sheet h2, .invoice-sheet h3, .invoice-sheet h4, .invoice-sheet p, .invoice-sheet td, .invoice-sheet strong{ color:inherit; }
.style-thumb{ background:#fff !important; }
@media print{ body::before{ display:none; } body{ background:#fff; } }
/* Google / social button: explicit light label so it never inherits the dark UA button colour */
.btn-oauth, a.btn-oauth, button.btn-oauth{ color:var(--ink) !important; opacity:1; font-family:inherit; }
/* on dark (auth + onboarding) pages the primary button uses the website gradient with dark text */
.btn-primary{ background:linear-gradient(135deg,#4da6ff,#00cc88) !important; color:#04120d !important; box-shadow:0 8px 24px rgba(0,204,136,.22) !important; }
.btn-primary:hover{ background:linear-gradient(135deg,#6bb6ff,#19dba0) !important; }