/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pipedrive-inspired brand palette */
:root {
  --pd-hero-bg: #dff3df;            /* soft green background */
  --pd-hero-text: #0b5f34;          /* dark green headings */
  --pd-brand-green: #0a7a3a;        /* navbar green */
  --pd-cta: #665ff2;                /* primary CTA */
  --pd-cta-hover: #584cf4;          /* primary CTA hover */
  --pd-secondary-cta-bg: #e7e4ff;   /* secondary CTA background */
  --pd-secondary-cta-text: #4747ff; /* secondary CTA text */
}

/* Global */
body {
  background: var(--pd-hero-bg);
  overflow-x: hidden; /* prevent horizontal scrollbar */
}

/* Removed container overflow rule to avoid breaking navbar widths */

/* Removed global .row margin reset to preserve Bootstrap gutters and alignment */

/* Constrain page width to avoid horizontal scroll due to row gutters */
.page-container {
  max-width: 100%;
  overflow-x: hidden;
}

h1, h2, h3 {
  color: var(--pd-hero-text);
}

/* Keep existing class but make it match our hero */
.bg-light {
  background-color: var(--pd-hero-bg) !important;
}

/* Navbar */
.navbar.bg-dark {
  background-color: var(--pd-brand-green) !important;
}

/* Buttons */
.btn-primary {
  background-color: var(--pd-cta);
  border-color: var(--pd-cta);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--pd-cta-hover);
  border-color: var(--pd-cta-hover);
}

.btn-secondary {
  background-color: var(--pd-secondary-cta-bg);
  border-color: var(--pd-secondary-cta-bg);
  color: var(--pd-secondary-cta-text);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #d7d3ff;
  border-color: #d7d3ff;
  color: var(--pd-secondary-cta-text);
}

/* Links */
a {
  color: var(--pd-secondary-cta-text);
}

a:hover {
  color: #2e2eff;
}


/* Click-to-copy affordance */
[data-controller="copy"] {
  cursor: pointer;
}

/* Compact Filters card styling */
.filters-compact .card-header {
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
}
.filters-compact .card-body {
  padding: 0.5rem 0.6rem;
}
.filters-compact .form-text,
.filters-compact .form-label {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}
.filters-compact .btn-group .btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
}
.filters-compact .btn-group { flex-wrap: wrap; }

/* breathing room at bottom */
.page-bottom-spacer { height: 3rem; }


/* Utility heights for charts/spacers to avoid inline styles (CSP-safe) */
.chart-180 { height: 180px; }
.spacer-64 { height: 64px; }

/* CSP-safe utilities used in Pipedrive settings */
.query-textarea {
  min-height: 520px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.w-24rem { width: 24rem; }

.pb-4rem { padding-bottom: 4rem; }