/* ===== Great Clips Brand Palette ===== */
:root {
  --gc-jade: #048667;
  --gc-lime: #9acb3a;
  --gc-emerald: #089f45;
  --gc-sky: #bee5e6;
  --gc-mint: #ddf3c5;
  --gc-orange: #cb4e13;
  --gc-dark-green: #073b3a;
  --gc-gray: #f2f2f2;
  --bs-primary: var(--gc-jade);
  --bs-primary-rgb: 4, 134, 103;
}

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

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin-bottom: 60px;
  background: var(--gc-gray);
}

/* ===== Bootstrap Overrides ===== */
.btn-primary       { background-color: var(--gc-jade); border-color: var(--gc-jade); }
.btn-primary:hover  { background-color: var(--gc-dark-green); border-color: var(--gc-dark-green); }
.btn-primary:focus  { background-color: var(--gc-jade); border-color: var(--gc-jade); box-shadow: 0 0 0 .25rem rgba(4,134,103,.4); }

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

.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 rgba(4,134,103,.4);
}

.badge.bg-success { background-color: var(--gc-emerald) !important; }
a { color: var(--gc-jade); }
a:hover { color: var(--gc-dark-green); }

/* Navbar */
.navbar-brand { font-weight: 600; color: var(--gc-dark-green) !important; }
.navbar { background-color: #fff !important; }

/* ===== Tabbed Builder Page ===== */
.builder-tabs .nav-link {
  color: var(--gc-dark-green);
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: .75rem 1.25rem;
}
.builder-tabs .nav-link:hover {
  color: var(--gc-jade);
  border-bottom-color: var(--gc-sky);
}
.builder-tabs .nav-link.active {
  color: var(--gc-jade);
  background: transparent;
  border-bottom-color: var(--gc-jade);
}

/* Card styling */
.card { border-color: #dee2e6; }
.card-header { background-color: var(--gc-gray); }

/* Dashboard cards */
.form-card { transition: box-shadow .15s, transform .15s; border: 1px solid #dee2e6; }
.form-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); }

/* Footer */
.footer { background: var(--gc-dark-green); color: rgba(255,255,255,.7); }
.footer a { color: var(--gc-sky); }

.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;
}