/**
 * Lending36T Portal - Modern Responsive CSS Theme
 * 
 * AGGRESSIVE VISUAL ENHANCEMENTS - CSS Only
 * - Bold, immediately visible improvements
 * - Full responsive design across all devices
 * - Enhanced user experience and aesthetics
 * - WCAG 2.1 AA compliant accessibility
 * - No HTML or JavaScript modifications
 * 
 * Version: 2.0 - Enhanced Visibility Edition
 */

/* ============================================================================
   CRITICAL CSS VARIABLES - Enhanced for Maximum Impact
   ============================================================================ */

:root {
  /* Enhanced spacing for better breathing room */
  --theme-spacing-xs: 0.5rem;
  --theme-spacing-sm: 0.75rem;
  --theme-spacing-md: 1rem;
  --theme-spacing-lg: 1.5rem;
  --theme-spacing-xl: 2rem;
  --theme-spacing-2xl: 3rem;
  
  /* Enhanced shadows for depth */
  --theme-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.08);
  --theme-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
  --theme-shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.16);
  --theme-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.2);
  
  /* Enhanced borders */
  --theme-border-width: 2px;
  --theme-border-color: #cbd5e1;
  --theme-border-radius-sm: 6px;
  --theme-border-radius-md: 10px;
  --theme-border-radius-lg: 16px;
  --theme-border-radius-xl: 20px;
  
  /* Touch targets */
  --theme-touch-target: 48px;
  
  /* Transition timing */
  --theme-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   TYPOGRAPHY - Fluid & Responsive (Global Dynamic Sizing)
   ============================================================================ */

/* Base typography with dynamic scaling */
body,
.portal-container,
.loan-app-main,
.portal-main {
  font-size: clamp(14px, 1vw + 0.25rem, 16px) !important;
  line-height: clamp(1.5, 0.1vw + 1.5, 1.65) !important;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fluid heading hierarchy - scales with viewport */
h1,
.portal-dashboard-title,
.loan-app-title {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.5rem) !important;
  font-weight: clamp(700, 1vw + 700, 800) !important;
  line-height: 1.2 !important;
  letter-spacing: clamp(-0.03em, 0.005vw - 0.02em, -0.01em) !important;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important;
  color: #1e293b !important;
}

h2,
.section-title,
.portal-card-header h2,
.modal-title {
  font-size: clamp(1.125rem, 2vw + 0.5rem, 2rem) !important;
  font-weight: clamp(600, 1vw + 600, 700) !important;
  line-height: 1.3 !important;
  letter-spacing: clamp(-0.02em, 0.005vw - 0.01em, 0em) !important;
  color: #1e293b !important;
}

h3,
.form-section-title {
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #334155 !important;
}

