/* =========================================================================
   Calquvo — utilities.css
   A hand-written, zero-dependency replacement for the Tailwind CDN.
   No build step, no Node, no framework — just a plain CSS file.

   This covers every utility class actually used across the site's PHP
   templates (public pages + admin panel) as of the last audit. If you add
   a NEW class to any template that isn't defined here, it simply won't
   style anything — add a matching rule to this file (grouped by category
   below) when that happens.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: 'Inter', system-ui, sans-serif; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.font-sans { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Quicksand', 'Inter', system-ui, sans-serif; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* =========================================================================
   Base reset ("preflight") — this is what Tailwind used to strip out
   automatically before any utility classes applied. Without this block,
   the browser's own defaults show through: blue underlined links, bold
   heading margins that overlap the sticky nav, bulleted footer lists, etc.
   This is the piece that was missing and caused the raw/broken look.
   ========================================================================= */
h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre, hr { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button, [type="button"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; }
button, [role="button"] { cursor: pointer; }
img, svg, video, canvas { display: block; vertical-align: middle; max-width: 100%; }
table { border-collapse: collapse; }
:disabled { cursor: default; }
[hidden] { display: none; }

/* ---------- Brand color palette (matches the old tailwind.config) ---------- */
:root {
  --navy: #0B1220;
  --brand: #2563EB;
  --cyan: #06B6D4;
  --bgsoft: #F8FAFC;
  --ink: #111827;
  --muted: #64748B;
  --bordersoft: #E2E8F0;
}

/* ---------- Display ---------- */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none !important; }

/* ---------- Flexbox ---------- */
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-self-start { justify-self: start; }
.shrink-0 { flex-shrink: 0; }

/* ---------- Grid ---------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }

/* ---------- Gap ---------- */
.gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-10 { gap: 2.5rem; }

/* ---------- Spacing scale used by margin/padding/space-y below ---------- */
/* 0.5=.125rem 1=.25rem 1.5=.375rem 2=.5rem 2.5=.625rem 3=.75rem 3.5=.875rem
   4=1rem 5=1.25rem 6=1.5rem 7=1.75rem 8=2rem 9=2.25rem 10=2.5rem 11=2.75rem
   12=3rem 14=3.5rem 16=4rem 24=6rem */

.mt-0\.5{margin-top:.125rem} .mt-1{margin-top:.25rem} .mt-1\.5{margin-top:.375rem}
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-7{margin-top:1.75rem}
.mt-8{margin-top:2rem} .mt-10{margin-top:2.5rem} .mt-14{margin-top:3.5rem} .mt-16{margin-top:4rem}
.-mt-0\.5{margin-top:-.125rem} .-mt-3{margin-top:-.75rem}
.mb-1{margin-bottom:.25rem} .mb-1\.5{margin-bottom:.375rem} .mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem} .mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem} .mb-8{margin-bottom:2rem}
.ml-2{margin-left:.5rem} .ml-5{margin-left:1.25rem} .ml-64{margin-left:16rem}
.mr-2{margin-right:.5rem} .mr-3{margin-right:.75rem}
.mx-1{margin-left:.25rem;margin-right:.25rem} .mx-auto{margin-left:auto;margin-right:auto}
.my-4{margin-top:1rem;margin-bottom:1rem}
.pt-2{padding-top:.5rem} .pt-6{padding-top:1.5rem}
.pl-9{padding-left:2.25rem} .pl-11{padding-left:2.75rem} .pl-12{padding-left:3rem}
.pr-3{padding-right:.75rem} .pr-4{padding-right:1rem} .pr-32{padding-right:8rem}
.p-2{padding:.5rem} .p-3{padding:.75rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem}
.px-1\.5{padding-left:.375rem;padding-right:.375rem}
.px-2{padding-left:.5rem;padding-right:.5rem} .px-3{padding-left:.75rem;padding-right:.75rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem} .px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem} .px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem} .py-1\.5{padding-top:.375rem;padding-bottom:.375rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem} .py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem} .py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem} .py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem} .py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem} .py-16{padding-top:4rem;padding-bottom:4rem}
.py-24{padding-top:6rem;padding-bottom:6rem}

.space-y-0\.5>*+*{margin-top:.125rem} .space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem} .space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem} .space-y-5>*+*{margin-top:1.25rem} .space-y-6>*+*{margin-top:1.5rem}

/* ---------- Sizing ---------- */
.w-4{width:1rem} .w-5{width:1.25rem} .w-8{width:2rem} .w-9{width:2.25rem}
.w-10{width:2.5rem} .w-11{width:2.75rem} .w-12{width:3rem} .w-56{width:14rem}
.w-64{width:16rem} .w-full{width:100%}
.h-4{height:1rem} .h-5{height:1.25rem} .h-8{height:2rem} .h-9{height:2.25rem}
.h-10{height:2.5rem} .h-11{height:2.75rem} .h-12{height:3rem} .h-16{height:4rem}
.h-full{height:100%} .h-fit{height:fit-content}
.min-h-screen{min-height:100vh}
.max-w-sm{max-width:24rem} .max-w-md{max-width:28rem} .max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem} .max-w-7xl{max-width:80rem} .max-w-none{max-width:none}

