/* ============================================================================
   CuliCal — Design System (from-scratch, no build step)
   Flat / friendly-rounded. Emerald primary + macro-orange accent.
   Fonts: Varela Round (headings) + Nunito Sans (body). Lucide SVG icons.
   Replaces Metronic + Bootstrap entirely: tokens → reset → utilities → components.
   ========================================================================== */

/* ---------- 1. TOKENS ----------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --c-primary:      #059669;   /* emerald-600 */
  --c-primary-600:  #047857;   /* hover / active */
  --c-primary-700:  #065F46;
  --c-primary-050:  #ECFDF5;
  --c-primary-100:  #D1FAE5;
  --c-primary-ink:  #065F46;

  --c-accent:       #EA580C;   /* macro orange */
  --c-accent-600:   #C2410C;
  --c-accent-050:   #FFF3EA;
  --c-accent-ink:   #9A3412;

  --c-success:      #16A34A;  --c-success-050: #E9F8EF;  --c-success-ink: #15803D;
  --c-warning:      #F59E0B;  --c-warning-050: #FEF6E7;  --c-warning-ink: #B45309;
  --c-danger:       #DC2626;  --c-danger-050:  #FCEBEB;  --c-danger-ink:  #B91C1C;
  --c-info:         #0EA5E9;  --c-info-050:    #E7F6FD;  --c-info-ink:    #0369A1;

  --c-bg:           #F3FAF7;   /* page — faint mint */
  --c-surface:      #FFFFFF;   /* cards, sheets */
  --c-surface-2:    #F1F7F4;   /* muted fills */
  --c-border:       #E2EEE9;
  --c-border-strong:#CBDDD5;

  --c-ink:          #0F172A;   /* primary text */
  --c-ink-soft:     #334155;
  --c-muted:        #64748B;
  --c-faint:        #94A3B8;
  --c-on-primary:   #FFFFFF;

  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --shadow:    0 4px 14px -8px rgba(15,23,42,.18);
  --shadow-lg: 0 24px 60px -22px rgba(15,23,42,.34);

  --font-head: 'Varela Round', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, Segoe UI, sans-serif;

  --sidebar-w: 250px;
  --header-h: 64px;
  --t-fast: .15s ease;
  --t: .2s ease;
}

[data-bs-theme="dark"] {
  --c-primary:      #34D399;
  --c-primary-600:  #10B981;
  --c-primary-700:  #059669;
  --c-primary-050:  rgba(52,211,153,.12);
  --c-primary-100:  rgba(52,211,153,.18);
  --c-primary-ink:  #6EE7B7;

  --c-accent:       #FB923C;
  --c-accent-600:   #F97316;
  --c-accent-050:   rgba(251,146,60,.14);
  --c-accent-ink:   #FDBA74;

  --c-success-050: rgba(34,197,94,.14);  --c-success-ink: #4ADE80;
  --c-warning-050: rgba(245,158,11,.14); --c-warning-ink: #FBBF24;
  --c-danger-050:  rgba(248,113,113,.15);--c-danger-ink:  #F87171;
  --c-info-050:    rgba(14,165,233,.15); --c-info-ink:    #38BDF8;

  --c-bg:           #0B1220;
  --c-surface:      #121B2B;
  --c-surface-2:    #1A2435;
  --c-border:       rgba(148,163,184,.16);
  --c-border-strong:rgba(148,163,184,.28);

  --c-ink:          #E6EDF5;
  --c-ink-soft:     #CBD5E1;
  --c-muted:        #94A3B8;
  --c-faint:        #64748B;
  --c-on-primary:   #052E1C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 6px 18px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 24px 60px -22px rgba(0,0,0,.7);
}

/* ---------- 2. RESET / BASE ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; scroll-behavior: smooth; }
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-primary-600); }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }
hr { border: none; border-top: 1px solid var(--c-border); opacity: 1; margin: 1rem 0; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
::selection { background: var(--c-primary-100); color: var(--c-primary-ink); }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
h1,.h1 { font-size: 2rem; }
h2,.h2 { font-size: 1.6rem; }
h3,.h3 { font-size: 1.35rem; }
h4,.h4 { font-size: 1.15rem; }
h5,.h5 { font-size: 1rem; }
h6,.h6 { font-size: .9rem; }
.display-1 { font-size: 3.4rem; } .display-2 { font-size: 2.9rem; }
.display-3 { font-size: 2.5rem; } .display-4 { font-size: 2.1rem; }
.display-5 { font-size: 1.8rem; } .display-6 { font-size: 1.5rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
small, .small { font-size: .85em; }
code, kbd, samp { font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .9em; }

/* ---------- 3. ICONS ------------------------------------------------------ */
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: -.18em; }
.icon-xs { width: .9rem;  height: .9rem; }
.icon-sm { width: 1.05rem; height: 1.05rem; }
.icon-lg { width: 1.6rem; height: 1.6rem; }
.icon-xl { width: 2.2rem; height: 2.2rem; }
.icon-2x { width: 2.75rem; height: 2.75rem; }
.icon-3x { width: 3.5rem;  height: 3.5rem; }

