/* ─── Utilities ─────────────────────────────────────────────── */

/* ── Container ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ── Grid system ── */
.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto   { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* ── Flex helpers ── */
.flex          { display: flex; }
.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-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Spacing helpers ── */
.m-0  { margin: 0; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* ── Typography ── */
.text-2xl { font-size: var(--text-2xl); }
.text-xl  { font-size: var(--text-xl); }
.text-lg  { font-size: var(--text-lg); }
.text-base{ font-size: var(--text-base); }
.text-sm  { font-size: var(--text-sm); }
.text-xs  { font-size: var(--text-xs); }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.text-primary  { color: var(--primary); }
.text-dark     { color: var(--dark); }
.text-gray     { color: var(--gray); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.text-white    { color: var(--white); }

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

.uppercase { text-transform: uppercase; }
.truncate  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Backgrounds ── */
.bg-white   { background: var(--white); }
.bg-light   { background: var(--gray-lighter); }
.bg-primary { background: var(--primary); }

/* ── Border radius ── */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Shadow ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Visibility ── */
.hidden    { display: none !important; }
.invisible { visibility: hidden; }
.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;
}

/* ── Table ── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  background: var(--gray-lighter);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--gray-dark);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--gray-light);
}

.table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--gray-light);
  color: var(--dark);
  vertical-align: middle;
}

.table tr:hover td {
  background: var(--gray-lighter);
}

/* ── Responsive breakpoints ── */
@media (max-width: 1024px) {
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .hide-tablet { display: none !important; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4  { grid-template-columns: 1fr; }
  .btn:not(.btn-icon) { width: 100%; justify-content: center; }
  .hide-mobile  { display: none !important; }
  .show-mobile  { display: flex !important; }
}

@media (min-width: 769px) {
  .show-mobile { display: none !important; }
}