/* ============================================
   Helpal Premium Theme – With Assessment Reset
============================================ */

:root {
  --color-primary-900: var(--brand-primary-900, #0F172A);
  --color-primary-800: var(--brand-primary-800, #111C44);
  --color-secondary-700: var(--brand-secondary-700, #0F766E);
  --color-secondary-100: var(--brand-secondary-100, #CCFBF1);
  --color-accent-700: var(--brand-accent-700, #C69214);
  --color-accent-100: var(--brand-accent-100, #FEF3C7);
  --color-bg: var(--brand-bg, #F8FAFC);
  --color-surface: var(--brand-surface, #FFFFFF);
  --color-surface-alt: var(--brand-surface-alt, #F1F5F9);
  --color-border: var(--brand-border, #E2E8F0);
  --color-text-primary: var(--brand-text-primary, #0F172A);
  --color-text-secondary: var(--brand-text-secondary, #475569);
  --color-success: var(--brand-success, #15803D);
  --color-warning: var(--brand-warning, #D97706);
  --color-danger: var(--brand-danger, #DC2626);
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 18px 48px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.12);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --font-sans: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-primary: var(--color-primary-800);
  --bs-primary-rgb: 17, 28, 68;
  --bs-secondary: var(--color-secondary-700);
  --bs-secondary-rgb: 15, 118, 110;
  --bs-success: var(--color-success);
  --bs-success-rgb: 21, 128, 61;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-light: var(--color-surface-alt);
  --bs-light-rgb: 241, 245, 249;
  --bs-dark: var(--color-primary-900);
  --bs-dark-rgb: 15, 23, 42;
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text-primary);
  --bs-border-color: var(--color-border);
  --bs-font-sans-serif: var(--font-sans);
}

html,
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}

body {
  background-image:
    radial-gradient(circle at top left, rgba(204, 251, 241, 0.24), transparent 28%),
    radial-gradient(circle at top right, rgba(254, 243, 199, 0.22), transparent 22%);
}

h1, h2, h3, h4, h5, h6,
.dashboard-title,
.auth-card-title,
.navbar-brand-title {
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  letter-spacing: -0.03em;
}

p, li, label, .text-muted, .small, .form-text,
.dashboard-subtitle, .metric-label, .assessment-meta, .notification-time,
.conversation-preview, .assessment-ai-note {
  color: var(--color-text-secondary);
}

/* ----- Navbar ----- */
.navbar,
.helpal-navbar {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(16px);
}

.navbar-brand-mark,
.footer-mark {
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-800));
  box-shadow: var(--shadow-sm);
}

.navbar-brand-subtitle {
  color: var(--color-text-secondary);
}

.navbar .nav-link,
.helpal-navbar .nav-link,
.dropdown-item {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.navbar .nav-link.active,
.navbar .nav-link:hover,
.helpal-navbar .nav-link.active,
.helpal-navbar .nav-link:hover,
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--color-primary-900);
}

.dropdown-menu {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.65rem;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
}

.dropdown-item {
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}

/* ----- Buttons ----- */
.btn {
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: none;
}

.btn-primary,
.auth-submit-btn,
.request-cta-card .btn-light,
.payment-alert .btn-primary {
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-800));
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(17, 28, 68, 0.16);
}

.btn-primary:hover,
.btn-primary:focus,
.auth-submit-btn:hover,
.auth-submit-btn:focus {
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-900));
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(17, 28, 68, 0.22);
}

.btn-outline-primary {
  color: var(--color-primary-800);
  border-color: rgba(17, 28, 68, 0.16);
  background: rgba(255, 255, 255, 0.82);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background: var(--color-primary-800);
  border-color: var(--color-primary-800);
}

.btn-outline-secondary {
  color: var(--color-text-secondary);
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.72);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--color-primary-900);
  border-color: rgba(17, 28, 68, 0.18);
  background: var(--color-surface-alt);
}

.btn-warning,
.badge.bg-warning,
.badge.text-bg-warning {
  background: var(--color-accent-100);
  color: #7c5b0f;
  border-color: rgba(198, 146, 20, 0.18);
}

/* ----- Cards & Surfaces (Dashboard & other pages) ----- */
.card,
.content-card,
.metric-card,
.request-details-shell,
.brief-excerpt-card,
.settings-card,
.sp-card,
.list-group-item,
.student-social-block,
.intake-auth-panel,
.intake-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.88);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card:hover,
.content-card:hover,
.metric-card:hover,
.intake-card:hover {
  box-shadow: var(--shadow-md);
}

/* ----- Analysis-specific cards (light touch) ----- */
.analysis-section-card,
.recommended-expert--actionable {
  box-shadow: var(--shadow-sm);
}

/* ----- Dashboard Header ----- */
.dashboard-header {
  background: var(--brand-dashboard-card-surface, var(--color-surface));
  border: 1px solid var(--brand-dashboard-card-border, var(--color-border));
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}

.dashboard-header .dashboard-title,
.dashboard-header h1.dashboard-title {
  color: var(--dash-text, var(--color-text-primary));
}

.dashboard-header .dashboard-subtitle,
.dashboard-header .profile-progress-label,
.dashboard-header .profile-progress-value,
.dashboard-header .indicator-text,
.dashboard-header .presence-indicator,
.dashboard-header .presence-indicator span {
  color: var(--dash-text, var(--color-text-primary));
}

.dashboard-header .profile-progress-card {
  background: var(--dash-surface, var(--color-surface));
  border-color: var(--dash-card-border, var(--color-border));
}

.dashboard-header .profile-progress-bar {
  background: var(--color-surface-alt);
}

.dashboard-header .profile-progress-fill {
  background: linear-gradient(90deg, var(--dash-text, var(--color-primary-800)), var(--color-secondary-700));
}

/* ----- Icons & Metrics ----- */
.metric-icon,
.quick-action-icon {
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.metric-icon.bg-primary,
.quick-action-icon.primary {
  background: linear-gradient(
    135deg,
    var(--brand-dashboard-metric-icon-start, var(--color-primary-900)),
    var(--brand-dashboard-metric-icon-end, var(--color-primary-800))
  );
}

.metric-icon.bg-success,
.quick-action-icon.success {
  background: linear-gradient(135deg, var(--color-secondary-700), #0b8a80);
}

.metric-icon.bg-warning,
.quick-action-icon.warning {
  background: linear-gradient(135deg, #b88916, var(--color-accent-700));
}

.metric-icon.bg-info,
.quick-action-icon.info {
  background: linear-gradient(135deg, #155e75, var(--color-secondary-700));
}

.metric-icon.bg-dark,
.quick-action-icon.secondary {
  background: linear-gradient(135deg, #23356b, var(--color-primary-900));
}

.content-card-header,
.modal-header,
.request-details-shell__toggle {
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

/* ----- List items (Dashboard) ----- */
.support-mode-item,
.assessment-item,
.bid-item,
.payment-alert,
.conversation-item,
.notification-item,
.alert-item {
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.82);
}

.quick-action {
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-xs);
}

.quick-action:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ----- Badges (status) ----- */
.status-badge,
.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.status-open {
  background: rgba(17, 28, 68, 0.08);
  color: var(--color-primary-800);
  border-color: rgba(17, 28, 68, 0.14);
}

.status-in_progress {
  background: rgba(15, 118, 110, 0.10);
  color: var(--color-secondary-700);
  border-color: rgba(15, 118, 110, 0.16);
}

.status-submitted {
  background: rgba(198, 146, 20, 0.12);
  color: #8a6610;
  border-color: rgba(198, 146, 20, 0.18);
}

.status-completed {
  background: rgba(21, 128, 61, 0.10);
  color: var(--color-success);
  border-color: rgba(21, 128, 61, 0.16);
}

.status-pending {
  background: rgba(71, 85, 105, 0.08);
  color: var(--color-text-secondary);
  border-color: rgba(71, 85, 105, 0.12);
}

/* ----- Expert progress cards (specific to dashboard) ----- */
.expert-progress-card,
.expert-progress-card .content-card-body {
  background:
    radial-gradient(circle at top right, rgba(254, 243, 199, 0.32), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

.expert-progress-meter__value,
.expert-progress-kicker,
.ai-insight-miniTitle,
.assessment-ai-chip,
.expert-progress-title {
  color: var(--color-accent-700);
}

.assessment-ai-chip,
.ai-insight-badge,
.intake-preview-hero__kicker {
  background: rgba(204, 251, 241, 0.55);
  border: 1px solid rgba(15, 118, 110, 0.16);
  color: var(--color-secondary-700);
}

.intake-preview-hero,
.intake-preview-hero h1,
.intake-preview-hero .intake-preview-hero__title {
  color: #fff !important;
}

.intake-preview-hero .intake-preview-hero__summary,
.intake-preview-hero .intake-preview-hero__summary p,
.intake-preview-hero .intake-preview-hero__summary li {
  color: rgba(255, 255, 255, 0.94) !important;
}

.intake-preview-hero .intake-preview-hero__summary strong,
.intake-preview-hero .intake-preview-hero__summary b {
  color: #fff !important;
}

.intake-preview-hero .intake-preview-hero__note,
.intake-preview-hero .intake-preview-hero__note.small {
  color: rgba(191, 219, 254, 0.9) !important;
}

/* ----- Analysis Panels (light touch) ----- */
.ai-insight-panel,
.intake-price-box,
.intake-modal-card__header {
  border-color: rgba(15, 118, 110, 0.16);
}

.ai-insight-panel,
.request-cta-card {
  background:
    radial-gradient(circle at top right, rgba(204, 251, 241, 0.34), transparent 28%),
    linear-gradient(145deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
  color: var(--color-text-primary);
  border: 1px solid rgba(226, 232, 240, 0.88);
  box-shadow: var(--shadow-sm);
}

.ai-insight-panel .analysis-section-title,
.ai-insight-panel .ai-insight-miniTitle,
.request-cta-card__eyebrow,
.request-cta-card h1,
.request-cta-card h2,
.request-cta-card h3,
.request-cta-card h4,
.request-cta-card p {
  color: inherit;
}

.request-cta-card__panel {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.88);
  box-shadow: var(--shadow-sm);
}

.request-cta-card .text-white-50 {
  color: var(--color-text-secondary);
}

.ai-insight-callout,
.analysis-modal__surface,
.intake-price-box,
.intake-workload-summary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-primary);
  border: 1px solid rgba(226, 232, 240, 0.85);
}

/* ----- Tables ----- */
.table,
table {
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(226, 232, 240, 0.85);
  color: var(--color-text-primary);
}

.table thead th,
table thead th {
  background: rgba(241, 245, 249, 0.88);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom-width: 1px;
}

.table tbody tr,
table tbody tr {
  background: rgba(255, 255, 255, 0.8);
}

.table tbody tr:hover,
table tbody tr:hover {
  background: rgba(241, 245, 249, 0.92);
}

/* ----- Form controls ----- */
.form-control,
.form-select,
.input-group-text,
.auth-form .form-control,
.auth-form .form-select {
  border-radius: 14px;
  border-color: rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.96);
  color: var(--color-text-primary);
  min-height: 48px;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: 0 0 0 4px rgba(204, 251, 241, 0.72);
}

/* ----- List group ----- */
.list-group-item {
  margin-bottom: 0.55rem;
  color: var(--color-text-secondary);
}

.list-group-item.active,
.sp-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 28, 68, 0.94));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* ----- Sidebar (student portal) ----- */
.sp-sidebar {
  background: rgba(255, 255, 255, 0.94);
  border-right-color: rgba(226, 232, 240, 0.92);
  box-shadow: 12px 0 30px rgba(15, 23, 42, 0.04);
}

.sp-sidebar .nav-link {
  border-radius: 14px;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.sp-sidebar .nav-link:hover {
  background: rgba(241, 245, 249, 0.92);
  color: var(--color-primary-900);
}

/* ----- Footer ----- */
.helpal-footer,
.helpal-footer-cta {
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.helpal-footer .dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.92);
  box-shadow: var(--shadow-md);
  border-radius: 16px;
  backdrop-filter: blur(18px);
}

.helpal-footer .dropdown-header,
.helpal-footer .dropdown-item,
.helpal-footer .dropdown-item span,
.helpal-footer .dropdown-item small {
  color: var(--color-text-primary);
}

.helpal-footer .dropdown-item:hover,
.helpal-footer .dropdown-item:focus {
  background: rgba(241, 245, 249, 0.92);
  color: var(--color-primary-900);
}

.helpal-footer .btn-outline-secondary.dropdown-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(226, 232, 240, 0.92);
}

/* ----- Toasts & Alerts ----- */
.helpal-toast {
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  border-left-width: 3px;
}

.helpal-fab {
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-800));
}

