/**
 * Theme coverage, part two.
 *
 * Continues theme-coverage.css, which is at the size this project keeps its
 * files under. Same rules apply: every value is a palette variable from
 * palettes.css, so these serve light and dark from one set of declarations.
 */

/* =============================================
   FONT AWESOME 5 CLASS NAMES ON A VERSION 4 FONT

   The account layout loads font-awesome 4, where the family is selected by the
   `fa` class alone. Several templates were written against version 5, which
   splits the family into `fas`, `far` and `fab`, and version 4 has no rule for
   any of them, so `fas fa-lock` selected no font at all and rendered as an empty
   box. That is the row of blank squares beside Secure Payment on the upgrade
   page and the missing glyph on the comparison button.

   Pointing the three version 5 names at the version 4 family makes them resolve.
   The icon names themselves are unchanged between the two for everything used
   here.
   ============================================= */
.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    font-family: FontAwesome !important;
    font-weight: normal !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* =============================================
   FOCUS RINGS

   The white box around a selected tab, a sidebar icon or a pressed button was
   the browser's own focus ring, which is drawn in a light colour and cannot be
   themed. It is replaced rather than removed, because removing it would leave
   somebody navigating by keyboard with nothing to follow.
   ============================================= */
.sp-dashboard input:focus,
.sp-dashboard select:focus,
.sp-dashboard textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--sp-accent-primary);
}

/* Buttons, tabs and sidebar icons take a background instead of a ring.
   A ring on a 70px sidebar icon is clipped to two vertical lines, which reads
   as a colour applied to one side of the item, and that is not a pattern this
   project uses. */
.sp-dashboard a:focus,
.sp-dashboard button:focus,
.sp-dashboard .btn:focus,
.sp-dashboard [role="tab"]:focus,
.sp-dashboard .nav-tabs > li > a:focus,
.sp-sidebar-item > a:focus {
    outline: none;
    box-shadow: none;
}

.sp-dashboard .btn:focus-visible,
.sp-dashboard [role="tab"]:focus-visible,
.sp-dashboard .nav-tabs > li > a:focus-visible,
.sp-sidebar-item > a:focus-visible {
    background-color: var(--sp-bg-card-hover);
}

/* =============================================
   BUTTONS

   btn-default is white in Bootstrap 3, which is the white square next to the
   share button and the pale chip on every modal. btn-info and btn-primary are
   the bright blue that appeared on Download, Fullscreen, Sort By, View All
   Links, apply and Show Full Comparison.
   ============================================= */
.sp-dashboard .btn-default,
.file-browse-container-wrapper .btn-default {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .btn-default:hover,
.sp-dashboard .btn-default:focus,
.sp-dashboard .btn-default:active,
.file-browse-container-wrapper .btn-default:hover {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-accent-primary);
    color: var(--sp-text-primary);
}

.sp-dashboard .btn-info,
.sp-dashboard .btn-primary,
.sp-dashboard .btn-success,
.file-browse-container-wrapper .btn-info,
.file-browse-container-wrapper .btn-primary,
.sp-dashboard .sp-btn-upload,
.sp-dashboard .sp-btn-accent {
    background-color: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
    color: #ffffff;
}

.sp-dashboard .btn-info:hover,
.sp-dashboard .btn-primary:hover,
.sp-dashboard .btn-success:hover,
.sp-dashboard .btn-info:focus,
.sp-dashboard .btn-primary:focus,
.sp-dashboard .btn-success:focus,
.file-browse-container-wrapper .btn-info:hover,
.file-browse-container-wrapper .btn-primary:hover,
.sp-dashboard .sp-btn-upload:hover,
.sp-dashboard .sp-btn-accent:hover {
    background-color: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
    color: #ffffff;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.13);
}

/* The social share buttons keep their own brand colours on purpose, so they are
   excluded from the rules above by class and only their container is themed. */
.sp-dashboard .share-group .dropdown-menu,
.file-browse-container-wrapper .share-group .dropdown-menu,
.file-browse-container-wrapper #socialShare .dropdown-menu {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    padding: 6px;
    min-width: 0;
}

/* =============================================
   FIELDS

   Sharing Code's Statistics Url, Info Page and Delete File Url are readonly
   inputs, which Bootstrap paints a lighter grey than an editable one, so they
   arrived as white bars on a dark panel.
   ============================================= */