/* ---------- 4. LAYOUT UTILITIES ------------------------------------------ */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-1, .flex-column-fluid, .flex-row-fluid { flex: 1 1 auto !important; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }
.align-items-baseline { align-items: baseline !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-center { align-self: center !important; }
.align-self-end { align-self: flex-end !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }

/* gaps */
.gap-1 { gap: .25rem !important; } .gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }   .gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }   .gap-0 { gap: 0 !important; }

/* spacing scale (bootstrap-compatible: 1=.25 2=.5 3=1 4=1.5 5=3 rem) */
.m-0{margin:0!important}.m-1{margin:.25rem!important}.m-2{margin:.5rem!important}.m-3{margin:1rem!important}.m-4{margin:1.5rem!important}.m-5{margin:3rem!important}.m-auto{margin:auto!important}
.mt-0{margin-top:0!important}.mt-1{margin-top:.25rem!important}.mt-2{margin-top:.5rem!important}.mt-3{margin-top:1rem!important}.mt-4{margin-top:1.5rem!important}.mt-5{margin-top:3rem!important}.mt-auto{margin-top:auto!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.25rem!important}.mb-2{margin-bottom:.5rem!important}.mb-3{margin-bottom:1rem!important}.mb-4{margin-bottom:1.5rem!important}.mb-5{margin-bottom:3rem!important}
.ms-0{margin-left:0!important}.ms-1{margin-left:.25rem!important}.ms-2{margin-left:.5rem!important}.ms-3{margin-left:1rem!important}.ms-4{margin-left:1.5rem!important}.ms-5{margin-left:3rem!important}.ms-auto{margin-left:auto!important}
.me-0{margin-right:0!important}.me-1{margin-right:.25rem!important}.me-2{margin-right:.5rem!important}.me-3{margin-right:1rem!important}.me-4{margin-right:1.5rem!important}.me-5{margin-right:3rem!important}.me-auto{margin-right:auto!important}
.mx-0{margin-left:0!important;margin-right:0!important}.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}.mx-3{margin-left:1rem!important;margin-right:1rem!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}
.my-0{margin-top:0!important;margin-bottom:0!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}
.p-0{padding:0!important}.p-1{padding:.25rem!important}.p-2{padding:.5rem!important}.p-3{padding:1rem!important}.p-4{padding:1.5rem!important}.p-5{padding:3rem!important}
.pt-0{padding-top:0!important}.pt-1{padding-top:.25rem!important}.pt-2{padding-top:.5rem!important}.pt-3{padding-top:1rem!important}.pt-4{padding-top:1.5rem!important}.pt-5{padding-top:3rem!important}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:.25rem!important}.pb-2{padding-bottom:.5rem!important}.pb-3{padding-bottom:1rem!important}.pb-4{padding-bottom:1.5rem!important}.pb-5{padding-bottom:3rem!important}
.ps-0{padding-left:0!important}.ps-1{padding-left:.25rem!important}.ps-2{padding-left:.5rem!important}.ps-3{padding-left:1rem!important}.ps-4{padding-left:1.5rem!important}.ps-5{padding-left:3rem!important}
.pe-0{padding-right:0!important}.pe-1{padding-right:.25rem!important}.pe-2{padding-right:.5rem!important}.pe-3{padding-right:1rem!important}.pe-4{padding-right:1.5rem!important}.pe-5{padding-right:3rem!important}
.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:.25rem!important;padding-right:.25rem!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.px-3{padding-left:1rem!important;padding-right:1rem!important}.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}.px-5{padding-left:3rem!important;padding-right:3rem!important}
.py-0{padding-top:0!important;padding-bottom:0!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.py-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.py-7{padding-top:4.5rem!important;padding-bottom:4.5rem!important}.py-8{padding-top:5.5rem!important;padding-bottom:5.5rem!important}
.py-10{padding-top:6rem!important;padding-bottom:6rem!important}

/* sizing */
.w-100{width:100%!important}.w-75{width:75%!important}.w-50{width:50%!important}.w-25{width:25%!important}.w-auto{width:auto!important}
.h-100{height:100%!important}.h-auto{height:auto!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}
.w-35px{width:35px!important}.h-35px{height:35px!important}.w-40px{width:40px!important}.h-40px{height:40px!important}
.w-45px{width:45px!important}.h-45px{height:45px!important}.w-50px{width:50px!important}.h-50px{height:50px!important}
.w-60px{width:60px!important}.h-60px{height:60px!important}.w-70px{width:70px!important}.h-70px{height:70px!important}
.min-w-0{min-width:0!important}

/* position */
.position-relative{position:relative!important}.position-absolute{position:absolute!important}
.position-fixed{position:fixed!important}.position-static{position:static!important}
.top-0{top:0!important}.bottom-0{bottom:0!important}.start-0{left:0!important}.end-0{right:0!important}
.top-50{top:50%!important}.bottom-50{bottom:50%!important}.start-50{left:50%!important}.end-50{right:50%!important}
.top-100{top:100%!important}.start-100{left:100%!important}
.translate-middle{transform:translate(-50%,-50%)!important}
.translate-middle-x{transform:translateX(-50%)!important}
.translate-middle-y{transform:translateY(-50%)!important}
.sticky-top{position:sticky;top:0;z-index:30}
.overflow-hidden{overflow:hidden!important}.overflow-auto{overflow:auto!important}

/* borders & radius */
.border{border:1px solid var(--c-border)!important}.border-0{border:0!important}
.border-top{border-top:1px solid var(--c-border)!important}.border-bottom{border-bottom:1px solid var(--c-border)!important}
.border-end{border-right:1px solid var(--c-border)!important}.border-start{border-left:1px solid var(--c-border)!important}
.border-dashed{border-style:dashed!important}
.rounded{border-radius:var(--r)!important}.rounded-0{border-radius:0!important}
.rounded-1{border-radius:var(--r-sm)!important}.rounded-2{border-radius:var(--r)!important}
.rounded-3{border-radius:var(--r-lg)!important}.rounded-4{border-radius:var(--r-xl)!important}
.rounded-circle{border-radius:50%!important}.rounded-pill{border-radius:var(--r-pill)!important}

/* type utilities */
.fs-1{font-size:2rem!important}.fs-2{font-size:1.6rem!important}.fs-3{font-size:1.35rem!important}
.fs-4{font-size:1.15rem!important}.fs-5{font-size:1rem!important}.fs-6{font-size:.95rem!important}
.fs-7{font-size:.875rem!important}.fs-8{font-size:.8rem!important}.fs-2x{font-size:2rem!important}.fs-3x{font-size:2.6rem!important}
.fw-bold{font-weight:700!important}.fw-bolder{font-weight:800!important}.fw-semibold{font-weight:600!important}
.fw-medium{font-weight:500!important}.fw-normal{font-weight:400!important}
.fst-italic{font-style:italic!important}.text-uppercase{text-transform:uppercase!important}
.text-lowercase{text-transform:lowercase!important}.text-capitalize{text-transform:capitalize!important}
.lh-1{line-height:1!important}.lh-sm{line-height:1.25!important}.lh-base{line-height:1.55!important}
.ls-1{letter-spacing:.06em!important}.font-head{font-family:var(--font-head)!important}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-nowrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}
.text-break{word-break:break-word!important;overflow-wrap:anywhere!important}
.text-decoration-none{text-decoration:none!important}.text-decoration-underline{text-decoration:underline!important}
.font-monospace{font-family:'SFMono-Regular',Menlo,Consolas,monospace!important}
.user-select-none{user-select:none!important}