h4 {
  font-size: clamp(0.9375rem, 1.2vw + 0.25rem, 1.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #334155 !important;
}

h5 {
  font-size: clamp(0.875rem, 1vw + 0.25rem, 1.125rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #334155 !important;
}

h6 {
  font-size: clamp(0.8125rem, 0.9vw + 0.25rem, 1rem) !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #334155 !important;
}

/* Profile section headings (e.g., "2. EMPLOYMENT INFORMATION") */
.profile-section-heading,
.section-heading,
.detail-section h2,
.detail-section h3,
.profile-detail h2,
.profile-detail h3,
.info-section h2,
.info-section h3 {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #1e293b !important;
  margin-bottom: clamp(0.75rem, 1vw, 1rem) !important;
}

/* Paragraph text with fluid sizing */
p,
.portal-welcome-text,
.section-description {
  font-size: clamp(0.875rem, 0.8vw + 0.25rem, 1rem) !important;
  line-height: clamp(1.5, 0.1vw + 1.5, 1.6) !important;
}

/* Small text elements */
small,
.form-help-text,
.portal-badge {
  font-size: clamp(0.6875rem, 0.6vw + 0.25rem, 0.875rem) !important;
}

/* Detail labels and values with dynamic sizing */
.detail-label,
.info-label,
.profile-label {
  font-size: clamp(0.8125rem, 0.8vw + 0.25rem, 0.9375rem) !important;
  font-weight: 600 !important;
}

.detail-value,
.info-value,
.profile-value {
  font-size: clamp(0.875rem, 0.85vw + 0.25rem, 1rem) !important;
  line-height: 1.5 !important;
}

/* Enhanced text readability on colored backgrounds */
.portal-header *,
.section-header *,
.portal-dashboard-header * {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================================================
   TOOLTIPS - Enhanced Visibility and Positioning
   ============================================================================ */

/* Fix tooltip container to allow overflow */
.btn-tooltip-container {
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}

/* Tooltip styling - ensure it appears above everything */
.btn-tooltip {
  position: absolute !important;
  background-color: #faf4cf !important;
  color: #1a1a1a !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: 1 6px 20px rgba(139, 0, 0, 0.3) !important;
  border: 2px solid #970b0b !important;
  z-index: 10000 !important; /* Very high to appear above everything */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  width: 320px !important; /* Slightly wider for readability */
  max-width: 90vw !important; /* Responsive on mobile */
  text-align: left !important;
  line-height: 1.6 !important;
  pointer-events: none !important; /* Don't block mouse events */
}

/* Top tooltip (shows below button) */
.btn-tooltip-container.top-tooltip .btn-tooltip {
  top: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Bottom tooltip (shows above button) */
.btn-tooltip-container.bottom-tooltip .btn-tooltip {
  bottom: calc(100% + 8px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Tooltip arrow for top tooltip */
.btn-tooltip-container.top-tooltip .btn-tooltip::before {
  content: '' !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 8px solid transparent !important;
  border-bottom-color: #c10202 !important;
  z-index: 1 !important;
}

/* Tooltip arrow for bottom tooltip */
.btn-tooltip-container.bottom-tooltip .btn-tooltip::before {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border: 8px solid transparent !important;
  border-top-color: #c10202 !important;
  z-index: 1 !important;
}

/* Show tooltip on hover */
.btn-tooltip-container:hover .btn-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Tooltip heading styling */
.btn-tooltip h2 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #c10202 !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  background: none !important;
  text-shadow: none !important;
  text-align: left !important;
}

/* Ensure parent containers don't clip tooltips */
.loan-app-header,
.loan-app-footer,
.loan-app-header-actions,
.footer-right,
.footer-left {
  overflow: visible !important;
  position: relative !important;
}

/* Mobile: Adjust tooltip width */
@media (max-width: 767px) {
  .btn-tooltip {
    width: 280px !important;
    max-width: 85vw !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  
  /* On mobile, position tooltip to right side if it overflows */
  .btn-tooltip-container.top-tooltip .btn-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
  
  .btn-tooltip-container.top-tooltip .btn-tooltip::before {
    left: auto !important;
    right: 20px !important;
  }
  
  .btn-tooltip-container.bottom-tooltip .btn-tooltip {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
  }
  
  .btn-tooltip-container.bottom-tooltip .btn-tooltip::before {
    left: auto !important;
    right: 20px !important;
  }
}

/* ============================================================================
   HEADER & NAVIGATION - Dramatic Improvements with Auto-Hide on Scroll
   ============================================================================ */

/* Enhanced header with better gradient, background image, and scroll behavior */
.portal-header {
  /* Layer background image on top of gradient */
  background-image: url('/assets/lending36t/images/Navbar-Meritocracy01.png'), 
                    linear-gradient(135deg, #8b0000 0%, #c41e1e 50%, #8b0000 100%) !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, cover !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  border-bottom: 3px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0.5rem 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.3s ease !important;
  transform: translateY(0) !important;
  height: auto !important;
}

/* Header hidden state - slides up */
.portal-header.header-hidden {
  transform: translateY(-100%) !important;
  box-shadow: none !important;
}

/* Header visible state - slides down */
.portal-header.header-visible {
  transform: translateY(0) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Add padding to body/container to compensate for fixed header */
body {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Target all container variations with specific IDs and classes */
#app,
#appContainer,
.portal-container,
div.portal-container,
div#app.portal-container,
div#appContainer.portal-container,
body > .detail-container {
  padding-top: clamp(100px, 12vw, 120px) !important;
  margin-top: 0 !important;
}

/* Dashboard page wrapper */
#dashboardPage {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Loan detail page - ensure proper spacing */
body > .detail-container,
.detail-container:first-child {
  padding-top: clamp(120px, 12vw + 1rem, 140px) !important;
}

/* Main content areas - add extra spacing after container padding */
.loan-app-main,
main.loan-app-main {
  margin-top: 0 !important;
  padding-top: clamp(1.5rem, 2vw, 2rem) !important;
}

.portal-main,
main.portal-main {
  margin-top: 0 !important;
  padding-top: clamp(1.5rem, 2vw, 2rem) !important;
}

/* Minimal left and right spacing to keep borders visible */
body,
#app,
#appContainer,
.portal-container,
div.portal-container,
div#app.portal-container,
div#appContainer.portal-container,
.portal-main,
main.portal-main,
.loan-app-main,
main.loan-app-main,
body > .detail-container,
.detail-container:not(.profile-photo-container),
.loan-app-container,
#dashboardPage,
#detailContent,
#loanDetailPage {
  padding-left: 1px !important;
  padding-right: 1px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Exclude profile, photo, and content-specific containers from full-width rules */
.profile-header,
.profile-info,
.profile-photo-container,
.detail-section,
.form-section,
.portal-card-body,
.modal-content,
.modal-body {
  padding-left: inherit !important;
  padding-right: inherit !important;
  margin-left: inherit !important;
  margin-right: inherit !important;
  max-width: none !important;
  width: auto !important;
}

/* Ensure profile photo maintains circular shape and proper sizing */
.profile-photo {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: none !important;
  width: clamp(100px, 12vw, 140px) !important;
  height: clamp(100px, 12vw, 140px) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.profile-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}

.portal-header-content {
  padding: 1rem 2rem !important;
}

/* Logo enhancement - clickable with hover effect */
.portal-logo {
  cursor: pointer !important;
  transition: opacity 0.3s ease !important;
}

.portal-logo:hover {
  opacity: 0.85 !important;
}

.portal-logo img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)) !important;
  transition: transform 0.3s ease !important;
}

.portal-logo:hover img {
  transform: scale(1.05) !important;
}

/* Dramatically improved navigation links */
.portal-nav-link {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid transparent !important;
  backdrop-filter: blur(10px) !important;
}

.portal-nav-link:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.portal-nav-link.active {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  color: #8b0000 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  border-color: #ffffff !important;
  text-shadow: none !important;
}

/* ============================================================================
   DASHBOARD HEADER - Eye-catching Design
   ============================================================================ */

.portal-dashboard-header,
div.portal-dashboard-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%) !important;
  border-radius: var(--theme-border-radius-xl) !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  border: 3px solid #cbd5e1 !important;
  position: relative !important;
  overflow: hidden !important;
  clear: both !important;
}

.portal-dashboard-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 6px !important;
  background: linear-gradient(90deg, #8b0000, #c41e1e, #8b0000) !important;
}

.portal-welcome-text {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
}

/* ============================================================================
   SUMMARY CARDS - Bold & Beautiful
   ============================================================================ */

.portal-summary-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem !important;
  justify-content: flex-end !important;
  overflow-x: auto !important;
  padding-bottom: 0.25rem !important;
}

.portal-summary-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  min-width: 120px !important;
  max-width: 140px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 85px !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.portal-summary-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.portal-summary-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  border-color: #cbd5e1 !important;
}

.portal-summary-card:hover::before {
  opacity: 1 !important;
}

.portal-summary-card.success::before {
  background: linear-gradient(90deg, #10b981, #059669) !important;
}

.portal-summary-card.warning::before {
  background: linear-gradient(90deg, #f59e0b, #d97706) !important;
}

.portal-summary-card.danger::before {
  background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

.portal-summary-card.info::before {
  background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
}

.portal-summary-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  font-size: 1.1rem !important;
  margin: 0 auto 0.4rem !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.3s ease !important;
}

.portal-summary-card:hover .portal-summary-icon {
  transform: scale(1.1) rotate(5deg) !important;
}

.portal-summary-label {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
  margin-bottom: 0.3rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

.portal-summary-value {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  text-align: center !important;
  direction: ltr !important;
}

/* Handle long numbers (over 10 characters) with smaller font */
.portal-summary-value[data-length="long"] {
  font-size: 0.7rem !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================================
   BUTTONS - Bold & Interactive
   ============================================================================ */

/* All portal buttons with dynamic sizing */
.portal-btn,
button.portal-btn,
a.portal-btn,
.btn,
button.btn,
.portal-btn-primary,
.portal-btn-secondary,
.portal-btn-success,
.portal-btn-danger,
.portal-btn-warning,
.portal-btn-outline {
  min-height: clamp(44px, 5vw, 48px) !important;
  padding: clamp(0.625rem, 1vw + 0.25rem, 0.875rem) clamp(1.25rem, 2vw + 0.5rem, 1.75rem) !important;
  font-weight: clamp(600, 1vw + 600, 700) !important;
  font-size: clamp(0.8125rem, 0.8vw + 0.25rem, 0.9375rem) !important;
  border-radius: clamp(8px, 1vw + 4px, 12px) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Primary button - dramatic red gradient */
.portal-btn,
.portal-btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #b01212 0%, #8b0000 100%) !important;
  color: #ffffff !important;
}

.portal-btn:hover:not(:disabled),
.portal-btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #c41e1e 0%, #9a0f0f 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(176, 18, 18, 0.3) !important;
}

/* Secondary button */
.portal-btn-secondary,
.btn-secondary {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  color: #1e293b !important;
  border: 2px solid #cbd5e1 !important;
  font-weight: 600 !important;
}

.portal-btn-secondary:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
  border-color: #8b0000 !important;
  color: #8b0000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

/* Success button */
.portal-btn-success,
.btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

.portal-btn-success:hover:not(:disabled),
.btn-success:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}

/* Danger button */
.portal-btn-danger,
.btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #ffffff !important;
}

.portal-btn-danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3) !important;
}

/* Warning button */
.portal-btn-warning,
.btn-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

/* Outline button */
.portal-btn-outline {
  background: transparent !important;
  border: 3px solid #8b0000 !important;
  color: #8b0000 !important;
  font-weight: 700 !important;
}

.portal-btn-outline:hover:not(:disabled) {
  background: #8b0000 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* Button icon spacing */
.btn-icon,
.portal-btn .btn-icon {
  font-size: 1.25em !important;
  margin-right: 0.5rem !important;
}

/* Active state */
.portal-btn:active:not(:disabled),
.btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98) !important;
}