/* ---------- Position ---------- */
.relative{position:relative} .absolute{position:absolute} .fixed{position:fixed} .sticky{position:sticky}
.inset-y-0{top:0;bottom:0}
.top-0{top:0} .top-2{top:.5rem} .top-2\.5{top:.625rem} .top-4{top:1rem} .top-4\.5{top:1.125rem}
.left-0{left:0} .left-3{left:.75rem} .left-4{left:1rem}
.right-0{right:0} .right-2{right:.5rem}
.z-20{z-index:20} .z-30{z-index:30} .z-40{z-index:40}
.-translate-x-full{transform:translateX(-100%)}
.translate-x-0{transform:translateX(0)}

/* ---------- Typography ---------- */
.text-xs{font-size:.75rem;line-height:1rem} .text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem} .text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem} .text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem} .text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-\[11px\]{font-size:11px}
.font-normal{font-weight:400} .font-medium{font-weight:500} .font-semibold{font-weight:600}
.font-bold{font-weight:700} .font-extrabold{font-weight:800}
.leading-tight{line-height:1.25} .leading-relaxed{line-height:1.625}
.tracking-tight{letter-spacing:-.025em} .tracking-wide{letter-spacing:.025em}
.text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uppercase{text-transform:uppercase}
.underline{text-decoration:underline}
.list-disc{list-style-type:disc} .list-none{list-style-type:none}

