/*
 * DOCUMENTS BLOCK - card grid, premium list rows, category tabs, vault.
 *
 * Tab bar, badges, buttons, inputs and the card shell all come from
 * components.css; only document-specific pieces live here. Class names and
 * data- hooks consumed by documents-lock.js are unchanged.
 */

/* ---- Format tile ------------------------------------------------------
   A rounded tile carrying the uppercase extension, tinted per file family
   (the Drive/Dropbox convention). Format identity is not brand-dependent,
   so these hues are intentionally fixed rather than tenant-themed; the
   fallback tint uses the tenant's primary for anything unrecognised. */

.doc-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary-text);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.doc-icon[data-format="PDF"]  { background: #fee2e2; color: #b42318; }
.doc-icon[data-format="DOC"],
.doc-icon[data-format="DOCX"],
.doc-icon[data-format="RTF"],
.doc-icon[data-format="ODT"]  { background: #dbeafe; color: #1749b3; }
.doc-icon[data-format="XLS"],
.doc-icon[data-format="XLSX"],
.doc-icon[data-format="CSV"]  { background: #dcfce7; color: #15803d; }
.doc-icon[data-format="PPT"],
.doc-icon[data-format="PPTX"] { background: #ffedd5; color: #c2410c; }
.doc-icon[data-format="JPG"],
.doc-icon[data-format="JPEG"],
.doc-icon[data-format="PNG"],
.doc-icon[data-format="WEBP"] { background: #ede9fe; color: #6d28d9; }
.doc-icon[data-format="ZIP"],
.doc-icon[data-format="RAR"]  { background: #e2e8f0; color: #334155; }

/* ---- grid_cards ------------------------------------------------------ */

.doc-grid {
    --card-min: 19rem;
}

.doc-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-lg) 0;
}

.doc-card__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--bg-page);
    color: var(--text-muted);
    transition: background-color var(--transition), color var(--transition);
}

.doc-card__download svg {
    width: 1.125rem;
    height: 1.125rem;
}

.doc-card:hover .doc-card__download {
    background: var(--color-primary-strong);
    color: #fff;
}

.doc-card__body {
    padding-top: var(--space-md);
}

/* ---- simple_list and tab panels: premium rows ------------------------ */

.doc-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.doc-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
}

.doc-row:hover,
.doc-row:focus-visible {
    border-color: transparent;
    box-shadow: var(--shadow-lifted);
    transform: translateY(var(--lift));
}

.doc-row__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    flex: 1 1 auto;
}

.doc-row__title {
    font-family: var(--font-heading);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-snug);
}

.doc-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--fs-xs);
}

.doc-row__action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--bg-page);
    color: var(--text-muted);
    transition: background-color var(--transition), color var(--transition);
}

.doc-row__action svg {
    width: 1.125rem;
    height: 1.125rem;
}

.doc-row:hover .doc-row__action {
    background: var(--color-primary-strong);
    color: #fff;
}

/* ---- Password vault -------------------------------------------------- */

.doc-vault {
    max-width: 30rem;
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-xl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-ambient);
    text-align: center;
}

.doc-vault__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    color: var(--color-primary-text);
}

.doc-vault__icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.doc-vault__title {
    font-size: var(--fs-h4);
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

.doc-vault__note {
    max-width: 24rem;
    margin-inline: auto;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.doc-vault__form {
    margin-top: var(--space-lg);
    text-align: start;
}

.doc-vault__label {
    display: block;
    margin-bottom: var(--space-xs);
    padding-left: var(--space-md);
    color: var(--text-muted);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.doc-vault__row {
    display: flex;
    gap: var(--space-sm);
}

.doc-vault__error {
    margin-top: var(--space-md);
    /* Fixed semantic danger red: an error must never be recoloured by a
       tenant palette into something that reads as success or decoration. */
    color: #b42318;
    font-size: var(--fs-sm);
    font-weight: 600;
}

@media (max-width: 480px) {
    .doc-vault__row {
        flex-direction: column;
    }
}