/* ==========================================================================
   BIZWAVE ERP — HOME DASHBOARD (Exact Match to QuickBooks Online Screenshot 1 & 2)
   ========================================================================== */

.home-dashboard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. TOP HORIZONTAL PILL TABS BAR (Screenshot 1)
   -------------------------------------------------------------------------- */
.home-top-pills-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 4px 0 8px 0;
  border-bottom: 1px solid #EBECEF;
}

.home-top-pills-scroll {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  overflow-x: auto;
}

.home-top-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 8px;
  background-color: #FFFFFF;
  border: 1px solid #D4D7DC;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: var(--fw-semibold);
  color: #393A3D;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.home-top-pill:hover {
  border-color: #8D9096;
  background-color: #F8F9FA;
}

.home-top-pill.is-active {
  border-color: #2CA01C;
  background-color: #FFFFFF;
  box-shadow: 0 1px 4px rgba(44, 160, 28, 0.15);
}

.home-top-pill-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background-color: #0E3525;
  color: #FFFFFF;
}

.home-top-pill-circle--green { background-color: #0E3525; }
.home-top-pill-circle--blue  { background-color: #005A99; }
.home-top-pill-circle--teal  { background-color: #00877C; }
.home-top-pill-circle--dark  { background-color: #11284A; }

.home-top-pill-nav {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #D4D7DC;
  background-color: #FFFFFF;
  color: #6B6C72;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
}
.home-top-pill-nav:hover {
  border-color: #8D9096;
  background-color: #F8F9FA;
}

.home-top-pills-viewall {
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-link);
  text-decoration: none;
  white-space: nowrap;
}
.home-top-pills-viewall:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   2. ACTION CHIPS BAR (Screenshot 2)
   -------------------------------------------------------------------------- */
.home-action-chips-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 4px 0;
}

.home-action-chips-label {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: #6B6C72;
  margin-right: 4px;
}

.home-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid #D4D7DC;
  background-color: #FFFFFF;
  color: #393A3D;
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.home-chip-btn:hover {
  border-color: #8D9096;
  background-color: #F4F5F8;
  color: #393A3D;
  text-decoration: none;
}

.home-chip-btn.is-primary {
  background-color: #E9F6E7;
  border-color: #2CA01C;
  color: #2CA01C;
}

/* --------------------------------------------------------------------------
   3. CUSTOMER AGENT CARD (Screenshot 1)
   -------------------------------------------------------------------------- */
.home-agent-card {
  background-color: #FFFFFF;
  border: 1px solid #D4D7DC;
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
}

.home-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.home-agent-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.home-agent-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-agent-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: #393A3D;
}

.home-agent-more-btn {
  background: none;
  border: none;
  color: #8D9096;
  cursor: pointer;
  font-size: 14px;
}

.home-agent-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.home-agent-text {
  font-size: 13px;
  color: #55575C;
  margin: 0;
  line-height: 1.4;
}

.home-agent-link {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--c-link);
  text-decoration: none;
  white-space: nowrap;
}
.home-agent-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. SECTION HEADING & 2-COLUMN LAYOUT
   -------------------------------------------------------------------------- */
.home-section-title {
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: #393A3D;
  margin: var(--sp-1) 0 0 0;
}

.home-dashboard-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.home-dashboard-left,
.home-dashboard-right {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  .home-dashboard-layout {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   5. SALES & GET PAID FUNNEL (Screenshot 1 & 2)
   -------------------------------------------------------------------------- */
.home-funnel-card {
  background-color: #FFFFFF;
  border: 1px solid #D4D7DC;
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-1);
}

.home-funnel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}

.home-funnel-title {
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #393A3D;
}

.home-funnel-period-select {
  font-size: 12px;
  color: var(--c-text-2);
  cursor: pointer;
}

.home-funnel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}

@media (max-width: 900px) {
  .home-funnel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.home-funnel-tile {
  background-color: #FFFFFF;
  border: 1px solid #D4D7DC;
  border-radius: var(--r-card);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  min-height: 125px;
}

/* Green top accent bar matching Screenshot 1 */
.home-funnel-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: var(--c-primary);
}

.home-funnel-tile.is-cta {
  background-color: #FAFBFD;
}
.home-funnel-tile.is-cta::before {
  display: none;
}

.home-funnel-cta-title {
  font-size: 13px;
  font-weight: var(--fw-bold);
  color: #393A3D;
  margin-bottom: 4px;
  line-height: 1.25;
}

.home-funnel-cta-sub {
  font-size: 11px;
  color: var(--c-text-2);
  margin-bottom: 12px;
  line-height: 1.3;
}

.home-funnel-tile__label {
  font-size: var(--fs-xs);
  color: #6B6C72;
  margin-bottom: var(--sp-1);
}

.home-funnel-tile__amount {
  font-size: 21px;
  font-weight: var(--fw-bold);
  color: #393A3D;
  margin-bottom: var(--sp-2);
  line-height: 1.1;
}

.home-funnel-tile__badge {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  line-height: 1.2;
}

.home-funnel-tile__badge--warning {
  background-color: #FFF3E5;
  color: #B25900;
}

.home-funnel-tile__badge--danger {
  background-color: #FDECEA;
  color: #D52B1E;
}

.home-funnel-tile__badge--success {
  background-color: #E9F6E7;
  color: #108000;
}

/* --------------------------------------------------------------------------
   6. BANK ACCOUNTS WIDGET (Screenshot 1)
   -------------------------------------------------------------------------- */
.home-bank-widget {
  background-color: #FFFFFF;
  border: 1px solid #D4D7DC;
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-1);
}

.home-bank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.home-bank-title {
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #393A3D;
}

.home-bank-balance-total {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: #393A3D;
  margin-bottom: var(--sp-3);
  line-height: 1.1;
}

.home-bank-accounts-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-top: 1px solid #EBECEF;
  padding-top: var(--sp-3);
}

.home-bank-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid #F4F5F8;
}
.home-bank-item:last-child {
  border-bottom: none;
}

.home-bank-logo-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-bank-info {
  flex: 1;
}

.home-bank-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #393A3D;
  margin-bottom: 2px;
}

.home-bank-sub {
  font-size: 11px;
  color: #6B6C72;
  line-height: 1.35;
}

.home-bank-figures {
  text-align: right;
  align-self: center;
}

.home-bank-review-link {
  font-size: 12px;
  color: var(--c-link);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
}
.home-bank-review-link:hover {
  text-decoration: underline;
}

/* Escrow Compliance & Collection Agent Card */
.home-agent-card {
  background: linear-gradient(135deg, #FAFBFD 0%, #FFFFFF 100%);
  border: 1px solid #D4D7DC;
  border-left: 4px solid #D4AF37;
  border-radius: var(--r-card);
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.home-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.home-agent-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-agent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.home-agent-icon .erp-brand-logo-img {
  width: 26px;
  height: 26px;
}

.home-agent-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #393A3D;
}

.home-agent-more-btn {
  background: none;
  border: none;
  color: #6B6C72;
  cursor: pointer;
  font-size: 14px;
}

.home-agent-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-agent-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: #55575D;
  line-height: 1.5;
}

.home-agent-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: #0077C5;
  text-decoration: none;
  white-space: nowrap;
}
.home-agent-link:hover {
  text-decoration: underline;
}

.home-bank-logo-icon .erp-brand-logo-img {
  width: 28px;
  height: 28px;
}