.sp-dashboard .fileManagerIcon .fileListing .selected.fileIconLi span.filesizeAlt, .sp-dashboard .fileManagerIcon .fileListing .active.fileIconLi span.filesizeAlt {
    color: rgba(255, 255, 255, 0.8);
}

.sp-dashboard .fileManagerIcon .fileListing .fileIconLi .thumbIcon {
    background-color: var(--sp-bg-card);
    border-radius: 6px;
}

/* Dark theme specific file card styling */
[data-theme="dark"] .sp-dashboard .fileManagerIcon .fileListing .fileIconLi .thumbIcon {
    background-color: var(--sp-bg-card);
}

[data-theme="dark"] .sp-dashboard .fileManagerIcon .fileListing .fileIconLi .thumbIcon i {
    color: var(--sp-text-muted);
}

/* JSTree overrides for sidebar */
.sp-dashboard .jstree-default .jstree-clicked {
    background-color: var(--sp-bg-card) !important;
    color: var(--sp-text-primary) !important;
}

.sp-dashboard .jstree-default .jstree-hovered {
    background-color: var(--sp-bg-card-hover) !important;
}

.sp-dashboard .jstree-default .jstree-anchor {
    color: var(--sp-text-secondary);
}

/* Modal overrides */
.sp-dashboard .modal-content {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
}

