body{margin:0; padding:0; font-family:var(--font-body); color:var(--body-color); background:var(--body-bg)}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);}

:root{
    --font-heading:'Inter', sans-serif;
    --font-body:"Inter", sans-serif;
    
    /* Base Colors */
    --dark-blue:#344393;
    --dark-gray:#54585f;
    --body-color:#979797;
    --border-color:#DDDDDD;
    --bg-nav-link:#F3F4F8;
    --body-bg:#F4F7FB;
    --white:#ffffff;
    --leadchef-orange: #FFA32B;
    
    /* Modern Color Palette */
    --modern-primary: #6366f1;
    --modern-primary-hover: #4f46e5;
    --modern-primary-light: #e0e7ff;
    --modern-secondary: #8b5cf6;
    --modern-secondary-hover: #7c3aed;
    --modern-success: #10b981;
    --modern-success-light: #d1fae5;
    --modern-bg-light: #f9fafb;
    --modern-bg-card: #ffffff;
    --modern-text-dark: #1f2937;
    --modern-text-medium: #4b5563;
    --modern-text-muted: #6b7280;
    --modern-border: #e5e7eb;
    --modern-border-light: #f3f4f6;

    /* Font Weights */
    --heading-weight-light: 300;
    --heading-weight-normal: 400;
    --heading-weight-medium: 500;
    --heading-weight-bold: 600;
    --body-weight-normal: 400;
    --body-weight-medium: 500;
    --body-weight-bold: 600;

    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 28px;
    --font-size-display: 40px;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;

    
    /* Button Colors */
    /* Primary */
    --btn-primary-bg: var(--dark-blue);
    --btn-primary-color: var(--white);
    --btn-primary-border: var(--dark-blue);
    --btn-primary-hover-bg: #2a3678;
    --btn-primary-hover-border: #2a3678;
    --btn-primary-hover-color: var(--white);

    /* Secondary */
    --btn-secondary-bg: #6c757d;
    --btn-secondary-color: var(--white);
    --btn-secondary-border: #6c757d;
    --btn-secondary-hover-bg: #5a6268;
    --btn-secondary-hover-color: var(--white);
    --btn-secondary-hover-border: #545b62;

    /* Success */
    --btn-success-bg: #36C76C;
    --btn-success-color: var(--white);
    --btn-success-border: #36C76C;
    --btn-success-hover-bg: #2ca55a;
    --btn-success-hover-color: var(--white);
    --btn-success-hover-border: #2ca55a;

    /* Danger */
    --btn-danger-bg: #dc3545;
    --btn-danger-color: var(--white);
    --btn-danger-border: #dc3545;
    --btn-danger-hover-bg: #c82333;
    --btn-danger-hover-color: var(--white);
    --btn-danger-hover-border: #bd2130;

    /* Button Sizes */
    --btn-padding-xs: 5px 10px;
    --btn-padding-sm: 7px 15px;
    --btn-padding-md: 10px 20px;
    --btn-padding-lg: 12px 24px;

    --btn-font-size-xs: 12px;
    --btn-font-size-sm: 16px;
    --btn-font-size-md: 16px;
    --btn-font-size-lg: 18px;

    /* Layout Variables */
    --sidebar-width: 220px;
    --navbar-height: 64px;
    --content-padding: 20px;
    --transition-time: 0.2s;

}

/* *************************************** COMPONENT STYLES (Non-Chrome Elements) ****************************************/
/* 
  NOTE: Core layout/chrome styles (sidebar, navbar, main layout) are now in app-shell.css
  This file contains only component-specific styling that layers on top of the shell
*/

/* Profile Link Styling */
.nav-profile-link { 
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
  padding: 8px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-decoration: none;
  margin-right: 8px;
}

.nav-profile-link:hover { 
  background-color: rgba(255, 255, 255, 0.12); 
  transform: scale(1.05);
}

.nav-profile-link .profile-avatar { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  background-color: rgba(255, 255, 255, 0.2); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.25s ease;
}

.nav-profile-link .profile-avatar img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 50%; 
}

.nav-profile-link .profile-initial { 
  color: var(--white); 
  font-size: var(--font-size-md); 
  font-weight: var(--heading-weight-medium); 
}

/* Modern Dropdown Menu */
.navbar .dropdown .dropdown-menu-sidebar { 
  position: absolute;
  top: 100%; 
  right: 16px; 
  left: auto; 
  margin-top: 12px;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 
              0 8px 16px rgba(0, 0, 0, 0.1);
  padding: 8px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Let Bootstrap handle the show/hide, just add animations */
.navbar .dropdown-menu-sidebar:not(.show) {
  transform: translateY(-8px);
  opacity: 0;
}

.navbar .dropdown-menu-sidebar.show {
  transform: translateY(0);
  opacity: 1;
}

.navbar .dropdown-menu-sidebar::before { 
  content: ''; 
  position: absolute; 
  top: -6px; 
  right: 20px; 
  width: 12px; 
  height: 12px; 
  background: #ffffff; 
  transform: rotate(45deg); 
  border-left: 1px solid rgba(0, 0, 0, 0.1); 
  border-top: 1px solid rgba(0, 0, 0, 0.1); 
}

/* Dropdown Email Header */
.dropdown-email {
  color: #666;
  font-size: 13px;
  font-weight: 400;
  padding: 12px 16px 12px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 8px;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-body);
}

/* Dropdown Items */
.dropdown-menu-sidebar .dropdown-item {
  color: #333;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 2px 0;
  transition: all 0.2s ease;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.dropdown-menu-sidebar .dropdown-item:hover {
  background: rgba(52, 67, 147, 0.1);
  color: var(--dark-blue);
  transform: translateX(2px);
}

.dropdown-menu-sidebar .dropdown-item:active {
  background: rgba(52, 67, 147, 0.15);
  transform: translateX(1px);
}

/* Dropdown Divider */
.dropdown-menu-sidebar .dropdown-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  margin: 8px 12px;
  opacity: 0.6;
}

/* Mobile Responsive */
@media (max-width: 991px) { 
  .dropdown-menu-sidebar { 
    position: fixed !important; 
    top: auto !important; 
    bottom: 20px !important; 
    left: 50% !important; 
    right: auto !important;
    width: calc(100% - 32px) !important; 
    max-width: 280px !important; 
    margin: 0 !important;
  }
  
  .navbar .dropdown-menu-sidebar:not(.show) {
    transform: translateX(-50%) translateY(20px) !important;
  }
  
  .navbar .dropdown-menu-sidebar.show {
    transform: translateX(-50%) translateY(0) !important;
  }
  
  .navbar .dropdown-menu-sidebar::before {
    display: none;
  }
}