.helpal-fab:hover {
  background: linear-gradient(135deg, var(--color-primary-800), var(--color-primary-900));
}

/* ----- Social buttons (login) ----- */
.student-social-btn--facebook,
.intake-social-btn--facebook {
  background: linear-gradient(135deg, #1459b7, #1877f2);
}

.student-social-btn--google,
.intake-social-btn--google {
  background: rgba(255, 255, 255, 0.96);
}

/* ----- Alerts (general) ----- */
.alert {
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.88);
  box-shadow: var(--shadow-xs);
}

.alert-warning {
  background: rgba(254, 243, 199, 0.55);
  color: #8a6610;
}

.alert-info {
  background: rgba(204, 251, 241, 0.45);
  color: var(--color-secondary-700);
}

/* ----- Responsive ----- */
@media (max-width: 991.98px) {
  .dashboard-container {
    padding: 1rem;
  }

  .dashboard-header,
  .intake-preview-hero {
    border-radius: 22px;
    padding: 1.5rem;
  }
}

/* ============================================
   ASSESSMENT PAGE OVERRIDES
   Keep the premium palette without flattening assessment cards
============================================ */
.assessment-page .card,
.assessment-page .request-details-shell,
.assessment-page .brief-excerpt-card,
.assessment-page .bid-item,
.assessment-page .ai-insight-panel,
.assessment-page .recommended-expert--actionable {
  background: var(--assessment-surface, var(--brand-dashboard-card-surface, var(--color-surface))) !important;
  background-color: var(--assessment-surface, var(--brand-dashboard-card-surface, var(--color-surface))) !important;
  border: 1px solid var(--assessment-border, var(--brand-dashboard-card-border, var(--color-border))) !important;
  box-shadow: var(--assessment-shadow, var(--shadow-sm)) !important;
  border-radius: var(--assessment-radius-lg, var(--radius-lg)) !important;
}

