/* ============================================================
   CSB Heap Design — Patch 2
   ------------------------------------------------------------
   Fixes against the live production HTML:
   1. Card grid: .summary-cards has 4 cards (not 3), needs 4-col
      .summary-cards-row2 has 2 cards, needs 2-col stretching
   2. Record detail modal (.modal-overlay / .modal-sheet)
   3. Welcome / Google sign-in card (.welcome-card)
   4. Sticky tab bar so it doesn't scroll away
   ============================================================ */

/* ============================================================
   FIX 1: Card grid layout
   ============================================================ */

/* Top row: 4 cards (Paid In, Active, Future, Pending) */
#dashboard-screen .summary-cards {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 20px 22px 10px !important;
  margin: 0 !important;
}

/* Bottom row: 2 cards (Needs Check, Resolved) — but make them
   the same width as the top row's cards, not 50/50 */
#dashboard-screen .summary-cards-row2 {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 0 22px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid #1a1a1a !important;
}

/* On smaller screens (tablet), drop to 2 cols */
@media (max-width: 900px) {
  #dashboard-screen .summary-cards,
  #dashboard-screen .summary-cards-row2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* On phones, stay 2 cols (already covered in main file but reinforce) */
@media (max-width: 600px) {
  #dashboard-screen .summary-cards,
  #dashboard-screen .summary-cards-row2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   FIX 2: Sticky tab bar so it doesn't scroll away
   ============================================================ */
#dashboard-screen .tab-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: #000000 !important;
}

/* ============================================================
   FIX 3: Record detail modal (.modal-overlay / .modal-sheet)
   ============================================================ */
.modal-overlay {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(4px) !important;
}

.modal-sheet {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-top: 2px solid #3ecf8e !important;
  border-radius: 4px !important;
  color: #fafafa !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6) !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
}

.modal-handle {
  background: #2a2a2a !important;
  width: 36px !important;
  height: 3px !important;
  border-radius: 2px !important;
  margin: 12px auto !important;
}

.modal-title {
  font-family: ui-serif, Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: -0.4px !important;
  color: #fafafa !important;
  text-transform: none !important;
}

.modal-subtitle {
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #737373 !important;
  font-weight: 400 !important;
  margin-top: 4px !important;
}

/* MBI row — make it pop */
.modal-mbi-row {
  background: #000000 !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 4px !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}

.modal-mbi-row > *:first-child {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
  color: #fafafa !important;
  font-weight: 500 !important;
}

/* Hide the clipboard emoji on the MBI copy button */
.modal-mbi-row button,
.modal-mbi-row [onclick*="copy"] {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  color: #999999 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
}
.modal-mbi-row button:hover,
.modal-mbi-row [onclick*="copy"]:hover {
  border-color: #3ecf8e !important;
  color: #3ecf8e !important;
}

/* Field rows: Carrier, Effective Date, Notes */
.modal-field {
  border-top: 1px solid #1a1a1a !important;
  padding: 14px 0 !important;
  margin: 0 !important;
}

.modal-field-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: #999999 !important;
  font-weight: 500 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.modal-field-label::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  background: #3ecf8e !important;
  border-radius: 1px !important;
}

.modal-field-value {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 14px !important;
  color: #fafafa !important;
  font-weight: 400 !important;
}

/* Carrier link inside modal-field-value */
.modal-field-value a {
  color: #5b9eff !important;
  text-decoration: none !important;
}
.modal-field-value a:hover {
  text-decoration: underline !important;
}

/* Notes input inside modal */
.modal-sheet input[type="text"],
.modal-sheet textarea,
.modal-sheet .notes-input {
  background: #000000 !important;
  border: 1px solid #1a1a1a !important;
  color: #fafafa !important;
  border-radius: 4px !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
}
.modal-sheet input[type="text"]:focus,
.modal-sheet textarea:focus,
.modal-sheet .notes-input:focus {
  border-color: #3ecf8e !important;
  outline: none !important;
}
.modal-sheet input::placeholder,
.modal-sheet textarea::placeholder {
  color: #525252 !important;
}

/* ADD button — green outline */
.modal-sheet button {
  background: transparent !important;
  border: 1px solid #3ecf8e !important;
  color: #3ecf8e !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.modal-sheet button:hover {
  background: rgba(62, 207, 142, 0.08) !important;
}

/* Status buttons row inside modal */
.modal-sheet .status-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.modal-sheet .status-btn {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  border-left-width: 2px !important;
  border-radius: 4px !important;
  color: #fafafa !important;
  text-align: left !important;
  padding: 12px 14px !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
.modal-sheet .status-btn:hover {
  background: rgba(62, 207, 142, 0.05) !important;
}

/* Status button color accents */
.modal-sheet .btn-confirmed,
.modal-sheet .status-btn[onclick*="confirmed"] {
  border-left-color: #22c55e !important;
}
.modal-sheet .status-btn[onclick*="future"] {
  border-left-color: #5b9eff !important;
}
.modal-sheet .btn-pending,
.modal-sheet .status-btn[onclick*="pending"] {
  border-left-color: #f59e0b !important;
}
.modal-sheet .btn-denied,
.modal-sheet .status-btn[onclick*="denied"] {
  border-left-color: #ef4444 !important;
}
.modal-sheet .btn-chargeback,
.modal-sheet .status-btn[onclick*="chargeback"] {
  border-left-color: #fb923c !important;
}

/* Hide all status button emoji icons */
.modal-sheet .status-btn-icon,
.modal-sheet .status-btn .status-btn-icon {
  display: none !important;
}

/* Strong text inside status btn (the label) */
.modal-sheet .status-btn strong {
  font-family: ui-mono, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: inherit !important;
}

/* The "Heads up — historical" callout at the bottom of the modal */
.modal-sheet [style*="background:var(--yellow-bg)"],
.modal-sheet [style*="background: var(--yellow-bg)"] {
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.08), transparent 70%) !important;
  border: none !important;
  border-top: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  color: #e5e5e5 !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  padding: 12px 14px !important;
}

