/*
 * NovaCore for TCAdmin 2 (MVC)
 * Upload in: Settings > Themes > Edit > Advanced > Custom MVC CSS
 * Designed for the stock Default MVC template and Kendo UI 2021 theme.
 */

:root {
    --nova-bg: #060d18;
    --nova-bg-elevated: #0a1424;
    --nova-panel: #0d192b;
    --nova-panel-2: #111f35;
    --nova-panel-hover: #162945;
    --nova-border: #20324d;
    --nova-border-strong: #2d4c76;
    --nova-text: #eaf2ff;
    --nova-text-soft: #b7c8e2;
    --nova-muted: #7f95b4;
    --nova-blue: #2f7cff;
    --nova-blue-bright: #55a6ff;
    --nova-violet: #7c4dff;
    --nova-cyan: #23c6ff;
    --nova-success: #34d399;
    --nova-warning: #fbbf24;
    --nova-danger: #fb7185;
    --nova-radius: 10px;
    --nova-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
    --nova-glow: 0 0 0 1px rgba(47, 124, 255, 0.12), 0 10px 30px rgba(7, 30, 67, 0.32);
}

html,
body,
body.dark-theme {
    background:
        radial-gradient(circle at 78% -10%, rgba(47, 124, 255, 0.13), transparent 32rem),
        radial-gradient(circle at 22% 105%, rgba(124, 77, 255, 0.08), transparent 28rem),
        var(--nova-bg) !important;
    color: var(--nova-text-soft) !important;
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    color-scheme: dark;
}

body::before {
    background-image: linear-gradient(rgba(255, 255, 255, 0.011) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.011) 1px, transparent 1px);
    background-size: 32px 32px;
    content: "";
    inset: 0;
    opacity: 0.45;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

#wrapper,
#content,
#main,
#footer,
#header,
.nav-fostrap,
.nav-bg-fostrap {
    position: relative;
}

#wrapper,
#content,
#main,
#footer {
    z-index: 1;
}

a:link,
a:visited {
    color: var(--nova-blue-bright) !important;
}

a:hover,
a:active {
    color: #92ccff !important;
    text-decoration: none !important;
}

/* Header and account navigation */
#header {
    background: rgba(8, 17, 30, 0.94) !important;
    border-bottom: 1px solid var(--nova-border) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
    min-height: 64px;
    overflow: visible !important;
    z-index: 20000 !important;
}

#header .logo-container {
    align-items: center;
    display: flex;
    min-height: 64px;
    padding-left: 18px;
}

#header .logo {
    filter: none !important;
    max-height: 46px;
    max-width: 230px;
    object-fit: contain;
}

#header .search-container input,
.nav-fostrap .search-container input {
    background: #0c1829 !important;
    border: 1px solid var(--nova-border) !important;
    border-radius: 8px !important;
    color: var(--nova-text) !important;
    min-height: 38px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* TCAdmin renders separate desktop and mobile search controls. */
.search-container {
    display: none !important;
}

#header > .search-container {
    display: block !important;
}

.nav-fostrap .search-container,
.nav-bg-fostrap .search-container,
.navbar-fostrap .search-container,
nav .search-container {
    display: none !important;
}

#header .search-container input:focus,
.nav-fostrap .search-container input:focus {
    border-color: var(--nova-blue) !important;
    box-shadow: 0 0 0 3px rgba(47, 124, 255, 0.16) !important;
}

.nav-fostrap,
.nav-bg-fostrap {
    background: #08111f !important;
    border-bottom: 1px solid var(--nova-border) !important;
    overflow: visible !important;
    z-index: 21000 !important;
}

.nav-fostrap li,
.nav-fostrap li:hover {
    border-color: transparent !important;
}

.nav-fostrap li > a {
    color: var(--nova-text-soft) !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.18s ease, color 0.18s ease;
}

.nav-fostrap li:hover > a {
    background: rgba(47, 124, 255, 0.11) !important;
    color: #ffffff !important;
}

.nav-fostrap li ul.dropdown {
    background: #0c1727 !important;
    border: 1px solid var(--nova-border) !important;
    border-radius: 8px;
    box-shadow: var(--nova-shadow) !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    overflow: hidden;
    top: 100% !important;
    z-index: 22000 !important;
}

.nav-fostrap li ul.dropdown li {
    background: #0c1727 !important;
    border: 0 !important;
}

