/* ============================================================
   typography.css - TYPOGRAPHY
   ============================================================ */

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

    a:hover {
        color: var(--color-primary-dark);
    }

    a:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    font-family: var(--font-family-base);
}

h1 {
    font-size: var(--font-size-3xl);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5 {
    font-size: var(--font-size-base);
}

h6 {
    font-size: var(--font-size-sm);
}

/* ============================================================
   PARAGRAPHS
   ============================================================ */
p {
    margin-bottom: var(--space-3);
}

/* ============================================================
   LISTS
   ============================================================ */
ul, ol {
    padding-left: var(--space-4);
    margin-bottom: var(--space-3);
}

li {
    margin-bottom: var(--space-1);
}

/* ============================================================
   IMAGES
   ============================================================ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

/* ============================================================
   MONOSPACE
   ============================================================ */
code, kbd, pre, samp, .monospace {
    font-family: var(--font-family-monospace);
}

/* ============================================================
   UTILITY - Text Helpers
   ============================================================ */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-break {
    overflow-wrap: break-word;
    word-break: break-word;
}

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

.text-end {
    text-align: right;
}

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

/* Add to typography.css under UTILITY - Text Helpers */

/* ============================================================
   DETAIL VIEW UTILITIES
   ============================================================ */

/* Detail label - replaces inline styles on labels */
.detail-label {
    font-size: var(--detail-label-font-size, 0.7rem);
    font-weight: var(--detail-label-font-weight, 600);
    letter-spacing: var(--detail-label-letter-spacing, 0.5px);
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: var(--detail-gap, 0.25rem);
    line-height: var(--line-height-tight);
}

    .detail-label i {
        margin-right: var(--space-1);
        font-size: 0.65rem;
        opacity: 0.7;
    }

/* Detail value - replaces inline styles on values */
.detail-value {
    font-weight: var(--detail-value-font-weight, 600);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .detail-value a {
        color: var(--color-primary);
        text-decoration: none;
    }

        .detail-value a:hover {
            color: var(--color-primary-dark);
            text-decoration: underline;
        }

    .detail-value .badge {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-xs);
        padding: 0.2rem 0.5rem;
    }

/* Detail item container - replaces the div with inline styles */
.detail-item {
    padding: var(--detail-item-padding, 0.5rem);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    min-height: var(--detail-min-height, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    /* Variants */
    .detail-item.bordered {
        border: 1px solid var(--color-border-light);
        background: var(--color-surface);
    }

    .detail-item.raised {
        box-shadow: var(--shadow-sm);
        background: var(--color-surface);
    }

    .detail-item.accent {
        border-left: 3px solid var(--color-primary);
        background: var(--color-surface);
    }

    .detail-item.highlight {
        background: var(--color-primary-light);
        border: 1px solid var(--color-primary-focus);
    }

        .detail-item.highlight .detail-value {
            color: var(--color-primary-dark);
        }

/* Detail grid - for consistent spacing in detail views */
.detail-grid {
    display: grid;
    gap: var(--space-2);
}

    .detail-grid.cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    .detail-grid.cols-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .detail-grid.cols-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

/* Detail row - horizontal layout */
.detail-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

    .detail-row .detail-label {
        margin-bottom: 0;
        min-width: 80px;
        flex-shrink: 0;
    }

    .detail-row .detail-value {
        flex: 1;
        min-width: 0;
    }

/* Detail inline - for inline metadata */
.detail-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

    .detail-inline .detail-label {
        margin-bottom: 0;
        min-width: 70px;
        flex-shrink: 0;
    }

/* ============================================================
   DETAIL VIEW RESPONSIVE
   ============================================================ */
@media (max-width: 575.98px) {
    .detail-item {
        padding: var(--space-2);
        min-height: var(--touch-target-min);
    }

    .detail-label {
        font-size: 0.65rem;
        margin-bottom: var(--space-0-5);
    }

    .detail-value {
        font-size: var(--font-size-sm);
    }

    .detail-grid.cols-2,
    .detail-grid.cols-3,
    .detail-grid.cols-4 {
        grid-template-columns: 1fr 1fr;
    }

    .detail-row {
        padding: var(--space-2);
        gap: var(--space-2);
    }

        .detail-row .detail-label {
            min-width: 60px;
            font-size: 0.65rem;
        }
}

@media (max-width: 399.98px) {
    .detail-grid.cols-2,
    .detail-grid.cols-3,
    .detail-grid.cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   TOUCH DEVICES
   ============================================================ */
@media (pointer: coarse) {
    .detail-item {
        min-height: var(--touch-target-comfort);
        padding: var(--space-2) var(--space-3);
    }

    .detail-value {
        font-size: var(--font-size-base);
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .detail-item {
        transition: none;
    }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .detail-item {
        background: #f8f9fa !important;
        border: 1px solid #dee2e6 !important;
        padding: 0.4rem 0.6rem;
    }

    .detail-label {
        color: #6c757d !important;
    }

    .detail-value {
        color: #212529 !important;
    }

    .detail-item.highlight {
        background: #e9ecef !important;
        border-left: 3px solid #3A6B8C !important;
    }
}

/* ============================================================
   UTILITY - Responsive Visibility
   ============================================================ */
.visible-mobile {
    display: block;
}

.visible-desktop {
    display: none;
}

@media (min-width: 768px) {
    .visible-mobile {
        display: none;
    }

    .visible-desktop {
        display: block;
    }
}