/* ============================================================
   SaltyClips Theme
   Option 1 - Clean & Modern
   ============================================================ */

:root {
    --salty-bg: #07111b;
    --salty-surface: #0b1723;
    --salty-surface-2: #101e2c;
    --salty-surface-hover: #142638;
    --salty-border: rgba(150, 190, 220, 0.12);

    --salty-text: #edf6ff;
    --salty-text-secondary: #9eb0c1;

    --salty-blue: #159cff;
    --salty-blue-light: #39b4ff;
    --salty-blue-dark: #0879d8;

    --salty-radius: 10px;
}


/* ============================================================
   MediaCMS variables
   ============================================================ */

body {
    --sidebar-width: 14rem;
    --default-theme-color: #159cff;
    --default-brand-color: #159cff;
    --default-logo-height: 2rem;

    background: var(--salty-bg) !important;
    color: var(--salty-text) !important;
}


/* ============================================================
   Application background
   ============================================================ */

html,
body,
.page-wrapper,
.page-main,
.page-main-inner,
.page-content {
    background-color: var(--salty-bg) !important;
    color: var(--salty-text) !important;
}


/* ============================================================
   Header
   ============================================================ */

.page-header {
    background: rgba(7, 17, 27, 0.97) !important;
    border-bottom: 1px solid var(--salty-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.24) !important;
}

.page-header img {
    max-height: 38px !important;
}


/* ============================================================
   Sidebar
   ============================================================ */

.page-sidebar {
    background: #08131e !important;
    border-right: 1px solid var(--salty-border) !important;
}

.page-sidebar a {
    color: var(--salty-text-secondary) !important;
    border-radius: 8px !important;
    transition:
        background-color 0.15s ease,
        color 0.15s ease !important;
}

.page-sidebar a:hover {
    color: var(--salty-text) !important;
    background: rgba(21, 156, 255, 0.10) !important;
}

.page-sidebar li.active > a,
.page-sidebar a.active {
    color: #ffffff !important;
    background: rgba(21, 156, 255, 0.16) !important;
}

.page-sidebar .material-icons {
    color: #8299ad !important;
}

.page-sidebar li.active .material-icons,
.page-sidebar a:hover .material-icons {
    color: var(--salty-blue-light) !important;
}


/* Remove stock MediaCMS footer branding */

.page-sidebar .page-sidebar-bottom {
    display: none !important;
}


/* ============================================================
   Typography
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--salty-text) !important;
}

p {
    color: var(--salty-text-secondary);
}


/* ============================================================
   Links
   ============================================================ */

a {
    transition:
        color 0.15s ease,
        background-color 0.15s ease !important;
}

.page-main a {
    color: var(--salty-blue-light);
}

.page-main a:hover {
    color: #72caff;
}


/* ============================================================
   Search and form fields
   ============================================================ */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: #0c1926 !important;
    color: var(--salty-text) !important;
    border: 1px solid var(--salty-border) !important;
    border-radius: 9px !important;
}

input::placeholder,
textarea::placeholder {
    color: #6f8497 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(21, 156, 255, 0.65) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(21, 156, 255, 0.10) !important;
}


/* ============================================================
   Buttons
   ============================================================ */

button,
.button,
.btn,
input[type="submit"] {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition:
        transform 0.12s ease,
        filter 0.12s ease,
        background-color 0.12s ease !important;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover {
    filter: brightness(1.08);
}

button:active,
.button:active,
.btn:active {
    transform: translateY(1px);
}

.btn-primary,
.button-primary,
input[type="submit"] {
    background: linear-gradient(
        135deg,
        var(--salty-blue),
        var(--salty-blue-dark)
    ) !important;

    border-color: var(--salty-blue) !important;
    color: #ffffff !important;
}


/* ============================================================
   Clip / media cards
   ============================================================ */

.items-list-wrap li,
.media-item,
.media-list-item,
.card {
    border-radius: var(--salty-radius) !important;
    transition:
        transform 0.16s ease,
        background-color 0.16s ease,
        box-shadow 0.16s ease !important;
}

.items-list-wrap li:hover,
.media-item:hover,
.media-list-item:hover,
.card:hover {
    transform: translateY(-2px);
}

.items-list-wrap img,
.media-item img,
.media-list-item img,
.card img {
    border-radius: 9px !important;
}


/* ============================================================
   Panels / menus / dropdowns
   ============================================================ */

.dropdown-menu,
.modal-content,
.menu {
    background: var(--salty-surface-2) !important;
    color: var(--salty-text) !important;
    border: 1px solid var(--salty-border) !important;
    border-radius: var(--salty-radius) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40) !important;
}


