/* ============================================================
   CSB Heap Design — Patch 4
   ------------------------------------------------------------
   Agent dashboard overview tab reordering + polish:
   1. Move .total-bar (Trackable Records hero) to the TOP
      visually using flex order
   2. Compact the big historical card at the bottom — small
      one-liner, no giant "29" treatment
   3. Tighten the total-bar to match mockup (giant number +
      mint "X% handled" chip + thin progress bar)
   ============================================================ */

/* ============================================================
   1. Reorder overview so total-bar renders FIRST
   ============================================================ */

/* Make the overview container a flex column so we can use `order` */
#dashboard-screen #dash-body {
  display: flex !important;
  flex-direction: column !important;
}

/* Give natural source order (0) to everything, then explicitly
   pull total-bar to the top and push historical to bottom. */
#dashboard-screen #dash-body > * {
  order: 10;
}

/* Total bar first */
#dashboard-screen #dash-body > .total-bar {
  order: 1 !important;
}

/* Summary cards right after */
#dashboard-screen #dash-body > .summary-cards {
  order: 2 !important;
}
#dashboard-screen #dash-body > .summary-cards-row2 {
  order: 3 !important;
}

/* The historical card is wrapped in an inline-styled <div> with
   margin-bottom:24px, then contains the .summary-card.card-historical.
   Target the wrapper directly by its contents. */
#dashboard-screen #dash-body > div:has(.card-historical) {
  order: 20 !important;
}

/* Section title ("My paid in policies", etc) after historical card */
#dashboard-screen #dash-body > .section-title {
  order: 15 !important;
}
#dashboard-screen #dash-body > .carrier-list {
  order: 16 !important;
}

/* ============================================================
   2. Tighten the .total-bar to match the mockup
   ============================================================ */

/* Total bar layout — stack on mobile, side-by-side on desktop */
#dashboard-screen .total-bar {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 22px 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative !important;
  gap: 12px !important;
}

/* Add the "TRACKABLE RECORDS" mono label + green square dot */
#dashboard-screen .total-bar::before {
  content: 'TRACKABLE RECORDS' !important;
  display: block !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  color: #999999 !important;
  padding-left: 14px !important;
  position: relative !important;
}
#dashboard-screen .total-bar::after {
  content: '' !important;
  position: absolute !important;
  left: 22px !important;
  top: 27px !important;
  width: 6px !important;
  height: 6px !important;
  background: #3ecf8e !important;
  border-radius: 1px !important;
}

/* The first child div contains "Trackable Records" text + big number.
   Hide the text label (we added it above), show the number big. */
#dashboard-screen .total-bar > div:first-child {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin: 0 !important;
}

#dashboard-screen .total-bar > div:first-child > div:first-child {
  /* "Trackable Records" gray label — hidden since we made our own */
  display: none !important;
}

#dashboard-screen .total-bar > div:first-child > div:last-child {
  /* The big number (316) */
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 44px !important;
  font-weight: 500 !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  color: #fafafa !important;
}

/* The second child contains the % handled + historical caption + progress bar */
#dashboard-screen .total-bar > div:last-child {
  margin: 0 !important;
  flex: none !important;
  width: 100% !important;
}

/* The top line inside the second child: "X% handled   N historical" */
#dashboard-screen .total-bar > div:last-child > div:first-child {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  color: #737373 !important;
  margin-bottom: 10px !important;
}

/* The "X% handled" span — make it a mint pill */
#dashboard-screen .total-bar > div:last-child > div:first-child > span:first-child {
  display: inline-block !important;
  background: rgba(62, 207, 142, 0.12) !important;
  color: #3ecf8e !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* The "N historical" span */
#dashboard-screen .total-bar > div:last-child > div:first-child > span:last-child {
  color: #525252 !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

/* The progress bar — make it thin, 2px */
#dashboard-screen .total-bar .progress-bar {
  height: 2px !important;
  background: #1a1a1a !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
}

/* Place the big 316 AND the progress bar side-by-side on wider screens */
@media (min-width: 700px) {
  #dashboard-screen .total-bar {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 24px !important;
    row-gap: 8px !important;
  }
  #dashboard-screen .total-bar::before {
    grid-column: 1 / -1 !important;
  }
  #dashboard-screen .total-bar > div:first-child {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  #dashboard-screen .total-bar > div:last-child {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
}

/* ============================================================
   3. Compact the historical card at bottom
   ============================================================ */

#dashboard-screen #dash-body > div:has(> .card-historical) {
  margin: 0 !important;
  padding: 10px 22px !important;
  border-top: 1px solid #1a1a1a !important;
}

#dashboard-screen .summary-card.card-historical {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
}

#dashboard-screen .summary-card.card-historical::before {
  margin: 0 !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

#dashboard-screen .summary-card.card-historical .card-icon {
  display: none !important;
}

#dashboard-screen .summary-card.card-historical .card-count {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #999999 !important;
  margin: 0 !important;
  display: inline !important;
}