/* Focus state for accessibility */
.portal-btn:focus-visible,
.btn:focus-visible {
  outline: 4px solid rgba(176, 18, 18, 0.3) !important;
  outline-offset: 3px !important;
}

/* ============================================================================
   FORMS - Enhanced Inputs & Better UX
   ============================================================================ */

/* All form inputs with dynamic sizing */
.form-input,
.form-textarea,
.form-select,
.form-control,
.portal-input,
.portal-select,
.portal-textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  min-height: clamp(48px, 5vw, 52px) !important;
  padding: clamp(0.75rem, 1vw + 0.25rem, 0.875rem) clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem) !important;
  font-size: clamp(15px, 0.8vw + 0.5rem, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #1e293b !important;
  background: #ffffff !important;
  border: 2px solid #cbd5e1 !important;
  border-radius: clamp(8px, 1vw + 4px, 10px) !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.form-input:hover:not(:disabled):not(:read-only),
.form-textarea:hover:not(:disabled):not(:read-only),
.form-select:hover:not(:disabled) {
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  background: #fafbfc !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #8b0000 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(139, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Read-only styling */
.form-input:read-only,
input:read-only {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  opacity: 0.9 !important;
}

/* Error states */
.form-input.error,
.form-textarea.error,
input.error {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Success states */
.form-input.success,
input.success {
  border-color: #10b981 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Textarea specific */
.form-textarea,
textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Labels with dynamic sizing */
.form-label,
label {
  font-size: clamp(0.8125rem, 0.8vw + 0.25rem, 0.9375rem) !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: clamp(0.375rem, 0.5vw, 0.5rem) !important;
  display: block !important;
  letter-spacing: 0.01em !important;
}

.form-label.required::after,
label.required::after {
  content: ' *' !important;
  color: #dc3545 !important;
  margin-left: 4px !important;
  font-weight: bold !important;
  font-size: 1em !important;
}

/* Input groups */
.input-group {
  display: flex !important;
  align-items: stretch !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.input-prefix,
.input-suffix {
  display: flex !important;
  align-items: center !important;
  padding: 0.875rem 1rem !important;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  border: 2px solid #cbd5e1 !important;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  color: #475569 !important;
}

.input-prefix {
  border-right: none !important;
  border-radius: 10px 0 0 10px !important;
}

.input-suffix {
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
}

.input-group .form-input {
  border-radius: 0 10px 10px 0 !important;
}

/* ============================================================================
   CARDS & SECTIONS - Dramatic Visual Improvements
   ============================================================================ */

/* All portal cards */
.portal-card,
.loan-app-section {
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: clamp(12px, 2vw + 8px, 20px) !important;
  padding: clamp(1.25rem, 2vw + 0.5rem, 2rem) !important;
  margin-bottom: clamp(1.5rem, 2vw + 0.5rem, 2rem) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.portal-card::before,
.loan-app-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #8b0000, #c41e1e, #8b0000) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.portal-card:hover,
.loan-app-section:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
  border-color: #cbd5e1 !important;
}

.portal-card:hover::before,
.loan-app-section:hover::before {
  opacity: 1 !important;
}

/* Card headers with dynamic sizing */
.portal-card-header,
.section-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  padding: clamp(1rem, 2vw + 0.25rem, 1.5rem) clamp(1.25rem, 2vw + 0.5rem, 2rem) !important;
  margin: calc(clamp(1.25rem, 2vw + 0.5rem, 2rem) * -1) calc(clamp(1.25rem, 2vw + 0.5rem, 2rem) * -1) clamp(1.25rem, 2vw + 0.5rem, 2rem) calc(clamp(1.25rem, 2vw + 0.5rem, 2rem) * -1) !important;
  border-bottom: 3px solid #cbd5e1 !important;
  border-radius: clamp(12px, 2vw + 8px, 20px) clamp(12px, 2vw + 8px, 20px) 0 0 !important;
}

.section-title {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

.section-icon {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important;
}

.section-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 0.875rem !important;
  background: linear-gradient(135deg, #8b0000 0%, #c41e1e 100%) !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(139, 0, 0, 0.25) !important;
  margin-left: auto !important;
}

/* Section description */
.section-description {
  font-size: 1rem !important;
  color: #64748b !important;
  margin-top: 0.5rem !important;
  line-height: 1.6 !important;
}

/* ============================================================================
   LOAN APPLICATION SPECIFIC - Enhanced Forms
   ============================================================================ */

/* Hide all toast/slide notifications universally across all pages */
#toastContainer,
.toast-container {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#toastContainer .toast,
#toastContainer .portal-toast,
.toast-container .toast,
.toast-container .portal-toast,
.toast,
.portal-toast {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transition: none !important;
}

.loan-app-main,
main.loan-app-main {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%) !important;
  padding-top: clamp(1.5rem, 2vw, 2rem) !important;
  padding-bottom: 2rem !important;
  margin-top: 0 !important;
  min-height: calc(100vh - 120px) !important;
}

.loan-app-container {
  max-width: 100% !important;
  margin: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.loan-app-header,
div.loan-app-header {
  background: linear-gradient(135deg, #8b0000 0%, #c41e1e 50%, #8b0000 100%) !important;
  border-radius: var(--theme-border-radius-xl) !important;
  padding: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem) clamp(1.5rem, 2vw + 1rem, 2.5rem) !important;
  margin-bottom: 2rem !important;
  margin-top: 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  position: relative !important;
  clear: both !important;
  overflow: visible !important; /* Allow tooltips to extend outside */
}

.loan-app-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Loan app header content positioning */
.loan-app-header > * {
  position: relative !important;
  z-index: 1 !important;
}

.loan-app-header-left {
  flex: 1 !important;
}

/* Loan app title styling */
.loan-app-title {
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.5rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 clamp(0.75rem, 1vw, 1rem) 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 1vw, 0.75rem) !important;
}

.loan-app-title .icon {
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

/* Loan app subtitle */
.loan-app-subtitle {
  font-size: clamp(0.9375rem, 1.2vw + 0.25rem, 1.125rem) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 0 clamp(0.75rem, 1vw, 1rem) 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
}

/* Application ID display */
.application-id-display {
  display: inline-block !important;
  margin-top: clamp(0.5rem, 0.8vw, 0.75rem) !important;
  padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.75rem, 1.2vw, 1rem) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: clamp(8px, 1vw + 4px, 12px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.application-id-label {
  font-size: clamp(0.8125rem, 1vw, 0.9375rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin-right: 0.5rem !important;
}

.application-id-value {
  font-size: clamp(0.875rem, 1vw + 0.125rem, 1rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-family: 'Courier New', Consolas, monospace !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Header actions section */
.loan-app-header-actions {
  display: flex !important;
  gap: clamp(0.75rem, 1vw, 1rem) !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
}

/* Form grid improvements */
.form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
}

/* Item cards (guarantors, documents) */
.item-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
}

.item-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  border-color: #cbd5e1 !important;
}

/* Schedule summary */
.schedule-summary {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border: 3px solid #cbd5e1 !important;
  border-radius: var(--theme-border-radius-lg) !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

.summary-item {
  text-align: center !important;
  padding: 1.25rem !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.summary-item.highlight {
  background: linear-gradient(135deg, #8b0000 0%, #c41e1e 100%) !important;
  border-color: #8b0000 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.3) !important;
  transform: scale(1.05) !important;
}

.summary-label {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.75rem !important;
  color: #64748b !important;
}

.summary-item.highlight .summary-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

.summary-value {
  font-size: clamp(0.875rem, 1.3vw, 1.125rem) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  line-height: 1.1 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  text-align: center !important;
  direction: ltr !important;
}

.summary-item.highlight .summary-value {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================================
   TABLES - Dramatically Improved Readability
   ============================================================================ */

.portal-table-container,
.schedules-table-wrapper {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  border: 2px solid #e2e8f0 !important;
  margin-bottom: 1.5rem !important;
}

.portal-table,
.schedules-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.portal-table thead,
.schedules-table thead {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

.portal-table th,
.schedules-table th {
  padding: clamp(0.875rem, 1.5vw + 0.25rem, 1.25rem) clamp(0.75rem, 1vw + 0.25rem, 1rem) !important;
  text-align: left !important;
  font-size: clamp(0.6875rem, 0.7vw + 0.25rem, 0.8125rem) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-transform: uppercase !important;
  letter-spacing: clamp(0.05em, 0.01vw + 0.05em, 0.08em) !important;
  border-bottom: 3px solid #cbd5e1 !important;
}

.portal-table td,
.schedules-table td {
  padding: clamp(0.875rem, 1.5vw + 0.25rem, 1.125rem) clamp(0.75rem, 1vw + 0.25rem, 1rem) !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-size: clamp(0.8125rem, 0.8vw + 0.25rem, 0.9375rem) !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

.portal-table tbody tr,
.schedules-table tbody tr {
  background: #ffffff !important;
  transition: all 0.2s ease !important;
}

.portal-table tbody tr:nth-child(even),
.schedules-table tbody tr:nth-child(even) {
  background: #f8fafc !important;
}

.portal-table tbody tr:hover,
.schedules-table tbody tr:hover {
  background: #e2e8f0 !important;
  transform: scale(1.01) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================================
   MODALS - Enhanced & Responsive
   ============================================================================ */

.modal {
  backdrop-filter: blur(12px) !important;
  background: rgba(15, 23, 42, 0.6) !important;
}

.modal-dialog {
  margin: 2rem auto !important;
  animation: modalSlideUp 0.3s ease-out !important;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content {
  border-radius: var(--theme-border-radius-xl) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3) !important;
  border: 3px solid #cbd5e1 !important;
  overflow: hidden !important;
}

.modal-header {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
  padding: clamp(1.25rem, 2vw + 0.5rem, 1.75rem) clamp(1.5rem, 2vw + 0.5rem, 2rem) !important;
  border-bottom: 3px solid #cbd5e1 !important;
}

.modal-title {
  font-size: clamp(1.125rem, 2vw + 0.5rem, 1.75rem) !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

.modal-close {
  width: clamp(36px, 4vw, 40px) !important;
  height: clamp(36px, 4vw, 40px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  color: #64748b !important;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 1.75rem) !important;
}

.modal-close:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  transform: scale(1.1) rotate(90deg) !important;
}

.modal-body {
  padding: clamp(1.5rem, 2vw + 0.5rem, 2rem) !important;
  background: #ffffff !important;
}

.modal-footer {
  background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%) !important;
  padding: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) clamp(1.5rem, 2vw + 0.5rem, 2rem) !important;
  border-top: 2px solid #e2e8f0 !important;
  display: flex !important;
  gap: clamp(0.75rem, 1vw, 1rem) !important;
  justify-content: flex-end !important;
}

/* ============================================================================
   ALERTS & TOASTS - More Visible
   ============================================================================ */

.alert,
.portal-alert {
  padding: clamp(1rem, 1.5vw + 0.25rem, 1.25rem) clamp(1.25rem, 2vw + 0.25rem, 1.5rem) !important;
  border-radius: clamp(8px, 1vw + 4px, 12px) !important;
  border-left: clamp(4px, 0.5vw, 5px) solid !important;
  margin-bottom: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
  font-weight: 500 !important;
  font-size: clamp(0.8125rem, 0.8vw + 0.25rem, 0.9375rem) !important;
  animation: slideDown 0.3s ease-out !important;
}

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

.alert-success,
.portal-alert-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}

.alert-error,
.portal-alert-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

.alert-warning,
.portal-alert-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
}

.alert-info,
.portal-alert-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  border-color: #3b82f6 !important;
  color: #1e40af !important;
}

/* Toast notifications */
.toast-container {
  position: fixed !important;
  top: 100px !important;
  right: 1.5rem !important;
  z-index: 10000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  max-width: 420px !important;
}

.toast,
.portal-toast {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.5rem !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
  border-left: 5px solid !important;
  animation: slideInRight 0.3s ease-out !important;
  min-width: 320px !important;
  font-weight: 500 !important;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast-success { border-color: #10b981 !important; }
.toast-error { border-color: #ef4444 !important; }
.toast-warning { border-color: #f59e0b !important; }
.toast-info { border-color: #3b82f6 !important; }

/* ============================================================================
   EMPTY STATES - More Engaging
   ============================================================================ */

.empty-state {
  padding: 4rem 2rem !important;
  text-align: center !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-radius: 14px !important;
  border: 2px dashed #cbd5e1 !important;
  margin: 2rem 0 !important;
}

.empty-state-icon {
  font-size: 5rem !important;
  opacity: 0.4 !important;
  margin-bottom: 1.5rem !important;
  filter: grayscale(20%) !important;
}

.empty-state h3 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 0.75rem !important;
}

.empty-state p {
  font-size: 1rem !important;
  color: #64748b !important;
  line-height: 1.6 !important;
}

/* ============================================================================
   RESPONSIVE DESIGN - Mobile Optimized
   ============================================================================ */

/* Laptop (992px - 1199px) */
@media (max-width: 1199px) {
  .portal-summary-grid {
    justify-content: flex-end !important;
    overflow-x: auto !important;
  }
  
  .portal-summary-card {
    min-width: 110px !important;
    max-width: 130px !important;
  }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  body {
    font-size: 15px !important;
  }
  
  /* Adjust container padding for compact navbar */
  #app,
  #appContainer,
  .portal-container,
  div.portal-container,
  div#app.portal-container,
  div#appContainer.portal-container,
  body > .detail-container {
    padding-top: 90px !important;
  }
  
  /* Tablet-specific heading adjustments */
  .detail-section-header,
  .profile-section-header,
  .info-section-header {
    font-size: 1.125rem !important;
  }
  
  .edit-btn,
  .detail-edit-btn {
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.75rem !important;
  }
  
  .portal-header-content {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
  }
  
  .portal-logo img {
    height: 50px !important;
  }
  
  .portal-nav {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .portal-nav-link {
    width: auto !important;
    text-align: center !important;
    padding: 0.5rem 0.625rem !important;
    font-size: 0.6875rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }
  
  /* Compact scrollbar for horizontal nav scroll */
  .portal-nav::-webkit-scrollbar {
    height: 4px !important;
  }
  
  .portal-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  .portal-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
    border-radius: 2px !important;
  }
  
  .portal-summary-grid {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 0.65rem !important;
  }
  
  .portal-summary-card {
    padding: 0.6rem 0.7rem !important;
    min-width: 105px !important;
    max-width: 120px !important;
    min-height: 80px !important;
  }
  
  .portal-summary-value {
    font-size: 0.8rem !important;
  }
  
  .portal-summary-label {
    font-size: 0.6rem !important;
  }
  
  .portal-summary-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 1rem !important;
  }
  
  .portal-summary-icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.5rem !important;
  }
  
  .portal-dashboard-header {
    flex-direction: column !important;
    padding: 1.5rem !important;
  }
  
  .loan-app-header {
    flex-direction: column !important;
    padding: 1.5rem !important;
    margin-top: 0 !important;
  }
  
  .loan-app-header-left {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  .loan-app-header-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .loan-app-title {
    font-size: 1.75rem !important;
  }
  
  .loan-app-subtitle {
    font-size: 0.9375rem !important;
  }
  
  .portal-btn,
  .btn {
    width: 100% !important;
  }
  
  /* Exception: buttons inside table should NOT be full width */
  #loansTable .portal-btn,
  #loansTable .btn,
  table .portal-btn,
  table .btn {
    width: auto !important;
  }
  
  /* Tablet: smaller table fonts */
  #loansTable th {
    font-size: 0.6875rem !important;
    padding: 0.875rem 0.625rem !important;
  }
  
  #loansTable td {
    font-size: 0.75rem !important;
    padding: 0.875rem 0.625rem !important;
    vertical-align: top !important;
  }
  
  #loansTable td button,
  #loansTable td a.portal-btn,
  #loansTable .action-btn {
    font-size: 0.6875rem !important;
    padding: 0.3125rem 0.5rem !important;
    min-height: auto !important;
    line-height: 1.3 !important;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  body {
    font-size: 14px !important;
  }
  
  /* Reduce container padding for single-line mobile navbar */
  #app,
  #appContainer,
  .portal-container,
  div.portal-container,
  div#app.portal-container,
  div#appContainer.portal-container,
  body > .detail-container {
    padding-top: 80px !important;
  }
  
  /* Mobile-specific heading adjustments */
  h1 {
    font-size: 1.5rem !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
  }
  
  .detail-section-header,
  .profile-section-header,
  .info-section-header {
    font-size: 1rem !important;
    padding: 0.75rem !important;
  }
  
  .edit-btn,
  .detail-edit-btn {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.625rem !important;
    min-height: 32px !important;
  }
  
  .loan-app-main,
  .portal-main {
    padding: 1rem !important;
    padding-top: 1rem !important;
  }
  
  .loan-app-header {
    padding: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    margin-top: 0 !important;
  }
  
  .loan-app-title {
    font-size: 1.5rem !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .loan-app-title .icon {
    font-size: 2rem !important;
  }
  
  .loan-app-subtitle {
    font-size: 0.875rem !important;
    text-align: center !important;
  }
  
  .application-id-display {
    padding: 0.5rem 0.75rem !important;
  }
  
  .application-id-label,
  .application-id-value {
    font-size: 0.75rem !important;
  }
  
  .portal-card,
  .loan-app-section {
    padding: 1.25rem !important;
    border-radius: 12px !important;
  }
  
  .portal-card-header,
  .section-header {
    padding: 1.25rem !important;
    margin: -1.25rem -1.25rem 1.25rem -1.25rem !important;
  }
  
  .portal-logo img {
    height: 64px !important;
  }
  
  .portal-nav {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .portal-summary-grid {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 0.6rem !important;
  }
  
  .portal-summary-card {
    padding: 0.55rem 0.65rem !important;
    min-width: 100px !important;
    max-width: 110px !important;
    min-height: 75px !important;
  }
  
  .portal-summary-value {
    font-size: 0.75rem !important;
  }
  
  .portal-summary-label {
    font-size: 0.6875rem !important;
    margin-bottom: 0.375rem !important;
  }
  
  .portal-summary-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.3rem !important;
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  
  .schedule-summary {
    grid-template-columns: 1fr !important;
  }
  
  .modal {
    padding: 0.5rem !important;
    align-items: flex-end !important;
  }
  
  .modal-dialog {
    margin: 0 !important;
    max-width: 100% !important;
    border-radius: var(--theme-border-radius-xl) var(--theme-border-radius-xl) 0 0 !important;
  }
  
  .modal-content {
    border-radius: var(--theme-border-radius-xl) var(--theme-border-radius-xl) 0 0 !important;
  }
  
  .modal-footer {
    flex-direction: column-reverse !important;
  }
  
  .modal-footer .portal-btn {
    width: 100% !important;
  }
  
  /* Table horizontal scroll on small screens */
  .portal-table-container,
  .schedules-table-wrapper,
  .portal-card-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
  }
  
  /* Ensure table doesn't break layout */
  .portal-table {
    min-width: 800px !important; /* Minimum width to show all columns */
    width: 100% !important;
  }
  
  /* Show scrollbar hint */
  .portal-table-container::-webkit-scrollbar,
  .portal-card-body::-webkit-scrollbar {
    height: 8px !important;
  }
  
  .portal-table-container::-webkit-scrollbar-track,
  .portal-card-body::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
  }
  
  .portal-table-container::-webkit-scrollbar-thumb,
  .portal-card-body::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
  }
  
  .portal-table-container::-webkit-scrollbar-thumb:hover,
  .portal-card-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
  }
  
  .toast-container {
    left: 0.75rem !important;
    right: 0.75rem !important;
    max-width: 100% !important;
  }
  
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.375rem !important;
  }
  
  /* Mobile: even smaller table fonts to fit on one line */
  #loansTable th {
    font-size: 0.625rem !important;
    padding: 0.75rem 0.5rem !important;
    letter-spacing: 0.03em !important;
  }
  
  #loansTable td {
    font-size: 0.6875rem !important;
    padding: 0.75rem 0.5rem !important;
    vertical-align: top !important;
  }
  
  #loansTable td button,
  #loansTable td a.portal-btn,
  #loansTable .action-btn {
    font-size: 0.625rem !important;
    padding: 0.25rem 0.4375rem !important;
    min-height: auto !important;
    line-height: 1.2 !important;
  }
  
  #loansTable .portal-badge {
    font-size: 0.5625rem !important;
    padding: 0.1875rem 0.375rem !important;
    line-height: 1.2 !important;
  }
  
  /* Keep action buttons inline on mobile - allow wrap if absolutely necessary */
  #loansTable td a.portal-btn,
  #loansTable td button.portal-btn,
  #loansTable tbody td:nth-child(9) a,
  #loansTable tbody td:nth-child(9) button {
    display: inline-block !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0 !important;
    float: none !important;
  }
  
  .action-buttons,
  #loansTable tbody td:nth-child(9) {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
  }
}

/* Mobile Portrait (< 576px) */
@media (max-width: 575px) {
  /* Single-line compact navbar on small mobile */
  #app,
  #appContainer,
  .portal-container,
  div.portal-container,
  div#app.portal-container,
  div#appContainer.portal-container,
  body > .detail-container {
    padding-top: 70px !important;
  }
  
  .portal-header-content {
    padding: 0.375rem 0.75rem !important;
  }
  
  .portal-logo img {
    height: 44px !important;
  }
  
  .portal-nav-link {
    padding: 0.4375rem 0.5rem !important;
    font-size: 0.625rem !important;
  }
  
  .portal-card,
  .loan-app-section {
    padding: 1rem !important;
  }
  
  /* Small mobile heading adjustments */
  h1 {
    font-size: 1.375rem !important;
  }
  
  h2 {
    font-size: 1.125rem !important;
  }
  
  h3 {
    font-size: 1rem !important;
  }
  
  .detail-section-header,
  .profile-section-header,
  .info-section-header {
    font-size: 0.9375rem !important;
    padding: 0.625rem !important;
  }
  
  .edit-btn,
  .detail-edit-btn {
    font-size: 0.6875rem !important;
    padding: 0.3125rem 0.5rem !important;
    min-height: 30px !important;
  }
  
  .portal-btn,
  .btn {
    padding: 0.75rem 1.25rem !important;
    font-size: 0.875rem !important;
  }
  
  .loan-app-main {
    padding: 0.875rem !important;
    padding-top: 0.75rem !important;
  }
  
  .loan-app-header {
    padding: 1rem !important;
    margin-top: 0 !important;
  }
  
  .loan-app-title {
    font-size: 1.375rem !important;
  }
  
  .loan-app-subtitle {
    font-size: 0.8125rem !important;
  }
  
  .form-input,
  .form-textarea,
  .form-select,
  input,
  select,
  textarea {
    padding: 0.75rem 1rem !important;
  }
  
  .portal-summary-card {
    padding: 0.5rem 0.6rem !important;
    min-width: 95px !important;
    max-width: 105px !important;
    min-height: 72px !important;
  }
  
  .portal-summary-value {
    font-size: 0.7rem !important;
  }
  
  .portal-summary-label {
    font-size: 0.58rem !important;
  }
  
  /* Small Mobile: Ensure table scrolls horizontally */
  .portal-card-body,
  .portal-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    width: 100% !important;
  }
  
  /* Add scroll indicator shadow on mobile */
  .portal-card-body::after {
    content: '' !important;
    position: sticky !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 30px !important;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.05)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  
  /* Small Mobile: most compact table fonts */
  #loansTable th {
    font-size: 0.5625rem !important;
    padding: 0.625rem 0.375rem !important;
    letter-spacing: 0.02em !important;
  }
  
  #loansTable td {
    font-size: 0.625rem !important;
    padding: 0.625rem 0.375rem !important;
    vertical-align: top !important;
  }
  
  #loansTable td button,
  #loansTable td a.portal-btn,
  #loansTable .action-btn {
    font-size: 0.5625rem !important;
    padding: 0.25rem 0.375rem !important;
    min-height: auto !important;
    line-height: 1.2 !important;
  }
  
  #loansTable .portal-badge {
    font-size: 0.5rem !important;
    padding: 0.125rem 0.3125rem !important;
    line-height: 1.2 !important;
  }
  
  /* Ensure buttons stay inline even on smallest screens */
  #loansTable td a.portal-btn,
  #loansTable td button.portal-btn,
  #loansTable tbody td:nth-child(9) a,
  #loansTable tbody td:nth-child(9) button {
    display: inline-block !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0 !important;
    float: none !important;
  }
  
  .action-buttons,
  #loansTable tbody td:nth-child(9) {
    display: flex !important;
    flex-direction: row !important;
  }
}

