/**
 * Theme coverage, part three.
 *
 * Continues theme-coverage-2.css, which reached the size this project keeps its
 * files under. The seam is not arbitrary: part two settles vendor colour defaults
 * on individual elements, buttons, fields, carets, links, while this file covers
 * the composite controls, the tab strips, the DataTables frame, the file panel's
 * sections, the keyword chips, the share split button and the tile menu button.
 *
 * Same rules as the other two: every value is a palette variable from palettes.css,
 * so one set of declarations serves light and dark, and every vendor rule being
 * overridden is named with its file and line.
 */
/* =============================================
   TABS, EVERYWHERE THEY APPEAR

   Three sets of tabs exist and only the file panel's had colours, which is why the
   statistics modal and the account settings screen showed bare link text.

   The markup is `ul.nav.nav-tabs` in all three cases: plain on the settings
   screen, with file-info-tabs added on the file panel at
   file_details.html.twig line 77, and with stats-padding added in the statistics
   modal at file_stats.html.twig line 64. Matching on nav-tabs under the body class
   reaches all three at once.

   No underline in any state. An underline on a tab reads as a link inside a
   control, and the active tab is already distinguished by its fill and border.
   ============================================= */
.sp-dashboard .nav-tabs {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .nav-tabs > li > a,
.sp-dashboard .nav-tabs > li > a:link,
.sp-dashboard .nav-tabs > li > a:visited {
    color: var(--sp-text-secondary);
    background-color: transparent;
    border-color: transparent;
    text-decoration: none;
}

.sp-dashboard .nav-tabs > li > a:hover,
.sp-dashboard .nav-tabs > li > a:focus {
    color: var(--sp-text-primary);
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    text-decoration: none;
}

.sp-dashboard .nav-tabs > li.active > a,
.sp-dashboard .nav-tabs > li.active > a:hover,
.sp-dashboard .nav-tabs > li.active > a:focus {
    color: var(--sp-text-primary);
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    border-bottom-color: transparent;
    text-decoration: none;
}

/* The icon inside a tab inherits rather than keeping the link colour. */
.sp-dashboard .nav-tabs > li > a > i,
.sp-dashboard .nav-tabs > li > a > span {
    color: inherit;
}

/* The date range switcher under the statistics tabs is four anchors separated by
   pipes, in a plain div rather than a list, so it never matched the prose rule and
   sat at the browser default. */
.sp-dashboard .modal-body .text-center > a {
    color: var(--sp-accent-primary);
    text-decoration: none;
}

.sp-dashboard .modal-body .text-center > a:hover {
    /* No underline here either. The colour shift is the whole hover state. */
    color: var(--sp-accent-secondary);
    text-decoration: none;
}

/* =============================================
   THE DATATABLES FRAME

   components.css line 3188 gives .dataTables_info and .dataTables_paginate
   `border: 1px solid #ebebeb` with `background: #fafafa`, and line 3077 does the
   same to .dataTables_length and .dataTables_filter. That pale outlined strip
   under the History table, wrapped around First / Previous / 1 / Next / Last, is
   those two rules.

   The borders are kept on the same edges, only recoloured, because they close the
   frame the table sits inside rather than marking one side of it.
   ============================================= */
.sp-dashboard .dataTables_wrapper .dataTables_info,
.sp-dashboard .dataTables_wrapper .dataTables_paginate,
.sp-dashboard .dataTables_wrapper .dataTables_length,
.sp-dashboard .dataTables_wrapper .dataTables_filter {
    background: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .dataTables_wrapper .dataTables_filter > label input {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* The History table's own head and rows. The header row had no separation from
   the body and the single row read as a floating light block. */
.sp-dashboard .modal-body table.table > thead > tr > th,
.sp-dashboard .account-history-table table > thead > tr > th {
    background: var(--sp-bg-card-hover);
    border-bottom: 1px solid var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .modal-body table.table > tbody > tr > td,
.sp-dashboard .account-history-table table > tbody > tr > td {
    border-top-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .modal-body table.table-striped > tbody > tr:nth-of-type(odd),
.sp-dashboard .modal-body table.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: var(--sp-bg-card-hover);
}

/* =============================================
   SCROLLBARS

   The sharing code blocks are `pre` elements holding a single long line, so each
   one scrolls sideways, and the browser paints that scrollbar in its own light
   colours. Those are the white bars under the HTML Code and Forum Code panels.

   Themed for webkit, and scrollbar-color covers Firefox, which has no pseudo
   elements for this.
   ============================================= */
.sp-dashboard {
    scrollbar-color: var(--sp-border-color) transparent;
}

.sp-dashboard pre::-webkit-scrollbar,
.sp-dashboard .sp-content ::-webkit-scrollbar,
.sp-dashboard .modal-body ::-webkit-scrollbar,
.file-browse-container-wrapper ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: var(--sp-bg-primary);
}

.sp-dashboard pre::-webkit-scrollbar-track,
.sp-dashboard .sp-content ::-webkit-scrollbar-track,
.sp-dashboard .modal-body ::-webkit-scrollbar-track,
.file-browse-container-wrapper ::-webkit-scrollbar-track {
    background: var(--sp-bg-primary);
}

.sp-dashboard pre::-webkit-scrollbar-thumb,
.sp-dashboard .sp-content ::-webkit-scrollbar-thumb,
.sp-dashboard .modal-body ::-webkit-scrollbar-thumb,
.file-browse-container-wrapper ::-webkit-scrollbar-thumb {
    background: var(--sp-border-color);
    border-radius: 5px;
}

.sp-dashboard pre::-webkit-scrollbar-thumb:hover,
.file-browse-container-wrapper ::-webkit-scrollbar-thumb:hover {
    background: var(--sp-accent-primary);
}

.sp-dashboard ::-webkit-scrollbar-corner,
.file-browse-container-wrapper ::-webkit-scrollbar-corner {
    background: var(--sp-bg-primary);
}

/* =============================================
   THE FILE PANEL SECTIONS

   custom.css line 809 gives .file-browse-container-wrapper .section-wrapper
   `background-color: #ffffff`. There are three of them on the panel: the preview,
   the similar items strip and the sharing code block. The similar items one is
   empty when a file has no siblings, and an empty white block is the bar sitting
   above Page Link with nothing in it.
   ============================================= */
.file-browse-container-wrapper .section-wrapper {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
}

/* An empty one takes no space at all rather than showing as a bar. :empty does not
   match an element containing whitespace, so the similar images holder is named
   directly as well. */
.file-browse-container-wrapper .section-wrapper:empty {
    display: none;
}

.file-browse-container-wrapper .similar-images:empty,
.file-browse-container-wrapper .section-wrapper > .similar-images:empty {
    display: none;
}

/* custom.css line 256 and line 973 paint the similar items slides white, with the
   loading indicator over the top. The indicator is kept and only the plate under
   it changes. */
.file-browse-container-wrapper .similar-images .slick-slider .slick-slide {
    background-color: var(--sp-bg-card-hover);
    background-image: url(../images/loading_small.gif);
    background-position: center center;
    background-repeat: no-repeat;
    border-color: var(--sp-border-color);
}

/* =============================================
   KEYWORD CHIPS

   bootstrap-tagsinput, loaded by the account layout, renders each keyword as
   `span.tag.label.label-info`. Bootstrap paints .label with white text, and the
   chip took the accent as its background from the theme, so the label ended up
   accent on accent and the words could not be read.

   Both classes are stated because either one alone is enough to select the chip,
   and the text is set explicitly rather than left to inherit.
   ============================================= */
.sp-dashboard .tag,
.sp-dashboard .label,
.sp-dashboard .label-info,
.sp-dashboard .label-default,
.sp-dashboard .bootstrap-tagsinput .tag,
.file-browse-container-wrapper .tag,
.file-browse-container-wrapper .label {
    background-color: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
    border: 1px solid var(--sp-border-color);
    border-radius: 3px;
    padding: 3px 8px;
    font-weight: normal;
    display: inline-block;
    margin: 2px;
}

.sp-dashboard .tag a,
.sp-dashboard .bootstrap-tagsinput .tag a,
.file-browse-container-wrapper .tag a {
    color: var(--sp-text-secondary);
    text-decoration: none;
    margin-left: 5px;
}

.sp-dashboard .bootstrap-tagsinput {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    box-shadow: none;
    width: 100%;
}

.sp-dashboard .bootstrap-tagsinput input {
    background: transparent;
    color: var(--sp-text-primary);
}

/* =============================================
   THE SHARE SPLIT BUTTON

   The share control is a Bootstrap split button, `div.btn-group.share-group` at
   file_details.html.twig line 21: a share button and a separate caret button
   beside it. Only the first had been themed, so the caret half stayed at
   bootstrap.css's white and read as a blank white square welded to the button.

   The menu itself stacked four brand coloured squares in a single column, as tall
   as the panel. The brand colours are kept, because a Twitter button that is not
   Twitter blue is not recognisable, and only the arrangement changes: one row,
   sized to the icons.
   ============================================= */
.file-browse-container-wrapper .share-group > .btn,
.file-browse-container-wrapper .share-group > .btn.dropdown-toggle,
.sp-dashboard .share-group > .btn,
.sp-dashboard .share-group > .btn.dropdown-toggle {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.file-browse-container-wrapper .share-group > .btn:hover,
.file-browse-container-wrapper .share-group > .btn.dropdown-toggle:hover,
.file-browse-container-wrapper .share-group.open > .btn.dropdown-toggle,
.sp-dashboard .share-group > .btn:hover,
.sp-dashboard .share-group.open > .btn.dropdown-toggle {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-accent-primary);
    color: var(--sp-text-primary);
}

/* The menu, laid out as a row. */
.file-browse-container-wrapper .share-group .dropdown-menu,
.sp-dashboard .share-group .dropdown-menu,
.file-browse-container-wrapper #socialShare .dropdown-menu {
    display: none;
    min-width: 0;
    width: auto;
    padding: 6px;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.file-browse-container-wrapper .share-group.open .dropdown-menu,
.sp-dashboard .share-group.open .dropdown-menu,
.file-browse-container-wrapper #socialShare.open .dropdown-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.file-browse-container-wrapper .share-group .dropdown-menu > li,
.sp-dashboard .share-group .dropdown-menu > li,
.file-browse-container-wrapper #socialShare .dropdown-menu > li {
    display: block;
    float: none;
    margin: 0;
}

/* Each social button keeps its brand fill and becomes a square of a size that
   matches the toolbar buttons beside it. */
.file-browse-container-wrapper .share-group .dropdown-menu > li > a,
.sp-dashboard .share-group .dropdown-menu > li > a,
.file-browse-container-wrapper #socialShare .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 4px;
    color: #ffffff;
    text-decoration: none;
}

.file-browse-container-wrapper .share-group .dropdown-menu > li > a:hover,
.sp-dashboard .share-group .dropdown-menu > li > a:hover {
    color: #ffffff;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.16);
}

/* =============================================
   THE MODAL ICONS

   Each dialog carried a PNG in a fixed palette, which is where the mustard and
   rust bars in the statistics dialog came from. The images are replaced in the
   templates with entypo glyphs, the same icon font the rest of the interface uses,
   so they take a colour from here and follow the theme.
   ============================================= */
.sp-dashboard .modal-icon-left {
    text-align: center;
    padding: 10px 0 20px;
}

.sp-dashboard .modal-icon-left > i {
    font-size: 84px;
    line-height: 1;
    color: var(--sp-accent-primary);
    opacity: 0.85;
}
/* =============================================
   THE MENU BUTTON ON A FILE TILE

   This is the white square in the top corner of every thumbnail, and it survived
   every previous attempt because those attempts named the wrong element. The
   earlier rule in this file targets `.fileIconLi .dropdown-toggle` and
   `.fileIconLi .btn`, and the button is neither: BaseFileManager line 320 emits
   `div.fileOptions > a.fileDownload > i.caret`, a plain anchor with no button
   class at all.

   What paints it is theme.css line 2482, `.fileListing .image-thumb .fileOptions a`,
   giving `background: #ffffff` with `color: #ccc` at a specificity of three classes
   and one element. Matched here at four classes and one element, so it wins on
   merit rather than on load order.
   ============================================= */
.sp-dashboard .fileListing .image-thumb .fileOptions a,
.file-browse-container-wrapper .fileListing .image-thumb .fileOptions a {
    background: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
    border: 1px solid var(--sp-border-color);
    border-radius: 3px;
}

.sp-dashboard .fileListing .image-thumb .fileOptions a:hover,
.file-browse-container-wrapper .fileListing .image-thumb .fileOptions a:hover {
    background: var(--sp-bg-card);
    color: var(--sp-text-primary);
    border-color: var(--sp-accent-primary);
}

/* The caret inside it is a border triangle in the current colour, so it needs
   stating alongside the anchor or it stays at the vendor grey. */
.sp-dashboard .fileListing .image-thumb .fileOptions .fileDownload .caret,
.file-browse-container-wrapper .fileListing .image-thumb .fileOptions .fileDownload .caret {
    border-top-color: var(--sp-text-primary);
    color: var(--sp-text-primary);
}

/* theme.css line 2506 gives the delete action `background: #dd1f26`. A red fill on
   a destructive control is not a pattern this project uses, so it takes the same
   surface as its neighbour and is told apart by its glyph. */
.sp-dashboard .fileListing .image-thumb .fileOptions a.delete,
.file-browse-container-wrapper .fileListing .image-thumb .fileOptions a.delete {
    background: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
    border-color: var(--sp-border-color);
}

.sp-dashboard .fileListing .image-thumb .fileOptions a.delete:hover,
.file-browse-container-wrapper .fileListing .image-thumb .fileOptions a.delete:hover {
    background: var(--sp-bg-card);
    color: var(--sp-text-primary);
    border-color: var(--sp-accent-primary);
}
/* =============================================
   THE WHITE BAR ABOVE PAGE LINK

   custom.css line 809 is the cause:

     .file-browse-container-wrapper .section-wrapper {
         background-color: #ffffff;
         padding: 10px;
         margin-bottom: 16px;
     }

   The earlier override in this file matched at the same two classes, so which one
   applied came down to load order rather than merit, and a tie is not a fix.
   Matched at three classes here so it wins outright.

   There are three of these wrappers on the panel and the middle one holds only the
   similar items strip, which the previewer fills by ajax. When a file has no
   siblings that strip stays empty, and an empty box with a white fill and ten
   pixels of padding is the bar sitting between the preview and Page Link.
   ============================================= */
.sp-dashboard .file-browse-container-wrapper .section-wrapper,
.file-browse-container-wrapper .file-details-view .section-wrapper,
.file-browse-container-wrapper .file-details-sharing-code .section-wrapper {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
    border-radius: 6px;
}

/* A wrapper whose only child is the empty similar items holder takes no space.
   :has is needed because the emptiness is on the child while the fill is on the
   parent, and there is no other way to reach upward. */
.file-browse-container-wrapper .section-wrapper:has(> .similar-images:empty) {
    display: none;
}

/* Without :has, the strip itself at least contributes nothing. */
.file-browse-container-wrapper .similar-images:empty {
    display: none;
    margin: 0;
    padding: 0;
}

/* =============================================
   HEADINGS ON THE FILE PANEL

   Page Link, HTML Code, Forum Code, Statistics Url, Info Page and Delete File Url
   are `h4 > strong`, and nothing in the account stylesheets sets a heading colour,
   so they fell to the vendor default and sat almost black on the panel.

   Set for the whole account area rather than the file panel alone, because the same
   omission covers every h1 to h6 in here.
   ============================================= */
.sp-dashboard h1,
.sp-dashboard h2,
.sp-dashboard h3,
.sp-dashboard h4,
.sp-dashboard h5,
.sp-dashboard h6,
.sp-dashboard .modal-title,
.file-browse-container-wrapper h1,
.file-browse-container-wrapper h2,
.file-browse-container-wrapper h3,
.file-browse-container-wrapper h4,
.file-browse-container-wrapper h5,
.file-browse-container-wrapper h6 {
    color: var(--sp-text-primary);
}

.sp-dashboard h1 strong,
.sp-dashboard h2 strong,
.sp-dashboard h3 strong,
.sp-dashboard h4 strong,
.sp-dashboard h5 strong,
.sp-dashboard h6 strong,
.file-browse-container-wrapper h4 strong {
    color: inherit;
}

/* =============================================
   THE THEME BUTTON IN THE HEADER

   dashboard.css line 334 gave this a translucent white fill and a border, and then
   line 2503 came along later in the same file and set `background: transparent;
   border: none`, which is what took the highlight off it. Its hover at line 2516
   puts back a flat translucent grey, and that grey box on hover is the only thing
   marking it as a control at all.

   Restored as a filled button on the accent with white text, in both states, so it
   reads as a control before it is hovered.
   ============================================= */
.sp-dashboard .sp-theme-toggle,
.sp-header-right .sp-theme-toggle {
    /* The translucent white fill this button was originally given at
       dashboard.css line 334, not the accent. The accent was my own addition and
       was not asked for; what was missing is simply that the button read as a
       button, which the fill and border do on their own against the header. */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    color: var(--sp-text-header);
    padding: 8px 14px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sp-dashboard .sp-theme-toggle:hover,
.sp-dashboard .sp-theme-toggle:focus,
.sp-header-right .sp-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--sp-text-header);
}

