/* ==========================================================================
   GamingDeluxe (V3) - 2026 refresh
   Palette matched to gamingdeluxe.co.uk (slate dark + blue/violet accent).
   This file loads last, so it controls the panel look.
   ========================================================================== */

:root {
    --gd-bg: #0f172a;            /* slate-900  - base background           */
    --gd-bg-2: #16213a;          /* between bg and surface                 */
    --gd-surface: #1e293b;       /* slate-800  - cards / panels            */
    --gd-elevated: #334155;      /* slate-700  - hover / elevated          */
    --gd-border: rgba(148, 163, 184, 0.15);
    --gd-border-strong: rgba(148, 163, 184, 0.28);
    --gd-primary: #3b82f6;       /* blue-500                               */
    --gd-primary-2: #8b5cf6;     /* violet-500                             */
    --gd-primary-hover: #2563eb; /* blue-600                               */
    --gd-link: #93c5fd;          /* blue-300                               */
    --gd-text: #f8fafc;          /* slate-50                               */
    --gd-text-soft: #e2e8f0;     /* slate-200                              */
    --gd-muted: #94a3b8;         /* slate-400                              */
    --gd-success: #22c55e;
    --gd-warning: #f99c00;
    --gd-danger: #ef4444;
    --gd-radius: 8px;
    --gd-radius-lg: 12px;
    --gd-grad: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    --gd-grad-hover: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gd-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --gd-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Base surfaces & typography
   -------------------------------------------------------------------------- */
body {
    background-color: var(--gd-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--gd-text-soft);
}

.nav-fostrap {
    background-color: var(--gd-bg);
}

.nav-fostrap li ul.dropdown {
    background-color: var(--gd-surface);
    border-color: var(--gd-border);
}

.nav-fostrap li ul.dropdown li:hover {
    background-color: rgba(59, 130, 246, 0.16);
    transition: 0.2s;
}

#header {
    background-color: var(--gd-bg);
    border-bottom: 1px solid var(--gd-border);
}

a:link, a:visited {
    color: var(--gd-link);
}

a:hover {
    color: #bfdbfe;
}

#sidebar fieldset:first-of-type legend {
    background-color: var(--gd-bg);
    color: var(--gd-text);
    border-color: var(--gd-primary);
}

#main .header-text {
    background-color: var(--gd-bg);
    color: var(--gd-text);
    border-color: var(--gd-border);
}

/* --------------------------------------------------------------------------
   Sidebar navigation - rounded blue tint instead of full red block
   -------------------------------------------------------------------------- */
#sidebar > .links a {
    border-radius: var(--gd-radius);
    border: 1px solid transparent;
    transition: 0.2s;
}

#sidebar > .links a:hover {
    background-color: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--gd-text);
    transition: 0.2s;
}

/* --------------------------------------------------------------------------
   Progress / metric bars - rounded with gradient fill
   -------------------------------------------------------------------------- */
.k-progressbar-horizontal {
    width: 30em;
    height: 1.6rem;
    border-radius: 999px;
}

.k-progressbar {
    color: var(--gd-text-soft);
    background-color: rgba(148, 163, 184, 0.12) !important;
    border: 1px solid var(--gd-border);
    border-radius: 999px;
    overflow: hidden;
}

