:root{
  --bg: #f5f2ee;
  --panel: #faf8f5;
  --ink: #4a3a2a;
  --muted: #6f655a;
  --border: #d6cfc6;
  --accent: #9c7a52;
  --accent-hover: #866644;
}

/* Prevent layout shift when content height toggles (scrollbar appears/disappears) */
html { scrollbar-gutter: stable; }   /* modern browsers */
body { overflow-y: scroll; }         /* fallback */

body{
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page-wrap{ 
  min-height:100vh; 
  padding: 1.1rem 1rem 2rem; 
}

.topbar{
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  padding: .75rem 1rem;
}

.brand-mark{
  width: 38px; height: 38px; border-radius: 12px;
  background: rgba(156, 122, 82, .18);
  border: 1px solid rgba(156, 122, 82, .25);
  display: grid; place-items: center;
  font-weight: 900; color: var(--accent);
  letter-spacing: .5px;
}

.brand-icon{
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.muted{ color: var(--muted); }

.panel{
  margin-top: 1rem;
  background: var(--panel);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  overflow: hidden;
}
.panel-header{ 
  padding: 1.25rem 1.25rem .75rem; 
  border-bottom: 1px solid rgba(0,0,0,.06); 
}
.panel-title{ 
  margin:0; 
  font-weight: 900; 
  letter-spacing:.2px; 
  font-size: 1.15rem; 
  display: flex;
  align-items: center;
  gap: .6rem;
}
.panel-subtitle{ 
  margin:.25rem 0 0; 
  color: var(--muted); 
  font-size: .95rem; 
}
.panel-body{ padding: 1rem; }

.soft-card{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

@media (max-width: 991.98px){
  .page-wrap{ padding: .85rem .75rem 1.5rem; }
  .topbar{ border-radius: 14px; }
  .panel{ border-radius: 16px; }
  .panel-header{ padding: 1rem 1rem .65rem; }
  .nav-tabs{ padding: 0 1rem; }
  .tab-pane{ padding: 1rem; }
}

.edit-form {
  font-size: 1.05rem;
}

.edit-form .form-label {
  font-weight: 700; /* keeps your fw-bold look */
}

/* Centered content width like login shell */
.content-shell{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

/* Buttons */
.btn-accent{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 800;
  border-radius: .75rem;
  padding: .55rem .9rem;
}
.btn-accent:hover{
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}
.btn-pill{ 
  border-radius: .75rem; 
  font-weight: 800; 
}
.btn-burgundy{ 
  background-color: var(--accent, #7a1233); 
  border-color: var(--accent, #7a1233); 
  color: #fff;
}
.btn-burgundy:hover, 
.btn-burgundy:focus{ 
  background-color: #5a0d26; 
  border-color: #5a0d26; 
  color:#fff; 
}
.btn-burgundy:active{ 
  background-color: #4a0b20; 
  border-color: #4a0b20; 
}

.btn-group .btn.active{
  background: rgba(156,122,82,.15);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 800;
}

/* Put this on the <a> */
a.settings-gear {
  color: #1f2937;              /* dark slate, softer than pure black */
  text-decoration: none;
}

/* The icon itself */
a.settings-gear .bi-gear {
  display: inline-block;        /* REQUIRED for transform/rotation to behave reliably */
  transition: transform .2s ease, color .2s ease;
  transform-origin: 50% 50%;
}

/* Hover on the LINK, rotate the ICON */
a.settings-gear:hover {
  color: #4b5563;              /* lighter slate on hover */
}

a.settings-gear:hover .bi-gear {
  transform: rotate(45deg);
}

a.home-link {
  color: #1f2937;
  text-decoration: none;
}

a.home-link .bi-house {
  display: inline-block;
  transition: transform .15s ease, color .15s ease;
}

a.home-link:hover {
  color: #4b5563;
}

a.home-link:hover .bi-house {
  transform: translateY(-2px);
}

a.back-link {
  color: #1f2937;
  text-decoration: none;
}

a.back-link .bi-arrow-left-square {
  display: inline-block; /* required for transform */
  transition: transform .15s ease, color .15s ease;
}

/* hover on link, animate icon */
a.back-link:hover {
  color: #6b1f2b; /* burgundy accent */
}

a.back-link:hover .bi-arrow-left-square {
  transform: translateX(-3px);
}

/* Optional: reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  a.settings-gear .bi-gear {
    transition: none;
  }
  a.home-link .bi-house {
    transition: none;
  }
  a.back-link .bi-arrow-left-square {
    transition: none;
  }
}

/* Controls */
.form-control, .form-select{
  border-radius: .65rem;
  border-color: var(--border);
  padding: .75rem .95rem;
  outline: none;
  box-shadow: none;
}
.form-control:focus, .form-select:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 .18rem rgba(156,122,82,.18);
}

/* Theme switch (avoid Bootstrap blue) */
.form-check-input:checked{
  background-color: var(--burgundy, #6b1f2b);
  border-color: var(--burgundy, #6b1f2b);
}
.form-check-input:focus{
  border-color: rgba(107,31,43,.45);
  box-shadow: 0 0 0 .2rem rgba(107,31,43,.15);
}

/* Fix Bootstrap switch THUMB color when OFF (override SVG background-image) */
.form-switch .form-check-input{
  /* Track when OFF */
  background-color: rgba(156,122,82,.20);      /* soft accent tint */
  border-color: rgba(156,122,82,.35);

  /* Thumb (white) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Track when ON + keep thumb white */
.form-switch .form-check-input:checked{
  background-color: var(--accent, #9c7a52);
  border-color: var(--accent, #9c7a52);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

/* Force Bootstrap-like invalid styling even if theme overrides .form-control */
.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--bs-danger) !important;
  box-shadow: 0 0 0 .25rem rgba(220,53,69,.25) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: var(--bs-success) !important;
  box-shadow: 0 0 0 .25rem rgba(25,135,84,.25) !important;
}

/* Ensure feedback text becomes visible */
.was-validated .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback {
  display: block !important;
}

/* wait / spinner */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  text-align: center;
}

.spinner {
  width: 56px;
  height: 56px;
  border: 6px solid #ddd;
  border-top-color: #7a1f2b; /* wine red */
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-title {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #7a1f2b;
}

.loading-text {
  margin-top: 6px;
  font-size: 14px;
  color: #555;
}

.spinner-inline{ 
  width:1rem; 
  height:1rem; 
}
.field-hint{ 
  color: var(--muted); 
  font-size: .85rem; 
}
.section-title{ 
  font-weight: 900; 
  letter-spacing:.2px; 
  margin: 0; 
}
.section-sub{ 
  color: var(--muted); 
  font-size:.9rem; 
  margin: .15rem 0 0; 
}
.badge-strength{
  border-radius: 999px;
  font-weight: 900;
  padding: .35rem .6rem;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.55);
  color: var(--ink);
}

.actions-cell {
    text-align: left;
    white-space: nowrap;
}

/* Inventory filter floating panels */

.inv-filters-wrap { position: relative; }

.inventory-filter-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;              /* above tables & cards */
    background: #fff;           /* opaque background */
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.15);
    padding: 0.75rem 1rem;
    min-width: 320px;
    margin-top:8px;          /* <-- gap below buttons */
    animation: fadeIn 0.12s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ensure checkboxes are readable */
.inventory-filter-panel label {
    display: block;
    cursor: pointer;
}

/* Prevent parent card overlays from bleeding through */
.inventory-filter-panel * {
    background-color: transparent;
}

/* breathing room around each checkbox */
.inventory-filter-panel .inv-opt{
  padding:.25rem .35rem;
  border-radius:.5rem;
}

/* to make TI icons look similar to Bootstrap icons is size and placement */
.ti {
  font-size: 1.1rem;
  opacity: .8;
  vertical-align: -0.125em;
}

/* to be used to display links in the site color theme */
.link-burgundy {
    color: #6b1f2b;              /* deep burgundy */
    text-decoration: underline;
}

.link-burgundy:hover,
.link-burgundy:focus {
    color: #8c2a3a;              /* slightly lighter on hover */
    text-decoration: underline;
}

/* Used to reduce the margin between <p> and <ul> in panel-body */
/* Tighten spacing only for paragraphs that introduce a list */
.panel-body p:has(+ ul),
.panel-body p:has(+ ol) {
  margin-bottom: 0.35rem !important; /* tweak: 0.25–0.5rem */
}