/* Instachem brand palette — sampled from the logo (terracotta mark, dark-olive wordmark). */
:root {
  --brand-terracotta: #B65D35;
  --brand-terracotta-dark: #9A4E2C;
  --brand-olive: #293218;
  --brand-olive-light: #3B4626;

  /* Point Bootstrap's primary + link tokens at the brand. */
  --bs-primary: #B65D35;
  --bs-primary-rgb: 182, 93, 53;
  --bs-link-color: #9A4E2C;
  --bs-link-color-rgb: 154, 78, 44;
  --bs-link-hover-color: #7d3f23;
  --bs-link-hover-color-rgb: 125, 63, 35;
}

html {
  font-size: 14px;
}

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

.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.2rem rgba(182, 93, 53, 0.55);
}

/* Primary buttons in terracotta (Bootstrap 5.3 per-component variables). */
.btn-primary {
  --bs-btn-bg: var(--brand-terracotta);
  --bs-btn-border-color: var(--brand-terracotta);
  --bs-btn-hover-bg: var(--brand-terracotta-dark);
  --bs-btn-hover-border-color: var(--brand-terracotta-dark);
  --bs-btn-active-bg: var(--brand-terracotta-dark);
  --bs-btn-active-border-color: var(--brand-terracotta-dark);
  --bs-btn-disabled-bg: var(--brand-terracotta);
  --bs-btn-disabled-border-color: var(--brand-terracotta);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-terracotta-dark);
  --bs-btn-border-color: var(--brand-terracotta);
  --bs-btn-hover-bg: var(--brand-terracotta);
  --bs-btn-hover-border-color: var(--brand-terracotta);
  --bs-btn-active-bg: var(--brand-terracotta-dark);
  --bs-btn-active-border-color: var(--brand-terracotta-dark);
}

/* Primary badges/fills follow the brand too. */
.bg-primary { background-color: var(--brand-terracotta) !important; }
.text-bg-primary { background-color: var(--brand-terracotta) !important; color: #fff !important; }

h1, h2, h3, .h1, .h2, .h3 { color: var(--brand-olive); }

html { position: relative; min-height: 100%; }

/* ── App shell: fixed left sidebar + fluid main ──────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  flex: 0 0 240px; width: 240px;
  background: #fff; border-right: 1px solid #e6e4dd;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-sidebar-brand { padding: 1rem 1rem .85rem; border-bottom: 1px solid #f1efe9; }
.app-sidebar-brand img { height: 30px; width: auto; }

.app-nav { padding: .25rem 0 1.5rem; }
.app-nav-section {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: #a8a498; font-weight: 700; padding: 1rem 1rem .3rem;
}
.app-nav-link {
  display: block; padding: .45rem 1rem; font-size: .95rem;
  color: var(--brand-olive); text-decoration: none;
  border-left: 3px solid transparent;
}
.app-nav-link:hover, .app-nav-link:focus { background: #faf6f2; color: var(--brand-terracotta-dark); }
.app-nav-link.active {
  background: #fbf1ea; color: var(--brand-terracotta-dark);
  border-left-color: var(--brand-terracotta); font-weight: 600;
}

.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.25rem; background: #fff;
  border-bottom: 1px solid #e6e4dd;
  position: sticky; top: 0; z-index: 20;
}
.app-title { font-size: 1.1rem; font-weight: 600; color: var(--brand-olive); margin: 0; }
.app-topbar-user { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.app-user-name { color: #6c6a63; font-size: .9rem; white-space: nowrap; }
a.app-user-name:hover, a.app-user-name:focus { color: var(--brand-terracotta-dark); }

.app-content { flex: 1 1 auto; padding: 1.5rem 1.25rem; }

/* Hamburger toggle */
.app-sidebar-toggle {
  border: 0; background: transparent; padding: .4rem; cursor: pointer; border-radius: 4px;
  display: inline-flex; flex-direction: column; gap: 4px;
}
.app-sidebar-toggle:hover { background: #f1efe9; }
.app-sidebar-toggle span { display: block; width: 20px; height: 2px; background: var(--brand-olive); border-radius: 2px; }

/* Collapsed (desktop): hide the sidebar so content uses the full width. */
body.sidebar-collapsed .app-sidebar { display: none; }

/* Small screens: the sidebar becomes an overlay, hidden until toggled. */
@media (max-width: 768px) {
  .app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100vh;
    z-index: 1040; box-shadow: 0 0 28px rgba(0, 0, 0, .18); display: none;
  }
  body.sidebar-open .app-sidebar { display: flex; }
}

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

/* ══ Welcoming warm theme ═══════════════════════════════════════════════════
   A soft, warm canvas with white cards lifting off it, plus small brand
   accents. Deliberately low-saturation — inviting and calm, not loud. */
:root {
  --brand-cream: #faf7f2;        /* warm off-white page canvas */
  --brand-sidebar: #fffdfa;      /* a whisper warmer than white */
  --brand-border: #ece7df;       /* warm hairline for cards/edges */
  --brand-shadow: 41, 50, 24;    /* olive, used at low alpha for soft shadows */
}

body { background-color: var(--brand-cream); color: #2f2c24; }

/* Warm canvas behind content; cards sit on top in white so they gently lift. */
.app-content { background-color: var(--brand-cream); }

/* A hair of warmth on the chrome so nothing reads as stark white on cream. */
.app-sidebar { background: var(--brand-sidebar); border-right-color: var(--brand-border); }
.app-sidebar-brand { background: linear-gradient(180deg, #fdf6f0 0%, var(--brand-sidebar) 100%); }

/* Topbar: faint top-light gradient, soft shadow, and a slim terracotta→olive
   accent underline — a small signature flourish, not a banner. */
.app-topbar {
  background: linear-gradient(180deg, #ffffff 0%, #fdfbf8 100%);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--brand-terracotta) 0%, var(--brand-olive) 100%) 1;
  box-shadow: 0 8px 18px -16px rgba(var(--brand-shadow), .4);
}

/* Softer, warmer cards with a gentle lift. */
.card {
  border: 1px solid var(--brand-border);
  border-radius: .65rem;
  box-shadow: 0 1px 2px rgba(var(--brand-shadow), .05);
}
.card .display-6 { color: var(--brand-olive); }

/* Clickable summary cards (dashboard tiles) rise a touch and warm up on hover. */
a.text-decoration-none .card {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.text-decoration-none:hover .card {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -16px rgba(var(--brand-shadow), .5);
  border-color: #e2d8ca;
}
a.text-decoration-none:hover .card .display-6,
a.text-decoration-none:hover .card .fs-4 { color: var(--brand-terracotta-dark); }

/* Sign-in: a warm, centered welcome card on the cream canvas. */
.auth-wrap { max-width: 27rem; margin: 2.25rem auto; }
.auth-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: .85rem;
  box-shadow: 0 22px 45px -28px rgba(var(--brand-shadow), .5);
  padding: 2rem 2rem 1.75rem;
}
.auth-card .auth-lead { color: #6c6a63; }