/* ==========================================================================
   CaseBase — Bootstrap 5.3 theme (starter)
   --------------------------------------------------------------------------
   Drop-in stylesheet loaded AFTER bootstrap.min.css. It retones Bootstrap by
   overriding its CSS custom properties — no SCSS build step required.
   When we want deeper control later, these tokens map 1:1 to Bootstrap's
   SCSS variables ($primary, $body-bg, $border-radius, ...).
   ========================================================================== */

/* ---- 1. Design tokens --------------------------------------------------- */
:root {
  /* Brand */
  --cb-green:        #34433b;   /* logo mark / brand accent */
  --cb-green-700:    #2a362f;
  --cb-brown:        #3d2208;   /* primary action (buttons) */
  --cb-brown-700:    #2e1905;

  /* Surfaces */
  --cb-bg:           #f8f7f2;   /* app background (warm cream) */
  --cb-surface:      #ffffff;   /* cards, inputs, sidebar */
  --cb-border:       #e7e5df;   /* hairlines */
  --cb-border-light: #f0eee8;

  /* Text */
  --cb-text:         #1a1a1a;
  --cb-text-muted:   #6f6f6f;
  --cb-text-faint:   #9a9a93;

  /* Accent / status fills (soft pastels) */
  --cb-pink:         #fbe9e9;   --cb-pink-ink:   #b91c1c;
  --cb-blue:         #e9f1fb;   --cb-blue-ink:   #1d4ed8;
  --cb-mint:         #e7f5ec;   --cb-mint-ink:   #15803d;
  --cb-folder-tab:     #d5e5f2;   /* root folder card tab (blue) */
  --cb-folder-tab-sub: #dcebd6;   /* sub-folder card tab (green) */

  /* Tag palette (chips with colored dots) */
  --cb-tag-orange:   #b45309;
  --cb-tag-green:    #15803d;
  --cb-tag-blue:     #1d4ed8;
  --cb-tag-purple:   #7c3aed;
  --cb-tag-red:      #be123c;
  --cb-tag-teal:     #0f766e;

  /* Radii & shadow */
  --cb-radius-sm:    8px;
  --cb-radius:       12px;
  --cb-radius-lg:    16px;
  --cb-shadow-sm:    0 1px 2px rgba(20, 20, 20, .04), 0 1px 3px rgba(20, 20, 20, .06);
  --cb-shadow:       0 2px 6px rgba(20, 20, 20, .05), 0 8px 24px rgba(20, 20, 20, .05);

  /* ---- Map tokens onto Bootstrap's global CSS variables ---- */
  --bs-body-bg:           var(--cb-bg);
  --bs-body-color:        var(--cb-text);
  --bs-secondary-color:   var(--cb-text-muted);
  --bs-tertiary-color:    var(--cb-text-faint);
  --bs-border-color:      var(--cb-border);
  --bs-border-radius:     var(--cb-radius);
  --bs-border-radius-sm:  var(--cb-radius-sm);
  --bs-border-radius-lg:  var(--cb-radius-lg);
  --bs-emphasis-color:    var(--cb-text);

  --bs-primary:           var(--cb-brown);
  --bs-primary-rgb:       61, 34, 8;
  --bs-link-color:        var(--cb-brown);
  --bs-link-color-rgb:    61, 34, 8;
  --bs-link-hover-color:  var(--cb-brown-700);

  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ---- 2. Base & typography ---------------------------------------------- */
body {
  background-color: var(--cb-bg);
  color: var(--cb-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cb-text);
}

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

/* Uppercase section label (sidebar groups: SEARCH / COMPILE / TRACK) */
.cb-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cb-text-faint);
}

/* ---- 3. Buttons -------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--cb-radius-sm);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
}

/* Primary = espresso brown */
.btn-primary {
  --bs-btn-bg: var(--cb-brown);
  --bs-btn-border-color: var(--cb-brown);
  --bs-btn-hover-bg: var(--cb-brown-700);
  --bs-btn-hover-border-color: var(--cb-brown-700);
  --bs-btn-active-bg: var(--cb-brown-700);
  --bs-btn-active-border-color: var(--cb-brown-700);
  --bs-btn-disabled-bg: var(--cb-brown);
  --bs-btn-disabled-border-color: var(--cb-brown);
}