/* Unauthenticated */
.layout-wrapper.layout-unauthenticated { min-height: 100vh; overflow-y: auto; background: #F1F1F1; }

/**************************************** PAGE HEADERS *****************************************/
.page-header { background-color: transparent; border-bottom: none; padding: 2rem 0 1.5rem; box-shadow: none; }
.page-header h1 { font-size: var(--font-size-xxl); font-weight: var(--heading-weight-bold); margin-bottom: 0.25rem; color: #000; display: flex; align-items: center; }
.page-header p { color: var(--dark-gray); font-size: var(--font-size-md); margin: 0; opacity: 0.9; }
.page-header .header-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.page-header .progress-container { display: flex; flex-direction: column; align-items: flex-end; }
.page-header .custom-progress.progress { width: 150px; height: 5px; margin: 0.25rem 0; background: #EAEAEA; }
.page-header .progress-count { text-align: right; font-weight: var(--heading-weight-bold); font-size: var(--font-size-sm); font-family: var(--font-heading); color: var(--dark-blue); }

@media (max-width: 767px) {
    .page-header { padding: 1.5rem 0 1rem; }
    .header-actions { margin-top: 0.5rem; }
}

/**************************************** BUTTONS *****************************************/
.btn { border-radius: 4px; font-family: var(--font-heading); font-weight: var(--heading-weight-normal); white-space: nowrap; transition: all 0.2s ease; text-decoration: none; display: inline-block; cursor: pointer; }

/* Button Sizes */
.btn-lg { font-size: var(--btn-font-size-lg); padding: var(--btn-padding-lg); }
.btn-md { font-size: var(--btn-font-size-md); padding: var(--btn-padding-md); }
.btn-sm { font-size: var(--btn-font-size-sm); padding: var(--btn-padding-sm); }
.btn-xs { font-size: var(--btn-font-size-xs); padding: var(--btn-padding-xs); }

/* Button Variants */
.btn:active, .btn.active { border-color: transparent !important; }
.btn.hover, .btn:hover { border-color: transparent !important; }

/* Filled */
.btn-primary { background-color: var(--btn-primary-bg); color: var(--btn-primary-color); border: 1px solid var(--btn-primary-border); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-border); color: var(--btn-primary-hover-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.btn-primary:active { background-color: #232d66 !important; border-color: #232d66 !important; color: var(--btn-primary-hover-color); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

.btn-secondary { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-color); border: 1px solid var(--btn-secondary-border); }
.btn-secondary:hover, .btn-secondary:focus { background-color: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-border); color: var(--btn-secondary-hover-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.btn-secondary:active { background-color: #232d66 !important; border-color: #232d66 !important; color: var(--btn-secondary-hover-color); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }

.btn-danger { background-color: var(--btn-danger-bg) !important; color: var(--btn-danger-color) !important; border: 1px solid var(--btn-danger-border) !important; }
.btn-danger:hover, .btn-danger:focus { background-color: var(--btn-danger-hover-bg) !important; border-color: var(--btn-danger-hover-border) !important; color: var(--btn-danger-hover-color) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

.btn-success { background-color: var(--btn-success-bg); color: var(--btn-success-color); border: 1px solid var(--btn-success-border); }
.btn-success:hover, .btn-success:focus { background-color: var(--btn-success-hover-bg); border-color: var(--btn-success-hover-border); color: var(--btn-success-hover-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

/* Outline */
.btn-outline-primary { background-color: transparent; border: 1px solid var(--btn-primary-border); color: var(--btn-primary-bg); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--btn-primary-bg); color: var(--btn-primary-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.btn-outline-primary:active, .btn-outline-primary.active { background-color: #232d66 !important; color: var(--btn-primary-color) !important; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.btn-outline-secondary { background-color: transparent; border: 1px solid var(--btn-secondary-border); color: var(--btn-secondary-bg); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background-color: var(--btn-secondary-bg); color: var(--btn-secondary-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.btn-outline-secondary:active, .btn-outline-secondary.active  { background-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-color) !important; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
.btn-outline-danger { background-color: transparent; border: 1px solid var(--btn-danger-border); color: var(--btn-danger-bg); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--btn-danger-bg); color: var(--btn-danger-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

/* Disabled State */
.btn:disabled, .btn.disabled { opacity: 0.65; pointer-events: none; cursor: not-allowed; box-shadow: none; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--btn-primary-bg); border-color: var(--btn-primary-border); color: var(--btn-primary-color); }
.btn-secondary:disabled, .btn-secondary.disabled { background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-color); }
.btn-outline-primary:disabled, .btn-outline-primary.disabled { color: var(--btn-primary-bg); background-color: transparent; border-color: var(--btn-primary-border); }
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled { color: var(--btn-secondary-bg); background-color: transparent; border-color: var(--btn-secondary-border); }

/* Special Buttons */

/* Icon Buttons */
.btn-icon { position: relative; padding-left: 40px; }
.btn-icon i, .btn-icon .bi { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.2em; }
.btn-icon-right { position: relative; padding-right: 40px; }
.btn-icon-right i, .btn-icon-right .bi { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 1.2em; }
.btn-icon-only { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-icon-only i { font-size: 1.2rem;}
.btn-icon-only.btn-sm { width: 32px; height: 32px; }
.btn-icon-only.btn-lg { width: 48px; height: 48px; }

/* Circle Overlap Icon (Like in Upload List) */
.btn-circle-overlap-icon { position: relative; padding-left: 20px; }
.btn-circle-overlap-icon i, .btn-circle-overlap-icon .bi { position: absolute; left: -12px; background: var(--btn-primary-bg); width: 22px; height: 22px; color: var(--btn-primary-color); text-align: center; font-size: var(--font-size-lg); line-height: 15px; border-radius: 30px; top: 0; border: 2px solid var(--white); margin: auto; bottom: 0; display: flex; align-items: center; justify-content: center; }

/* Modal Close Button */
.btn-modal-close { position: absolute; right: 15px; top: 15px; padding: 0; border: none; background: transparent; font-size: var(--font-size-xxl); opacity: 0.5; transition: all 0.2s ease; z-index: 5; }
.btn-modal-close:hover { opacity: 1; color: var(--dark-blue); transform: scale(1.1); }
.btn-modal-close i { display: block; }

/**************************************** ICONS *****************************************/
.action-icon {font-size: 0.9rem !important; transition: color 0.2s ease;}
.edit-icon { color: #5c6bc0 !important; }
.delete-icon { color: #ef5350 !important; }
.edit-icon:hover { color: var(--dark-blue) !important; }
.delete-icon:hover { color: #c62828 !important; }

figure.avatar-circle { height: 100px; width: 100px; font-size: 54px; line-height: 54px; display: flex; align-items: center; justify-content: center; }
span.success-icon { font-size: 60px; margin: 0 0 10px; display: inline-block; color: #36C76C; }
span.search-icon { position: absolute; left: 12px; top: 9px;}

.profile-link-active { color: #5c6bc0 !important; transition: color 0.2s ease; }
.profile-link-active:hover { color: #344393 !important; }

/**************************************** NAV PILLS (Lead List) *****************************************/
.nav-pills .nav-link { color: #000; background-color: #F2F2F2; border: none; margin-right: 0.5rem; padding: 0.5rem 1rem; font-family:var(--font-heading); border: 1px solid #F2F2F2; transition: all 0.2s ease; position: relative; overflow: hidden; }
.nav-pills .nav-link:hover:not(.active) { background-color: #E8E8E8; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); }
.nav-pills .nav-link:before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--dark-blue); transition: width 0.3s ease; }
.nav-pills .nav-link:hover:before { width: 100%; }
.nav-pills .nav-link.active { background-color: #fff; border:1px solid #344393; color: #344393; box-shadow: 0 2px 8px rgba(52, 67, 147, 0.15); }
.nav-pills .nav-link.active:before { width: 100%; }
.nav-pills .nav-link.active .tabs-content span { color: #344393; font-weight: var(--body-weight-normal); line-height: 26px; font-family: var(--font-heading); }
.nav-pills .nav-link:active { transform: translateY(1px); }

.tabs-content span { font-size: var(--font-size-md); color: #000;font-weight: var(--body-weight-normal); line-height: 26px;font-family:var(--font-heading) }
.tabs-content .text-muted { color: #8B909A!important; font-size: var(--font-size-sm); font-weight: var(--body-weight-normal); line-height: 26px; font-family:var(--font-heading) }

@media (min-width: 768px) and (max-width: 991px) {
    .nav-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; width: 100%; }
    .nav-pills .nav-link { margin-right: 0; width: 100%; height: 100%; }
    .tabs-content { width: 100%; }
}

@media (max-width: 767px) {
    .nav-pills { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
    .nav-pills .nav-link { margin-right: 0; width: 100%; }
    .tabs-content { width: 100%; display: flex; flex-direction: column; }
}

/**************************************** FILTER PILLS (Lead List) *****************************************/
.filter-pills-container {display: flex; flex-wrap: wrap; align-items: center; gap: 12px;}
.filter-pill {display: flex; align-items: center; padding: 8px 12px; border-radius: 50px; font-size: var(--font-size-sm); font-weight: var(--body-weight-normal); transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
.filter-pill .pill-icon {margin-right: 8px; display: flex; align-items: center; justify-content: center;}
.filter-pill .pill-text {margin-right: 8px;}
.filter-pill .pill-close {display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.1); color: inherit; text-decoration: none; transition: all 0.2s ease;}
.filter-pill .pill-close:hover {background: rgba(0, 0, 0, 0.2); transform: scale(1.1);}
.file-pill {background-color: #E3F2FD; color: #1976D2; border: 1px solid #BBDEFB;}
.search-pill {background-color: #F3E5F5; color: #7B1FA2; border: 1px solid #E1BEE7;}
.date-pill {background-color: #E8F5E9; color: #388E3C; border: 1px solid #C8E6C9;}
.clear-all-btn {display: inline-flex; align-items: center; padding: 8px 16px; background-color: #F5F5F5; color: #616161; border-radius: 50px; font-size: var(--font-size-sm); font-weight: var(--body-weight-normal); text-decoration: none; transition: all 0.2s ease; border: 1px solid #E0E0E0;}
.clear-all-btn:hover {background-color: #EEEEEE; color: #424242;}

/* Search and Filter Bar Responsive */
@media (max-width: 767px) {
    .search-filter-container { flex-direction: column; gap: 1rem; }
    .search-filter-wrapper { width: 100%; flex-direction: column; }
    .search-form { width: 100%; }
    .input-group-form input { width: 100%; }
    .filter-buttons { width: 100%; justify-content: space-between; }
    .filter-buttons .btn { flex: 1; text-align: center; justify-content: center; }
}

/* Active Filters Responsive */
@media (max-width: 767px) {
    .filter-pills-container { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .filter-pill { width: 100%; justify-content: space-between; }
    .clear-all-btn { width: 100%; justify-content: center; }
}

/* Batch View Header Responsive */
@media (max-width: 767px) {
    .bg-light.border.rounded { margin: 0 -1rem; border-radius: 0; border-left: none; border-right: none; }
    .filter-pill.file-pill { flex: 1; min-width: 0; }
    .filter-pill .pill-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/**************************************** TEXT AND BACKGROUND APPEARANCE *****************************************/
.custom-bg-light{background:#F1F1F1; background-attachment: fixed;}
.login-bg-white { box-shadow: 0px 0px 35px 0px rgba(154, 161, 171, 0.15); border-radius: 8px; max-width: 600px; width: 100%; margin: auto; }
.dark-blue{color:var(--dark-blue)}
.bg-dark-blue{background:var(--dark-blue)}
.primary-link{color:var(--dark-blue)}

/* import history badge and button styling */
.text-primary { color: #344393 !important; }

.dash-top-heading h1 { font-size: var(--font-size-xxl); color: #000; font-weight: var(--heading-weight-bold); }
.dash-top-heading p { color: #000; font-size: var(--font-size-sm); margin: 0; }
.dash-sub-heading h4 { font-size:20px;  font-weight: var(--heading-weight-bold); }

.lead-count { font-size: var(--font-size-lg); line-height: 20px; color: #344393; font-family: var(--font-heading); }
hr{color:var(--white)}

.started-box { text-align: center; margin-bottom: 3rem; padding-top: 1rem; }
.started-box h4 { font-weight: bold; font-size: var(--font-size-xl); color: #263238; margin: 0 0 25px; }
.started-box .btn { padding: 10px 30px; }

/**************************************** FORMS *****************************************/

.login-form-box{padding: 40px 50px 60px 50px; }  
.form-box-heading p { font-size: var(--font-size-lg); margin: 6px 0 0; color:var(--dark-gray)}
.login-form-box .form-group input{height:50px; box-shadow:inherit; outline:inherit; border-radius:5px}
.login-form-box .form-group input[type="checkbox"] { width: 22px; height: 22px; border-radius: 3px; margin-top: 0; }
.password-toggle { position: absolute; right: 8px; top: 0; bottom: 0; font-size: var(--font-size-xl); color: var(--body-color); }
.shadow-sm{box-shadow: 6px 6px 54px 0px rgba(0, 0, 0, 0.05)}
.input-group-form input {width: 300px; padding-left: 40px; height: 40px; font-size: var(--font-size-sm); font-weight: var(--body-weight-normal); border-radius: 4px; }

.form-control { padding: 0.625rem 0.875rem; border-radius: 8px; border: 1px solid #eee; transition: all 0.2s ease; background-color: #fff; }
.form-control:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(52, 67, 147, 0.1); }
.invalid-feedback { font-size: 0.875rem; color: var(--btn-danger-bg); margin-top: 0.5rem; }
.form-control[disabled] {
    background-color: #f8f9fa !important;
    opacity: 1;
    cursor: not-allowed !important;
}
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/**************************************** PAGINATION *****************************************/
.pagination{display:flex; padding-left:0; list-style:none; gap:5px;}
.pagination .page-item .page-link{position:relative; display:flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0.375rem 0.75rem; color:var(--dark-gray); background-color:#f8f9fa; border:1px solid #e9ecef; border-radius:4px; text-decoration:none; transition:all 0.2s ease; font-weight:500; font-size:14px;}
.pagination .page-item .page-link:hover{background-color:#e9ecef; color:var(--dark-gray); border-color:#dee2e6; z-index:2;}
.pagination .page-item.active .page-link{z-index:3; color:#fff; background-color:var(--dark-gray); border-color:var(--dark-gray);}
.pagination .page-item.disabled .page-link{color:#adb5bd; pointer-events:none; background-color:#f8f9fa; border-color:#e9ecef;}
.pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link{font-size:14px;}


/**************************************** TABLES *****************************************/
.table-mt--65{margin-top:-65px}
.table-custom-grid { border: none; border-radius: 12px; overflow: visible; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); background: white; transition: all 0.2s ease; }
.table-custom-grid table { width: 100%; border-collapse: collapse; table-layout: auto; overflow: visible; border-radius: 12px;}
.table-responsive { overflow: visible; -webkit-overflow-scrolling: touch; position: relative; }

/* Profile Links */
.table-custom-grid table td .action-buttons { display: flex; justify-content: flex-end;}
.table-custom-grid table tbody tr:last-child td { border: none; }
.table-custom-grid table thead tr { background: #f8f9fa; }
.table-custom-grid table thead tr th { padding: 1rem 1.25rem; background: transparent; font-size: var(--font-size-sm); font-weight: 400; color: #344393; border: none; position: relative; }
.table-custom-grid table thead tr th::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #344393; opacity: 0; transition: opacity 0.2s ease; }
.table-custom-grid table thead tr th:hover::after { opacity: 0.5; }
.table-custom-grid table thead tr th a { display: inline-flex; align-items: center; white-space: nowrap; transition: all 0.2s ease; color: inherit; }
.table-custom-grid table thead tr th a > *:first-child { margin-right: 0.3rem; }
.table-custom-grid table thead tr th a:hover { color: #232d66 !important; }
.table-custom-grid table thead tr th a i.fas { font-size: 0.75rem; background: rgba(52, 67, 147, 0.1); padding: 3px; border-radius: 3px; margin-left: 0.3rem; }

/* Cell Styling */
.table-custom-grid table tbody { overflow: visible; }
.table-custom-grid table tbody tr { overflow: visible; }
.table-custom-grid table tbody tr td { padding: 1rem 1.25rem; border-bottom: 1px solid #f5f5f5; font-size: 14px; overflow: visible; }

.email-badge { display: inline-flex; align-items: center; background: rgba(52, 67, 147, 0.08); border-radius: 4px; padding: 4px 8px; max-width: 100%; position: relative; font-weight: var(--body-weight-medium); }
.email-badge:hover { background: rgba(52, 67, 147, 0.15); }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* Table Column Widths */
.table-custom-grid table th.col-actions, .table-custom-grid table td[data-label="Actions"] { min-width: 85px; max-width: 85px; }
.table-custom-grid table th.col-email, .table-custom-grid table td[data-label="Email"] { min-width: 250px; }
.table-custom-grid table th.col-first_name, .table-custom-grid table th.col-last_name, .table-custom-grid table td[data-label="First Name"], .table-custom-grid table td[data-label="Last Name"] { min-width: 120px; }
.table-custom-grid table th.col-company, .table-custom-grid table th.col-prior_company, .table-custom-grid table td[data-label="Company"], .table-custom-grid table td[data-label="Prior Company"] { min-width: 180px; }
.table-custom-grid table th.col-title, .table-custom-grid table th.col-location, .table-custom-grid table td[data-label="Role"], .table-custom-grid table td[data-label="Location"] { min-width: 160px; }
.table-custom-grid table th.col-start_date, .table-custom-grid table th.col-last_updated, .table-custom-grid table td[data-label="Role Start Date"], .table-custom-grid table td[data-label="Updated"] { min-width: 140px; }
.table-custom-grid .cell-content { position: relative; width: 100%; overflow: hidden; }
.table-custom-grid .truncate-cell .cell-content:hover::after { content: attr(title); position: absolute; top: -30px; left: 0; background: rgba(0, 0, 0, 0.8); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 10; animation: fadeIn 0.3s forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Tablet View (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .table-custom-grid { margin: 0 -1rem; border-radius: 0; border-left: none; border-right: none; }
    .table-custom-grid table { min-width: 900px; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 1rem; position: relative; overflow-y: visible; }
}

/* Mobile View (max-width: 767px) */
@media (max-width: 767px) {
    .table-custom-grid { border: none; background: transparent; box-shadow: none; }
    .table-custom-grid table thead { display: none; }
    .table-custom-grid table tbody tr { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding: 1.25rem; background: white; border: 1px solid #EAEAEA; border-radius: 10px; margin-bottom: 1rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); border-left: 3px solid rgba(52, 67, 147, 0.3); }
    .table-custom-grid table tbody tr:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }
    .table-custom-grid table tbody td { display: flex; padding: 0.5rem 0; border: none; align-items: flex-start; flex-direction: column; gap: 0.25rem; }
    .table-custom-grid table tbody td::before { content: attr(data-label); font-weight: 600; color: #555; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; }
    .table-custom-grid table td .cell-content { width: 100%; word-break: break-word; }
    .table-custom-grid table td .action-buttons { width: 100%; justify-content: flex-start; margin-top: 0.25rem; }
    .table-responsive { overflow-x: visible; }
}

/* Empty Table Styling */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; max-width: 400px; margin: 0 auto; }
.empty-state-icon { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, rgba(52, 67, 147, 0.1), rgba(52, 67, 147, 0.2)); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; color: var(--dark-blue); animation: pulse 2s infinite; }
.empty-state-icon i { font-size: 28px; }
.empty-state h4 { font-size: var(--font-size-lg); font-weight: var(--heading-weight-bold); color: #333; margin-bottom: 0.5rem; }
.empty-state p { font-size: var(--font-size-md); text-align: center; max-width: 280px; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

@media (max-width: 767px) {
    .empty-state { padding: 1.5rem 1rem; }
    .empty-state-icon { width: 56px; height: 56px; }
    .empty-state-icon i { font-size: 24px; }
}

/* List Actions Dropdown */
.action-btn { background: transparent; border: none; color: #888; transition: all 0.2s ease; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 6px; }
.action-btn:hover { background-color: rgba(52, 67, 147, 0.08); color: var(--dark-blue); transform: none; }
.action-dropdown { min-width: 180px; padding: 0.5rem 0; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); z-index: 1050; background: white; overflow: hidden; animation: dropdownFade 0.15s ease; position: absolute; transform: none !important; }
.action-dropdown .dropdown-item { font-size: var(--font-size-sm); display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; transition: all 0.12s ease; border: none; background: transparent; }
.action-dropdown .dropdown-item:hover { background-color: rgba(52, 67, 147, 0.04); transform: none; color: var(--dark-blue); }
.action-dropdown .dropdown-item.disabled { opacity: 0.6; pointer-events: none; }
.action-dropdown .dropdown-item i { width: 16px; text-align: center; flex-shrink: 0; }
.table-custom-grid td[data-label="Actions"] { position: relative; overflow: visible !important; padding-right: 1rem; }
.table-custom-grid .dropdown-menu.show { position: absolute; right: 0; top: 100%; left: auto; transform: none !important; margin-top: 0.25rem; will-change: auto; }
/* Make dropdown appear above button for last row to prevent clipping */
.table-custom-grid tbody tr:last-child .dropdown-menu.show { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.25rem; }
@keyframes dropdownFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
    .action-dropdown { position: fixed; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: calc(100% - 2rem) !important; max-width: 220px !important; margin-top: 0.5rem !important; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); }
    .dropdown-backdrop { background-color: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; }
}

/* Link Pills for LinkedIn and Website links */
.link-pills-container { display: flex; gap: 4px; align-items: center; }
.link-pill { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; transition: all 0.2s ease; position: relative; }
.link-pill i { font-size: 12px; }
.link-pill-active { background-color: rgba(52, 67, 147, 0.1); color: var(--dark-blue); box-shadow: 0 1px 3px rgba(52, 67, 147, 0.15); }
.link-pill-active:hover { background-color: var(--dark-blue); color: white; transform: none; box-shadow: 0 4px 8px rgba(52, 67, 147, 0.25); }
.link-pill-inactive { background-color: #f5f5f5; color: #aaa; cursor: not-allowed; }
.link-pill-active:hover::before, .link-pill-inactive:hover::before { content: attr(data-tooltip); position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 9999; pointer-events: none; }
/* Column width adjustment */
.table-custom-grid table th.col-links, .table-custom-grid table td[data-label="Links"] { min-width: 70px; width: 70px; }
@media (max-width: 767px) { .link-pills-container { justify-content: flex-start; } }

/* Setup for updated cell (with scrape status stuff) */
/* Lead Status Indicators - Core styles */
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; position: relative; vertical-align: middle; margin-left: 6px; }

/* Status colors */
.status-dot.status-completed { display: none; }
.status-dot.status-pending { background-color: #FFA32B; box-shadow: 0 0 5px rgba(255, 163, 43, 0.5); animation: pulse-status 2s infinite; }
.status-dot.status-failed { background-color: #dc3545; box-shadow: 0 0 5px rgba(220, 53, 69, 0.5); }
.updated-cell-container { display: inline-flex; align-items: center; position: relative; cursor: default; }
.updated-cell-container[data-tooltip]:hover::before { content: attr(data-tooltip); position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 9999; pointer-events: none; }
@keyframes pulse-status { 0% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0.7; transform: scale(1); } }
@media (max-width: 767px) { .updated-cell-container[data-tooltip]:hover::before { bottom: 35px; left: 50%; transform: translateX(-50%); } }

/**************************************** MODALS *****************************************/
.modal-dialog.mw-850 { max-width: 850px; width: 100%; }
.modal-top-heading h3 { font-size: var(--font-size-xxxl); font-weight: var(--heading-weight-medium); color: var(--dark-blue); }
.modal-top-heading p { font-size: var(--font-size-md); font-weight: var(--heading-weight-light); color: #666; max-width: 615px; width: 100%; margin: 0 auto; }
.modal-step-list ul { background: #F9F9F9; padding: 20px; border: 1px solid #DEDEDE; border-radius: 16px; list-style: none; margin: 0; }
.modal-step-list ul li { margin: 0 0 7px; font-size: var(--font-size-md); font-weight: var(--heading-weight-light); color: #666666; }
.modal-step-list ul li:last-child{margin-bottom:0}
.modal-step-list ul li strong { color: #344393; font-weight: var(--heading-weight-bold); }

/**************************************** PROGRESS BARS % *****************************************/
.custom-progress.progress { height: 5px; background: #EAEAEA; width: 150px; margin-left: auto; margin-top: 10px; margin-bottom: 3px; }
.custom-progress.progress .progress-bar { background: #36C76C; }
span.progress-count { font-weight: var(--heading-weight-bold); font-size: var(--font-size-sm); font-family: var(--font-heading); color: var(--dark-blue); }

.progress.progress-subscribe { height: 15px; border-radius: 100px; background: #EAEAEA; }
.progress.progress-subscribe .progress-bar.bg-success { text-align: right; border-radius: 100px; font-size: var(--font-size-xs); background-color: #36C76C !important; }


/**************************************** ALERTS *****************************************/
.alert.alert-info i.bi { position: absolute; left: 13px; top: 15px; font-size: var(--font-size-lg); }
.alert.alert-info { padding-left: 46px; position: relative; font-size: var(--font-size-sm); }


/**************************************** TOAST NOTIFICATIONS (ALERT V2) *****************************************/
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 2000; max-width: 360px; width: calc(100% - 40px); pointer-events: none; }
.toast { position: relative; margin-bottom: 12px; background: #fff; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); overflow: hidden; opacity: 0; transform: translateX(30px); pointer-events: all; }
.toast.show { animation: toast-slide-in 0.3s ease forwards; }
.toast.hide { animation: toast-slide-out 0.3s ease forwards; }
@keyframes toast-slide-in { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }
.toast-body { display: flex; align-items: center; padding: 14px 16px; display: flex; align-items: center;}
.toast-icon { margin-right: 12px; font-size: 22px; line-height: 1; }
.toast-content { flex: 1; padding-right: 16px; display: flex; flex-direction: column; justify-content: center;}
.toast-message { font-family: var(--font-body); font-size: var(--font-size-sm); line-height: 1.4; color: var(--dark-gray); margin: 0; }
.toast-close { background: transparent; border: none; color: var(--dark-gray); font-size: 16px; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; }
.toast-close:hover { background-color: rgba(0, 0, 0, 0.05); transform: scale(1.1); }
.toast-success { border-left: 4px solid var(--btn-success-bg); }
.toast-success .toast-icon { color: var(--btn-success-bg); }
.toast-error, .toast-danger { border-left: 4px solid var(--btn-danger-bg); }
.toast-error .toast-icon, .toast-danger .toast-icon { color: var(--btn-danger-bg); }
.toast-info { border-left: 4px solid var(--dark-blue); }
.toast-info .toast-icon { color: var(--dark-blue); }
.toast-warning { border-left: 4px solid var(--leadchef-orange); }
.toast-warning .toast-icon { color: var(--leadchef-orange); }
.toast-warning .toast-progress-bar { background-color: var(--leadchef-orange); }
  
/**************************************** BADGES *****************************************/

/* Base Badge Styles */
.badge { font-weight: 500; font-family: var(--font-heading); border-radius: 6px; transition: all 0.2s ease; }

/* Modern Badge System - Base Structure */
.modern-badge { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 8px; position: relative; overflow: hidden; font-weight: 500; font-size: 12px; transition: all 0.2s ease; }
.modern-badge-icon { background: rgba(255, 255, 255, 0.25); padding: 8px 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.modern-badge-text { padding: 8px 12px 8px 4px; font-weight: 500; white-space: nowrap; }

/* Badge Size Variants */
.modern-badge.badge-sm { font-size: 11px; }
.modern-badge.badge-sm .modern-badge-icon { padding: 6px 10px; }
.modern-badge.badge-sm .modern-badge-text { padding: 6px 10px 6px 2px; }
.modern-badge.badge-lg { font-size: 14px; }
.modern-badge.badge-lg .modern-badge-icon { padding: 10px 14px; }
.modern-badge.badge-lg .modern-badge-text { padding: 10px 14px 10px 6px; }

/* Compact/Mini Badge (Circle) */
.modern-badge.compact { border-radius: 50%; width: 36px; height: 36px; gap: 0; }
.modern-badge.compact .modern-badge-icon { padding: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: transparent; }
.modern-badge.compact .modern-badge-text { display: none; }

/* Status Badge Colors */
.modern-badge.status-completed { background: linear-gradient(135deg, #36C76C 0%, #28A745 100%); }
.modern-badge.status-completed .modern-badge-icon, .modern-badge.status-completed .modern-badge-text { color: #fff; }
.modern-badge.status-failed { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); }
.modern-badge.status-failed .modern-badge-icon, .modern-badge.status-failed .modern-badge-text { color: #fff; }
.modern-badge.status-processing { background: linear-gradient(135deg, #FFA32B 0%, #FF8A00 100%); }
.modern-badge.status-processing .modern-badge-icon, .modern-badge.status-processing .modern-badge-text { color: #fff; }
.modern-badge.status-draft { background: linear-gradient(135deg, #6c757d 0%, #495057 100%); }
.modern-badge.status-draft .modern-badge-icon, .modern-badge.status-draft .modern-badge-text { color: #fff; }

/* Type Badge Colors */
.modern-badge.type-curated { background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%); }
.modern-badge.type-curated .modern-badge-icon, .modern-badge.type-curated .modern-badge-text { color: #fff; }
.modern-badge.type-ai_generated { background: linear-gradient(135deg, #7b1fa2 0%, #6a1b9a 100%); }
.modern-badge.type-ai_generated .modern-badge-icon, .modern-badge.type-ai_generated .modern-badge-text { color: #fff; }

/* Simple Badge Variants (No gradient/shadow) */
.simple-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; font-family: var(--font-heading); transition: all 0.2s ease; }
.simple-badge.badge-leads { background-color: rgba(52, 67, 147, 0.15); color: var(--dark-blue); min-height: 28px; min-width: 45px; }
.simple-badge.badge-email { background: rgba(52, 67, 147, 0.08); color: var(--dark-blue); border-radius: 4px; padding: 4px 8px; font-weight: var(--body-weight-medium); max-width: 100%; }
.simple-badge.badge-email:hover { background: rgba(52, 67, 147, 0.15); }

/* Trial Badge (Special) */
.trial-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #FFA32B 0%, #FF8A00 100%); border-radius: 8px; padding: 0; box-shadow: 0 2px 8px rgba(255, 163, 43, 0.25); position: relative; overflow: hidden; }
.trial-days { background: rgba(255, 255, 255, 0.25); color: #fff; font-weight: 600; padding: 8px 12px; display: flex; align-items: center; justify-content: center; }
.trial-text { color: #fff; font-weight: 500; padding: 8px 12px 8px 4px; font-size: 14px; }

/* Legacy Badge Classes (Keep for compatibility) */
.type-badge-text { 
    padding: 8px 12px 8px 4px; 
    font-weight: 500; 
    white-space: nowrap; 
}
.badge-leads { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 12px; 
    font-weight: 500; 
    font-family: var(--font-heading); 
    transition: all 0.2s ease; 
}
.email-badge { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 6px 12px; 
    border-radius: 6px; 
    font-size: 12px; 
    font-weight: 500; 
    font-family: var(--font-heading); 
    transition: all 0.2s ease; 
}

/* Responsive Badges */
@media (max-width: 767px) {
    .modern-badge { font-size: 13px; }
    .modern-badge.compact { width: 32px; height: 32px; }
    .modern-badge-icon { padding: 6px 10px; }
    .modern-badge-text { padding: 6px 10px 6px 2px; }
}


/**************************************** CARDS *****************************************/
/* Card System */
.card-section { background: var(--white); border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); margin-bottom: 1.5rem; overflow: visible; }

/* Card Header */
.card-section-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #eee; }
.card-section-header h4, .card-section-header h5 { font-size: 1.125rem; font-weight: 600; color: #1a1a1a; margin: 0; }
.card-section-header .header-actions { display: flex; align-items: center; gap: 1rem; }

/* Card Body */
.card-section-body { padding: 1.5rem; overflow: visible; }

/* Card Field Groups */
.card-field-group { margin-bottom: 1.5rem; }
.card-field-group:last-child { margin-bottom: 0; }
.card-field-label { font-size: 0.875rem; color: #666; margin-bottom: 0.5rem; font-weight: 500; }
.card-field-value { font-size: 1rem; color: #1a1a1a; padding: 0.875rem 1rem; background: #f8f9fa; border-radius: 8px; border: 1px solid #eee; transition: background-color 0.2s ease; }
.card-field-value:hover { background: #f3f4f6; }

/* Row Spacing */
.card-section-body .row > [class*='col-'] { margin-bottom: 0.75rem; }

/* Form Field Spacing */
.form-group, .card-field-group { margin-top: 1.25rem; }
.form-group:first-child, .card-field-group:first-child, .row > [class*='col-']:first-child .card-field-group { margin-top: 0; }

/* File Display in Cards */
.file-display { display: flex; align-items: center; gap: 1rem; }
.file-icon-wrapper { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(52, 67, 147, 0.1); border-radius: 8px; flex-shrink: 0; }
.file-details { min-width: 0; flex-grow: 1; }
.file-name { font-weight: 500; color: #1a1a1a; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { display: flex; align-items: center; gap: 1rem; color: #666; }

/* Responsive Adjustments */
@media (max-width: 767px) {
    .card-section-header, .card-section-body { padding: 1rem; }
    .card-actions { flex-direction: column; }
    .card-actions .btn { width: 100%; }
}

.profile-card-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* Settings Page: Profile Card */
.user-profile-card { background: var(--white); border-radius: 16px; padding: 2.5rem; text-align: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; margin-bottom: 1.5rem; }
.user-profile-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); }
.user-profile-avatar { margin-bottom: 1.5rem; }
.user-avatar-circle { width: 96px; height: 96px; background: linear-gradient(135deg, var(--dark-blue), #4557b9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--white); margin: 0 auto; font-weight: 500; box-shadow: 0 4px 12px rgba(52, 67, 147, 0.2); }
.user-profile-info h3 { font-size: 1.5rem; font-weight: 600; color: #1a1a1a; margin-bottom: 0.5rem; }
.user-profile-username { color: #666; font-size: 0.95rem; margin: 0; }

/* Modern Resource Links */
.resource-links-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.resource-link-card { display: flex; align-items: center; padding: 16px; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); transition: all 0.3s ease; text-decoration: none; color: inherit; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); }
.resource-link-card:hover { transform: translateY(-3px); border-color: rgba(52, 67, 147, 0.3); box-shadow: 0 8px 24px rgba(52, 67, 147, 0.15); background: linear-gradient(135deg, #ffffff 0%, #f1f5ff 100%); }
.resource-link-card:after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--dark-blue); opacity: 0; transition: opacity 0.3s ease; }
.resource-link-card:hover:after { opacity: 1; }
.resource-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(52, 67, 147, 0.1) 0%, rgba(52, 67, 147, 0.2) 100%); margin-right: 16px; flex-shrink: 0; color: var(--dark-blue); font-size: 20px; transition: all 0.3s ease; }
.resource-link-card:hover .resource-icon { background: linear-gradient(135deg, rgba(52, 67, 147, 0.2) 0%, rgba(52, 67, 147, 0.4) 100%); transform: scale(1.05); }
.resource-content { flex: 1; }
.resource-content h5 { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: #1a1a1a; transition: color 0.3s ease; }
.resource-content p { font-size: 13px; color: #666; margin: 0; }
.resource-link-card:hover .resource-content h5 { color: var(--dark-blue); }
.resource-arrow { margin-left: 16px; opacity: 0.5; transition: all 0.3s ease; transform: translateX(-5px); }
.resource-link-card:hover .resource-arrow { opacity: 1; transform: translateX(0); }
@media (max-width: 767px) { .resource-links-container { grid-template-columns: 1fr; } }
@media (max-width: 991px) { .user-profile-card { margin-bottom: 2rem; } }

/* Alpha Status Pill */
.alpha-status-pill { position: fixed; bottom: 15px; right: 15px; background-color: rgba(255, 255, 255, 0.95); border: 1px solid #eee; border-radius: 30px; padding: 8px 15px; display: flex; align-items: center; font-size: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; transition: all 0.2s ease; max-width: 100%; }
.alpha-status-pill:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transform: translateY(-2px); }
.alpha-badge { background: var(--leadchef-orange); color: white; padding: 3px 6px; border-radius: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.alpha-pill-text { color: #666; }
.alpha-report-link { color: var(--dark-blue); font-weight: 500; text-decoration: none; white-space: nowrap; }
.alpha-report-link:hover { text-decoration: underline; }
@media (max-width: 767px) { .alpha-status-pill { bottom: 10px; right: 10px; left: 10px; width: auto; justify-content: center; } }

/**************************************** FIND LEADS CREATE FORM *****************************************/
.find-leads-form { position: relative; }
.search-info-section { margin-bottom: 2rem; }
.search-info-section .form-field-container { margin-bottom: 1.5rem; }
.search-info-section .form-field-container:last-child { margin-bottom: 0; }
.optional-text { font-size: 0.75rem; color: #9ca3af; font-weight: 400; margin-left: 0.25rem; }
.form-divider { margin: 2rem 0; border: none; border-top: 2px solid #e5e7eb; opacity: 0.3; }
.filter-groups-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.filter-group { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0; overflow: hidden; transition: all 0.3s ease; position: relative; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.filter-group:hover { border-color: rgba(52, 67, 147, 0.15); box-shadow: 0 4px 15px rgba(52, 67, 147, 0.08); transform: translateY(-1px); }
.filter-group::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--dark-blue), #4557b9); opacity: 0; transition: opacity 0.3s ease; }
.filter-group:hover::before { opacity: 1; }
.filter-group-header { padding: 1.5rem 1.5rem 1rem; background: #f8f9fa; border-bottom: 1px solid #e9ecef; position: relative; }
.filter-group-title { font-size: 1.125rem; font-weight: 600; color: var(--dark-blue); margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.75rem; }
.filter-group-title i { font-size: 1.25rem; color: var(--dark-blue); opacity: 0.8; }
.filter-group-subtitle { font-size: 0.875rem; color: #6b7280; margin: 0; line-height: 1.4; }
.filter-group-fields { padding: 1.5rem; }
.form-field-container { margin-bottom: 1.5rem; position: relative; }
.form-field-container:last-child { margin-bottom: 0; }
.form-field-container.description-field { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid rgba(52, 67, 147, 0.08); border-radius: 10px; padding: 1.25rem; margin-bottom: 2rem; position: relative; overflow: hidden; }
.form-field-container.description-field::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--dark-blue), #4557b9); opacity: 0.7; }
.form-field-group { position: relative; }
.form-field-label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.75rem; line-height: 1.4; display: flex; align-items: center; gap: 0.5rem; }
.form-field-label i { font-size: 1rem; color: var(--dark-blue); opacity: 0.7; }
.input-container { position: relative; }
.find-leads-form .form-control { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0.875rem 1rem; font-size: 0.875rem; line-height: 1.5; transition: all 0.2s ease; background: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.find-leads-form .form-control:focus { border-color: var(--dark-blue); box-shadow: 0 0 0 3px rgba(52, 67, 147, 0.1); outline: none; background: #ffffff; }
.find-leads-form .form-control:hover:not(:focus) { border-color: #d1d5db; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }
.textarea-container { position: relative; }
.textarea-container .form-control { min-height: 100px; resize: vertical; }
.checkbox-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1.5rem; background: #ffffff; border-radius: 10px; border: 1px solid #e5e7eb; max-height: 220px; overflow-y: auto; }
.checkbox-container::-webkit-scrollbar { width: 4px; }
.checkbox-container::-webkit-scrollbar-track { background: #f8f9fa; border-radius: 4px; }
.checkbox-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.checkbox-container::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.checkbox-container label { display: flex; align-items: center; padding: 0.5rem 0; cursor: pointer; transition: all 0.15s ease; font-size: 0.875rem; line-height: 1.4; background: transparent; border: none; border-radius: 4px; margin-bottom: 0.25rem; }
.checkbox-container label:hover { background: rgba(52, 67, 147, 0.05); padding-left: 0.5rem; padding-right: 0.5rem; }
.checkbox-container input[type="checkbox"] { margin-right: 0.625rem; transform: scale(1); accent-color: var(--dark-blue); width: 16px; height: 16px; }
.checkbox-container input[type="checkbox"]:checked + span { color: var(--dark-blue); font-weight: 500; }
.checkbox-container label:has(input[type="checkbox"]:checked) { background: rgba(52, 67, 147, 0.05); padding-left: 0.5rem; padding-right: 0.5rem; }
.single-checkbox-container { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; transition: all 0.2s ease; cursor: pointer; }
.single-checkbox-container:hover { background: #f1f3f4; border-color: #d6d9dc; }
.single-checkbox-label { display: flex; align-items: center; cursor: pointer; margin: 0; font-size: 0.875rem; line-height: 1.4; padding: 1rem; width: 100%; }
.single-checkbox-label input[type="checkbox"] { margin-right: 0.75rem; transform: scale(1.2); }
.checkbox-text { color: #374151; font-weight: 500; }
.boolean-filters-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; padding: 2rem 0 1rem; border-top: 1px solid #e5e7eb; margin-top: 2rem; gap: 1rem; }
.form-actions .btn { position: relative; overflow: hidden; }
.form-actions .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; }
.form-actions .btn:hover::before { left: 100%; }
.form-field-error { color: #dc2626; font-size: 0.75rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.375rem; }
.form-field-error::before { content: '⚠'; font-size: 0.875rem; }
.find-leads-form select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23344393' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-size: 16px 12px; padding-right: 2.5rem; }
@media (max-width: 991px) { .filter-groups-container { grid-template-columns: 1fr; gap: 1.5rem; } .filter-group-header { padding: 1.25rem 1.25rem 0.75rem; } .filter-group-fields { padding: 1.25rem; } .checkbox-container { grid-template-columns: 1fr; } .boolean-filters-row { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .filter-group-header { padding: 1rem 1rem 0.75rem; } .filter-group-fields { padding: 1rem; } .form-field-container.description-field { padding: 1rem; margin-bottom: 1.5rem; } .form-actions { flex-direction: column; align-items: stretch; padding: 1.5rem 0; } .form-actions .btn { width: 100%; margin-bottom: 0.5rem; } .form-actions .btn:last-child { margin-bottom: 0; } }
.find-leads-form.loading { pointer-events: none; opacity: 0.7; }
.find-leads-form.loading::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10; }
.filter-group { animation: slideInUp 0.6s ease forwards; }
.filter-group:nth-child(2) { animation-delay: 0.1s; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.find-leads-form *:focus { outline: 2px solid transparent; outline-offset: 2px; }
/* Filter Reset Section */
.filter-reset-section { margin: 1.5rem 0 2rem; padding: 1.25rem 1.5rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid rgba(52, 67, 147, 0.08); border-radius: 12px; position: relative; overflow: hidden; }
.filter-reset-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--dark-blue), #4557b9); opacity: 0.6; }
.filter-reset-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.filter-reset-content { flex: 1; }
.filter-reset-title { font-size: 1rem; font-weight: 600; color: var(--dark-blue); margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.filter-reset-title i { font-size: 1.125rem; opacity: 0.8; }
.filter-reset-subtitle { font-size: 0.875rem; color: #6b7280; margin: 0; line-height: 1.4; }
.filter-reset-actions { flex-shrink: 0; }
.reset-filters-btn { position: relative; overflow: hidden; transition: all 0.2s ease; border: 1px solid #d1d5db; background: var(--white); color: #6b7280; font-weight: 500; }
.reset-filters-btn:hover { background: var(--dark-blue); border-color: var(--dark-blue); color: var(--white); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 67, 147, 0.15); }
.reset-filters-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(52, 67, 147, 0.2); }
.reset-filters-btn i { transition: transform 0.2s ease; }
.reset-filters-btn:hover i { transform: rotate(180deg); }
@media (max-width: 767px) { .filter-reset-container { flex-direction: column; align-items: stretch; text-align: center; gap: 1rem; } .filter-reset-actions { align-self: stretch; } .reset-filters-btn { width: 100%; justify-content: center; } }
/* ============================================
   MODERN LEAD GENERATION FORM STYLES
   ============================================ */
.modern-lead-form { animation: fadeInUp 0.5s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modern-card { background: var(--modern-bg-card); border-radius: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 40px rgba(0, 0, 0, 0.03); border: 1px solid var(--modern-border-light); transition: all 0.3s ease; }
.modern-card:hover { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 15px 50px rgba(0, 0, 0, 0.05); }
.modern-card .card-section-header { background: linear-gradient(135deg, var(--modern-primary-light) 0%, rgba(255, 255, 255, 0) 100%); border-bottom: 1px solid var(--modern-border); padding: 1.75rem 2rem; }
.modern-card .card-section-header h4 { font-size: 1.25rem; font-weight: 600; color: var(--modern-text-dark); display: flex; align-items: center; gap: 0.5rem; }
.modern-card .card-section-header h4 i { color: var(--modern-primary); }
.modern-card .card-section-body { padding: 2rem; }
.modern-label { font-size: 0.9375rem; font-weight: 600; color: var(--modern-text-dark); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.modern-label i { color: var(--modern-primary); font-size: 1rem; }
.modern-input { border: 2px solid var(--modern-border); border-radius: 12px; padding: 0.875rem 1.125rem; font-size: 1rem; color: var(--modern-text-dark); transition: all 0.3s ease; background: var(--white); }
.modern-input:focus { border-color: var(--modern-primary); box-shadow: 0 0 0 4px var(--modern-primary-light); outline: none; }
.modern-input::placeholder { color: var(--modern-text-muted); }
.textarea-container.modern-textarea textarea, .modern-textarea textarea.form-control { border: 2px solid var(--modern-border); border-radius: 12px; padding: 1rem 1.125rem; font-size: 1rem; color: var(--modern-text-dark); transition: all 0.3s ease; background: var(--white); line-height: 1.6; resize: vertical; min-height: 180px; }
.textarea-container.modern-textarea textarea:focus, .modern-textarea textarea.form-control:focus { border-color: var(--modern-primary); box-shadow: 0 0 0 4px var(--modern-primary-light); outline: none; }
.textarea-container.modern-textarea textarea::placeholder, .modern-textarea textarea.form-control::placeholder { color: var(--modern-text-muted); line-height: 1.8; }
.form-field-container.focused { transform: scale(1.01); }
.character-counter, .word-counter { font-size: 0.8125rem; color: var(--modern-text-muted); margin-top: 0.5rem; display: flex; align-items: center; gap: 0.25rem; font-weight: 500; transition: all 0.3s ease; }
.character-counter.hidden { display: none; }
.character-counter .current, .word-counter .current { color: var(--modern-primary); font-weight: 600; }
.character-counter.warning { color: #f59e0b; }
.character-counter.warning .current { color: #f59e0b; }
.character-counter.error { color: #dc2626; }
.character-counter.error .current { color: #dc2626; font-weight: 700; }
.btn-modern { padding: 0.875rem 1.75rem; font-size: 1rem; font-weight: 600; border-radius: 12px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.5rem; }
.btn-modern i { font-size: 1.125rem; }
.btn-gradient { background: linear-gradient(135deg, var(--modern-primary) 0%, var(--modern-secondary) 100%); border: none; color: white; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
.btn-gradient:hover { background: linear-gradient(135deg, var(--modern-primary-hover) 0%, var(--modern-secondary-hover) 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); color: white; }
.btn-gradient:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); }
.modern-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--modern-border-light); }
.form-text { font-size: 0.875rem; color: var(--modern-text-muted); margin-top: 0.75rem; display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.5; }
.form-text i { color: var(--modern-primary); margin-top: 0.125rem; }
.form-field-error { color: #dc2626; font-size: 0.875rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.375rem; }
.form-field-error::before { content: '⚠'; font-size: 1rem; }
@media (max-width: 767px) { .modern-card .card-section-header { padding: 1.25rem 1.5rem; } .modern-card .card-section-body { padding: 1.5rem; } .modern-actions { flex-direction: column-reverse; } .modern-actions .btn { width: 100%; justify-content: center; } .btn-modern { padding: 0.75rem 1.5rem; font-size: 0.9375rem; } }
.section-loading { opacity: 0.6; pointer-events: none; position: relative; }
.section-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border: 3px solid var(--modern-border); border-top: 3px solid var(--modern-primary); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Search Criteria JSON Viewer */
.search-criteria-json-viewer { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1.25rem; max-height: 500px; overflow-y: auto; position: relative; }
.search-criteria-json-viewer pre { margin: 0; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Courier, monospace; font-size: 0.875rem; line-height: 1.6; color: #212529; white-space: pre-wrap; word-wrap: break-word; padding-right: 50px; }
.search-criteria-json-viewer code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
/* JSON Copy Button */
.json-copy-btn { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, 0.9); border: 1px solid #dee2e6; border-radius: 6px; padding: 8px 10px; font-size: 14px; color: #6c757d; cursor: pointer; transition: all 0.2s ease; backdrop-filter: blur(4px); z-index: 10; }
.json-copy-btn:hover { background: rgba(255, 255, 255, 1); color: var(--dark-blue); border-color: var(--dark-blue); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.json-copy-btn.copied { background: var(--btn-success-bg); color: white; border-color: var(--btn-success-bg); }
.search-criteria-json-viewer::-webkit-scrollbar { width: 6px; }
.search-criteria-json-viewer::-webkit-scrollbar-track { background: #f1f3f5; border-radius: 3px; }
.search-criteria-json-viewer::-webkit-scrollbar-thumb { background: #adb5bd; border-radius: 3px; }
.search-criteria-json-viewer::-webkit-scrollbar-thumb:hover { background: #868e96; }
@media (max-width: 767px) { .search-criteria-json-viewer { max-height: 300px; padding: 1rem; } .search-criteria-json-viewer pre { font-size: 0.8125rem; padding-right: 45px; } .json-copy-btn { top: 10px; right: 10px; padding: 6px 8px; font-size: 12px; } }


 /**************************************** FIND LEADS DETAIL - MODERN LAYOUT *****************************************/

/* Modern Search Summary Card */
.search-summary-card { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; padding: 0; margin-bottom: 1.5rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; }
.search-summary-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--dark-blue), #4557b9); opacity: 0.8; }
.search-summary-content { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; }
.search-summary-badges { display: flex; align-items: center; gap: 1rem; flex: 1; }
.search-summary-results { flex-shrink: 0; }
.simple-badge.badge-created { background-color: rgba(108, 117, 125, 0.15); color: #495057; gap: 0.5rem; font-weight: 500; }
.simple-badge.badge-created i { font-size: 0.875rem; }
.search-summary-description { display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem 1.5rem; border-top: 1px solid rgba(0, 0, 0, 0.06); background: rgba(52, 67, 147, 0.02); }
.description-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(52, 67, 147, 0.1); display: flex; align-items: center; justify-content: center; color: var(--dark-blue); font-size: 1rem; flex-shrink: 0; }
.search-summary-description .description-text { font-size: 0.9375rem; line-height: 1.6; color: #374151; font-weight: 400; flex: 1; }
@media (max-width: 991px) { .search-summary-content { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.25rem 1.5rem; } .search-summary-badges { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .search-summary-results { width: 100%; } .search-summary-description { padding: 1rem 1.5rem 1.25rem; } }
@media (max-width: 767px) { .search-summary-content { padding: 1rem 1.25rem; gap: 1rem; } .search-summary-badges { flex-direction: column; align-items: flex-start; gap: 0.75rem; width: 100%; } .search-summary-description { padding: 1rem 1.25rem; gap: 0.75rem; } .description-icon { width: 28px; height: 28px; font-size: 0.875rem; } .search-summary-description .description-text { font-size: 0.875rem; } }


.description-text { font-size: 1rem; line-height: 1.6; color: #374151; font-weight: 400; }
.error-banner { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border: 1px solid #fecaca; border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; box-shadow: 0 4px 12px rgba(220, 53, 69, 0.08); }
.error-icon { width: 40px; height: 40px; border-radius: 8px; background: rgba(220, 53, 69, 0.1); display: flex; align-items: center; justify-content: center; color: #dc3545; font-size: 1.25rem; flex-shrink: 0; }
.error-content { flex: 1; }
.error-title { font-size: 1rem; font-weight: 600; color: #dc2626; margin-bottom: 0.25rem; }
.error-message { font-size: 0.875rem; color: #7f1d1d; line-height: 1.5; }
.content-area { background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); overflow: hidden; min-height: 400px; position: relative; }

.processing-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; min-height: 500px; }
.processing-animation { position: relative; width: 140px; height: 140px; margin-bottom: 3rem; }
.spinner-ring { position: absolute; border: 4px solid transparent; border-radius: 50%; top: 0; left: 0; animation: spin 3s linear infinite; }
.ring-1 { width: 140px; height: 140px; border-top: 4px solid #ffa32b; animation-duration: 3s; }
.ring-2 { width: 100px; height: 100px; border-top: 4px solid #344393; animation-duration: 2s; animation-direction: reverse; top: 20px; left: 20px; }
.ring-3 { width: 60px; height: 60px; border-top: 4px solid #36c76c; animation-duration: 1.5s; top: 40px; left: 40px; }
.processing-pulse { position: absolute; width: 50px; height: 50px; background: linear-gradient(45deg, #344393, #4557b9); border-radius: 50%; animation: pulse 2s ease-in-out infinite; top: 45px; left: 45px; }
.processing-pulse::before { content: ''; position: absolute; width: 24px; height: 24px; background: white; border-radius: 50%; top: 13px; left: 13px; }
.processing-content { max-width: 600px; }
.processing-title { font-size: 2rem; font-weight: 600; color: #344393; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; }
.processing-description { font-size: 1.125rem; color: #6b7280; margin-bottom: 3rem; line-height: 1.6; }
.processing-steps { display: flex; flex-direction: column; gap: 0; max-width: 500px; margin: 0 auto; text-align: left; }
.step-item { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 0; position: relative; transition: all 0.3s ease; }
.step-item:not(:last-child)::after { content: ''; position: absolute; left: 28px; top: 70px; width: 2px; height: calc(100% - 30px); background: #e5e7eb; transition: background 0.3s ease; }
.step-item.active:not(:last-child)::after { background: linear-gradient(to bottom, #ffa32b, #e5e7eb); }
.step-item.completed:not(:last-child)::after { background: #36c76c; }
.step-indicator { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.5rem; position: relative; z-index: 2; transition: all 0.3s ease; }
.step-item .step-indicator { background: #f3f4f6; color: #9ca3af; border: 3px solid #e5e7eb; }
.step-item.active .step-indicator { background: #fff5e6; color: #ffa32b; border: 3px solid #ffa32b; box-shadow: 0 0 0 6px rgba(255, 163, 43, 0.1); }
.step-item.completed .step-indicator { background: #dcfce7; color: #36c76c; border: 3px solid #36c76c; }
.step-spinner { animation: spin 1s linear infinite; }
.step-content { flex: 1; padding-top: 0.5rem; }
.step-title { font-size: 1.125rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; transition: color 0.3s ease; }
.step-item.active .step-title { color: #344393; }
.step-item.completed .step-title { color: #059669; }
.step-description { font-size: 0.9375rem; color: #6b7280; line-height: 1.5; }
.step-item.active .step-description { color: #4b5563; }


.completion-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; min-height: 400px; }
.completion-animation i { font-size: 5rem; color: #36C76C; animation: bounce 1s ease-in-out; }
.completion-title { font-size: 2rem; font-weight: 600; color: #059669; margin: 2rem 0 1rem; }
.completion-description { font-size: 1.125rem; color: #6b7280; margin-bottom: 2rem; line-height: 1.6; }
.completion-notice { background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%); border: 1px solid #81d4fa; border-radius: 12px; padding: 1rem 1.5rem; color: #0277bd; font-size: 0.9375rem; display: flex; align-items: center; justify-content: center; max-width: 500px; }

.failure-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 2rem; text-align: center; min-height: 300px; }
.failure-animation i { font-size: 3.5rem; color: #dc3545; animation: shake 0.5s ease-in-out; }
.failure-title { font-size: 1.5rem; font-weight: 600; color: #dc2626; margin: 1.5rem 0 0.75rem; }
.failure-description { font-size: 1rem; color: #6b7280; margin-bottom: 1.5rem; line-height: 1.5; max-width: 500px; }
.failure-actions { margin-top: 0.5rem; }



.draft-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; min-height: 400px; }
.draft-animation i { font-size: 5rem; color: #6c757d; opacity: 0.7; }
.draft-title { font-size: 2rem; font-weight: 600; color: #495057; margin: 2rem 0 1rem; }
.draft-description { font-size: 1.125rem; color: #6b7280; line-height: 1.6; }
.criteria-container { padding: 1.5rem 2rem; }
.criteria-header { margin-bottom: 1.5rem; }
.criteria-header h4 { font-size: 1.125rem; font-weight: 600; color: var(--dark-blue); margin: 0; display: flex; align-items: center; }
.criteria-content { max-width: 100%; }
.criteria-json-viewer { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; max-height: 500px; overflow: hidden; position: relative; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02); }
.criteria-json-viewer pre { margin: 0; font-family: 'SF Mono', 'Roboto Mono'; font-size: 0.8125rem; line-height: 1.5; color: #374151; white-space: pre-wrap; word-wrap: break-word; padding-right: 50px; max-height: 460px; overflow-y: auto; padding-bottom: 0.5rem; }
.criteria-json-viewer code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.criteria-json-viewer pre::-webkit-scrollbar { width: 6px; }
.criteria-json-viewer pre::-webkit-scrollbar-track { background: transparent; }
.criteria-json-viewer pre::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.criteria-json-viewer pre::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

@keyframes pulse { 
    0% { opacity: 0.6; transform: scale(1); } 
    50% { opacity: 1; transform: scale(1.05); } 
    100% { opacity: 0.6; transform: scale(1); } 
}

/* Media queries */
@media (max-width: 991px) { 
    .processing-container, .completion-container, .failure-container, .draft-container { padding: 2.5rem 1.5rem; min-height: 280px; } 
    .processing-title, .completion-title, .failure-title, .draft-title { font-size: 1.375rem; } 
    
    .processing-animation { width: 120px; height: 120px; }
    .ring-1 { width: 120px; height: 120px; }
    .ring-2 { width: 90px; height: 90px; top: 15px; left: 15px; }
    .ring-3 { width: 60px; height: 60px; top: 30px; left: 30px; }
    .processing-pulse { top: 35px; left: 35px; }
}

@media (max-width: 767px) { 
    .processing-container, .completion-container, .failure-container, .draft-container { padding: 2rem 1rem; min-height: 250px; } 
    .processing-title, .completion-title, .failure-title, .draft-title { font-size: 1.25rem; flex-direction: column; gap: 0.5rem; } 
    .processing-description, .completion-description, .failure-description, .draft-description { font-size: 0.9375rem; } 
    
    .processing-animation { width: 100px; height: 100px; }
    .ring-1 { width: 100px; height: 100px; }
    .ring-2 { width: 75px; height: 75px; top: 12.5px; left: 12.5px; }
    .ring-3 { width: 50px; height: 50px; top: 25px; left: 25px; }
    .processing-pulse { width: 40px; height: 40px; top: 30px; left: 30px; }
    .processing-pulse::before { width: 20px; height: 20px; top: 10px; left: 10px; }
}