/*
 * Theme coverage, part four: the statistics page, and the prose links that
 * part two's cleanup left without a colour.
 *
 * Part three took the three tab strips as far as their frame. What it did not
 * reach is what sits inside a statistics tab: the icon against its label, the
 * range switcher above the chart, and the data table under it, which arrives
 * from ChartsHelper as bootstrap's own `table table-bordered table-striped`
 * and therefore paints itself white on a dark page.
 *
 * Split into its own file for the same reason part three was: part three is at
 * the size this project keeps its files under, and a seam between "the tab
 * frame" and "what the statistics tab contains" is a real one.
 */

/* ---------- statistics tabs ---------- */

/* The two spacing classes the statistics markup asks for by name and no
   stylesheet ever defined, which is why every tab read as one run-on word
   with its icon welded to the first letter. */
.stats-padding {
    margin-bottom: 0;
}

.stats-padding > li > a {
    padding: 10px 16px;
}

.tab-padding {
    margin-right: 7px;
}

/* ---------- the range switcher above a chart ---------- */

/*
 * last 24 hours | last 7 days | last 30 days | last 12 months
 *
 * Four bare anchors in a centred div. Part two removed the blanket rule that
 * used to colour every anchor, correctly, because it was also painting the
 * tabs. These four were collateral: they kept the body colour, which on a dark
 * page is near enough the background to be invisible, so the switcher looked
 * like disabled text rather than the only control on the panel.
 */
#tabs .tab-pane > .text-center > a,
#tabs .tab-pane > .text-center > a:visited {
    color: var(--sp-accent-primary, #8b5a9e);
    text-decoration: none;
    padding: 0 2px;
}

#tabs .tab-pane > .text-center > a:hover,
#tabs .tab-pane > .text-center > a:focus {
    color: var(--sp-accent-secondary, #c75b7a);
    text-decoration: underline;
}

/* ---------- the data table under a chart ---------- */

/*
 * ChartsHelper emits bootstrap's own table classes, and this theme's bootstrap
 * still carries the light defaults: a white cell background on `.table` and a
 * near-white stripe on `.table-striped`. On this page that produced a white
 * header with pale grey text on it, unreadable, and rows that alternated
 * between white and the page. Scoped to the statistics container so no other
 * table on the site is touched.
 */
#tabs table.table {
    background-color: transparent;
    border-color: var(--sp-border-color, rgba(120, 120, 140, 0.28));
    margin-bottom: 24px;
}

#tabs table.table > thead > tr > th {
    background-color: var(--sp-bg-secondary, rgba(120, 120, 140, 0.12));
    border-color: var(--sp-border-color, rgba(120, 120, 140, 0.28));
    color: var(--sp-text-primary, #e8e8ef);
    font-weight: 600;
    vertical-align: middle;
}

#tabs table.table > tbody > tr > td {
    background-color: transparent;
    border-color: var(--sp-border-color, rgba(120, 120, 140, 0.2));
    color: var(--sp-text-secondary, #b9b9c6);
    vertical-align: middle;
}

/* The stripe, restated in the palette's terms. Every one of these needs the
   important because bootstrap sets the same property at the same specificity
   later in the cascade, and this sheet cannot be loaded after the vendor file
   without also winning against the rest of it. */
#tabs table.table-striped > tbody > tr:nth-child(odd) > td,
#tabs table.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: rgba(120, 120, 140, 0.07) !important;
}

#tabs table.table-striped > tbody > tr:nth-child(even) > td,
#tabs table.table-striped > tbody > tr:nth-child(even) > th {
    background-color: transparent !important;
}

#tabs table.table-hover > tbody > tr:hover > td {
    background-color: rgba(120, 120, 140, 0.13) !important;
}

/* A count of zero is still a number and should read as one. */
#tabs table.table > tbody > tr > td:first-child {
    color: var(--sp-text-primary, #e8e8ef);
}

/* ---------- where you are ---------- */

/*
 * The strip above the listing. It only appears where there is something to
 * say, which is inside a folder or in a place that is not ordinary browsing,
 * so the top of Your Files is left exactly as it was.
 */
