/* ==========================================================================
   Terroir — Bootstrap compatibility layer
   --------------------------------------------------------------------------
   The ASP.NET Identity scaffold (Login/Register/Manage/…) and a few app pages
   ship Bootstrap utility/markup classes (.row, .col-*, .form-floating,
   .form-control, .btn .btn-primary, .alert, .text-danger, spacing helpers, …).
   This app no longer loads Bootstrap, so those classes would render unstyled.

   Rather than rewrite ~24 templates, we re-implement the SUBSET the app actually
   uses, mapped onto Terroir tokens. These class-based selectors are Bootstrap-named
   and do not collide with the UI component library's own classes; bare-element
   typography is scoped under `.page` so it can't leak into component overlays
   (dialogs render at the body root).
   Loaded AFTER app.css so `var(--brand)` (+ tenant accent) is available.
   ========================================================================== */

/* ----- Grid (flex fallback for .row / .col-*) --------------------------- */
.container { width: 100%; max-width: 1100px; margin-inline: auto; }
.container-fluid { width: 100%; }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0; }
.row > .col,
.row > [class*="col-"] { flex: 1 1 0; min-width: min(100%, 280px); }
.col-auto { flex: 0 0 auto; }

/* ----- Display & flex utilities ----------------------------------------- */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-baseline { align-items: baseline !important; }
.align-baseline { vertical-align: baseline !important; }
.align-self-center { align-self: center !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }

/* ----- Spacing (Bootstrap scale 0–5 → 0/.25/.5/1/1.5/3rem) -------------- */
.m-0 { margin: 0 !important; }            .p-0 { padding: 0 !important; }
.m-1 { margin: .25rem !important; }       .p-1 { padding: .25rem !important; }
.m-2 { margin: .5rem !important; }        .p-2 { padding: .5rem !important; }
.m-3 { margin: 1rem !important; }         .p-3 { padding: 1rem !important; }
.m-4 { margin: 1.5rem !important; }       .p-4 { padding: 1.5rem !important; }
.m-5 { margin: 3rem !important; }         .p-5 { padding: 3rem !important; }

.mt-0 { margin-top: 0 !important; }       .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .25rem !important; }  .mb-1 { margin-bottom: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }   .mb-2 { margin-bottom: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }    .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }  .mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }    .mb-5 { margin-bottom: 3rem !important; }

.ms-0 { margin-left: 0 !important; }      .me-0 { margin-right: 0 !important; }
.ms-1 { margin-left: .25rem !important; } .me-1 { margin-right: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }  .me-2 { margin-right: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }   .me-3 { margin-right: 1rem !important; }

.my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; }

.pt-1 { padding-top: .25rem !important; } .pb-1 { padding-bottom: .25rem !important; }
.pt-2 { padding-top: .5rem !important; }  .pb-2 { padding-bottom: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }   .pb-3 { padding-bottom: 1rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }

.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }

/* ----- Text helpers ----------------------------------------------------- */
.text-danger { color: var(--wine) !important; }
.text-success { color: var(--pine) !important; }
.text-warning { color: var(--wheat-deep) !important; }
.text-muted, .text-secondary { color: var(--ink-3) !important; }
.text-body { color: var(--ink) !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fst-italic { font-style: italic !important; }
.small { font-size: var(--t--1) !important; }
.lead { font-size: var(--t-1); color: var(--ink-2); }
.text-decoration-none { text-decoration: none !important; }

/* ----- Bare-element typography (scoped to page content) ----------------- */
.page h1, .page h2, .page h3, .page h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
.page h1 { font-size: var(--t-3); }
.page h2 { font-size: var(--t-2); }
.page h3 { font-size: var(--t-1); }
.page h4 { font-size: var(--t-0); font-family: var(--sans); font-weight: 600; }
.page hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-3) 0; }
.page p a, .page li a, .page label a { color: var(--pine); text-decoration: underline; text-underline-offset: 2px; }
.page p a:hover, .page li a:hover, .page label a:hover { color: var(--ink); }

