/*
 * Aussie Bucket List brand theme for the authenticated app (dashboard) area.
 * A thin layer over Bootstrap 5.3 that recolours and restyles its components
 * with the ABL design tokens, so the existing Bootstrap markup on the internal
 * pages matches the marketing site. Loaded after bootstrap.min.css.
 */
@import url('abl-tokens.css');

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  color: var(--text-body);
  background: var(--surface-alt);
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  color: var(--text-strong);
  letter-spacing: -.01em;
}

main a:not(.btn):not(.nav-link):not(.page-link) { color: var(--abl-pink); }
main a:not(.btn):not(.nav-link):not(.page-link):hover { color: var(--abl-pink-700); }

.text-muted { color: var(--text-muted) !important; }

/* App page frame: give the content room to breathe under the sticky header. */
main[role="main"] { padding: 32px 0 64px; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: var(--fw-black);
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-padding-x: 1.25rem;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn-sm { --bs-btn-border-radius: var(--radius-pill); }
.btn-lg { --bs-btn-border-radius: var(--radius-pill); }

.btn-primary {
  --bs-btn-bg: var(--abl-pink);
  --bs-btn-border-color: var(--abl-pink);
  --bs-btn-hover-bg: var(--abl-pink-600);
  --bs-btn-hover-border-color: var(--abl-pink-600);
  --bs-btn-active-bg: var(--abl-pink-700);
  --bs-btn-active-border-color: var(--abl-pink-700);
  --bs-btn-disabled-bg: var(--abl-pink);
  --bs-btn-disabled-border-color: var(--abl-pink);
  --bs-btn-focus-shadow-rgb: 218, 33, 95;
}

.btn-outline-primary {
  --bs-btn-color: var(--abl-pink);
  --bs-btn-border-color: var(--abl-pink);
  --bs-btn-hover-bg: var(--abl-pink);
  --bs-btn-hover-border-color: var(--abl-pink);
  --bs-btn-active-bg: var(--abl-pink-600);
  --bs-btn-active-border-color: var(--abl-pink-600);
  --bs-btn-focus-shadow-rgb: 218, 33, 95;
}

.btn-secondary {
  --bs-btn-bg: var(--abl-blue);
  --bs-btn-border-color: var(--abl-blue);
  --bs-btn-hover-bg: var(--abl-blue-600);
  --bs-btn-hover-border-color: var(--abl-blue-600);
  --bs-btn-active-bg: var(--abl-blue-600);
  --bs-btn-active-border-color: var(--abl-blue-600);
  --bs-btn-focus-shadow-rgb: 0, 174, 239;
}

.btn-outline-secondary {
  --bs-btn-color: var(--text-strong);
  --bs-btn-border-color: var(--border-default);
  --bs-btn-hover-bg: var(--surface-alt);
  --bs-btn-hover-color: var(--text-strong);
  --bs-btn-hover-border-color: var(--border-default);
  --bs-btn-active-bg: var(--abl-grey-200);
  --bs-btn-active-color: var(--text-strong);
  --bs-btn-active-border-color: var(--border-default);
}

.btn-success { --bs-btn-bg: var(--abl-success); --bs-btn-border-color: var(--abl-success); --bs-btn-hover-bg: #6e9018; --bs-btn-hover-border-color: #6e9018; }
.btn-danger { --bs-btn-bg: var(--abl-danger); --bs-btn-border-color: var(--abl-danger); --bs-btn-hover-bg: var(--abl-pink-700); --bs-btn-hover-border-color: var(--abl-pink-700); }

/* ---------- Cards ---------- */
.card {
  --bs-card-border-color: var(--border-subtle);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
  --bs-card-cap-bg: var(--surface-card);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card-title { font-weight: var(--fw-black); }

/* ---------- Forms ---------- */
.form-label { font-weight: var(--fw-bold); color: var(--text-strong); margin-bottom: .35rem; }
.form-control, .form-select {
  border-color: var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
}
.form-control:focus, .form-select:focus {
  border-color: var(--abl-pink);
  box-shadow: 0 0 0 .2rem var(--abl-pink-100);
}
.form-check-input:checked { background-color: var(--abl-pink); border-color: var(--abl-pink); }
.form-check-input:focus { border-color: var(--abl-pink); box-shadow: 0 0 0 .2rem var(--abl-pink-100); }
.form-text { color: var(--text-muted); }

/* ---------- Badges ---------- */
.badge { font-weight: var(--fw-black); border-radius: var(--radius-pill); letter-spacing: .02em; }
.badge.bg-light { background: var(--surface-alt) !important; color: var(--text-body) !important; border-color: var(--border-subtle) !important; }

/* ---------- Alerts ---------- */
.alert { --bs-alert-border-radius: var(--radius-md); border-radius: var(--radius-md); }
.alert-success {
  --bs-alert-color: #4d6310;
  --bs-alert-bg: var(--abl-lime-100);
  --bs-alert-border-color: #d8e79a;
}
.alert-warning {
  --bs-alert-color: #8a5600;
  --bs-alert-bg: var(--abl-orange-100);
  --bs-alert-border-color: #f6dca3;
}
.alert-danger {
  --bs-alert-color: var(--abl-pink-700);
  --bs-alert-bg: var(--abl-pink-100);
  --bs-alert-border-color: #f3c2d3;
}
.alert-info {
  --bs-alert-color: var(--abl-blue-600);
  --bs-alert-bg: var(--abl-blue-100);
  --bs-alert-border-color: #b9e8fb;
}

/* ---------- Tables ---------- */
.table { --bs-table-border-color: var(--border-subtle); }
.table > thead {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}

/* ---------- Nav / pills / tabs ---------- */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--abl-pink);
  --bs-nav-pills-border-radius: var(--radius-pill);
}
.nav-pills .nav-link { color: var(--text-body); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--abl-pink); }
.page-link { color: var(--abl-pink); }
.page-item.active .page-link { background: var(--abl-pink); border-color: var(--abl-pink); }

/* ---------- Validation ---------- */
.text-danger { color: var(--abl-danger) !important; }

/* ---------- App shell: header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: var(--shadow-header);
}
.app-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px 24px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.app-header__brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
.app-header__brand img { height: 34px; width: auto; display: block; }
.app-header__rule { width: 1px; height: 26px; background: var(--border-default); }
.app-header__wordmark { font-size: 19px; font-weight: var(--fw-black); color: var(--text-strong); letter-spacing: -.01em; white-space: nowrap; }

.app-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.app-nav__link { font-size: 15px; font-weight: var(--fw-bold); color: var(--text-strong); text-decoration: none; white-space: nowrap; }
.app-nav__link:hover { color: var(--abl-pink); }
.app-nav__user { font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.app-nav form { margin: 0; }

/* ---------- App shell: footer ---------- */
.app-footer { background: #fff; border-top: 1px solid var(--border-subtle); margin-top: 48px; }
.app-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--text-muted);
}
.app-footer__inner a { color: var(--text-muted); text-decoration: none; }
.app-footer__inner a:hover { color: var(--abl-pink); }