/* Keep assessment text readable under the premium theme */
.assessment-page .ai-insight-panel,
.assessment-page .recommended-expert--actionable {
  color: var(--color-text-primary) !important;
}

/* ============================================
   MARKETING PAGE OVERRIDES
   Preserve homepage / tutorial polish under premium theme
============================================ */
.marketing-home .marketing-title,
.marketing-home .marketing-section__heading h1,
.marketing-home .marketing-section__heading h2,
.marketing-home .marketing-video-card__title,
.marketing-home .marketing-step-card h3,
.marketing-home .marketing-trust-card h3,
.marketing-home .marketing-mode-card h3,
.marketing-home .marketing-proof-card h3,
.marketing-home .marketing-video-tile__body h3,
.marketing-home .tutorial-feature h2 {
  color: #102033 !important;
}

.marketing-home .marketing-subtitle,
.marketing-home .marketing-section__heading p,
.marketing-home .marketing-video-card__copy,
.marketing-home .marketing-step-card p,
.marketing-home .marketing-trust-card p,
.marketing-home .marketing-mode-card p,
.marketing-home .marketing-proof-card p,
.marketing-home .marketing-video-tile__body p,
.marketing-home .tutorial-feature__meta,
.marketing-home .tutorial-feature__meta span {
  color: #4e5f73 !important;
}

