/* =============================================================================
   QuickBooks Replace — lists.css
   Centers (Customer / Vendor / Employee / Report), list windows, registers,
   Pay Bills, Make Deposits, Reconcile.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Centers
   ---------------------------------------------------------------------- */
.qb-center { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qb-center-main { flex: 1 1 auto; display: flex; min-height: 0; }

.qb-center-left {
  width: 320px; flex: 0 0 auto; display: flex; flex-direction: column;
  border-right: 1px solid #C4CCD4; background: #FBFCFD; min-width: 0;
}
.qb-center-left .qb-cl-tabs { display: flex; border-bottom: 1px solid #C4CCD4; }
.qb-center-left .qb-cl-tab {
  flex: 1 1 0; text-align: center; padding: 6px 4px; font-size: 12px;
  background: linear-gradient(to bottom, #EEF3F8, #DCE5EE);
  border-right: 1px solid #C4CCD4;
}
.qb-center-left .qb-cl-tab.active { background: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 #2A5DB0; }
.qb-center-left .qb-cl-filters { padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; border-bottom: 1px solid #DDE3E9; }
.qb-center-left .qb-cl-filters .qb-fieldwrap .qb-field { height: 21px; font-size: 11.5px; }
.qb-center-left .qb-cl-filters .qb-fieldwrap .qb-drop { height: 19px; }

.qb-center-right { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.qb-cinfo {
  flex: 0 0 auto; padding: 10px 14px; border-bottom: 1px solid #D6DDE4; background: #fff;
  display: flex; gap: 20px; align-items: flex-start;
}
.qb-cinfo .qb-ci-main { flex: 1 1 auto; min-width: 0; }
.qb-cinfo .qb-ci-name {
  font-size: 17px; font-weight: 600; color: #22384C; margin-bottom: 2px;
  display: flex; align-items: center; gap: 10px;
}
.qb-cinfo .qb-ci-name .qb-ci-type { font-size: 11px; font-weight: 400; color: #6A7B8A; }
.qb-cinfo .qb-ci-edit {
  font-size: 11px; color: var(--qb-link); display: inline-flex; align-items: center; gap: 4px;
}
.qb-cinfo .qb-ci-cols { display: flex; gap: 26px; margin-top: 8px; flex-wrap: wrap; }
.qb-cinfo .qb-ci-col { min-width: 150px; }
.qb-cinfo .qb-ci-kv { display: flex; gap: 8px; font-size: 11.5px; padding: 1px 0; }
.qb-cinfo .qb-ci-kv .k { color: #6A7B8A; min-width: 84px; }
.qb-cinfo .qb-ci-kv .v { color: #22384C; }
.qb-cinfo .qb-ci-addr { white-space: pre-line; font-size: 11.5px; color: #22384C; line-height: 15px; }
.qb-cinfo .qb-ci-reports {
  flex: 0 0 auto; width: 178px; border-left: 1px solid #E4E9EE; padding-left: 14px;
}
.qb-cinfo .qb-ci-reports h4 {
  margin: 0 0 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #6A7B8A;
}
.qb-cinfo .qb-ci-reports a { display: block; font-size: 11.5px; color: var(--qb-link); padding: 2px 0; }
.qb-cinfo .qb-ci-reports a:hover { text-decoration: underline; }
.qb-cinfo .qb-ci-balance {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid #E4E9EE;
  font-size: 11.5px; display: flex; justify-content: space-between;
}
.qb-cinfo .qb-ci-balance b { font-family: var(--qb-font-num); font-size: 13px; }

/* -------------------------------------------------------------------------
   List windows
   ---------------------------------------------------------------------- */
.qb-list { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qb-list .qb-searchbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; background: #F4F6F8; border-bottom: 1px solid #D4DAE0; font-size: 11.5px;
}
.qb-list .qb-searchbar .qb-fieldwrap { width: 200px; }
.qb-list .qb-searchbar .qb-field { height: 21px; font-size: 11.5px; }

.qb-tree-indent1 { padding-left: 18px !important; }
.qb-tree-indent2 { padding-left: 34px !important; }
.qb-tree-indent3 { padding-left: 50px !important; }
.qb-diamond { color: #2A2A2A; font-size: 8px; }
.qb-inactive-x { color: #8A8A8A; font-weight: 700; }

/* -------------------------------------------------------------------------
   Registers
   ---------------------------------------------------------------------- */
.qb-register { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qb-register .qb-reg-grid td { vertical-align: top; padding-top: 2px; }
.qb-register .qb-reg-grid tbody tr.two-line td { height: 38px; }
.qb-register .qb-reg-sub { display: block; font-size: 11px; color: #6E6E6E; }
.qb-register .qb-reg-grid tbody tr.sel .qb-reg-sub { color: #E8F5DE; }
.qb-register .qb-reg-grid tbody tr.editing .qb-reg-sub { color: #6E6E6E; }
.qb-register .qb-reg-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; background: #F2F4F6; border-top: 1px solid #C8CFD6;
}
.qb-register .qb-reg-foot .qb-spacer { flex: 1 1 auto; }
.qb-register .qb-reg-ending { text-align: right; font-size: 11.5px; }
.qb-register .qb-reg-ending b { font-family: var(--qb-font-num); font-size: 14px; display: block; }
.qb-cleared-x { color: #2E7D32; font-weight: 700; }
.qb-cleared-star { color: #B36B00; font-weight: 700; }

/* -------------------------------------------------------------------------
   Pay Bills / Make Deposits / Reconcile
   ---------------------------------------------------------------------- */
.qb-paybills { display: flex; flex-direction: column; height: 100%; background: var(--qb-dialog-bg); padding: 10px 12px; gap: 8px; }
.qb-paybills .qb-pb-grid { flex: 1 1 auto; min-height: 120px; }
.qb-paybills .qb-pb-totals {
  display: flex; align-items: center; gap: 10px; padding: 5px 8px;
  background: #EDEFF2; border: 1px solid #D2D6DB; font-size: 11.5px;
}
.qb-paybills .qb-pb-totals .qb-spacer { flex: 1 1 auto; }
.qb-paybills .qb-pb-discount { display: flex; gap: 20px; }
.qb-paybills .qb-pb-discount > div { flex: 1 1 0; }

.qb-deposit { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qb-deposit .qb-dp-head { display: flex; gap: 16px; padding: 10px 14px; align-items: flex-end; border-bottom: 1px solid #E0E0E0; }
.qb-deposit .qb-dp-note { padding: 7px 14px; font-size: 11.5px; color: #4A4A4A; background: #F7F9FB; border-bottom: 1px solid #E4E4E4; }
.qb-deposit .qb-dp-cashback { padding: 10px 14px; border-top: 1px solid #E0E0E0; background: #FAFAFA; }
.qb-deposit .qb-dp-cashback .row { display: flex; gap: 12px; align-items: flex-end; margin-top: 6px; }

.qb-reconcile { display: flex; flex-direction: column; height: 100%; background: var(--qb-dialog-bg); }
.qb-reconcile .qb-rc-panes { flex: 1 1 auto; display: flex; gap: 8px; padding: 8px 10px; min-height: 0; }
.qb-reconcile .qb-rc-pane { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--qb-grid-border); }
.qb-reconcile .qb-rc-pane > h4 {
  margin: 0; padding: 5px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  background: #E8EDF2; border-bottom: 1px solid #C8D0D8; color: #33485C;
}
.qb-reconcile .qb-rc-summary { display: flex; gap: 24px; padding: 10px 14px; border-top: 1px solid #D2D6DB; background: #F0F2F5; }
.qb-reconcile .qb-rc-sum-left { flex: 1 1 auto; font-size: 11.5px; }
.qb-reconcile .qb-rc-sum-right { width: 300px; }
.qb-reconcile .qb-rc-line { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 0; }
.qb-reconcile .qb-rc-line .v { font-family: var(--qb-font-num); }
.qb-reconcile .qb-rc-line.diff { font-weight: 700; border-top: 1px solid #C4C8CD; margin-top: 4px; padding-top: 5px; font-size: 13px; }
.qb-reconcile .qb-rc-line.diff .v.ok { color: #2E7D32; }
.qb-reconcile .qb-rc-line.diff .v.bad { color: var(--qb-negative); }

/* -------------------------------------------------------------------------
   Report Center
   ---------------------------------------------------------------------- */
.qb-repcenter { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qb-repcenter .qb-rc-body { flex: 1 1 auto; display: flex; min-height: 0; }
.qb-repcenter .qb-rc-cats { width: 210px; flex: 0 0 auto; border-right: 1px solid #D0D6DC; background: #F7F9FB; overflow: auto; }
.qb-repcenter .qb-rc-cat { padding: 7px 12px; font-size: 12px; border-bottom: 1px solid #E8ECF0; }
.qb-repcenter .qb-rc-cat:hover { background: #E8F0F8; }
.qb-repcenter .qb-rc-cat.active { background: #DCE9F7; font-weight: 600; box-shadow: inset 3px 0 0 #2A5DB0; }
.qb-repcenter .qb-rc-list { flex: 1 1 auto; overflow: auto; padding: 12px 16px; }
.qb-repcenter .qb-rc-groupname { font-size: 13px; font-weight: 600; color: #22384C; margin: 4px 0 10px; }
.qb-repcenter .qb-rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 14px; }
.qb-repcenter .qb-rc-card { border: 1px solid #DCE2E8; border-radius: 3px; padding: 10px; background: #FCFDFE; }
.qb-repcenter .qb-rc-card:hover { border-color: #A9C5E2; box-shadow: 0 1px 5px rgba(42,93,176,.16); }
.qb-repcenter .qb-rc-thumb {
  height: 88px; border: 1px solid #E2E8EE; background: #fff; margin-bottom: 8px;
  overflow: hidden; padding: 6px;
}
.qb-repcenter .qb-rc-thumb .tline { height: 4px; background: #E4E9EE; margin-bottom: 4px; border-radius: 2px; }
.qb-repcenter .qb-rc-thumb .tline.h { background: #C3D3E3; width: 52%; height: 6px; margin: 0 auto 7px; }
.qb-repcenter .qb-rc-cname { font-size: 12px; font-weight: 600; color: #22384C; margin-bottom: 3px; }
.qb-repcenter .qb-rc-cdesc { font-size: 11px; color: #6A7B8A; line-height: 14px; min-height: 28px; }
.qb-repcenter .qb-rc-cacts { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; }
.qb-repcenter .qb-rc-cacts a { color: var(--qb-link); }
.qb-repcenter .qb-rc-rows .qb-rc-row {
  display: flex; gap: 14px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid #EEF1F4;
}
.qb-repcenter .qb-rc-rows .qb-rc-row:hover { background: #F2F7FC; }
.qb-repcenter .qb-rc-rows .n { width: 250px; flex: 0 0 auto; font-size: 12px; color: var(--qb-link); }
.qb-repcenter .qb-rc-rows .d { flex: 1 1 auto; font-size: 11.5px; color: #6A7B8A; }

/* -------------------------------------------------------------------------
   Income / Bill Tracker tiles
   ---------------------------------------------------------------------- */
.qb-tracker { display: flex; flex-direction: column; height: 100%; background: #fff; }
.qb-tracker .qb-tk-tiles { display: flex; gap: 2px; padding: 10px 12px; flex: 0 0 auto; }
.qb-tracker .qb-tk-tile {
  flex: 1 1 0; padding: 9px 12px; color: #fff; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.qb-tracker .qb-tk-tile .c { font-size: 11px; letter-spacing: .4px; text-transform: uppercase; opacity: .92; }
.qb-tracker .qb-tk-tile .v { font-size: 18px; font-weight: 600; font-family: var(--qb-font-num); }
.qb-tracker .qb-tk-tile.sel { box-shadow: inset 0 -4px 0 rgba(0,0,0,.3); }
.qb-tk-gray   { background: #8A97A3; }
.qb-tk-orange { background: #E08A21; }
.qb-tk-yellow { background: #D5B428; }
.qb-tk-blue   { background: #3E77B8; }
.qb-tk-red    { background: #C0504D; }
.qb-tk-green  { background: #5A9E3C; }