/* ============================================================================
   COMMUNICATION SECTION - Unified Styling for All Pages
   ============================================================================ */

/* Communication section - Enhanced visual styling (works with existing grids) */
#commentsSection,
.comments-section {
  background: white !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: clamp(12px, 2vw + 8px, 16px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Communication header with red gradient */
#commentsSection h2,
.comments-section h2 {
  background: linear-gradient(135deg, #8b0000 0%, #c41e1e 100%) !important;
  color: #ffffff !important;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem) !important;
  margin: 0 !important;
  font-size: clamp(1.25rem, 2vw + 0.25rem, 1.5rem) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  border-radius: clamp(12px, 2vw + 8px, 16px) clamp(12px, 2vw + 8px, 16px) 0 0 !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Chat container enhanced styling */
#commentsSection .chat-container,
.comments-section .chat-container,
#commentsList.chat-container,
div.chat-container {
  background: #e5ddd5 !important;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.03) 35px, rgba(255,255,255,.03) 70px) !important;
  padding: clamp(1rem, 2vw, 1.5rem) !important;
}

/* Chat input container enhanced */
#commentsSection .chat-input-container,
.comments-section .chat-input-container,
div.chat-input-container {
  background: #f0f2f5 !important;
  padding: clamp(0.75rem, 1.5vw, 1rem) !important;
  border-top: 1px solid #dee2e6 !important;
}

/* Desktop: Side-by-side layout with enhanced Communication styling */
@media (min-width: 993px) {
  /* Keep existing grid from loan-application.css - just enhance visuals */
  /* loan-app-main has grid: 1fr 380px (lines 1513-1518 in loan-application.css) */
  /* loan-app-container is in column 1 */
  /* #commentsSection is in column 2 */
  
  /* Communication section - enhance visual styling (layout already defined) */
  .loan-app-main #commentsSection,
  .portal-main #commentsSection {
    position: sticky !important;
    top: clamp(100px, 12vw, 120px) !important;
    max-height: calc(100vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .loan-app-main #commentsSection .chat-container,
  .portal-main #commentsSection .chat-container {
    min-height: 300px !important;
    max-height: calc(100vh - 300px) !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  
  .loan-app-main #commentsSection .chat-input-container,
  .portal-main #commentsSection .chat-input-container {
    position: sticky !important;
    bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  
  /* Loan Detail Page: Fix Communication overlap with title section */
  /* The grid has #commentsSection at grid-row: 2, same as #detailContent */
  /* But .detail-title-section is inside #detailContent, causing overlap */
  /* Solution: Add margin-top to push Communication down below title section */
  .detail-container > #commentsSection {
    grid-row: 2 !important;
    grid-column: 2 !important;
    margin-top: clamp(200px, 20vw + 100px, 280px) !important; /* Dynamic offset for title section height */
    align-self: start !important;
    position: sticky !important;
    top: clamp(100px, 12vw, 120px) !important;
  }
  
  /* Make sure detail content sections stay in proper grid position */
  .detail-container > #detailContent {
    grid-row: 2 !important;
    grid-column: 1 !important;
  }
  
  /* Note: Header is inside loan-app-container (column 1), so it can't span full width */
  /* This matches the existing structure - we only enhance visuals, not layout */
}

/* ============================================================================
   LOAN DETAIL PAGE - Container Spacing & Title Section
   ============================================================================ */

/* Loan detail page wrapper */
.detail-container {
  padding-top: clamp(1.5rem, 2vw, 2rem) !important;
  margin-top: 0 !important;
}

/* Detail header spacing */
.detail-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Beautiful title section for loan detail page */
.detail-title-section {
  background: linear-gradient(135deg, #8b0000 0%, #c41e1e 50%, #8b0000 100%) !important;
  padding: clamp(2rem, 3vw + 1rem, 3rem) clamp(1.5rem, 2vw + 1rem, 2.5rem) !important;
  margin: 0rem 0rem 2rem 0rem !important;
  border-radius: clamp(12px, 2vw + 8px, 20px) clamp(12px, 2vw + 8px, 20px) 0 0 !important;
  text-align: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  overflow: hidden !important;
}

.detail-title-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

.detail-title-section h1 {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 clamp(0.75rem, 1vw, 1rem) 0 !important;
  text-transform: uppercase !important;
  letter-spacing: clamp(0.05em, 0.01vw + 0.05em, 0.1em) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.2 !important;
  position: relative !important;
  z-index: 1 !important;
}

.detail-company {
  font-size: clamp(1rem, 1.5vw + 0.25rem, 1.25rem) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  margin: 0 0 clamp(0.5rem, 0.8vw, 0.75rem) 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  z-index: 1 !important;
}

.detail-generated {
  font-size: clamp(0.8125rem, 1vw + 0.125rem, 1rem) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0 !important;
  font-family: 'Courier New', Consolas, monospace !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  letter-spacing: 0.03em !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Separator styling */
.detail-generated::before {
  content: '📋' !important;
  margin-right: 0.5rem !important;
  font-size: 1.1em !important;
}

/* Responsive adjustments for detail title section */
@media (max-width: 767px) {
  .detail-title-section {
    padding: 1.5rem 1rem !important;
    margin: -1.25rem -1.25rem 1.5rem -1.25rem !important;
  }
  
  .detail-title-section h1 {
    font-size: 1.5rem !important;
    letter-spacing: 0.05em !important;
  }
  
  .detail-company {
    font-size: 0.9375rem !important;
  }
  
  .detail-generated {
    font-size: 0.75rem !important;
  }
}

@media (max-width: 575px) {
  .detail-title-section {
    padding: 1.25rem 0.875rem !important;
  }
  
  .detail-title-section h1 {
    font-size: 1.25rem !important;
  }
  
  .detail-company {
    font-size: 0.875rem !important;
  }
  
  .detail-generated {
    font-size: 0.6875rem !important;
  }
}

/* ============================================================================
   PROFILE PAGE & CUSTOMER DETAILS - Dynamic Sizing & Beautiful Header
   ============================================================================ */

/* Beautiful profile header with red gradient (same as loan pages) */
.profile-header {
  background: linear-gradient(135deg, #8b0000 0%, #c41e1e 50%, #8b0000 100%) !important;
  padding: clamp(2rem, 3vw + 1rem, 3rem) clamp(1.5rem, 2vw + 1rem, 2.5rem) !important;
  border-radius: clamp(12px, 2vw + 8px, 20px) !important;
  margin-bottom: clamp(1.5rem, 2vw, 2rem) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(1.5rem, 2vw + 0.5rem, 2.5rem) !important;
}

.profile-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.profile-header > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Profile photo container */
.profile-photo-container {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.profile-photo {
  width: clamp(100px, 12vw, 140px) !important;
  height: clamp(100px, 12vw, 140px) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  color: #64748b !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
  transition: transform 0.3s ease !important;
}

.profile-photo:hover {
  transform: scale(1.05) !important;
}

.profile-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Profile photo upload button */
.profile-photo-upload {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  color: #8b0000 !important;
  width: clamp(36px, 4vw, 44px) !important;
  height: clamp(36px, 4vw, 44px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: 3px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
}

.profile-photo-upload:hover {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  transform: scale(1.1) rotate(15deg) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Profile info section */
.profile-info {
  flex: 1 !important;
  color: #ffffff !important;
}

.profile-info h1,
.profile-header h1 {
  font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.5rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 clamp(0.5rem, 1vw, 0.75rem) 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.profile-info h1 span,
.profile-header h1 span {
  font-size: 0.6em !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.profile-info p {
  font-size: clamp(0.875rem, 1vw + 0.125rem, 1rem) !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: clamp(0.375rem, 0.5vw, 0.5rem) 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  line-height: 1.5 !important;
}

.profile-info p strong {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

/* Profile completion status */
#profileCompletionStatus {
  display: inline-block !important;
  padding: clamp(0.375rem, 0.6vw, 0.5rem) clamp(0.75rem, 1vw, 1rem) !important;
  background: rgba(40, 167, 69, 0.25) !important;
  border: 2px solid rgba(40, 167, 69, 0.4) !important;
  border-radius: clamp(6px, 1vw, 8px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  margin-top: clamp(0.5rem, 0.8vw, 0.75rem) !important;
}

#profileCompletionStatus span {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* Responsive adjustments for profile header */
@media (max-width: 991px) {
  .profile-header {
    flex-direction: column !important;
    text-align: center !important;
    padding: 2rem 1.5rem !important;
  }
  
  .profile-photo-container {
    margin-bottom: 1.5rem !important;
  }
  
  .profile-info {
    text-align: center !important;
  }
  
  .profile-info h1 {
    justify-content: center !important;
  }
}

@media (max-width: 767px) {
  .profile-header {
    padding: 1.5rem 1rem !important;
  }
  
  .profile-photo {
    width: 100px !important;
    height: 100px !important;
  }
  
  .profile-info h1 {
    font-size: 1.5rem !important;
  }
  
  .profile-info p {
    font-size: 0.875rem !important;
  }
}

@media (max-width: 575px) {
  .profile-header {
    padding: 1.25rem 0.875rem !important;
  }
  
  .profile-photo {
    width: 90px !important;
    height: 90px !important;
  }
  
  .profile-photo-upload {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.875rem !important;
  }
  
  .profile-info h1 {
    font-size: 1.375rem !important;
    flex-direction: column !important;
  }
  
  .profile-info p {
    font-size: 0.8125rem !important;
  }
}

/* Profile page specific heading adjustments */
.detail-header h1 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2.25rem) !important;
}

/* Section headings in profile/detail pages */
.detail-section-header,
.profile-section-header,
.info-section-header {
  font-size: clamp(1rem, 1.8vw + 0.25rem, 1.5rem) !important;
  font-weight: 700 !important;
  padding: clamp(0.75rem, 1.5vw, 1.25rem) !important;
  margin-bottom: clamp(0.75rem, 1vw, 1rem) !important;
}

/* Detail grid items */
.detail-item,
.info-item,
.profile-item {
  padding: clamp(0.75rem, 1vw + 0.25rem, 1rem) !important;
  margin-bottom: clamp(0.5rem, 0.8vw, 0.75rem) !important;
}

/* Edit buttons next to section headings */
.edit-btn,
.detail-edit-btn,
button.edit-btn {
  font-size: clamp(0.75rem, 0.8vw + 0.25rem, 0.875rem) !important;
  padding: clamp(0.375rem, 0.6vw, 0.5rem) clamp(0.75rem, 1vw + 0.25rem, 1rem) !important;
  min-height: clamp(32px, 4vw, 36px) !important;
  line-height: 1.4 !important;
}

/* Info cards in profile pages */
.info-card,
.detail-card,
.profile-card {
  padding: clamp(1rem, 2vw + 0.25rem, 1.5rem) !important;
  border-radius: clamp(8px, 1.5vw + 4px, 12px) !important;
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem) !important;
}

/* ============================================================================
   DASHBOARD TABLE - Hide Specific Columns
   ============================================================================ */

/* Hide Date column (2nd column) in My Loan Applications table */
#loansTable th:nth-child(2),
#loansTable td:nth-child(2) {
  display: none !important;
}

/* Hide Write-off column (7th column) in My Loan Applications table */
#loansTable th:nth-child(7),
#loansTable td:nth-child(7) {
  display: none !important;
}

/* Hide activity icons in Actions column but keep the action buttons */
#loansTable td:nth-child(10) .activity-icon,
#loansTable td:nth-child(10) span[title*="activity"],
#loansTable td:nth-child(10) button[title*="activity"],
#loansTable td:nth-child(10) a[title*="activity"] {
  display: none !important;
}

/* Dynamic responsive font sizing for My Loan Applications table */
#loansTable th {
  font-size: clamp(0.6875rem, 1vw, 0.8125rem) !important;
  padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(0.5rem, 1vw, 1rem) !important;
  white-space: nowrap !important;
}

#loansTable td {
  font-size: clamp(0.75rem, 1vw, 0.9375rem) !important;
  padding: clamp(0.75rem, 1.5vw, 1.125rem) clamp(0.5rem, 1vw, 1rem) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: top !important;
}

/* Compact buttons in Actions column - match State/Status height */
#loansTable td button,
#loansTable td a.portal-btn,
#loansTable .action-btn {
  min-height: auto !important;
  height: auto !important;
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem) !important;
  padding: clamp(0.3125rem, 0.5vw, 0.4375rem) clamp(0.5rem, 0.8vw, 0.75rem) !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  border-radius: clamp(4px, 0.5vw, 6px) !important;
  font-weight: 600 !important;
}

/* Apply same compact styling to all pages (profile, loan form, detail) */
.detail-table td button,
.detail-table td a.portal-btn,
.detail-table .edit-btn,
.detail-table .add-btn,
.detail-table .delete-btn,
.portal-table td button,
.portal-table td a.portal-btn,
.portal-table .edit-btn,
.portal-table .add-btn,
.portal-table .delete-btn,
.detail-section .edit-btn,
.detail-section .add-btn,
.detail-section button.portal-btn-sm,
h2 .edit-btn,
h2 .add-btn,
h2 button.portal-btn-sm,
.loan-app-section button.portal-btn-sm,
.loan-app-section .add-btn,
.loan-app-section .edit-btn,
.loan-app-section .delete-btn,
.section-header button.portal-btn-sm,
.section-header .add-btn,
.items-list button,
.items-list .portal-btn-sm,
.schedule-actions button,
.schedule-actions .portal-btn-sm {
  min-height: auto !important;
  height: auto !important;
  font-size: clamp(0.6875rem, 0.85vw, 0.8125rem) !important;
  padding: clamp(0.3125rem, 0.5vw, 0.4375rem) clamp(0.5rem, 0.8vw, 0.75rem) !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  border-radius: clamp(4px, 0.5vw, 6px) !important;
  font-weight: 600 !important;
  vertical-align: top !important; /* Align to top of cell */
  display: inline-block !important;
}

/* Ensure all table cells with buttons align to top */
.portal-table td,
.detail-table td,
#loansTable td,
table td {
  vertical-align: top !important; /* All content aligns to top */
}

/* Exception: Keep badges and text aligned with buttons */
.portal-table td .portal-badge,
.detail-table td .portal-badge,
#loansTable td .portal-badge {
  vertical-align: top !important;
  display: inline-block !important;
}

/* Status badges scale proportionally and match button height */
#loansTable .portal-badge {
  font-size: clamp(0.625rem, 0.85vw, 0.75rem) !important;
  padding: clamp(0.25rem, 0.5vw, 0.375rem) clamp(0.5rem, 0.8vw, 0.75rem) !important;
  line-height: 1.3 !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* Ensure action buttons display inline horizontally - CRITICAL */
#loansTable td:last-child,
#loansTable td.actions-cell,
#loansTable .actions-cell,
#loansTable tbody td:nth-child(9) {
  white-space: nowrap !important;
}

