/* ==========================================================================
   Utilities — atomic helpers for spacing, layout, display, visibility
   Uses design tokens. Numeric scale: 0..10 mapped to --space-*.
   ========================================================================== */

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

/* ── Flex ─────────────────────────────────────────────────────────────── */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1 1 0%; }
.flex-auto    { flex: 1 1 auto; }
.flex-none    { flex: none; }
.flex-grow    { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }

/* ── Gap ──────────────────────────────────────────────────────────────── */
.gap-0  { gap: 0; }
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ── Spacing (margin / padding) ───────────────────────────────────────── */
.m-0  { margin: 0 !important; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-5  { margin: var(--space-5); }
.m-6  { margin: var(--space-6); }
.m-auto { margin: auto; }

.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-auto { margin-top: auto; }

.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ── Width / height ──────────────────────────────────────────────────── */
.w-full   { width: 100% !important; }
.w-auto   { width: auto; }
.w-fit    { width: fit-content; }
.h-full   { height: 100%; }
.h-auto   { height: auto; }
.min-w-0  { min-width: 0; }

.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 960px; }

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

/* ── Truncation ──────────────────────────────────────────────────────── */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Visibility ──────────────────────────────────────────────────────── */
.invisible { visibility: hidden; }
.visible   { visibility: visible; }
.visually-hidden, .sr-only {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ── Position ────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

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

/* ── Borders & radius ────────────────────────────────────────────────── */
.border    { border: 1px solid var(--border-default); }
.border-t  { border-top: 1px solid var(--border-default); }
.border-b  { border-bottom: 1px solid var(--border-default); }
.border-subtle { border-color: var(--border-subtle); }
.border-none   { border: 0 !important; }

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

/* ── Surfaces & background ───────────────────────────────────────────── */
.bg-base    { background: var(--surface-base); }
.bg-raised  { background: var(--surface-raised); }
.bg-sunken  { background: var(--surface-sunken); }
.bg-tint    { background: var(--surface-tint); }

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

/* ── Cursor ──────────────────────────────────────────────────────────── */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ── Layout primitives ───────────────────────────────────────────────── */
/* Stack: vertical rhythm (gap between children) */
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.stack-1 { --stack-gap: var(--space-1); }
.stack-2 { --stack-gap: var(--space-2); }
.stack-3 { --stack-gap: var(--space-3); }
.stack-4 { --stack-gap: var(--space-4); }
.stack-5 { --stack-gap: var(--space-5); }
.stack-6 { --stack-gap: var(--space-6); }

/* Cluster: horizontal wrapping group */
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-2));
    align-items: center;
}
.cluster-1 { --cluster-gap: var(--space-1); }
.cluster-2 { --cluster-gap: var(--space-2); }
.cluster-3 { --cluster-gap: var(--space-3); }

/* Grid presets */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 240px), 1fr));
    gap: var(--space-4);
}

/* ── Responsive helpers ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .md-d-none { display: none !important; }
    .md-d-block { display: block !important; }
    .md-flex-col { flex-direction: column; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .sm-d-none { display: none !important; }
    .sm-text-center { text-align: center; }
}

/* ── Motion / animation toggles ──────────────────────────────────────── */
.no-transition * { transition: none !important; }
/* =============================================
 * TGA - Utility Classes
 * ============================================= */

/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mt-4 { margin-top: 32px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }

.ml-1 { margin-left: 8px !important; }
.mr-1 { margin-right: 8px !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 8px !important; }
.p-2 { padding: 16px !important; }
.p-3 { padding: 24px !important; }

/* Text */
.text-muted { color: var(--text-muted, #556677) !important; }
.text-secondary { color: var(--text-secondary, #a0aec0) !important; }
.text-primary { color: var(--text-primary, #1a1a2e) !important; }
.text-success { color: var(--success, #2ecc71) !important; }
.text-danger { color: var(--danger, #e74c3c) !important; }
.text-warning { color: var(--warning, #f39c12) !important; }
.text-info { color: var(--info, #3498db) !important; }

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

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

.text-sm { font-size: 12px !important; }
.text-md { font-size: 14px !important; }
.text-lg { font-size: 16px !important; }
.text-xl { font-size: 20px !important; }

.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }

/* Flexbox */
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.flex-1 { flex: 1 !important; }

.gap-1 { gap: 8px !important; }
.gap-2 { gap: 12px !important; }
.gap-3 { gap: 16px !important; }
.gap-4 { gap: 24px !important; }

/* Visibility */
.hidden { display: none !important; }
.visible { display: block !important; }
.hidden-input { display: none; }

@media (max-width: 768px) {
    .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}

/* Width */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }

/* Border */
.border-top { border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important; }

/* Cursor */
.cursor-pointer { cursor: pointer !important; }

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

/* Shared detail info list */
.ticket-info-list {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem;
}

.ticket-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.86rem;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.035);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ticket-info-row:hover {
    border-color: rgba(99, 102, 241, 0.16);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.ticket-info-row-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

.ticket-info-key {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ticket-info-val {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    text-align: right;
    line-height: 1.35;
    min-width: 0;
}

.ticket-info-val.link {
    color: var(--accent-primary, #4f46e5);
    text-decoration: none;
}

.ticket-info-val.link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.14em;
}

.ticket-info-val i {
    margin-right: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

@media (max-width: 768px) {
    .ticket-info-list {
        padding: 0.6rem;
        gap: 0.45rem;
    }

    .ticket-info-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.7rem 0.8rem;
        gap: 0.3rem;
    }

    .ticket-info-val {
        text-align: left;
        width: 100%;
    }
}