/* Secondary = quiet outline on white */
.btn-outline-secondary,
.btn-light {
  --bs-btn-color: var(--cb-text);
  --bs-btn-bg: var(--cb-surface);
  --bs-btn-border-color: var(--cb-border);
  --bs-btn-hover-color: var(--cb-text);
  --bs-btn-hover-bg: var(--cb-bg);
  --bs-btn-hover-border-color: var(--cb-border);
  --bs-btn-active-bg: var(--cb-bg);
  --bs-btn-active-border-color: var(--cb-border);
}

.btn-outline-primary {
  --bs-btn-color: var(--cb-brown);
  --bs-btn-border-color: var(--cb-brown);
  --bs-btn-hover-bg: var(--cb-brown);
  --bs-btn-hover-border-color: var(--cb-brown);
  --bs-btn-active-bg: var(--cb-brown-700);
}

/* ---- 4. Forms ---------------------------------------------------------- */
.form-control,
.form-select {
  border-radius: var(--cb-radius-sm);
  border-color: var(--cb-border);
  padding: .6rem .85rem;
  background-color: var(--cb-surface);
}
.form-control::placeholder { color: var(--cb-text-faint); }
.form-control:focus,
.form-select:focus {
  border-color: var(--cb-green);
  box-shadow: 0 0 0 3px rgba(52, 67, 59, .12);
}
.form-label { font-weight: 500; color: var(--cb-text-muted); margin-bottom: .35rem; }

/* Password field with inline show/hide toggle */
.cb-password { position: relative; }
.cb-password input { padding-right: 3.5rem; }
.cb-password [data-toggle-password] {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--cb-text-muted);
  font-size: .8rem;
  font-weight: 600;
  padding: .2rem .4rem;
  cursor: pointer;
}
.cb-field-error { color: var(--cb-tag-red); font-size: .82rem; margin-top: .3rem; }
.cb-help { color: var(--cb-text-faint); font-size: .8rem; margin-top: .3rem; }

/* Selectable suggestion chips (e.g. suggested sub-folders) */
.cb-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
.cb-suggest-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cb-suggest-chip span::before {
  content: "+";
  margin-right: .3rem;
  font-weight: 600;
  color: var(--cb-text-faint);
}
.cb-suggest-chip:hover { border-color: var(--cb-green); }
.cb-suggest-chip:has(input:checked) {
  background: var(--cb-green);
  border-color: var(--cb-green);
  color: #fff;
}
.cb-suggest-chip:has(input:checked) span::before { content: "✓"; color: #fff; }

/* ---- 5. Cards & surfaces ---------------------------------------------- */
.card {
  --bs-card-bg: var(--cb-surface);
  --bs-card-border-color: var(--cb-border);
  --bs-card-border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow-sm);
}

.cb-surface {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
}

/* ---- 6. Brand mark ----------------------------------------------------- */
.cb-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--cb-text);
  text-decoration: none;
}
.cb-brand-mark {
  width: 28px;
  height: 28px;
  display: inline-block;
  background: url("../img/logo.81b7df2b810a.svg") center / contain no-repeat;
}

/* ---- 7. Sidebar navigation -------------------------------------------- */
.cb-sidebar {
  background: var(--cb-surface);
  border-right: 1px solid var(--cb-border);
  min-height: 100vh;
  padding: 1rem .75rem;
}
.cb-nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-radius: var(--cb-radius-sm);
  color: var(--cb-text);
  text-decoration: none;
  font-weight: 500;
}
.cb-nav-link:hover { background: var(--cb-bg); }
.cb-nav-link.active {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  box-shadow: var(--cb-shadow-sm);
}

