/* ================================
   UTILITY CLASSES
   Small, single-purpose helpers used
   across templates to replace inline styles.
================================ */

/* --- Spacing --- */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }

.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }

.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }

.m-0  { margin: 0; }
.p-0  { padding: 0; }

.p-2  { padding: 0.5rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-5  { padding: 1.25rem; }

.px-2 { padding-left: 0.5rem;  padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem;    padding-bottom: 1rem; }

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

/* --- Flex --- */
.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }

/* Shorthand combos used frequently */
.flex-center         { display: flex; align-items: center; justify-content: center; }
.flex-between        { display: flex; align-items: center; justify-content: space-between; }
.flex-gap-2          { display: flex; gap: 0.5rem; }
.flex-gap-3          { display: flex; gap: 0.75rem; }
.flex-gap-4          { display: flex; gap: 1rem; }
.flex-gap-5          { display: flex; gap: 1.25rem; }
.flex-wrap-gap-3     { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.flex-wrap-gap-4     { display: flex; flex-wrap: wrap; gap: 1rem; }
.inline-flex-gap-2   { display: inline-flex; align-items: center; gap: 0.5rem; }

/* --- Grid --- */
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3     { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; }
.grid-auto  { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; }

/* --- Text --- */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-left     { text-align: left; }

.font-500      { font-weight: 500; }
.font-600      { font-weight: 600; }
.font-700      { font-weight: 700; }

.text-xs       { font-size: 0.75rem; }
.text-sm       { font-size: 0.85rem; }
.text-base     { font-size: 1rem; }
.text-lg       { font-size: 1.1rem; }
.text-xl       { font-size: 1.25rem; }

.text-muted    { color: var(--text-muted); }
.text-subtle   { color: var(--text-faint); }
.text-dark     { color: var(--text); }
.text-primary  { color: var(--primary); }
.text-danger   { color: var(--danger); }
.text-success  { color: var(--success); }
.text-warning  { color: var(--warning); }

.text-sm-muted { font-size: 0.8rem; color: var(--text-muted); }
.text-sm-bold  { font-size: 0.85rem; font-weight: 600; }

.nowrap        { white-space: nowrap; }

/* --- Background --- */
.bg-light      { background-color: var(--bg-subtle); }
.bg-subtle     { background-color: var(--bg-subtle); }
.bg-white      { background-color: var(--white); }

/* --- Border --- */
.border-bottom { border-bottom: 1px solid var(--border); }
.border-top    { border-top: 1px solid var(--border); }
.border-left-accent { border-left: 3px solid var(--color-primary, var(--primary)); }

/* --- Card modifiers --- */
.card-flush    { padding: 0 !important; overflow: hidden; }
.card-center   { text-align: center; padding: 1rem; }

/* --- Table utilities --- */
.col-center    { text-align: center; }
.col-right     { text-align: right; }
.sticky-left   { position: sticky; left: 0; background: var(--color-bg-card, var(--white)); z-index: 1; }

/* --- Overflow --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* --- Misc --- */
.cursor-pointer  { cursor: pointer; }
.w-full          { width: 100%; }
.w-auto          { width: auto; }
.h-full          { height: 100%; }
.rounded         { border-radius: 6px; }
.rounded-sm      { border-radius: 4px; }

/* Section label — small uppercase heading used above content panels */
.section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}