/* text colors */
.text-primary{color:var(--c-primary)!important}.text-accent{color:var(--c-accent)!important}
.text-success{color:var(--c-success-ink)!important}.text-warning{color:var(--c-warning-ink)!important}
.text-danger{color:var(--c-danger-ink)!important}.text-info{color:var(--c-info-ink)!important}
.text-muted{color:var(--c-muted)!important}.text-white{color:#fff!important}
.text-dark,.text-gray-900{color:var(--c-ink)!important}.text-gray-800{color:var(--c-ink-soft)!important}
.text-gray-700,.text-gray-600{color:var(--c-muted)!important}.text-gray-500,.text-gray-400{color:var(--c-faint)!important}
.text-body{color:var(--c-ink)!important}.text-inherit{color:inherit!important}
.opacity-50{opacity:.5!important}.opacity-75{opacity:.75!important}.opacity-25{opacity:.25!important}

/* backgrounds */
.bg-white,.bg-body{background-color:var(--c-surface)!important}
.bg-light,.bg-gray-100,.bg-gray-200{background-color:var(--c-surface-2)!important}
.bg-transparent{background-color:transparent!important}
.bg-primary{background-color:var(--c-primary)!important;color:var(--c-on-primary)!important}
.bg-accent{background-color:var(--c-accent)!important;color:#fff!important}
.bg-light-primary{background-color:var(--c-primary-050)!important}
.bg-light-success{background-color:var(--c-success-050)!important}
.bg-light-warning{background-color:var(--c-warning-050)!important}
.bg-light-danger{background-color:var(--c-danger-050)!important}
.bg-light-info{background-color:var(--c-info-050)!important}
.bg-light-accent{background-color:var(--c-accent-050)!important}
.shadow-sm{box-shadow:var(--shadow-sm)!important}.shadow{box-shadow:var(--shadow)!important}
.shadow-lg{box-shadow:var(--shadow-lg)!important}.shadow-none{box-shadow:none!important}

/* ---------- 5. GRID (lightweight 12-col) --------------------------------- */
.container, .container-fluid { width: 100%; margin-inline: auto; padding-inline: 1.25rem; }
.container { max-width: 1200px; }
.container-xl { max-width: 1320px; }
.row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.row > * { padding-inline: .75rem; width: 100%; }
.g-0 { margin-inline: 0; } .g-0 > * { padding-inline: 0; }
.gy-3 > * { margin-bottom: 1rem; } .gy-4 > * { margin-bottom: 1.5rem; }
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1{width:8.333%}.col-2{width:16.667%}.col-3{width:25%}.col-4{width:33.333%}
.col-5{width:41.667%}.col-6{width:50%}.col-7{width:58.333%}.col-8{width:66.667%}
.col-9{width:75%}.col-10{width:83.333%}.col-11{width:91.667%}.col-12{width:100%}

@media (min-width:576px){
  .col-sm-6{width:50%}.col-sm-4{width:33.333%}.col-sm-auto{flex:0 0 auto;width:auto}
}
@media (min-width:768px){
  .col-md-6{width:50%}.col-md-4{width:33.333%}.col-md-3{width:25%}.col-md-8{width:66.667%}.col-md-12{width:100%}.col-md-auto{flex:0 0 auto;width:auto}
  .flex-md-row{flex-direction:row!important}
}
@media (min-width:992px){
  .col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-5{width:41.667%}.col-lg-6{width:50%}
  .col-lg-7{width:58.333%}.col-lg-8{width:66.667%}.col-lg-9{width:75%}.col-lg-12{width:100%}
}

/* responsive display helpers */
@media (max-width:991.98px){ .d-lg-none-up{} }
.d-lg-none{} .d-lg-flex{} .d-lg-block{}
@media (min-width:992px){
  .d-lg-none{display:none!important}
  .d-lg-flex{display:flex!important}
  .d-lg-block{display:block!important}
  .d-lg-inline-block{display:inline-block!important}
}
@media (max-width:991.98px){
  .d-none-down{display:none!important}
}
@media (min-width:768px){
  .d-md-none{display:none!important}.d-md-flex{display:flex!important}.d-md-block{display:block!important}
}
@media (max-width:767.98px){
  .d-md-up-only{display:none!important}
}
@media (min-width:576px){
  .d-sm-flex{display:flex!important}.d-sm-block{display:block!important}.d-sm-none{display:none!important}
}

/* ---------- 6. BUTTONS ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1.15rem; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; line-height: 1.2;
  white-space: nowrap; border: 1.5px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  -webkit-user-select: none; user-select: none; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }
.btn .icon { width: 1.15rem; height: 1.15rem; }
.btn-sm { padding: .45rem .8rem; font-size: .85rem; gap: .35rem; }
.btn-lg { padding: .85rem 1.5rem; font-size: 1.05rem; }
.btn-block, .btn.w-100 { width: 100%; }

.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-600); color: var(--c-on-primary); }
.btn-accent { background: var(--c-accent); color: #fff; }
.btn-accent:hover { background: var(--c-accent-600); color: #fff; }
.btn-success { background: var(--c-success); color: #fff; }
.btn-warning { background: var(--c-accent); color: #fff; }
.btn-warning:hover { background: var(--c-accent-600); color: #fff; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-danger:hover { filter: brightness(.94); color: #fff; }
.btn-dark { background: var(--c-ink); color: #fff; }

.btn-light { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-border); }
.btn-light:hover { background: var(--c-border); color: var(--c-ink); }
.btn-light-primary { background: var(--c-primary-050); color: var(--c-primary-ink); }
.btn-light-primary:hover { background: var(--c-primary-100); color: var(--c-primary-ink); }
.btn-light-accent, .btn-light-warning { background: var(--c-accent-050); color: var(--c-accent-ink); }
.btn-light-danger { background: var(--c-danger-050); color: var(--c-danger-ink); }
.btn-light-danger:hover { filter: brightness(.96); }
.btn-light-success { background: var(--c-success-050); color: var(--c-success-ink); }

.btn-outline { background: transparent; border-color: var(--c-border-strong); color: var(--c-ink); }
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }
.btn-outline-primary { background: transparent; border-color: var(--c-primary); color: var(--c-primary); }
.btn-outline-primary:hover { background: var(--c-primary); color: var(--c-on-primary); }

.btn-ghost, .btn-link { background: transparent; color: var(--c-primary); border-color: transparent; }
.btn-ghost:hover { background: var(--c-surface-2); }

.btn-icon { padding: 0; width: 42px; height: 42px; border-radius: var(--r-pill); }
.btn-icon.btn-sm { width: 34px; height: 34px; }
.btn-circle { border-radius: 50%; }

/* ---------- 7. CARDS ------------------------------------------------------ */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-width: 0;
}
.card-hover { transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--c-border-strong); }
.card-header {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--c-border);
}
.card-title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; margin: 0; color: var(--c-ink); }
.card-body { padding: 1.35rem; }
.card-footer { padding: 1.1rem 1.35rem; border-top: 1px solid var(--c-border); }
.card-toolbar { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

/* ---------- 8. FORMS ------------------------------------------------------ */
.form-label { display: inline-block; margin-bottom: .4rem; font-weight: 600; font-size: .9rem; color: var(--c-ink-soft); }
.form-control, .form-select {
  display: block; width: 100%; padding: .65rem .9rem;
  background: var(--c-surface); color: var(--c-ink);
  border: 1.5px solid var(--c-border-strong); border-radius: var(--r);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 46px;
}
.form-control::placeholder { color: var(--c-faint); }
.form-control:focus, .form-select:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-050);
}
.form-control:disabled, .form-select:disabled { background: var(--c-surface-2); opacity: .7; cursor: not-allowed; }
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem;
}
textarea.form-control { min-height: 96px; resize: vertical; }
.form-control-sm, .form-select-sm { padding: .4rem .65rem; min-height: 38px; font-size: .9rem; }
.form-text { font-size: .82rem; color: var(--c-muted); margin-top: .35rem; }
.input-group { display: flex; align-items: stretch; }
.input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; width: 1%; }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text {
  display: flex; align-items: center; padding: .65rem .9rem;
  background: var(--c-surface-2); border: 1.5px solid var(--c-border-strong); color: var(--c-muted);
  white-space: nowrap;
}
.form-check { display: flex; align-items: center; gap: .6rem; }
.form-check-input {
  width: 1.2rem; height: 1.2rem; flex: 0 0 auto; appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--c-border-strong); border-radius: var(--r-xs); background: var(--c-surface);
  cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast);
}
.form-check-input[type=radio] { border-radius: 50%; }
.form-check-input:checked { background: var(--c-primary); border-color: var(--c-primary); }
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: .8rem; background-repeat: no-repeat; background-position: center;
}
.form-check-label { cursor: pointer; }
/* toggle switch */
.form-switch .form-check-input { width: 2.4rem; height: 1.35rem; border-radius: var(--r-pill); position: relative; }
.form-switch .form-check-input::after {
  content:''; position:absolute; top:1px; left:1px; width:calc(1.35rem - 4px); height:calc(1.35rem - 4px);
  border-radius:50%; background:#fff; transition: transform var(--t-fast);
}
.form-switch .form-check-input:checked::after { transform: translateX(1.05rem); }

