/* FATMETAL design system applied over Bootstrap.
   Tokens: ~/css/tokens.css (loaded before this file). Only tokens are used —
   no ad-hoc colors/radii/fonts here. */

html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background-color: var(--surface-base);
  color: var(--ink-500);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.15;
}
h3, h4 { font-weight: 600; }
h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (max-width: 1279px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.875rem; }
}
@media (max-width: 767px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }
}

small, .small, .text-muted { color: var(--ink-400) !important; }

a { color: var(--brand-500); }
a:hover { color: var(--brand-600); }

/* Focus ring — brand, replaces Bootstrap's default blue */
.btn:focus-visible, .btn:active:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: var(--shadow-focus) !important;
  outline: none;
  border-color: var(--brand-500);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.btn-sm { border-radius: var(--radius-sm); }

.btn-primary {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.btn-primary:active {
  background-color: var(--brand-700) !important;
  border-color: var(--brand-700) !important;
}
.btn-primary:disabled {
  background-color: var(--brand-300);
  border-color: var(--brand-300);
  color: rgba(255,255,255,.7);
}

.btn-secondary, .btn-outline-secondary {
  background-color: #fff;
  border-color: var(--border-default);
  color: var(--ink-900);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
  background-color: var(--surface-hover);
  border-color: var(--border-default);
  color: var(--ink-900);
}
.btn-secondary:active, .btn-outline-secondary:active {
  background-color: #D9DBE6 !important;
  border-color: var(--border-default) !important;
  color: var(--ink-900) !important;
}

.btn-outline-primary { color: var(--brand-500); border-color: var(--brand-500); }
.btn-outline-primary:hover { background-color: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.btn-outline-primary:active { background-color: var(--brand-700) !important; border-color: var(--brand-700) !important; }

.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); }

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

.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background-color: var(--success); border-color: var(--success); }

.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); color: #fff; }

.btn-link { color: var(--brand-500); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--brand-600); text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-body { padding: var(--space-5); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  height: 40px;
  padding: 0 14px;
  background-color: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--ink-900);
  transition: all var(--transition);
}
textarea.form-control { height: auto; padding: 10px 14px; }
.form-control::placeholder { color: var(--ink-400); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface-hover); color: var(--ink-300); }

/* Kill the browser's autofill tint/font override (Chrome/Edge) so autofilled fields
   don't jump in size/color the moment they're focused or edited. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink-900);
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  caret-color: var(--ink-900);
  font-family: var(--font);
  font-size: 1rem;
  transition: background-color 600000s ease-in-out 0s;
}
.form-control.is-invalid, .is-invalid .form-control { border-color: var(--danger); }
.form-label { font-weight: 600; font-size: .875rem; color: var(--ink-700); margin-bottom: 8px; }
.form-text { color: var(--ink-400); font-size: .875rem; }
.form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }

/* ---------- Tables ---------- */
.table { color: var(--ink-700); }
.table > thead {
  font: 700 .75rem var(--font);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-400);
}
.table > :not(caption) > * > * { border-bottom-color: var(--border-default); }
.table-hover > tbody > tr:hover > * { background-color: var(--surface-hover); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--surface-hover); --bs-table-accent-bg: transparent; }

/* ---------- Badges ---------- */
.badge { border-radius: var(--radius-pill); font-weight: 600; padding: .35em .75em; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-secondary { background-color: var(--ink-400) !important; }
.bg-primary { background-color: var(--brand-500) !important; }
.bg-info { background-color: var(--info) !important; }

/* ---------- Alerts ---------- */
.alert { border: 1px solid transparent; border-radius: var(--radius-md); }
.alert-success { background-color: #EAF7F1; border-color: var(--success); color: #1E6B49; }
.alert-danger { background-color: #FBEAEA; border-color: var(--danger); color: #8F3232; }
.alert-warning { background-color: #FCF3E3; border-color: var(--warning); color: #8A6420; }
.alert-info { background-color: #EAF1FB; border-color: var(--info); color: #2E568F; }

/* ---------- App shell ---------- */
.sidebar {
  background-color: var(--ink-900) !important;
  box-shadow: var(--shadow-md);
}
.sidebar-brand { padding: .25rem 0 1rem; }
.sidebar-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--radius-pill);
  background-color: var(--brand-500);
  color: #fff; font-weight: 700; font-size: 1.1rem;
}
.sidebar-brand-text {
  font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: .01em;
}
.sidebar .nav-link {
  color: rgba(255,255,255,.8) !important;
  padding: .6rem 1rem;
  border-radius: var(--radius-md);
  transition: background-color var(--transition), color var(--transition);
}
.sidebar .nav-link:hover { background-color: rgba(255,255,255,.08); color: #fff !important; }
.sidebar .nav-link.active, .sidebar .nav-link[aria-current="page"] {
  background-color: var(--brand-500);
  color: #fff !important;
}
.sidebar hr { border-color: rgba(255,255,255,.12); }
.sidebar .text-white-50:hover { color: #fff !important; }

header.border-bottom, footer.border-top { border-color: var(--border-default) !important; }
main { background-color: var(--surface-base); }

/* Main content headings/body per type scale */
main h1 { font-size: 2rem; }   /* page titles use h3-equivalent scale for density */
main .h3 { font-size: 1.5rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }