/*
  CollectPlus brand theme for the dashboard.
  Loaded after Tabler's CSS so these rules win the cascade (same or higher
  specificity, later source order). See .claude/skills/collectplus-brand/
  for the underlying design system this file implements.
*/

/* ===== 1. Brand tokens ===== */
:root {
  --cp-bg-cream: #FBFAF5;
  --cp-ink: #10302E;
  --cp-teal-deep: #0C6E62;
  --cp-teal-primary: #12A594;
  --cp-coral: #FF6B5C;
  --cp-amber: #FFB13C;
  --cp-green: #34C77B;
  --cp-pink: #FF7FA6;
  --cp-coral-on-dark: #FF7A66;
  --cp-coral-on-light: #FF6B5C;

  --cp-teal-pastel: rgba(18, 165, 148, 0.12);
  --cp-coral-pastel: rgba(255, 107, 92, 0.12);
  --cp-amber-pastel: rgba(255, 177, 60, 0.15);
  --cp-green-pastel: rgba(52, 199, 123, 0.14);
  --cp-pink-pastel: rgba(255, 127, 166, 0.14);

  --cp-card-radius: 20px;
  --cp-card-shadow: 0 8px 24px rgba(16, 48, 46, 0.06);
  --cp-badge-size: 48px;

  --cp-font-heading: 'Poppins', sans-serif;
  --cp-font-body: 'Nunito', sans-serif;

  --cp-watermark-opacity: 0.06;
}

/* ===== 2. Global semantic-color remap (re-themes Bootstrap/Tabler utility classes app-wide) ===== */
:root {
  --tblr-primary: #12A594;      --tblr-primary-rgb: 18, 165, 148;
  --tblr-success: #34C77B;      --tblr-success-rgb: 52, 199, 123;
  --tblr-danger: #FF6B5C;       --tblr-danger-rgb: 255, 107, 92;
  --tblr-warning: #FFB13C;      --tblr-warning-rgb: 255, 177, 60;
  --tblr-info: #12A594;         --tblr-info-rgb: 18, 165, 148;
  --tblr-blue: #12A594;         --tblr-blue-rgb: 18, 165, 148;
  --tblr-azure: #0C6E62;        --tblr-azure-rgb: 12, 110, 98;
  --tblr-purple: #FF7FA6;       --tblr-purple-rgb: 255, 127, 166;
  --tblr-secondary: #5B6B69;    --tblr-secondary-rgb: 91, 107, 105;
}

.alert-warning { background: var(--cp-amber-pastel); color: #8a5a00; border-color: transparent; }
.alert-danger  { background: var(--cp-coral-pastel);  color: #7a2e22; border-color: transparent; }
.alert-info    { background: var(--cp-teal-pastel);   color: var(--cp-teal-deep); border-color: transparent; }

/* ===== 3. Typography ===== */
body {
  font-family: var(--cp-font-body);
  background-color: var(--cp-bg-cream);
  color: var(--cp-ink);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .page-title, .navbar-brand {
  font-family: var(--cp-font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ===== 4. Cards ===== */
.card {
  background-color: #fff;
  border: 0;
  border-radius: var(--cp-card-radius);
  box-shadow: var(--cp-card-shadow);
}
.card-header, .card-footer { border-color: rgba(16, 48, 46, 0.06); }

/* ===== 5. Sidebar ===== */
.navbar-vertical.navbar {
  background-color: #fff !important;
  overflow: hidden;
  border-right: 1px solid rgba(16, 48, 46, 0.06);
}
.navbar-vertical .nav-link {
  color: rgba(16, 48, 46, 0.65);
  border-radius: 10px;
  margin: 2px 8px;
}
.navbar-vertical .nav-link:hover { color: var(--cp-ink); background: rgba(16, 48, 46, 0.05); }
.navbar-vertical .nav-link.active {
  color: var(--cp-ink);
  background: var(--cp-coral-pastel);
  box-shadow: inset 3px 0 0 var(--cp-coral-on-light);
}

/* Page header */
.page-header {
  min-height: 5.25rem;
  display: flex;
  align-items: center;
}

/* Wordmark */
.cp-logo { font-family: var(--cp-font-heading); font-weight: 800; letter-spacing: -0.02em; font-size: 1.3rem; }
.cp-logo--on-dark { color: #fff; }
.cp-logo--on-light { color: var(--cp-ink); }
.cp-logo--on-dark .cp-logo__plus { color: var(--cp-coral-on-dark); }
.cp-logo--on-light .cp-logo__plus { color: var(--cp-coral-on-light); }

/* ===== 6. Section watermark ===== */
.cp-watermark {
  position: absolute;
  font-family: var(--cp-font-heading);
  font-weight: 800;
  line-height: 1;
  opacity: var(--cp-watermark-opacity);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* ===== 7. Badge/status pill system ===== */
.cp-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--cp-font-body);
  font-weight: 700;
  font-size: 0.725rem;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
}
.cp-badge--success { background: var(--cp-green-pastel);  color: #1e7a4c; }
.cp-badge--danger  { background: var(--cp-coral-pastel);  color: #a63a2c; }
.cp-badge--warning { background: var(--cp-amber-pastel);  color: #8a5a00; }
.cp-badge--info    { background: var(--cp-teal-pastel);   color: var(--cp-teal-deep); }
.cp-badge--neutral { background: rgba(16, 48, 46, 0.07);  color: var(--cp-ink); opacity: 0.75; }

/* ===== 8. Icon badges ===== */
.cp-icon-badge {
  width: var(--cp-badge-size);
  height: var(--cp-badge-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-icon-badge__icon { width: 22px; height: 22px; stroke-width: 2; }
.cp-icon-badge--teal  { background: var(--cp-teal-pastel);  color: var(--cp-teal-primary); }
.cp-icon-badge--coral { background: var(--cp-coral-pastel); color: var(--cp-coral); }
.cp-icon-badge--amber { background: var(--cp-amber-pastel); color: var(--cp-amber); }
.cp-icon-badge--green { background: var(--cp-green-pastel); color: var(--cp-green); }
.cp-icon-badge--pink  { background: var(--cp-pink-pastel);  color: var(--cp-pink); }