/**
 * Document Manager Pro - Frontend Styles 
 * Version: 2.0.0
 */

/* Brand fonts — self-hosted, matching stelco-rti (no Google Fonts request).
   The --srti-* tokens live on the .srti class and are not present on every
   page, so the families are declared here too and used as the fallback. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
}

/* Dhivehi. Thaana body text and Thaana headings use different faces on the
   STELCO site, and both are carried here so a Dhivehi title is not rendered in
   whatever the browser falls back to. */
@font-face {
    font-family: 'AK Rasmee';
    src: url('../fonts/AKRasmee.ttf') format('truetype');
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0780-07BF, U+060C, U+061B, U+061F, U+FDF2;
}

@font-face {
    font-family: 'MV Typewriter';
    src: url('../fonts/MV_Typewriter_Regular.ttf') format('truetype');
    font-weight: 400 600;
    font-display: swap;
    unicode-range: U+0780-07BF, U+060C, U+061B, U+061F, U+FDF2;
}

@font-face {
    font-family: 'MV Typewriter';
    src: url('../fonts/MV_Typewriter_Bold.ttf') format('truetype');
    font-weight: 700 900;
    font-display: swap;
    unicode-range: U+0780-07BF, U+060C, U+061B, U+061F, U+FDF2;
}

:root {
    /* STELCO palette — mirrors the --srti-* design tokens, and defers to them
       wherever they are in scope. Brand blue #203DE4 = 7.4:1 on white. */
    --dmp-primary: var(--srti-brand, #203de4);
    --dmp-primary-hover: #1a32bd;
    --dmp-primary-soft: var(--srti-tint, #eef1fe);
    --dmp-secondary: #64748b;
    --dmp-success: #22c55e;
    --dmp-warning: #f59e0b;
    --dmp-danger: #ef4444;
    --dmp-info: #3b82f6;
    --dmp-border: var(--srti-line, #e7e9f0);
    --dmp-border-strong: #8a94a3; /* 3:1 on white — form controls, WCAG 1.4.11 */
    --dmp-bg-light: var(--srti-bg, #f9fafb);
    --dmp-bg-hover: #f4f6fb;
    --dmp-text: var(--srti-ink, #0d1122);
    --dmp-text-light: var(--srti-slate, #464d63); /* 8:1 — safe for small text */
    --dmp-icon: var(--srti-muted, #868da3); /* icons only, never text */
    --dmp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --dmp-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --dmp-radius: 0.5rem;
    --dmp-radius-lg: 0.875rem;

    /* Brand type — inherits the site tokens when the theme defines them */
    --dmp-font: var(--srti-sans, var(--srti-body, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif)), 'AK Rasmee', 'MV Faseyha', 'Noto Sans Thaana';
    --dmp-font-display: var(--srti-disp, 'Space Grotesk', 'Inter', system-ui, sans-serif), 'MV Typewriter', 'AK Rasmee', 'Noto Sans Thaana';
    /* Dhivehi — same pairing the rest of the site uses: Rasmee for running
       text, Typewriter for titles. */
    --dmp-font-thaana: 'AK Rasmee', 'MV Faseyha', 'Noto Sans Thaana', 'Inter', system-ui, -apple-system, sans-serif;
    --dmp-font-thaana-display: 'MV Typewriter', 'MV_Typewriter', 'AK Rasmee', 'Noto Sans Thaana', 'Space Grotesk', 'Inter', system-ui, sans-serif;

    /* Badge palette — one row per state: fill, text, border.
       Every text/fill pair clears 4.5:1 (WCAG 1.4.3). */
    --dmp-badge-open-bg: #e7f6ee;
    --dmp-badge-open-fg: #0f7a4e;
    --dmp-badge-open-bd: #b7e0c9;
    --dmp-badge-warn-bg: #fdf1e3;
    --dmp-badge-warn-fg: #8a4b00;
    --dmp-badge-warn-bd: #f3d9ac;
    --dmp-badge-neutral-bg: #eef0f5;
    --dmp-badge-neutral-fg: #3f4657;
    --dmp-badge-neutral-bd: #dbdfe8;
    --dmp-badge-quiet-bg: #f1f1f4;
    --dmp-badge-quiet-fg: #54505d;
    --dmp-badge-quiet-bd: #e0dfe5;
    --dmp-badge-stop-bg: #fdecea;
    --dmp-badge-stop-fg: #a3271a;
    --dmp-badge-stop-bd: #f3cfc9;
    --dmp-badge-brand-bg: #eef1fe;
    --dmp-badge-brand-fg: #1730b0;
    --dmp-badge-brand-bd: #dbe2fd;
}

/* Container */
.dmp-container {
    max-width: 100%;
    margin: 2rem 0;
    color: var(--dmp-text);
}

/* The theme sets a body font that beats inheritance on descendants, so the
   brand face is declared on the elements themselves (same approach as
   stelco-rti's contact.css). */
.dmp-container,
.dmp-container p,
.dmp-container span,
.dmp-container a,
.dmp-container li,
.dmp-container label,
.dmp-container input,
.dmp-container select,
.dmp-container button,
.dmp-table,
.dmp-table th,
.dmp-table td {
    font-family: var(--dmp-font) !important;
}

.dmp-document-name,
.dmp-empty-text {
    font-family: var(--dmp-font-display) !important;
}

.dmp-container *,
.dmp-container *::before,
.dmp-container *::after {
    box-sizing: border-box;
}

.dmp-container :focus-visible {
    outline: 2px solid var(--dmp-primary);
    outline-offset: 2px;
    border-radius: var(--dmp-radius);
}

.dmp-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Toolbar: search + filters on one clean row */
/* Flex, not grid: the control count varies with the category's settings */
.dmp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.75rem;
    padding: 1rem;
    background: white;
    border: 1px solid var(--dmp-border);
    border-radius: var(--dmp-radius-lg);
    box-shadow: var(--dmp-shadow-sm);
}

.dmp-field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 190px;
    min-width: 0;
}

.dmp-field-search {
    flex: 1 1 240px;
}

.dmp-field-icon {
    position: absolute;
    left: 0.75rem;
    color: var(--dmp-text-light);
    pointer-events: none;
}

.dmp-input {
    width: 100%;
    height: 2.625rem;
    padding: 0 0.875rem;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--dmp-text);
    background-color: white;
    border: 1px solid var(--dmp-border-strong);
    border-radius: var(--dmp-radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.dmp-field-search .dmp-input {
    padding-left: 2.25rem;
}

.dmp-input::placeholder {
    color: var(--dmp-text-light);
    opacity: 1;
}

.dmp-input:hover {
    border-color: #6b7688;
}

.dmp-input:focus {
    outline: none;
    border-color: var(--dmp-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.dmp-select {
    padding-right: 2.25rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* ==========================================================================
   Category rail + document list
   ========================================================================== */

.dmp-shell {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

.dmp-hide-status .dmp-field-status {
    display: none !important;
}

.dmp-rail {
    position: sticky;
    top: 24px;
    background: #fff;
    border: 1px solid var(--dmp-border);
    border-radius: var(--dmp-radius-lg);
    box-shadow: var(--dmp-shadow);
    overflow: hidden;
}

.dmp-rail__heading {
    margin: 0;
    padding: 15px 18px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--dmp-icon);
    border-bottom: 1px solid var(--dmp-border);
}

.dmp-rail__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmp-rail__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 18px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    color: var(--dmp-text-light);
    cursor: pointer;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.dmp-rail__item:hover {
    color: var(--dmp-text);
    background: var(--dmp-bg-light);
}

.dmp-rail__item.is-active {
    font-weight: 600;
    color: var(--dmp-primary-hover);
    background: var(--dmp-primary-soft);
    border-left-color: var(--dmp-primary);
}

/* Recents and global search sit above the categories, visually separate.
   Black rather than brand blue: they are navigation, not calls to action. */
.dmp-rail__item--mode {
    color: var(--dmp-text);
    font-weight: 600;
}

.dmp-rail__item--mode svg {
    color: var(--dmp-icon);
}

.dmp-rail__item--mode:hover svg,
.dmp-rail__item--mode.is-active svg {
    color: currentColor;
}

/* The last mode entry carries the rule that separates modes from categories */
.dmp-rail__item--divider {
    border-bottom: 1px solid var(--dmp-border);
}

.dmp-rail__item--mode .dmp-rail__name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dmp-rail__item--mode svg {
    flex: none;
    opacity: 0.8;
}

.dmp-rail__name {
    min-width: 0;
}

.dmp-rail__count {
    flex: none;
    font-size: 12px;
    color: var(--dmp-icon);
    font-variant-numeric: tabular-nums;
}

.dmp-rail__item.is-active .dmp-rail__count {
    color: var(--dmp-primary-hover);
}

.dmp-main__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 18px;
}

.dmp-main__title {
    margin: 0;
    padding: 0;
    font-family: var(--dmp-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dmp-text);
}

.dmp-main__count {
    margin: 0;
    font-size: 13px;
    color: var(--dmp-icon);
}

.dmp-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dmp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--dmp-border);
    border-radius: 13px;
    box-shadow: var(--dmp-shadow);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.dmp-row:hover {
    border-color: #cdd4e4;
    box-shadow: 0 10px 26px -18px rgba(16, 22, 55, 0.5);
    transform: translateY(-1px);
}

.dmp-row__body {
    min-width: 0;
}

.dmp-row__title {
    display: flex;
    align-items: flex-start;
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--dmp-text);
    overflow-wrap: anywhere;
}

/* Deadline inside the warning window. Amber + its own wording, so urgency is
   never carried by colour alone (WCAG 1.4.1). */


.dmp-soon::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
}

.dmp-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
    font-size: 12.5px;
    color: var(--dmp-icon);
}

/* Search results span categories, so each row names its own */


.dmp-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: var(--dmp-text-light);
    font-variant-numeric: tabular-nums;
}

/* Micro-caps labels: "Opens" is the label, the date is the content. Sizing the
   two differently lets the row be scanned without being read. */
.dmp-meta-key {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dmp-icon);
}

/* Space alone separates the files from the details — no rule needed */
.dmp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.dmp-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 7px 13px;
    font-size: 12px;
    color: var(--dmp-text-light);
    text-decoration: none;
    background: var(--dmp-bg-light);
    border: 1px solid var(--dmp-border);
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dmp-chip:hover,
.dmp-chip:focus-visible {
    color: var(--dmp-primary-hover);
    background: var(--dmp-primary-soft);
    border-color: #cbd6fb;
}

.dmp-chip svg {
    flex: none;
}

.dmp-chip__name {
    max-width: 34ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Type sits on each file, since one document can mix PDF, PNG, DOCX.
   One neutral chip for every format: the word already says the type, so hue
   would only add noise against the grey/blue surfaces (and colour carrying
   meaning on its own fails WCAG 1.4.1 anyway). */
.dmp-chip__ext {
    flex: none;
    padding: 1px 6px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--dmp-text-light);
    background: #fff;
    border: 1px solid var(--dmp-border);
    border-radius: 4px;
}

.dmp-chip:hover .dmp-chip__ext,
.dmp-chip:focus-visible .dmp-chip__ext {
    color: var(--dmp-primary-hover);
    border-color: #cbd6fb;
}

.dmp-chip__size {
    flex: none;
    color: var(--dmp-icon);
    font-variant-numeric: tabular-nums;
}

.dmp-chip:hover .dmp-chip__size {
    color: inherit;
}

.dmp-row__nofiles {
    align-self: center;
    font-size: 12px;
    font-style: italic;
    color: var(--dmp-muted, #8a91a6);
    white-space: nowrap;
}

.dmp-download {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 17px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    background: var(--dmp-primary);
    border-radius: 10px;
    box-shadow: 0 7px 15px -8px rgba(32, 61, 228, 0.75);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.dmp-download:hover,
.dmp-download:focus-visible {
    color: #fff;
    background: var(--dmp-primary-hover);
    transform: translateY(-1px);
}

.dmp-download:active {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 900px) {
    .dmp-shell {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .dmp-rail {
        position: static;
    }

    .dmp-rail__heading {
        display: none;
    }

    .dmp-rail__list {
        display: flex;
        gap: 6px;
        padding: 8px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .dmp-rail__item {
        padding: 8px 14px;
        white-space: nowrap;
        border: 1px solid var(--dmp-border);
        border-radius: 999px;
    }

    .dmp-rail__item.is-active {
        border-color: var(--dmp-primary);
    }
}

@media (max-width: 620px) {
    .dmp-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
    }

    .dmp-download {
        grid-column: 1 / -1;
        width: 100%;
        height: 42px;
    }

    .dmp-row__nofiles {
        grid-column: 1 / -1;
    }

    .dmp-chip__name {
        max-width: 22ch;
    }
}


.dmp-row__titletext {
    min-width: 0;
}

/* The tile centres on the first line of the title rather than on the block */
.dmp-row__title .dmp-ftile {
    margin-top: -3px;
}

/* ==========================================================================
   Badges — one template for every label on a row
   Status, closing-soon and category differ only in colour: same pill, same
   height, same border weight, same type. Colour never carries the meaning on
   its own — the word does (WCAG 1.4.1).
   ========================================================================== */

.dmp-status,
.dmp-soon,
.dmp-row__cat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 999px;
}

.dmp-row__cat {
    color: var(--dmp-badge-brand-fg);
    background: var(--dmp-badge-brand-bg);
    border-color: var(--dmp-badge-brand-bd);
}

/* Open reads as "you can still act on this" */
.dmp-status-open {
    color: var(--dmp-badge-open-fg);
    background: var(--dmp-badge-open-bg);
    border-color: var(--dmp-badge-open-bd);
}

.dmp-status-in_progress,
.dmp-soon {
    color: var(--dmp-badge-warn-fg);
    background: var(--dmp-badge-warn-bg);
    border-color: var(--dmp-badge-warn-bd);
}

.dmp-status-closed {
    color: var(--dmp-badge-neutral-fg);
    background: var(--dmp-badge-neutral-bg);
    border-color: var(--dmp-badge-neutral-bd);
}

.dmp-status-expired {
    color: var(--dmp-badge-stop-fg);
    background: var(--dmp-badge-stop-bg);
    border-color: var(--dmp-badge-stop-bd);
}

.dmp-status-cancelled {
    color: var(--dmp-badge-quiet-fg);
    background: var(--dmp-badge-quiet-bg);
    border-color: var(--dmp-badge-quiet-bd);
}

/* Dates — plain text, no calendar icon */
.dmp-date {
    display: inline-block;
    color: var(--dmp-text);
    font-size: 0.875rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Actions */
.dmp-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Hug the right edge however many columns the category shows */
.dmp-table td:last-child .dmp-actions {
    justify-content: flex-end;
}

/* Neutral, monochrome action buttons — no colour coding by action type */
.dmp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--dmp-text-light);
    background-color: white;
    border: 1px solid var(--dmp-border);
    border-radius: var(--dmp-radius);
    box-shadow: var(--dmp-shadow-sm);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
}

.dmp-action-btn:hover,
.dmp-action-btn:focus-visible {
    color: var(--dmp-text);
    background-color: var(--dmp-bg-hover);
    border-color: #b8c0cc;
}

.dmp-no-actions {
    color: var(--dmp-text-light);
    font-size: 0.8125rem;
}

.dmp-action-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dmp-primary);
    background-color: transparent;
    border: 1px solid var(--dmp-primary);
    border-radius: var(--dmp-radius);
    text-decoration: none;
    transition: all 0.2s ease;
}

.dmp-action-link:hover {
    background-color: var(--dmp-primary);
    color: white;
}

/* Attachments */
.dmp-attachments-count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--dmp-text-light);
    font-size: 0.875rem;
}