/* Cancel / secondary button at bottom */
.modal-sheet .btn-secondary {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  color: #737373 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
}
.modal-sheet .btn-secondary:hover {
  border-color: #3ecf8e !important;
  color: #3ecf8e !important;
  background: rgba(62, 207, 142, 0.04) !important;
}

/* ============================================================
   FIX 4: Welcome / Google sign-in card
   ============================================================ */

/* Welcome screen background — same black canvas */
#welcome-screen {
  background: #000000 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

body:has(#welcome-screen:not(.hidden)) {
  background: #000000 !important;
}

#welcome-screen::before {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: #3ecf8e !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  animation: heap-pulse 3s ease-in-out infinite !important;
}

.welcome-card {
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
  color: #fafafa !important;
  padding: 36px 32px !important;
  max-width: 420px !important;
  margin: 60px auto !important;
}

.welcome-icon {
  display: none !important; /* the giant blue logo */
}

.welcome-title {
  font-family: ui-serif, Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #fafafa !important;
  letter-spacing: -0.3px !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

.welcome-text {
  color: #999999 !important;
  font-family: -apple-system, 'Inter', sans-serif !important;
  font-size: 13px !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

.welcome-step-indicator {
  display: none !important;
}

.welcome-nav {
  display: flex !important;
  gap: 8px !important;
  margin-top: 20px !important;
  justify-content: center !important;
}

.welcome-nav .btn-primary,
.welcome-nav button {
  background: #3ecf8e !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 4px !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
  cursor: pointer !important;
  transition: filter 0.15s !important;
}
.welcome-nav .btn-primary:hover,
.welcome-nav button:hover {
  filter: brightness(1.1) !important;
}

.welcome-nav .btn-secondary {
  background: transparent !important;
  border: 1px solid #1a1a1a !important;
  color: #999999 !important;
  border-radius: 4px !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 20px !important;
}

/* Google sign-in screen — appears to be a wrapper containing
   "Sign in with your CSB Google account" + the sign-in button */
/* Target by parent containing the welcome-card OR by direct screen IDs */
#login-screen,
[id*="google"],
.google-signin-screen {
  background: #000000 !important;
}

/* Any leftover white card containing the Google sign-in */
body:has(#welcome-screen:not(.hidden)) > div:not(#welcome-screen):not(#sidebar-overlay),
#welcome-screen > div:not(.welcome-card) {
  background: transparent !important;
  color: #fafafa !important;
}