/*
 * Attachment list styling (file-upload UX fix, 2026-06-12).
 *
 * WHY THIS FILE EXISTS: the project has no Tailwind build pipeline (no
 * tailwind.config.js, no tailwindcss dep) — the Filament panels run on
 * Filament's PRECOMPILED default theme. So utility classes written in the
 * attachment-card blades only render if they happen to be in Filament's
 * bundled CSS. Common ones (bg-gray-50, dark:bg-gray-900) are; opacity
 * variants (dark:bg-gray-800/50) and most text-red-* are NOT. The committed
 * "Uploaded (N)" rows therefore rendered the row background light but the
 * filename text white -> white-on-white, illegible (operator report
 * 2026-06-12).
 *
 * FIX: stop depending on possibly-purged utilities for the load-bearing
 * colors. The blades use the semantic `.iai-att-*` classes below; this file
 * is loaded via FilamentAsset::register (same pattern as story 0080's
 * cases-coloring.css / 0132's violation-nav.css). Explicit light + dark
 * values, no Tailwind dependency.
 *
 * Loaded via App\Providers\AppServiceProvider::registerAttachmentsCss().
 */

/* ===== One attachment row ===== */
.iai-att-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229, 231, 235); /* gray-200 */
    background-color: rgb(249, 250, 251); /* gray-50 */
}
.dark .iai-att-row {
    border-color: rgb(55, 65, 81); /* gray-700 */
    background-color: rgb(31, 41, 55); /* gray-800 (opaque — the /50 variant was the purged culprit) */
}

/* ===== Filename — the line that was white-on-white ===== */
.iai-att-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(17, 24, 39); /* gray-900 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .iai-att-name {
    color: rgb(243, 244, 246); /* gray-100 */
}

/* ===== Metadata line (kind / size / mime / date) ===== */
.iai-att-meta {
    font-size: 0.75rem;
    color: rgb(107, 114, 128); /* gray-500 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .iai-att-meta {
    color: rgb(156, 163, 175); /* gray-400 */
}

/* ===== Type / extension chip (left box) ===== */
.iai-att-chip {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px solid rgb(209, 213, 219); /* gray-300 */
    background-color: rgb(255, 255, 255);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(75, 85, 99); /* gray-600 */
    overflow: hidden;
}
.dark .iai-att-chip {
    border-color: rgb(75, 85, 99); /* gray-600 */
    background-color: rgb(17, 24, 39); /* gray-900 */
    color: rgb(209, 213, 219); /* gray-300 */
}
.iai-att-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== Action buttons (View / Download / Delete) ===== */
.iai-att-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
.iai-att-action {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
/* View — primary/info tone */
.iai-att-view {
    color: rgb(29, 78, 216); /* blue-700 */
    border-color: rgb(191, 219, 254); /* blue-200 */
    background-color: rgb(239, 246, 255); /* blue-50 */
}
.iai-att-view:hover {
    background-color: rgb(219, 234, 254); /* blue-100 */
}
.dark .iai-att-view {
    color: rgb(147, 197, 253); /* blue-300 */
    border-color: rgb(30, 58, 138); /* blue-900 */
    background-color: rgba(30, 58, 138, 0.25);
}
.dark .iai-att-view:hover {
    background-color: rgba(30, 58, 138, 0.45);
}
/* Delete — danger tone */
.iai-att-delete {
    color: rgb(185, 28, 28); /* red-700 */
    border-color: rgb(254, 202, 202); /* red-200 */
    background-color: transparent;
}
.iai-att-delete:hover {
    background-color: rgb(254, 242, 242); /* red-50 */
}
.dark .iai-att-delete {
    color: rgb(252, 165, 165); /* red-300 */
    border-color: rgb(127, 29, 29); /* red-900 */
}
.dark .iai-att-delete:hover {
    background-color: rgba(127, 29, 29, 0.3);
}