/* ---- 8. Tags / chips (Trello-style label with dot) -------------------- */
.cb-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  font-size: .8rem;
  font-weight: 500;
  color: var(--cb-text);
  line-height: 1.4;
}
.cb-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cb-tag-color, var(--cb-text-faint));
}
.cb-tag--orange { --cb-tag-color: var(--cb-tag-orange); color: var(--cb-tag-orange); }
.cb-tag--green  { --cb-tag-color: var(--cb-tag-green);  color: var(--cb-tag-green); }
.cb-tag--blue   { --cb-tag-color: var(--cb-tag-blue);   color: var(--cb-tag-blue); }
.cb-tag--purple { --cb-tag-color: var(--cb-tag-purple); color: var(--cb-tag-purple); }
.cb-tag--red    { --cb-tag-color: var(--cb-tag-red);    color: var(--cb-tag-red); }
.cb-tag--teal   { --cb-tag-color: var(--cb-tag-teal);   color: var(--cb-tag-teal); }

/* Removable filter chip */
.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .5rem .3rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface);
  font-size: .82rem;
}
.cb-chip .btn-close { font-size: .55rem; }

/* ---- 9. Folder card ---------------------------------------------------- */
.cb-folder {
  position: relative;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1rem 1.1rem;
  margin-top: 14px;          /* room for the tab */
  box-shadow: var(--cb-shadow-sm);
  transition: box-shadow .15s ease;
}
.cb-folder::before {         /* folder tab */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 46%;
  height: 18px;
  background: var(--cb-folder-tab);
  border-radius: var(--cb-radius) var(--cb-radius) 0 0;
}
/* Sub-folder cards get a distinct pastel tab to set them apart from matters. */
.cb-folder--sub::before { background: var(--cb-folder-tab-sub); }
.cb-folder:hover { box-shadow: var(--cb-shadow); }
/* Lift a card above its neighbours while its action menu is open, so the
   dropdown is never painted under the next card. */
.cb-folder:has(.dropdown-menu.show) { z-index: 5; }

/* ---- 10. Stat cards (dashboard) --------------------------------------- */
.cb-stat {
  border-radius: var(--cb-radius);
  padding: 1.25rem 1.4rem;
  border: 1px solid transparent;
}
.cb-stat .cb-stat-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.cb-stat .cb-stat-label { color: var(--cb-text-muted); margin-top: .5rem; }
.cb-stat--pink { background: var(--cb-pink); }
.cb-stat--blue { background: var(--cb-blue); }
.cb-stat--mint { background: var(--cb-mint); }

/* ---- 11. Badges -------------------------------------------------------- */
.cb-badge-today {
  background: var(--cb-pink);
  color: var(--cb-pink-ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .25rem .6rem;
  border-radius: 999px;
}

/* ---- 12. Alerts (flash messages) -------------------------------------- */
.alert { border-radius: var(--cb-radius); border: 1px solid var(--cb-border); }

/* ---- 12b. Universal search -------------------------------------------- */
#universal-search { position: relative; min-width: 280px; }
#universal-search input { width: 100%; }
.cb-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  max-height: 420px;
  overflow-y: auto;
}
.cb-search-item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .6rem .75rem;
  text-decoration: none;
  color: var(--cb-text);
  border-bottom: 1px solid var(--cb-border-light);
}
.cb-search-item:last-child { border-bottom: 0; }
.cb-search-item:hover { background: var(--cb-bg); }
.cb-search-type { flex-shrink: 0; font-size: .7rem; }
.cb-search-body { min-width: 0; }
.cb-search-title { font-weight: 500; font-size: .9rem; }
.cb-search-excerpt {
  font-size: .8rem;
  color: var(--cb-text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cb-search-excerpt mark { background: #ffec9e; padding: 0 1px; border-radius: 2px; }
.cb-search-empty { padding: .75rem; color: var(--cb-text-faint); font-size: .85rem; }

/* ---- 13. Misc utilities ----------------------------------------------- */
.cb-bg     { background: var(--cb-bg); }
.cb-divider { border-bottom: 1px solid var(--cb-border); }
.rounded-cb { border-radius: var(--cb-radius) !important; }