/* ================================================================
   CERTMON Queue Monitor — Page 8 CSS
   Naming: plg-dbrealm-certmon-queue-*
   Summary cards grid + queue status pills for IR
   Added in v1.4.0 (design), source files v1.6.0
   ================================================================ */

/* ── Summary Cards Grid ── */
.plg-dbrealm-certmon-queue-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

/* ── Individual Card ── */
.plg-dbrealm-certmon-queue-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    padding: 1.25rem 1rem;
    border-radius: .75rem;
    border: 1px solid var(--ut-component-border-color, #e5e7eb);
    background: var(--ut-component-background-color, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    text-align: center;
    transition: box-shadow .15s ease, transform .15s ease;
}
.plg-dbrealm-certmon-queue-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* Card Icon */
.plg-dbrealm-certmon-queue-card-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* Card Count */
.plg-dbrealm-certmon-queue-card-count {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Card Label */
.plg-dbrealm-certmon-queue-card-label {
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Card Note (e.g., "Last 30 days") */
.plg-dbrealm-certmon-queue-card-note {
    font-size: .6875rem;
    color: var(--ut-component-text-muted-color, #94a3b8);
    font-style: italic;
}

/* ── Card Color Modifiers ── */

/* Pending — Orange */
.plg-dbrealm-certmon-queue-card--pending {
    background: #fff7ed;
    border-color: #fed7aa;
}
.plg-dbrealm-certmon-queue-card--pending .plg-dbrealm-certmon-queue-card-icon {
    color: #ea580c;
}
.plg-dbrealm-certmon-queue-card--pending .plg-dbrealm-certmon-queue-card-count {
    color: #c2410c;
}
.plg-dbrealm-certmon-queue-card--pending .plg-dbrealm-certmon-queue-card-label {
    color: #9a3412;
}

/* Processing — Blue */
.plg-dbrealm-certmon-queue-card--processing {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.plg-dbrealm-certmon-queue-card--processing .plg-dbrealm-certmon-queue-card-icon {
    color: #2563eb;
}
.plg-dbrealm-certmon-queue-card--processing .plg-dbrealm-certmon-queue-card-count {
    color: #1d4ed8;
}
.plg-dbrealm-certmon-queue-card--processing .plg-dbrealm-certmon-queue-card-label {
    color: #1e40af;
}

/* Done — Green */
.plg-dbrealm-certmon-queue-card--done {
    background: #f0fdf4;
    border-color: #bbf7d0;
}
.plg-dbrealm-certmon-queue-card--done .plg-dbrealm-certmon-queue-card-icon {
    color: #16a34a;
}
.plg-dbrealm-certmon-queue-card--done .plg-dbrealm-certmon-queue-card-count {
    color: #15803d;
}
.plg-dbrealm-certmon-queue-card--done .plg-dbrealm-certmon-queue-card-label {
    color: #166534;
}

/* Failed — Red */
.plg-dbrealm-certmon-queue-card--failed {
    background: #fef2f2;
    border-color: #fecaca;
}
.plg-dbrealm-certmon-queue-card--failed .plg-dbrealm-certmon-queue-card-icon {
    color: #dc2626;
}
.plg-dbrealm-certmon-queue-card--failed .plg-dbrealm-certmon-queue-card-count {
    color: #b91c1c;
}
.plg-dbrealm-certmon-queue-card--failed .plg-dbrealm-certmon-queue-card-label {
    color: #991b1b;
}

/* ── Queue Status Pills (IR column) ── */
.plg-dbrealm-certmon-queue-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 1rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.plg-dbrealm-certmon-queue-pill--pending {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.plg-dbrealm-certmon-queue-pill--processing {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.plg-dbrealm-certmon-queue-pill--done {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.plg-dbrealm-certmon-queue-pill--failed {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ── IR Table Overrides (applied via region Static ID) ── */
#check_queue .a-IRR-table td {
    vertical-align: middle;
    padding-top: .625rem;
    padding-bottom: .625rem;
}
#check_queue .a-IRR-table tr {
    transition: background .1s ease;
}
#check_queue .a-IRR-table tbody tr + tr td {
    border-top: 1px solid var(--ut-component-border-color, #f1f5f9);
}

/* ── Dark Mode ── */
.t-Body--dark .plg-dbrealm-certmon-queue-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.t-Body--dark .plg-dbrealm-certmon-queue-card--pending {
    background: rgba(234,88,12,.1);
    border-color: rgba(234,88,12,.25);
}
.t-Body--dark .plg-dbrealm-certmon-queue-card--pending .plg-dbrealm-certmon-queue-card-icon { color: #fb923c; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--pending .plg-dbrealm-certmon-queue-card-count { color: #fdba74; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--pending .plg-dbrealm-certmon-queue-card-label { color: #fed7aa; }

.t-Body--dark .plg-dbrealm-certmon-queue-card--processing {
    background: rgba(37,99,235,.1);
    border-color: rgba(37,99,235,.25);
}
.t-Body--dark .plg-dbrealm-certmon-queue-card--processing .plg-dbrealm-certmon-queue-card-icon { color: #60a5fa; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--processing .plg-dbrealm-certmon-queue-card-count { color: #93c5fd; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--processing .plg-dbrealm-certmon-queue-card-label { color: #bfdbfe; }

.t-Body--dark .plg-dbrealm-certmon-queue-card--done {
    background: rgba(22,163,74,.1);
    border-color: rgba(22,163,74,.25);
}
.t-Body--dark .plg-dbrealm-certmon-queue-card--done .plg-dbrealm-certmon-queue-card-icon { color: #4ade80; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--done .plg-dbrealm-certmon-queue-card-count { color: #86efac; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--done .plg-dbrealm-certmon-queue-card-label { color: #bbf7d0; }

.t-Body--dark .plg-dbrealm-certmon-queue-card--failed {
    background: rgba(220,38,38,.1);
    border-color: rgba(220,38,38,.25);
}
.t-Body--dark .plg-dbrealm-certmon-queue-card--failed .plg-dbrealm-certmon-queue-card-icon { color: #f87171; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--failed .plg-dbrealm-certmon-queue-card-count { color: #fca5a5; }
.t-Body--dark .plg-dbrealm-certmon-queue-card--failed .plg-dbrealm-certmon-queue-card-label { color: #fecaca; }

/* Dark mode pills */
.t-Body--dark .plg-dbrealm-certmon-queue-pill--pending {
    background: rgba(234,88,12,.15);
    color: #fdba74;
    border-color: rgba(234,88,12,.3);
}
.t-Body--dark .plg-dbrealm-certmon-queue-pill--processing {
    background: rgba(37,99,235,.15);
    color: #93c5fd;
    border-color: rgba(37,99,235,.3);
}
.t-Body--dark .plg-dbrealm-certmon-queue-pill--done {
    background: rgba(22,163,74,.15);
    color: #86efac;
    border-color: rgba(22,163,74,.3);
}
.t-Body--dark .plg-dbrealm-certmon-queue-pill--failed {
    background: rgba(220,38,38,.15);
    color: #fca5a5;
    border-color: rgba(220,38,38,.3);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .plg-dbrealm-certmon-queue-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .plg-dbrealm-certmon-queue-grid {
        grid-template-columns: 1fr;
    }
    .plg-dbrealm-certmon-queue-card {
        flex-direction: row;
        gap: .75rem;
        text-align: left;
        padding: 1rem;
    }
    .plg-dbrealm-certmon-queue-card-count {
        font-size: 1.5rem;
    }
}