.dmp-attachment-icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

/* Pagination */
.dmp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.dmp-pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    background-color: white;
    border: 1px solid var(--dmp-border);
    border-radius: var(--dmp-radius);
    color: var(--dmp-text);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.dmp-pagination-button:hover:not(.active):not(:disabled) {
    background-color: var(--dmp-bg-light);
    border-color: var(--dmp-primary);
    color: var(--dmp-primary);
}

.dmp-pagination-button.active {
    background-color: var(--dmp-primary);
    border-color: var(--dmp-primary);
    color: white;
}

.dmp-pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Load More Button */
.dmp-load-more {
    display: block;
    margin: 2rem auto;
    padding: 0.75rem 2rem;
    background-color: var(--dmp-primary);
    color: white;
    border: none;
    border-radius: var(--dmp-radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dmp-load-more:hover {
    background-color: var(--dmp-primary-hover);
}

.dmp-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading State */
.dmp-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: var(--dmp-text-light);
}

.dmp-spinner {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    border: 3px solid var(--dmp-border);
    border-top-color: var(--dmp-primary);
    border-radius: 50%;
    animation: dmp-spin 1s linear infinite;
}

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

/* Empty State */
.dmp-empty {
    text-align: center;
    padding: 3rem;
    color: var(--dmp-text-light);
}

.dmp-empty-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    opacity: 0.3;
}

