/* ==============================
   PRO APP — SCREEN-SPECIFIC STYLES
   ============================== */

/* ==============================
   SPLASH (PRO)
   ============================== */
.splash-screen {
  background: linear-gradient(160deg, #1343B0 0%, #007AFF 55%, #30B0C7 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--space-8) var(--space-8);
  flex: 1;
}
.splash-logo-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.splash-icon {
  width: 96px; height: 96px;
  background: rgba(255,255,255,0.18);
  border-radius: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
}
.splash-pro-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.splash-brand   { font-size: 36px; font-weight: 800; color: var(--white); letter-spacing: -1.5px; }
.splash-tagline { font-size: var(--text-lg); color: rgba(255,255,255,0.8); text-align: center; letter-spacing: -0.2px; }
.splash-actions { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); }

/* ==============================
   ONBOARDING (shared with consumer)
   ============================== */
.onboarding-screen  { padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); flex: 1; }
.onboarding-header  { display: flex; flex-direction: column; gap: var(--space-2); }
.onboarding-title   { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text); letter-spacing: -0.5px; line-height: 1.2; }
.onboarding-subtitle{ font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.5; }

/* ==============================
   SERVICES SETUP
   ============================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.service-select-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px var(--space-2) 12px;
  background: var(--white); border-radius: var(--radius-lg);
  border: none; box-shadow: var(--shadow-sm); cursor: pointer;
  transition: all 0.15s ease; text-align: center; position: relative;
}
.service-select-card:active  { transform: scale(0.93); }
.service-select-card.selected { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-sm); background: var(--color-primary-light); }
.service-select-card .check {
  position: absolute; top: 6px; right: 6px;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  background: var(--color-primary); color: white;
  display: none; align-items: center; justify-content: center;
  font-size: 11px; font-weight: bold;
}
.service-select-card.selected .check { display: flex; }
.service-icon  { font-size: 26px; line-height: 1; }
.service-label { font-size: 11px; font-weight: var(--font-medium); color: var(--color-text); line-height: 1.25; }

/* ==============================
   INSURANCE GATE
   ============================== */
.insurance-status-bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.insurance-status-bar.required {
  background: rgba(255, 59, 48, 0.08);
  border: none;
  box-shadow: 0 0 0 1.5px rgba(255, 59, 48, 0.25);
}
.insurance-status-bar.done {
  background: rgba(52, 199, 89, 0.10);
  border: none;
  box-shadow: 0 0 0 1.5px rgba(52, 199, 89, 0.3);
}
.insurance-status-icon { font-size: 24px; flex-shrink: 0; }
.insurance-status-text { font-size: var(--text-sm); font-weight: var(--font-semibold); }
.insurance-status-bar.required .insurance-status-text { color: var(--color-danger); }
.insurance-status-bar.done     .insurance-status-text { color: var(--color-success); }

.insurance-option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); background: var(--white);
  border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: all 0.15s;
}
.insurance-option:active { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-sm); }
.insurance-option.selected { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-sm); background: var(--color-primary-light); }
.insurance-option-icon { font-size: 32px; flex-shrink: 0; }
.insurance-option-title{ font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); }
.insurance-option-sub  { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; line-height: 1.4; }