/* Force all buttons and links in Actions column to display inline */
#loansTable td a.portal-btn,
#loansTable td button.portal-btn,
#loansTable td a.portal-btn-sm,
#loansTable td button.portal-btn-sm,
#loansTable td a.portal-btn-primary,
#loansTable td a.portal-btn-success,
#loansTable .action-buttons a,
#loansTable .action-buttons button,
#loansTable tbody td:nth-child(9) a,
#loansTable tbody td:nth-child(9) button {
  display: inline-block !important;
  float: none !important;
  margin-right: 0.375rem !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  vertical-align: top !important;
  width: auto !important;
}

#loansTable td a.portal-btn:last-child,
#loansTable td button.portal-btn:last-child {
  margin-right: 0 !important;
}

/* Action buttons container - flexbox horizontal */
.action-buttons,
.actions-cell,
#loansTable tbody td:nth-child(9) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.375rem !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Override any width constraints on action buttons */
#loansTable .portal-btn-sm,
#loansTable .portal-btn-primary,
#loansTable .portal-btn-success {
  min-width: auto !important;
  max-width: none !important;
  width: auto !important;
}

/* CRITICAL: Force inline display for all action buttons - highest specificity */
table#loansTable tbody tr td a.portal-btn,
table#loansTable tbody tr td button.portal-btn,
table.portal-table tbody tr td a.portal-btn,
table.portal-table tbody tr td button.portal-btn {
  display: inline-block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  margin-right: 0.375rem !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

/* Force Actions column to use flexbox row layout */
table#loansTable tbody tr td:nth-child(9),
table#loansTable tbody tr td:last-child {
  display: table-cell !important;
}

