/* ============================================================
   Cash Flow Settings redesign — compact, colorful pills,
   single control strip, soft row separation.
   ============================================================ */

/* -------- Page-head matches GL redesign (transparent, sharp) -------- */
html body.theme-light.theme-light.theme-light .app .main:has(.cashflow-settings-stack) .page-head {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 2px 4px 8px !important;
  margin-bottom: 0 !important;
}
html body.theme-light .main:has(.cashflow-settings-stack) .page-head h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: #0b1430 !important;
}

/* -------- Outer stack — compact gap -------- */
html body.theme-light .cashflow-settings-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* -------- Cash Flow Transactions panel — floating card -------- */
html body.theme-light .cashflow-settings-stack .cashflow-workbench-panel {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #ecf0f6 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 6px 16px rgba(15,23,42,.04) !important;
  backdrop-filter: none !important;
  padding: 14px 18px !important;
}

/* -------- Panel head row — title only -------- */
html body.theme-light .cashflow-workbench-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
html body.theme-light .cashflow-workbench-head .panel-title {
  font-size: 15px !important;
  font-weight: 650 !important;
  color: #0b1430 !important;
  margin: 0 !important;
}
html body.theme-light .cashflow-workbench-head .muted {
  font-size: 12px !important;
  color: #64748b !important;
}

/* -------- Control strip — two rows: filters on top, stats+buttons below -------- */
html body.theme-light .cashflow-control-strip {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 4px 0 14px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #f1f3f8 !important;
}
html body.theme-light .cashflow-filter-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}
html body.theme-light .cashflow-action-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Flat filter inputs (no labels — placeholder only) — aligned to same baseline */
html body.theme-light .cashflow-filter-input {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e3e8f3 !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #0b1430 !important;
  box-shadow: none !important;
  height: 32px !important;
  min-height: 32px !important;
  flex: 0 0 auto !important;
}
html body.theme-light .cashflow-filter-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}
html body.theme-light .cashflow-filter-input[type="date"] { min-width: 130px !important; max-width: 150px !important; }
html body.theme-light .cashflow-filter-amount { min-width: 110px !important; max-width: 130px !important; }
html body.theme-light .cashflow-filter-account { min-width: 180px !important; max-width: 220px !important; }
html body.theme-light .cashflow-filter-search { flex: 0 1 240px !important; min-width: 180px !important; max-width: 280px !important; }

/* Stats pill — own row above buttons, bigger and bolder */
html body.theme-light .cashflow-stats-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: #f4f5fa !important;
  border: 1px solid #e1e5ee !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  color: #334155 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
}
html body.theme-light .cashflow-stats-pill::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #7a4dff !important;
  display: inline-block !important;
  box-shadow: 0 0 0 2px rgba(124,92,255,.18) !important;
}

/* Action buttons — right side, aligned to same height as filters */
html body.theme-light .cashflow-action-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  align-self: center !important;
}
html body.theme-light .cashflow-action-btn {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e3e8f3 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  box-shadow: none !important;
  height: 32px !important;
  min-height: 32px !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}
html body.theme-light .cashflow-action-btn:hover {
  background: #f5f7fb !important;
  border-color: #cdd6e8 !important;
  color: #0b1430 !important;
}
html body.theme-light .cashflow-action-btn.is-active-unmapped {
  background: linear-gradient(135deg, #6d4ce8 0%, #4f6dff 100%) !important;
  background-image: linear-gradient(135deg, #6d4ce8 0%, #4f6dff 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 3px 10px rgba(109,76,232,.22) !important;
}
html body.theme-light .cashflow-action-btn.is-active-mapped {
  background: rgba(34,197,94,.10) !important;
  color: #15803d !important;
  border: 1px solid rgba(34,197,94,.32) !important;
}
html body.theme-light .cashflow-action-add {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #6d4ce8 !important;
  border: 1px solid rgba(124,92,255,.32) !important;
  background: rgba(124,92,255,.08) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html body.theme-light .cashflow-action-add:hover {
  background: rgba(124,92,255,.14) !important;
  border-color: rgba(124,92,255,.5) !important;
}

/* Hide help button + bigger, bolder Company select on cashflow page */
html body.theme-light:has(.cashflow-settings-stack) .page-head .help-btn {
  display: none !important;
}
html body.theme-light:has(.cashflow-settings-stack) .page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
}
html body.theme-light:has(.cashflow-settings-stack) .page-head > div:first-child {
  flex: 0 0 auto !important;
}
html body.theme-light:has(.cashflow-settings-stack) .page-head .actions {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body.theme-light .cashflow-company-select {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #d8dee9 !important;
  border-radius: 10px !important;
  padding: 0 36px 0 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0b1430 !important;
  height: 38px !important;
  min-height: 38px !important;
  min-width: 200px !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.03) !important;
  letter-spacing: -.005em !important;
}
html body.theme-light .cashflow-company-select:focus {
  outline: none !important;
  border-color: #7a4dff !important;
  box-shadow: 0 0 0 3px rgba(122,77,255,.12) !important;
}

/* Make the workbench fill vertical space — table extends, less empty bottom */
html body.theme-light .cashflow-workbench-panel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: calc(100vh - 140px) !important;
}
html body.theme-light .cashflow-workbench-panel .table-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}
html body.theme-light .cashflow-settings-stack {
  flex: 1 1 auto !important;
  min-height: calc(100vh - 100px) !important;
}

