/* Cart Builder theme: warm paper background, ink sidebar, copper accent.
   Bootstrap stays for layout and components; its variables are re-pointed here. */

:root {
  --cb-paper: #f6f1ea;
  --cb-paper-2: #efe7dc;
  --cb-ink: #1d2426;
  --cb-ink-2: #2b3538;
  --cb-ink-muted: #6b7478;
  --cb-line: #e2d9cc;
  --cb-copper: #b8622a;
  --cb-copper-dark: #94491a;
  --cb-copper-soft: #f3e3d6;
  --cb-moss: #3f7d5a;
  --cb-moss-soft: #dfeee4;
  --cb-amber: #c99a2e;
  --cb-amber-soft: #f7ecd0;
  --cb-rust: #a93f2d;
  --cb-rust-soft: #f5dcd7;

  --bs-body-bg: var(--cb-paper);
  --bs-body-color: var(--cb-ink);
  --bs-body-font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 0.95rem;
  --bs-secondary-color: var(--cb-ink-muted);
  --bs-border-color: var(--cb-line);
  --bs-link-color: var(--cb-copper-dark);
  --bs-link-hover-color: var(--cb-copper);
  --bs-link-color-rgb: 148, 73, 26;
  --bs-link-hover-color-rgb: 184, 98, 42;
  --bs-primary: var(--cb-copper);
  --bs-primary-rgb: 184, 98, 42;
  --bs-success: var(--cb-moss);
  --bs-success-rgb: 63, 125, 90;
  --bs-warning: var(--cb-amber);
  --bs-warning-rgb: 201, 154, 46;
  --bs-danger: var(--cb-rust);
  --bs-danger-rgb: 169, 63, 45;
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.9rem;
}

html, body {
  font-family: var(--bs-body-font-family);
  background: var(--cb-paper);
  color: var(--cb-ink);
}

h1, h2, h3, .h1, .h2, .h3, .navbar-brand, .cb-display {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cb-ink);
}

h1:focus {
  outline: none;
}

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

/* Buttons */
.btn { font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--cb-copper);
  --bs-btn-border-color: var(--cb-copper);
  --bs-btn-hover-bg: var(--cb-copper-dark);
  --bs-btn-hover-border-color: var(--cb-copper-dark);
  --bs-btn-active-bg: var(--cb-copper-dark);
  --bs-btn-active-border-color: var(--cb-copper-dark);
  --bs-btn-disabled-bg: #d4a98b;
  --bs-btn-disabled-border-color: #d4a98b;
}
.btn-outline-primary {
  --bs-btn-color: var(--cb-copper-dark);
  --bs-btn-border-color: var(--cb-copper);
  --bs-btn-hover-bg: var(--cb-copper);
  --bs-btn-hover-border-color: var(--cb-copper);
  --bs-btn-active-bg: var(--cb-copper-dark);
  --bs-btn-active-border-color: var(--cb-copper-dark);
}
.btn-outline-secondary {
  --bs-btn-color: var(--cb-ink-2);
  --bs-btn-border-color: var(--cb-line);
  --bs-btn-hover-bg: var(--cb-paper-2);
  --bs-btn-hover-border-color: var(--cb-ink-muted);
  --bs-btn-hover-color: var(--cb-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--cb-rust);
  --bs-btn-border-color: #e3b9b1;
  --bs-btn-hover-bg: var(--cb-rust);
  --bs-btn-hover-border-color: var(--cb-rust);
}
.btn-link { --bs-btn-color: var(--cb-copper-dark); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* Forms */
.form-control, .input-group-text {
  background: #fffdfa;
  border-color: var(--cb-line);
  color: var(--cb-ink);
}
.input-group-text { background: var(--cb-paper-2); color: var(--cb-ink-2); }
.form-control:focus {
  border-color: var(--cb-copper);
  box-shadow: 0 0 0 0.2rem rgba(184, 98, 42, 0.18);
  background: #fff;
}
.form-control::placeholder { color: #a39b91; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--cb-moss); }
.invalid { outline: 1px solid var(--cb-rust); }
.validation-message { color: var(--cb-rust); font-size: 0.85rem; margin-top: 0.25rem; }

/* Cards, lists, tables */
.card {
  background: #fffdfa;
  border: 1px solid var(--cb-line);
  box-shadow: 0 1px 0 rgba(29, 36, 38, 0.04), 0 8px 24px -18px rgba(29, 36, 38, 0.35);
}
.list-group-item {
  background: #fffdfa;
  border-color: var(--cb-line);
  padding: 0.9rem 1.1rem;
  color: var(--cb-ink);
  transition: background-color 120ms ease, transform 120ms ease;
}
.list-group-item-action:hover {
  background: var(--cb-copper-soft);
  color: var(--cb-ink);
}
.list-group-item:first-child { border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); }
.list-group-item:last-child { border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); }

.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--cb-line);
  --bs-table-color: var(--cb-ink);
}
.table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cb-ink-muted);
  font-weight: 600;
  border-bottom-width: 1px;
}
.table tbody tr:hover { background: rgba(184, 98, 42, 0.04); }

.badge.text-bg-success { background: var(--cb-moss-soft) !important; color: var(--cb-moss) !important; font-weight: 600; }
.badge.text-bg-warning { background: var(--cb-amber-soft) !important; color: #8a6615 !important; font-weight: 600; }

.alert-danger {
  --bs-alert-bg: var(--cb-rust-soft);
  --bs-alert-color: #6e2419;
  --bs-alert-border-color: #e9c3bb;
}

hr { border-color: var(--cb-line); opacity: 1; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* Auth layout */
.bg-light { background: var(--cb-paper) !important; }

/* Template chrome */
.content { padding-top: 1.5rem; }

#blazor-error-ui {
  color-scheme: light only;
  background: var(--cb-amber-soft);
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

.blazor-error-boundary {
  background: var(--cb-rust);
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem auto;
}
.loading-progress circle {
  fill: none;
  stroke: var(--cb-line);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--cb-copper);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: 600;
  font-family: "Fraunces", Georgia, serif;
  color: var(--cb-ink);
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text::after { content: var(--blazor-load-percentage-text, "Loading"); }