.k-progressbar .k-state-selected,
.k-progressbar .k-progress {
    background-image: var(--gd-grad) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

/* --------------------------------------------------------------------------
   Kendo switches
   -------------------------------------------------------------------------- */
.k-switch-off .k-switch-container {
    color: var(--gd-text-soft);
    background-color: var(--gd-elevated);
    border-color: var(--gd-elevated);
}

.k-switch-off .k-switch-container:hover {
    color: #fff;
    background-color: var(--gd-elevated);
    border-color: var(--gd-elevated);
}

.k-switch-off .k-switch-handle {
    background-color: var(--gd-muted);
    border-color: var(--gd-muted);
}

.k-switch-on .k-switch-container {
    background-color: rgba(59, 130, 246, 0.35);
    border-color: rgba(59, 130, 246, 0.35);
}

.k-switch-on .k-switch-handle {
    background-color: var(--gd-primary);
    border-color: var(--gd-primary);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.k-badge-info {
    border-color: var(--gd-primary);
    color: #fff;
    background-color: var(--gd-primary);
}

.k-badge-solid.k-badge-secondary {
    border-color: var(--gd-primary);
    color: #ffffff;
    background-color: var(--gd-primary);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.k-breadcrumb .k-breadcrumb-link {
    color: var(--gd-muted);
}

.k-breadcrumb .k-breadcrumb-link:hover,
.k-breadcrumb .k-breadcrumb-link.k-state-hover {
    color: #fff;
    background-color: rgba(59, 130, 246, 0.18);
    border-radius: var(--gd-radius);
}

.k-breadcrumb .k-breadcrumb-root-link:hover,
.k-breadcrumb .k-breadcrumb-root-link.k-state-hover {
    background-color: rgba(59, 130, 246, 0.18);
    border-radius: var(--gd-radius);
}

.k-breadcrumb-root-link:hover,
.k-breadcrumb-root-link.k-state-hover,
.k-breadcrumb-link:hover {
    color: #fff;
    text-decoration: none !important;
}

.k-breadcrumb, .k-filemanager {
    border-color: var(--gd-border);
}

/* --------------------------------------------------------------------------
   Buttons - gradient primary, semantic action colors
   -------------------------------------------------------------------------- */
.k-button {
    border: 1px solid transparent;
    color: #fff;
    background-image: var(--gd-grad);
    background-color: var(--gd-primary);
    border-radius: var(--gd-radius);
    box-shadow: var(--gd-shadow);
    transition: 0.2s;
}

.k-button:hover, .k-button.k-state-hover,
.k-button-secondary:hover, .k-button-secondary.k-state-hover {
    background-image: var(--gd-grad-hover);
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.k-button-primary, .k-button.k-primary {
    border-color: transparent;
    color: #fff;
    background-image: var(--gd-grad);
    background-color: var(--gd-primary);
}

.k-button:active, .k-button.k-state-active,
.k-button-secondary:active, .k-button-secondary.k-state-active {
    border-color: transparent;
    background-image: var(--gd-grad-hover);
}

/* Semantic service-control buttons */
.green-button, .orange-button, .red-button {
    color: #fff;
    background-image: unset;
    border-radius: var(--gd-radius);
    box-shadow: var(--gd-shadow);
    transition: 0.2s;
}

.green-button {
    background-color: var(--gd-success);
    border-color: var(--gd-success);
}

.green-button:hover {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #fff;
    background-image: unset;
}

.orange-button {
    background-color: var(--gd-warning);
    border-color: var(--gd-warning);
}

.orange-button:hover {
    background-color: #d97706;
    border-color: #d97706;
    color: #fff;
    background-image: unset;
}

.red-button {
    background-color: var(--gd-danger);
    border-color: var(--gd-danger);
}

.red-button:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #fff;
    background-image: unset;
}

/* --------------------------------------------------------------------------
   Cards / windows / panels - real surfaces with depth
   -------------------------------------------------------------------------- */
.k-card, .k-card-header {
    border-color: var(--gd-border);
    color: var(--gd-text-soft);
    background-color: var(--gd-surface);
    border-radius: var(--gd-radius);
}

.k-card {
    box-shadow: var(--gd-shadow);
}

.k-card-subtitle {
    color: var(--gd-muted);
}

.k-toolbar {
    border-color: var(--gd-border);
}

.k-flat {
    color: var(--gd-text-soft) !important;
}

.k-flat:hover {
    border-color: transparent !important;
    color: #fff !important;
    background-color: rgba(59, 130, 246, 0.18) !important;
    border-radius: var(--gd-radius);
    transition: 0.2s !important;
}

.k-window {
    border-color: var(--gd-border);
    color: var(--gd-text-soft);
    background-color: var(--gd-surface);
    border-radius: var(--gd-radius-lg);
    box-shadow: var(--gd-shadow-lg);
    overflow: hidden;
}

.k-window-titlebar {
    border-color: var(--gd-border);
    background-color: var(--gd-bg-2);
}

.k-window-titlebar .k-window-actions {
    padding-top: 13px;
}

.k-dialog {
    width: 35%;
}

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */
.k-tabstrip-items .k-item:hover, .k-tabstrip-items .k-item.k-state-hover {
    border-color: transparent;
    color: #fff;
    transition: 0.2s;
}

.k-tabstrip-items {
    border-color: var(--gd-border);
}

.k-tabstrip > .k-content {
    border: 1px solid var(--gd-border) !important;
    border-radius: 0 0 var(--gd-radius) var(--gd-radius);
}

.k-tabstrip-items .k-item.k-state-active, .k-tabstrip-items .k-item.k-state-selected {
    border-color: var(--gd-border);
    border-bottom-color: var(--gd-primary);
    color: var(--gd-primary);
}

/* --------------------------------------------------------------------------
   Inputs / textareas / dropdowns
   -------------------------------------------------------------------------- */
textarea, textarea:hover, textarea:focus {
    background-color: var(--gd-bg) !important;
    border: 1px solid var(--gd-border) !important;
    border-radius: var(--gd-radius);
    transition: 0.2s;
}

.k-textbox {
    border-color: var(--gd-border);
    color: var(--gd-text-soft);
    background-color: var(--gd-bg);
    border-radius: var(--gd-radius);
}

.k-textbox:focus, .k-textbox.k-state-focus, .k-textbox.k-state-focused,
.k-textarea:focus, .k-textarea.k-state-focus, .k-textarea.k-state-focused,
.k-numerictextbox:focus {
    border-color: var(--gd-primary);
    color: var(--gd-text);
    background-color: var(--gd-bg);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    transition: 0.2s;
}

.k-textbox:hover, .k-textbox.k-state-hover,
.k-textarea:hover, .k-textarea.k-state-hover {
    border-color: var(--gd-border-strong);
    color: var(--gd-text);
    background-color: var(--gd-bg);
    transition: 0.2s;
}

.k-dropdown .k-dropdown-wrap, .k-dropdowntree .k-dropdown-wrap,
.k-combobox .k-dropdown-wrap {
    border-color: var(--gd-border);
    color: var(--gd-text-soft);
    background-color: var(--gd-bg);
    border-radius: var(--gd-radius);
}

.k-dropdown .k-dropdown-wrap:hover, .k-dropdowntree .k-dropdown-wrap:hover,
.k-dropdown .k-dropdown-wrap.k-state-hover, .k-dropdowntree .k-dropdown-wrap.k-state-hover {
    border-color: var(--gd-border-strong);
    background-color: var(--gd-bg);
}

#curse_search::placeholder,
.k-input::placeholder {
    color: var(--gd-muted);
}

.k-list .k-item:hover, .k-list .k-item.k-state-hover,
.k-list-optionlabel:hover, .k-list-optionlabel.k-state-hover {
    color: #fff;
    background-color: rgba(59, 130, 246, 0.18);
}

.k-list-container .k-button:hover, .k-list-container .k-button.k-state-hover {
    color: white;
    background-image: var(--gd-grad-hover);
}

/* --------------------------------------------------------------------------
   Toolbar icons
   -------------------------------------------------------------------------- */
.k-i-save:before,
.k-i-cancel:before,
.k-i-upload:before,
.k-i-folder-add:before {
    color: var(--gd-text-soft) !important;
}

.k-upload .k-dropzone .k-upload-status,
.k-upload .k-dropzone .k-dropzone-hint,
.k-file-size {
    color: var(--gd-text-soft) !important;
}

.k-upload .k-file-progress .k-progress {
    background-image: var(--gd-grad);
}

#dbAllowinner, #dbLocationsinner, #dbConfig, #dbManage {
    color: var(--gd-text-soft) !important;
}

/* --------------------------------------------------------------------------
   Status pills (Running / Processing / Stopped)
   -------------------------------------------------------------------------- */
.green-label, .orange-label, .red-label {
    display: inline-block;
    padding: 0.18em 0.7em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85em;
    line-height: 1.4;
}

.green-label {
    color: #4ade80;
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.orange-label {
    color: #fbbf24;
    background-color: rgba(249, 156, 0, 0.15);
    border: 1px solid rgba(249, 156, 0, 0.35);
}

.red-label {
    color: #f87171;
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

/* leading status dot inside the status pill (themed _ServiceStatus.cshtml) */
.gd-pill-dot {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.5em;
    border-radius: 999px;
    background-color: currentColor;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Grid pager / treeview
   -------------------------------------------------------------------------- */
.k-grid-pager {
    border-color: var(--gd-border);
    color: var(--gd-text-soft);
    background-color: var(--gd-surface);
}

.k-pager-nav.k-link, .k-pager-refresh {
    border-color: var(--gd-border);
    color: var(--gd-text-soft);
    background-color: var(--gd-bg);
    border-radius: var(--gd-radius);
}

.k-pager-numbers .k-link, .k-link:hover, .k-pager-numbers, .k-link.k-state-hover {
    border-color: var(--gd-border);
    color: var(--gd-link) !important;
    background-color: transparent;
}

.k-pager-numbers .k-link.k-state-selected {
    border-color: var(--gd-primary);
    color: #fff;
    background-image: var(--gd-grad);
    border-radius: var(--gd-radius);
}

.k-treeview .k-in, .k-treeview .k-in.k-state {
    color: var(--gd-text-soft);
}

.k-treeview .k-in:hover, .k-treeview .k-in.k-state-hover {
    border-color: transparent;
    color: #fff;
    background-color: rgba(59, 130, 246, 0.18);
    border-radius: var(--gd-radius);
}

.k-listview {
    border-color: var(--gd-border);
}

.green-label.k-grid-label {
    color: var(--gd-success);
}

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */
body::-webkit-scrollbar,
.k-listview-content::-webkit-scrollbar,
.k-card-body::-webkit-scrollbar,
.k-list-scroller::-webkit-scrollbar,
.k-auto-scrollable::-webkit-scrollbar {
    width: 0.5em;
}

body::-webkit-scrollbar-track,
.k-listview-content::-webkit-scrollbar-track,
.k-card-body::-webkit-scrollbar-track,
.k-list-scroller::-webkit-scrollbar-track,
.k-auto-scrollable::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px var(--gd-surface);
    border-radius: 100px;
}

body::-webkit-scrollbar-thumb,
.k-listview-content::-webkit-scrollbar-thumb,
.k-card-body::-webkit-scrollbar-thumb,
.k-list-scroller::-webkit-scrollbar-thumb,
.k-auto-scrollable::-webkit-scrollbar-thumb {
    background-color: var(--gd-primary);
    border-radius: 100px;
}

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */
#reinstallButton {
    margin-bottom: 15px;
}

.green-label {
    /* keep readable when used inline outside pills as well */
}

.custommod-k-card {
    margin: 0.5em !important;
}

@media only screen and (min-width: 901px) {
    .primary-color-sidebar .nav-fostrap::before {
        margin-top: 86px;
        border-bottom: 1px solid var(--gd-border);
    }
}

/* fixes for the sub header */
.primary-color-sidebar #sidebar fieldset:first-of-type legend {
    border-left: 0;
    border-top: 0;
    margin: 0 auto;
}

@media only screen and (min-width: 901px) {
    #main .header-text {
        margin: 0 auto;
    }
}

/* footer */
#footer #info {
    text-align: center;
    vertical-align: middle;
    padding-top: 8px;
    margin: 0 0 0 0;
    border-top: 1px solid var(--gd-border);
    color: var(--gd-muted);
}