.plan-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: none; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: all 0.15s; cursor: pointer;
}
.plan-card.selected { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md); }
.plan-card-header { padding: var(--space-3) var(--space-4); background: var(--color-primary-light); border-bottom: 0.5px solid var(--blue-100); }
.plan-card-title  { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-primary); }
.plan-card-body   { padding: var(--space-3) var(--space-4); }
.plan-card-price  { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); }
.plan-card-period { font-size: var(--text-xs); color: var(--color-text-secondary); }
.plan-card-feature{ font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

/* ==============================
   HOME / DASHBOARD
   ============================== */
.dashboard-header {
  background: linear-gradient(135deg, #005FCC 0%, #007AFF 100%);
  padding: var(--space-5);
  color: white;
}
.dashboard-greeting { font-size: 22px; font-weight: var(--font-bold); letter-spacing: -0.5px; }
.dashboard-date     { font-size: var(--text-sm); opacity: 0.8; margin-top: 2px; }

.earnings-row {
  display: flex; gap: var(--space-3); margin-top: var(--space-4);
}
.earnings-card {
  flex: 1;
  background: rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  padding: var(--space-3); text-align: center;
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.earnings-amount { font-size: 22px; font-weight: 700; color: white; letter-spacing: -0.5px; }
.earnings-label  { font-size: var(--text-xs); color: rgba(255,255,255,0.75); margin-top: 2px; }

.urgent-bid-banner {
  background: linear-gradient(135deg, #5E5CE6, #BF5AF2);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  cursor: pointer; transition: all 0.15s;
  box-shadow: var(--shadow-md);
}
.urgent-bid-banner:active { transform: scale(0.98); }
.urgent-bid-icon  { font-size: 32px; flex-shrink: 0; }
.urgent-bid-title { font-size: var(--text-base); font-weight: var(--font-bold); color: white; }
.urgent-bid-sub   { font-size: var(--text-sm); color: rgba(255,255,255,0.85); margin-top: 2px; }
.urgent-bid-arrow { margin-left: auto; color: rgba(255,255,255,0.7); flex-shrink: 0; }

.job-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: none; box-shadow: var(--shadow-sm); padding: var(--space-4);
  cursor: pointer; transition: all 0.15s;
}
.job-card:active { transform: scale(0.985); box-shadow: var(--shadow-md); }
.job-card-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.job-time         { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); }
.job-status-chip  { font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 3px 8px; border-radius: var(--radius-full); }
.job-status-confirmed { background: rgba(52, 199, 89, 0.12); color: #34C759; }
.job-status-pending   { background: rgba(255, 159, 10, 0.12); color: #FF9F0A; }
.job-status-done      { background: var(--gray-100); color: var(--color-text-muted); }
.job-service      { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); }
.job-consumer     { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }
.job-address      { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 4px; }
.job-price        { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text); margin-top: var(--space-2); }

/* ==============================
   URGENT BID SCREEN
   ============================== */
.bid-screen {
  background: var(--color-bg); flex: 1; display: flex; flex-direction: column;
}
.bid-ai-header {
  background: linear-gradient(135deg, #5E5CE6, #BF5AF2);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
}
.bid-ai-icon   { font-size: 28px; }
.bid-ai-title  { font-size: var(--text-base); font-weight: var(--font-bold); color: white; }
.bid-ai-sub    { font-size: var(--text-sm); color: rgba(255,255,255,0.8); margin-top: 1px; }

.bid-timer {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 159, 10, 0.08);
  border-bottom: 0.5px solid rgba(255, 159, 10, 0.3);
}
.bid-timer-label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--font-medium); }
.bid-timer-value { font-size: var(--text-lg); font-weight: var(--font-bold); color: #FF9F0A; font-variant-numeric: tabular-nums; }

.bid-job-card {
  background: var(--white); border-radius: var(--radius-xl);
  border: none; box-shadow: var(--shadow-sm); padding: var(--space-4);
}
.bid-job-description {
  font-size: var(--text-base); color: var(--color-text);
  line-height: 1.6; font-style: italic;
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-3);
  background: var(--color-primary-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-3);
}
.bid-detail-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 0.5px solid var(--gray-200);
  font-size: var(--text-sm);
}
.bid-detail-row:last-child { border-bottom: none; }
.bid-detail-icon  { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.bid-detail-label { color: var(--color-text-secondary); flex-shrink: 0; width: 90px; }
.bid-detail-value { color: var(--color-text); font-weight: var(--font-medium); }

.bid-price-range {
  background: rgba(52, 199, 89, 0.10); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); text-align: center;
}
.bid-price-range-label  { font-size: var(--text-sm); color: var(--color-success); }
.bid-price-range-amount { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-success); }

.bid-actions { display: flex; gap: var(--space-3); padding: var(--space-5); }
.btn-accept  { flex: 2; background: var(--color-success); color: white; border-radius: var(--radius-lg); }
.btn-decline { flex: 1; }
.btn-counter { flex: 1; }

/* ==============================
   SCHEDULE
   ============================== */
.schedule-tabs {
  display: flex; background: var(--color-surface); border-bottom: 0.5px solid var(--color-border);
}
.schedule-tab {
  flex: 1; padding: var(--space-3) var(--space-2); text-align: center;
  font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.15s;
}
.schedule-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.date-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--white); border-bottom: 0.5px solid var(--color-border);
}
.date-nav-label { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); }
.date-nav-arrow { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--gray-100); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.date-nav-arrow svg { width: 16px; height: 16px; }

/* ==============================
   JOB DETAIL
   ============================== */
.job-detail-hero {
  background: linear-gradient(180deg, rgba(0,122,255,0.08) 0%, var(--color-surface) 100%);
  padding: var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
}
.job-detail-icon-wrap {
  width: 56px; height: 56px; border-radius: var(--radius-xl);
  background: var(--color-primary); display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
}
.job-detail-service { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-text); letter-spacing: -0.3px; }
.job-detail-time    { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 2px; }

.consumer-card {
  background: var(--white); border-radius: var(--radius-lg); padding: var(--space-4);
  border: none; box-shadow: var(--shadow-sm);
}
.consumer-name   { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); }
.consumer-phone  { font-size: var(--text-sm); color: var(--color-primary); margin-top: 2px; }
.consumer-address{ font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 4px; display: flex; align-items: flex-start; gap: 4px; }

.action-btn-row { display: flex; gap: var(--space-3); }
.btn-navigate  { flex: 1; background: #007AFF; color: white; }
.btn-share-eta { flex: 1; }

.job-notes {
  background: var(--white); border-radius: var(--radius-lg); padding: var(--space-4);
  border: none; box-shadow: var(--shadow-sm);
}
.job-notes-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--space-2); }
.job-notes-text  { font-size: var(--text-base); color: var(--color-text); line-height: 1.5; }