/* ============================================================
   Tables
   ============================================================ */

table {
    color: var(--salty-text) !important;
}

tr,
td,
th {
    border-color: var(--salty-border) !important;
}


/* ============================================================
   Scrollbar
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--salty-bg);
}

::-webkit-scrollbar-thumb {
    background: #263b4e;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #365269;
}


/* ============================================================
   Large screen MediaCMS sizing
   Preserve upstream customization
   ============================================================ */

@media screen and (min-width: 2200px) {
    body {
        --default-item-width: 342px !important;
        --default-max-item-width: 342px !important;
        --default-item-margin-right-width: 17px !important;
        --default-item-margin-bottom-width: 27px !important;
    }
}


/* ============================================================
   SaltyClips - MediaCMS native theme overrides
   ============================================================ */

body.dark_theme {
    --default-theme-color: #159cff !important;
    --default-brand-color: #159cff !important;
    --links-color: #39b4ff !important;

    --body-bg-color: #07111b !important;
    --body-text-color: #edf6ff !important;
    --hr-color: rgba(150, 190, 220, 0.12) !important;

    --header-bg-color: #08131e !important;
    --header-circle-button-color: #edf6ff !important;

    --sidebar-bg-color: #08131e !important;
    --sidebar-nav-border-color: rgba(150, 190, 220, 0.10) !important;
    --sidebar-nav-item-text-color: #c7d6e4 !important;
    --sidebar-nav-item-icon-color: #8299ad !important;

    --nav-menu-active-item-bg-color: rgba(21, 156, 255, 0.16) !important;
    --nav-menu-item-hover-bg-color: rgba(21, 156, 255, 0.09) !important;
    --in-popup-nav-menu-item-hover-bg-color: rgba(21, 156, 255, 0.09) !important;

    --search-field-input-text-color: #edf6ff !important;
    --search-field-input-bg-color: #0c1926 !important;
    --search-field-input-border-color: #1d3347 !important;

    --search-field-submit-text-color: #9eb0c1 !important;
    --search-field-submit-bg-color: #102132 !important;
    --search-field-submit-border-color: #1d3347 !important;
    --search-field-submit-hover-bg-color: #173049 !important;

    --item-bg-color: #07111b !important;
    --item-title-text-color: #edf6ff !important;
    --item-thumb-bg-color: #0d1a27 !important;
    --item-meta-text-color: #8299ad !important;
    --item-meta-link-hover-text-color: #c9d9e7 !important;

    --media-list-row-border-color: rgba(150, 190, 220, 0.10) !important;

    --popup-bg-color: #101e2c !important;
    --popup-hr-bg-color: rgba(150, 190, 220, 0.10) !important;
    --popup-top-bg-color: #142638 !important;

    --profile-page-bg-color: #07111b !important;
    --profile-page-header-bg-color: #0b1723 !important;

    --input-bg-color: #0c1926 !important;
    --input-border-color: #1d3347 !important;
    --input-color: #edf6ff !important;
}


/* Header */

body.dark_theme .page-header {
    border-bottom: 1px solid rgba(150, 190, 220, 0.10) !important;
    box-shadow: 0 5px 24px rgba(0, 0, 0, 0.28) !important;
}


/* Sidebar */

body.dark_theme .page-sidebar {
    border-right: 1px solid rgba(150, 190, 220, 0.08) !important;
}

body.dark_theme .nav-menu li.link-item {
    margin: 2px 10px;
    border-radius: 8px;
    overflow: hidden;
}

body.dark_theme .nav-menu li.link-item.active {
    background: rgba(21, 156, 255, 0.16) !important;
}

body.dark_theme .nav-menu li.link-item.active .menu-item-icon {
    color: #39b4ff !important;
}


/* Media */

body.dark_theme .items-list-wrap .item {
    border-radius: 10px !important;
    transition: transform 0.15s ease, filter 0.15s ease;
}

body.dark_theme .items-list-wrap .item:hover {
    transform: translateY(-2px);
}

body.dark_theme .item-thumb {
    border-radius: 10px !important;
    overflow: hidden;
}


/* Section headings */

body.dark_theme .media-list-header {
    border-color: rgba(150, 190, 220, 0.10) !important;
}

body.dark_theme .media-list-header h2,
body.dark_theme .media-list-header h3 {
    color: #edf6ff !important;
    font-weight: 600 !important;
}


/* Content spacing */

@media screen and (min-width: 1008px) {
    body.dark_theme .page-main {
        padding-left: 28px;
        padding-right: 28px;
    }
}