/* ══════════════════════════════════════════════════
   Utility CSS — Core reusable classes
   ══════════════════════════════════════════════════ */

/* ── Text Alignment ── */
.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

/* ── Font ── */
.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fs-xxs {
    font-size: 0.625rem;
}

.fs-xs {
    font-size: 0.75rem;
}

.fs-sm {
    font-size: 0.8rem;
}

.fs-base {
    font-size: 0.875rem;
}

.fs-md {
    font-size: 1rem;
}

.fs-lg {
    font-size: 1.25rem;
}

.fs-xl {
    font-size: 1.5rem;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ── Colors ── */
.text-secondary,
.text-muted {
    color: var(--text-secondary);
}

.text-primary-c {
    color: var(--primary);
}

/* Lucide SVG icons use stroke, not color — force override */
.text-primary-c svg,
svg.text-primary-c,
i.text-primary-c {
    color: var(--primary) !important;
}

i.text-primary-c svg {
    stroke: var(--primary) !important;
}

.text-success {
    color: var(--success-color);
}

.text-danger {
    color: var(--danger-color);
}

.text-warning {
    color: var(--warning-color);
}

.text-info {
    color: var(--info-color);
}

.text-white {
    color: white;
}

/* ── Semantic tones ── */
.tone-positive {
    color: var(--success-color);
}

.tone-negative {
    color: var(--danger-color);
}

.tone-neutral {
    color: var(--text-secondary);
}

.tone-warning {
    color: var(--warning-color);
}

/* ── Spacing ── */
.mb-0 {
    margin-bottom: 0;
}

.mb-025 {
    margin-bottom: 0.25rem;
}

.mb-05 {
    margin-bottom: 0.5rem;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-15 {
    margin-bottom: 1.5rem;
}

.mt-05 {
    margin-top: 0.5rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-15 {
    margin-top: 1.5rem;
}

.m-025 {
    margin: 0.25rem;
}

.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

.p-05 {
    padding: 0.5rem;
}

.p-1 {
    padding: 1rem;
}

.p-15 {
    padding: 1.5rem;
}

.px-05 {
    padding-inline: 0.5rem;
}

.py-05 {
    padding-block: 0.5rem;
}

.pl-1 {
    padding-left: 1rem;
}

.rounded {
    border-radius: 0.5rem;
}

/* ── Flex ── */
.d-flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

/* F-36 (W7): flex-child truncation (text-overflow) — used app-wide. */
.min-w-0 {
    min-width: 0;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: start;
}

.items-end {
    align-items: end;
}

.items-stretch {
    align-items: stretch;
}

.self-start {
    align-self: start;
}

.self-end {
    align-self: end;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: flex-end;
}

.gap-025 {
    gap: 0.25rem;
}

.gap-05 {
    gap: 0.5rem;
}

.gap-075 {
    gap: 0.75rem;
}

.gap-1 {
    gap: 1rem;
}

.gap-15 {
    gap: 1.5rem;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-none {
    flex: none;
}

/* ── Background ── */
.bg-subtle {
    background: var(--bg-tertiary);
}

/* ── Grid ── */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.grid-2-xl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* ── Display ── */
.d-none {
    display: none;
}

.d-inline {
    display: inline;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.min-h-160 {
    min-height: 160px;
}

.cursor-pointer {
    cursor: pointer;
}

.overflow-visible {
    overflow: visible;
}

/* ── Icon Sizing ── */
.icon-xs  { width: 0.75rem; height: 0.75rem; }  /* 12px */
.icon-sm  { width: 1rem;    height: 1rem;    }  /* 16px */
.icon-md  { width: 1.25rem; height: 1.25rem; }  /* 20px */
.icon-lg  { width: 1.5rem;  height: 1.5rem;  }  /* 24px */
.icon-xl  { width: 2rem;    height: 2rem;    }  /* 32px */
.icon-2xl { width: 3rem;    height: 3rem;    }  /* 48px */
.icon-3xl { width: 4rem;    height: 4rem;    }  /* 64px */

/* ── Inline Icons ── */
.icon-inline {
    display: inline;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.icon-inline-sm {
    display: inline;
    margin-right: 0.5rem;
}

/* ── Extended spacing & layout utilities (compact) ── */
/* Margin */
.mt-025 { margin-top: 0.25rem; }
.mb-075 { margin-bottom: 0.75rem; }
.mb-125 { margin-bottom: 1.25rem; }
.mb-2   { margin-bottom: 2rem; }
.mx-025 { margin: 0 0.25rem; }
.my-025 { margin: 0.25rem 0; }
/* Padding */
.pl-125 { padding-left: 1.25rem; }
.p-3    { padding: 3rem; }
.pb-05  { padding-bottom: 0.5rem; }
.px-025 { padding-inline: 0.25rem; }
.py-025 { padding-block: 0.25rem; }
.py-075 { padding-block: 0.75rem; }
.py-1   { padding-block: 1rem; }
.py-2   { padding-block: 2rem; }
.px-075 { padding-inline: 0.75rem; }
/* Grid & width */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.w-30   { width: 30%; }
.w-35   { width: 35%; }
.fs-2xl { font-size: 2rem; }
.col-min-120 { min-width: 120px; }
/* Misc */
.flex-2       { flex: 2; }
.list-none    { list-style: none; }
.font-mono    { font-family: monospace; }
.pos-relative { position: relative; }

/* ── Accessibility ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Borders ── */
.border-bottom {
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 768px) {

    .grid-2,
    .grid-2-xl {
        grid-template-columns: 1fr;
    }
}