.nav-fostrap li ul.dropdown li a {
    color: var(--nova-text-soft) !important;
}

.nav-fostrap li ul.dropdown li:hover,
.nav-fostrap li ul.dropdown li:hover a {
    background: var(--nova-panel-hover) !important;
    color: #ffffff !important;
}

/* Left navigation */
#sidebar {
    background: linear-gradient(180deg, #091525 0%, #07111e 100%) !important;
    border-right: 1px solid var(--nova-border);
    box-sizing: border-box;
    min-height: calc(100vh - 64px);
    padding: 12px 12px 56px !important;
    width: 265px !important;
}

#sidebar fieldset {
    margin-bottom: 8px;
}

#sidebar fieldset legend,
#sidebar fieldset:first-of-type legend {
    background: transparent !important;
    border: 0 !important;
    color: var(--nova-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em;
    padding: 13px 12px 7px !important;
    text-transform: uppercase;
}

#sidebar fieldset ul {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

#sidebar .links li {
    padding: 2px 0 !important;
}

#sidebar > .links a {
    border: 1px solid transparent !important;
    border-radius: 8px;
    color: var(--nova-text-soft) !important;
    min-height: 38px;
    padding: 5px 8px !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

#sidebar > .links a:hover,
#sidebar > .links a:focus {
    background: linear-gradient(90deg, rgba(47, 124, 255, 0.19), rgba(47, 124, 255, 0.07)) !important;
    border-color: rgba(85, 166, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

#sidebar > .links img {
    filter: saturate(0.85) brightness(1.25);
    height: 28px !important;
    margin-top: 2px;
    object-fit: contain;
    width: 28px;
}

#sidebar > .links div {
    margin-left: 30px !important;
    min-height: 32px !important;
}

#sidebar > .links span {
    color: inherit !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 32px !important;
    margin-left: 8px !important;
}

#sidebar input {
    background: #0b1728 !important;
    border: 1px solid var(--nova-border) !important;
    border-radius: 8px !important;
    color: var(--nova-text) !important;
    margin: 2px 0 8px !important;
    padding: 8px 10px !important;
    width: 100% !important;
}

/* Main content */
#main {
    background: transparent !important;
    min-height: calc(100vh - 99px);
    padding: 16px 18px 56px;
}

#main .header {
    margin: 0 0 12px !important;
}

#main .header-text {
    background: linear-gradient(105deg, rgba(20, 44, 80, 0.95), rgba(12, 27, 48, 0.95)) !important;
    border: 1px solid var(--nova-border-strong) !important;
    border-radius: var(--nova-radius) !important;
    box-shadow: var(--nova-glow);
    color: var(--nova-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    margin: 0 !important;
    padding: 13px 16px !important;
}

#main .detail {
    background: rgba(10, 20, 36, 0.78);
    border: 1px solid var(--nova-border);
    border-radius: var(--nova-radius);
    box-shadow: var(--nova-shadow);
    box-sizing: border-box;
    margin: 0 !important;
    min-height: 500px;
    padding: 16px;
}

#aspxcontent {
    background: var(--nova-bg-elevated) !important;
    border: 0 !important;
    color-scheme: dark;
}

fieldset legend,
.k-window-title,
.k-panelbar > .k-item > .k-link {
    color: var(--nova-text) !important;
    font-weight: 700;
}

label,
dt,
dd,
p,
li,
span {
    border-color: var(--nova-border);
}

/* Kendo panels, grids and tabs */
.k-widget,
.k-content,
.k-window,
.k-panelbar,
.k-tabstrip,
.k-tabstrip > .k-content,
.k-grid,
.k-list-container,
.k-popup,
.k-menu,
.k-tooltip,
.k-toolbar,
.k-pager-wrap {
    background-color: var(--nova-panel) !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text-soft) !important;
}

.k-window,
.k-list-container,
.k-popup,
.k-tooltip {
    border-radius: var(--nova-radius) !important;
    box-shadow: var(--nova-shadow) !important;
}

.k-window-titlebar,
.k-grid-header,
.k-grid-header-wrap,
.k-grouping-header,
.k-tabstrip-items,
.k-panelbar > .k-item > .k-link,
.k-toolbar,
.k-pager-wrap {
    background: var(--nova-panel-2) !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text) !important;
}