.range { width: 100%; accent-color: var(--c-primary); }

/* validation */
.is-invalid { border-color: var(--c-danger) !important; }
.invalid-feedback { display: block; color: var(--c-danger-ink); font-size: .82rem; margin-top: .3rem; }

/* ---------- 9. BADGES / CHIPS -------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .6rem; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700; line-height: 1;
}
.badge-primary, .badge.bg-primary { background: var(--c-primary); color: var(--c-on-primary); }
.badge-light-primary { background: var(--c-primary-050); color: var(--c-primary-ink); }
.badge-light-success { background: var(--c-success-050); color: var(--c-success-ink); }
.badge-light-warning, .badge-light-accent { background: var(--c-accent-050); color: var(--c-accent-ink); }
.badge-light-danger { background: var(--c-danger-050); color: var(--c-danger-ink); }
.badge-light-info { background: var(--c-info-050); color: var(--c-info-ink); }
.badge-light { background: var(--c-surface-2); color: var(--c-ink-soft); }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border-radius: var(--r-pill);
  background: var(--c-surface); border: 1.5px solid var(--c-border-strong);
  font-weight: 600; font-size: .88rem; color: var(--c-ink-soft);
  transition: all var(--t-fast); cursor: pointer;
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.chip.active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }

/* ---------- 10. ALERTS ---------------------------------------------------- */
.alert {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: var(--r); border: 1px solid transparent;
  margin-bottom: 1rem;
}
.alert .icon { margin-top: .1rem; }
.alert-primary { background: var(--c-primary-050); color: var(--c-primary-ink); border-color: var(--c-primary-100); }
.alert-success { background: var(--c-success-050); color: var(--c-success-ink); }
.alert-warning { background: var(--c-warning-050); color: var(--c-warning-ink); }
.alert-danger  { background: var(--c-danger-050);  color: var(--c-danger-ink); }
.alert-info    { background: var(--c-info-050);    color: var(--c-info-ink); }

