/* ========================================
   Intel Brief — Custom CSS
   iLink Account Intelligence Platform
   w2.0 Intel Brief Polish
   ======================================== */

/* ---- Base ---- */
body {
    font-family: 'Aptos', 'Segoe UI', Calibri, system-ui, -apple-system, sans-serif;
}

/* ---- Loading Spinner ---- */
.spinner {
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- HTMX indicator defaults ---- */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: flex;
}

/* ---- Status color dots ---- */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-blue   { background-color: #456EA2; }
.status-green  { background-color: #07641D; }
.status-yellow { background-color: #CA8A04; }
.status-orange { background-color: #EA580C; }
.status-red    { background-color: #CE1B28; }
.status-gray   { background-color: #9CA3AF; }

/* ---- Card hover effects ---- */
.hover-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.hover-card:hover {
    box-shadow: 0 4px 12px rgba(34, 91, 98, 0.08);
    transform: translateY(-1px);
}

/* ---- Architecture diagram boxes ---- */
.arch-box {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid;
    transition: box-shadow 0.2s ease;
}

.arch-box:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ---- Tab active state ---- */
.tab-btn {
    cursor: pointer;
    background: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-btn:focus {
    outline: none;
}

.tab-btn:focus-visible {
    outline: 2px solid #CE1B28;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- Line clamp utility ---- */
.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;
}

/* ---- FSI gallery slide cards ---- */
.slide-card {
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.slide-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ---- Solution play tab active ---- */
.sp-tab.active {
    background-color: #1f2937 !important;
    color: white !important;
}

/* ---- Flash message auto-dismiss ---- */
[role="alert"] {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Focus ring utility ---- */
input:focus-visible,
button:focus-visible {
    outline: 2px solid #CE1B28;
    outline-offset: 2px;
}

/* ---- Scrollbar styling (subtle) ---- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ======================================
   Print stylesheet
   ====================================== */
@media print {
    nav,
    footer,
    button,
    .htmx-indicator,
    [role="alert"],
    #tab-nav,
    .no-print {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
        font-size: 11pt;
    }

    main {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .bg-white,
    [class*="rounded-xl"] {
        box-shadow: none !important;
        break-inside: avoid;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }

    table {
        width: 100% !important;
        font-size: 10pt;
    }

    .status-dot {
        border: 1px solid #333;
    }
}