/*
 * added.css  Vantara design system on Tabler
 *
 * Load order:
 *   <link rel="stylesheet" href="tabler.min.css">
 *   <link rel="stylesheet" href="tabler-marketing.min.css">
 *   <link rel="stylesheet" href="added.css">
 *
 * Vantara tokens:
 *   bg       #f7f4ed  warm cream
 *   ink      #121820  deep navy-charcoal
 *   accent   #b68a5e  bronze
 *   muted    #5f6670
 *   faint    #8a8f94
 *   beige    #ede6da
 *   beige-2  #dcd4c8
 *   dark-srf #17251e  (footer / dark sections)
 *
 * Fonts: Cormorant Garamond (display) + Inter (body/UI)
 *
 * Sections:
 *   1.  CSS variable override
 *   2.  Blue-utility overrides (Tabler maps blue→ink; re-map for badge use)
 *   3.  Body + base
 *   4.  Headings
 *   5.  Navbar
 *   6.  Buttons
 *   7.  Cards
 *   8.  Section structure
 *   9.  Badges
 *  10.  Avatar
 *  11.  Forms
 *  12.  Tables
 *  13.  Dropdowns
 *  14.  Pagination / tabs / breadcrumb / progress
 *  15.  Page surfaces
 *  16.  Stats bar
 *  17.  Footer
 *  18.  Layout helpers
 *  19.  Hero components
 *  20.  View toggle
 *  21.  Filter pills + tag dot + divider
 *  22.  Event card — horizontal (.evh)
 *  23.  Event card — past compact (.past-card)
 *  24.  Calendar
 *  25.  Scheduling
 *  26.  Miscellaneous
 *  27.  Print
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════════════════
   1. CSS VARIABLE OVERRIDE
   Override hex AND -rgb companions (Tabler uses rgba(var(--x-rgb), α))
   ═══════════════════════════════════════════════════════════════════════ */
