/* Outreach CRM Standalone Styles
   Main stylesheet — loaded on every page via base_wide.html / base.html */

/* =====================================================
   BASE / BODY
   ===================================================== */
body { background: #f0f0f0; }
.navbar-brand { font-weight: 700; }

/* =====================================================
   CRM NAVBAR — landing page style
   ===================================================== */
.crm-navbar {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e0e0e0;
  padding-top: 0;
  padding-bottom: 0;
}
.crm-navbar .container-fluid { height: 64px; }

/* Logo box — identical to landing .nav-logo */
.crm-navbar .navbar-brand {
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #141414;
  border: 1px solid #141414;
  padding: 0.3em 0.5em;
  border-radius: 4px;
  text-decoration: none;
}
.crm-navbar .navbar-brand:hover { color: #141414; }
.crm-navbar .navbar-brand .logo-bamya { color: #141414; font-weight: 900; }
.crm-navbar .navbar-brand .logo-co {
  background-color: #141414;
  color: #fff;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  margin-left: 0.1em;
}

/* Nav links */
.crm-navbar .nav-link            { font-size: 0.875rem; font-weight: 500; color: #525252 !important; }
.crm-navbar .nav-link:hover,
.crm-navbar .nav-link:focus      { color: #141414 !important; }
.crm-navbar .nav-link.active     { color: #141414 !important; font-weight: 600; }
.crm-navbar .dropdown-toggle     { color: #525252 !important; }
.crm-navbar .dropdown-toggle:hover { color: #141414 !important; }
.crm-navbar .navbar-toggler      { border-color: #ddd; }
.crm-navbar .navbar-collapse     { background: #fff; padding: 0 12px 8px; }
.crm-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20,20,20,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* Token badges + user email in nav */
.crm-navbar .badge { font-size: 0.7rem; }
.crm-navbar .nav-link.text-muted { font-size: 0.8rem !important; color: #a3a3a3 !important; }

/* =====================================================
   MOBILE: icon-only header buttons
   ===================================================== */
@media (max-width: 575.98px) {
  .page-header-actions .action-btn {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .page-header-actions .action-btn .bi {
    font-size: 1rem !important;
  }
  /* restore dropdown caret size */
  .page-header-actions .action-btn::after {
    font-size: 0.75rem;
  }
}

/* =====================================================
   PAGE LAYOUT
   ===================================================== */
.page-wrapper {
  margin-top: 1.5rem;
}

.content-container {
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

/* Page Header */
.page-header-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
  padding: 2rem;
}

.page-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.page-header-text {
  flex: 1;
}

.page-title {
  margin-bottom: 0.5rem;
  font-weight: 800;
}

.page-description {
  margin-bottom: 0;
  color: #6c757d;
  font-size: 1.1rem;
}

.page-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .page-header-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }
  .page-header-actions {
    justify-content: flex-start;
  }
}

/* =====================================================
   ACTION BUTTONS
   ===================================================== */
.action-btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.action-btn.primary   { background: #0d6efd; color: #fff !important; }
.action-btn.secondary { background: #6c757d; color: #fff !important; }
.action-btn.success   { background: #198754; color: #fff !important; }
.action-btn.danger    { background: #dc3545; color: #fff !important; }
.action-btn.warning   { background: #ffc107; color: #fff !important; }
.action-btn.info      { background: #0dcaf0; color: #fff !important; }

.action-btn.primary:hover,
.action-btn.secondary:hover,
.action-btn.success:hover,
.action-btn.danger:hover,
.action-btn.warning:hover,
.action-btn.info:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.action-btn.sm {
  padding: 0.25rem 0.5rem;
  min-width: 28px;
  height: 28px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  gap: 0.2rem;
  white-space: nowrap;
}

.action-btn.sm i {
  margin: 0;
  font-size: 0.75rem;
}

.action-btn.dropdown-toggle.no-caret::after {
  display: none !important;
}

.action-btn.disabled {
  background: #6c757d;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.6;
}

.action-btn.disabled:hover {
  background: #6c757d;
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  color: #6c757d;
}

/* =====================================================
   RESEARCH LOG
   ===================================================== */
@keyframes airFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.air-new {
  animation: airFadeIn 0.36s ease-out;
}
.research-log {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  word-break: break-word;
  font-size: 0.9rem;
  color: #212529;
  padding: 4px 0;
}
.research-log .log-status { color: #212529; }
.research-log .log-tool { color: #6c757d; font-size: 0.8rem; }
.research-log .log-error { color: #dc3545; }
.research-log .log-success { color: #212529; }
.research-log .log-token-warn { color: #dc3545; }

.research-log-lg {
  height: 440px;
}

/* Phase 0 company cards (inside .research-log) */
.research-log .p0-company-card {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  white-space: normal;
}
.research-log .p0-company-card strong {
  font-size: 0.9rem;
}
.research-log .p0-summary {
  padding: 7px 10px;
  background: #f0f7ff;
  border: 1px solid #cfe2ff;
  border-radius: 6px;
  margin-bottom: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  white-space: normal;
}

/* =====================================================
   UTILITY: COLORS
   ===================================================== */
.text-orange { color: #fd7e14 !important; }
.bg-orange { background-color: #fd7e14 !important; }

/* =====================================================
   UTILITY: BADGE SIZES
   ===================================================== */
.badge-sm { font-size: 0.7em; padding: 0.2em 0.5em; }

/* =====================================================
   UTILITY: FONT SIZES
   ===================================================== */
.fs-065 { font-size: 0.65rem !important; }
.fs-07  { font-size: 0.7rem !important; }
.fs-072 { font-size: 0.72rem !important; }
.fs-075 { font-size: 0.75rem !important; }
.fs-078 { font-size: 0.78rem !important; }
.fs-08  { font-size: 0.8rem !important; }
.fs-082 { font-size: 0.82rem !important; }
.fs-085 { font-size: 0.85rem !important; }
.fs-088 { font-size: 0.88rem !important; }
.fs-09  { font-size: 0.9rem !important; }
.fs-icon-lg  { font-size: 2rem !important; }
.fs-icon-xl  { font-size: 3rem !important; }

/* =====================================================
   UTILITY: TYPOGRAPHY
   ===================================================== */
.font-mono {
  font-family: 'Courier New', Consolas, monospace;
}

.font-mono-sm {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.82rem;
}

.font-mono-xs {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.78rem;
}

.font-mono-prompt {
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.8rem;
}

.ws-pre-wrap  { white-space: pre-wrap !important; }
.ws-nowrap    { white-space: nowrap !important; }
.word-break-all { word-break: break-all !important; }

/* =====================================================
   UTILITY: CURSOR / INTERACTION
   ===================================================== */
.cursor-pointer  { cursor: pointer !important; }
.cursor-grab     { cursor: grab !important; }
.cursor-grab:active { cursor: grabbing !important; }

/* =====================================================
   UTILITY: WIDTHS
   ===================================================== */
.w-40   { width: 40px !important; }
.w-50px { width: 50px !important; }
.w-80   { width: 80px !important; }
.w-90   { width: 90px !important; }
.w-100px { width: 100px !important; }
.w-120  { width: 120px !important; }
.w-140  { width: 140px !important; }
.w-160  { width: 160px !important; }
.min-w-90  { min-width: 90px !important; }
.min-w-120 { min-width: 120px !important; }
.min-w-130 { min-width: 130px !important; }
.min-w-200 { min-width: 200px !important; }
.max-w-140 { max-width: 140px !important; }
.max-w-220 { max-width: 220px !important; }

/* =====================================================
   UTILITY: HEIGHTS
   ===================================================== */
.h-6px    { height: 6px !important; }
.min-h-300 { min-height: 300px !important; }
.min-h-360 { min-height: 360px !important; }
.max-h-200 { max-height: 200px !important; }
.max-h-300 { max-height: 300px !important; }
.max-h-500 { max-height: 500px !important; }
.max-h-520 { max-height: 520px !important; }

/* =====================================================
   UTILITY: OVERFLOW
   ===================================================== */
.overflow-y-auto { overflow-y: auto !important; }

/* =====================================================
   UTILITY: TEXT DECORATIONS (for JS-generated content)
   ===================================================== */
.text-strikethrough-danger {
  text-decoration: line-through;
  color: #dc3545;
}

.text-success-bold {
  color: #198754;
  font-weight: 500;
}

/* =====================================================
   UTILITY: BORDERS / DOTTED LINKS
   ===================================================== */
.dotted-link {
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}

/* =====================================================
   UTILITY: POSITIONED COPY BUTTON (in textareas)
   ===================================================== */
.prompt-copy-btn {
  top: 8px;
  right: 8px;
}

/* =====================================================
   UTILITY: BACKGROUND
   ===================================================== */
.bg-fafafa { background: #fafafa !important; }
.bg-white  { background: #fff !important; }

/* =====================================================
   SHARED COMPONENT: DYNAMIC BADGE (uses CSS var from inline --bg)
   ===================================================== */
.badge-dynamic {
  background-color: var(--badge-bg, #6c757d);
  color: var(--badge-color, #fff);
}

/* =====================================================
   SHARED COMPONENT: COLOR PICKER INPUT (for profiles editor)
   ===================================================== */
.color-picker-input {
  width: 32px;
  height: 32px;
  border: none;
  padding: 0;
}

/* =====================================================
   SHARED COMPONENT: PROFILE CHECKBOX ROW
   ===================================================== */
.profile-checkbox-row {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.85rem;
}

.profile-checkbox-row input[type="checkbox"] {
  margin-right: 4px;
}

/* =====================================================
   SHARED: GOAL ITEM (overflow wrapper)
   ===================================================== */
.goal-item { overflow-x: auto; }

/* =====================================================
   SHARED COMPONENT: STAT FILTER PILL (companies page action stats)
   ===================================================== */
.stat-pill {
  cursor: pointer;
  padding: 6px 8px 4px;
  border-radius: 6px;
  position: relative;
}
.stat-pill > .help-icon {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  left: auto !important;
}

.stat-pill-due        { background-color: #ffe0b2; }
.stat-pill-due.active { background-color: #ffcc80; }
.stat-pill-due .stat-pill-count { color: #bf360c; }
.stat-pill-due .stat-pill-label { font-weight: 600; }

.stat-pill-upcoming        { background-color: #c8e6c9; }
.stat-pill-upcoming.active { background-color: #a5d6a7; }
.stat-pill-upcoming .stat-pill-count { color: #1b5e20; }
.stat-pill-upcoming .stat-pill-label { font-weight: 600; }

.stat-pill-later        { background-color: #bbdefb; }
.stat-pill-later.active { background-color: #90caf9; }
.stat-pill-later .stat-pill-count { color: #0d47a1; }
.stat-pill-later .stat-pill-label { font-weight: 600; }

/* =====================================================
   SHARED COMPONENT: VERTICAL DIVIDER
   ===================================================== */
.stat-divider {
  width: 1px;
  height: 70%;
  background: linear-gradient(to bottom, transparent, #bdbdbd, transparent);
}

/* =====================================================
   SHARED COMPONENT: RESIZE VERTICAL
   ===================================================== */
.resize-vertical { resize: vertical !important; }

/* =====================================================
   SHARED COMPONENT: FLEX SHRINK ZERO
   ===================================================== */
.flex-shrink-0 { flex-shrink: 0 !important; }

/* =====================================================
   SHARED: NOT-ENRICHED TABLE ROWS
   ===================================================== */
tr.not-enriched td { color: #adb5bd !important; }
tr.not-enriched td a { color: #adb5bd !important; }
tr.not-enriched td .badge { opacity: 0.5; }

/* =====================================================
   SHARED: CLICKABLE TABLE ROWS
   ===================================================== */
tr.clickable-row { cursor: pointer; }
tbody tr.clickable-row td { user-select: none; }
tbody tr.clickable-row td.id-cell { user-select: text; cursor: text; }

/* =====================================================
   SHARED: INFO BOX (used on enrich_phase0, etc.)
   ===================================================== */
.info-box {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  font-size: 0.75rem;
}

/* =====================================================
   HELP ICONS & MODALS
   ===================================================== */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #adb5bd;
  color: #6c757d;
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 3px;
  line-height: 1;
  transition: all 0.15s ease;
}
.help-icon:hover {
  border-color: #0d6efd;
  color: #0d6efd;
  background: #e7f1ff;
}
.help-modal-body h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; }
.help-modal-body p { font-size: 0.9rem; color: #495057; margin-bottom: 0.6rem; }
.help-modal-body ul { font-size: 0.9rem; color: #495057; padding-left: 1.25rem; }
.help-modal-body li { margin-bottom: 0.35rem; }
.help-modal-body strong { color: #212529; }