.sp-dashboard .sp-theme-toggle i,
.sp-dashboard .sp-theme-current {
    color: var(--sp-text-header);
}

/* The icon slot has no glyph unless there is one to show. The button asked for
   `fa fa-paint-brush`, and the account area loads font-awesome 4, which has no
   fa-paint-brush at all, so the element rendered as nothing while the flex gap
   beside it stayed. That empty gap to the left of the theme name is the icon that
   was never there. The template now uses an entypo glyph that does exist, and this
   keeps the slot from reserving space if it is ever empty again. */
.sp-dashboard .sp-theme-toggle i:empty:not([class*="entypo"]):not([class*="fa-"]) {
    display: none;
}

/* =============================================
   THE USER CONTROL IN THE HEADER

   The name is an anchor, so it took a link colour and a hover underline and read as
   a link rather than as the menu it opens. The avatar and the caret sat on the text
   baseline instead of centred against it, which is the crooked look in the corner.
   ============================================= */
.sp-dashboard .sp-user-dropdown,
.sp-dashboard .sp-user-dropdown:link,
.sp-dashboard .sp-user-dropdown:visited,
.sp-dashboard .sp-user-dropdown:hover,
.sp-dashboard .sp-user-dropdown:focus {
    color: var(--sp-text-header);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
}

