.document-grid {
    /* Mengikuti token permukaan Mekaya agar kartu senada dengan section/tabel panel. */
    --document-surface: var(--mky-surface, #fff);
    --document-preview: var(--mky-surface-subtle, #f8fafc);
    --document-border: var(--mky-border, #e2e8f0);
    --document-text: var(--gray-950, #0f172a);
    --document-muted: var(--gray-600, #475569);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1.25rem;
}

.document-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--document-surface);
    border: 1px solid var(--document-border);
    border-radius: var(--mky-radius-frame, 12px);
    box-shadow: var(--mky-shadow-surface, none);
    color: var(--document-text);
}

.document-card__preview {
    position: relative;
    display: grid;
    place-items: center;
    height: 7.5rem;
    background: var(--document-preview);
    color: var(--gray-500, #64748b);
}

.document-card__file-icon { width: 4.5rem; height: 4.5rem; }
.document-card__format {
    position: absolute;
    top: 4.9rem;
    padding: .15rem .5rem;
    border-radius: 4px;
    background: #475569;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.document-card__preview[data-format="pdf"] .document-card__format { background: #b91c1c; }
.document-card__preview[data-format="doc"] .document-card__format,
.document-card__preview[data-format="docx"] .document-card__format { background: #1d4ed8; }
.document-card__preview[data-format="jpg"] .document-card__format,
.document-card__preview[data-format="png"] .document-card__format { background: #047857; }
.document-card__menu { position: absolute; top: .6rem; right: .6rem; }
.document-card__body { flex: 1; padding: .9rem 1rem 1rem; }
.document-card__file-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .5rem;
    margin-bottom: .6rem;
    color: var(--document-muted);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}
.document-card__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.document-card__title a { color: inherit; text-decoration: none; text-underline-offset: .2em; }
.document-card__title a:hover { text-decoration: underline; }
.document-card__title a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.document-card__company { margin-top: .25rem; font-size: .8125rem; color: var(--document-muted); overflow-wrap: anywhere; }
.document-card__status-row { margin-top: .75rem; }

.dark .document-grid {
    --document-text: var(--gray-50, #fafafa);
    --document-muted: var(--gray-400, #a1a1aa);
}
.dark .document-card__preview { color: var(--gray-400, #a1a1aa); }

@media (min-width: 640px) { .document-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .document-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .document-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.document-filters__content { display: grid; gap: 1rem; padding: 1rem; }
.document-filters__heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.document-filters__heading h2 { font-size: .875rem; font-weight: 600; }