/* Remove Dropfiles' own top/bottom margins on its outer containers
   (.dropfiles-content-multi has margin-bottom: 10px; .dropfiles-content /
   .dropfiles-dropblock-content have margin-top: 20px). "html body" plus
   !important ensures this wins regardless of stylesheet load order. */
html body .dropfiles-content-multi,
html body .dropfiles-content,
html body .dropfiles-dropblock-content,
html body .dropfiles-container,
html body [class*="dropfiles-container"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* The card wrapper (including the .dfr-icon-right variant) is the only element
   that carries spacing: no top margin, 1rem at the bottom so several groups
   stack with an even gap between them. */
html body .dfr-card-wrapper,
html body .dfr-card-wrapper.dfr-icon-right {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* Card Container */
.dfr-card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Individual Full-Width Row */
.dfr-card-wrapper .dfr-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 18px;
    border-radius: var(--dfr-card-radius, 8px) !important;
    background-color: var(--dfr-row-bg) !important;
    color: var(--dfr-row-text) !important;
    border: 1px solid var(--dfr-row-border) !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.dfr-card-wrapper .dfr-card-row:hover {
    background-color: var(--dfr-row-hover-bg) !important;
    color: var(--dfr-row-hover-text) !important;
    border-color: var(--dfr-row-hover-border) !important;
}

/* File Title Section */
.dfr-col-title {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

/* Qualified with .dfr-card-row (not just the bare class) so this rule's
   specificity beats a generic "a" or "a:link" colour rule from the site's
   own template/page-builder CSS, whichever order the two stylesheets happen
   to load in. color: inherit here means "take the row's own already-
   accessible text colour" — the row's colour varies with whatever background
   an admin configures, so it can't be hardcoded here the way the button
   colours below are. */
.dfr-card-wrapper .dfr-card-row .dfr-title-link {
    color: inherit !important;
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: var(--dfr-title-transform, none);
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dfr-card-wrapper .dfr-card-row .dfr-title-link:hover {
    text-decoration: underline !important;
}

/* Prominent File Extension Badge Box */
.dfr-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    font-size: 1.6rem;
    flex-shrink: 0;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0,0,0,0.1);
}

/* The icon is an <a>, so site/template link rules (padding, margin, text-indent,
   float, line-height, letter-spacing) can push the glyph off-centre inside its
   square. Reset all of that on the box and the glyph, qualified with the
   wrapper class so these win over generic "a" / "a i" rules. */
.dfr-card-wrapper a.dfr-file-icon {
    border-radius: var(--dfr-icon-radius, 8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-indent: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}
.dfr-card-wrapper a.dfr-file-icon i {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
    text-indent: 0 !important;
    text-align: center !important;
    line-height: 1 !important;
    position: static !important;
    transform: none !important;
}
.dfr-card-wrapper a.dfr-file-icon::before,
.dfr-card-wrapper a.dfr-file-icon::after {
    content: none !important;
}
.dfr-card-wrapper a.dfr-file-icon i::before {
    display: block;
    margin: 0;
}

/* Fallback only — every badge below sets its own computed-contrast colour on
   the icon via the .dfr-ext-* rules that follow. This just covers a file
   extension that somehow isn't in any of those groups. */
.dfr-card-wrapper .dfr-file-icon i {
    color: #ffffff !important;
}

/* Dynamic Configuration-Driven Badge Backgrounds, each paired with an icon
   colour computed server-side (getAccessibleTextColor() in
   dropfilesreformat.php) to contrast against that specific badge's own
   background — not a single hardcoded icon colour for every badge regardless
   of how light or dark it is. Every selector here is qualified with
   .dfr-card-wrapper for the same reason as the title link above: a plain
   ".dfr-ext-pdf i" is only as specific as a plain "a i" or "i" rule the
   surrounding site might define, and the extra ancestor class guarantees
   ours wins regardless of stylesheet load order. */
.dfr-card-wrapper .dfr-ext-pdf {
    background-color: var(--dfr-badge-pdf) !important;
}
.dfr-card-wrapper .dfr-ext-pdf i {
    color: var(--dfr-badge-pdf-text) !important;
}

.dfr-card-wrapper .dfr-ext-zip,
.dfr-card-wrapper .dfr-ext-rar,
.dfr-card-wrapper .dfr-ext-7z {
    background-color: var(--dfr-badge-zip) !important;
}
.dfr-card-wrapper .dfr-ext-zip i,
.dfr-card-wrapper .dfr-ext-rar i,
.dfr-card-wrapper .dfr-ext-7z i {
    color: var(--dfr-badge-zip-text) !important;
}

.dfr-card-wrapper .dfr-ext-doc,
.dfr-card-wrapper .dfr-ext-docx {
    background-color: var(--dfr-badge-doc) !important;
}
.dfr-card-wrapper .dfr-ext-doc i,
.dfr-card-wrapper .dfr-ext-docx i {
    color: var(--dfr-badge-doc-text) !important;
}

.dfr-card-wrapper .dfr-ext-xls,
.dfr-card-wrapper .dfr-ext-xlsx,
.dfr-card-wrapper .dfr-ext-csv {
    background-color: var(--dfr-badge-xls) !important;
}
.dfr-card-wrapper .dfr-ext-xls i,
.dfr-card-wrapper .dfr-ext-xlsx i,
.dfr-card-wrapper .dfr-ext-csv i {
    color: var(--dfr-badge-xls-text) !important;
}

.dfr-card-wrapper .dfr-ext-ppt,
.dfr-card-wrapper .dfr-ext-pptx {
    background-color: var(--dfr-badge-ppt) !important;
}
.dfr-card-wrapper .dfr-ext-ppt i,
.dfr-card-wrapper .dfr-ext-pptx i {
    color: var(--dfr-badge-ppt-text) !important;
}

.dfr-card-wrapper .dfr-ext-png,
.dfr-card-wrapper .dfr-ext-jpg,
.dfr-card-wrapper .dfr-ext-jpeg,
.dfr-card-wrapper .dfr-ext-gif,
.dfr-card-wrapper .dfr-ext-svg {
    background-color: var(--dfr-badge-img) !important;
}
.dfr-card-wrapper .dfr-ext-png i,
.dfr-card-wrapper .dfr-ext-jpg i,
.dfr-card-wrapper .dfr-ext-jpeg i,
.dfr-card-wrapper .dfr-ext-gif i,
.dfr-card-wrapper .dfr-ext-svg i {
    color: var(--dfr-badge-img-text) !important;
}

.dfr-card-wrapper .dfr-ext-file {
    background-color: var(--dfr-badge-default) !important;
}
.dfr-card-wrapper .dfr-ext-file i {
    color: var(--dfr-badge-default-text) !important;
}

/* Buttons Container */
.dfr-col-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Configurable Action Buttons */
.dfr-card-wrapper .dfr-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px;
    border-radius: var(--dfr-button-radius, 6px) !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.1s ease;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.dfr-card-wrapper .dfr-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Space between the icon and the label (a margin, so it holds even where a template overrides flex gap). */
.dfr-card-wrapper .dfr-btn i,
.dfr-card-wrapper .dfr-btn svg {
    margin-right: 0.6rem;
}

/* The button label is a bare <span> with no class of its own — it was
   relying on inheriting color from the parent <a>, which is fine in
   isolation but loses to any external stylesheet (a Joomla template's own
   "a" or "a span" rule, for instance) that sets its own colour with equal or
   higher specificity and happens to load afterwards. That's exactly what
   produced dark, low-contrast "Download"/"Preview" labels sitting inside an
   otherwise correctly white-on-blue / white-on-magenta button: the icon
   (styled directly, below) stayed white and accessible; the label text,
   styled only via inheritance, didn't. Every element that carries this
   colour — the link itself, its icon, and its label span — now gets it set
   directly, so none of them depend on inheritance surviving an unrelated
   stylesheet.  */
.dfr-card-wrapper .dfr-btn-download,
.dfr-card-wrapper .dfr-btn-download i,
.dfr-card-wrapper .dfr-btn-download span {
    color: var(--dfr-download-text) !important;
}
.dfr-card-wrapper .dfr-btn-download {
    background-color: var(--dfr-download-bg) !important;
}

.dfr-card-wrapper .dfr-btn-open,
.dfr-card-wrapper .dfr-btn-open i,
.dfr-card-wrapper .dfr-btn-open span {
    color: var(--dfr-open-text) !important;
}
.dfr-card-wrapper .dfr-btn-open {
    background-color: var(--dfr-open-bg) !important;
}

/* "Hide buttons" mode: title on the left, file-type icon flush to the far right
   of the block. The icon takes the button radius so it matches the buttons it
   replaces, and the row stays horizontal on small screens. */
.dfr-card-wrapper.dfr-icon-right .dfr-card-row {
    padding: 6px 6px 6px 18px;
}
.dfr-card-wrapper.dfr-icon-right .dfr-file-icon {
    border-radius: var(--dfr-icon-radius, var(--dfr-button-radius, 8px)) !important;
}
.dfr-card-wrapper.dfr-icon-right .dfr-col-title {
    margin-right: 14px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 640px) {
    .dfr-card-wrapper:not(.dfr-icon-right) .dfr-card-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .dfr-col-title {
        width: 100%;
    }

    .dfr-col-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Keep icon and label side by side on one line, equal height, whatever the template does to <i>/<span>. */
    .dfr-card-wrapper .dfr-btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row !important;
        display: inline-flex !important;
        gap: 0;
        padding: 8px 10px;
        white-space: nowrap;
    }

    .dfr-card-wrapper .dfr-btn i,
    .dfr-card-wrapper .dfr-btn svg,
    .dfr-card-wrapper .dfr-btn .material-icons {
        display: inline-block !important;
        flex: 0 0 auto;
        margin: 0 0.6rem 0 0 !important;
        line-height: 1;
    }

    .dfr-card-wrapper .dfr-btn span {
        display: inline !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Very small phones: stack the buttons full width so a label can never wrap. */
@media (max-width: 360px) {
    .dfr-col-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .dfr-card-wrapper .dfr-btn {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* 2.7.3: Dropfiles' own table stays in the DOM as the source of truth, hidden. */
.dfr-source-hidden {
    display: none !important;
}

/* Title rendered as plain text when Dropfiles gives no title link */
.dfr-card-wrapper .dfr-card-row .dfr-title-text {
    cursor: default;
}

/* Title + optional description stacked in the card's text block */
.dfr-card-wrapper .dfr-card-row .dfr-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

/* Description: same colour as the title, smaller, non-bold, italic */
.dfr-card-wrapper .dfr-card-row .dfr-desc {
    color: inherit !important;
    font-size: 0.85rem;
    font-weight: 400 !important;
    font-style: italic;
    line-height: 1.35;
    margin-top: 2px;
    overflow-wrap: anywhere;
}