/* ---------- 11. PROGRESS -------------------------------------------------- */
.progress { height: 10px; background: var(--c-surface-2); border-radius: var(--r-pill); overflow: hidden; }
.progress-bar { height: 100%; background: var(--c-primary); border-radius: var(--r-pill); transition: width .4s ease; }
.progress-bar.bg-accent { background: var(--c-accent); }
.progress-bar.bg-danger { background: var(--c-danger); }

/* ---------- 12. TABLES ---------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table th { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.table-hover tbody tr { transition: background var(--t-fast); }
.table-hover tbody tr:hover { background: var(--c-surface-2); }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ---------- 13. SEPARATOR / MISC ----------------------------------------- */
.separator { border-bottom: 1px solid var(--c-border); }
.symbol { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--c-surface-2); flex: 0 0 auto; }
.symbol img { width: 100%; height: 100%; object-fit: cover; }
.symbol-40px { width: 40px; height: 40px; } .symbol-50px { width: 50px; height: 50px; } .symbol-60px { width: 60px; height: 60px; }
.spinner-border {
  display: inline-block; width: 1.4rem; height: 1.4rem; border: 3px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* stat tile */
.stat-tile { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; }
.stat-tile .stat-value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.stat-tile .stat-label { color: var(--c-muted); font-size: .85rem; font-weight: 600; }

/* ---------- 14. APP SHELL ------------------------------------------------- */
.app-shell { display: flex; min-height: 100dvh; }
.app-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 60;
  background: #0E1512; color: #C9D6CE;
  display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.06);
  transition: transform var(--t);
}
[data-bs-theme="dark"] .app-sidebar { background: #0A0F18; }
.app-sidebar-logo {
  display: flex; align-items: center; gap: .6rem; height: var(--header-h);
  padding: 0 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); flex: 0 0 auto;
}
.app-sidebar-logo .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: #fff; }
.app-sidebar-menu { flex: 1 1 auto; overflow-y: auto; padding: 1rem .75rem 2rem; }
.menu-section { display: block; padding: .9rem .75rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6B7B72; }
.menu-link {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: var(--r);
  color: #C9D6CE; font-weight: 600; font-size: .95rem; transition: background var(--t-fast), color var(--t-fast); min-height: 44px;
}
.menu-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu-link.active { background: var(--c-primary); color: #fff; }
.menu-link.active .icon { color: #fff; }
.menu-link .icon { color: #9FB3A8; }

.app-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-w); }
.app-header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--c-border);
}
.app-content { flex: 1 1 auto; padding: 1.5rem; width: 100%; }
.app-content-inner { max-width: 1200px; margin-inline: auto; }
.app-footer { border-top: 1px solid var(--c-border); padding: 1rem 1.5rem; color: var(--c-muted); font-size: .85rem; }

