@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&f[]=cabinet-grotesk@700,800&display=swap');
@import url('login-extra.css?v=40');
/* ==========================================================
   Collectay - Product UI theme (teal/green)
   Matches: signup, login, onboarding flow, dashboard app shell
   ========================================================== */

:root{
  --teal-900:#0b1530;
  --teal-800:#0f1b3d;
  --teal-700:#1d64d8;
  --teal-600:#0e9f6e;
  --teal-500:#10b981;
  --teal-100:#e8f1fd;
  --green-600:#16a34a;
  --amber:#d97706;
  --amber-bg:#fff7e6;
  --red:#dc2626;
  --red-bg:#fdecec;
  --blue:#2563eb;
  --blue-bg:#eaf1ff;
  --purple:#7c3aed;
  --purple-bg:#f2eafe;
  --ink:#111827;
  --muted:#4f5b6e;
  --paper:#f4f7fb;
  --card:#ffffff;
  --line:#dfe5ee;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --shadow-card:0 1px 3px rgba(16,24,24,.06), 0 1px 2px rgba(16,24,24,.04);
  --font-display:'Cabinet Grotesk','Satoshi','Segoe UI',sans-serif;
  --font-body:'Satoshi','Segoe UI',system-ui,sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--paper); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.brand-logo{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--teal-900); }
.brand-logo small{ display:block; font-size:11px; font-weight:500; color:var(--muted); }
.brand-logo svg{ width:32px; height:32px; }

