/*
 * Main stylesheet for the Intel CI Platform.
 *
 * Most styling is done via Tailwind CSS utility classes in templates.
 * This file contains custom styles that can't be expressed as utilities,
 * mainly for HTMX indicators, print styles, and prose overrides.
 */

/* ============================================================
   HTMX Loading Indicators
   ============================================================ */

/* The .htmx-indicator class is added by HTMX to elements referenced
   by hx-indicator. They start hidden and become visible during requests. */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Pulsing top bar during HTMX requests */
@keyframes htmx-progress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* ============================================================
   Search Highlight
   ============================================================ */

/* Highlight matching search terms returned by PostgreSQL ts_headline */
mark {
    background-color: var(--color-status-warning-bg);
    color: var(--color-status-warning);
    padding: 0 2px;
    border-radius: 2px;
}

/* ============================================================
   Prose Overrides (markdown rendered content)
   ============================================================ */

.prose ul {
    list-style-type: disc;
    padding-left: 1.5em;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.5em;
}

.prose a {
    color: var(--color-text-accent);
    text-decoration: underline;
}

.prose code {
    background-color: var(--color-bg-input);
    color: var(--color-text-primary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: var(--font-mono);
}

/* ============================================================
   Line Clamp (for truncating text in cards)
   ============================================================ */

.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;
}

/* ============================================================
   Print Styles (for comparison view and reports)
   ============================================================ */

@media print {
    /* Hide navigation elements */
    nav, aside, .no-print, #global-spinner {
        display: none !important;
    }

    /* Reset main content layout */
    main {
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Ensure tables and comparison grids don't break */
    table, .comparison-grid {
        page-break-inside: avoid;
    }

    /* Show URLs for links */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================================
   User Dropdown
   ============================================================ */

/* Close dropdown when clicking outside */
body:has(.dropdown-open) .dropdown-overlay {
    display: block;
}