.sidebar-backdrop { position: fixed; inset: 0; background: rgba(10,15,12,.5); z-index: 55; opacity: 0; visibility: hidden; transition: opacity var(--t); }
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

/* page toolbar */
.app-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading { font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; margin: 0; }
.page-sub { color: var(--c-muted); margin-top: .15rem; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--c-muted); font-size: .85rem; }
.breadcrumb a { color: var(--c-muted); } .breadcrumb a:hover { color: var(--c-primary); }

/* bottom nav (mobile) */
.bottom-nav { display: none; }

/* ---------- 15. DROPDOWN -------------------------------------------------- */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; min-width: 200px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: .4rem; display: none;
}
.dropdown-menu.show { display: block; animation: dd-in .12s ease; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .6rem .75rem; border-radius: var(--r-sm); color: var(--c-ink); font-weight: 600; font-size: .92rem;
}
.dropdown-item:hover { background: var(--c-surface-2); color: var(--c-ink); }
.dropdown-item.text-danger:hover { background: var(--c-danger-050); }
.dropdown-divider { border-top: 1px solid var(--c-border); margin: .35rem 0; }
.dropdown-header { padding: .5rem .75rem; }

/* ---------- 16. MODAL ----------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1080; display: none; overflow-y: auto; padding: 1rem; }
.modal.show { display: flex; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1070; background: rgba(8,12,18,.5);
  opacity: 0; transition: opacity var(--t);
}
.modal-backdrop.show { opacity: 1; }
.modal-dialog {
  position: relative; margin: auto; width: 100%; max-width: 520px;
  animation: modal-in .2s cubic-bezier(.16,1,.3,1);
}
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 2rem); }
.modal-sm { max-width: 380px; } .modal-lg { max-width: 760px; } .modal-xl { max-width: 1040px; }
.modal-fullscreen-sm-down {}
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-content {
  width: 100%; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100dvh - 2rem);
}
.modal-header { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--c-border); }
.modal-title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin: 0; }
.modal-body { padding: 1.35rem; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: .6rem; padding: 1.1rem 1.35rem; border-top: 1px solid var(--c-border); }
.btn-close {
  margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-muted); transition: background var(--t-fast);
}
.btn-close:hover { background: var(--c-surface-2); color: var(--c-ink); }
.btn-close::before { content: ''; width: 1.1rem; height: 1.1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; }
body.modal-open { overflow: hidden; }

/* ---------- 17. TURBO / ADS / DARK TWEAKS -------------------------------- */
.turbo-progress-bar { background: var(--c-primary); height: 3px; }
.ads-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 110px; padding: 1rem; margin: 1.25rem 0; border: 1px dashed var(--c-border-strong);
  border-radius: var(--r); color: var(--c-muted); text-align: center; user-select: none;
  background: repeating-linear-gradient(45deg, transparent 0 10px, var(--c-surface-2) 10px 20px);
}
.ads-placeholder-tag { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.ads-placeholder-key { font-family: 'SFMono-Regular', Menlo, monospace; font-size: .8rem; margin-top: .25rem; }

/* ---------- 18. RESPONSIVE: sidebar → drawer + bottom nav ----------------- */
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.show { transform: none; }
  .app-main { margin-left: 0; }
}
@media (max-width: 575.98px) {
  body { font-size: 17px; }
  .app-content { padding: 1rem .75rem calc(72px + env(safe-area-inset-bottom)); }
  .card { border-radius: var(--r); }
  .card-body { padding: 1.1rem; }
  .page-heading { font-size: 1.45rem; }
  .modal { padding: 0; }
  .modal-dialog { max-width: 100%; margin: 0; min-height: 100%; }
  .modal-dialog-centered { align-items: flex-end; min-height: 100%; }
  .modal-content { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92dvh; }
  .modal-sheet .modal-content { border-radius: 0; max-height: 100dvh; min-height: 100dvh; }

  /* bottom navigation */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    box-shadow: 0 -2px 16px rgba(15,23,42,.08); align-items: stretch;
  }
  .bottom-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--c-muted); font-size: .7rem; font-weight: 700; text-decoration: none; margin: 6px 4px; border-radius: var(--r);
  }
  .bottom-nav-item .icon { width: 1.5rem; height: 1.5rem; }
  .bottom-nav-item.active { background: var(--c-primary-050); color: var(--c-primary-ink); }
}