.sp-location-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 0 0 12px 0;
    border-radius: 10px;
    background: var(--sp-bg-secondary, rgba(120, 120, 140, 0.1));
    font-size: 13px;
}

.sp-location-bar .sp-location-icon {
    flex: 0 0 auto;
    display: inline-flex;
    font-size: 15px;
    color: var(--sp-accent-primary, #8b5a9e);
}

.sp-location-crumbs {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.sp-location-crumbs .sp-crumb {
    color: var(--sp-accent-primary, #8b5a9e);
    text-decoration: none;
}

.sp-location-crumbs .sp-crumb:hover,
.sp-location-crumbs .sp-crumb:focus {
    text-decoration: underline;
}

/* The last crumb is where you already are, so it is a label rather than a
   link: a link back to the page you are on is a dead control. */
.sp-location-crumbs .sp-crumb-here {
    color: var(--sp-text-primary, #e8e8ef);
    font-weight: 600;
}

.sp-location-crumbs .sp-crumb-sep {
    color: var(--sp-text-muted, #8f8f9e);
}

/* The trash announces itself in the palette's warning colour rather than in
   the same neutral a folder gets. A listing where everything is on its way to
   being erased should not look like every other listing, which is exactly the
   confusion it caused. */
.sp-location-bar.sp-location-trash {
    background: rgba(200, 130, 60, 0.14);
}

.sp-location-bar.sp-location-trash .sp-location-icon {
    color: #d08a3c;
}

/* ---------- the sidebar trash target ---------- */

/*
 * Quiet until something is being dragged, so it reads as a destination rather
 * than a button. It is not a button: pressing it does nothing, which is why it
 * says drop rather than delete.
 */
.sp-sidebar-trash {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 10px 10px 10px;
    padding: 12px 8px;
    border-radius: 10px;
    border: 1px dashed var(--sp-border-color, rgba(120, 120, 140, 0.35));
    color: var(--sp-text-muted, #8f8f9e);
    font-size: 12px;
    text-align: center;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sp-sidebar-trash i {
    font-size: 15px;
}

/* The state that matters: something is over it and letting go will act. */
.sp-sidebar-trash.is-drop-hover {
    border-color: #d08a3c;
    border-style: solid;
    background: rgba(200, 130, 60, 0.16);
    color: var(--sp-text-primary, #e8e8ef);
}

/* A collapsed sidebar keeps the target and drops the words, because the icon
   is the part being aimed at. */
.sp-sidebar.is-collapsed .sp-sidebar-trash span,
.page-container.sidebar-collapsed .sp-sidebar-trash span {
    display: none;
}

/* ---------- the drag selection rectangle ---------- */

/*
 * The box the pointer sweeps. custom.css draws it in a fixed light blue on a
 * solid fill, which was chosen for a white page: on this one it is a bright
 * slab that hides whatever it is drawn over. Restated in the palette's own
 * accent at an opacity you can read the tiles through.
 *
 * pointer-events is the part that is not cosmetic. The box is a real element
 * sitting above the listing at z-index 1000 while the drag is in progress, so
 * without this it is what the pointer is over at the moment the button comes
 * up rather than the tiles underneath.
 */
.fileManagerDraggleSelection {
    border: 1px solid var(--sp-accent-primary, #8b5a9e);
    background-color: rgba(139, 90, 158, 0.18);
    pointer-events: none;
}

/* ---------- the file links panel ---------- */

/*
 * The urls panel used to be a run of plain text. It is a list of labelled rows
 * now, each with the link in a field and a button that copies it, which is
 * also the shape the premium sharing panel beside it builds.
 */
.file-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
}

.file-link-row .file-link-label {
    flex: 0 0 auto;
    min-width: 84px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--sp-text-muted, #8f8f9e);
}

/* Width stated on both, for the reason the premium page's own rows state it:
   the form rules in this theme give inputs and buttons a full width, and a
   full width basis on either one starves the other in a flex row. */
.file-link-row .file-link-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 6px 9px;
    font-size: 12.5px;
    border-radius: 6px;
    border: 1px solid var(--sp-border-color, rgba(120, 120, 140, 0.35));
    background: transparent;
    color: inherit;
}

.file-link-row .file-link-copy {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* The premium panel builds its rows in script with inline styles, so only the
   field inside it needs the same protection from the theme's form rules. */
#popupContentPremiumUrls [data-ps="row"] input {
    width: auto;
}

/* ---------- making a folder while moving ---------- */

.move-new-folder .move-new-folder-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Same reason as every other flex row in this sheet: the theme gives inputs
   and buttons a full width, which starves whichever one it does not win. */
.move-new-folder .move-new-folder-row .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.move-new-folder .move-new-folder-row .btn {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.move-new-folder .move-new-folder-note {
    min-height: 18px;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--sp-text-muted, #8f8f9e);
}

.move-new-folder .move-new-folder-note.is-problem {
    color: var(--sp-accent-red, #d9534f);
}

/* ---------- prose links ---------- */

/*
 * The anchors inside sentences: "click here" in the FTP panel, the FileZilla
 * mention beside it, and their like across the account area.
 *
 * Part two removed `p a, li a, td a, label a` because `li a` is every tab in
 * the application and the rule was painting them accent blue and underlining
 * them on hover. Removing it fixed the tabs and left these with no colour at
 * all, so a link in a sentence became body text that happened to be clickable.
 *
 * The narrower form only claims anchors that carry no class of their own,
 * which no tab, button or menu item in this theme is: every one of those is
 * classed. A direct child selector keeps it to the sentence the anchor is
 * written in rather than anything nested below it.
 */
p > a:not([class]),
p > a:not([class]):visited,
td > a:not([class]),
td > a:not([class]):visited,
label > a:not([class]),
label > a:not([class]):visited {
    color: var(--sp-accent-primary, #8b5a9e);
}

p > a:not([class]):hover,
p > a:not([class]):focus,
td > a:not([class]):hover,
td > a:not([class]):focus,
label > a:not([class]):hover,
label > a:not([class]):focus {
    color: var(--sp-accent-secondary, #c75b7a);
    text-decoration: underline;
}

/*
 * The named prose boxes, which are the two the report actually pointed at.
 *
 * The rule above reaches an anchor written inside a paragraph, a cell or a
 * label, and neither of the reported cases is any of those: the FTP panel puts
 * its sentence in `div.ftpTextBox`, where FileZilla and "click here" both live,
 * and the uploader puts its "Click here to upload more files" in
 * `div.baseText`. Both are divs with a class, so a paragraph selector could
 * never have found them, and both read as body text that happens to be
 * clickable.
 *
 * Listed by name rather than widened to `div > a`, because a div holds the
 * chrome as readily as it holds a sentence, and `:not([class])` still guards
 * the anchors themselves so the uploader's own classed controls beside them,
 * `showAdditionalOptionsLink` among others, keep the styling they have.
 */
.ftpTextBox > a:not([class]),
.ftpTextBox > a:not([class]):visited,
.ftpTextBox2 > a:not([class]),
.ftpTextBox2 > a:not([class]):visited,
.baseText > a:not([class]),
.baseText > a:not([class]):visited,
.fileSectionFooterText a:not([class]),
.fileSectionFooterText a:not([class]):visited,
.help-block > a:not([class]),
.help-block > a:not([class]):visited {
    color: var(--sp-accent-primary, #8b5a9e);
}

.ftpTextBox > a:not([class]):hover,
.ftpTextBox > a:not([class]):focus,
.ftpTextBox2 > a:not([class]):hover,
.ftpTextBox2 > a:not([class]):focus,
.baseText > a:not([class]):hover,
.baseText > a:not([class]):focus,
.fileSectionFooterText a:not([class]):hover,
.fileSectionFooterText a:not([class]):focus,
.help-block > a:not([class]):hover,
.help-block > a:not([class]):focus {
    color: var(--sp-accent-secondary, #c75b7a);
    text-decoration: underline;
}