/*
 * Admin utility classes used by pages that were written against a Tailwind-style
 * vocabulary (POS, Subscription, GiftCards). Admin does not ship Tailwind; these
 * definitions back the classes those pages reference with design-token values.
 * Loaded after admin.css.
 */

/* ---- Borders & dividers ---- */
.border-b { border-bottom: 1px solid var(--border-subtle, var(--color-neutral-200)); }
.border-t { border-top: 1px solid var(--border-subtle, var(--color-neutral-200)); }

.divide-y > * + * {
    border-top: 1px solid var(--border-subtle, var(--color-neutral-200));
}

.divide-border > * + * {
    border-color: var(--border-subtle, var(--color-neutral-200));
}

/* ---- Box model ---- */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-md { padding: var(--spacing-md); }
.p-xl { padding: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mt-auto { margin-top: auto; }

.h-full { height: 100%; }
.h-\[calc\(100vh-140px\)\] { height: calc(100vh - 140px); }

/* Tailwind-style parent/hover hook used by action buttons inside cards. */
.group .group-hover\:opacity-100:hover,
.group:hover .group-hover\:opacity-100 {
    opacity: 1;
}

.transition-opacity { transition: opacity var(--transition-base, 0.2s ease); }

.opacity-0 { opacity: 0; }

.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }

.shadow-lg { box-shadow: var(--shadow-lg); }

/* ---- Overflow & text ---- */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

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

.text-4xl {
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: 700;
}

/* ---- Spinners (Bootstrap-compatible name; admin.css does not ship Bootstrap) ---- */
.spinner-border {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

/* ---- Responsive grid helpers (complement base.css's md:/lg: sets) ---- */
@media (min-width: 768px) {
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
    .xl\:col-span-4 { grid-column: span 4 / span 4; }
    .xl\:col-span-8 { grid-column: span 8 / span 8; }
    .xl\:col-span-12 { grid-column: span 12 / span 12; }
}