/* ---------- 19. ACCESSIBILITY -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- 20. METRONIC COMPAT (for not-yet-hand-rewritten views) ------- */
/* These map leftover Metronic/Bootstrap class names onto the new system so
   every page renders correctly even before a bespoke rewrite. */
.page-title { display: flex; flex-direction: column; justify-content: center; }
.page-title h1, .page-title .page-heading { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; margin: 0; }
.separator-dashed { border-bottom: 1px dashed var(--c-border); }
.text-hover-primary:hover { color: var(--c-primary) !important; }
.text-active-primary.active, .text-active-primary:active { color: var(--c-primary) !important; }
.badge-circle { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; justify-content: center; }
.symbol-label { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--c-surface-2); border-radius: inherit; font-weight: 700; }
.symbol.symbol-circle, .symbol.symbol-circle .symbol-label { border-radius: 50%; }
.h-2px { height: 2px !important; } .h-4px { height: 4px !important; } .h-8px { height: 8px !important; } .h-10px { height: 10px !important; } .h-15px { height: 15px !important; } .h-20px { height: 20px !important; }
.card-rounded { border-radius: var(--r-lg) !important; }
.btn-active-light-primary:hover, .btn-active-light-primary:active { background: var(--c-primary-050) !important; color: var(--c-primary-ink) !important; }
.btn-active-light-warning:hover, .btn-active-light-warning:active { background: var(--c-accent-050) !important; color: var(--c-accent-ink) !important; }
.btn-active-light-danger:hover, .btn-active-light-danger:active { background: var(--c-danger-050) !important; color: var(--c-danger-ink) !important; }
.btn-active-color-primary:hover { color: var(--c-primary) !important; }
.btn-flush { padding: 0 !important; background: transparent !important; border: 0 !important; }
.indicator-label { display: inline-flex; align-items: center; gap: .5rem; }
.indicator-progress { display: none; }
.ratio { position: relative; width: 100%; } .ratio::before { content: ''; display: block; padding-top: 56.25%; } .ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.scroll-y { overflow-y: auto; }
.w-md-500px { width: 100%; } @media (min-width: 768px) { .w-md-500px { width: 500px; } }
.min-w-150px { min-width: 150px; } .min-w-200px { min-width: 200px; } .min-w-250px { min-width: 250px; }
.fw-bolder { font-weight: 800 !important; }
.list-unstyled { list-style: none; padding: 0; }
.cursor-pointer { cursor: pointer; }
.bg-hover-light:hover { background: var(--c-surface-2); }
.text-gray-600 { color: var(--c-muted) !important; }
.rounded-3 { border-radius: var(--r-lg) !important; }
.flatpickr-input[readonly] { background: var(--c-surface); }
/* legacy keenicon <i> tags: hide the empty font glyph boxes before the JS
   shim swaps them, so no blank squares flash on slow first paint. */