table#loansTable tbody tr td:nth-child(9) > *,
table#loansTable tbody tr td:last-child > * {
  display: inline-block !important;
  vertical-align: top !important;
}

/* ============================================================================
   ACCESSIBILITY - WCAG 2.1 AA Compliant
   ============================================================================ */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .portal-card:hover,
  .loan-app-section:hover,
  .portal-summary-card:hover,
  .portal-btn:hover {
    transform: none !important;
  }
}

/* Enhanced focus visibility */
*:focus-visible {
  outline: 4px solid rgba(139, 0, 0, 0.4) !important;
  outline-offset: 3px !important;
  border-radius: 4px !important;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .portal-card,
  .loan-app-section {
    border-width: 3px !important;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    border-width: 3px !important;
  }
}

/* ============================================================================
   UTILITY & POLISH
   ============================================================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

::-webkit-scrollbar-track {
  background: #f1f5f9 !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%) !important;
  border-radius: 10px !important;
  border: 3px solid #f1f5f9 !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%) !important;
}

/* Loading spinner */
.spinner,
.portal-spinner {
  border-width: 4px !important;
  border-color: #e2e8f0 !important;
  border-top-color: #8b0000 !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Badge enhancements */
.portal-badge {
  padding: clamp(0.375rem, 0.6vw, 0.5rem) clamp(0.75rem, 1vw + 0.25rem, 1rem) !important;
  font-weight: 700 !important;
  border-radius: clamp(16px, 2vw, 20px) !important;
  font-size: clamp(0.6875rem, 0.7vw + 0.25rem, 0.8125rem) !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.portal-badge-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  color: #065f46 !important;
}

.portal-badge-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  color: #92400e !important;
}

.portal-badge-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  color: #991b1b !important;
}

.portal-badge-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  color: #1e40af !important;
}

.portal-badge-secondary {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
  color: #475569 !important;
}

/* Dividers */
hr {
  border: none !important;
  border-top: 2px solid #e2e8f0 !important;
  margin: 2rem 0 !important;
}

/* Print styles */
@media print {
  .portal-header,
  .portal-nav,
  .portal-btn,
  .modal {
    display: none !important;
  }
  
  .portal-card,
  .loan-app-section {
    box-shadow: none !important;
    border: 2px solid #000 !important;
    page-break-inside: avoid !important;
  }
}

/* ============================================================================
   SCROLL DETECTION VISUAL FEEDBACK
   ============================================================================ */

/* Enhanced shadow when scrolling */
.portal-header.scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Compact mode when scrolling (optional enhancement) */
.portal-header.scrolled .portal-logo img {
  height: clamp(60px, 8vw, 72px) !important;
  transition: height 0.3s ease !important;
}

/* ============================================================================
   END OF ENHANCED THEME
   ============================================================================ */