/**
 * Theme coverage for the parts of the account area the palette never reached.
 *
 * The account chrome was themed, but the panels inside it were not: the single
 * file page, the edit and stats modals, the upload dialog's FTP details, the
 * file hover menu, the search panel, the keyword chips and the tab strips all
 * kept the vendor stylesheets' white surfaces, so on a dark palette they arrived
 * as bright rectangles in the middle of a dark page.
 *
 * Every value here is a palette variable from palettes.css, so this file is not
 * a dark mode patch: it is the same set of rules serving light and dark, because
 * the variables themselves change with the mode. A light palette gets light
 * surfaces out of exactly these declarations.
 *
 * This is a separate file rather than more of theme-enhancements.css because
 * that file is already close to the size limit this project keeps its files
 * under. Load it after theme-enhancements.css.
 *
 * !important appears only where the rule being replaced used it too, or where
 * the vendor selector is more specific than anything reasonable to write here.
 */

/* =============================================
   THE SINGLE FILE PAGE
   ============================================= */
.file-browse-container-wrapper .section-wrapper,
.file-browse-container-wrapper .file-preview-wrapper .tab-content,
.file-browse-container-wrapper .file-preview-wrapper .col-md-3 .tab-content,
.file-browse-container-wrapper .file-preview-wrapper {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.file-browse-container-wrapper .section-wrapper h1,
.file-browse-container-wrapper .section-wrapper h2,
.file-browse-container-wrapper .section-wrapper h3,
.file-browse-container-wrapper .section-wrapper h4 {
    color: var(--sp-text-primary);
}

.file-browse-container-wrapper .section-wrapper p,
.file-browse-container-wrapper .section-wrapper label,
.file-browse-container-wrapper .section-wrapper td {
    color: var(--sp-text-secondary);
}

/* The sharing code and forum code fields on that page */
.file-browse-container-wrapper input[type="text"],
.file-browse-container-wrapper textarea,
.file-browse-container-wrapper .form-control {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* =============================================
   FILE MANAGER LISTING
   The odd rows and the icon tiles were white.
   ============================================= */
.fileManagerList .fileListing > div:nth-child(2n+1) {
    background-color: var(--sp-bg-secondary);
}

.fileManagerList .fileListing .fileListingHeader:hover,
.fileManagerMain .fileManagerCell .pagingWrapper .rightSection .button-container .currentPageText:hover {
    background-color: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
}

.fileManagerIcon .fileListing .fileIconLi,
.fileManagerIcon div.front {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
}

.fileManagerIcon .fileListing .thumbIcon {
    background-color: var(--sp-bg-card-hover);
}

.fileManagerMain .folderTreeview,
.fileManagerWrapper .fileManagerMain .fileManagerCell .fileManager {
    background-color: var(--sp-bg-secondary);
    color: var(--sp-text-primary);
}

/* =============================================
   DROPDOWNS
   The file hover menu showed white down both edges, which was the menu's own
   background behind items that do not reach the border.
   ============================================= */
.sp-dashboard .dropdown-menu,
.file-browse-container-wrapper .dropdown-menu,
.tt-dropdown-menu {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .dropdown-menu > li > a,
.tt-dropdown-menu .tt-suggestion {
    color: var(--sp-text-primary);
}

.sp-dashboard .dropdown-menu > li:hover,
.sp-dashboard .dropdown-menu > li > a:hover,
.sp-dashboard .dropdown-menu > li > a:focus,
.tt-dropdown-menu .tt-suggestion:hover {
    background-color: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
}

.sp-dashboard .dropdown-menu .divider {
    background-color: var(--sp-border-color);
}

/* =============================================
   MODAL CLOSE BUTTONS
   These were a light grey chip, which read as a white square on a dark panel.
   ============================================= */
/* Specificity raised deliberately.
   dashboard.css carries `.sp-dashboard .modal-header .close` at three classes and
   bootstrap.css carries `.modal .modal-header .close`, both of which beat a two
   class selector here, so the earlier version of this rule lost and the close
   button stayed a pale chip. Matched at four classes so it wins on merit rather
   than by !important. */
.sp-dashboard .modal .modal-header .close,
.sp-dashboard .modal-header .close,
.sp-dashboard .modal .close,
.file-upload-wrapper .modal-header .close,
.file-upload-wrapper .modal-content .close,
.file-upload-wrapper .close {
    background: transparent;
    background-color: transparent;
    border: none;
    color: var(--sp-text-primary);
    text-shadow: none;
    opacity: 0.65;
}

.sp-dashboard .modal .modal-header .close:hover,
.sp-dashboard .modal-header .close:hover,
.sp-dashboard .modal .close:hover,
.file-upload-wrapper .modal-header .close:hover,
.file-upload-wrapper .modal-content .close:hover,
.file-upload-wrapper .close:hover,
.sp-dashboard .modal .modal-header .close:focus,
.sp-dashboard .modal-header .close:focus,
.sp-dashboard .modal .close:focus,
.file-upload-wrapper .modal-header .close:focus,
.file-upload-wrapper .close:focus {
    background-color: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
    opacity: 1;
}

/* =============================================
   THE UPLOAD DIALOG
   ============================================= */
.fileUploadContent {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
}

/* FTP details. The rows were striped white, which is the pair of bright bars
   across the FTP tab. */
.sliderContent table,
.sliderContent tr,
.sliderContent td,
.sliderContent th {
    background-color: transparent;
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sliderContent tr:nth-child(2n+1) td {
    background-color: var(--sp-bg-card-hover);
}

.sliderContent tr:hover td,
.sliderContent td:hover {
    background-color: var(--sp-bg-card-hover);
    color: var(--sp-text-primary);
}

/* =============================================
   TABS
   A selected tab drew a white border on every dark palette.
   ============================================= */
.sp-dashboard .nav-tabs,
.file-browse-container-wrapper .nav-tabs {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .nav-tabs > li > a,
.file-browse-container-wrapper .nav-tabs > li > a {
    color: var(--sp-text-secondary);
    border-color: transparent;
    background-color: transparent;
}

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

.sp-dashboard .nav-tabs > li.active > a,
.sp-dashboard .nav-tabs > li.active > a:hover,
.sp-dashboard .nav-tabs > li.active > a:focus,
.file-browse-container-wrapper .nav-tabs > li.active > a,
.file-browse-container-wrapper .nav-tabs > li.active > a:hover,
.file-browse-container-wrapper .nav-tabs > li.active > a:focus,
.tabs-vertical > li.active > a,
.search-results-env .nav-tabs li.active a {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* =============================================
   KEYWORD CHIPS
   The label kept its own colour on hover, so the text disappeared into the
   chip. Both states are stated, which is what stops that happening.
   ============================================= */
.bootstrap-tagsinput {
    background-color: var(--sp-bg-card-hover);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
    box-shadow: none;
}

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

.bootstrap-tagsinput .tag,
.file-browse-container-wrapper .label-info,
.file-browse-container-wrapper .label {
    background-color: var(--sp-accent-primary);
    color: #ffffff;
}

.bootstrap-tagsinput .tag:hover,
.bootstrap-tagsinput .tag:focus,
.file-browse-container-wrapper .label-info:hover,
.file-browse-container-wrapper .label:hover {
    background-color: var(--sp-accent-primary);
    color: #ffffff;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.13);
}

/* The admin chip in the header lost its label on hover for the same reason. */
.sp-admin-badge:hover,
.sp-admin-badge:focus {
    color: #ffffff;
    text-decoration: none;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.13);
}

/* =============================================
   TABLES INSIDE MODALS, WHICH IS THE STATS PANEL
   ============================================= */
.sp-dashboard .modal table,
.sp-dashboard .modal .table {
    color: var(--sp-text-primary);
    background-color: transparent;
}

.sp-dashboard .modal .table > thead > tr > th,
.sp-dashboard .modal .table > tbody > tr > td,
.sp-dashboard .modal .table > tbody > tr > th {
    border-color: var(--sp-border-color);
    background-color: transparent;
    color: var(--sp-text-primary);
}

.sp-dashboard .modal .table-striped > tbody > tr:nth-of-type(2n+1) > td {
    background-color: var(--sp-bg-card-hover);
}

.panel-table .panel-body {
    background-color: var(--sp-bg-card);
}

/* =============================================
   DATATABLES CHROME
   ============================================= */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    background-color: transparent;
    color: var(--sp-text-secondary);
}

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

/* =============================================
   SEARCH PANEL
   ============================================= */
.search-results-env .search-bar,
.search-results-env .search-results-messages tbody tr,
.search-results-env .search-results-messages tbody tr.unread {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.search-results-env .search-results > .search-result .sr-inner:hover {
    background-color: var(--sp-bg-card-hover);
}

/* =============================================
   THE VENDOR TILE VARIANTS
   Every tile-white-* variant hard codes a white card.
   ============================================= */
.tile-stats[class*="tile-white"],
.tile-stats.tile-gray {
    background-color: var(--sp-bg-card) !important;
    border-color: var(--sp-border-color) !important;
    color: var(--sp-text-primary) !important;
}

.tile-stats[class*="tile-white"]:hover,
.tile-stats.tile-gray:hover {
    background-color: var(--sp-bg-card-hover) !important;
}

/* =============================================
   NOTICES
   The warning notice was a bright yellow band that belongs to no palette. It
   is a surface with a tinted border now, so it still reads as a notice without
   being the loudest thing on the page.
   ============================================= */
.sp-dashboard .alert,
.file-browse-container-wrapper .alert {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .alert-warning,
.file-browse-container-wrapper .alert-warning {
    border-color: var(--sp-accent-secondary);
    color: var(--sp-text-primary);
}

.sp-dashboard .alert-danger,
.file-browse-container-wrapper .alert-danger {
    border-color: var(--sp-accent-secondary);
}

.sp-dashboard .alert a,
.file-browse-container-wrapper .alert a {
    color: var(--sp-accent-primary);
}

.filePopupContentNotice {
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* =============================================
   EMPTY STATES

   An empty list is the normal state of a new account, so it gets its own
   treatment rather than borrowing the one used to report a failure.
   ============================================= */
.sp-empty-state {
    padding: 56px 24px;
    text-align: center;
    background-color: var(--sp-bg-card);
    border: 1px solid var(--sp-border-color);
    border-radius: 12px;
}

.sp-empty-state-icon {
    display: block;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 18px;
    color: var(--sp-accent-primary);
    opacity: 0.55;
}

.sp-empty-state-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 600;
    color: var(--sp-text-primary);
}

.sp-empty-state-text {
    margin: 0 auto;
    max-width: 34em;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sp-text-secondary);
}