i.ki-duotone, i.ki-solid, i.ki-outline { display: inline-flex; align-items: center; justify-content: center; }
i.ki-duotone:empty, i.ki-solid:empty, i.ki-outline:empty { min-width: 1em; }

/* ============================================================================
   Section 21: FINAL COMPAT GAPS
   Classes still referenced by not-yet-hand-rewritten views. Keeps every page
   visually correct under the new design system until each gets a bespoke pass.
   ========================================================================== */

/* icon shim output (<i class="ki-*"> → <svg class="ki-i ...">) */
.ki-i { width: 1em; height: 1em; font-size: 1.25rem; flex: 0 0 auto;
        vertical-align: -.18em; display: inline-block; }

/* extra font sizes used by Metronic markup */
.fs-2hx { font-size: 2.5rem !important; line-height: 1.1 !important; }
.fs-5x  { font-size: 4rem   !important; line-height: 1.05 !important; }

/* layout containers */
.app-container { width: 100%; }
.app-toolbar   { margin-bottom: 1rem; }

/* card variants */
.card-flush { box-shadow: none; }
.card-label { font-family: var(--font-head); font-weight: 700; color: var(--c-ink); }
.card-rounded-top { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.card-header-stretch { align-items: stretch; }

/* pagination */
.pagination { display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.page-item { display: inline-flex; }
.page-link { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem; border-radius: var(--r);
  background: var(--c-surface); color: var(--c-ink-soft); border: 1px solid var(--c-border);
  text-decoration: none; font-weight: 600; transition: background .15s, color .15s; }
.page-link:hover { background: var(--c-surface-2); color: var(--c-ink); }
.page-item.active .page-link { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.page-item.disabled .page-link { opacity: .45; pointer-events: none; }

/* scrollable modal */
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3rem); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }

/* max-width helpers */
.mw-700px { max-width: 700px !important; }
.mw-800px { max-width: 800px !important; }
.mw-900px { max-width: 900px !important; }

/* fixed width/height helpers */
.w-5px   { width: 5px   !important; }
.w-250px { width: 250px !important; }

/* light badges + bg fills (secondary/dark) */
.badge-light-secondary { background: var(--c-surface-2); color: var(--c-ink-soft); }
.badge-light-dark      { background: var(--c-ink-soft); color: #fff; }
.bg-light-secondary    { background: var(--c-surface-2) !important; }

/* symbol sizes */
.symbol-35px { width: 35px; height: 35px; }
.symbol-35px > * , .symbol-40px > * { width: 100%; height: 100%; }

/* breadcrumb minimal */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; align-items: center; }
.breadcrumb-item { color: var(--c-muted); }
.breadcrumb-item.active { color: var(--c-ink); }

/* row-cols-* utilities (Bootstrap-compat) — force N equal columns per row.
   Must come after `.col { flex:1 0 0% }` so the width wins. Used by the diary
   meal grid (row-cols-1 / row-cols-sm-2 / row-cols-md-N) and others. */
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.3333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.6667%; }
@media (min-width: 576px) {
  .row-cols-sm-1 > * { width: 100%; }
  .row-cols-sm-2 > * { width: 50%; }
  .row-cols-sm-3 > * { width: 33.3333%; }
  .row-cols-sm-4 > * { width: 25%; }
  .row-cols-sm-5 > * { width: 20%; }
  .row-cols-sm-6 > * { width: 16.6667%; }
}
@media (min-width: 768px) {
  .row-cols-md-1 > * { width: 100%; }
  .row-cols-md-2 > * { width: 50%; }
  .row-cols-md-3 > * { width: 33.3333%; }
  .row-cols-md-4 > * { width: 25%; }
  .row-cols-md-5 > * { width: 20%; }
  .row-cols-md-6 > * { width: 16.6667%; }
}
@media (min-width: 992px) {
  .row-cols-lg-1 > * { width: 100%; }
  .row-cols-lg-2 > * { width: 50%; }
  .row-cols-lg-3 > * { width: 33.3333%; }
  .row-cols-lg-4 > * { width: 25%; }
  .row-cols-lg-5 > * { width: 20%; }
  .row-cols-lg-6 > * { width: 16.6667%; }
}

/* Recipe card thumbnail — "blurred fill": the whole dish shows via contain
   (no crop), while a blurred, scaled copy fills the frame behind it so there
   are no empty letterbox bars. Fixes over-zoomed / off-centre recipe covers. */
.recipe-thumb { position: relative; overflow: hidden; background: var(--bs-gray-100, #f4f4f4); }
.recipe-thumb__bg,
.recipe-thumb__fg {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center;
}
.recipe-thumb__bg { background-size: cover; filter: blur(18px) brightness(.92); transform: scale(1.15); }
.recipe-thumb__fg { background-size: contain; }