/* --------------------------------------------------------------------------
   Service home - card surfaces
   -------------------------------------------------------------------------- */
/* Equal, side-by-side cards that wrap to a stack on narrow screens.
   #main prefix is required to beat the default "#main .fieldset-form li"
   rule (inline-block + 50px margin + 0 padding). */

/* The default .fieldset-form is display:inline-block (shrink-to-fit), which
   collapses to ~heading width and forces the flex row to wrap. Make the
   service-home fieldset full width so two cards can sit in a row. */
#main .gd-service-home {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

#main .gd-service-home > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: stretch;
    justify-content: flex-start;
}

#main .gd-service-home > ul > li.gd-card {
    flex: 1 1 300px;
    max-width: 440px;
    min-width: 0;
    margin: 0;
    padding: 20px 24px;
    box-sizing: border-box;
    background-color: var(--gd-surface);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-radius-lg);
    box-shadow: var(--gd-shadow);
    list-style: none;
}

#main .gd-service-home > ul > li.gd-card > dl {
    margin: 0;
}

/* bars fill their card but can shrink and never overflow it */
#main .gd-service-home .k-progressbar,
#main .gd-service-home .k-progressbar-horizontal {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

.k-progressbar {
    background-color: rgba(148, 163, 184, 0.16) !important;
    min-height: 1.5rem;
}

