/*
 * typography.css
 * Global font configuration for Enterprise CRM
 * Uses Comfortaa as the primary font family across the entire application
 */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* Global font family configuration */
:root {
  --app-font-family: 'Comfortaa', 'Public Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Apply global font to all elements */
html,
body,
* {
  font-family: var(--app-font-family) !important;
}

/* Ensure Bootstrap elements inherit the font */
.btn,
.form-control,
.form-select,
.navbar,
.sidebar,
.menu,
.dropdown-menu,
.modal-content,
.alert,
.card,
.table,
.badge,
.toast,
input,
textarea,
select,
label {
  font-family: var(--app-font-family) !important;
}

/* Authentication pages branding */
.app-brand-text {
  font-family: var(--app-font-family) !important;
}

/* Table header consistent styling */
thead th {
  text-transform: uppercase !important;
  white-space: nowrap !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.2px !important;
  font-weight: 600 !important;
}

/* Flush table with card edges — remove card-body padding when it wraps only a table */
.card > .card-body:has(> .table-responsive) {
  padding: 0 !important;
}
.card > .card-body:has(> .table-responsive) > :not(.table-responsive) {
  padding: 1.5rem;
}

/* Board filter bar — equalise height of text input and Choices.js select wrappers */
#filterBar .choices__inner {
  min-height: 30px !important;
  height: 30px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
}
#filterBar .choices {
  margin-bottom: 0 !important;
}

/* Cancel / Clear / Close buttons — grey outline + grey text, transparent background always */
.btn-outline-secondary,
.btn-label-secondary,
.btn-secondary {
  color: #8592a3 !important;
  background-color: transparent !important;
  border-color: #8592a3 !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-label-secondary:hover,
.btn-label-secondary:focus,
.btn-label-secondary:active,
.btn-label-secondary.active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
  color: #8592a3 !important;
  background-color: transparent !important;
  border-color: #8592a3 !important;
  box-shadow: none !important;
}

/* Default fallback for any other text elements */
p,
span,
div,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--app-font-family) !important;
}