:root,
[data-bs-theme=light] {
  color-scheme: light;

  /* Primary → bronze accent */
  --tblr-primary:                  #b68a5e;
  --tblr-primary-rgb:              182, 138, 94;
  --tblr-primary-text:             #8a6438;
  --tblr-primary-bg-subtle:        #f4ede3;
  --tblr-primary-border-subtle:    rgba(182,138,94,0.3);
  --tblr-link-color:               #b68a5e;
  --tblr-link-color-rgb:           182, 138, 94;
  --tblr-link-hover-color:         #8a6438;
  --tblr-link-hover-color-rgb:     138, 100, 56;

  /* Tabler blue → ink (so .bg-blue = dark; §2 re-maps .bg-blue-lt for badge use) */
  --tblr-blue:                     #121820;
  --tblr-blue-rgb:                 18, 24, 32;
  --tblr-azure:                    #b68a5e;
  --tblr-azure-rgb:                182, 138, 94;
  --tblr-indigo:                   #121820;
  --tblr-tabler:                   #b68a5e;
  --tblr-tabler-rgb:               182, 138, 94;

  /* Body */
  --tblr-body-bg:                  #f7f4ed;
  --tblr-body-bg-rgb:              247, 244, 237;
  --tblr-body-color:               #121820;
  --tblr-body-color-rgb:           18, 24, 32;

  /* Surfaces */
  --tblr-secondary-bg:             #ede6da;
  --tblr-secondary-bg-rgb:         237, 230, 218;
  --tblr-tertiary-bg:              #f4f0ea;
  --tblr-tertiary-bg-rgb:          244, 240, 234;

  /* Borders */
  --tblr-border-color:             #dcd4c8;
  --tblr-border-color-translucent: rgba(182,138,94,0.2);

  /* Muted / secondary text */
  --tblr-muted:                    #5f6670;
  --tblr-secondary:                #5f6670;
  --tblr-gray:                     #8a8f94;
  --tblr-gray-dark:                #121820;

  /* Headings */
  --tblr-heading-color:            #121820;

  /* Highlight */
  --tblr-highlight-bg:             #f4ede3;

  /* Forms */
  --tblr-form-control-bg:          #ffffff;

  /* Fonts */
  --tblr-font-sans-serif:          'Inter', system-ui, -apple-system, sans-serif;

  /* Custom Vantara tokens */
  --v-display:    'Cormorant Garamond', Georgia, serif;
  --v-body:       'Inter', system-ui, sans-serif;
  --v-bg:         #f7f4ed;
  --v-bg-alt:     #f4f0ea;
  --v-bg-white:   #ffffff;
  --v-ink:        #121820;
  --v-muted:      #5f6670;
  --v-faint:      #8a8f94;
  --v-accent:     #b68a5e;
  --v-accent-30:  rgba(182,138,94,0.3);
  --v-beige:      #ede6da;
  --v-beige-2:    #dcd4c8;
  --v-dark:       #17251e;
  --v-line:       rgba(182,138,94,0.25);
  --v-r-card:     20px;
  --v-r-pill:     100px;
  --v-shadow-glass: 0 24px 50px -20px rgba(0,0,0,0.15), inset 0 2px 20px 0 rgba(255,255,255,0.8);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BLUE-UTILITY OVERRIDES
   --tblr-blue is mapped to ink for headings/dark elements above, which
   means Tabler's .bg-blue-lt and .text-blue would render as ink tints.
   Re-map them to the warm accent palette used by badges and pills.
   .bg-primary / .text-primary / .border-primary cascade from --tblr-primary
   and don't need overrides here.
   ═══════════════════════════════════════════════════════════════════════ */
.bg-blue,
.bg-indigo,
.bg-azure        { background-color: #b68a5e !important; color: #fff !important; }

.bg-primary-lt,
.bg-blue-lt      { background-color: #f4ede3 !important; color: #b68a5e !important; }

.text-blue,
.text-azure      { color: #b68a5e !important; }

.text-muted,
.text-secondary  { color: #5f6670 !important; }

.border-blue     { border-color: #b68a5e !important; }

/* Safety net for any Tabler JS that injects blue hex inline */
[style*="206bc4"] { background-color: #b68a5e !important; }
[style*="4299e1"] { background-color: #b68a5e !important; }
[style*="2446C8"] { color: #b68a5e !important; }

/* ═══════════════════════════════════════════════════════════════════════
   3. BODY + BASE
   ═══════════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--v-bg);
  color: var(--v-ink);
  font-family: var(--v-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

html, body { overflow-x: hidden; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   4. HEADINGS — Cormorant Garamond
   ═══════════════════════════════════════════════════════════════════════ 
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
.card-title, .page-title,
.section-title {
  font-family: var(--v-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--v-ink);
}

.display-1, .display-2 { font-size: clamp(2.5rem, 5vw, 5.375rem); line-height: 1em;    letter-spacing: -0.05em; }
.display-3, .display-4 { font-size: clamp(2rem,  4vw, 4.375rem);  line-height: 1.05em; }
.display-5, .display-6 { font-size: clamp(1.5rem, 3vw, 3rem);     line-height: 1.1em;  }
h1, .h1 { font-size: clamp(2rem,    4vw,   3.5rem);  line-height: 1.05em; letter-spacing: -0.04em; }
h2, .h2 { font-size: clamp(1.75rem, 3.5vw, 3rem);    line-height: 1.08em; letter-spacing: -0.03em; }
h3, .h3 { font-size: clamp(1.375rem,2.5vw, 2.25rem); line-height: 1.12em; letter-spacing: -0.02em; }
h4, .h4 { font-size: clamp(1.125rem,1.8vw, 1.625rem);line-height: 1.18em; letter-spacing: -0.01em; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 1rem; }*/

/* ═══════════════════════════════════════════════════════════════════════
   5. NAVBAR
   ═══════════════════════════════════════════════════════════════════════ */
.navbar,
.navbar-dark,
.navbar[data-bs-theme=dark],
nav.navbar {
  background-color: rgba(247,244,237,0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--v-line) !important;
  box-shadow: none !important;
}

.navbar-brand-text {
  font-family: var(--v-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--v-ink) !important;
}

.navbar .nav-link,
.navbar-dark .nav-link {
  font-family: var(--v-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--v-muted) !important;
  transition: color 0.2s cubic-bezier(.44,0,.56,1);
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--v-accent) !important; }

/* CTA in nav — ink pill, smaller than global .btn */
.navbar .btn-primary,
nav .btn-primary {
  background-color: var(--v-ink) !important;
  border-color: var(--v-ink) !important;
  color: #fff !important;
  border-radius: var(--v-r-pill) !important;
  padding: 10px 24px !important;
  font-size: 0.8125rem;
  font-weight: 500;
}
.navbar .btn-primary:hover { background-color: #2a3f4e !important; border-color: #2a3f4e !important; }

/* ═══════════════════════════════════════════════════════════════════════
   6. BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  border-radius: var(--v-r-pill) !important;
  font-family: var(--v-body);
  font-weight: 500;
  /* font-size: 0.9375rem; */
  letter-spacing: 0.01em;
  padding: 10px 24px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-primary {
  background-color: var(--v-ink) !important;
  border-color: var(--v-ink) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
  background-color: #2a3f4e !important;
  border-color: #2a3f4e !important;
  color: #fff !important;
}
.btn-primary:focus,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(182,138,94,0.3) !important;
}

.btn-outline-primary {
  color: var(--v-ink) !important;
  border-color: var(--v-accent-30) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background-color: var(--v-ink) !important;
  border-color: var(--v-ink) !important;
  color: #fff !important;
}

/* Default ghost btn */
.btn:not(.btn-primary):not(.btn-outline-primary):not([class*="btn-"]) {
  background-color: #fff !important;
  border: 1px solid var(--v-accent-30) !important;
  color: var(--v-ink) !important;
}
.btn:not(.btn-primary):not(.btn-outline-primary):not([class*="btn-"]):hover {
  border-color: var(--v-accent) !important;
  color: var(--v-accent) !important;
}

.btn-ghost-primary { color: var(--v-accent) !important; }
.btn-ghost-primary:hover { background-color: #f4ede3 !important; color: #8a6438 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   7. CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.card {
  background-color: var(--v-bg-white);
  border: 1px solid var(--v-accent-30);
  border-radius: var(--v-r-card) !important;
  box-shadow: 0 2px 8px rgba(18,24,32,0.06);
}

.card-header {
  background-color: var(--v-bg-alt);
  border-bottom-color: var(--v-line);
  border-radius: calc(var(--v-r-card) - 1px) calc(var(--v-r-card) - 1px) 0 0 !important;
}

.card-footer {
  background-color: var(--v-bg-alt);
  border-top-color: var(--v-line);
  border-radius: 0 0 calc(var(--v-r-card) - 1px) calc(var(--v-r-card) - 1px) !important;
}

.card-glass {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: var(--v-shadow-glass) !important;
  border-radius: var(--v-r-card) !important;
}

.card-link:hover {
  border-color: var(--v-accent) !important;
  box-shadow: 0 4px 24px rgba(182,138,94,0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. SECTION STRUCTURE
   ═══════════════════════════════════════════════════════════════════════ */
.section {
  padding: 80px 0;
  background-color: var(--v-bg);
}

.section-light  { background-color: var(--v-beige) !important; }

.section-dark {
  background-color: var(--v-dark) !important;
  color: #f0ebe2;
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark .display-5                        { color: #f0ebe2; }
.section-dark .text-secondary,
.section-dark .text-muted,
.section-dark p                                 { color: rgba(240,235,226,0.6) !important; }
.section-dark .section-label                    { color: var(--v-accent); }
.section-dark .btn-primary {
  background-color: var(--v-accent) !important;
  border-color: var(--v-accent) !important;
}
.section-dark .btn-primary:hover {
  background-color: #8a6438 !important;
  border-color: #8a6438 !important;
}

.section-header { margin-bottom: 3rem; text-align: center; }

.section-title {
  font-family: var(--v-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.08em;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--v-ink);
  margin-bottom: 0.75rem;
}

.section-label,
.section-eyebrow {
  display: block;
  font-family: var(--v-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--v-accent);
  margin-bottom: 0.5rem;
}
.section-label::before,
.section-eyebrow::before {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--v-accent);
  margin-bottom: 10px;
}

.section-description {
  font-family: var(--v-body);
  font-size: 1.125rem;
  color: var(--v-muted);
  line-height: 1.68;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

.gold-rule {
  display: block;
  width: 30px;
  height: 2px;
  background: var(--v-accent);
  border-radius: 1px;
  margin: 0.4rem 0 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. BADGES
   ═══════════════════════════════════════════════════════════════════════ */
.badge {
  border-radius: 100px !important;
  font-family: var(--v-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.badge.bg-primary,
.badge.bg-blue   { background-color: var(--v-accent) !important; color: #fff !important; }

.badge.bg-primary-lt,
.badge.bg-blue-lt { background-color: #f4ede3 !important; color: var(--v-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   10. SHAPES / ICON CIRCLES
   ═══════════════════════════════════════════════════════════════════════ */
.shape,
.svc-icon,
#cmp-services .rounded-circle,
#cmp-services .avatar,
#cmp-services .bg-primary,
#cmp-services .bg-blue,
.card .rounded-circle.bg-primary,
.card .avatar.bg-primary {
  background-color: #f4ede3 !important;
  color: var(--v-accent) !important;
  border-radius: 12px !important;
}
.shape i, .shape svg,
.svc-icon i, .svc-icon svg { color: var(--v-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   11. AVATAR
   ═══════════════════════════════════════════════════════════════════════ */
.avatar-list .avatar,
.avatar-list-stacked .avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px -12px rgba(18,24,32,0.4);
}

.avatar.bg-primary,
.avatar.bg-blue   { background-color: var(--v-accent) !important; color: #fff !important; }
.avatar.bg-blue-lt,
.avatar.bg-green-lt,
.avatar.bg-purple-lt { background-color: #f4ede3 !important; color: var(--v-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   12. FORMS
   ═══════════════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  background-color: #fff;
  border: 1px solid var(--v-beige-2);
  border-radius: 6px;
  color: var(--v-ink);
  font-family: var(--v-body);
}
.form-control:focus,
.form-select:focus {
  background-color: #fff;
  border-color: var(--v-accent);
  box-shadow: 0 0 0 0.2rem rgba(182,138,94,0.18);
  color: var(--v-ink);
}
.form-control::placeholder { color: rgba(18,24,32,0.4); }
.form-check-input:checked  { background-color: var(--v-accent); border-color: var(--v-accent); }
.form-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   13. TABLES
   ═══════════════════════════════════════════════════════════════════════ */
.table > :not(caption) > * > * { color: var(--v-ink); }
.table th {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v-muted);
  border-bottom-color: var(--v-beige-2);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(182,138,94,0.04); }
.table-hover   > tbody > tr:hover > *             { background-color: rgba(182,138,94,0.07); }

/* ═══════════════════════════════════════════════════════════════════════
   14. DROPDOWNS
   ═══════════════════════════════════════════════════════════════════════ */
.dropdown-menu {
  background-color: #fff;
  border-color: var(--v-line);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(18,24,32,0.1);
}
.dropdown-item:hover,
.dropdown-item:focus  { background-color: #f4ede3; color: var(--v-accent); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--v-ink); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   15. PAGINATION / TABS / BREADCRUMB / PROGRESS
   ═══════════════════════════════════════════════════════════════════════ */
.page-link { color: var(--v-accent); border-color: var(--v-beige-2); border-radius: 8px; }
.page-link:hover { color: #8a6438; background-color: #f4ede3; }
.page-item.active .page-link { background-color: var(--v-ink); border-color: var(--v-ink); color: #fff; }

.nav-tabs .nav-link          { color: var(--v-muted); }
.nav-tabs .nav-link:hover    { color: var(--v-accent); }
.nav-tabs .nav-link.active   { color: var(--v-ink); border-bottom: 2px solid var(--v-accent); }
.nav-pills .nav-link.active  { background-color: var(--v-ink); color: #fff; border-radius: var(--v-r-pill); }

.breadcrumb-item a      { color: var(--v-accent); }
.breadcrumb-item.active { color: var(--v-muted); }

.progress-bar { background-color: var(--v-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   16. PAGE SURFACES
   ═══════════════════════════════════════════════════════════════════════ */
.page-wrapper, .page-body, .page-body-inner { background-color: var(--v-bg); }
.page-header { border-bottom-color: var(--v-line); }
.section-bg  { background-color: var(--v-beige) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   17. STATS BAR
   ═══════════════════════════════════════════════════════════════════════ */
#cmp-stats-bar,
#cmp-stats-bar > *,
#cmp-stats-bar [class*="bg-primary"],
#cmp-stats-bar [class*="bg-blue"] {
  background-color: var(--v-dark) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
#cmp-stats-bar, #cmp-stats-bar * { color: rgba(240,235,226,0.7) !important; }
#cmp-stats-bar strong,
#cmp-stats-bar h1, #cmp-stats-bar h2, #cmp-stats-bar h3,
#cmp-stats-bar [class*="display-"],
#cmp-stats-bar .fw-bold,
#cmp-stats-bar .fs-1, #cmp-stats-bar .fs-2 {
  color: var(--v-accent) !important;
  font-family: var(--v-display);
}

/* ═══════════════════════════════════════════════════════════════════════
   18. FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
#cmp-footer, .footer, footer,
#cmp-footer > *, .footer > * {
  background-color: #17251e !important;
  background-image: none !important;
  border-top: 1px solid rgba(182,138,94,0.15) !important;
  color: rgba(240,235,226,0.55) !important;
}
#cmp-footer h1, #cmp-footer h2, #cmp-footer h3, #cmp-footer h4,
.footer h1, .footer h2, .footer h3, .footer h4 {
  font-family: var(--v-display);
  color: rgba(240,235,226,0.9) !important;
}
#cmp-footer a, .footer a, footer a       { color: rgba(240,235,226,0.55) !important; }
#cmp-footer a:hover, .footer a:hover,
footer a:hover                           { color: var(--v-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   19. LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-sticky {
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}

.sidebar-label {
  font-size: .7rem;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.request-card-incoming  { border-left: 3px solid var(--tblr-warning) !important; }
.request-card-outgoing  { border-left: 3px solid var(--tblr-primary) !important; }
.request-card-confirmed { border-left: 3px solid var(--tblr-success) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   20. HERO COMPONENTS
   ═══════════════════════════════════════════════════════════════════════ */

/* Kicker pill */
.kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(182,138,94,0.08);
  border: 1px solid rgba(182,138,94,0.18);
  border-radius: 100px;
  padding: 5px 14px 5px 8px;
  margin-bottom: 20px;
}
.kicker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--v-accent);
  flex-shrink: 0;
}

/* Feature list */
.feature-list { list-style: none; padding: 0; margin: 0 0 28px; }
.feature-list li {
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--v-accent);
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 0.9375rem;
  color: var(--v-muted);
}
.feature-list li strong { color: var(--v-ink); }
.feature-list li:last-child { margin-bottom: 0; }

/* Hero collage images */
.collage-main {
  height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  width: 100%;
  display: block;
  border: 2px solid #fff;
}
.collage-small {
  height: 132px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  width: 100%;
  display: block;
  border: 2px solid #fff;
}

/* Hero blog stack */
.hero-stack { position: relative; margin-bottom: 3rem; }
.hero-stack img {
  width: 100%;
  border-radius: 12px;
  display: block;
  object-fit: cover;
  max-height: 420px;
}
.stack-card-1 { position: absolute; bottom: -1.5rem; left: 1.5rem;  max-width: 220px; z-index: 2; }
.stack-card-2 { position: absolute; bottom: -1.5rem; right: 1.5rem; max-width: 180px; z-index: 2; }

/* Hero stat card — glass overlay */
.stats-card {
  position: absolute;
  bottom: -22px;
  left: 20px;
  z-index: 2;
  white-space: nowrap;
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 16px !important;
  box-shadow: var(--v-shadow-glass) !important;
}
.stat-val {
  font-family: var(--v-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--v-ink);
  line-height: 1.2;
}
.stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-muted);
  line-height: 1.3;
}

/* Step numbers */
.step-number {
  font-family: var(--v-display);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--v-accent);
  opacity: 0.2;
  user-select: none;
  flex-shrink: 0;
  width: 64px;
}

/* Responsive */
@media (max-width: 991px) {
  .collage-main  { height: 280px; }
  .collage-small { height: 88px; }
  .stats-card    { bottom: -16px; left: 10px; }
  .stack-card-1, .stack-card-2 { max-width: 160px; }
}
@media (max-width: 576px) {
  .stats-card   { position: static; margin-top: 16px; }
  .stack-card-1, .stack-card-2 { display: none; }
}

/* ════════════════════════════════════════════════════════════
   21. VIEW TOGGLE
   ════════════════════════════════════════════════════════════ */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: .8125rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--tblr-muted);
  cursor: pointer;
  transition: all .15s;
  border-right: 1px solid var(--tblr-border-color);
}
.view-toggle-btn:last-child  { border-right: none; }
.view-toggle-btn.active      { background: var(--v-accent); color: #fff; }
.view-toggle-btn:not(.active):hover { background: var(--tblr-light); }

/* ════════════════════════════════════════════════════════════
   22. FILTER PILLS + TAG DOT + DIVIDER
   ════════════════════════════════════════════════════════════ */
.tag-filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.tag-pill:hover  { border-color: var(--v-accent); color: var(--v-accent); }
.tag-pill.active { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }

.tag-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-divider {
  width: 1px;
  height: 20px;
  background: var(--tblr-border-color);
  align-self: center;
  flex-shrink: 0;
}

.filter-group-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tblr-muted);
  align-self: center;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   23. EVENT CARD — HORIZONTAL (.evh)
   Usage: <div class="card evh d-flex flex-row g-0 overflow-hidden">
   ════════════════════════════════════════════════════════════ */
.evh-img {
  width: 180px;
  flex: 0 0 180px;
  position: relative;
  overflow: hidden;
}
.evh-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Date badge overlaid on image */
.evh-date {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(182, 138, 94, 0.92);
  color: #fff;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1.2;
  min-width: 44px;
}
.evh-date-day {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}
.evh-date-mon {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Mobile: stack vertically */
@media (max-width: 640px) {
  .evh-img       { width: 100%; flex: none; height: 160px; }
  .card.evh      { flex-direction: column !important; }
}

/* ════════════════════════════════════════════════════════════
   24. EVENT CARD — PAST COMPACT (.past-card)
   Usage: <div class="past-card"> (inside Bootstrap col)
   ════════════════════════════════════════════════════════════ */
.past-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tblr-card-bg, #fff);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: 10px 12px;
  transition: box-shadow .15s;
}
.past-card:hover { box-shadow: var(--tblr-shadow-sm); }

.past-card__img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--tblr-border-radius-sm);
  overflow: hidden;
}
.past-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.past-card__body  { flex: 1; min-width: 0; }

.past-card__title {
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.past-card__meta  { font-size: .75rem; color: var(--tblr-secondary); margin-bottom: 4px; }
.past-card__badge {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--tblr-border-radius-sm);
  padding: 1px 7px;
}

/* ════════════════════════════════════════════════════════════
   25. CALENDAR
   ════════════════════════════════════════════════════════════ */
.cal-month-nav   { display: flex; align-items: center; gap: 8px; }
.cal-month-title { font-size: 1rem; font-weight: 700; min-width: 180px; text-align: center; }

.cal-nav-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--tblr-border-radius);
  border: 1px solid var(--tblr-border-color);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tblr-muted);
  transition: all .15s;
}
.cal-nav-btn:hover   { border-color: #b68a5e; color: #b68a5e; }

.cal-today-btn {
  padding: 4px 10px;
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: #fff;
  color: var(--tblr-body-color);
  cursor: pointer;
  transition: all .15s;
}
.cal-today-btn:hover { border-color: #b68a5e; color: #b68a5e; }

/* Legend */
.cal-legend      { display: flex; gap: 12px; flex-wrap: wrap; font-size: .75rem; color: var(--tblr-muted); align-items: center; }
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-legend-dot  { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; display: inline-block; }

/* Grid */
.cal-grid-wrap {
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto;
}

.cal-dow-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  background: var(--tblr-light);
  border-bottom: 2px solid var(--tblr-border-color);
}
@supports not (grid-template-columns: subgrid) {
  .cal-dow-row { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.cal-dow {
  padding: 8px 0;
  text-align: center;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tblr-muted);
  border-right: 1px solid var(--tblr-border-color);
  overflow: hidden;
}
.cal-dow:last-child { border-right: none; }

.cal-body-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
@supports not (grid-template-columns: subgrid) {
  .cal-body-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

.cal-cell {
  height: 110px;
  border-right: 1px solid var(--tblr-border-color);
  border-bottom: 1px solid var(--tblr-border-color);
  padding: 6px 5px 4px;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  min-width: 0;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell--other        { background: var(--tblr-light); }
.cal-cell--today        { background: rgba(182, 138, 94, .06); }

.cal-day-num {
  font-size: .75rem;
  font-weight: 600;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3px;
  color: var(--tblr-body-color);
  flex-shrink: 0;
}
.cal-cell--today .cal-day-num { background: #b68a5e; color: #fff; }
.cal-cell--other .cal-day-num { color: var(--tblr-muted); opacity: .5; }

/* Pills */
.cal-pill {
  display: block;
  width: 100%;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  cursor: pointer;
  border: none;
  text-align: left;
  line-height: 1.6;
  transition: opacity .12s;
}
.cal-pill:hover { opacity: .75; }

.cal-pill--Community  { background: rgba(182, 138, 94, .12); color: #8a6438; }
.cal-pill--Concert    { background: rgba(9,   182, 139, .15); color: #09b68b; }
.cal-pill--Workshop   { background: rgba(214,  57,  57, .12); color: #d63939; }
.cal-pill--Conference { background: rgba(182, 138, 94, .12); color: #8a6438; }
.cal-pill--default    { background: var(--tblr-light); color: var(--tblr-muted); border: 1px solid var(--tblr-border-color); }

.cal-pill-more {
  font-size: .6875rem;
  font-weight: 600;
  color: #b68a5e;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0 2px;
  display: block;
  text-align: left;
}

/* Popup */
.cal-popup {
  display: none;
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--tblr-shadow-lg, 0 8px 32px rgba(0,0,0,.12));
  width: 300px;
  padding: 16px;
}
.cal-popup.show { display: block; }
.cal-popup-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--tblr-muted);
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   26. SCHEDULING
   ════════════════════════════════════════════════════════════ */
.slot {
  width: 76px;
  height: 50px;
  border-radius: var(--tblr-border-radius);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  border: 1.5px solid var(--tblr-border-color);
  font-size: 11px;
  font-weight: 600;
  gap: 2px;
  user-select: none;
}
.slot-empty     { background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); }
.slot-empty:hover { background: var(--tblr-primary-lt); border-color: var(--tblr-primary); color: var(--tblr-primary); }
.slot-outgoing  { background: var(--tblr-primary-lt); border-color: var(--tblr-primary); color: var(--tblr-primary); }
.slot-incoming  { background: var(--tblr-warning-lt); border-color: var(--tblr-warning); color: #92400e; }
.slot-confirmed { background: var(--tblr-success-lt); border-color: var(--tblr-success); color: #166534; }
.slot-blocked   { background: var(--tblr-bg-surface-secondary); border-color: var(--tblr-border-color); color: var(--tblr-disabled-color); cursor: not-allowed; opacity: .45; }

.sched-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; }
.sched-table thead th {
  background: var(--tblr-bg-surface-secondary);
  border-bottom: 2px solid var(--tblr-border-color);
  padding: 8px 10px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
  white-space: nowrap;
}
.sched-table thead th.person-col { min-width: 200px; position: sticky; left: 0; z-index: 2; border-right: 2px solid var(--tblr-border-color); }
.sched-table thead th.time-col   { min-width: 90px; text-align: center; }
.sched-table tbody td { border-bottom: 1px solid var(--tblr-border-color); padding: 8px 10px; vertical-align: middle; }
.sched-table tbody td.person-cell { position: sticky; left: 0; background: var(--tblr-bg-surface); z-index: 1; border-right: 2px solid var(--tblr-border-color); min-width: 200px; }
.sched-table tbody td.slot-cell   { text-align: center; padding: 6px 4px; }
.sched-table tbody tr:hover td             { background: rgba(var(--tblr-primary-rgb), .02); }
.sched-table tbody tr:hover td.person-cell { background: var(--tblr-bg-surface); }

#slot-popover { position: fixed; z-index: 1080; width: 280px; display: none; }
#slot-popover.visible { display: block; }

.flash-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  animation: slideup .2s ease;
}
@keyframes slideup {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 640px) { .slot { width: 58px; height: 42px; } }

/* ════════════════════════════════════════════════════════════
   27. MISCELLANEOUS
   ════════════════════════════════════════════════════════════ */
.bg-surface-secondary { background: var(--tblr-bg-surface-secondary) !important; }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--tblr-secondary); }
.empty-state p { margin: 0; font-size: .9375rem; }

.space-y > * + * { margin-top: 0; }

::selection             { background-color: rgba(182,138,94,0.2); color: var(--v-ink); }
::-webkit-scrollbar     { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--v-beige); }
::-webkit-scrollbar-thumb  { background: #c4a882; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--v-accent); }

/* ════════════════════════════════════════════════════════════
   28. PRINT
   ════════════════════════════════════════════════════════════ */
@media print {
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  [style*="display:none"],
  [style*="display: none"] { display: block !important; }
  .card, .evh, .past-card, .cal-cell, .slot { break-inside: avoid !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .container, .container-xl, .container-fluid { max-width: 100% !important; width: 100% !important; }
  .navbar, #navbar, #footer, .modal, .toast, .cal-popup, .flash-toast { display: none !important; }
}