.k-grid table,
.k-grid tr,
.k-grid td,
.k-grid th,
.k-grid-content,
.k-grid-content-locked {
    background: transparent !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text-soft) !important;
}

.k-grid tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.018) !important;
}

.k-grid tbody tr:hover,
.k-list .k-item:hover,
.k-list .k-state-hover,
.k-list .k-selected,
.k-list .k-state-selected {
    background: var(--nova-panel-hover) !important;
    color: #ffffff !important;
}

.k-grid-header th,
.k-grid-header th a,
.k-grid-header .k-link {
    color: #d8e8ff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.k-tabstrip-items .k-item {
    background: transparent !important;
    border-color: transparent !important;
}

.k-tabstrip-items .k-item .k-link {
    color: var(--nova-muted) !important;
    font-weight: 700;
}

.k-tabstrip-items .k-active,
.k-tabstrip-items .k-state-active,
.k-tabstrip-items .k-selected {
    background: rgba(47, 124, 255, 0.12) !important;
    border-color: var(--nova-blue) !important;
}

.k-tabstrip-items .k-active .k-link,
.k-tabstrip-items .k-state-active .k-link,
.k-tabstrip-items .k-selected .k-link {
    color: #ffffff !important;
}

/* Forms */
input,
textarea,
select,
.k-input,
.k-textbox,
.k-dropdown,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-multiselect,
.k-combobox,
.k-autocomplete {
    background-color: #0a1627 !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text) !important;
}

input,
textarea,
select,
.k-textbox,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-multiselect,
.k-autocomplete {
    border-radius: 7px !important;
}

input::placeholder,
textarea::placeholder,
.k-input::placeholder {
    color: #7086a6 !important;
    opacity: 1;
}

select option,
select optgroup {
    background-color: #0a1627 !important;
    color: var(--nova-text) !important;
}

select option:checked,
select option:hover,
select option:focus {
    background: var(--nova-panel-hover) linear-gradient(0deg, var(--nova-panel-hover), var(--nova-panel-hover)) !important;
    color: #ffffff !important;
}

select option:disabled {
    background-color: #0a1424 !important;
    color: var(--nova-muted) !important;
}

input:focus,
textarea:focus,
select:focus,
.k-state-focused,
.k-focus {
    border-color: var(--nova-blue) !important;
    box-shadow: 0 0 0 3px rgba(47, 124, 255, 0.15) !important;
    outline: 0 !important;
}

/* Buttons */
button,
input[type="button"],
input[type="submit"],
.k-button,
.link-button,
.normal-icon-button {
    background: linear-gradient(135deg, var(--nova-blue), #2466da) !important;
    border: 1px solid #438eff !important;
    border-radius: 7px !important;
    box-shadow: 0 7px 18px rgba(47, 124, 255, 0.17) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.k-button:hover,
.link-button:hover,
.normal-icon-button:hover {
    box-shadow: 0 9px 24px rgba(47, 124, 255, 0.27) !important;
    filter: brightness(1.1);
    transform: translateY(-1px);
}

button:disabled,
input:disabled,
.k-button.k-disabled,
.k-state-disabled {
    filter: grayscale(0.5);
    opacity: 0.55 !important;
    transform: none !important;
}

.red-button,
.k-button.k-danger {
    background: linear-gradient(135deg, #e84a65, #be2947) !important;
    border-color: #fb7185 !important;
}

.orange-button {
    background: linear-gradient(135deg, #d99112, #b36d04) !important;
    border-color: var(--nova-warning) !important;
}

.green-button {
    background: linear-gradient(135deg, #1cae7f, #087a5d) !important;
    border-color: var(--nova-success) !important;
}

/* Status and feedback */
.info-button,
.info-label {
    color: var(--nova-blue-bright) !important;
}

.green-label,
.popup-script-loading-success {
    color: var(--nova-success) !important;
}

.orange-label {
    color: var(--nova-warning) !important;
}

.red-label,
.field-validation-error,
.validation-summary-errors,
.popup-script-loading-failure,
.k-i-cancel::before {
    color: var(--nova-danger) !important;
}

.k-notification,
.validation-summary-errors {
    background: #101d30 !important;
    border: 1px solid var(--nova-border-strong) !important;
    border-radius: 8px !important;
    color: var(--nova-text) !important;
}

/* Login */
body:has(#loginSection) {
    min-height: 100vh !important;
    overflow: auto !important;
}

body:has(#loginSection) #wrapper,
body:has(#loginSection) #content,
body:has(#loginSection) #main {
    background: transparent !important;
    min-height: 100vh !important;
}

body:has(#loginSection) #main {
    overflow: visible !important;
    padding: 0 !important;
}

body:has(#loginSection) #main .header,
body:has(#loginSection) #footer {
    display: none !important;
}

body:has(#loginSection) #main .detail {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 100vh !important;
    padding: 0 !important;
}

#loginSection {
    bottom: auto !important;
    box-sizing: border-box;
    height: max-content !important;
    left: 50% !important;
    margin: 0 !important;
    max-width: calc(100vw - 32px);
    position: fixed !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 420px !important;
    z-index: 10;
}

#loginSection .frame {
    backdrop-filter: blur(18px);
    background: linear-gradient(145deg, rgba(15, 29, 49, 0.96), rgba(7, 16, 29, 0.97)) !important;
    border: 1px solid var(--nova-border-strong) !important;
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46), 0 0 50px rgba(47, 124, 255, 0.07);
    padding: 30px 40px !important;
    width: 100% !important;
}

#loginSection .logo {
    display: block;
    filter: none !important;
    margin: 0 auto 22px !important;
    max-height: 72px;
    object-fit: contain;
    width: 260px !important;
}

#loginSection .k-dropdown,
#loginSection .k-textbox,
#loginSection input:not([type="checkbox"]) {
    box-sizing: border-box;
    min-height: 42px;
    width: 100% !important;
}

#loginSection button[type="submit"],
#loginSection input[type="submit"] {
    box-sizing: border-box;
    margin-top: 12px;
    min-height: 42px;
    width: 100% !important;
}

#loginSection form > div[style*="margin-left"] {
    margin-left: 0 !important;
    width: 100% !important;
}

#loginSection .recover {
    color: var(--nova-muted) !important;
    display: none !important;
}