#dashboard-screen .summary-card.card-historical .card-label {
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #737373 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
  display: inline !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* ============================================================
   4. Make sure summary cards fill row properly (4+2 layout)
      Override patches 2 and 3 so we go back to 4 cols on top row,
      stretch to 2 wide cards on bottom row.
   ============================================================ */

#dashboard-screen .summary-cards {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 16px 22px 0 !important;
  margin: 0 !important;
}

/* Bottom row: 2 cards stretched across the same 4-col grid. 
   Make each span 2 columns so they fill the row evenly. */
#dashboard-screen .summary-cards-row2 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 10px 22px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

#dashboard-screen .summary-cards-row2 > .summary-card {
  grid-column: span 2 !important;
}

/* Mobile: drop to 2 cols */
@media (max-width: 700px) {
  #dashboard-screen .summary-cards,
  #dashboard-screen .summary-cards-row2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #dashboard-screen .summary-cards-row2 > .summary-card {
    grid-column: span 1 !important;
  }
}

/* ============================================================
   Briefing bar (top of overview tab)
   ============================================================ */
#dashboard-screen .heap-briefing {
  padding: 14px 22px !important;
  margin: 0 !important;
  border-bottom: 1px solid #1a1a1a !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #e5e5e5 !important;
  position: relative !important;
  padding-left: 42px !important;
  line-height: 1.4 !important;
}

#dashboard-screen .heap-briefing::before {
  content: '' !important;
  position: absolute !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 1px !important;
}

#dashboard-screen .heap-briefing-label {
  font-family: ui-serif, Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  margin-right: 4px !important;
}

/* Clean (green) — "Nice — your board's clean today" */
#dashboard-screen .heap-briefing-clean {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), transparent 70%) !important;
}
#dashboard-screen .heap-briefing-clean::before {
  background: #22c55e !important;
}
#dashboard-screen .heap-briefing-clean .heap-briefing-label {
  color: #22c55e !important;
}

/* Info (blue-ish) — "Heads up — X future records" */
#dashboard-screen .heap-briefing-info {
  background: linear-gradient(90deg, rgba(91, 158, 255, 0.08), transparent 70%) !important;
}
#dashboard-screen .heap-briefing-info::before {
  background: #5b9eff !important;
}
#dashboard-screen .heap-briefing-info .heap-briefing-label {
  color: #fdba74 !important;
}

/* Warn (warm orange) — "Heads up — X pending" or chargebacks */
#dashboard-screen .heap-briefing-warn {
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.10), transparent 70%) !important;
}
#dashboard-screen .heap-briefing-warn::before {
  background: #fb923c !important;
  animation: heap-breathe 2s ease-in-out infinite !important;
}
#dashboard-screen .heap-briefing-warn .heap-briefing-label {
  color: #fdba74 !important;
}

/* Urgent (red) — "Urgent — X records need a look" */
#dashboard-screen .heap-briefing-urgent {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), transparent 70%) !important;
}
#dashboard-screen .heap-briefing-urgent::before {
  background: #ef4444 !important;
  animation: heap-breathe-urgent 1.5s ease-in-out infinite !important;
}
#dashboard-screen .heap-briefing-urgent .heap-briefing-label {
  color: #ef4444 !important;
}

/* Make sure the briefing bar sits right after the tab bar, not pushed around by flex order */
#dashboard-screen #dash-body > .heap-briefing {
  order: 0 !important;
  order: calc(0.5) !important; /* Between tab-bar (0) and total-bar (1) */
}

/* ============================================================
   Card meta line (under the number + label)
   ============================================================ */
#dashboard-screen .card-meta,
#manager-screen .card-meta {
  display: block !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #737373 !important;
  margin-top: 12px !important;
  letter-spacing: 0.1px !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* ============================================================
   Start Checking — Carrier picker modal
   ============================================================ */
.heap-picker-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  animation: heap-fade-in 0.2s ease !important;
}

@keyframes heap-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.heap-picker-sheet {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-top: 2px solid #3ecf8e !important;
  border-radius: 6px !important;
  padding: 28px 24px 20px !important;
  max-width: 420px !important;
  width: 100% !important;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.8) !important;
  animation: heap-slide-up 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes heap-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.heap-picker-title {
  font-family: ui-serif, Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.3px !important;
  color: #fafafa !important;
  margin-bottom: 6px !important;
}

.heap-picker-sub {
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #737373 !important;
  margin-bottom: 18px !important;
}

.heap-picker-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
}

.heap-picker-row {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  border-left: 2px solid #ef4444 !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
  font-family: inherit !important;
  text-align: left !important;
}

.heap-picker-row:hover {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: #2a2a2a !important;
  border-left-color: #ef4444 !important;
  transform: translateX(2px) !important;
}

.heap-picker-carrier {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #fafafa !important;
}

.heap-picker-count {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  min-width: 32px !important;
  text-align: center !important;
}

.heap-picker-cancel {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  color: #737373 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 10px !important;
  width: 100% !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.heap-picker-cancel:hover {
  border-color: #3ecf8e !important;
  color: #3ecf8e !important;
  background: rgba(62, 207, 142, 0.04) !important;
}