/*
 * Flat Design Overrides
 * Purpose: Apply a bright, consistent flat design across the entire app without
 * rewriting existing styles. This file is loaded AFTER styles.css to gently
 * override older rounded/shadowed/gradient styles. No shadows, no gradients,
 * sharp geometry, bold color blocks, and clean, readable typography.
 *
 * How to read this (non‑technical):
 * - Colors: We set a simple color palette at the top so everything looks
 *   consistent (buttons, cards, tables, etc.).
 * - Components: Each section below (Navigation, Buttons, Forms, Tables,
 *   Cards, etc.) flattens the look — solid colors, no 3D effects.
 * - Safety: These are overrides only; if something looks off, remove or
 *   adjust the specific rule here without touching the main CSS.
 */

:root {
  /* Flat Color Palette (project-wide) */
  --primary-blue: #1e90ff;   /* Bright, vibrant blue */
  --success-green: #00c851;  /* Bright green */
  --warning-orange: #ff8800; /* Bold orange */
  --info-purple: #8e44ad;    /* Rich purple */
  --danger-red: #ff4444;     /* Bright red */

  --bg: #f8f9fa;             /* Very light gray */
  --card-bg: #ffffff;        /* Pure white */
  --text-primary: #2c3e50;   /* Dark blue-gray */
  --text-secondary: #7f8c8d; /* Medium gray */
  --border: #ecf0f1;         /* Very light gray */
}