/* ==============================
   JOB COMPLETE
   ============================== */
.complete-step {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); background: var(--white);
  border-radius: var(--radius-lg); border: none; box-shadow: var(--shadow-sm);
  cursor: pointer; transition: all 0.15s;
}
.complete-step.checked {
  box-shadow: 0 0 0 1.5px var(--color-success);
  background: rgba(52, 199, 89, 0.08);
}

.complete-checkbox {
  width: 24px; height: 24px; border-radius: var(--radius-sm);
  border: 2px solid var(--color-border); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; transition: all 0.15s;
}
.complete-step.checked .complete-checkbox {
  background: var(--color-success); border-color: var(--color-success); color: white;
  border-radius: var(--radius-sm);
}
.complete-step-text { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text); }
.complete-step.checked .complete-step-text { color: var(--color-success); }

.photo-upload-area {
  border: 2px dashed var(--gray-300); border-radius: var(--radius-xl);
  padding: var(--space-6); text-align: center; cursor: pointer;
  transition: all 0.15s; background: var(--gray-100);
}
.photo-upload-area:active { border-color: var(--color-primary); background: var(--color-primary-light); }
.photo-upload-icon  { font-size: 36px; margin-bottom: var(--space-2); }
.photo-upload-label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.photo-upload-sub   { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.photo-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.photo-thumb  {
  width: 72px; height: 72px; border-radius: var(--radius-md);
  background: var(--gray-200); display: flex; align-items: center; justify-content: center;
  font-size: 24px; border: none; overflow: hidden;
  position: relative; box-shadow: var(--shadow-sm);
}
.photo-thumb-remove {
  position: absolute; top: -4px; right: -4px; width: 18px; height: 18px;
  background: var(--color-danger); border-radius: var(--radius-full);
  color: white; font-size: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1.5px solid white;
}

.signature-pad {
  border: 1.5px dashed var(--gray-300); border-radius: var(--radius-lg);
  height: 100px; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface); cursor: pointer; position: relative;
}
.signature-pad-label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==============================
   MANAGE (Services & Availability)
   ============================== */
.availability-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 0.5px solid var(--gray-200);
}
.availability-day  { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text); }
.availability-time { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 1px; }

.toggle-switch {
  width: 44px; height: 24px; border-radius: var(--radius-full);
  background: var(--gray-300); position: relative; cursor: pointer;
  transition: background 0.2s; flex-shrink: 0;
}
.toggle-switch.on { background: var(--color-success); }
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: var(--radius-full);
  background: white; transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch.on::after { transform: translateX(20px); }

.manage-service-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4); background: var(--white);
  border-bottom: 0.5px solid var(--gray-200);
}
.manage-service-name  { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text); }
.manage-service-price { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: 1px; }

/* ==============================
   AI AGENT (same as consumer ai-chat)
   ============================== */
.ai-chat-hero {
  background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(52,199,89,0.06));
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  border-bottom: 0.5px solid var(--color-border);
}
.ai-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: linear-gradient(135deg, #007AFF, #5E5CE6);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.ai-name   { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); }
.ai-status { font-size: var(--text-xs); color: var(--color-success); font-weight: var(--font-medium); }

.typing-indicator { display: flex; align-items: center; gap: 4px; padding: 12px 16px; background: var(--white); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); border-bottom-left-radius: 4px; align-self: flex-start; }
.typing-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-text-muted); animation: typingBounce 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* ==============================
   PRO PROFILE / SETTINGS
   ============================== */
.pro-profile-header {
  background: linear-gradient(160deg, #1343B0 0%, #007AFF 100%);
  padding: var(--space-6) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
}
.pro-profile-name     { font-size: var(--text-xl); font-weight: var(--font-bold); color: white; letter-spacing: -0.3px; }
.pro-profile-business { font-size: var(--text-sm); color: rgba(255,255,255,0.75); margin-top: 2px; }
.pro-profile-stats    { display: flex; gap: var(--space-4); margin-top: var(--space-3); }
.pro-profile-stat     { text-align: center; }
.pro-profile-stat-val { font-size: var(--text-lg); font-weight: var(--font-bold); color: white; }
.pro-profile-stat-lbl { font-size: var(--text-xs); color: rgba(255,255,255,0.7); }

.profile-section-label { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-muted); letter-spacing: 0.8px; text-transform: uppercase; padding: var(--space-4) var(--space-5) var(--space-2); }

.integration-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4); background: var(--white);
  border-bottom: 0.5px solid var(--gray-200); cursor: pointer;
}
.integration-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.integration-name { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text); }
.integration-status-connected   { font-size: var(--text-xs); color: var(--color-success); font-weight: var(--font-medium); }
.integration-status-unconnected { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Pro profile avatar — stronger depth */
.pro-profile-header .pro-avatar {
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}