/* ---------- Colors: backgrounds ---------- */
.bg-navy{background-color:var(--navy)} .bg-brand{background-color:var(--brand)}
.bg-bgsoft{background-color:var(--bgsoft)} .bg-white{background-color:#fff}
.bg-amber-50{background-color:#fffbeb} .bg-green-50{background-color:#f0fdf4} .bg-red-50{background-color:#fef2f2}
.bg-brand\/10{background-color:rgba(37,99,235,.1)} .bg-brand\/5{background-color:rgba(37,99,235,.05)}
.bg-cyan\/10{background-color:rgba(6,182,212,.1)}
.bg-bgsoft\/40{background-color:rgba(248,250,252,.4)}
.bg-white\/10{background-color:rgba(255,255,255,.1)} .bg-white\/70{background-color:rgba(255,255,255,.7)}
.bg-white\/80{background-color:rgba(255,255,255,.8)}
.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-from,#fff), var(--tw-to,transparent))}
.from-white{--tw-from:#fff} .to-bgsoft{--tw-to:var(--bgsoft)}

/* ---------- Colors: text ---------- */
.text-navy{color:var(--navy)} .text-brand{color:var(--brand)} .text-cyan{color:var(--cyan)}
.text-ink{color:var(--ink)} .text-ink\/90{color:rgba(17,24,39,.9)} .text-muted{color:var(--muted)}
.text-white{color:#fff} .text-white\/40{color:rgba(255,255,255,.4)} .text-white\/50{color:rgba(255,255,255,.5)}
.text-white\/60{color:rgba(255,255,255,.6)} .text-white\/70{color:rgba(255,255,255,.7)} .text-white\/80{color:rgba(255,255,255,.8)}
.text-amber-800{color:#92400e} .text-green-700{color:#15803d} .text-green-800{color:#166534}
.text-green-600{color:#16a34a} .text-amber-600{color:#d97706} .text-amber-500{color:#f59e0b}
.text-red-500{color:#ef4444} .text-red-700{color:#b91c1c} .text-red-800{color:#991b1b}
.text-slate-400{color:#94a3b8} .text-slate-500{color:#64748b} .text-slate-600{color:#475569} .text-slate-700{color:#334155}
.bg-slate-100{background-color:#f1f5f9}

/* ---------- Colors: borders ---------- */
.border{border-width:1px;border-style:solid;border-color:var(--bordersoft)}
.border-t{border-top-width:1px;border-top-style:solid;border-color:var(--bordersoft)}
.border-b{border-bottom-width:1px;border-bottom-style:solid;border-color:var(--bordersoft)}
.border-y{border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:var(--bordersoft)}
.border-bordersoft{border-color:var(--bordersoft)}
.border-navy{border-color:var(--navy)} .border-brand{border-color:var(--brand)}
.border-amber-200{border-color:#fde68a} .border-green-200{border-color:#bbf7d0} .border-red-200{border-color:#fecaca}
.border-brand\/20{border-color:rgba(37,99,235,.2)} .border-white\/10{border-color:rgba(255,255,255,.1)}
.divide-y>*+*{border-top-width:1px;border-top-style:solid} .divide-bordersoft>*+*{border-color:var(--bordersoft)}

/* ---------- Radius / shadow ---------- */
.rounded{border-radius:.25rem} .rounded-md{border-radius:.375rem} .rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem} .rounded-2xl{border-radius:1.25rem} .rounded-full{border-radius:9999px}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)} .shadow-lg{box-shadow:0 10px 25px -5px rgba(0,0,0,.1)}

/* ---------- Misc / effects ---------- */
.cursor-pointer{cursor:pointer}
.overflow-hidden{overflow:hidden} .overflow-x-auto{overflow-x:auto}
.opacity-0{opacity:0}
.invisible{visibility:hidden}
.transition{transition:all .15s ease}
.transition-transform{transition:transform .15s ease}
.not-prose{all:revert}

/* ---------- Interactive states ---------- */
.hover\:bg-bgsoft:hover{background-color:var(--bgsoft)} .hover\:bg-bgsoft\/60:hover{background-color:rgba(248,250,252,.6)}
.hover\:bg-brand\/90:hover{background-color:rgba(37,99,235,.9)} .hover\:bg-slate-100:hover{background-color:#f1f5f9}
.hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)} .hover\:bg-white\/60:hover{background-color:rgba(255,255,255,.6)}
.hover\:bg-white\/90:hover{background-color:rgba(255,255,255,.9)}
.hover\:border-brand:hover{border-color:var(--brand)}
.hover\:shadow-md:hover{box-shadow:0 6px 16px rgba(0,0,0,.08)} .hover\:shadow-sm:hover{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.hover\:text-brand:hover{color:var(--brand)} .hover\:text-ink:hover{color:var(--ink)}
.hover\:text-red-700:hover{color:#b91c1c} .hover\:text-slate-600:hover{color:#475569}
.hover\:text-white:hover{color:#fff} .hover\:text-white\/70:hover{color:rgba(255,255,255,.7)}
.hover\:underline:hover{text-decoration:underline}
.focus\:bg-white:focus{background-color:#fff}
.focus\:outline-none:focus{outline:none}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color,rgba(37,99,235,.4))}
.focus\:ring-brand\/40:focus{--tw-ring-color:rgba(37,99,235,.4)} .focus\:ring-brand\/50:focus{--tw-ring-color:rgba(37,99,235,.5)}
.group:hover .group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:text-brand{color:var(--brand)}
.group:hover .group-hover\:visible{visibility:visible}
.group[open] .group-open\:rotate-180{transform:rotate(180deg)}

/* ---------- Additional utilities used by the current templates ---------- */
.leading-6{line-height:1.5rem} .leading-7{line-height:1.75rem}
.text-blue-200{color:#bfdbfe} .text-blue-300{color:#93c5fd} .text-red-200{color:#fecaca}
.bg-blue-400\/10{background-color:rgba(96,165,250,.10)} .bg-red-400\/10{background-color:rgba(248,113,113,.10)}
.border-blue-400\/10{border-color:rgba(96,165,250,.10)} .border-blue-400\/20{border-color:rgba(96,165,250,.20)} .border-red-400\/20{border-color:rgba(248,113,113,.20)}
.divide-white\/10 > :not([hidden]) ~ :not([hidden]){border-color:rgba(255,255,255,.10)}
.hover\:bg-bgsoft:hover{background-color:var(--bgsoft)} .hover\:bg-bgsoft\/60:hover{background-color:rgba(248,250,252,.60)}
.hover\:bg-brand\/90:hover{background-color:#1d4ed8} .hover\:bg-white\/5:hover{background-color:rgba(255,255,255,.05)}
.hover\:bg-white\/90:hover{background-color:rgba(255,255,255,.90)} .hover\:text-white:hover{color:#fff}
.sm\:p-5{padding:1.25rem} .sm\:p-6{padding:1.5rem} .sm\:text-lg{font-size:1.125rem;line-height:1.75rem}

/* ---------- Responsive breakpoints ---------- */
@media (min-width:640px){
  .sm\:block{display:block} .sm\:inline{display:inline}
  .sm\:flex-row{flex-direction:row}
  .sm\:items-center{align-items:center}
  .sm\:col-span-1{grid-column:span 1/span 1} .sm\:col-span-2{grid-column:span 2/span 2} .sm\:col-span-6{grid-column:span 6/span 6}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sm\:p-8{padding:2rem} .sm\:px-4{padding-left:1rem;padding-right:1rem} .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-24{padding-top:6rem;padding-bottom:6rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem} .sm\:text-5xl{font-size:3rem;line-height:1}
}
@media (min-width:768px){
  .md\:flex{display:flex} .md\:hidden{display:none}
  .md\:ml-64{margin-left:16rem}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .md\:translate-x-0{transform:translateX(0)}
}
@media (min-width:1024px){
  .lg\:col-span-2{grid-column:span 2/span 2} .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:px-8{padding-left:2rem;padding-right:2rem} .lg\:w-72{width:18rem}
}

/* ---------- "!important" utility used once ---------- */
.\!rounded-2xl{border-radius:1.25rem !important}

@media (min-width:1024px){.lg\:grid-cols-\[360px_minmax\(0\,1fr\)\]{grid-template-columns:360px minmax(0,1fr)}}