.dmp-empty-text {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.dmp-empty-subtext {
    font-size: 0.875rem;
}

/* Categories */
.dmp-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.dmp-category-card {
    padding: 1.5rem;
    background-color: white;
    border: 1px solid var(--dmp-border);
    border-radius: var(--dmp-radius);
    transition: all 0.2s ease;
    cursor: pointer;
}

.dmp-category-card:hover {
    border-color: var(--dmp-primary);
    box-shadow: var(--dmp-shadow);
}

.dmp-category-name {
    font-weight: 600;
    color: var(--dmp-text);
    margin-bottom: 0.5rem;
}

.dmp-category-count {
    color: var(--dmp-text-light);
    font-size: 0.875rem;
}

/* Button Styles */
.dmp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--dmp-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dmp-btn-primary {
    background-color: var(--dmp-primary);
    color: white;
}

.dmp-btn-primary:hover {
    background-color: var(--dmp-primary-hover);
}

.dmp-btn-secondary {
    background-color: var(--dmp-secondary);
    color: white;
}

.dmp-btn-secondary:hover {
    background-color: #475569;
}

.dmp-btn-ghost {
    height: 2.625rem;
    padding: 0 1rem;
    color: var(--dmp-text);
    background-color: white;
    border: 1px solid var(--dmp-border-strong);
}

.dmp-btn-ghost:hover {
    background-color: var(--dmp-bg-hover);
    border-color: #6b7688;
}

.dmp-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

/* ==========================================================================
   Responsive — the card grid reflows on its own; these only tune the toolbar
   and the label/value split inside each card.
   ========================================================================== */

@media (max-width: 1024px) {
    .dmp-field-search {
        flex: 1 1 100%;
    }
}

@media (max-width: 560px) {
    .dmp-toolbar .dmp-field,
    .dmp-toolbar .dmp-btn {
        flex: 1 1 100%;
    }

    .dmp-table tbody tr {
        gap: 10px 18px;
        padding: 14px 16px;
    }

    .dmp-table td:first-child {
        flex: 1 1 100%;
    }

    .dmp-table td:last-child {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .dmp-table td:last-child .dmp-action-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dmp-container *,
    .dmp-container *::before,
    .dmp-container *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   Pager — summary, rows-per-page, then numbered pages with Previous/Next
   ========================================================================== */

/* An explicit display beats the UA [hidden] rule, so restate it */
.dmp-pager[hidden],
.dmp-pager__nav[hidden] {
    display: none;
}

.dmp-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-top: 22px;
    /* No horizontal padding: the row lines up with the cards above it */
    padding: 6px 0;
}

/* Summary and rows-per-page are one quiet group. Both are centred on a box the
   height of the select, so they stay on the same line whatever line-height the
   surrounding theme sets on a paragraph.

   #6b7280 is 4.83:1 on white — the lightest grey that still clears WCAG 1.4.3
   for text this size. */
.dmp-pager__summary,
.dmp-pager__rows {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;
}

.dmp-pager__summary {
    font-variant-numeric: tabular-nums;
}

.dmp-pager__rows {
    gap: 8px;
    white-space: nowrap;
}


.dmp-pager__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dmp-pager__rows select {
    width: auto;
    min-width: 72px;
    height: 34px;
    padding: 0 30px 0 10px;
}

/* Page controls sit at the far end of the row; the summary and rows-per-page
   read as one group at the start */
.dmp-pager__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.dmp-pager__step,
.dmp-pager__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--dmp-text-light);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
    font-variant-numeric: tabular-nums;
}

