/* Shared visual rules. Load after component and page styles. */

html {
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-body);
  color: var(--color-heading);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--line-height-heading);
}

h1, .h1 { font-size: var(--font-size-2xl); }
h2, .h2 { font-size: var(--font-size-xl); }
h3, .h3 { font-size: var(--font-size-lg); }
h4, .h4 { font-size: var(--font-size-md); }
h5, .h5, h6, .h6 { font-size: var(--font-size-sm); }

.page-header h1 {
  font-family: var(--font-body);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.login-tagline,
.landing-brand h1,
.landing-brand p,
.landing-hero h2,
.landing-hero h3 {
  font-family: var(--font-body);
  letter-spacing: 0;
}

.landing-brand h1 { font-size: var(--font-size-2xl); }
.landing-hero h2 { font-size: 2.5rem; }
.landing-hero h3 { font-size: var(--font-size-lg); }

.btn,
button.btn,
a.btn {
  min-height: var(--button-height);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-sm,
button.btn-sm,
a.btn-sm {
  min-height: var(--button-height);
  padding: 0.25rem 0.625rem;
  font-size: var(--font-size-sm);
}

.btn-lg,
button.btn-lg,
a.btn-lg {
  min-height: var(--button-height);
  padding: 0.25rem 0.625rem;
  font-size: var(--font-size-sm);
}

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

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

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

.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
button:not(.btn):focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.form-control,
.form-select,
.filter-search-input,
.filter-select {
  min-height: var(--control-height);
  border-radius: var(--radius-control);
  border-color: var(--color-border-strong);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

textarea.form-control {
  min-height: 6rem;
}

.form-label {
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.card,
.kpi-card,
.portfolio-card,
.login-card,
.landing-hero,
.landing-card,
.landing-footer,
.topbar-dropdown,
.search-results,
.ir-toast {
  border-radius: var(--radius-card);
}

.card-header {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.table {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.table th {
  padding: 0.625rem 0.75rem;
  color: var(--color-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.table td {
  padding: 0.625rem 0.75rem;
}

.badge {
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0;
}

/* One shared action-button appearance; Bootstrap variant classes do not restyle controls. */
.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)),
a.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)),
.db-dark .btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)),
body.page-dashboard .btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)) {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):hover,
.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):focus,
a.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):hover,
a.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):focus,
.db-dark .btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):hover,
.db-dark .btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):focus,
body.page-dashboard .btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):hover,
body.page-dashboard .btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):focus {
  color: #fff;
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)):disabled,
.btn:not(.btn-close):not(:has(> i:only-child, > svg:only-child)).disabled {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}