.sp-dashboard .modal-header {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .modal-footer {
    border-top-color: var(--sp-border-color);
}

/* Form overrides */
.sp-dashboard .form-control {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* Tab overrides */
.sp-dashboard .nav-tabs {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .nav-tabs > li > a {
    color: var(--sp-text-secondary);
}

.sp-dashboard .nav-tabs > li.active > a {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* Table overrides */
.sp-dashboard .table {
    color: var(--sp-text-primary);
}

.sp-dashboard .table > thead > tr > th {
    border-bottom-color: var(--sp-border-color);
    color: var(--sp-text-secondary);
}

.sp-dashboard .table > tbody > tr > td {
    border-top-color: var(--sp-border-color);
}

/* Alert overrides */
.sp-dashboard .alert {
    border-radius: 6px;
}

/* Badge styling */
.sp-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.sp-badge-success {
    background-color: var(--sp-accent-green);
    color: #fff;
}

.sp-badge-danger {
    background-color: var(--sp-accent-red);
    color: #fff;
}

.sp-badge-primary {
    background-color: var(--sp-accent-primary);
    color: #fff;
}

.sp-badge-warning {
    background-color: var(--sp-accent-secondary);
    color: #fff;
}

/* Scrollbar styling for dark theme */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--sp-bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--sp-bg-card);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--sp-bg-card-hover);
}

/* Transition for theme switching */
body, .sp-dashboard, .sp-header, .sp-sidebar, .sp-toolbar, .sp-content {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ====================== */
/* CUSTOM ICON DEFINITIONS */
/* ====================== */
/* Custom nav icons - using existing entypo icons or font-awesome fallbacks */
.entypo-your_files:before { content: '\e850'; } /* folder */
.entypo-upgrade:before { content: '\e808'; } /* star as diamond fallback */
.entypo-rewards_logged_in:before { content: '\e8a8'; } /* trophy */
.entypo-vouchers:before { content: '\e8cb'; } /* ticket */
.entypo-settings:before { content: '\e855'; } /* cog */
.entypo-diamond:before { content: '\e808'; } /* star as diamond fallback */
.entypo-balance-scale:before { content: '\e85b'; } /* Using gavel/hammer as fallback */
.entypo-user-secret:before { content: '\e80a'; } /* user */
.entypo-hammer:before { content: '\e856'; } /* tools */

/* ====================== */
/* FILE MANAGER OVERRIDES */
/* ====================== */
/* Make file manager work inside sp-content */
.sp-content .file-manager-container {
    background-color: transparent;
    margin-bottom: 0;
}

.sp-content .file-listing-wrapper {
    margin-top: 0;
}

.sp-content .toolbar-container {
    display: none; /* Hide the old toolbar since we have sp-toolbar */
}

.sp-content .gallery-env {
    padding: 0;
}

.sp-content .fileManagerWrapper, .sp-content .fileManagerWrapperFullScreen {
    background-color: transparent;
}

/* File cards in new theme */
.sp-dashboard .fileManagerIcon .fileListing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    padding: 0;
}

.sp-dashboard .fileManagerIcon .fileListing .fileIconLi {
    margin: 0;
    width: auto;
    display: block;
}

.sp-dashboard .fileManagerIcon .fileListing .fileIconLi .thumbIcon {
    height: 100px;
    border-radius: 6px;
}

/* List view overrides */
.sp-dashboard .fileManagerList .fileListing {
    background-color: var(--sp-bg-secondary);
    border-radius: 8px;
    border-color: var(--sp-border-color);
}

.sp-dashboard .fileManagerList .fileListing > div {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .fileManagerList .fileListing > div:nth-child(2n+1) {
    background-color: var(--sp-bg-card);
}

.sp-dashboard .fileManagerList .fileListing > div:hover {
    background-color: var(--sp-bg-card-hover);
}

/* Pagination styling */
.sp-dashboard .paginationRow {
    padding: 20px;
    text-align: center;
}

.sp-dashboard .paginationRow .pagination {
    display: inline-flex;
    gap: 5px;
}

.sp-dashboard .paginationRow .pagination li a {
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--sp-text-secondary);
    border-radius: 4px;
    text-decoration: none;
}

.sp-dashboard .paginationRow .pagination li a:hover {
    background-color: transparent;
}

.sp-dashboard .paginationRow .pagination li.active a {
    background-color: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
    color: #fff;
	padding: 11px 17px;
    margin: auto 10px;
}

/* Breadcrumbs */
.sp-dashboard .breadcrumb {
    background-color: transparent;
    padding: 10px 0;
    margin-bottom: 15px;
}

.sp-dashboard .breadcrumb > li + li:before {
    color: var(--sp-text-muted);
}

.sp-dashboard .breadcrumb a {
    color: var(--sp-text-secondary);
}

.sp-dashboard .breadcrumb a:hover {
    color: var(--sp-text-primary);
}

/* Hidden elements in new layout */
.sp-dashboard .sidebar-menu:not(.sp-sidebar) {
    display: none;
}

.sp-dashboard .navbar:not(.sp-header) {
    display: none;
}

/* Modal styling */
.sp-dashboard .modal-content {
    background-color: var(--sp-bg-secondary);
    border: 1px solid var(--sp-border-color);
    border-radius: 8px;
}

.sp-dashboard .modal-header, .sp-dashboard .modal-footer {
    border-color: var(--sp-border-color);
}

.sp-dashboard .modal-title {
    color: var(--sp-text-primary);
}

.sp-dashboard .modal-body {
    color: var(--sp-text-secondary);
}

/* Dropdown menu improvements */
.sp-dashboard .dropdown-menu {
    background-color: var(--sp-bg-secondary);
    border: 1px solid var(--sp-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sp-dashboard .dropdown-menu > li > a {
    color: var(--sp-text-secondary);
    padding: 10px 16px;
}

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

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

/* Button states */
.sp-btn.disabled, .sp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Alert colors */
.sp-dashboard .alert-success {
    background-color: rgba(92, 184, 92, 0.1);
    border-color: rgba(92, 184, 92, 0.3);
    color: var(--sp-accent-green);
}

.sp-dashboard .alert-danger {
    background-color: rgba(217, 83, 79, 0.1);
    border-color: rgba(217, 83, 79, 0.3);
    color: var(--sp-accent-red);
}

.sp-dashboard .alert-info {
    background-color: rgba(139, 90, 158, 0.1);
    border-color: rgba(139, 90, 158, 0.3);
    color: var(--sp-accent-primary);
}

/* Temp account notice */
.sp-dashboard .side-notice {
    background-color: var(--sp-bg-card);
    padding: 15px;
    border-radius: 8px;
    margin: 15px;
}

.sp-dashboard .side-notice p {
    color: var(--sp-text-secondary);
    font-size: 13px;
    margin-bottom: 10px;
}

/* Tooltips */
.sp-dashboard .tooltip {
    font-size: 12px;
}

.sp-dashboard .tooltip-inner {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
    border-radius: 4px;
    padding: 6px 10px;
}

.sp-dashboard .tooltip.top .tooltip-arrow {
    border-top-color: var(--sp-bg-card);
}

/* Ensure proper z-index stacking */
.sp-header {
    z-index: 1050;
}

.sp-sidebar {
    z-index: 1040;
}

.sp-toolbar {
    z-index: 1030;
}

/* Uploader modal adjustments */
.sp-dashboard .uploader-container {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard .uploader-container .nav-tabs {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .uploader-container .tab-content {
    background-color: var(--sp-bg-secondary);
}

/* Fix for fullscreen mode */
.sp-dashboard.fullscreen-mode .sp-sidebar, .sp-dashboard.fullscreen-mode .sp-header, .sp-dashboard.fullscreen-mode .sp-toolbar {
    display: none;
}

.sp-dashboard.fullscreen-mode .sp-main {
    margin-left: 0;
    margin-top: 0;
}

.sp-dashboard.fullscreen-mode .sp-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

/* ====================== */
/* FIX: User dropdown positioning */
/* ====================== */
.sp-header-right .dropdown {
    position: relative;
}

.sp-header-right .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    top: 100%;
    margin-top: 5px;
    min-width: 200px;
    max-width: 280px;
}

/* ====================== */
/* FIX: Notifications dropdown */
/* ====================== */
.sp-header-right .sp-notification-btn + .dropdown-menu {
    min-width: 300px;
    max-width: 350px;
    max-height: 400px;
    overflow-y: auto;
}

.sp-header-right .dropdown-menu .top {
    padding: 10px 15px;
    border-bottom: 1px solid var(--sp-border-color);
}

.sp-header-right .dropdown-menu .top p {
    margin: 0;
    color: var(--sp-text-secondary);
}

.sp-header-right .dropdown-menu .scroller {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-header-right .dropdown-menu .scroller li {
    border-bottom: 1px solid var(--sp-border-color);
}

.sp-header-right .dropdown-menu .scroller li:last-child {
    border-bottom: none;
}

.sp-header-right .dropdown-menu .scroller li a {
    display: block;
    padding: 12px 15px;
}

.sp-header-right .dropdown-menu .scroller li.unread a {
    background-color: var(--sp-bg-card);
}

/* ====================== */
/* FIX: Sidebar submenu (More) */
/* ====================== */
.sp-sidebar-item.has-submenu .sp-sidebar-submenu {
    display: none;
}

.sp-sidebar-item.has-submenu.submenu-open .sp-sidebar-submenu {
    display: block;
}

/* ====================== */
/* FIX: Storage bar display */
/* ====================== */
.sp-sidebar-storage {
    margin-top: auto;
}

.sp-storage-progress {
    width: 100%;
}

#totalUsageText {
    display: block;
}

#totalUsageTextLoading {
    display: block;
}

/* ====================== */
/* FIX: Uploader modal */
/* ====================== */
.sp-dashboard .modal.fade .modal-dialog {
    max-width: 800px;
    margin: 30px auto;
}

.sp-dashboard .uploaderContainer, .sp-dashboard .uploader-container {
    background-color: var(--sp-bg-secondary);
    color: var(--sp-text-primary);
}

.sp-dashboard .uploaderContainer .close, .sp-dashboard .modal .close {
    color: var(--sp-text-primary);
    opacity: 0.8;
    font-size: 28px;
    line-height: 1;
    text-shadow: none;
}

.sp-dashboard .modal .close:hover {
    opacity: 1;
    color: var(--sp-text-primary);
}

/* ====================== */
/* FIX: Search modal dark theme */
/* ====================== */
.sp-dashboard .modal-content input[type="text"], .sp-dashboard .modal-content input[type="search"], .sp-dashboard .modal-content textarea, .sp-dashboard .modal-content select {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

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

.sp-dashboard .modal-content label {
    color: var(--sp-text-secondary);
}

/* Date picker styling */
.sp-dashboard .daterangepicker {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
}

.sp-dashboard .daterangepicker .calendar-table {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard .daterangepicker td, .sp-dashboard .daterangepicker th {
    color: var(--sp-text-primary);
}

.sp-dashboard .daterangepicker td.off {
    color: var(--sp-text-muted);
}

.sp-dashboard .daterangepicker td.active {
    background-color: var(--sp-accent-primary);
    color: #fff;
}

.sp-dashboard .daterangepicker .calendar-table thead tr:first-child th {
    color: var(--sp-text-secondary);
}

/* Radio buttons in modal */
.sp-dashboard .modal-content input[type="radio"] + label, .sp-dashboard .modal-content input[type="checkbox"] + label {
    color: var(--sp-text-secondary);
}

/* ====================== */
/* CORE.CSS OVERRIDES     */
/* ====================== */
/* These override core.css styles for the new dashboard layout */

/* Reset sidebar-menu width from core.css (240px -> 70px) */
.sp-dashboard .sidebar-menu.sp-sidebar {
    width: var(--sp-sidebar-width);
    background-color: var(--sp-bg-sidebar);
    padding: 0;
}

.sp-dashboard .sidebar-menu.sp-sidebar .sidebar-menu-inner {
    padding: 0;
    width: 100%;
}

/* Reset page container padding */
.sp-dashboard.page-body .page-container {
    padding-left: 0;
    margin-left: 0;
}

/* Fix navbar/header conflicts */
.sp-dashboard .navbar.sp-header {
    margin-bottom: 0;
    border: none;
    min-height: auto;
}

.sp-dashboard .navbar-fixed-top.sp-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Reset dropdown menu positioning */
.sp-dashboard .sp-header-right .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    float: none;
}

/* Fix content area margin */
.sp-dashboard .page-container.horizontal-menu {
    padding-top: 0;
}

/* Reset button styles from core.css */
.sp-dashboard .sp-btn {
    margin: 0;
}

/* Reset list styles in sidebar */
.sp-dashboard .sp-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-dashboard .sp-sidebar li {
    margin: 0;
    padding: 0;
}

/* Fix modal close button */
.sp-dashboard .modal-header .close {
    margin-top: 0;
    float: right;
    opacity: 0.8;
}

/* Fix form inputs in modals */
.sp-dashboard .modal-content .form-control {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* Fix uploader modal */
.sp-dashboard .uploaderContainer {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard #uploaderContainer {
    max-height: 70vh;
    overflow-y: auto;
}

/* Fix file manager icons area */
.sp-dashboard .fileManagerIcon {
    background-color: transparent;
}

/* Fix folder tree styling */
.sp-dashboard #folderTreeview {
    display: none;
}

/* Reset any fixed heights on content */
.sp-dashboard .main-content {
    min-height: auto;
}

/* ====================== */
/* ADDITIONAL FIXES       */
/* ====================== */

/* User Dropdown - fix off-screen positioning */
.sp-dashboard .sp-header-right .dropdown-menu {
    min-width: 200px;
    max-width: 280px;
    right: 0;
    left: auto;
    margin-top: 10px;
    background-color: var(--sp-bg-secondary);
    border: 1px solid var(--sp-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.sp-dashboard .sp-header-right .dropdown-menu li a {
    color: var(--sp-text-primary);
    padding: 10px 15px;
    display: block;
}

.sp-dashboard .sp-header-right .dropdown-menu li a:hover {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
}

.sp-dashboard .sp-header-right .dropdown-menu li a i {
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.sp-dashboard .sp-header-right .dropdown-menu .divider {
    background-color: var(--sp-border-color);
    margin: 5px 0;
}

/* Notifications dropdown styling */
.sp-dashboard .sp-notification-btn + .dropdown-menu {
    width: 320px;
    max-height: 400px;
    padding: 0;
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .top {
    padding: 12px 15px;
    border-bottom: 1px solid var(--sp-border-color);
    background-color: var(--sp-bg-card);
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .top p {
    margin: 0;
    color: var(--sp-text-secondary);
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .mark-read-link {
    color: var(--sp-accent-primary);
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none;
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list li {
    border-bottom: 1px solid var(--sp-border-color);
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list li a {
    padding: 12px 15px;
    display: block;
}

.sp-dashboard .sp-notification-btn + .dropdown-menu .dropdown-menu-list li.unread {
    background-color: var(--sp-bg-card);
}

/* Upload modal fixes
 *
 * These sit on the panel, not on the modal.
 *
 * #fileUploadWrapper is the .modal element, and Bootstrap 3 pins that to all
 * four edges of the viewport. Painting it with a background filled that entire
 * fixed layer, which is what covered the sidebar and the account bar, and
 * max-width: 90vw then held the layer at the top left corner so the panel
 * started in the corner rather than in the middle of the page. overflow: auto
 * scrolled the layer instead of the panel, which is how the footer row ended up
 * out of reach.
 *
 * Centring the dialog and letting a tall panel scroll inside itself is handled
 * in theme-enhancements.css, so nothing here needs to size the modal at all.
 * The panel's own background is set further down, on
 * `#fileUploadWrapper .modal-content`, so it is not repeated here.
 */
.sp-dashboard .uploader-container {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard #fileUploadWrapper .modal-header {
    background-color: var(--sp-bg-header);
    color: var(--sp-text-header);
    padding: 15px 20px;
    border-bottom: none;
}

.sp-dashboard #fileUploadWrapper .modal-header .close {
    color: var(--sp-text-header);
    opacity: 0.8;
    font-size: 28px;
    line-height: 1;
}

.sp-dashboard #fileUploadWrapper .modal-header .close:hover {
    opacity: 1;
}

.sp-dashboard #fileUploadWrapper .modal-body {
    padding: 20px;
}

.sp-dashboard #fileUploadWrapper .modal-content {
    background-color: var(--sp-bg-secondary);
    border: none;
    border-radius: 8px;
}

/* Search modal fixes */
.sp-dashboard .modal-content .search-form, .sp-dashboard .modal-content .filter-form {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard .modal-content .daterangepicker {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
}

.sp-dashboard .modal-content .daterangepicker .calendar-table {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
}

.sp-dashboard .modal-content .daterangepicker .calendar-table td, .sp-dashboard .modal-content .daterangepicker .calendar-table th {
    color: var(--sp-text-primary);
}

.sp-dashboard .modal-content .daterangepicker td.available:hover {
    background-color: var(--sp-accent-primary);
    color: #fff;
}

/* Settings page styling */
.sp-dashboard .settings-content, .sp-dashboard .panel {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
}

.sp-dashboard .panel-heading {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .panel-body {
    background-color: var(--sp-bg-secondary);
    color: var(--sp-text-primary);
}

.sp-dashboard .form-group label {
    color: var(--sp-text-secondary);
}

.sp-dashboard .form-control {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .form-control:focus {
    border-color: var(--sp-accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 90, 158, 0.2);
}

.sp-dashboard select.form-control {
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
}

/* View file page styling */
.sp-dashboard .file-details, .sp-dashboard .file-preview-container {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
}

.sp-dashboard .file-info-table {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard .file-info-table td, .sp-dashboard .file-info-table th {
    border-color: var(--sp-border-color);
    color: var(--sp-text-secondary);
    padding: 10px 15px;
}

.sp-dashboard .file-info-table td:last-child {
    color: var(--sp-text-primary);
}

.sp-dashboard .nav-tabs {
    border-bottom-color: var(--sp-border-color);
}

.sp-dashboard .nav-tabs > li > a {
    color: var(--sp-text-secondary);
    border-color: transparent;
}

.sp-dashboard .nav-tabs > li > a:hover {
    border-color: var(--sp-border-color);
    background-color: var(--sp-bg-card);
}

.sp-dashboard .nav-tabs > li.active > a {
    background-color: var(--sp-bg-secondary);
    border-color: var(--sp-border-color);
    border-bottom-color: var(--sp-bg-secondary);
    color: var(--sp-text-primary);
}

.sp-dashboard .tab-content {
    background-color: var(--sp-bg-secondary);
    border: 1px solid var(--sp-border-color);
    border-top: none;
    padding: 20px;
}

.sp-dashboard .keyword-tag {
    background-color: var(--sp-accent-primary);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    margin: 2px;
    font-size: 12px;
}

/* List view styling */
.sp-dashboard .fileManagerList .fileListing {
    background-color: var(--sp-bg-secondary);
}

.sp-dashboard .fileManagerList .fileListing .fileListingHeader {
    background-color: var(--sp-bg-card);
    border-bottom: 1px solid var(--sp-border-color);
    color: var(--sp-text-secondary);
    font-weight: 600;
}

.sp-dashboard .fileManagerList .fileListing .fileListRow {
    background-color: var(--sp-bg-secondary);
    border-bottom: 1px solid var(--sp-border-color);
    color: var(--sp-text-primary);
    transition: background-color 0.15s ease;
}

.sp-dashboard .fileManagerList .fileListing .fileListRow:hover {
    background-color: var(--sp-bg-card);
}

.sp-dashboard .fileManagerList .fileListing .fileListRow.selected {
    background-color: var(--sp-accent-primary);
    color: #fff;
}

.sp-dashboard .fileManagerList .fileListing .fileListRow td {
    padding: 12px 10px;
    vertical-align: middle;
}

.sp-dashboard .fileManagerList .fileListing .fileListRow .filename {
    color: var(--sp-text-primary);
}

.sp-dashboard .fileManagerList .fileListing .fileListRow.selected .filename {
    color: #fff;
}

/* List/Grid view toggle icon size */
.sp-dashboard .sp-toolbar #viewTypeText i {
    font-size: 16px;
}

/* Storage bar visibility fix */
.sp-sidebar-storage {
    display: block;
}

.sp-storage-progress {
    display: block;
    height: 4px;
    background-color: var(--sp-border-color);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
    width: 100%;
    min-width: 40px;
}

.sp-storage-progress-bar {
    height: 100%;
    background-color: var(--sp-accent-primary);
    border-radius: 2px;
    transition: width 0.3s ease;
    min-width: 2px;
}

/* A spent full-speed allowance.

   Only ever set on the transfer form of this bar, never on the storage form,
   because the two mean different things when they fill. Storage running out
   stops an upload. Full speed running out slows a download and stops nothing
   at all, so the bar goes quiet rather than turning to a warning colour: a red
   bar would say something had broken when the only thing that has happened is
   that the month's fast portion is spent. */
.sp-storage-progress-bar--spent {
    background-color: var(--sp-text-muted);
}

/* Table styling */
.sp-dashboard table {
    color: var(--sp-text-primary);
}

.sp-dashboard table th {
    color: var(--sp-text-secondary);
    background-color: var(--sp-bg-card);
}

.sp-dashboard table td {
    border-color: var(--sp-border-color);
}

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

/* Button in file view */
.sp-dashboard .btn-primary, .sp-dashboard .btn-success {
    background-color: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
    color: #fff;
}

.sp-dashboard .btn-primary:hover, .sp-dashboard .btn-success:hover {
    background-color: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
}

.sp-dashboard .btn-danger {
    background-color: var(--sp-accent-red);
    border-color: var(--sp-accent-red);
}

.sp-dashboard .btn-default {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

.sp-dashboard .btn-default:hover {
    background-color: var(--sp-bg-card-hover);
}

/* File action icons */
.sp-dashboard .file-action-btns .btn {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
    padding: 8px 12px;
    margin: 2px;
}

.sp-dashboard .file-action-btns .btn:hover {
    background-color: var(--sp-bg-card-hover);
}

.sp-dashboard .btn.btn-download, .sp-dashboard .download-btn {
    background-color: var(--sp-accent-primary);
    color: #fff;
    border: none;
}

/* Breadcrumb styling */
.sp-dashboard .breadcrumb {
    background-color: transparent;
    padding: 10px 0;
    margin: 0;
}

.sp-dashboard .breadcrumb > li {
    color: var(--sp-text-secondary);
}

.sp-dashboard .breadcrumb > li a {
    color: var(--sp-accent-primary);
}

.sp-dashboard .breadcrumb > .active {
    color: var(--sp-text-primary);
}

/* Well/Alert boxes */
.sp-dashboard .well {
    background-color: var(--sp-bg-card);
    border-color: var(--sp-border-color);
    color: var(--sp-text-primary);
}

/* Fix broken images */
.sp-dashboard img[src=""], .sp-dashboard img:not([src]) {
    visibility: hidden;
}

/* Loading states */
.sp-dashboard .loading, .sp-dashboard .spinner {
    color: var(--sp-text-muted);
}

/* ====================== */
/* PAGINATION STYLING     */
/* ====================== */
.sp-dashboard .pagination-container, .sp-dashboard .paginationRow {
    text-align: center;
    padding: 20px 0;
}

.sp-dashboard .pagination {
    display: inline-flex;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-dashboard .pagination li {
    display: inline-block;
}

.sp-dashboard .pagination li a, .sp-dashboard .pagination li span {
    display: inline-block;
    padding: 10px 16px;
    background-color: var(--sp-bg-card);
    color: var(--sp-text-primary);
    border: 1px solid var(--sp-border-color);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.sp-dashboard .pagination li a:hover {
    background-color: var(--sp-bg-card-hover);
}

.sp-dashboard .pagination li.active a, .sp-dashboard .pagination li.active span {
    background-color: var(--sp-accent-primary);
    border-color: var(--sp-accent-primary);
    color: #fff;
}

.sp-dashboard .pagination li.disabled a, .sp-dashboard .pagination li.disabled span {
    color: var(--sp-text-muted);
    cursor: not-allowed;
}

/* ====================== */
/* THEME DROPDOWN STYLING */
/* ====================== */