/* --------------------------------------------------------------------------
   Service control buttons (Start / Stop / Restart / More)
   -------------------------------------------------------------------------- */
.main-button-group-left {
    margin-top: 16px;
}

.main-button-group-left .k-button-group {
    display: inline-flex;
    gap: 10px;
    box-shadow: none;
    background: transparent;
    border: 0;
}

.main-button-group-left .k-button-group .k-button {
    border-radius: var(--gd-radius) !important;
    border: 0;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.95em;
    letter-spacing: 0.2px;
    box-shadow: var(--gd-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.main-button-group-left .k-button-group .k-button .k-icon,
.main-button-group-left .k-button-group .k-button .k-button-icon {
    margin-right: 7px;
    font-size: 1.05em;
}

.main-button-group-left .k-button-group .k-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.main-button-group-left .k-button-group .k-button:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* the neutral "More" button gets the brand gradient, others keep semantic colors */
.main-button-group-left .k-button-group .k-button:not(.green-button):not(.red-button):not(.orange-button) {
    background-image: var(--gd-grad);
    background-color: var(--gd-primary);
    color: #fff;
}

.main-button-group-left .k-button-group .k-button:not(.green-button):not(.red-button):not(.orange-button):hover {
    background-image: var(--gd-grad-hover);
}

/* --------------------------------------------------------------------------
   Header / logo alignment - vertically centred, slightly tighter
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 901px) {
    #header .logo {
        top: 50%;
        transform: translateY(-50%);
        margin: 0 5px 0 16px;
        max-height: 46px;
    }
}