.marketing-home .marketing-video-card,
.marketing-home .tutorial-feature,
.marketing-home .marketing-proof-card,
.marketing-home .marketing-step-card,
.marketing-home .marketing-trust-card,
.marketing-home .marketing-mode-card,
.marketing-home .marketing-video-tile,
.marketing-home .marketing-empty-card {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 76, 129, 0.1) !important;
  box-shadow: 0 24px 50px rgba(16, 32, 51, 0.08) !important;
}

.marketing-home .marketing-hero__meta-item,
.marketing-home .tutorial-tab {
  background: rgba(255, 255, 255, 0.82) !important;
  color: #244462 !important;
  border-color: rgba(15, 76, 129, 0.14) !important;
}

.marketing-home .tutorial-tab--active,
.marketing-home .tutorial-tab:hover {
  background: #0f4c81 !important;
  color: #ffffff !important;
  border-color: #0f4c81 !important;
}

.marketing-home .marketing-final-cta,
.marketing-home .marketing-final-cta h2,
.marketing-home .marketing-final-cta p,
.marketing-home .marketing-final-cta .marketing-kicker {
  color: #ffffff !important;
}

.marketing-home .marketing-final-cta .btn-outline-light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.04);
}

.marketing-home .marketing-final-cta .btn-outline-light:hover,
.marketing-home .marketing-final-cta .btn-outline-light:focus {
  color: var(--color-primary-900);
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.9);
}