.dmp-pager__step:hover,
.dmp-pager__num:hover {
    color: var(--dmp-text);
    background: var(--dmp-bg-light);
}

/* Current page keeps a visible outline, not just a fill, so it survives
   high-contrast modes where background colours are dropped */
.dmp-pager__num.is-current {
    font-weight: 700;
    color: var(--dmp-text);
    background: #fff;
    border-color: #ccd2de;
    box-shadow: var(--dmp-shadow);
}

.dmp-pager__step.is-disabled {
    color: var(--dmp-border);
    cursor: default;
}

.dmp-pager__step.is-disabled:hover {
    background: transparent;
}

.dmp-pager__gap {
    padding: 0 4px;
    color: var(--dmp-icon);
}

/* Phones: the summary and the rows selector share the first line; the page
   controls take a full-width row of their own, centred, where a thumb reaches
   comfortably. Three loose centred rows read as clutter — two do not. */
@media (max-width: 860px) {
    .dmp-pager {
        gap: 10px 12px;
    }

    .dmp-pager__nav {
        margin-left: 0;
        justify-content: flex-end;
    }

    .dmp-pager__step {
        padding: 0 9px;
    }
}
/* Narrow phones: a run of seven numbers cannot fit on one line, and wrapping it
   over two reads as a mess. The current page stands between Previous and Next,
   which is still a complete control — every page remains reachable. */

