/* OmniSight - Custom Styles */

:root {
  --primary-color: #1e3a5f;
  --omnisight-orange: #f7941d;
  --secondary-color: #6c757d;
  --success-color: #198754;
  --warning-color: #ffc107;
  --danger-color: #dc3545;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base Styles */
body {
  font-family: var(--font-family);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

.main-content {
  flex: 1;
}

/* Navbar */
.navbar-brand {
  font-size: 1.25rem;
  letter-spacing: -0.5px;
}

.navbar .nav-link {
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.navbar .badge {
  font-size: 0.65rem;
  padding: 0.25em 0.5em;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 4rem 0;
}

.min-vh-75 {
  min-height: 75vh;
}

.hero-graphic {
  padding: 3rem;
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 100%);
  border-radius: 50%;
  display: inline-block;
}

/* Features Section */
.feature-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Cards */
.card {
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

/* Stats Cards */
.stats-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tables */
.table th {
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--secondary-color);
  border-bottom-width: 2px;
}

.table td {
  vertical-align: middle;
  padding: 1rem 0.75rem;
}

.opportunity-row {
  transition: background-color 0.15s;
}

.opportunity-row:hover {
  background-color: rgba(13, 110, 253, 0.05) !important;
}

/* Badges */
.badge {
  font-weight: 500;
  padding: 0.5em 0.75em;
}

/* Forms */
.form-label {
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Buttons */
.btn {
  font-weight: 500;
  padding: 0.5rem 1rem;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
}

/* Pagination */
.pagination {
  margin-bottom: 0;
}

.page-link {
  font-weight: 500;
  padding: 0.5rem 0.875rem;
}

.page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Footer */
.footer {
  border-top: 1px solid #dee2e6;
}

/* Avatar */
.avatar {
  font-size: 1.25rem;
}

/* Alerts */
.alert {
  border: none;
  border-radius: 0.5rem;
}

/* Error Page */
.error-page i {
  opacity: 0.8;
}

/* Breadcrumb */
.breadcrumb {
  background: none;
  padding: 0;
  margin-bottom: 1rem;
}

.breadcrumb-item a {
  color: var(--primary-color);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* Filter Card */
.filter-card .form-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Tablet adjustments (max-width: 992px) */
@media (max-width: 992px) {
  /* Full-screen modals on tablet and below */
  .modal-dialog.modal-lg {
    max-width: 100%;
    margin: 0.5rem;
  }
}

/* Mobile adjustments (max-width: 768px) */
@media (max-width: 768px) {
  /* Hero section */
  .hero-section {
    padding: 2rem 0;
  }

  .hero-section h1 {
    font-size: 2rem;
  }

  .min-vh-75 {
    min-height: auto;
  }

  /* Container padding */
  .container.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Stats icons */
  .stats-icon,
  .stat-icon {
    width: 40px;
    height: 40px;
  }
  .stats-icon .fs-4,
  .stat-icon .fs-4 {
    font-size: 1rem !important;
  }

  /* Tables - smaller text, tighter padding */
  .table-responsive {
    font-size: 0.8rem;
  }
  .table td,
  .table th {
    padding: 0.5rem 0.4rem;
  }

  /* Page headers - stack title and buttons */
  .d-flex.justify-content-between.align-items-center.mb-4 {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  /* H1/H2/H3 headings smaller on mobile */
  .h2, h2 {
    font-size: 1.4rem;
  }
  .h3, h3 {
    font-size: 1.15rem;
  }

  /* Cards - reduce padding */
  .card-body {
    padding: 0.75rem;
  }
  .card-body.p-4 {
    padding: 1rem !important;
  }
  .card-header {
    padding: 0.6rem 0.75rem;
  }

  /* Full-screen modals on mobile */
  .modal-dialog {
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
  }
  .modal-content {
    border: none;
    border-radius: 0;
    min-height: 100vh;
  }
  .modal-body {
    padding: 1rem;
  }

  /* Form inputs - larger touch targets */
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 1rem;
  }

  /* Buttons - larger touch targets */
  .btn {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
  .btn-sm {
    min-height: 36px;
  }

  /* Badges - slightly larger */
  .badge {
    font-size: 0.7rem;
  }

  /* Pagination */
  .pagination .page-link {
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
  }

  /* Filter forms - make collapsible */
  .mobile-filter-collapse .card-body {
    display: none;
  }
  .mobile-filter-collapse.show .card-body {
    display: block;
  }

  /* Detail page header - stack actions below */
  .d-flex.justify-content-between.align-items-start.mb-4 {
    flex-direction: column;
    gap: 1rem;
  }
  .d-flex.justify-content-between.align-items-start.mb-4 > .d-flex.gap-2 {
    width: 100%;
    flex-wrap: wrap;
  }
  .d-flex.justify-content-between.align-items-start.mb-4 > .d-flex.gap-2 .btn {
    flex: 1;
    min-width: 0;
  }

  /* Card footer pagination - stack */
  .card-footer .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .card-footer .pagination {
    justify-content: center;
  }

  /* Progress bars - ensure readable on mobile */
  .progress {
    min-height: 20px;
  }

  /* Breadcrumb - smaller */
  .breadcrumb {
    font-size: 0.8rem;
  }

  /* Dashboard chart container */
  .chart-container {
    height: 250px !important;
  }

  /* Dashboard period selector - stack */
  .btn-group[role="group"] {
    flex-wrap: wrap;
  }
  .btn-group[role="group"] .btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
  }

  /* Table mobile helper: hide columns marked with .d-mobile-none */
  .d-mobile-none {
    display: none !important;
  }
}

/* Small mobile (max-width: 576px) */
@media (max-width: 576px) {
  /* Even tighter spacing */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Stats cards text */
  .stat-card h3,
  .stats-icon + .flex-grow-1 h3 {
    font-size: 1.3rem;
  }

  /* Table text even smaller */
  .table-responsive {
    font-size: 0.75rem;
  }

  /* Navbar brand */
  .navbar-brand {
    font-size: 1rem;
  }

  /* Button text - hide on very small screens when icon present */
  .btn-mobile-icon .btn-text {
    display: none;
  }
}

/* Print styles */
@media print {
  .navbar,
  .footer,
  .btn,
  .pagination {
    display: none !important;
  }

  .card {
    border: 1px solid #dee2e6 !important;
    box-shadow: none !important;
  }
}

/* ============================================
   DARK MODE OVERRIDES
   Bootstrap 5.3 data-bs-theme="dark" handles most
   colors automatically. These overrides cover our
   custom styles and fine-tune the dark experience.
   ============================================ */

[data-bs-theme="dark"] {
  --primary-color: #4d9fff;
  --secondary-color: #9ca3af;
  --bs-body-bg: #1a1d21;
  --bs-tertiary-bg: #2b3035;
}

[data-bs-theme="dark"] body {
  background-color: #1a1d21;
}

/* Navbar - darker primary in dark mode */
[data-bs-theme="dark"] .navbar.bg-primary {
  background-color: #1a3a5c !important;
}

/* Cards */
[data-bs-theme="dark"] .card {
  background-color: #212529;
  border-color: #2d3338;
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .card-header.bg-transparent {
  border-bottom-color: #2d3338;
}

/* Tables */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: #dee2e6;
  --bs-table-border-color: #2d3338;
}

[data-bs-theme="dark"] .table th {
  color: #9ca3af;
}

[data-bs-theme="dark"] .opportunity-row:hover,
[data-bs-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(77, 159, 255, 0.08) !important;
}

/* Forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #2b3035;
  border-color: #3d4349;
  color: #dee2e6;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #2b3035;
  border-color: #4d9fff;
  box-shadow: 0 0 0 0.2rem rgba(77, 159, 255, 0.2);
  color: #dee2e6;
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled {
  background-color: #1e2226;
  color: #9ca3af;
}

[data-bs-theme="dark"] .form-check-input {
  background-color: #2b3035;
  border-color: #3d4349;
}

/* Dropdowns */
[data-bs-theme="dark"] .dropdown-menu {
  background-color: #212529;
  border-color: #2d3338;
}

[data-bs-theme="dark"] .dropdown-item {
  color: #dee2e6;
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: #2b3035;
  color: #fff;
}

[data-bs-theme="dark"] .dropdown-divider {
  border-color: #2d3338;
}

/* Footer */
[data-bs-theme="dark"] .footer.bg-light {
  background-color: #212529 !important;
  border-top-color: #2d3338;
}

/* Hero section */
[data-bs-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #1a1d21 0%, #212529 100%);
}

[data-bs-theme="dark"] .hero-graphic {
  background: linear-gradient(135deg, rgba(77, 159, 255, 0.15) 0%, rgba(77, 159, 255, 0.05) 100%);
}

/* Alerts */
[data-bs-theme="dark"] .alert-success {
  background-color: rgba(25, 135, 84, 0.15);
  color: #75d5a3;
  border: 1px solid rgba(25, 135, 84, 0.3);
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(220, 53, 69, 0.15);
  color: #f1959e;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

[data-bs-theme="dark"] .alert-warning {
  background-color: rgba(255, 193, 7, 0.15);
  color: #ffda6a;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

[data-bs-theme="dark"] .alert-info {
  background-color: rgba(13, 202, 240, 0.15);
  color: #6edff6;
  border: 1px solid rgba(13, 202, 240, 0.3);
}

/* Background utility overrides */
[data-bs-theme="dark"] .bg-light {
  background-color: #2b3035 !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: #212529 !important;
}

/* Text muted - slightly brighter in dark mode */
[data-bs-theme="dark"] .text-muted {
  color: #8b929a !important;
}

[data-bs-theme="dark"] .text-dark {
  color: #dee2e6 !important;
}

/* Borders */
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top {
  border-color: #2d3338 !important;
}

[data-bs-theme="dark"] .border-dashed {
  border-color: #3d4349 !important;
}

/* Modals */
[data-bs-theme="dark"] .modal-content {
  background-color: #212529;
  border-color: #2d3338;
}

[data-bs-theme="dark"] .modal-header {
  border-bottom-color: #2d3338;
}

[data-bs-theme="dark"] .modal-footer {
  border-top-color: #2d3338;
}

/* Pagination */
[data-bs-theme="dark"] .page-link {
  background-color: #212529;
  border-color: #2d3338;
  color: #dee2e6;
}

[data-bs-theme="dark"] .page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Badges - ensure readability */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: #2b3035 !important;
  color: #dee2e6 !important;
}

/* Progress bars */
[data-bs-theme="dark"] .progress {
  background-color: #2b3035;
}

/* List group */
[data-bs-theme="dark"] .list-group-item {
  background-color: #212529;
  border-color: #2d3338;
  color: #dee2e6;
}

[data-bs-theme="dark"] .list-group-item:hover,
[data-bs-theme="dark"] .follow-up-item:hover {
  background-color: #2b3035;
}

/* Accordion */
[data-bs-theme="dark"] .accordion-item {
  background-color: #212529;
  border-color: #2d3338;
}

[data-bs-theme="dark"] .accordion-button {
  background-color: #212529;
  color: #dee2e6;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: #2b3035;
  color: #4d9fff;
}

/* Breadcrumb */
[data-bs-theme="dark"] .breadcrumb-item a {
  color: #4d9fff;
}

[data-bs-theme="dark"] .breadcrumb-item.active {
  color: #9ca3af;
}

/* Stats cards with colored backgrounds */
[data-bs-theme="dark"] .bg-primary.bg-opacity-10 {
  background-color: rgba(77, 159, 255, 0.15) !important;
}

[data-bs-theme="dark"] .bg-success.bg-opacity-10 {
  background-color: rgba(25, 135, 84, 0.15) !important;
}

[data-bs-theme="dark"] .bg-warning.bg-opacity-10 {
  background-color: rgba(255, 193, 7, 0.15) !important;
}

[data-bs-theme="dark"] .bg-danger.bg-opacity-10 {
  background-color: rgba(220, 53, 69, 0.15) !important;
}

[data-bs-theme="dark"] .bg-info.bg-opacity-10 {
  background-color: rgba(13, 202, 240, 0.15) !important;
}

/* Shadow adjustments */
[data-bs-theme="dark"] .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

/* Multi-select dropdowns (contract detail page) */
[data-bs-theme="dark"] .multi-select-dropdown {
  background-color: #2b3035;
  border-color: #3d4349;
}

[data-bs-theme="dark"] .multi-select-tags .badge {
  background-color: #1a3a5c !important;
  color: #8bbdff !important;
}

/* Smooth transition when toggling */
body,
.card,
.navbar,
.footer,
.modal-content,
.form-control,
.form-select,
.table,
.dropdown-menu,
.list-group-item {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Loading state */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* ============================================
   Wide-table horizontal scrolling
   ============================================
   Mirror scrollbar (created by initTableTopScroll in app.js) shown directly
   above wide tables so left/right scrolling is reachable without scrolling to
   the bottom of a tall table. */
.table-topscroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.table-topscroll-inner {
  height: 1px;
}

/* Force a classic, always-visible horizontal scrollbar on the table wrapper
   and its top mirror (WebKit/Blink hide overlay scrollbars until scrolling,
   which makes the "you can scroll" affordance easy to miss). */
.table-responsive::-webkit-scrollbar,
.table-topscroll::-webkit-scrollbar {
  height: 10px;
  -webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar-thumb,
.table-topscroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 5px;
}
[data-bs-theme="dark"] .table-responsive::-webkit-scrollbar-thumb,
[data-bs-theme="dark"] .table-topscroll::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
}
/* Firefox: keep the scrollbar visible and slim. */
.table-responsive,
.table-topscroll {
  scrollbar-width: thin;
}