/* Global flattening: remove shadows, text glows, and background images where common */
header, .hero, .dashboard-card, .stat-card, .organization-card, .user-card,
.feature, .testimonial, .setting-card, .modal-content,
.clients-table, .renewals-table, .fee-table,
.btn-primary, .btn-secondary, .action-btn {
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}
/* Contact Queries table tweaks */
.cq-table th, .cq-table td { padding: 10px 12px !important; vertical-align: top; }
.cq-table tbody tr:nth-child(odd) { background: #f9fbfc; }
.cq-table a { color: #1e90ff; text-decoration: none; }
.cq-table a:hover { text-decoration: underline; }

/* Typography hierarchy — bold, clear, flat */
/* Page titles and section headers standardized across the site */
h1 { font-size: 2.5rem !important; font-weight: 700 !important; letter-spacing: -0.2px; }
h2 { font-size: 2.5rem !important; font-weight: 700 !important; letter-spacing: -0.2px; margin-bottom: 24px !important; }
h3 { font-size: 1.75rem !important; font-weight: 600 !important; }
.stat-number { font-size: 3rem !important; font-weight: 800 !important; }
/* Card headers across cards/settings standardized */
.card-header h3, .setting-card h3 { font-size: 1.35rem !important; font-weight: 600 !important; margin: 0 !important; }

/* Navigation (public + admin): flat rectangular tabs, consistent padding, solid active color */
/* Spec: remove all rounding, use padding 12px 24px, active = #1e90ff w/ white text */
nav ul li a {
  border-radius: 0 !important; /* no rounded corners */
  border: 2px solid transparent !important;
  padding: 12px 24px !important; /* consistent nav padding */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.2 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
nav ul li a:hover { background-color: rgba(30,144,255,0.10) !important; color: var(--text-primary) !important; }
nav ul li a.active { background-color: var(--primary-blue) !important; color: #fff !important; }

/* Home page Login button fix: ensure it matches flat rectangular nav (CRITICAL Task 1) */
/* Non-technical: Removes rounded look from the Login button so it matches Home */
.btn-login {
  border-radius: 0 !important;
  padding: 12px 24px !important;
}

/* Buttons: bold, uppercase, flat rectangular, consistent padding; hover = slight color shift */
.btn-primary, .btn-secondary, .action-btn, .org-actions button, .modal .btn-primary, .modal .btn-secondary, button {
  border-radius: 0 !important; /* zero rounded buttons across the app */
  text-transform: uppercase !important;
  letter-spacing: .02em;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 12px 24px !important; /* consistent CTA/button padding */
}
.btn-primary { background: var(--primary-blue) !important; color: #fff !important; }
.btn-primary:hover { filter: brightness(.95); }
.btn-secondary { background: var(--text-primary) !important; color: #fff !important; border: none !important; }
.btn-secondary:hover { filter: brightness(.95); }
.action-btn { background: #ffffff !important; color: var(--text-primary) !important; border: 2px solid var(--border) !important; }
.action-btn:hover { background: #f5f7fa !important; }
.text-success { color: #28a745 !important; }
.text-warning { color: #ff8800 !important; }
/* Red Operator badge on client card header */
.badge { display: inline-block; padding: 4px 10px; border-radius: 15px; font-size: 0.8rem; vertical-align: middle; line-height: 1; }
.badge-operator { background: #ff4444; color: #fff; margin-left: 6px; }
.org-actions button { background: #ffffff; color: var(--text-primary); border: 2px solid var(--border); }
.org-actions button:hover { background: #f5f7fa; }

/* Forms: flat inputs with solid borders, sharp corners (0-4px), solid focus outline */
input, select, textarea, .form-control {
  border: 2px solid var(--border) !important;
  border-radius: 4px !important; /* max 4px as per spec */
  background: #fff !important;
  box-shadow: none !important;
}
/* Contact page grid + cards */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-content .card { background:#fff; border:2px solid var(--border); border-radius:12px; padding:24px; }
.contact-details { display:grid; gap:10px; margin-top:12px; }
.contact-item { display:grid; grid-template-columns: 28px 1fr; gap:10px; align-items:center; }
.contact-item i { color: var(--primary-blue); font-size:1.1rem; text-align:center; }
.contact-methods ul { list-style:none; padding:0; margin:10px 0; display:grid; gap:8px; }
.contact-methods a { color: var(--text-primary); text-decoration:none; }
.contact-methods a:hover { text-decoration:underline; }
.contact-form-container .contact-success { margin-top:10px; color: var(--success-green); font-weight:600; }
.response-time { color: var(--text-secondary); margin-top:8px; }
.map-container { border:2px solid var(--border); border-radius:12px; padding:24px; background:#fff; text-align:center; }
.map-placeholder i { font-size:2rem; color: var(--primary-blue); }
@media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; } }

/* FAQ simple styling */
.faq-list { display: grid; gap: 12px; }
.faq-item { background:#fff; border:2px solid var(--border); border-radius:8px; padding:16px; }
.faq-item h4 { margin:0 0 6px; font-size:1.1rem; }

/* Home page CTA (bottom) – invert to white background with blue text (Task 4) */
/* Non-technical: This makes the big call-to-action button stand out against the blue section */
.cta-section .btn-primary {
  background: #ffffff !important;
  color: var(--primary-blue) !important;
  border: 2px solid #ffffff !important;
  /* Minor Task 1: Match hero CTA sizing exactly */
  padding: 12px 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

/* Hero buttons (Task 3): ensure sharp corners and consistent padding already enforced */
.hero .btn-primary, .hero .btn-secondary {
  border-radius: 0 !important;
  padding: 12px 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
/* Hero CTA contrast (CRITICAL Task 1): make Create Account primary on white */
.hero .btn-primary { background: #ffffff !important; color: var(--primary-blue) !important; border: 2px solid #ffffff !important; }
.hero .btn-secondary { background: var(--text-primary) !important; color: #ffffff !important; border: none !important; }

/* Why Choose section icon circles (Task 5): keep circles but unify size and color */
.why-choose .feature-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: rgba(30, 144, 255, 0.12) !important; /* light blue */
}
.why-choose .feature-icon i { color: var(--primary-blue) !important; font-size: 28px !important; }

/* Services icons (Task 6): unify size/spacing and color */
.services .service-card .icon i {
  font-size: 36px !important;
  color: var(--primary-blue) !important;
}
.services .service-card .icon { margin-bottom: 12px !important; display: block; }
/* Service cards (Task 3/6): center text and unify spacing */
.services .service-card { text-align: center !important; }
.services .service-card h3 { margin-top: 8px !important; margin-bottom: 10px !important; }
.services .service-card p { margin-top: 6px !important; }

/* Service cards hover: ensure no elevation; keep flat */
.services .service-card:hover { transform: none !important; box-shadow: none !important; filter: brightness(0.98); }

/* Minor Task 2: Equal-height service cards for consistent alignment */
.services-grid { align-items: stretch !important; }
.services .service-card { height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; }
/* Normalize inner spacing so icon, title, and description have consistent gaps */
.services .service-card .icon { display: flex !important; align-items: center; justify-content: center; margin-bottom: 12px !important; }
.services .service-card h3 { margin: 8px 0 10px !important; text-align: center !important; }
.services .service-card p { margin: 6px 0 0 !important; text-align: center !important; }

/* Minor Task 3: Testimonial alignment and spacing consistency */
.testimonial-grid { align-items: stretch !important; }
.testimonial { height: 100% !important; display: flex; flex-direction: column; text-align: center !important; }
.testimonial p { flex-grow: 1; }
.testimonial .client, .testimonial .client-info { text-align: center !important; }
.testimonial .client-info h4, .testimonial .client-info p { margin-left: auto; margin-right: auto; }
/* Force client attribution row to stack and center (overrides default flex row) */
.testimonial .client { flex-direction: column !important; align-items: center !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: 2px solid var(--primary-blue) !important;
  border-color: var(--primary-blue) !important;
  box-shadow: none !important;
}

/* Tables: no shadows, sharp separators, solid header background */
.clients-table, .renewals-table, .fee-table { box-shadow: none !important; border: 2px solid var(--border); border-radius: 8px; }
.clients-table th, .renewals-table th, .fee-table th { background: var(--primary-blue) !important; color: #fff !important; }
.clients-table tbody tr:hover, .renewals-table tbody tr:hover, .fee-table tbody tr:hover { background: #f8f9fb !important; }

/* Hero + feature/testimonial sections: remove gradients; use solid blocks */
.hero { background: var(--primary-blue) !important; }
.why-choose { background: #ffffff !important; }
.testimonials { background: #ffffff !important; }
.cta-section { background: var(--primary-blue) !important; }

/* Cards: ensure flat geometry and consistent borders */
.organization-card, .user-card, .setting-card, .dashboard-card { border: 2px solid var(--border) !important; border-radius: 8px !important; }
/* Make client cards slightly wider by default so action buttons fit */
.organizations-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; }
/* Lay out three actions side-by-side; fall back to stacked on small screens */
.org-actions { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.org-actions button { min-width: 0 !important; width: 100% !important; }
@media (max-width: 992px) { .org-actions { grid-template-columns: 1fr !important; } }

/* Metric cards: bold color blocks with white content */
.stat-card { background: var(--primary-blue) !important; color: #fff !important; border: none !important; border-radius: 8px !important; }
.stat-card .stat-icon { color: #fff !important; }
.stat-card .stat-info p { color: #fff !important; opacity: 0.95; }
.stat-card .stat-label { color: #fff !important; font-weight: 600; }

/* Distinct colors per stat card for clarity and balance */
#activeClientsBox { background: #1e90ff !important; }
#activeIPAssetsBox { background: #8e44ad !important; }
#renewalsDueThisMonthBox { background: #ff8800 !important; }
#revenueThisMonthBox { background: #28a745 !important; }
#openMessagesBox { background: #0b4d94 !important; } /* darker blue for contrast vs clients */

/* Operator dashboard — specific color coding via IDs */
#activeClientsBox { background: var(--primary-blue) !important; }
#activeIPAssetsBox { background: var(--warning-orange) !important; }
#renewalsDueThisMonthBox { background: var(--info-purple) !important; }
#revenueThisMonthBox { background: var(--success-green) !important; }

/* Status badges: flat fills with sharp corners */
.status-badge, .status-active, .status-pending, .status-expired { border-radius: 8px !important; box-shadow: none !important; }
.status-active { background: #e9f9ef !important; color: #1b5e20 !important; }
.status-pending { background: #fff4e5 !important; color: #b36a00 !important; }
.status-expired { background: #ffe9ea !important; color: #b71c1c !important; }

/* Settings navigation: flat active state */
.settings-nav a { border-radius: 0 !important; }
.settings-nav a.active { background: var(--primary-blue) !important; color: #fff !important; }

/* Focus and interactive states: no elevation; use color shifts */
*:focus-visible { outline: 3px solid var(--primary-blue); outline-offset: 2px; }

/* Footer remains simple; ensure no unintended shadows */
footer, .footer-content, .footer-section, .footer-bottom { box-shadow: none !important; }
/* Footer readability (Task 5): darker background + white text for contrast */
/* Footer consistency: match home page dark blue exactly */
footer { background: #003d82 !important; color: #ffffff !important; }
footer h3, footer h4, footer p, footer li, footer a { color: #ffffff !important; }
footer .footer-section ul li a { color: #ffffff !important; font-weight: 500; display: inline-block; padding: 2px 0; }
footer .footer-section ul li a:hover { opacity: 0.9; }

/* Responsive tweaks: keep spacing but avoid hover transforms */
@media (max-width: 768px) {
  nav ul li a { padding: 8px 12px !important; }
  .btn-primary, .btn-secondary { width: 100%; max-width: 300px; }
}

/* Spacing + grid consistency — unify gaps across common grids */
.dashboard-stats, .users-grid, .organizations-grid, .features, .services-grid, .testimonial-grid {
  gap: 24px !important;
}
section, .section-padding { padding-top: 72px !important; padding-bottom: 72px !important; }

/* Tables — ensure Rules table matches flat table spec */
.rules-table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--border); border-radius: 8px; overflow: hidden; }
.rules-table th, .rules-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #eee; }
.rules-table th { background: var(--primary-blue) !important; color: #fff !important; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; }
.rules-table tbody tr:hover { background: #f8f9fb !important; }

/* Empty states — simple, consistent flat styling */
.no-data, .empty-state { text-align: center; color: var(--text-secondary); font-style: italic; padding: 32px 16px; border: 2px dashed var(--border); border-radius: 8px; background: #fff; }

/* Footer links — consistent color and hover (flat) */
footer .footer-section ul li a { color: #cfd4d9 !important; }
footer .footer-section ul li a:hover { color: #ffffff !important; }

/* Services page — Our Process visual hierarchy (flat, no shadows) */
.process-section { background: #f8f9fa !important; }
.process-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 4 equal columns */
  gap: 24px !important; /* consistent spacing */
  align-items: stretch !important; /* equal height columns */
}

/* Services page — Section icons in details (match home page style) */
.service-detail { align-items: center !important; }
.service-detail .service-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(30, 144, 255, 0.12) !important; /* light blue circle */
  flex-shrink: 0; margin-right: 16px;
}
.service-detail .service-icon i { font-size: 28px; color: var(--primary-blue) !important; }

/* Services page — Pricing teaser (simple, flat, centered) */
.pricing-teaser { background: #ffffff !important; text-align: center !important; }
.pricing-teaser h2 { margin-bottom: 10px !important; }
.pricing-teaser .pricing-copy { color: var(--text-primary); margin-bottom: 16px; }

/* Pricing filters */
.pricing-filters { display: flex; gap: 16px; align-items: flex-end; justify-content: center; margin: 10px 0 18px; flex-wrap: wrap; }
.pricing-filters .filter-group { display: flex; flex-direction: column; gap: 6px; }
.pricing-filters label { font-weight: 600; color: var(--text-primary); }
.pricing-filters select { padding: 10px 12px; border: 2px solid var(--border); border-radius: 4px; background: #fff; }

/* Pricing legend */
.pricing-legend { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 14px; flex-wrap: wrap; color: var(--text-secondary); }
.pricing-legend .legend-item { display: inline-flex; align-items: center; gap: 8px; }
.pricing-legend .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Services page — Value Propositions */
.value-props .value-props-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.value-prop { background: #ffffff; border: 2px solid var(--border); border-radius: 8px; padding: 24px; text-align: center; }
.value-prop .vp-icon { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: rgba(30,144,255,0.12); }
.value-prop .vp-icon i { color: var(--primary-blue); font-size: 22px; }
.value-prop h3 { font-size: 1.15rem !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.value-prop p { margin: 0 !important; color: var(--text-primary); }
@media (max-width: 768px) { .value-props .value-props-grid { grid-template-columns: 1fr; } }

/* Services page — Social Proof */
.social-proof { background: #ffffff; text-align: center; }
.social-proof .social-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 8px; }
.social-proof .testimonial-snippet { border: 2px solid var(--border); border-radius: 8px; padding: 20px; }
.social-proof .testimonial-snippet p { font-style: italic; color: var(--text-primary); margin-bottom: 10px; }
.social-proof .testimonial-snippet .author { font-weight: 600; color: var(--text-secondary); }
@media (max-width: 768px) { .social-proof .social-proof-grid { grid-template-columns: 1fr; } }

/* About page enhancements */
.about-benefits .benefits-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; }
.about-benefits .benefit-card { background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 20px; text-align: center; }
.about-benefits .benefit-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(30,144,255,0.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.about-benefits .benefit-icon i { color: var(--primary-blue); font-size: 22px; }
@media (max-width: 992px) { .about-benefits .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .about-benefits .benefits-grid { grid-template-columns: 1fr; } }

.team-section .team-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
/* Card-based design: photo centered above text, like benefit cards */
.team-section .team-member { 
  background: #fff; 
  border: 2px solid var(--border); 
  border-radius: 12px; 
  padding: 24px; 
  display: flex; 
  flex-direction: column; /* stack image above text */
  align-items: center; 
  text-align: center; 
  gap: 14px; 
}
.team-section .member-image { 
  /* Non-technical: Larger, consistent photo with circular crop and solid border */
  width: 200px; 
  height: 200px; 
  flex: 0 0 200px; 
  border-radius: 50%; /* circular crop */
  overflow: hidden; 
  background: #f0f4f8; 
  border: 2px solid var(--border); /* definition without shadow (flat design) */
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.team-section .member-image img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; /* fills circle without stretching */
}
/* Text hierarchy: larger name, accented title, readable body */
.team-section .member-info h3 { 
  font-size: 1.5rem; 
  font-weight: 700; 
  margin: 8px 0 6px; 
}
.team-section .member-info .role { 
  font-size: 1.1rem; 
  font-weight: 600; 
  color: var(--primary-blue); 
  margin-bottom: 8px; 
}
.team-section .member-info p { 
  line-height: 1.6; 
}
@media (max-width: 992px) { 
  .team-section .team-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { 
  /* Slightly smaller photo on narrow screens to keep layout balanced */
  .team-section .member-image { width: 160px; height: 160px; flex-basis: 160px; }
}

.about-stats .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; text-align: center; }
.about-stats .stat-card { background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 24px; }
.about-stats .stat-number { font-size: 2rem; font-weight: 800; color: var(--text-primary); }
.about-stats .stat-label { color: var(--text-secondary); font-weight: 600; }
@media (max-width: 768px) { .about-stats .stats-grid { grid-template-columns: repeat(2, 1fr); } }

.about-values .values-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.about-values .value-card { background: #fff; border: 2px solid var(--border); border-radius: 8px; padding: 20px; text-align: left; }
@media (max-width: 992px) { .about-values .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .about-values .values-grid { grid-template-columns: 1fr; } }

.about-timeline .timeline { display: grid; grid-template-columns: 1fr; gap: 12px; }
.about-timeline .milestone { display: grid; grid-template-columns: 100px 1fr; align-items: center; border: 2px solid var(--border); border-radius: 8px; padding: 12px; background: #fff; }
.about-timeline .milestone .year { font-weight: 800; color: var(--text-primary); }
.about-timeline .milestone .desc { color: var(--text-secondary); }

.about-testimonials { background: #fff; text-align: center; }

/* Services page — Checklist items spacing & alignment (flat, perfectly aligned) */
.service-text ul { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; display: grid !important; row-gap: 10px !important; }
.service-text ul li { display: grid !important; grid-template-columns: 20px 1fr !important; column-gap: 10px !important; align-items: start !important; padding: 0 !important; margin: 0 !important; }
.service-text ul li i { position: static !important; width: 20px !important; text-align: center !important; color: var(--success-green) !important; font-size: 1rem !important; line-height: 1 !important; margin-top: 3px !important; }
.process-step {
  position: relative;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: none !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important; /* space between circle and text block */
  color: #ffffff !important; /* default text white, overridden by links if needed */
}
/* Step backgrounds per spec (strong, distinct colors) */
.process-step:nth-child(1) { background: #1e90ff !important; }
.process-step:nth-child(2) { background: #ff8800 !important; }
.process-step:nth-child(3) { background: #8e44ad !important; }
.process-step:nth-child(4) { background: #28a745 !important; }
/* Step number circles: white circle with colored number matching the step */
.process-step .step-number {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 50%;
  background: #ffffff !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; line-height: 1;
}
.process-step:nth-child(1) .step-number { color: #1e90ff !important; }
.process-step:nth-child(2) .step-number { color: #ff8800 !important; }
.process-step:nth-child(3) .step-number { color: #8e44ad !important; }
.process-step:nth-child(4) .step-number { color: #28a745 !important; }
/* Typography hierarchy inside steps */
.process-step .step-content h3 { font-size: 1.25rem !important; font-weight: 700 !important; margin: 0 0 8px 0 !important; color: #ffffff !important; }
.process-step .step-content p { font-size: 0.95rem !important; font-weight: 400 !important; line-height: 1.6 !important; margin: 0 !important; color: #ffffff !important; }
/* Centered connectors: horizontal on desktop, positioned at vertical center */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px; /* half of 24px gap */
  width: 24px; height: 2px;
  background: #1e90ff !important; /* consistent arrow color */
  transform: translateY(-50%);
  z-index: 1;
}

/* Badges for stat cards (alerts) */
.stat-card { position: relative; }
.card-badge { position: absolute; top: 8px; right: 8px; background: var(--danger-red); color: #fff; font-weight: 700; border-radius: 999px; padding: 2px 6px; font-size: 0.75rem; line-height: 1; }
.process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%; right: -18px;
  transform: translateY(-50%);
  border-left: 6px solid #1e90ff;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  z-index: 1;
}
/* Mobile: single column, vertical connectors centered between stacked steps */
@media (max-width: 768px) {
  .process-steps { grid-template-columns: 1fr !important; }
  .process-step { align-items: flex-start !important; }
  .process-step:not(:last-child)::after {
    top: auto; bottom: -12px; left: 50%; right: auto;
    width: 2px; height: 24px; transform: translateX(-50%);
  }
  .process-step:not(:last-child)::before {
    top: auto; bottom: -18px; right: auto; left: calc(50% - 6px);
    border-left: none; border-right: none;
    border-top: 6px solid #1e90ff; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: none;
    transform: none;
  }
}