/* -------- Workbench table — clean rows, light header -------- */
html body.theme-light .cashflow-workbench-panel .table-scroll {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}
html body.theme-light .cashflow-workbench-panel table.grid {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
  width: 100% !important;
}
html body.theme-light .cashflow-workbench-panel table.grid thead th {
  background: transparent !important;
  background-image: none !important;
  color: #6b7280 !important;
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-weight: 600 !important;
  border: 0 !important;
  border-bottom: 1px solid #eaecf2 !important;
  padding: 10px 12px !important;
  text-align: left !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
}
html body.theme-light .cashflow-workbench-panel table.grid tbody td {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid #f3f4f8 !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle !important;
}
html body.theme-light .cashflow-workbench-panel table.grid tbody tr:hover td {
  background: #fafbfd !important;
}
html body.theme-light .cashflow-workbench-panel table.grid tbody tr:last-child td {
  border-bottom: 0 !important;
}
html body.theme-light .cashflow-workbench-panel table.grid tbody td .muted {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Category orange pill */
html body.theme-light .cashflow-category-pill {
  background: rgba(251,146,60,.10) !important;
  background-image: none !important;
  border: 1px solid rgba(251,146,60,.30) !important;
  color: #c2410c !important;
  border-radius: 999px !important;
  padding: 5px 28px 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  min-height: 28px !important;
  /* Sized by its table column — a fixed min-width made the pill wider than the
     cell and it overlapped the ITEM column. */
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

/* Item purple pill */
html body.theme-light .cashflow-item-pill {
  background: rgba(124,92,255,.08) !important;
  background-image: none !important;
  border: 1px solid rgba(124,92,255,.28) !important;
  color: #6d4ce8 !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  min-height: 28px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  text-overflow: ellipsis !important;
}
html body.theme-light .cashflow-item-pill::placeholder {
  color: rgba(109,76,232,.5) !important;
  font-weight: 500 !important;
}

/* Note input — neutral, soft */
html body.theme-light .cashflow-note-input {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e3e8f3 !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  color: #475569 !important;
  min-height: 28px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* Status badges — purple unmapped, green mapped */
html body.theme-light .cashflow-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}
html body.theme-light .cashflow-status-badge::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  display: inline-block !important;
}
html body.theme-light .cashflow-status-unmapped {
  background: rgba(124,92,255,.10) !important;
  color: #6d4ce8 !important;
  border: 1px solid rgba(124,92,255,.28) !important;
}
html body.theme-light .cashflow-status-unmapped::before { background: #7a4dff !important; }
html body.theme-light .cashflow-status-mapped {
  background: rgba(34,197,94,.10) !important;
  color: #15803d !important;
  border: 1px solid rgba(34,197,94,.28) !important;
}
html body.theme-light .cashflow-status-mapped::before { background: #22c55e !important; }

/* Green Approve text button */
html body.theme-light .cashflow-approve-btn {
  background: rgba(34,197,94,.08) !important;
  background-image: none !important;
  border: 1px solid rgba(34,197,94,.32) !important;
  color: #15803d !important;
  border-radius: 8px !important;
  padding: 5px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  min-height: 30px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
}
html body.theme-light .cashflow-approve-btn:hover {
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.5) !important;
}
html body.theme-light .cashflow-approved-text {
  color: #15803d !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Load more strip */
html body.theme-light .cashflow-workbench-panel .cashflow-load-more {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 12px !important;
  margin-top: 8px !important;
  border-top: 1px solid #f1f3f8 !important;
}
html body.theme-light .cashflow-workbench-panel .cashflow-load-more .btn.secondary {
  background: #ffffff !important;
  border: 1px solid #e3e8f3 !important;
  color: #475569 !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
html body.theme-light .cashflow-workbench-panel .cashflow-load-more .muted {
  color: #94a3b8 !important;
  font-size: 12px !important;
}

/* Hide the legacy filter-bar / workbench-title styles that we replaced */
html body.theme-light .cashflow-workbench-panel .cashflow-filter-bar,
html body.theme-light .cashflow-workbench-panel .cashflow-workbench-title,
html body.theme-light .cashflow-workbench-panel .cashflow-status-toggle {
  /* no-op container resets if any leak through */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Validation message above panel */
html body.theme-light .cashflow-settings-stack .validation-box {
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}