/* Footer */
#footer {
    background: rgba(6, 13, 24, 0.94) !important;
    border-top: 1px solid var(--nova-border);
    color: var(--nova-muted) !important;
}

#footer #info {
    border: 0 !important;
    color: var(--nova-muted) !important;
    font-size: 12px;
}

/*
 * Legacy/WebForms bridge
 * TCAdmin loads parts of Home and some service screens in #aspxcontent.
 * Upload this same file to both Custom CSS and Custom MVC CSS so the styles
 * below are also injected inside that legacy document.
 */
form,
#form1,
#aspnetForm,
.page,
.page-content,
.content,
.content-wrapper,
.dashboard,
.dashboard-content,
.dashboard-container,
.widget-container,
.widget-column,
.column {
    background: transparent !important;
    color: var(--nova-text-soft) !important;
}

table,
tbody,
thead,
tfoot,
tr,
td,
th {
    border-color: var(--nova-border) !important;
    color: var(--nova-text-soft) !important;
}

table {
    background: var(--nova-panel) !important;
}

th,
.table-header,
.grid-header {
    background: var(--nova-panel-2) !important;
    color: var(--nova-text) !important;
    font-weight: 700;
}

td,
.table-cell,
.grid-cell {
    background: transparent !important;
}

tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.018) !important;
}

tr:hover td {
    background: var(--nova-panel-hover) !important;
}

.ui-widget,
.ui-widget-content,
.ui-dialog,
.ui-tabs,
.ui-tabs-panel,
.ui-menu,
.ui-autocomplete,
.ui-datepicker,
.portlet,
.widget,
.widget-content,
.module,
.module-content {
    background: var(--nova-panel) !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text-soft) !important;
}

.ui-widget-header,
.ui-dialog-titlebar,
.ui-tabs-nav,
.ui-accordion-header,
.portlet-header,
.widget-header,
.module-header {
    background: var(--nova-panel-2) !important;
    border-color: var(--nova-border) !important;
    color: var(--nova-text) !important;
}

.ui-state-default,
.ui-button,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #13243c !important;
    border-color: var(--nova-border-strong) !important;
    color: var(--nova-text-soft) !important;
}

.ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover {
    background: var(--nova-panel-hover) !important;
    border-color: var(--nova-blue) !important;
    color: #ffffff !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    background: rgba(47, 124, 255, 0.18) !important;
    border-color: var(--nova-blue) !important;
    color: #ffffff !important;
}