/* ----- Buttons (compose on Terroir .btn base) --------------------------- */
.btn-primary { background: var(--brand); color: var(--brand-contrast); box-shadow: var(--sh-1); }
.btn-primary:hover { filter: brightness(.95); box-shadow: var(--sh-2); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.btn-secondary:hover { border-color: var(--pine); color: var(--pine); background: var(--pine-tint); }
.btn-success { background: var(--pine); color: var(--on-pine); box-shadow: var(--sh-1); }
.btn-success:hover { filter: brightness(1.05); }
.btn-danger { background: var(--wine); color: oklch(0.97 0.02 30); box-shadow: var(--sh-1); }
.btn-danger:hover { filter: brightness(1.06); }
.btn-outline-primary { background: none; border-color: var(--pine); color: var(--pine); }
.btn-outline-primary:hover { background: var(--pine-tint); }
.btn-outline-secondary { background: none; border-color: var(--line); color: var(--ink-2); }
.btn-outline-secondary:hover { border-color: var(--pine); color: var(--pine); }
.btn-outline-danger { background: none; border-color: var(--wine); color: var(--wine); }
.btn-outline-danger:hover { background: var(--wine-tint); }
.btn-link { background: none; border-color: transparent; color: var(--pine); padding: .5rem .4rem; box-shadow: none; }
.btn-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.btn-lg { padding: .8rem 1.3rem; font-size: var(--t-0); }
.btn-sm { padding: .4rem .7rem; font-size: var(--t--2); }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; }

/* ----- Forms ------------------------------------------------------------ */
.form-control, .form-select {
  display: block; width: 100%; padding: .6rem .8rem;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 7rem; resize: vertical; }
.form-control::placeholder { color: var(--ink-3); text-align: start; }
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.form-label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: var(--t--1); color: var(--ink-2); }

/* .form-floating: label sits ABOVE the field (order:-1) regardless of DOM order,
   so a [input, label, validation] scaffold renders [label, input, validation]. */
.form-floating { display: flex; flex-direction: column; }
.form-floating > label { order: -1; margin-bottom: .35rem; font-weight: 600; font-size: var(--t--1); color: var(--ink-2); }

.form-check { display: flex; align-items: center; gap: .5rem; }
.form-check-input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
.form-check-label { color: var(--ink-2); }
.checkbox label { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--ink-2); }
.checkbox .form-label { margin-bottom: 0; text-transform: none; }

/* ----- Alerts ----------------------------------------------------------- */
.alert {
  padding: .8rem 1rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); font-size: var(--t--1); margin-bottom: var(--sp-3);
}
.alert-danger { background: var(--wine-tint); color: var(--wine); border-color: oklch(0.43 0.14 22 / 0.25); }
.alert-success { background: var(--pine-tint); color: var(--pine); border-color: oklch(0.405 0.066 158 / 0.22); }
.alert-warning { background: var(--wheat-tint); color: var(--wheat-deep); border-color: oklch(0.70 0.12 71 / 0.25); }
.alert-info { background: color-mix(in oklch, var(--sky) 14%, var(--surface)); color: var(--sky); border-color: color-mix(in oklch, var(--sky) 35%, transparent); }
.alert-link { color: inherit; font-weight: 600; text-decoration: underline; }

/* ----- Cards / badges / list groups ------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.card-body { padding: var(--sp-3); }
.card-title { font-family: var(--serif); font-weight: 500; font-size: var(--t-1); margin-bottom: .4rem; }
.card-text { color: var(--ink-2); }

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t--2); font-weight: 600; line-height: 1.4;
  padding: .2rem .55rem; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-soft);
}
.badge.bg-primary, .bg-primary { background: var(--brand) !important; color: var(--brand-contrast) !important; }
.badge.bg-success, .bg-success { background: var(--pine) !important; color: var(--on-pine) !important; }
.badge.bg-danger, .bg-danger { background: var(--wine) !important; color: oklch(0.97 0.02 30) !important; }
.badge.bg-secondary, .bg-secondary { background: var(--surface-2) !important; color: var(--ink-2) !important; }

.list-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.list-group-item { padding: .75rem .9rem; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.list-group-item:last-child { border-bottom: 0; }

/* ----- Manage-account nav (Bootstrap .nav .nav-pills) -------------------
   Reset the Terroir rail `.nav` styles it would otherwise inherit (the rail is
   light-on-pine); render a clean vertical pill list on paper instead. */
.nav-pills { gap: 2px; padding: 0; overflow: visible; }
.nav-pills .nav-item { list-style: none; }
.nav-pills .nav-link {
  display: block; padding: .55rem .8rem; border-radius: var(--r-sm);
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: var(--t--1);
}
.nav-pills .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-pills .nav-link.active { background: var(--brand); color: var(--brand-contrast); }