.sp-dashboard input[type="text"],
.sp-dashboard input[type="email"],
.sp-dashboard input[type="password"],
.sp-dashboard input[type="search"],
.sp-dashboard input[type="number"],
.sp-dashboard input[type="url"],
.sp-dashboard textarea,
.sp-dashboard select,
.sp-dashboard .form-control,
.sp-dashboard input[readonly],
.sp-dashboard textarea[readonly],
.sp-dashboard .form-control[readonly],
.sp-dashboard .form-control[disabled],
.file-browse-container-wrapper .form-control,
.file-browse-container-wrapper input[readonly] {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
    box-shadow: none;
}

.sp-dashboard input::placeholder,
.sp-dashboard textarea::placeholder {
    color: var(--sp-text-muted);
}

.sp-dashboard pre,
.file-browse-container-wrapper pre {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* =============================================
   CARETS

   Bootstrap draws a caret as a border triangle in the current text colour, and
   the toolbar buttons never set one, so Folder Tools pointed at a black arrow on
   a dark button.
   ============================================= */
.sp-dashboard .caret,
.file-browse-container-wrapper .caret {
    border-top-color: var(--sp-text-primary);
    color: var(--sp-text-primary);
}

.sp-dashboard .dropup .caret {
    border-bottom-color: var(--sp-text-primary);
    border-top-color: transparent;
}

/* =============================================
   LINKS INSIDE PANELS

   A link in a modal kept the theme's body link colour, which on these surfaces
   is close enough to the background to disappear. That is the account settings
   link in the folder dialog.
   ============================================= */
/*
 * Only anchors that are genuinely body text.
 *
 * The first version of this was `a:not(.btn)`, which was the wrong test, because
 * an anchor carrying its own background is a button and giving its text the accent
 * put accent text on an accent fill.
 *
 * The second version replaced it with `p a, li a, td a, label a`, and `li a` was
 * just as wrong. Every tab in this application is an anchor inside a list item:
 * `ul.nav.nav-tabs > li > a` on the account settings screen, `ul.nav.nav-tabs.file-info-tabs`
 * on the file panel, and `ul.nav.nav-tabs.stats-padding` in the statistics modal.
 * So `li a` painted every tab label accent blue, and the `:hover` half of the pair
 * underlined it, at a specificity of three classes which beat the
 * `.sp-dashboard .nav a` exception below at two. That is the blue underlined tabs
 * on the file panel, the settings screen and the statistics modal, all from this
 * one selector.
 *
 * A list that holds prose carries no class. Every list that is navigation or a
 * control in this codebase carries one, which was checked rather than assumed: the
 * complete set of ul and ol class attributes across the theme's templates and the
 * file manager's generated markup is accordion, accordion-1, accordion--oneopen,
 * bordered, breadcrumb, btn-breadcrumb, btn-group, bc-3, dropdown-menu,
 * dropdown-menu-list, dropdown-menu-right, dropdown-white, file-info-tabs,
 * menu-horizontal, menu-vertical, nav, nav-tabs, pagination, per-page-menu,
 * pull-left, pull-right, row, row--list, scroller, sp-dropdown-menu,
 * sp-header-nav, sp-sidebar-nav, sp-sidebar-submenu, stats-padding, tabs and
 * text-left. Testing for the absence of any class therefore excludes all of them
 * at once and cannot go stale when another one is added.
 *
 * formatted-bullets is named explicitly because it is the one prose list that does
 * carry a class, on the rewards and reseller pages.
 */
.sp-dashboard .modal-body p a,
.sp-dashboard .modal-body td a,
.sp-dashboard .modal-body label a,
.sp-dashboard .modal-body ul:not([class]) > li > a,
.sp-dashboard .modal-body ol:not([class]) > li > a,
.sp-dashboard .sp-content p a,
.sp-dashboard .sp-content td a,
.sp-dashboard .sp-content ul:not([class]) > li > a,
.sp-dashboard .sp-content ol:not([class]) > li > a,
.sp-nested-page .sp-content .formatted-bullets li > a,
.file-browse-container-wrapper p a,
.file-browse-container-wrapper td a {
    color: var(--sp-accent-primary);
}

.sp-dashboard .modal-body p a:hover,
.sp-dashboard .modal-body td a:hover,
.sp-dashboard .modal-body ul:not([class]) > li > a:hover,
.sp-dashboard .sp-content p a:hover,
.sp-dashboard .sp-content td a:hover,
.sp-dashboard .sp-content ul:not([class]) > li > a:hover,
.sp-nested-page .sp-content .formatted-bullets li > a:hover {
    /* No underline. A hover underline is the one thing this project does not use to
       mark a link, so the colour shift carries it on its own. */
    color: var(--sp-accent-secondary);
    text-decoration: none;
}

/* An anchor that is a control keeps its own colour, wherever it sits. Stated
   rather than left to inheritance so a future container rule cannot capture it. */
.sp-dashboard a.btn,
.sp-dashboard a[class*="btn"],
.sp-dashboard a[role="tab"],
.sp-dashboard [data-toggle="tab"],
.sp-dashboard .nav a,
.sp-dashboard a.tag,
.sp-dashboard a.label,
.sp-dashboard .sp-app-btn {
    text-decoration: none;
}

/* =============================================
   THE FILE TILE

   The selected tick sat on a pale strip across the top of the tile, and the
   menu toggle beside it was a white square, both from vendor rules that assume
   a white card.
   ============================================= */
/* The tick above every thumbnail is gone.
   BaseFileManager emits a `span.cr` holding a glyphicon on every tile, which put
   a checkbox plate across the top of each one whether anything was selected or
   not. Selection is driven by a class on the tile, not by this element, so
   hiding it costs no behaviour. */
.fileIconLi .cr,
.folderIconLi .cr,
.image-upload-thumb-check {
    display: none !important;
}

.fileManagerIcon .fileListing .fileIconLi .dropdown-toggle,
.fileManagerIcon .fileListing .fileIconLi .btn {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* =============================================
   NOTIFICATIONS

   The panel was narrow enough that a single line of text filled it.
   ============================================= */
/* The cap was the thing keeping it small, and my first attempt missed it.
   dashboard.css line 1777 sets `min-width: 300px; max-width: 350px` and line 2068
   sets `width: 320px`. A min-width of 340px was simply clamped by that max-width,
   so the panel grew by twenty pixels and still could not hold a line of text. All
   three properties are stated here, and the viewport cap keeps it sane on a
   narrow window. */
.sp-dashboard .sp-notification-btn + .dropdown-menu,
.sp-header-right .sp-notification-btn + .dropdown-menu {
    width: 420px;
    min-width: 420px;
    max-width: 92vw;
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .top p {
    padding: 12px 14px;
    margin: 0;
    line-height: 1.5;
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list li a {
    padding: 10px 14px;
    white-space: normal;
}

/* =============================================
   THE SIDEBAR TOOLTIP

   The tooltip is absolutely positioned outside a 70px column, so it widened the
   sidebar's own scrollable area and the whole column could be dragged sideways
   off the screen while scrolling. Horizontal overflow is clipped, which `clip`
   does without forcing the vertical axis to scroll the way `hidden` would, and
   theme-toggle.js switches the tooltip to fixed positioning on hover so it can
   still be read outside the clipped box.
   ============================================= */
/* No overflow clipping on the sidebar. An earlier attempt clipped the x axis to
   stop the drag, which also hid the More flyout, because that sits at left:100%
   outside the column. Both the tooltip and the flyout are switched to fixed
   positioning by theme-toggle.js instead, and a fixed element contributes no
   scrollable width to any ancestor, so the drag goes away without hiding
   anything. */
.sp-sidebar-tooltip {
    pointer-events: none;
}

/*
 * Position comes through custom properties, not through inline left and top.
 *
 * Two rules made the first version of this wrong. theme-enhancements.css line 633
 * sets `left: 100% !important` on the submenu, and an important declaration in a
 * stylesheet beats a plain inline style, so left and top written onto the element
 * by script were ignored. Writing `left: auto !important` here to clear it beat
 * the script's values as well, which is the same problem from the other side.
 *
 * Custom properties fix both: the property is set inline by script, which nothing
 * in a stylesheet competes with, and the important declarations below read it.
 *
 * theme-enhancements.css line 597 also sets `transform: translateY(-50%)` on the
 * tooltip. The script already centres it against the item, so leaving that in
 * place shifted it up by half its own height on top of the correct position. It
 * is cleared here.
 */
.sp-sidebar-tooltip.is-pinned,
.sp-sidebar-submenu.is-pinned {
    position: fixed !important;
    left: var(--sp-fly-x, 80px) !important;
    top: var(--sp-fly-y, 0) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 1200;
}

/* =============================================
   THE UPGRADE PAGE INSIDE THE ACCOUNT SHELL

   These pages are built from the public theme's pricing classes, and the account
   layout does not load the public stylesheet, so the columns arrived with no
   surface, no spacing and headings the same colour as the page. Rather than pull
   a whole second stylesheet into the account chrome, the handful of classes the
   pricing markup actually uses are given palette values here.
   ============================================= */
.sp-content .pricing {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    border-radius: 12px;
    overflow: hidden;
}

.sp-content .pricing .pricing__head,
.sp-content .pricing__head {
    background-color: var(--sp-bg-card-hover);
    padding: 22px 18px;
    text-align: center;
}

.sp-content .pricing__dollar {
    color: var(--sp-text-primary);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.sp-content .pricing h3,
.sp-content .pricing h4,
.sp-content .pricing .h1 {
    color: var(--sp-text-primary);
}

.sp-content .pricing ul {
    list-style: none;
    margin: 0;
    padding: 18px;
}

.sp-content .pricing li {
    color: var(--sp-text-secondary);
    padding: 6px 0;
    text-align: center;
}

.sp-content .h1 {
    color: var(--sp-text-primary);
    font-size: 30px;
    font-weight: 600;
}

.sp-content .lead {
    color: var(--sp-text-secondary);
    font-size: 17px;
    line-height: 1.6;
}

.sp-content .boxed,
.sp-content .gateway-box-wrapper {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    border-radius: 12px;
    padding: 18px;
}

.sp-content .type--fine-print {
    color: var(--sp-text-muted);
}

.sp-content .color--success {
    color: var(--sp-accent-primary);
}

.sp-content .color--error {
    color: var(--sp-accent-secondary);
}

.sp-content .table--alternate-row > tbody > tr:nth-of-type(2n+1) > td,
.sp-content .table--alternate-row > tbody > tr:nth-of-type(2n+1) > th {
    background-color: var(--sp-bg-card-hover);
}

.sp-content .table--alternate-row td,
.sp-content .table--alternate-row th {
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-content .pricing-section-2 {
    padding: 8px 0 32px;
}

/* The gateway logos are supplied artwork. They get the card surface, not a
   hardcoded plate, so they follow the palette like everything else. */
.sp-content .gateway-box-wrapper img,
.sp-content .pricing img {
    background-color: var(--sp-bg-card-hover);
    border-radius: 6px;
    padding: 4px;
}

/* =============================================
   PAGINATION

   One component behind two separate defects.

   In the History modal the links ran together as "FirstPrevious1NextLast",
   because nothing gave them spacing or made them inline blocks.

   In the file listing the same control produced an unlabelled blue square. Its
   active page rule in dashboard.css sets `color: #ffffff !important` over
   `background-color: var(--fe-accent-primary)`, and --fe- names were declared in
   frontend-dark.css, which the account layout never loads, so the background
   resolved from elsewhere while the label was white on top of it with nothing to
   contrast against. The variables are in palettes.css now, and the rules below
   state the label colour against the surface it actually sits on rather than
   assuming white will do.
   ============================================= */
.sp-dashboard .dataTables_paginate,
.sp-dashboard .paging_full_numbers,
.sp-dashboard .paginationRow,
.paginationRow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    padding: 14px 0 4px;
}

.sp-dashboard .paging_full_numbers .paginate_button,
.sp-dashboard .paging_full_numbers .paginate_active,
.sp-dashboard .dataTables_paginate a,
.sp-dashboard .dataTables_paginate span,
.paginationRow a,
.paginationRow span {
    display: inline-block;
    min-width: 34px;
    padding: 6px 12px;
    border: 1px solid var(--sp-border-color);
    border-radius: 6px;
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.sp-dashboard .paging_full_numbers .paginate_button:hover,
.sp-dashboard .dataTables_paginate a:hover,
.paginationRow a:hover {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-accent-primary);
    color: var(--sp-text-primary);
    text-decoration: none;
}

/* The current page. White on the accent, stated together so the pair cannot
   drift apart the way it did when the background came from a variable this
   stylesheet could not see. */
.sp-dashboard .paging_full_numbers .paginate_active,
.sp-dashboard .dataTables_paginate .current,
.paginationRow .currentPageText,
.paginationRow .active {
    background-color: var(--sp-accent-primary) !important;
    border-color: var(--sp-accent-primary) !important;
    color: #ffffff !important;
}

.sp-dashboard .paging_full_numbers .paginate_button_disabled,
.sp-dashboard .dataTables_paginate .disabled {
    opacity: 0.4;
    cursor: default;
}

/* The white rule under the table in the History modal was the wrapper's own
   bottom border. */
.sp-dashboard .dataTables_wrapper,
.sp-dashboard .account-history-table {
    border: none;
    background-color: transparent;
}

.sp-dashboard .account-history-table .table {
    margin-bottom: 0;
}
/* =============================================
   TOOLBAR BUTTONS IN LIGHT MODE

   Upload, Search Files and Folder Tools are coloured from --sp-btn-upload-bg,
   --sp-btn-search-bg and --sp-btn-accent-bg. Every palette defines those in its
   dark block and none of the light blocks override them, so in light mode the
   toolbar inherited the dark values and sat there as three navy slabs on a white
   page.

   Fixed here rather than by adding three declarations to thirteen light palette
   blocks, because the values are derivable: the accent is shared between the two
   modes, and the neutral button is the card surface. Text colour is stated
   alongside each background, since a light plate cannot keep the white label the
   dark one used.
   ============================================= */
[data-mode="light"] .sp-dashboard .sp-btn-upload,
[data-mode="light"] .sp-dashboard .sp-btn-accent {
    background-color: var(--sp-accent-primary);
    color: #ffffff;
}

[data-mode="light"] .sp-dashboard .sp-btn-upload:hover,
[data-mode="light"] .sp-dashboard .sp-btn-accent:hover {
    background-color: var(--sp-accent-primary);
    color: #ffffff;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.13);
}

[data-mode="light"] .sp-dashboard .sp-btn-secondary {
    background-color: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
    border: 1px solid var(--sp-border-color);
}

[data-mode="light"] .sp-dashboard .sp-btn-secondary:hover {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
    border-color: var(--sp-accent-primary);
}

[data-mode="light"] .sp-dashboard .sp-btn-secondary .caret,
[data-mode="light"] .sp-dashboard .sp-btn-secondary i {
    color: var(--sp-text-primary);
    border-top-color: var(--sp-text-primary);
}
/* =============================================
   THE EDIT FILE DIALOG

   Found by reading edit_file.html.twig rather than by guessing: it uses
   input-group-addon, input-group-btn, control-label, inline-checkbox and
   modal-icon-left, and I had a rule for none of them.

   bootstrap.css line 4888 gives .input-group-addon `background-color: #f3f3f3`
   with #919191 text and an #ebebeb border. That is the pale block beside the
   filename and sharing url fields. Its own selector is a single class, so one
   class inside .sp-dashboard is enough to take it.
   ============================================= */
.sp-dashboard .input-group-addon,
.file-browse-container-wrapper .input-group-addon {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-secondary);
}

.sp-dashboard .control-label,
.sp-dashboard .modal-body label,
.file-browse-container-wrapper .control-label {
    color: var(--sp-text-secondary);
}

.sp-dashboard .inline-checkbox,
.sp-dashboard .inline-checkbox label {
    color: var(--sp-text-secondary);
}

/* The illustration plate beside the dialog body. custom.css only sets padding
   and alignment on it, so there is no background to beat, but the panel behind
   the artwork was inheriting the modal surface rather than a card. */
.sp-dashboard .modal-body .modal-icon-left {
    background-color: transparent;
}

/* input-group-btn holds a .btn, which the button rules above already cover, but
   the group's own seam between the field and the button was a light border. */
.sp-dashboard .input-group .form-control,
.sp-dashboard .input-group-btn > .btn {
    border-color: var(--sp-border-color);
}

/* The keyword field's static wrapper class. bootstrap-tagsinput adds
   .bootstrap-tagsinput at runtime, which is styled above, but the markup also
   carries a plain `tagsinput` class that nothing in this theme styles at all, so
   it is given the same surface for the case where the script has not run yet. */
.sp-dashboard .tagsinput {
    background-color: var(--sp-bg-card-hover);
    border: 1px solid var(--sp-border-color);
    color: var(--sp-text-primary);
}
/* =============================================
   MUTED NOTES

   add_edit_folder.html.twig carried `style="color: #aaa;"` inline on its
   watermark note. An inline style cannot be overridden from a stylesheet without
   !important, so no amount of theming reached it, and #aaa is washed out on a
   dark card and too pale on a light one. The inline style is gone and the note
   carries this class instead.

   A sweep of every account template found this was the only inline colour, so
   there is no second instance to chase.
   ============================================= */
.sp-dashboard .sp-note-muted,
.sp-note-muted {
    color: var(--sp-text-muted);
}
/* =============================================
   THE SINGLE FILE PAGE, BY ITS REAL CLASSES

   Read out of file_details.html.twig. The earlier rules for this page assumed the
   details table was in a modal, which it is not, so `.sp-dashboard .modal .table`
   never touched it and the Added By, Filesize and Downloads rows stayed the
   vendor's striped white. That is the single largest thing still wrong with this
   page.

   The keyword chips also sit in `bootstrap-tagsview`, not `bootstrap-tagsinput`.
   The chips themselves are covered by the .tag and .label-info rules, but the
   container was not.
   ============================================= */
.file-browse-container-wrapper .table,
.file-browse-container-wrapper .table-bordered,
.file-browse-container-wrapper .table-striped {
    background-color: transparent;
    color: var(--sp-text-primary);
    border-color: var(--sp-border-color);
}

.file-browse-container-wrapper .table > tbody > tr > td,
.file-browse-container-wrapper .table > tbody > tr > th,
.file-browse-container-wrapper .table > thead > tr > th,
.file-browse-container-wrapper .table-bordered > tbody > tr > td,
.file-browse-container-wrapper .table-bordered > tbody > tr > th {
    background-color: transparent;
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.file-browse-container-wrapper .table-striped > tbody > tr:nth-of-type(2n+1) > td,
.file-browse-container-wrapper .table-striped > tbody > tr:nth-of-type(2n+1) > th {
    background-color: var(--sp-bg-card-hover);
}

/* The label column of that table. */
.file-browse-container-wrapper .view-file-details-first-row {
    color: var(--sp-text-secondary);
    background-color: transparent;
}

/* Panels on the page. section-wrapper was already covered; these were not. */
.file-browse-container-wrapper .file-details-view,
.file-browse-container-wrapper .file-details-sharing-code,
.file-browse-container-wrapper .content-preview-wrapper,
.file-browse-container-wrapper .image-preview-wrapper,
.file-browse-container-wrapper .image-name-wrapper {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.file-browse-container-wrapper .image-name-title,
.file-browse-container-wrapper .text-section,
.file-browse-container-wrapper .text-section-1 {
    color: var(--sp-text-primary);
}

/* The tab strip on this page carries its own class as well as nav-tabs. */
.file-browse-container-wrapper .file-info-tabs,
.file-browse-container-wrapper .file-info-tabs > li > a {
    background-color: transparent;
    border-color: var(--sp-border-color);
}

.file-browse-container-wrapper .file-info-tabs > li.active > a {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* The keyword chip container. */
.file-browse-container-wrapper .bootstrap-tagsview {
    background-color: transparent;
}

/* The back button strip above the preview. */
.file-browse-container-wrapper .image-hide-wrapper,
.file-browse-container-wrapper .button-wrapper {
    background-color: transparent;
}
/* =============================================
   THE LIST VIEW ROW

   Read out of BaseFileManager, which builds each row as a div.fileIconLi holding
   span.filename, span.filesize, span.fileUploadDate, span.downloadCount,
   span.fileOwner, span.thumbList and span.filesizeAlt.

   Checked each against custom.css: none of them sets a colour except
   .filesizeAlt, which hardcodes #8392a5, and .noItemsRow which is not styled at
   all. So every other column was relying on inheritance from a parent that the
   palette does not reach, and the "No items" row had no treatment whatsoever.
   ============================================= */
.sp-dashboard .fileManagerList .filename,
.sp-dashboard .fileManagerList .filesize,
.sp-dashboard .fileManagerList .fileUploadDate,
.sp-dashboard .fileManagerList .downloadCount,
.sp-dashboard .fileManagerList .fileOwner {
    color: var(--sp-text-primary);
}

.sp-dashboard .fileManagerList .filesize,
.sp-dashboard .fileManagerList .fileUploadDate,
.sp-dashboard .fileManagerList .downloadCount,
.sp-dashboard .fileManagerList .fileOwner {
    color: var(--sp-text-secondary);
}

/* custom.css line 289 hardcodes #8392a5 here, which is a blue grey that suits
   neither a dark card nor a light one. */
.sp-dashboard .filesizeAlt,
.file-browse-container-wrapper .filesizeAlt {
    color: var(--sp-text-muted);
}

/* The empty row, which nothing styled. Centred and muted rather than a bare
   string sitting at the left edge of the grid. */
.sp-dashboard .noItemsRow,