/* ============================================
   TYPOGRAPHY SYSTEM - RealCRM
   Based on research from USWDS, Atlassian, Carbon
   ============================================ */

/* Active nav-link indicator */
.navbar-dark .nav-link.active,
.navbar-dark .nav-link.fw-semibold.active {
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    padding-bottom: calc(0.5rem - 2px);
}

:root {
  /* Font Families */
  --font-family-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: Consolas, Menlo, Monaco, "Courier New", monospace;

  /* Font Sizes (rem-based for accessibility) */
  --font-size-caption: 0.75rem;      /* 12px - labels, meta */
  --font-size-body-ui: 0.875rem;     /* 14px - tables, forms, dense UI */
  --font-size-body-reading: 1rem;    /* 16px - notes, descriptions */
  --font-size-h6: 1rem;              /* 16px */
  --font-size-h5: 1.125rem;          /* 18px */
  --font-size-h4: 1.25rem;           /* 20px */
  --font-size-h3: 1.5rem;            /* 24px */
  --font-size-h2: 1.75rem;           /* 28px */
  --font-size-h1: 2rem;              /* 32px */

  /* Line Heights */
  --line-height-tight: 1.25;         /* Compact UI elements */
  --line-height-ui: 1.45;            /* Default UI text */
  --line-height-reading: 1.6;        /* Long-form content */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Length (for readability) */
  --line-length-optimal: 75ch;      /* Optimal reading width */
  --line-length-max: 90ch;          /* Maximum comfortable width */
}

/* Base Typography */
html {
  font-size: 16px; /* Root for rem calculations */
  height: 100%;
}

body {
  font-family: var(--font-family-ui);
  font-size: var(--font-size-body-ui);
  line-height: var(--line-height-ui);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

/* Main content area - pushes footer down */
main {
  flex: 1 0 auto;
  padding-bottom: 2rem;
}

/* Footer stays at bottom with minimal height */
.footer {
  flex-shrink: 0;
  padding: 0.75rem 0;
  background-color: #f8f9fa;
  margin-top: auto;
}

.footer .container {
  text-align: center;
}

/* Heading Styles */
h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: 1rem;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: 0.875rem;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: 0.75rem;
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-ui);
  margin-bottom: 0.625rem;
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-ui);
  margin-bottom: 0.5rem;
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-ui);
  margin-bottom: 0.5rem;
}

/* Typography Utility Classes */

/* Reading text - for long-form content (notes, descriptions) */
.reading-text,
.text-reading {
  font-size: var(--font-size-body-reading);
  line-height: var(--line-height-reading);
  max-width: var(--line-length-optimal);
}

/* Caption/meta text */
.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-ui);
}

/* Monospace for code/IDs */
.text-mono {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
}

/* Tabular numbers - CRITICAL for CRM data */
.num,
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Numeric columns in tables */
.table td.num,
.table th.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Apply to currency, scores, dates, counts */
.currency,
.score,
.count,
.stat-value {
  font-variant-numeric: tabular-nums;
}

/* Text truncation utility */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* WCAG Text Spacing Support */
* {
  /* Allow user text-spacing overrides without breaking layout */
  line-height: inherit;
}

p {
  margin-bottom: 1rem;
}

/* ============================================
   FOCUS & ACCESSIBILITY
   ============================================ */

/* ============================================
   FOCUS & ACCESSIBILITY
   ============================================ */

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================
   TABLE ENHANCEMENTS - Clickable Names
   ============================================ */

/* Make table row names look clickable with smooth transitions */
.table td a.text-primary {
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-size: var(--font-size-body-ui);
}

.table td a.text-primary:hover {
  color: #0056b3 !important;
  text-decoration: underline !important;
  transform: translateX(2px);
}

/* Add a subtle background highlight on hover for the entire row */
.table-hover tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.05);
  cursor: pointer;
}

/* Table Typography */
.table {
  font-size: var(--font-size-body-ui);
  line-height: var(--line-height-ui);
}

.table thead th {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-caption);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Numeric table columns */
.table td.currency,
.table td.score,
.table td.count {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: var(--font-weight-medium);
}

/* Enhance the avatar circle on hover */
.avatar-circle {
  transition: all 0.2s ease-in-out;
}

.table-hover tbody tr:hover .avatar-circle {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ============================================
   CARD & COMPONENT TYPOGRAPHY
   ============================================ */

.card-title {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.card-subtitle {
  font-size: var(--font-size-body-ui);
  font-weight: var(--font-weight-normal);
  color: #6c757d;
}

.card-text {
  font-size: var(--font-size-body-ui);
  line-height: var(--line-height-ui);
}

/* Card spacing */
.card {
  margin-bottom: 1rem;
}

.card:last-child {
  margin-bottom: 0;
}

/* Stat cards */
.stat-value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.stat-label {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
}

/* ============================================
   PAGE LAYOUT & SPACING
   ============================================ */

/* Ensure consistent column heights */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Container spacing */
.container-fluid {
  padding-bottom: 1rem;
}

/* Remove excessive bottom margins from last elements */
.card:last-child,
.row:last-child,
.col:last-child > *:last-child {
  margin-bottom: 0 !important;
}

/* ============================================
   FORM TYPOGRAPHY
   ============================================ */

label, .form-label {
  font-size: var(--font-size-body-ui);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.375rem;
}

.form-text {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-ui);
}

.form-control, .form-select {
  font-size: var(--font-size-body-ui);
  line-height: var(--line-height-ui);
}

/* ============================================
   BADGE & PILL TYPOGRAPHY
   ============================================ */

.badge {
  font-size: 0.75em;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.025em;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ============================================ */

@media (max-width: 767px) {
  /* Slightly larger text on mobile for readability */
  body {
    font-size: var(--font-size-body-reading);
  }

  h1, .h1 {
    font-size: 1.75rem;
  }

  h2, .h2 {
    font-size: 1.5rem;
  }

  .stat-value {
    font-size: var(--font-size-h3);
  }
}