.sp-dashboard .sp-user-dropdown:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sp-dashboard .sp-user-dropdown-name,
.sp-dashboard .sp-user-dropdown .caret {
    color: var(--sp-text-header);
}

.sp-dashboard .sp-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* The three controls sit on one centred line rather than each finding its own
   baseline. */
.sp-dashboard .sp-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =============================================
   THE NOTIFICATION PANEL

   The line is a `p.small` holding a `span.unread-count`, and Bootstrap's .small is
   85 percent of an already small base, so it arrived at around eleven pixels in the
   secondary colour.
   ============================================= */
.sp-dashboard .sp-header-right .dropdown-menu .top p,
.sp-dashboard .sp-notification-btn + .dropdown-menu .top p,
.sp-dashboard .sp-notification-btn + .dropdown-menu .top p.small {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sp-text-primary);
    padding: 14px 16px;
    margin: 0;
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .unread-count,
.sp-dashboard .sp-notification-btn + .dropdown-menu .unread-count strong {
    font-size: 14px;
    color: var(--sp-text-primary);
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list .line {
    font-size: 13px;
    color: var(--sp-text-primary);
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list .line.small {
    font-size: 12px;
    color: var(--sp-text-secondary);
}

/* =============================================
   THE APPEARANCE PANE

   The title had the pane's own top padding above it and the header rule's twelve
   pixels below, which together left it floating in the middle of a tall empty
   band.

   The check on the selected card is `.sp-theme-card-check`, given `color: #fff` at
   dashboard.css line 160 with no fill behind it, so on a card whose swatches happen
   to be pale it disappeared and on hover it read as a grey smudge. It gets the
   accent as its own disc, which is what makes it legible on any of the thirteen
   swatch sets.
   ============================================= */
.sp-dashboard .sp-theme-modal-header,
.sp-theme-modal .sp-theme-modal-header {
    padding: 0 0 10px;
    margin-bottom: 14px;
}

.sp-dashboard .sp-theme-modal-title,
.sp-theme-modal .sp-theme-modal-title {
    margin: 0;
    line-height: 1.3;
}

/* The check needs nothing from here, and adding anything was the mistake.
   dashboard.css line 160 already gives it the accent disc and white glyph, and
   crucially `display: none`, with line 174 turning it on only for
   `.sp-theme-card.active`. Setting `display: flex` here overrode that and put a
   check on all thirteen cards at once. */

/* The card itself, so hovering the one already chosen does not wash it out. */
.sp-theme-modal .sp-theme-card:hover {
    border-color: var(--sp-accent-primary);
    background-color: var(--sp-bg-card-hover);
}

.sp-theme-modal .sp-theme-card.active,
.sp-theme-modal .sp-theme-card.active:hover {
    border-color: var(--sp-accent-primary);
    background-color: var(--sp-bg-card-hover);
}

/* =============================================
   THE HISTORY DIALOG INTERIOR

   The table met the edges of the dialog on every side, because the body it sits in
   carries no padding of its own once the vendor's own light frame is taken off it.
   ============================================= */
.sp-dashboard #addEditFolderModal .modal-body,
.sp-dashboard .modal-body .account-history-table {
    padding: 18px 20px;
}

.sp-dashboard .account-history-table table.table {
    margin-bottom: 0;
}

.sp-dashboard .modal-body table.table > thead > tr > th,
.sp-dashboard .modal-body table.table > tbody > tr > td {
    padding: 12px 14px;
}

.sp-dashboard .dataTables_wrapper .dataTables_paginate {
    padding: 10px 12px;
}
/* =============================================
   THE DATE RANGE FIELD ON THE SEARCH PANEL

   `div.daterange.daterange-inline` holding an `i.entypo-calendar` and a span, at
   site_js_html_containers.html.twig line 72. Nothing in the account stylesheets
   colours it, so the glyph fell to the inherited body colour and sat almost
   invisible against the panel while the words beside it were legible.

   Styled as the input it stands in for, since that is what it is: a control that
   opens a picker and shows the chosen range.
   ============================================= */
.sp-dashboard .daterange,
.sp-dashboard .daterange-inline {
    background-color: var(--sp-bg-card-hover);
    border: 1px solid var(--sp-border-color);
    border-radius: 4px;
    color: var(--sp-text-primary);
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.sp-dashboard .daterange:hover {
    border-color: var(--sp-accent-primary);
}

.sp-dashboard .daterange > i,
.sp-dashboard .daterange .entypo-calendar {
    color: var(--sp-accent-primary);
    font-size: 16px;
}

.sp-dashboard .daterange > span {
    color: var(--sp-text-primary);
}

/* =============================================
   THE HISTORY DIALOG, BOTTOM EDGE

   The interior padding added earlier covered the sides and the top, and the table
   still finished hard against the bottom of the body because the pagination strip
   is the last child and carries no margin of its own.
   ============================================= */
.sp-dashboard #addEditFolderModal .modal-body,
.sp-dashboard .modal-body .account-history-table {
    padding-bottom: 26px;
}

.sp-dashboard .modal-body .dataTables_wrapper {
    margin-bottom: 6px;
}

.sp-dashboard .modal-body .row:last-child,
.sp-dashboard .account-history-table > *:last-child {
    margin-bottom: 0;
}

/* =============================================
   THE SMALLEST TEXT IN THE CHROME

   The header menu and the dropdown items were set below fourteen pixels, which is
   the floor the rest of the interface uses. Raised to that floor and no further, so
   nothing that was already comfortable changes size.
   ============================================= */
.sp-dashboard .sp-header-nav > li > a,
.sp-dashboard .sp-header-nav a,
.sp-dashboard .sp-theme-current,
.sp-dashboard .sp-user-dropdown-name {
    font-size: 14px;
}

.sp-dashboard .dropdown-menu > li > a,
.sp-dashboard .sp-dropdown-menu > li > a {
    font-size: 14px;
}

.sp-dashboard .sp-theme-card-name {
    font-size: 12px;
}

/* The sidebar labels in the flyouts, which were the smallest text in the chrome. */
.sp-sidebar-tooltip,
.sp-sidebar-submenu > li > a {
    font-size: 14px;
}