.ui-progressbar,
.progress,
.progress-bar-container {
    background: #091423 !important;
    border-color: var(--nova-border) !important;
}

.ui-progressbar-value,
.progress-bar,
.meter > span {
    background: linear-gradient(90deg, var(--nova-blue), var(--nova-violet)) !important;
}

/* Responsive behavior */
@media only screen and (max-width: 900px) {
    #header {
        min-height: 52px;
    }

    .nav-fostrap,
    .nav-bg-fostrap {
        background: #08111f !important;
    }

    #header .search-container {
        display: none !important;
    }

    #header > .search-container {
        display: none !important;
    }

    .nav-fostrap .search-container,
    .nav-bg-fostrap .search-container,
    nav .search-container {
        display: block !important;
    }

    .nav-bg-fostrap .title-mobile {
        color: var(--nova-text) !important;
        font-weight: 700;
    }

    #sidebar {
        background: #081321 !important;
        box-shadow: 14px 0 34px rgba(0, 0, 0, 0.42) !important;
        top: 52px !important;
    }

    #main {
        padding: 12px 10px 50px;
    }

    #main .detail {
        border-radius: 8px;
        margin: 0 !important;
        padding: 12px;
    }

    #main .header-text {
        font-size: 16px !important;
    }

    .k-grid {
        overflow-x: auto;
    }

    #loginSection {
        bottom: auto !important;
        left: 50% !important;
        margin: 0 !important;
        position: absolute !important;
        right: auto !important;
        top: 24px !important;
        transform: translateX(-50%);
        width: calc(100vw - 28px) !important;
    }

    #loginSection .frame {
        padding: 24px 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* Hide TCAdmin's broken Support / Open a New Ticket navigation. */
.nav-fostrap li:has(> a[id^="category_d8329404-0374-4438-a55a-8a8dc9033916_"]) {
    display: none !important;
}

/* Fallback for browsers without :has() support. */
.nav-fostrap a[id^="category_d8329404-0374-4438-a55a-8a8dc9033916_"],
.nav-fostrap a[id^="category_d8329404-0374-4438-a55a-8a8dc9033916_"] + ul.dropdown {
    display: none !important;
}

/* Keep the phone header in the viewport and let wide legacy pages scroll. */
@media only screen and (max-width: 900px) {
    html, body {
        max-width: 100%;
        overflow-x: clip;
    }

    #header {
        height: 0 !important;
        min-height: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #header .logo-container {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .nav-bg-fostrap {
        box-sizing: border-box;
        height: 56px !important;
        line-height: 56px !important;
        padding: 0 !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
    }

    .navbar-fostrap {
        box-sizing: border-box;
        height: 56px !important;
        padding: 6px !important;
        width: 56px !important;
    }

    .navbar-fostrap img {
        display: none !important;
    }

    .navbar-fostrap::before {
        content: "";
        display: block;
        width: 23px;
        height: 17px;
        margin: 12px 10px;
        border-top: 2px solid var(--nova-text);
        border-bottom: 2px solid var(--nova-text);
        background: linear-gradient(var(--nova-text), var(--nova-text)) center / 100% 2px no-repeat;
    }

    .nav-bg-fostrap .title-mobile {
        font-size: 16px !important;
        left: 64px !important;
        line-height: 56px !important;
        max-width: calc(100vw - 76px);
        overflow: hidden;
        position: absolute !important;
        right: 12px;
        text-overflow: ellipsis;
        top: 0;
        white-space: nowrap;
    }

    #content {
        padding-top: 56px !important;
    }

    #main {
        box-sizing: border-box;
        margin: 0 !important;
        min-height: 0 !important;
        padding: 12px !important;
        width: 100% !important;
    }

    #main .detail {
        min-height: 0 !important;
        overflow-x: auto !important;
    }

    #aspxcontent {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        width: 100% !important;
    }

    #footer {
        position: relative !important;
        height: auto !important;
        min-height: 35px;
    }

    #sidebar {
        bottom: 0 !important;
        height: calc(100dvh - 56px) !important;
        left: -300px !important;
        max-width: 85vw;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: fixed !important;
        top: 56px !important;
        width: 280px !important;
    }

    #sidebar.visible {
        left: 0 !important;
    }

    #sidebar fieldset div,
    #sidebar fieldset li {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}