/* ================= AUTH SHELL (signup / login) ================= */
.auth-shell{ display:flex; min-height:100vh; }
.auth-info{
  flex:1 1 42%; background:linear-gradient(180deg,#fbfdfd,#eef7f6);
  padding:52px 56px; position:relative; overflow:hidden;
  border-right:1px solid var(--line);
}
.auth-info .top-link{ position:absolute; top:28px; right:40px; font-size:13.5px; color:var(--muted); }
.auth-info .top-link a{ color:var(--teal-700); font-weight:700; }
.auth-info h1{ font-family:var(--font-display); font-size:clamp(30px,3.6vw,42px); line-height:1.16; font-weight:700; color:var(--teal-900); margin:44px 0 16px; }
.auth-info h1 .accent{ color:var(--teal-600); }
.auth-info > p.lede{ font-size:15.5px; color:#3c4b49; max-width:440px; margin-bottom:36px; }
.auth-feature-list{ display:flex; flex-direction:column; gap:22px; max-width:420px; }
.auth-feature{ display:flex; gap:16px; }
.auth-feature .ic{
  width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--teal-700); font-size:18px;
}
.auth-feature h4{ font-size:14.5px; font-weight:700; margin:0 0 4px; color:var(--teal-900); }
.auth-feature p{ font-size:13px; color:var(--muted); margin:0; }
.auth-info .made-in-india{
  margin-top:44px; display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 16px;
  font-size:13.5px; font-weight:600; color:var(--ink);
}

.auth-panel{ flex:1 1 58%; display:flex; align-items:flex-start; justify-content:center; padding:52px 24px; overflow-y:auto; }
.auth-card{ width:100%; max-width:480px; }
.auth-card .badge{
  width:56px; height:56px; border-radius:50%; background:var(--teal-100); color:var(--teal-700);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:24px;
}
.auth-card h2{ font-family:var(--font-display); font-size:24px; font-weight:700; text-align:center; margin:0 0 6px; }
.auth-card .sub{ text-align:center; font-size:14px; color:var(--muted); margin:0 0 28px; }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; }
.input-wrap{ position:relative; display:flex; align-items:stretch; }
.input-wrap input, .input-wrap select{
  width:100%; padding:11px 40px 11px 14px; font-size:14px; font-family:var(--font-body);
  color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:9px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.input-wrap input::placeholder{ color:#9aa5a3; }
.input-wrap input:focus, .input-wrap select:focus{ border-color:var(--teal-500); box-shadow:0 0 0 3px var(--teal-100); }
.input-wrap .icon{ position:absolute; right:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:#9aa5a3; }
.input-wrap .toggle-pass{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#9aa5a3; }
.phone-field{ display:flex; gap:8px; }
.phone-field select{ width:92px; flex-shrink:0; padding-right:22px; }
.error-msg{ font-size:12.5px; color:var(--red); margin-top:6px; min-height:14px; }
.input-wrap input.invalid, .input-wrap select.invalid{ border-color:var(--red); }

.pw-strength{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted); margin-top:8px; }
.pw-strength .bars{ display:flex; gap:4px; flex:1; }
.pw-strength .bars span{ height:4px; flex:1; border-radius:2px; background:var(--line); }
.pw-strength .bars span.filled-weak{ background:var(--red); }
.pw-strength .bars span.filled-fair{ background:var(--amber); }
.pw-strength .bars span.filled-strong{ background:var(--green-600); }
.pw-strength .label-weak{ color:var(--red); font-weight:700; }
.pw-strength .label-fair{ color:var(--amber); font-weight:700; }
.pw-strength .label-strong{ color:var(--green-600); font-weight:700; }

.checkbox-row{ display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted); margin:18px 0 22px; }
.checkbox-row input{ margin-top:3px; accent-color:var(--teal-600); }
.checkbox-row a{ color:var(--teal-700); font-weight:700; }

.row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; font-size:13.5px; }
.remember{ display:flex; align-items:center; gap:8px; color:var(--muted); }
.remember input{ accent-color:var(--teal-600); }
.row-between a{ color:var(--teal-700); font-weight:700; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:9px; font-weight:700; font-size:14.5px; cursor:pointer; border:none; transition:transform .1s ease, background .15s ease, box-shadow .15s ease; }
.btn-block{ width:100%; }
.btn-primary{ color:#fff; background:var(--teal-700); }
.btn-primary:hover{ background:var(--teal-600); }
.btn-outline{ color:var(--teal-700); background:#fff; border:1.5px solid var(--line); }
.btn-outline:hover{ border-color:var(--teal-500); background:var(--teal-100); }
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.divider{ display:flex; align-items:center; gap:12px; margin:24px 0; color:var(--muted); font-size:12.5px; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line); }

.oauth-row{ display:grid; grid-template-columns:1fr; gap:12px; }
.btn-oauth{ display:flex; align-items:center; justify-content:center; gap:9px; padding:10px; border:1.5px solid var(--line); border-radius:9px; background:#fff; font-size:13.5px; font-weight:600; cursor:pointer; }
.btn-oauth:hover{ background:#fafafa; }

.secure-note{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:var(--muted); margin-top:22px; }
.secure-note svg{ width:14px; height:14px; color:var(--teal-600); }

.alert{ padding:12px 14px; border-radius:9px; font-size:13.5px; margin-bottom:20px; }
.alert-error{ background:var(--red-bg); color:var(--red); border:1px solid #f5c6c6; }
.alert-success{ background:var(--teal-100); color:var(--teal-700); border:1px solid #bfe7e2; }

/* ================= ONBOARDING WIZARD ================= */
.wizard-shell{ display:flex; min-height:100vh; }
.wizard-main{ flex:1; padding:44px 56px; overflow-y:auto; }
.wizard-side{ width:340px; flex-shrink:0; background:#fbfdfd; border-left:1px solid var(--line); padding:44px 34px; }
.step-pill{ display:inline-block; background:var(--teal-100); color:var(--teal-700); font-size:12px; font-weight:700; padding:5px 12px; border-radius:99px; margin-bottom:18px; }
.wizard-heading h1{ font-family:var(--font-display); font-size:28px; font-weight:700; margin:0 0 8px; color:var(--teal-900); }
.wizard-heading h1 .accent{ color:var(--teal-600); }
.wizard-heading p{ color:var(--muted); font-size:14.5px; margin:0 0 32px; max-width:520px; }

.progress-tracker{ display:flex; flex-direction:column; gap:4px; }
.progress-tracker .step{ display:flex; gap:12px; padding:10px 0; }
.progress-tracker .step .num{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; background:var(--line); color:var(--muted);
}
.progress-tracker .step.done .num{ background:var(--teal-600); color:#fff; }
.progress-tracker .step.active .num{ background:var(--teal-900); color:#fff; }
.progress-tracker .step h5{ font-size:13.5px; font-weight:700; margin:0; }
.progress-tracker .step p{ font-size:12px; color:var(--muted); margin:2px 0 0; }

.workflow-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.workflow-card{ background:#fff; border:2px solid var(--line); border-radius:var(--radius); padding:22px; position:relative; cursor:pointer; transition:border-color .15s ease; }
.workflow-card.selected{ border-color:var(--teal-600); box-shadow:0 0 0 1px var(--teal-600); }
.workflow-card .radio{ position:absolute; top:16px; right:16px; width:18px; height:18px; border-radius:50%; border:2px solid var(--line); }
.workflow-card.selected .radio{ border-color:var(--teal-600); background:var(--teal-600); }
.workflow-card .glyph{ width:56px; height:56px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--teal-100); border-radius:12px; }
.workflow-card h4{ font-size:15px; font-weight:700; margin:0 0 8px; }
.workflow-card p{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.workflow-card ul{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:6px; }
.workflow-card li{ font-size:12px; color:var(--ink); display:flex; align-items:center; gap:7px; }
.workflow-card li::before{ content:"✓"; color:var(--teal-600); font-weight:700; }
.workflow-card .best-for{ font-size:11px; font-weight:700; color:var(--teal-700); background:var(--teal-100); padding:5px 10px; border-radius:6px; display:inline-block; }
.workflow-card.disabled{ cursor:not-allowed; opacity:.6; background:#fafafa; }
.workflow-card.disabled .radio{ display:none; }
.workflow-card.disabled:hover{ border-color:var(--line); }
.workflow-card .coming-soon-badge{ position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:700; color:#fff; background:var(--muted); padding:3px 9px; border-radius:999px; }

.info-box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
.info-box h5{ font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.info-box ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13px; color:var(--muted); }
.info-box li::before{ content:"✓ "; color:var(--teal-600); font-weight:700; }

.dropzone{ border:2px dashed var(--line); border-radius:var(--radius); padding:40px; text-align:center; background:#fff; margin-bottom:26px; }
.dropzone .file-ic{ width:56px; height:56px; margin:0 auto 14px; }
.dropzone h4{ font-size:15px; font-weight:700; margin:0 0 6px; }
.dropzone p{ font-size:12.5px; color:var(--muted); margin:0 0 16px; }

.map-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.preview-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:13px; }
.preview-table th,.preview-table td{ padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.preview-table th{ background:#fafafa; font-weight:700; color:var(--muted); font-size:11.5px; text-transform:uppercase; }

.summary-stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px; }
.summary-stat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; align-items:center; gap:12px; }
.summary-stat .ic{ width:38px; height:38px; border-radius:9px; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.summary-stat .num{ font-family:var(--font-display); font-size:20px; font-weight:700; }
.summary-stat .lbl{ font-size:11.5px; color:var(--muted); }

.progress-ring-wrap{ display:flex; align-items:center; gap:26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; margin-bottom:20px; }
.progress-ring{ position:relative; width:110px; height:110px; flex-shrink:0; }
.progress-ring svg{ transform:rotate(-90deg); }
.progress-ring .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:700; }
.step-track{ display:flex; align-items:center; justify-content:space-between; margin:24px 0; }
.step-track .node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; }
.step-track .node::after{ content:""; position:absolute; top:14px; left:50%; width:100%; height:2px; background:var(--line); z-index:0; }
.step-track .node:last-child::after{ display:none; }
.step-track .dot-icon{ width:28px; height:28px; border-radius:50%; background:var(--line); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; z-index:1; }
.step-track .node.done .dot-icon{ background:var(--teal-600); }
.step-track .node.active .dot-icon{ background:var(--teal-900); }
.step-track .lbl{ font-size:12px; color:var(--muted); text-align:center; }

.success-hero{ text-align:center; padding:14px 0 30px; }
.success-hero .check{ width:64px; height:64px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:28px; }

/* ================= APP SHELL (dashboard + inner pages) ================= */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{ width:224px; flex-shrink:0; background:#fff; border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column; }
.app-sidebar .brand-logo{ margin-bottom:26px; padding:0 6px; }
.app-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.app-nav a{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:8px; font-size:14px; color:#4b5563; font-weight:500; position:relative; }
.app-nav a .badge-count{ margin-left:auto; background:var(--teal-100); color:var(--teal-700); font-size:11px; font-weight:700; padding:1px 7px; border-radius:99px; }
.app-nav a.active, .app-nav a:hover{ background:var(--teal-100); color:var(--teal-700); }
.app-nav a.active{ font-weight:700; }
.sidebar-widget{ background:var(--teal-100); border-radius:var(--radius); padding:16px; margin-top:14px; font-size:12.5px; }
.sidebar-widget h5{ font-size:12.5px; font-weight:700; color:var(--teal-800); margin:0 0 10px; display:flex; align-items:center; gap:6px; }
.sidebar-widget ul{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; color:#3c4b49; }
.sidebar-widget a.link{ color:var(--teal-700); font-weight:700; font-size:12.5px; }
.sidebar-workspace{ margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:var(--radius); display:flex; align-items:center; gap:10px; }
.sidebar-workspace .avatar{ width:34px; height:34px; border-radius:9px; background:var(--teal-700); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.sidebar-workspace .name{ font-size:13px; font-weight:700; }
.sidebar-workspace .plan{ font-size:11px; color:var(--muted); }
.sidebar-workspace .name, .sidebar-workspace .plan{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-workspace > div:nth-child(2){ min-width:0; flex:1; }
.sidebar-logout{ margin-left:auto; flex-shrink:0; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--muted); text-decoration:none; font-size:15px; border:1px solid transparent; }
.sidebar-logout:hover{ background:var(--red-bg,#fee2e2); color:var(--red,#dc2626); border-color:var(--line); }

.app-main{ flex:1; padding:26px 34px; min-width:0; }
.app-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:20px; }
.app-topbar .search-box{ flex:1; max-width:420px; display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:9px; padding:9px 14px; color:var(--muted); font-size:13.5px; }
.app-topbar .search-box kbd{ margin-left:auto; font-size:11px; background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }
.topbar-actions{ display:flex; align-items:center; gap:16px; }
.icon-btn{ position:relative; width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); }
.icon-btn .dot-count{ position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:10px; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.user-chip{ position:relative; display:flex; align-items:center; gap:8px; cursor:pointer; }
.user-chip .avatar{ width:34px; height:34px; border-radius:50%; background:var(--teal-100); color:var(--teal-700); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; }
.user-chip-menu{ position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.12); min-width:180px; padding:6px; z-index:500; display:none; }
.user-chip-menu.open{ display:block; }
.user-chip-menu a{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:7px; font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; }
.user-chip-menu a:hover{ background:var(--teal-100); color:var(--teal-700); }
.user-chip-menu a.danger:hover{ background:#fee2e2; color:#dc2626; }
.user-chip-menu hr{ border:0; border-top:1px solid var(--line); margin:6px 2px; }

.page-head{ margin-bottom:22px; }
.page-head h1{ font-family:var(--font-display); font-size:22px; font-weight:700; margin:0 0 6px; }
.page-head p{ font-size:13.5px; color:var(--muted); margin:0; }

.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.kpi-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-card); }
.kpi-card .top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.kpi-card .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.kpi-card .label{ font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.kpi-card .value{ font-family:var(--font-display); font-size:22px; font-weight:700; }
.kpi-card .delta{ font-size:11.5px; margin-top:8px; font-weight:700; }
.delta.up{ color:var(--green-600); }
.delta.down{ color:var(--red); }
.ic-teal{ background:var(--teal-100); color:var(--teal-700); }
.ic-red{ background:var(--red-bg); color:var(--red); }
.ic-blue{ background:var(--blue-bg); color:var(--blue); }
.ic-purple{ background:var(--purple-bg); color:var(--purple); }
.ic-amber{ background:var(--amber-bg); color:var(--amber); }

.grid-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-bottom:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px; }
/* Grid items default to min-width:auto, which stops them shrinking below the intrinsic width of
   whatever's inside (e.g. a wide data-table or a row of buttons) - that blows the column out to
   its content's width instead of the track's, overflowing the page horizontally on narrow screens.
   min-width:0 lets the column actually shrink to the grid track, so each child's own overflow-x
   rule (data-table, toolbar-row, etc.) is what scrolls, not the whole page. */
.grid-2 > div, .grid-3 > div, .workflow-grid > div, .settings-card-grid > div{ min-width:0; }
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-card); }
.panel .panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel h3{ font-size:14.5px; font-weight:700; margin:0; }
.panel .view-all{ font-size:12.5px; color:var(--teal-700); font-weight:700; }

.data-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.data-table th{ text-align:left; color:var(--muted); font-weight:700; padding:8px 6px; border-bottom:1px solid var(--line); font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.data-table td{ padding:11px 6px; border-bottom:1px solid #f0f2f2; }
.data-table tr:last-child td{ border-bottom:none; }

.status-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; display:inline-block; }
.badge-overdue{ background:var(--red-bg); color:var(--red); }
.badge-duesoon{ background:var(--amber-bg); color:var(--amber); }
.badge-upcoming{ background:var(--blue-bg); color:var(--blue); }
.badge-paid, .badge-good, .badge-received, .badge-active, .badge-completed{ background:#e9fbef; color:var(--green-600); }
.badge-highrisk{ background:var(--red-bg); color:var(--red); }
.badge-atrisk, .badge-partial, .badge-pending, .badge-inprogress{ background:var(--amber-bg); color:var(--amber); }
.badge-watch{ background:var(--purple-bg); color:var(--purple); }
.badge-failed, .badge-norsp{ background:var(--red-bg); color:var(--red); }
.badge-paused{ background:var(--amber-bg); color:var(--amber); }

.filter-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:20px; flex-wrap:wrap; }
.filter-tabs a{ padding:10px 4px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-right:14px; }
.filter-tabs a.active{ color:var(--teal-700); border-color:var(--teal-600); }
.toolbar-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }

.filter-panel .field{ margin-bottom:16px; }
.donut-legend{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.donut-legend .row{ display:flex; align-items:center; gap:9px; font-size:12.5px; }
.donut-legend .sw{ width:9px; height:9px; border-radius:50%; }

.progress-bar-row{ margin-bottom:14px; }
.progress-bar-row .top{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px; }
.progress-bar-row .track{ height:7px; background:var(--line); border-radius:99px; overflow:hidden; }
.progress-bar-row .fill{ height:100%; background:var(--teal-600); border-radius:99px; }

.tab-strip{ display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto; }
.tab-strip a{ padding:12px 2px; font-size:14px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:6px; }
.tab-strip a.active{ color:var(--teal-700); border-color:var(--teal-600); }

.settings-card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px; }
.settings-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; align-items:flex-start; gap:14px; }
.settings-card .ic{ width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.settings-card h5{ font-size:13.5px; font-weight:700; margin:0 0 3px; }
.settings-card p{ font-size:12px; color:var(--muted); margin:0; }

.workflow-canvas{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; min-height:520px; }
.flow-node{ background:#fff; border:1px solid var(--line); border-radius:9px; padding:12px 16px; display:flex; gap:12px; align-items:center; width:280px; margin:0 auto; box-shadow:var(--shadow-card); }
.flow-node .ic{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.flow-node h5{ font-size:13px; font-weight:700; margin:0; }
.flow-node p{ font-size:11.5px; color:var(--muted); margin:2px 0 0; }
.flow-connector{ width:2px; height:26px; background:var(--line); margin:0 auto; }
.flow-branch{ display:flex; justify-content:center; gap:60px; margin-top:8px; }

.mobile-nav-toggle{ display:none; }
.sidebar-overlay{ display:none; }

@media (max-width:1180px){
  .grid-2{ grid-template-columns:1fr !important; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .workflow-grid{ grid-template-columns:repeat(2,1fr); }
  .settings-card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .auth-shell, .wizard-shell{ flex-direction:column; }
  .auth-info, .wizard-side{ width:auto; }
  /* Show the actual login/signup form first on mobile - the marketing panel is useful context,
     but making someone scroll past it to find the form they came for is bad mobile UX. */
  .auth-shell .auth-panel{ order:-1; }

  /* App sidebar becomes an off-canvas drawer instead of just disappearing */
  .app-sidebar{
    display:flex; position:fixed; top:0; left:0; height:100vh; z-index:220;
    transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 30px rgba(10,20,20,.25);
  }
  .app-sidebar.open{ transform:translateX(0); }
  .mobile-nav-toggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed; top:14px; left:14px; z-index:230;
    width:40px; height:40px; border-radius:9px; border:1px solid var(--line);
    background:#fff; box-shadow:var(--shadow-card); font-size:18px; cursor:pointer; padding:0;
  }
  .sidebar-overlay.open{
    display:block; position:fixed; inset:0; background:rgba(10,20,20,.4); z-index:210;
  }
  .app-main{ padding:70px 18px 24px; }
  .app-topbar{ flex-wrap:wrap; gap:10px; }
  .app-topbar .search-box{ order:2; max-width:none; flex:1 1 100%; }
}
@media (max-width:640px){
  .kpi-grid, .grid-3, .workflow-grid, .settings-card-grid, .map-grid, .summary-stat-row,
  .form-row, .oauth-row{ grid-template-columns:1fr !important; }
  .page-head h1{ font-size:19px; }
  /* page header rows (title + action buttons) stack instead of squeezing the title */
  .app-main > div[style*="justify-content:space-between"]{ flex-wrap:wrap !important; gap:12px !important; }
  .app-main > div[style*="justify-content:space-between"] > .page-head{ flex:1 1 100%; margin-bottom:6px; }
  .app-main > div[style*="justify-content:space-between"] > div[style*="display:flex"]{ flex-wrap:wrap; }
  .toolbar-row{ flex-direction:column; align-items:stretch; }
  .toolbar-row > div{ flex-wrap:wrap; }
  .step-track{ flex-wrap:wrap; row-gap:18px; }
  .step-track .node{ flex:0 1 33%; }
  .app-topbar .search-box kbd{ display:none; }
  .wizard-main{ padding:24px 18px; }
  .wizard-side{ padding:24px 20px; }
  .auth-panel{ padding:32px 16px; }
  .data-table, .preview-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---- Sidebar polish ---- */
.app-sidebar{ box-shadow:2px 0 14px rgba(15,27,61,.05); overflow-y:auto; }
.app-nav{ gap:4px; }
.app-nav a{ padding:10px 12px; border-radius:10px; transition:background .15s, color .15s, transform .15s; }
.app-nav a::before{ content:"\2022"; width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f1f5f4; font-size:15px; line-height:1; transition:background .15s; }
.app-nav a[href="dashboard"]::before{ content:"\1F4CA"; }
.app-nav a[href="invoices"]::before{ content:"\1F9FE"; }
.app-nav a[href="customers"]::before{ content:"\1F465"; }
.app-nav a[href="payments"]::before{ content:"\1F4B3"; }
.app-nav a[href="reminders"]::before{ content:"\1F514"; }
.app-nav a[href="ai-voice-calls"]::before{ content:"\1F399"; }
.app-nav a[href="reports"]::before{ content:"\1F4C8"; }
.app-nav a[href="automation"]::before{ content:"\26A1"; }
.app-nav a[href="message-templates"]::before{ content:"\1F4AC"; }
.app-nav a[href="settings"]::before{ content:"\2699"; }
.app-nav a:hover{ transform:translateX(2px); }
.app-nav a:hover::before{ background:#fff; }
.app-nav a.active{ background:linear-gradient(90deg,var(--teal-100),#f3fbfa); box-shadow:inset 3px 0 0 var(--teal-700); }
.app-nav a.active::before{ background:var(--teal-700); color:#fff; }
.app-nav a .badge-count{ background:var(--teal-700); color:#fff; }
.sidebar-widget{ border:1px solid rgba(29,100,216,.12); }
.sidebar-workspace{ background:#fafcfc; }

/* ---- Sidebar v3: deep-teal panel, compact, fits without scrolling ---- */
.app-sidebar{ background:linear-gradient(180deg,#0f1b3d 0%,#0b1530 100%); border-right:none; padding:14px 12px; width:232px; box-shadow:4px 0 18px rgba(11,21,48,.18); overflow:hidden; }
@media (min-width:961px){ .app-sidebar{ position:sticky; top:0; height:100vh; } }
.app-sidebar .brand-logo{ background:#fff; border-radius:12px; padding:8px 10px; margin:0 0 12px; justify-content:center; }
.app-nav{ gap:2px; flex:0 1 auto; min-height:0; }
.app-nav a{ color:#cfe7e3; padding:7px 10px; font-size:13.5px; font-weight:500; border-radius:10px; gap:10px; }
.app-nav a::before{ width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.08); font-size:14px; }
.app-nav a:hover{ background:rgba(255,255,255,.09); color:#fff; transform:none; }
.app-nav a:hover::before{ background:rgba(255,255,255,.16); }
.app-nav a.active{ background:linear-gradient(90deg,#10b981,#0e9f6e); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(16,185,129,.35); }
.app-nav a.active::before{ background:rgba(255,255,255,.22); color:#fff; }
.app-nav a .badge-count{ background:#f59e0b; color:#fff; }
.sidebar-widget{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); padding:10px 12px; margin-top:auto; font-size:11.5px; }
.sidebar-widget h5{ color:#fff; margin:0 0 4px; font-size:12px; }
.sidebar-widget p{ color:#b7d4d0 !important; margin:0 0 6px !important; line-height:1.35; }
.sidebar-widget a.link{ color:#5eead4; font-size:11.5px; }
.sidebar-workspace{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); padding:8px 10px; margin-top:10px; }
.sidebar-workspace .avatar{ background:#10b981; }
.sidebar-workspace .name{ color:#fff; }
.sidebar-workspace .plan{ color:#a9b8d6; }
.sidebar-logout{ color:#cfe7e3; }
.sidebar-logout:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:transparent; }
@media (min-width:961px) and (max-height:720px){ .sidebar-widget{ display:none; } .sidebar-workspace{ margin-top:auto; } }

/* ---- Sidebar v3.1: menu scrolls on its own; widget + workspace stay pinned below ---- */
.app-nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:2px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.app-nav::-webkit-scrollbar{ width:5px; }
.app-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:4px; }
.app-sidebar .brand-logo, .sidebar-widget, .sidebar-workspace{ flex-shrink:0; }
.sidebar-widget{ margin-top:10px; }
@media (min-width:961px) and (max-height:720px){ .sidebar-workspace{ margin-top:10px; } }

/* ---- Sidebar brand: same mark as collectay.com (leaf chip + wordmark) ---- */
.app-sidebar .brand-logo{ background:transparent; padding:2px 6px; margin:2px 0 14px; justify-content:flex-start; }
.brand-mark{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand-chip{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#00cc88; background:rgba(0,204,136,.15); border:1px solid rgba(0,204,136,.32); }
.brand-word{ font-family:'Cabinet Grotesk',var(--font-display),sans-serif; font-weight:800; font-size:24px; letter-spacing:-.02em; color:#f6f3ef; }

.app-nav a[href="ai-insights"]::before{ content:"\1F9E0"; }
.app-nav a[href="ai-insights"] .badge-count{ font-size:9px; letter-spacing:.04em; padding:1px 6px; color:#fff !important; }

.app-nav a[href="greetings"]::before{ content:"\1F389"; }
.app-nav a[href="greetings"] .badge-count{ font-size:9px; letter-spacing:.04em; padding:1px 6px; color:#fff !important; }

/* ---- top bar menus (bell, help, profile) ---- */
.topbar-actions{ position:relative; }
.tb-has-menu{ position:relative; cursor:pointer; }
.tb-ic{ pointer-events:none; }
.tb-menu{ display:none; position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 44px rgba(10,30,28,.2); z-index:1400; text-align:left; cursor:default; }
.tb-menu.open{ display:block; }
.tb-notif{ width:360px; max-width:calc(100vw - 24px); } .tb-help{ width:260px; padding:6px; } .tb-profile{ min-width:230px; padding:8px; }
.tb-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line); } .tb-help .tb-head{ border:none; padding:8px 10px 4px; }
.tb-head b{ font-size:14px; } .tb-link{ border:0; background:transparent; color:var(--teal-700); font-weight:700; font-size:12px; cursor:pointer; font-family:inherit; }
.tb-list{ max-height:min(420px, 62vh); overflow-y:auto; }
.tb-empty{ padding:26px 18px; text-align:center; color:var(--muted); font-size:13px; line-height:1.5; }
.tb-item{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border-bottom:1px solid #f0f2f2; text-decoration:none; color:var(--ink); position:relative; } .tb-item:last-child{ border-bottom:none; } .tb-item:hover{ background:#f5f8fc; }
.tb-item .ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:17px; flex-shrink:0; background:#f1f5f4; }
.tb-item.danger .ic{ background:#fee2e2; } .tb-item.warn .ic{ background:#fef3c7; } .tb-item.good .ic{ background:#dcfce7; } .tb-item.info .ic{ background:#dbeafe; }
.tb-item .tx{ min-width:0; flex:1; } .tb-item b{ display:block; font-size:13px; line-height:1.35; } .tb-item small{ display:block; color:var(--muted); font-size:11.5px; line-height:1.4; margin-top:2px; }
.tb-item.new b{ color:#0f172a; } .tb-item:not(.new){ opacity:.72; } .tb-item .nd{ width:8px; height:8px; border-radius:50%; background:#10b981; flex-shrink:0; margin-top:6px; }
.tb-help a, .tb-profile a{ display:flex; align-items:center; gap:9px; padding:10px 10px; border-radius:9px; font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; } .tb-help a:hover, .tb-profile a:hover{ background:var(--teal-100); color:var(--teal-700); } .tb-profile a.danger:hover{ background:#fee2e2; color:#dc2626; }
.tb-profile hr{ border:0; border-top:1px solid var(--line); margin:6px 0; }
.tb-who{ padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; } .tb-who b{ display:block; font-size:14px; } .tb-who small{ color:var(--muted); font-size:11.5px; word-break:break-all; }
.dot-count[hidden]{ display:none; }

/* ---- mobile: bell/help/avatar share the hamburger's row (no empty gap above the page) ---- */
@media (max-width:960px){
  .app-main{ padding-top:14px !important; }
  .app-topbar{ min-height:40px; padding-left:54px; margin-bottom:12px !important; flex-wrap:nowrap; gap:8px; }
  .topbar-actions{ margin-left:auto; }
  .tb-menu{ position:fixed; top:64px; left:12px; right:12px; width:auto; max-width:none; }
  .tb-notif, .tb-help, .tb-profile{ width:auto; }
}

/* one typeface family across the whole platform, same as collectay.com */
button,input,select,textarea{ font-family:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-.015em; }
.app-sidebar .lx-side{ display:flex; margin:10px 0 0; width:100%; flex-shrink:0; }
.app-sidebar .lx-side .lx-flag{ width:30px; } .app-sidebar .lx-side .lx-india-txt{ padding:6px 10px; } .app-sidebar .lx-side .lx-india-txt b{ font-size:13px; } .app-sidebar .lx-side .lx-india-txt small{ font-size:10.5px; }
@media (max-height:760px){ .app-sidebar .lx-side{ display:none; } }

/* ---- readable light app theme with Collectay blue-green accents ---- */
.btn-primary, .px-btn-primary, .app-nav a.active{ background:linear-gradient(135deg,#1d64d8,#0b8a5f) !important; color:#fff !important; }
.btn-primary:hover, .px-btn-primary:hover{ background:linear-gradient(135deg,#2a72e6,#0e9f6e) !important; }
.app-nav a.active{ box-shadow:0 4px 12px rgba(29,100,216,.35) !important; }
.sidebar-workspace .avatar, .px-av, .avatar{ background:linear-gradient(135deg,#1d64d8,#0e9f6e); color:#fff; }
.px-hero, .db-hero, .wf-hero, .page-head{ background:linear-gradient(125deg,#0f1b3d 0%,#14407f 62%,#0b8a5f 135%) !important; color:#fff; }
.px-bar .k i, .px-barline i, .progress-bar-row .fill{ background:linear-gradient(90deg,#1d64d8,#0e9f6e) !important; }
body{ background:var(--paper); color:var(--ink); }

/* beta chip + upgrade pill */
.beta-chip{ font:800 9px 'Satoshi',sans-serif; letter-spacing:.12em; background:#f59e0b; color:#1f1300; padding:2px 7px; border-radius:99px; margin-left:7px; align-self:center; }
.upgrade-pill{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 0; padding:10px 12px; border-radius:12px; background:linear-gradient(135deg,rgba(29,100,216,.35),rgba(11,138,95,.30)); border:1px solid rgba(255,255,255,.14); color:#fff; text-decoration:none; flex-shrink:0; }
.upgrade-pill b{ display:block; font-size:12.5px; } .upgrade-pill small{ font-size:11px; color:#c9d8f5; } .upgrade-pill em{ font-style:normal; font-size:11.5px; font-weight:800; background:#fff; color:#0f1b3d; padding:5px 11px; border-radius:99px; }
.upgrade-pill.urgent{ background:linear-gradient(135deg,#b45309,#dc2626); border-color:rgba(255,255,255,.25); } .upgrade-pill:hover{ filter:brightness(1.1); }
@media (max-height:760px){ .upgrade-pill small{ display:none; } }
/* icons and badges for the newer menu items so they match the rest */
.app-nav a[href="kyc"]::before{ content:"\1F3E6"; }
.app-nav a[href="billing"]::before{ content:"\1F48E"; }
.app-nav a[href="kyc"] .badge-count, .app-nav a[href="billing"] .badge-count{ font-size:9px; letter-spacing:.04em; padding:1px 6px; }
.app-nav a{ white-space:nowrap; }
.app-nav a .kyc-dot{ margin-left:auto; width:9px; height:9px; border-radius:50%; background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.25); flex-shrink:0; }
.app-nav a[href="crm"]::before{ content:"\1F4D2"; }