/* At phone widths the row has roughly 280px to work with. Trimming the type a
   step and pulling the gap in keeps the count and the rows selector on one line
   instead of stacking them, which is what the extra line was costing. */
@media (max-width: 560px) {
    .dmp-pager {
        gap: 8px;
    }

    .dmp-pager__summary {
        font-size: 12px;
        min-height: 32px;
    }
}

/* Below 480px the words are dropped and the arrows carry the meaning, but the
   text stays in the accessible name — hiding it outright would leave a button
   a screen reader could only call "button" (WCAG 4.1.2). */
@media (max-width: 480px) {
    .dmp-pager__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .dmp-pager__step {
        min-width: 34px;
        padding: 0 8px;
    }
}
@media (max-width: 480px) {
    .dmp-pager__num:not(.is-current),
    .dmp-pager__gap {
        display: none;
    }

    .dmp-pager__num.is-current {
        margin: 0 4px;
    }
}



/* File-type icons: shape distinguishes the family, colour reinforces it.
   The document's own icon becomes ZIP when its files are of mixed types,
   which is exactly what the download button hands over. */
.dmp-ficon {
    flex: none;
    color: var(--dmp-icon);
    vertical-align: -2px;
}

.dmp-ficon--pdf { color: #c0392b; }
.dmp-ficon--doc { color: #2b5fb8; }
.dmp-ficon--xls { color: #12734a; }
.dmp-ficon--ppt { color: #b4531a; }
.dmp-ficon--dwg { color: #46526a; }
.dmp-ficon--zip { color: #5b3ab0; }
.dmp-ficon--img { color: #8a5a08; }

/* Tinted tile behind the type icon — see dmp_type_tile() */
.dmp-ftile {
    display: inline-flex;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(16, 22, 55, 0.06);
}

.dmp-ftile .dmp-ficon {
    vertical-align: 0;
}

.dmp-ftile--pdf { background: rgba(192, 57, 43, 0.10); }
.dmp-ftile--doc { background: rgba(43, 95, 184, 0.10); }
.dmp-ftile--xls { background: rgba(18, 115, 74, 0.10); }
.dmp-ftile--ppt { background: rgba(180, 83, 26, 0.10); }
.dmp-ftile--dwg { background: rgba(70, 82, 106, 0.10); }
.dmp-ftile--zip { background: rgba(91, 58, 176, 0.10); }
.dmp-ftile--img { background: rgba(138, 90, 8, 0.10); }

/* The eye that says a chip opens the file. Quiet until the chip is hovered or
   focused, so a row of them does not read as a row of buttons. */
.dmp-chip__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    margin-left: 1px;
    margin-right: -4px;
    color: var(--dmp-icon);
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.dmp-chip:hover .dmp-chip__view,
.dmp-chip:focus-visible .dmp-chip__view {
    color: var(--dmp-primary);
    background: var(--dmp-primary-soft);
}

@media (prefers-reduced-motion: reduce) {
    .dmp-chip__view {
        transition: none;
    }
}

/* ==========================================================================
   No underlines anywhere in this UI
   Every link here is a chip, a card or a button — shape and colour already
   mark it as interactive, and an underline appearing on hover makes a button
   look like body copy. Themes commonly set `a:hover { text-decoration:
   underline }`, which is why this is stated for each state and forced: the
   same reason the brand font is declared with !important further up.
   ========================================================================== */

.dmp-container a,
.dmp-container a:link,
.dmp-container a:visited,
.dmp-container a:hover,
.dmp-container a:focus,
.dmp-container a:active,
.dmp-container button,
.dmp-container button:hover,
.dmp-container button:focus {
    text-decoration: none !important;
}

/* Anything tagged as Dhivehi takes the Thaana faces. The !important matches
   the rules above it — the theme's body font is declared the same way, and
   without it a Dhivehi title would lose to it. Thaana sits low and its
   descenders are long, so the lines need more room than Latin does. */
.dmp-container [lang="dv"] {
    font-family: var(--dmp-font-thaana) !important;
    line-height: 1.75;
}

.dmp-container .dmp-row__titletext[lang="dv"],
.dmp-container .dmp-document-name[lang="dv"],
.dmp-container .dmp-empty-text[lang="dv"] {
    font-family: var(--dmp-font-thaana-display) !important;
    line-height: 1.55;
}