/*
 * 7L Storage Drive — WebClient Brand Skin
 * SFTPGo 2.7.5
 *
 * Intent:
 * - Keep SFTPGo's stock component/layout behavior.
 * - Use the real dark theme, not a painted-over light theme.
 * - Apply a restrained black / graphite / white 7th Lens visual system.
 * - Scope all changes to the public WebClient through Branding.ExtraCSS.
 */

:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    --7l-black: #050607;
    --7l-sidebar: #08090b;
    --7l-surface: #0e1013;
    --7l-surface-2: #13161a;
    --7l-surface-3: #191d22;
    --7l-border: rgba(255, 255, 255, 0.10);
    --7l-border-strong: rgba(255, 255, 255, 0.18);
    --7l-text: #f5f5f5;
    --7l-muted: #9da3ad;
    --7l-white: #ffffff;

    /* Keen / Bootstrap theme variables used throughout SFTPGo */
    --bs-body-bg: var(--7l-black);
    --bs-body-color: var(--7l-text);
    --bs-primary: #f5f5f5;
    --bs-primary-rgb: 245, 245, 245;
    --bs-primary-active: #d9d9d9;
    --bs-primary-light: #1d2025;
    --bs-primary-inverse: #070809;
    --bs-text-primary: #f5f5f5;
    --bs-link-color: #f5f5f5;
    --bs-link-hover-color: #ffffff;
    --bs-border-color: var(--7l-border);
}

/* ---------- Global canvas ---------- */

html,
body {
    background: var(--7l-black) !important;
}

body {
    letter-spacing: -0.01em;
}

#kt_app_page,
#kt_app_wrapper,
#kt_app_main,
#kt_app_content {
    background: var(--7l-black) !important;
}

#kt_app_content_container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ---------- Header / sidebar ---------- */

#kt_app_header {
    background: rgba(5, 6, 7, 0.94) !important;
    border-bottom: 1px solid var(--7l-border) !important;
    backdrop-filter: blur(16px);
}

#kt_app_sidebar {
    background: var(--7l-sidebar) !important;
    border-right: 1px solid var(--7l-border) !important;
}

.app-sidebar-logo {
    display: flex;
    align-items: center;
}

.app-sidebar-logo-default {
    object-fit: contain;
}

.text-sidebar {
    color: var(--7l-white) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

#kt_app_sidebar .menu-link {
    min-height: 44px;
    border-radius: 8px !important;
    color: #b5bac2 !important;
    transition: background-color .16s ease, color .16s ease;
}

#kt_app_sidebar .menu-link .menu-title,
#kt_app_sidebar .menu-link .menu-icon i {
    color: inherit !important;
}

#kt_app_sidebar .menu-link:hover {
    background: rgba(255, 255, 255, 0.055) !important;
    color: #ffffff !important;
}

#kt_app_sidebar .menu-link.active {
    background: #ffffff !important;
    color: #090a0c !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- Cards / panels ---------- */

.card,
.modal-content,
.menu-sub,
.dropdown-menu,
.toast {
    background: var(--7l-surface) !important;
    border: 1px solid var(--7l-border) !important;
}

.card {
    border-radius: 12px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.025),
        0 18px 50px rgba(0,0,0,.20) !important;
}

.card-header {
    border-bottom-color: var(--7l-border) !important;
}

.modal-content {
    border-radius: 12px !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.58) !important;
}

/* ---------- Typography ---------- */

.text-gray-900 { color: #f5f5f5 !important; }
.text-gray-800 { color: #e3e5e8 !important; }
.text-gray-700 { color: #c1c5cb !important; }
.text-gray-600 { color: #aab0b8 !important; }
.text-gray-500,
.text-muted { color: var(--7l-muted) !important; }

a:not(.btn):not(.menu-link) {
    color: #e9eaec;
}

a:not(.btn):not(.menu-link):hover {
    color: #ffffff;
}

/* ---------- Forms ---------- */

.form-control,
.form-select,
.select2-container--bootstrap5 .select2-selection {
    background-color: #0a0c0f !important;
    border: 1px solid var(--7l-border) !important;
    color: var(--7l-text) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--bootstrap5.select2-container--focus .select2-selection {
    background-color: #0b0d10 !important;
    border-color: rgba(255,255,255,.30) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.055) !important;
}

.form-control::placeholder {
    color: #777e88 !important;
}

/* ---------- Buttons ---------- */

.btn-primary {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #070809 !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: #e8e8e8 !important;
    border-color: #e8e8e8 !important;
    color: #070809 !important;
}

.btn-light,
.btn-light-primary,
.btn-secondary {
    background: var(--7l-surface-3) !important;
    border: 1px solid var(--7l-border) !important;
    color: #eceef1 !important;
}

.btn-light:hover,
.btn-light-primary:hover,
.btn-secondary:hover,
.btn-active-light-primary:hover {
    background: #23272d !important;
    border-color: var(--7l-border-strong) !important;
    color: #ffffff !important;
}

.btn-icon {
    border-radius: 7px !important;
}

/* ---------- File browser ---------- */

#file_manager_list {
    --bs-table-bg: transparent;
    --bs-table-color: #dfe2e6;
}

#file_manager_list thead th {
    color: #8f969f !important;
    font-size: .79rem !important;
    letter-spacing: .025em;
    text-transform: uppercase;
    border-bottom-color: var(--7l-border) !important;
}

#file_manager_list tbody tr {
    transition: background-color .14s ease;
}

#file_manager_list tbody tr:hover {
    background: rgba(255,255,255,.025) !important;
}

#file_manager_list td {
    border-bottom-color: rgba(255,255,255,.055) !important;
}

#file_manager_list .text-primary,
#file_manager_list .text-hover-primary:hover,
.badge-light-primary,
.badge-light-primary a,
.badge-light-primary i {
    color: #f5f5f5 !important;
}

.badge-light-primary {
    background: #181b20 !important;
    border: 1px solid var(--7l-border);
}

/* Keep folder/file icons understated instead of bright blue. */
#file_manager_list .ki-folder,
#file_manager_list .ki-file,
#file_manager_list .ki-file-right {
    color: #d7dbe0 !important;
}

/* ---------- Menus ---------- */

.menu-sub {
    box-shadow: 0 20px 55px rgba(0,0,0,.45) !important;
}

.menu-link {
    border-radius: 7px !important;
}

.menu-sub .menu-link:hover,
.menu-sub .menu-link.active {
    background: rgba(255,255,255,.065) !important;
    color: #ffffff !important;
}

/* ---------- Pagination / data table controls ---------- */

.page-item.active .page-link,
.pagination .active > .page-link {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #08090a !important;
}

.page-link {
    color: #c8ccd2 !important;
}

/* ---------- Alerts / loading ---------- */

.bg-light-primary {
    background-color: #181b20 !important;
}

.border-primary {
    border-color: rgba(255,255,255,.22) !important;
}

.text-primary {
    color: #f5f5f5 !important;
}

.spinner-border.text-primary,
.text-primary.spinner-border {
    color: #ffffff !important;
}

/* ---------- Login ---------- */

.sevenl-login-page,
.sevenl-login-shell {
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,.045), transparent 33%),
        #050607 !important;
}

.sevenl-login-card {
    background: rgba(14, 16, 19, 0.96) !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.03),
        0 32px 90px rgba(0,0,0,.48) !important;
    backdrop-filter: blur(18px);
}

.sevenl-login-brand {
    padding-top: .35rem;
}

.sevenl-login-logo {
    display: block;
    width: 106px;
    height: 106px;
    object-fit: contain;
    margin: 0 auto 1.4rem auto;
}

.sevenl-login-title {
    color: #ffffff !important;
    font-size: 1.65rem !important;
    line-height: 1.2;
    font-weight: 600 !important;
    letter-spacing: -0.035em;
}

.sevenl-login-rule {
    width: 34px;
    height: 1px;
    background: rgba(255,255,255,.26);
}

.sevenl-login-input {
    min-height: 54px;
    border-radius: 8px !important;
    background: #090b0e !important;
    border-color: rgba(255,255,255,.105) !important;
    font-size: .98rem !important;
}

.sevenl-login-input:focus {
    border-color: rgba(255,255,255,.32) !important;
}

.sevenl-login-submit {
    min-height: 52px;
    border-radius: 8px !important;
    letter-spacing: .005em;
}

.sevenl-login-card hr {
    border-color: var(--7l-border) !important;
}

/* ---------- Responsive polish ---------- */

@media (max-width: 991.98px) {
    #kt_app_content_container {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .sevenl-login-card {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
        padding: 2rem !important;
    }
}


/* ---------- Button hover contrast fix ---------- */
/*
 * KeenThemes has several higher-specificity hover rules that can turn
 * dark/light-secondary controls white. Keep dark controls dark on hover
 * and force their label/icon colors to remain readable.
 */
.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus,
.btn.btn-light-primary:active,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-active-light-primary:hover,
.btn.btn-active-light-primary:focus,
.btn.btn-active-light-primary:active,
.btn.show.btn-light,
.btn.show.btn-light-primary,
.btn.show.btn-secondary,
.show > .btn.btn-light,
.show > .btn.btn-light-primary,
.show > .btn.btn-secondary {
    background-color: #23272d !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

.btn.btn-light:hover *,
.btn.btn-light:focus *,
.btn.btn-light-primary:hover *,
.btn.btn-light-primary:focus *,
.btn.btn-secondary:hover *,
.btn.btn-secondary:focus *,
.btn.btn-active-light-primary:hover *,
.btn.btn-active-light-primary:focus *,
.btn.show.btn-light *,
.btn.show.btn-light-primary *,
.btn.show.btn-secondary *,
.show > .btn.btn-light *,
.show > .btn.btn-light-primary *,
.show > .btn.btn-secondary * {
    color: #ffffff !important;
}

/* Selected-files Actions button specifically */
[data-kt-filemanager-table-toolbar="selected"] .btn.btn-light-primary:hover,
[data-kt-filemanager-table-toolbar="selected"] .btn.btn-light-primary:focus,
[data-kt-filemanager-table-toolbar="selected"] .btn.btn-light-primary.show {
    background-color: #23272d !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

/* Preview download control */
#modal_video_player #video_download_button {
    min-width: 118px;
    background: #171a1f !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    color: #f2f3f5 !important;
}
#modal_video_player #video_download_button:hover,
#modal_video_player #video_download_button:focus {
    background: #24282e !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
}


/* ---------- Preview Download button hover fix ---------- */
#modal_video_player #video_download_button,
#modal_video_player #video_download_button:visited {
    background: #171a1f !important;
    border-color: rgba(255,255,255,.11) !important;
    color: #f2f3f5 !important;
}

#modal_video_player #video_download_button i,
#modal_video_player #video_download_button span {
    color: inherit !important;
}

#modal_video_player #video_download_button:hover,
#modal_video_player #video_download_button:focus,
#modal_video_player #video_download_button:active {
    background: #24282e !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#modal_video_player #video_download_button:hover *,
#modal_video_player #video_download_button:focus *,
#modal_video_player #video_download_button:active * {
    color: #ffffff !important;
}