/* ============================================================
   EUGameHost TCAdmin Theme — Custom.css (MVC)
   Design language matched to eugamehost.com 2026:
     Canvas:        #070B12
     Panel:         #0B1220
     Card:          #101827
     Hover fill:    #132033
     Border:        #243247
     Text:          #FFFFFF
     Muted:         #A7B8CC
     Cyan accent:   #45C7FF  (interactive / links / focus)
     Lime CTA:      #B6FF2E  (primary buttons, dark text)
     Status scale:  #B6FF2E / #FFD45C / #FF5C5C (success = brand lime)
     Fonts:         Rajdhani (display) / Inter (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --eug-canvas: #070B12;
    --eug-panel: #0B1220;
    --eug-card: #101827;
    --eug-hover: #132033;
    --eug-border: #243247;
    --eug-border-soft: rgba(167, 184, 204, 0.16);
    --eug-border-blue: rgba(69, 199, 255, 0.42);
    --eug-text: #FFFFFF;
    --eug-muted: #A7B8CC;
    --eug-cyan: #45C7FF;
    --eug-cyan-deep: #147CFF;
    --eug-cyan-ice: #8DE4FF;
    --eug-cyan-dim: rgba(69, 199, 255, 0.08);
    --eug-cyan-ring: rgba(69, 199, 255, 0.16);
    --eug-lime: #B6FF2E;
    --eug-lime-hover: #CBFF5E;
    --eug-lime-text: #0d2400;
    --eug-ok: #B6FF2E;
    --eug-ok-text: #0d2400;
    --eug-warn: #FFD45C;
    --eug-warn-text: #2a1c00;
    --eug-bad: #FF5C5C;
    --eug-bad-text: #2a0505;
    --eug-radius-sm: 8px;
    --eug-radius: 10px;
    --eug-radius-lg: 14px;
    --eug-font-display: 'Rajdhani', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --eug-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --eug-shadow: 0 0 0 1px rgba(69, 199, 255, 0.14), 0 24px 80px rgba(0, 0, 0, 0.38);
    --eug-transition: 0.18s ease;
}

/* ══════════════════════════════════════════
   BASE
   Solid canvas color as a failsafe — the
   _Background cshtml layers the background
   image on top; if the image ever 404s the
   page still renders dark, not UA-white.
   (Login's Index.css loads after this and
   sets the same value.)
══════════════════════════════════════════ */

body {
    background-color: var(--eug-canvas);
    color: var(--eug-text) !important;
    font-family: var(--eug-font-body) !important;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

#main, #main > div, .primary-content {
    color: var(--eug-text) !important;
}

h1, h2, h3, h4, legend, .header-text, .k-window-title, .k-card-title {
    font-family: var(--eug-font-display) !important;
    letter-spacing: 0.01em;
}

::selection { background: rgba(69, 199, 255, 0.28); color: #fff; }

/* ══════════════════════════════════════════
   NAVIGATION / SIDEBAR
══════════════════════════════════════════ */

.nav-fostrap { background-color: var(--eug-panel) !important; }

.nav-fostrap li ul.dropdown {
    background-color: var(--eug-card) !important;
    border: 1px solid var(--eug-border) !important;
    border-radius: var(--eug-radius) !important;
    overflow: hidden;
}

.nav-fostrap li ul.dropdown li { transition: background var(--eug-transition); }

.nav-fostrap li ul.dropdown li:hover {
    background-color: var(--eug-hover) !important;
}

.nav-fostrap li ul.dropdown li:hover a { color: var(--eug-cyan) !important; }
.nav-fostrap li ul.dropdown li a { color: var(--eug-muted) !important; transition: color var(--eug-transition); }

.nav-fostrap li > a {
    color: rgba(167, 184, 204, 0.85) !important;
    font-weight: 500;
    transition: color var(--eug-transition), background var(--eug-transition);
}

.nav-fostrap li:hover > a { color: var(--eug-text) !important; }

#header { background-color: var(--eug-panel) !important; }

#sidebar fieldset:first-of-type legend {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

/* ── Logo fix ── */
#header .logo-container {
    display: flex;
    align-items: center;
}

#header .logo {
    max-height: 55px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Keep stock's 16px sizing — the strip has fixed margins and
   uppercase/tracking makes long titles clip */
#main .header-text {
    background-color: transparent !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

/* Section legends — uppercase micro-label, site signature
   (modest tracking so labels never clip the fixed sidebar) */
#sidebar fieldset legend {
    border-bottom: 1px solid var(--eug-border-soft) !important;
    color: var(--eug-muted) !important;
    font-family: var(--eug-font-body) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

#sidebar fieldset:first-of-type legend {
    font-family: var(--eug-font-display) !important;
    font-size: 1rem !important;
    letter-spacing: 0.04em;
}

/* Sidebar links as soft pills */
#sidebar > .links a,
#sidebar fieldset ul li a {
    border-radius: var(--eug-radius-sm);
    border: 1px solid transparent;
    transition: background var(--eug-transition), border-color var(--eug-transition);
}

#sidebar > .links a:hover,
#sidebar fieldset ul li a:hover {
    background-color: var(--eug-cyan-dim) !important;
    border: 1px solid var(--eug-border-blue) !important;
}

.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; }
    .primary-color-sidebar .nav-fostrap::before { margin-top: 86px; border-bottom: 1px solid var(--eug-border); }
}

@media only screen and (max-width: 900px) {
    #sidebar.visible, .nav-fostrap, .nav-bg-fostrap, #sidebar ul, #sidebar {
        background-color: var(--eug-panel) !important;
    }
}

/* ══════════════════════════════════════════
   LINKS
══════════════════════════════════════════ */

a:link, a:visited { color: var(--eug-cyan); text-decoration: none; }
a:active, a:hover { color: var(--eug-cyan-ice); }
.HyperLink, .HyperLinkCommand { color: var(--eug-text); }
.HyperLink:hover, .HyperLinkCommand:hover { color: var(--eug-cyan); }

/* ══════════════════════════════════════════
   PANELS & CARDS
══════════════════════════════════════════ */

.Panel { background-color: var(--eug-card) !important; }
.RadPageView { background-color: var(--eug-card) !important; }

.k-card, .k-card-header, .k-card-body, .k-card-footer {
    background-color: var(--eug-card) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

.k-card {
    border-radius: var(--eug-radius-lg) !important;
    transition: border-color var(--eug-transition), transform 0.2s ease, box-shadow 0.2s ease;
}

.k-card:hover {
    border-color: var(--eug-border-blue) !important;
}

.RadDock_TCAdmin fieldset .rdMiddle .rdCenter,
.RadDock_TCAdmin .rdBottom .rdCenter {
    background-color: var(--eug-card) !important;
    border: 1px solid var(--eug-border) !important;
}

.RadDock_TCAdmin .rdContent { color: var(--eug-text) !important; background-color: var(--eug-card) !important; }
.ToolBarPopupPanel { border: 1px solid var(--eug-border) !important; background-color: var(--eug-card) !important; border-radius: var(--eug-radius) !important; }

/* ══════════════════════════════════════════
   KENDO BASE
══════════════════════════════════════════ */

.k-widget, .k-input, .k-button, .k-grid, .k-window {
    font-family: var(--eug-font-body) !important;
}

.k-popup, .k-group, .k-reset {
    background-color: var(--eug-card) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

.k-popup { border-radius: var(--eug-radius) !important; box-shadow: var(--eug-shadow) !important; }

/* ══════════════════════════════════════════
   KENDO STATES
══════════════════════════════════════════ */

.k-state-default { background-color: var(--eug-hover) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-state-hover, .k-state-focused, .k-state-active { background-color: var(--eug-hover) !important; color: var(--eug-text) !important; border-color: var(--eug-border-blue) !important; }
.k-state-selected { background-color: var(--eug-cyan) !important; color: #06121D !important; border-color: var(--eug-cyan) !important; }
.k-state-disabled { opacity: 0.5; }

/* ══════════════════════════════════════════
   KENDO GRID
══════════════════════════════════════════ */

.k-grid { background-color: var(--eug-card) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; border-radius: var(--eug-radius) !important; overflow: hidden; }
.k-grid-content, .k-grid-content-locked { background-color: var(--eug-card) !important; }

.k-grid td, .k-grid tr,
.k-grid-content td, .k-grid-content tr {
    background-color: transparent !important;
    color: var(--eug-text) !important;
    border-color: rgba(36, 50, 71, 0.55) !important;
}

.k-grid tr:hover td, .k-grid tr.k-state-hover td { background-color: var(--eug-cyan-dim) !important; }
.k-grid tr.k-alt td { background-color: rgba(69, 199, 255, 0.03) !important; }

/* Selected rows: translucent cyan, keeps text readable
   (beats both the generic .k-state-selected solid fill and
   the .k-grid td text rule on specificity) */
.k-grid tr.k-state-selected,
.k-grid tr.k-state-selected td,
.k-grid td.k-state-selected {
    background-color: rgba(69, 199, 255, 0.16) !important;
    color: var(--eug-text) !important;
}

/* No uppercase/tracking here — Kendo column widths are fixed and
   wider text truncates header labels */
.k-grid-header, .k-grid-header-wrap, .k-grid-header th, .k-grid th {
    background-color: var(--eug-panel) !important;
    color: var(--eug-muted) !important;
    border-color: var(--eug-border) !important;
    font-weight: 600 !important;
}

.k-grid-footer, .k-grid-footer-wrap, .k-grid-footer td {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

.k-grid-pager, .k-pager-wrap {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

.k-pager-numbers .k-link { color: var(--eug-muted) !important; border-radius: 999px !important; }
.k-pager-numbers .k-link:hover { color: var(--eug-text) !important; background-color: var(--eug-hover) !important; }
.k-pager-numbers .k-state-selected { background-color: var(--eug-cyan) !important; color: #06121D !important; border-color: var(--eug-cyan) !important; border-radius: 999px !important; }
.k-grouping-header { background-color: var(--eug-panel) !important; color: var(--eug-muted) !important; border-color: var(--eug-border) !important; }
.k-grouping-row td, .k-group-footer td { background-color: var(--eug-panel) !important; color: var(--eug-muted) !important; }

/* ══════════════════════════════════════════
   KENDO WINDOW
══════════════════════════════════════════ */

.k-window {
    background-color: var(--eug-card) !important;
    border-color: var(--eug-border) !important;
    border-radius: var(--eug-radius-lg) !important;
    box-shadow: var(--eug-shadow) !important;
    overflow: hidden;
}
.k-window-titlebar {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}
.k-window-title { font-weight: 600 !important; }
.k-window-content { background-color: var(--eug-card) !important; color: var(--eug-text) !important; }

/* ══════════════════════════════════════════
   KENDO DROPDOWN / COMBOBOX
══════════════════════════════════════════ */

.k-dropdown, .k-combobox, .k-autocomplete, .k-multiselect, .k-dropdownlist {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
    border-radius: var(--eug-radius) !important;
}

.k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
    border-radius: var(--eug-radius) !important;
    transition: border-color var(--eug-transition), background var(--eug-transition);
}

.k-dropdown-wrap:hover, .k-picker-wrap:hover { background-color: var(--eug-hover) !important; border-color: var(--eug-border-blue) !important; }
.k-dropdown-wrap .k-input, .k-picker-wrap .k-input, .k-numeric-wrap .k-input { background-color: transparent !important; color: var(--eug-text) !important; }

.k-list-container { background-color: var(--eug-card) !important; border-color: var(--eug-border) !important; border-radius: var(--eug-radius) !important; box-shadow: var(--eug-shadow) !important; }
.k-list .k-item, .k-list li { color: var(--eug-text) !important; background-color: transparent !important; border-radius: var(--eug-radius-sm) !important; }
.k-list .k-item:hover, .k-list .k-state-hover { background-color: var(--eug-hover) !important; }
.k-list .k-state-selected { background-color: var(--eug-cyan) !important; color: #06121D !important; }

/* ══════════════════════════════════════════
   INPUTS & FORMS
══════════════════════════════════════════ */

.k-textbox, .k-textarea, .k-input {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
    border-radius: var(--eug-radius) !important;
}

.k-textbox:focus, .k-textbox.k-state-focus,
.k-textarea:focus, .k-textarea.k-state-focus,
.k-numerictextbox:focus {
    border-color: var(--eug-cyan) !important;
    background-color: var(--eug-panel) !important;
    box-shadow: 0 0 0 3px var(--eug-cyan-ring) !important;
    transition: var(--eug-transition);
}

.k-textbox:hover, .k-textarea:hover {
    border-color: var(--eug-border-blue) !important;
    background-color: var(--eug-hover) !important;
    transition: var(--eug-transition);
}

option, select, textarea,
input[type=password], input[type=text],
input[type=email], input[type=number], input[type=search] {
    background-color: var(--eug-panel) !important;
    border: solid 1px var(--eug-border) !important;
    border-radius: var(--eug-radius) !important;
    color: var(--eug-text) !important;
    font-family: var(--eug-font-body) !important;
}

option:focus, option:hover, select:focus, select:hover,
textarea:focus, textarea:hover,
input[type=password]:focus, input[type=text]:focus {
    background-color: var(--eug-hover) !important;
    border-color: var(--eug-cyan) !important;
}

.dropdown-wrapper select, .RadInput_Default input,
.textbox-wrapper textarea, .textbox-wrapper input {
    background-color: var(--eug-panel) !important;
    border: solid 1px var(--eug-border) !important;
}

.RadComboBox_TCAdmin input[type=text] { color: var(--eug-text) !important; }
input[type=checkbox] { accent-color: var(--eug-cyan) !important; }
.k-checkbox { border-color: var(--eug-border) !important; background-color: var(--eug-panel) !important; }
.k-checkbox:checked { background-color: var(--eug-cyan) !important; border-color: var(--eug-cyan) !important; }

/* ══════════════════════════════════════════
   BUTTONS
   Default buttons: ghost (dark fill, steel border)
   .k-primary + colored actions: solid & semantic
══════════════════════════════════════════ */

/* Colors/radius only — forcing padding/font-size breaks icon-only
   buttons and fixed-width toolbars (overlap/clipping) */
.k-button {
    background-color: var(--eug-hover) !important;
    color: var(--eug-text) !important;
    border: 1px solid var(--eug-border) !important;
    background-image: none !important;
    border-radius: var(--eug-radius-sm) !important;
    transition: background-color var(--eug-transition), border-color var(--eug-transition), box-shadow var(--eug-transition) !important;
    font-weight: 600 !important;
}

/* ── Button groups — fix pill shape and remove merged borders ── */
.k-button-group {
    gap: 6px !important;
    border-radius: var(--eug-radius-sm) !important;
    overflow: visible !important;
    box-shadow: none !important;
}

.k-button-group .k-button {
    border-radius: var(--eug-radius-sm) !important;
    margin: 0 !important;
}

.k-button-group .k-button:first-child,
.k-button-group .k-button:last-child,
.k-button-group .k-button:only-child {
    border-radius: var(--eug-radius-sm) !important;
}

.k-button-group .k-split-button-arrow,
.k-split-button .k-split-button-arrow {
    border-radius: var(--eug-radius-sm) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.k-button:hover, .k-button.k-state-hover {
    background-color: var(--eug-hover) !important;
    border-color: var(--eug-cyan) !important;
    box-shadow: 0 0 0 3px var(--eug-cyan-ring) !important;
}

/* Primary action — lime CTA, matches main site */
.k-button.k-primary {
    background-color: var(--eug-lime) !important;
    border-color: var(--eug-lime) !important;
    color: var(--eug-lime-text) !important;
    border-radius: var(--eug-radius-sm) !important;
    font-weight: 700 !important;
}
.k-button.k-primary:hover {
    background-color: var(--eug-lime-hover) !important;
    border-color: var(--eug-lime-hover) !important;
    color: var(--eug-lime-text) !important;
    box-shadow: 0 0 0 4px rgba(182, 255, 46, 0.16) !important;
}

.k-flat, .k-button.k-flat {
    background-color: transparent !important;
    color: var(--eug-text) !important;
    border-color: transparent !important;
    background-image: none !important;
    border-radius: var(--eug-radius-sm) !important;
}
.k-flat:hover, .k-button.k-flat:hover {
    background-color: var(--eug-hover) !important;
    color: var(--eug-cyan) !important;
    border-color: var(--eug-border-blue) !important;
    box-shadow: none !important;
}

/* Semantic action buttons — start / restart / stop / info */
.green-button {
    background-color: var(--eug-ok) !important;
    color: var(--eug-ok-text) !important;
    border-color: var(--eug-ok) !important;
    background-image: unset !important;
    border-radius: var(--eug-radius-sm) !important;
    font-weight: 700 !important;
}
.green-button:hover { background-color: #CBFF5E !important; border-color: #CBFF5E !important; color: var(--eug-ok-text) !important; box-shadow: 0 0 0 4px rgba(182, 255, 46, 0.16) !important; }

.orange-button {
    background-color: var(--eug-warn) !important;
    color: var(--eug-warn-text) !important;
    border-color: var(--eug-warn) !important;
    background-image: unset !important;
    border-radius: var(--eug-radius-sm) !important;
    font-weight: 700 !important;
}
.orange-button:hover { background-color: #ffdf82 !important; border-color: #ffdf82 !important; color: var(--eug-warn-text) !important; box-shadow: 0 0 0 4px rgba(255, 212, 92, 0.16) !important; }

.red-button {
    background-color: var(--eug-bad) !important;
    color: #fff !important;
    border-color: var(--eug-bad) !important;
    background-image: unset !important;
    border-radius: var(--eug-radius-sm) !important;
    font-weight: 700 !important;
}
.red-button:hover { background-color: #ff7d7d !important; border-color: #ff7d7d !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(255, 92, 92, 0.16) !important; }

.info-button {
    background-color: var(--eug-cyan) !important;
    color: #06121D !important;
    border-color: var(--eug-cyan) !important;
    background-image: unset !important;
    border-radius: var(--eug-radius-sm) !important;
    font-weight: 700 !important;
}
.info-button:hover { background-color: var(--eug-cyan-ice) !important; border-color: var(--eug-cyan-ice) !important; color: #06121D !important; box-shadow: 0 0 0 4px var(--eug-cyan-ring) !important; }

/* Session toolbar (top-right bell + avatar) — the stock JS gives
   these k-button/k-primary classes; keep them flat, never lime */
#session-toolbar .k-button,
#session-toolbar .k-button.k-primary,
#session-toolbar .k-split-button-arrow,
#toolbar-notifications,
#session-split_wrapper > a {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--eug-text) !important;
    box-shadow: none !important;
}

#session-toolbar .k-button:hover,
#session-toolbar .k-button.k-primary:hover {
    background-color: var(--eug-hover) !important;
    border-color: transparent !important;
    color: var(--eug-cyan) !important;
    box-shadow: none !important;
}

/* Bare buttons (window close X, titlebar actions) stay flat */
.k-button.k-bare,
.k-button.k-bare:hover,
.k-window-titlebar .k-window-actions .k-button {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--eug-text) !important;
    box-shadow: none !important;
}

/* Disabled buttons must not look clickable */
.k-button.k-state-disabled,
.k-button:disabled,
.k-state-disabled .k-button {
    opacity: 0.45 !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* ══════════════════════════════════════════
   TOOLBAR
══════════════════════════════════════════ */

.k-toolbar { background-color: var(--eug-panel) !important; border-color: var(--eug-border) !important; color: var(--eug-text) !important; border-radius: var(--eug-radius) !important; }

/* ══════════════════════════════════════════
   TABS
══════════════════════════════════════════ */

.k-tabstrip { background-color: transparent !important; }
.k-tabstrip-items { background-color: transparent !important; border-color: var(--eug-border) !important; }
.k-tabstrip-items .k-item {
    background-color: transparent !important;
    color: var(--eug-muted) !important;
    border-color: transparent !important;
    border-radius: var(--eug-radius-sm) var(--eug-radius-sm) 0 0 !important;
    transition: color var(--eug-transition), background var(--eug-transition);
}
.k-tabstrip-items .k-item:hover { color: var(--eug-text) !important; background-color: var(--eug-cyan-dim) !important; }
.k-tabstrip-items .k-item.k-state-active,
.k-tabstrip-items .k-item.k-state-selected {
    background-color: var(--eug-card) !important;
    color: var(--eug-cyan) !important;
    border-color: var(--eug-border-blue) !important;
    border-bottom-color: var(--eug-card) !important;
}
.k-tabstrip > .k-content, .k-tabstrip .k-tabstrip-content {
    background-color: var(--eug-card) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

.RadTabStripTop_TCAdmin .rtsSelected,
.RadTabStripTop_TCAdmin .rtsSelected:hover { color: var(--eug-cyan) !important; }
.RadTabStrip .rtsLevel1 .rtsTxt,
.RadTabStripVertical .rtsLevel1 .rtsTxt { color: var(--eug-text) !important; }

/* ══════════════════════════════════════════
   TREEVIEW
══════════════════════════════════════════ */

.k-treeview { background-color: transparent !important; color: var(--eug-text) !important; }
.k-treeview .k-item { border: none !important; color: var(--eug-text) !important; }
.k-treeview .k-in { color: var(--eug-text) !important; border: 1px solid transparent !important; background-color: transparent !important; border-radius: var(--eug-radius-sm) !important; }
.k-treeview .k-in:hover, .k-treeview .k-state-hover > .k-in, .k-treeview .k-in.k-state-hover { background-color: var(--eug-cyan-dim) !important; border-color: var(--eug-border-blue) !important; }
/* Kendo puts k-state-selected ON the .k-in span itself — cover both shapes */
.k-treeview .k-in.k-state-selected,
.k-treeview .k-in.k-state-selected:hover,
.k-treeview .k-state-selected > .k-in,
.k-treeview .k-state-selected > .k-in:hover { background-color: rgba(69, 199, 255, 0.18) !important; border-color: var(--eug-border-blue) !important; color: var(--eug-cyan) !important; }

/* ══════════════════════════════════════════
   SPLITTER
══════════════════════════════════════════ */

.k-splitter { background-color: var(--eug-canvas) !important; border-color: var(--eug-border) !important; }
.k-pane { background-color: var(--eug-card) !important; color: var(--eug-text) !important; }
.k-splitbar { background-color: var(--eug-panel) !important; border-color: var(--eug-border) !important; }
.k-splitbar:hover { background-color: var(--eug-cyan) !important; }
.k-splitbar-draggable-horizontal, .k-splitbar-draggable-vertical { background-color: var(--eug-panel) !important; }

/* ══════════════════════════════════════════
   MENU
══════════════════════════════════════════ */

.k-menu { background-color: var(--eug-panel) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-menu .k-item, .k-menu .k-link { color: var(--eug-text) !important; }
.k-menu .k-item:hover, .k-menu .k-state-hover { background-color: var(--eug-hover) !important; }
.k-menu-group, .k-menu .k-group { background-color: var(--eug-card) !important; border-color: var(--eug-border) !important; }

/* ══════════════════════════════════════════
   TOOLTIP
══════════════════════════════════════════ */

.k-tooltip {
    background-color: var(--eug-panel) !important;
    color: var(--eug-text) !important;
    border: 1px solid var(--eug-border) !important;
    border-radius: var(--eug-radius-sm) !important;
    box-shadow: var(--eug-shadow) !important;
}
.k-tooltip-callout { display: none !important; }

/* ══════════════════════════════════════════
   NOTIFICATIONS
══════════════════════════════════════════ */

.k-notification { background-color: var(--eug-panel) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; border-radius: var(--eug-radius) !important; }
.k-notification-info { background-color: var(--eug-cyan) !important; color: #06121D !important; }
.k-notification-success { background-color: var(--eug-ok) !important; color: var(--eug-ok-text) !important; }
.k-notification-warning { background-color: var(--eug-warn) !important; color: var(--eug-warn-text) !important; }
.k-notification-error { background-color: var(--eug-bad) !important; color: #ffffff !important; }

/* ══════════════════════════════════════════
   UPLOAD
══════════════════════════════════════════ */

.k-upload, .k-upload .k-dropzone { background-color: var(--eug-panel) !important; border-color: var(--eug-border) !important; color: var(--eug-text) !important; border-radius: var(--eug-radius) !important; }
.k-upload .k-dropzone:hover { background-color: var(--eug-hover) !important; border-color: var(--eug-cyan) !important; }
.k-upload .k-dropzone .k-upload-status, .k-upload .k-dropzone .k-dropzone-hint { color: var(--eug-text) !important; }
.k-file-size { color: var(--eug-muted) !important; }
.k-upload .k-file-progress .k-progress { background-color: var(--eug-cyan) !important; }
.k-upload-files, .k-file { background-color: var(--eug-card) !important; border-color: var(--eug-border) !important; color: var(--eug-text) !important; }

/* ══════════════════════════════════════════
   EDITOR
══════════════════════════════════════════ */

.k-editor { background-color: var(--eug-panel) !important; border-color: var(--eug-border) !important; color: var(--eug-text) !important; }
.k-editor-toolbar { background-color: var(--eug-panel) !important; border-color: var(--eug-border) !important; }

/* ══════════════════════════════════════════
   WEB CONSOLE / LOG VIEWER
══════════════════════════════════════════ */

.LogOutput, #logOutput, .log-output, .console-output,
.xterm, .xterm-screen, .xterm-viewport, .xterm-rows,
pre.log { background-color: var(--eug-canvas) !important; color: #D7E6F4 !important; }

/* CodeMirror (config file editor) — never paint its lines;
   let the editor's own theme control colors */
.CodeMirror pre { background-color: transparent !important; color: inherit !important; }

/* ══════════════════════════════════════════
   SCHEDULER
══════════════════════════════════════════ */

.k-scheduler { background-color: var(--eug-card) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-scheduler-header, .k-scheduler-header-wrap { background-color: var(--eug-panel) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-scheduler-table td, .k-scheduler-table th { border-color: rgba(36, 50, 71, 0.55) !important; color: var(--eug-text) !important; }
.k-today { background-color: var(--eug-cyan-dim) !important; }

/* ══════════════════════════════════════════
   CALENDAR
══════════════════════════════════════════ */

.k-calendar { background-color: var(--eug-card) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-calendar .k-header { background-color: var(--eug-panel) !important; color: var(--eug-text) !important; }
.k-calendar td { color: var(--eug-text) !important; }
.k-calendar td:hover { background-color: var(--eug-hover) !important; }
.k-calendar .k-state-selected { background-color: var(--eug-cyan) !important; color: #06121D !important; }
.k-calendar .k-state-selected .k-link { color: #06121D !important; }
.k-calendar .k-other-month { color: var(--eug-muted) !important; }

/* ══════════════════════════════════════════
   DATEPICKER / TIMEPICKER
══════════════════════════════════════════ */

.k-datepicker, .k-timepicker, .k-datetimepicker {
    background-color: var(--eug-panel) !important;
    border-color: var(--eug-border) !important;
    color: var(--eug-text) !important;
}

/* ══════════════════════════════════════════
   LISTVIEW / PANELBAR
══════════════════════════════════════════ */

.k-listview { background-color: var(--eug-card) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-panelbar { background-color: var(--eug-card) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-panelbar .k-item > .k-link { background-color: var(--eug-panel) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }
.k-panelbar .k-item > .k-link:hover { background-color: var(--eug-hover) !important; }
.k-panelbar .k-state-selected > .k-link { background-color: var(--eug-cyan) !important; color: #06121D !important; }
.k-panelbar .k-group { background-color: var(--eug-card) !important; }

/* ══════════════════════════════════════════
   PROGRESS BARS
══════════════════════════════════════════ */

.k-progressbar {
    background-color: var(--eug-panel) !important;
    background-image: none !important;
    border-color: var(--eug-border) !important;
    border-radius: 999px !important;
    overflow: hidden;
}

.k-progressbar .k-state-selected {
    background-color: var(--eug-cyan) !important;
    background-image: none !important;
    border-color: transparent !important;
}

.k-progressbar-horizontal .k-state-selected {
    height: 100% !important;
    min-width: 2px !important;
    display: block !important;
}

.k-progress-status-wrap { background-color: transparent !important; background-image: none !important; }
.k-progress-status { color: var(--eug-text) !important; text-shadow: 0 1px 2px rgba(7, 11, 18, 0.8); }

/* ══════════════════════════════════════════
   METER (legacy ASPX)
══════════════════════════════════════════ */

.Meter .Bar { background-color: var(--eug-cyan) !important; border-color: var(--eug-cyan) !important; }
.Meter { background: var(--eug-panel) !important; border-color: var(--eug-border) !important; }

/* ══════════════════════════════════════════
   SWITCH
══════════════════════════════════════════ */

.k-switch-off .k-switch-handle { background-color: var(--eug-muted) !important; border-color: var(--eug-muted) !important; }
.k-switch-off .k-switch-container { border-color: var(--eug-border) !important; background-color: var(--eug-panel) !important; }
.k-switch-on .k-switch-container { background-color: var(--eug-cyan) !important; border-color: var(--eug-cyan) !important; }
.k-switch-on .k-switch-handle { background-color: #ffffff !important; border-color: #ffffff !important; }

/* ══════════════════════════════════════════
   BADGE
══════════════════════════════════════════ */

.k-badge-info { border-color: var(--eug-cyan) !important; color: #06121D !important; background-color: var(--eug-cyan) !important; border-radius: 999px !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════
   BREADCRUMB
══════════════════════════════════════════ */

.k-breadcrumb { background-color: transparent !important; border-color: transparent !important; }
.k-breadcrumb .k-breadcrumb-link,
.k-breadcrumb .k-breadcrumb-root-link { color: var(--eug-muted) !important; border-radius: 999px !important; transition: color var(--eug-transition), background var(--eug-transition); }
.k-breadcrumb .k-breadcrumb-link:hover,
.k-breadcrumb .k-breadcrumb-root-link:hover { color: var(--eug-text) !important; background-color: var(--eug-hover) !important; text-decoration: none !important; }

/* ══════════════════════════════════════════
   RADGRID
══════════════════════════════════════════ */

.RadGrid_TCAdmin .rgFilterBox { color: var(--eug-text) !important; }
.RadGrid_TCAdmin .rgEditForm { border-bottom: 1px solid var(--eug-cyan) !important; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */

#footer #info {
    text-align: center;
    vertical-align: middle;
    padding-top: 8px;
    margin: 0;
    border-top: 1px solid var(--eug-border) !important;
    color: var(--eug-muted);
    background-color: var(--eug-canvas) !important;
}

/* ══════════════════════════════════════════
   ICONS
══════════════════════════════════════════ */

.IconTitleLine { background: none !important; border-bottom: 1px solid var(--eug-border) !important; }
.k-i-save:before, .k-i-cancel:before,
.k-i-upload:before, .k-i-folder-add:before,
.k-i-unlock:before, .k-i-lock:before { color: var(--eug-text) !important; }

/* ══════════════════════════════════════════
   LABELS
══════════════════════════════════════════ */

.LabelOn { color: var(--eug-ok) !important; }
.red-label { color: var(--eug-bad) !important; }
.green-label { color: var(--eug-ok) !important; }
.orange-label { color: var(--eug-warn) !important; }
.field-validation-error, .validation-summary-errors { color: var(--eug-bad) !important; }
.popup-script-loading-success { color: var(--eug-ok) !important; }
.popup-script-loading-failure { color: var(--eug-bad) !important; }

/* ══════════════════════════════════════════
   WORKSHOP
══════════════════════════════════════════ */

.WorkshopActionContainer div:first-child .NotInstalled,
.WorkshopActionContainer div:nth-child(2n) { background-color: var(--eug-hover) !important; border-radius: var(--eug-radius-sm); }
.WorkshopActionContainer div:first-child .NotInstalled:hover,
.WorkshopActionContainer div:nth-child(2n):hover { background-color: var(--eug-cyan) !important; color: #06121D !important; transition: var(--eug-transition); }
.WorkshopActionContainer div:first-child .Installed { background-color: var(--eug-hover) !important; color: var(--eug-text) !important; border-radius: var(--eug-radius-sm); }
.WorkshopActionContainer div:first-child .Installed:hover { background-color: var(--eug-cyan) !important; border-color: var(--eug-cyan) !important; color: #06121D !important; transition: var(--eug-transition); }

/* ══════════════════════════════════════════
   MISC
══════════════════════════════════════════ */

#reinstallButton { margin-bottom: 15px; }
#dbAllowinner, #dbLocationsinner, #dbConfig, #dbManage { color: var(--eug-text) !important; }
.k-window-titlebar .k-window-actions { padding-top: 13px; }

/* ══════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════ */

*::-webkit-scrollbar { width: 0.45em; height: 0.45em; }
*::-webkit-scrollbar-track { background-color: var(--eug-canvas); }
*::-webkit-scrollbar-thumb { background-color: rgba(69, 199, 255, 0.28); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(69, 199, 255, 0.45); }
*::-webkit-scrollbar-corner { background-color: var(--eug-canvas); }

/* ══════════════════════════════════════════
   FILE MANAGER
   Targets the Kendo Splitter-based file
   browser — left tree pane + right grid
══════════════════════════════════════════ */

/* Outer splitter container */
.k-filemanager,
.k-filemanager .k-splitter,
.k-filemanager .k-pane {
    background-color: var(--eug-card) !important;
    border-color: var(--eug-border) !important;
    color: var(--eug-text) !important;
}

/* Left tree sidebar pane */
.k-filemanager .k-filemanager-navigation,
.k-filemanager .k-filemanager-navigation .k-treeview,
.k-filemanager-navigation {
    background-color: var(--eug-card) !important;
    border-right: 1px solid var(--eug-border) !important;
    padding: 8px 4px !important;
}

/* Tree nodes */
.k-filemanager .k-treeview .k-in,
.k-filemanager-navigation .k-treeview .k-in {
    color: var(--eug-text) !important;
    border-radius: var(--eug-radius-sm) !important;
    padding: 4px 8px !important;
    transition: background var(--eug-transition), border-color var(--eug-transition);
}

.k-filemanager .k-treeview .k-in:hover,
.k-filemanager-navigation .k-treeview .k-in:hover {
    background-color: var(--eug-cyan-dim) !important;
    border-color: var(--eug-border-blue) !important;
    color: var(--eug-text) !important;
}

.k-filemanager .k-treeview .k-in.k-state-selected,
.k-filemanager-navigation .k-treeview .k-in.k-state-selected,
.k-filemanager .k-treeview .k-state-selected > .k-in,
.k-filemanager-navigation .k-treeview .k-state-selected > .k-in {
    background-color: rgba(69, 199, 255, 0.18) !important;
    border-color: var(--eug-border-blue) !important;
    color: var(--eug-cyan) !important;
}

/* Expand/collapse arrow */
.k-filemanager .k-treeview .k-icon,
.k-filemanager-navigation .k-treeview .k-icon {
    color: var(--eug-muted) !important;
}

/* Folder icons — override default orange */
.k-filemanager .k-treeview .k-i-folder,
.k-filemanager .k-treeview .k-i-folder-open,
.k-filemanager-navigation .k-i-folder,
.k-filemanager-navigation .k-i-folder-open,
.k-filemanager .k-file-preview .k-i-folder,
.k-filemanager .k-file-preview .k-i-folder-open {
    color: var(--eug-cyan) !important;
}

/* File icons */
.k-filemanager .k-i-file,
.k-filemanager .k-i-file-txt,
.k-filemanager .k-i-file-config,
.k-filemanager .k-i-file-js,
.k-filemanager .k-i-file-json,
.k-filemanager .k-i-file-css,
.k-filemanager .k-i-file-html {
    color: var(--eug-muted) !important;
}

/* Right content / grid pane */
.k-filemanager .k-filemanager-content,
.k-filemanager-content {
    background-color: var(--eug-card) !important;
}

/* Toolbar inside file manager */
.k-filemanager .k-toolbar,
.k-filemanager-toolbar {
    background-color: var(--eug-panel) !important;
    border-bottom: 1px solid var(--eug-border) !important;
    border-top: none !important;
}

/* Breadcrumb bar */
.k-filemanager .k-breadcrumb,
.k-filemanager-breadcrumb {
    background-color: var(--eug-panel) !important;
    border-bottom: 1px solid var(--eug-border-soft) !important;
    padding: 4px 12px !important;
}

/* List view items */
.k-filemanager .k-listview-item,
.k-filemanager .k-file-preview {
    background-color: transparent !important;
    color: var(--eug-text) !important;
    border-color: transparent !important;
    border-radius: var(--eug-radius) !important;
    transition: background var(--eug-transition);
}

.k-filemanager .k-listview-item:hover,
.k-filemanager .k-file-preview:hover {
    background-color: var(--eug-cyan-dim) !important;
    border-color: var(--eug-border-blue) !important;
}

.k-filemanager .k-listview-item.k-state-selected,
.k-filemanager .k-file-preview.k-state-selected {
    background-color: rgba(69, 199, 255, 0.18) !important;
    border-color: var(--eug-border-blue) !important;
}

/* File name text */
.k-filemanager .k-file-name {
    color: var(--eug-text) !important;
    font-size: 0.82rem !important;
}

/* File size / date text */
.k-filemanager .k-file-size,
.k-filemanager .k-file-time {
    color: var(--eug-muted) !important;
    font-size: 0.75rem !important;
}

/* Splitbar between tree and content */
.k-filemanager .k-splitbar {
    background-color: rgba(69, 199, 255, 0.08) !important;
    border-color: var(--eug-border) !important;
    width: 4px !important;
    transition: background var(--eug-transition);
}

.k-filemanager .k-splitbar:hover {
    background-color: rgba(69, 199, 255, 0.25) !important;
}

/* ══════════════════════════════════════════
   KENDO SAFETY NET
   Widgets used on profile / security /
   notifications / admin form pages
══════════════════════════════════════════ */

.k-chip, .k-chip-solid {
    background-color: var(--eug-hover) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
    border-radius: 999px !important;
}
.k-chip:hover { border-color: var(--eug-border-blue) !important; }

.k-multiselect .k-chip,
.k-multiselect .k-button {
    background-color: var(--eug-hover) !important;
    color: var(--eug-text) !important;
    border-color: var(--eug-border) !important;
}

.k-form, .k-form-inline { color: var(--eug-text) !important; }
.k-form-fieldset { border-color: var(--eug-border) !important; }
.k-form-legend { color: var(--eug-muted) !important; border-color: var(--eug-border-soft) !important; }
.k-form-hint { color: var(--eug-muted) !important; }
.k-label, .k-form label { color: var(--eug-text) !important; }

.k-radio { border-color: var(--eug-border) !important; background-color: var(--eug-panel) !important; }
.k-radio:checked { border-color: var(--eug-cyan) !important; background-color: var(--eug-cyan) !important; }

.k-slider .k-slider-track { background-color: var(--eug-panel) !important; }
.k-slider .k-slider-selection { background-color: var(--eug-cyan) !important; }
.k-slider .k-draghandle { background-color: var(--eug-cyan) !important; border-color: var(--eug-cyan) !important; }

.k-listbox { background-color: var(--eug-panel) !important; color: var(--eug-text) !important; border-color: var(--eug-border) !important; }

.k-overlay { background-color: rgba(7, 11, 18, 0.7) !important; }

.k-actions, .k-action-buttons, .k-edit-buttons {
    background-color: transparent !important;
    border-color: var(--eug-border) !important;
}

/* ══════════════════════════════════════════
   ICON GRID  (built by Template.js on the
   service home page — groups the service
   icons into labelled card tiles)
══════════════════════════════════════════ */

#eug-icon-grid {
    margin: 4px 2px 18px;
}

#eug-icon-grid .eug-grid-group { margin-bottom: 22px; }

#eug-icon-grid .eug-grid-title {
    font-family: var(--eug-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--eug-muted);
    margin: 0 0 10px 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--eug-border-soft);
}

#eug-icon-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

#eug-icon-grid li { margin: 0; padding: 0; }

#eug-icon-grid li > a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    min-height: 96px;
    padding: 16px 10px 14px;
    background: var(--eug-card) !important;
    border: 1px solid var(--eug-border) !important;
    border-radius: var(--eug-radius-lg) !important;
    color: var(--eug-text) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--eug-transition), transform 0.2s ease, box-shadow 0.2s ease, background var(--eug-transition);
}

#eug-icon-grid li > a:hover {
    border-color: var(--eug-border-blue) !important;
    background: var(--eug-hover) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(69, 199, 255, 0.25);
}

/* Enlarge the SVG mask icons inside tiles and stack them above
   the label — FontIcons.css floats the glyph left, which would
   otherwise render icon-beside-text. Mask icons need an explicit
   box (no intrinsic glyph size). */
#eug-icon-grid li > a:before,
#eug-icon-grid li > a > div:before,
#eug-icon-grid li > a > span:before {
    font-size: 26px !important;
    line-height: 1 !important;
    float: none !important;
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 auto 10px !important;
    text-align: center;
}

#eug-icon-grid li > a > div,
#eug-icon-grid li > a > span {
    display: block;
    width: 100%;
    text-align: center;
    color: var(--eug-text) !important;
    line-height: 1.3;
}

#eug-icon-grid li > a img { width: 32px !important; height: 32px !important; }

@media only screen and (max-width: 900px) {
    #eug-icon-grid ul { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ══════════════════════════════════════════
   KEPT FROM THE DASHBOARD EXPERIMENT
   Metric cards on the service home + small
   quality touches. Everything else reverted.
══════════════════════════════════════════ */

/* Metric cards row (Players / CPU / Memory / Bandwidth) */
.gb-service-metrics { list-style: none; margin: 0 0 8px; padding: 0; }
.gb-metric-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.gb-metric-card {
    display: flex;
    flex-direction: column;
    min-height: 84px;
    padding: 14px 16px 12px;
    background: var(--eug-card) !important;
    border: 1px solid var(--eug-border) !important;
    border-radius: var(--eug-radius-lg) !important;
    box-shadow: none !important;
}
.gb-metric-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gb-metric-card-header label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--eug-muted) !important;
}
.gb-metric-card-header strong {
    font-family: var(--eug-font-display);
    font-weight: 700; font-size: 19px;
    color: var(--eug-text);
    font-variant-numeric: tabular-nums;
}
.gb-metric-card .k-progressbar {
    width: 100% !important;
    height: 8px !important;
    border-radius: 999px !important;
    background-color: var(--eug-border) !important;
    border-color: transparent !important;
    margin-top: auto;
}
/* Cards that render their own bar keep the Kendo widget for data only */
.gb-metric-card.eug-owned-bar .k-progressbar { display: none !important; }
.gb-metric-card .eug-bar {
    width: 100%; height: 8px; border-radius: 999px;
    background: var(--eug-border);
    overflow: hidden;
    margin-top: auto;
}
.gb-metric-card .eug-bar-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--eug-cyan-deep), var(--eug-cyan));
    transition: width 0.6s ease;
}
.gb-metric-card-footer {
    min-height: 18px; margin-top: 8px;
    font-size: 11.5px; color: var(--eug-muted);
    font-variant-numeric: tabular-nums; text-align: right;
}
.gb-metric-refresh {
    display: flex; justify-content: flex-end; align-items: center; gap: 8px;
    margin: 10px 4px 0 0;
    color: var(--eug-muted); font-size: 12px;
}

/* Icon grid can sit between the metrics and the service info */
#eug-icon-grid-holder { list-style: none; margin: 8px 0 0; padding: 0; }

/* Legacy FTP row "Connect via FTP" button (injected by Template.js) */
.gb-ftp-connect-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--eug-hover) !important;
    border: 1px solid var(--eug-border) !important;
    border-radius: var(--eug-radius-sm) !important;
    color: var(--eug-text) !important;
    font-size: 12px; font-weight: 600; text-decoration: none !important;
}
.gb-ftp-connect-btn:hover { border-color: var(--eug-cyan) !important; color: var(--eug-cyan) !important; }

/* Visible keyboard focus */
.k-button:focus-visible,
#eug-icon-grid a:focus-visible,
.nav-fostrap a:focus-visible,
#sidebar a:focus-visible {
    outline: 2px solid var(--eug-cyan) !important;
    outline-offset: 2px;
}

/* Quiet flat tabstrips — no glow ring on the active tab */
.k-tabstrip-items .k-item,
.k-tabstrip-items .k-item .k-link { box-shadow: none !important; text-shadow: none !important; }
.k-tabstrip-items .k-item { border-radius: 8px !important; }

/* ══════════════════════════════════════════
   SERVICE DASHBOARD (approved design)
   Styles the markup our own _ServiceStatus.cshtml
   renders — no stock-markup guessing.
══════════════════════════════════════════ */

.Service_Home #main .detail { max-width: 1180px; }
.Service_Home .fieldset-form,
.Service_Home #main .detail > fieldset {
    border: 0 !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important;
}
.Service_Home #main .detail > fieldset > ul {
    display: block; margin: 0; padding: 0; list-style: none;
}
.eug-dash { display: block; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; list-style: none; }

/* ── Page head row ── */
.eug-pagehead { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.eug-game-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--eug-border-blue); border-radius: 999px;
    color: var(--eug-cyan); padding: 4px 12px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.eug-server-name {
    font-family: var(--eug-font-display) !important;
    font-weight: 700; font-size: 26px; margin: 0; letter-spacing: 0.01em;
    color: var(--eug-text);
}
.eug-status {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 999px; padding: 4px 13px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.eug-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.eug-status-running { background: rgba(182, 255, 46, 0.12); color: var(--eug-lime); border: 1px solid rgba(182, 255, 46, 0.35); }
.eug-status-processing { background: rgba(255, 212, 92, 0.12); color: var(--eug-warn); border: 1px solid rgba(255, 212, 92, 0.35); }
.eug-status-processing .eug-status-dot { animation: eug-pulse 1s ease-in-out infinite; }
@keyframes eug-pulse { 50% { opacity: 0.25; } }
.eug-actions .eug-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.eug-status-stopped { background: rgba(255, 92, 92, 0.12); color: var(--eug-bad); border: 1px solid rgba(255, 92, 92, 0.35); }
.eug-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.eug-actions form { display: inline-flex; gap: 8px; margin: 0; }

.eug-btn {
    font-family: var(--eug-font-body); font-size: 13.5px; font-weight: 700;
    border-radius: 8px; padding: 9px 18px; cursor: pointer;
    border: 1px solid var(--eug-border); background: var(--eug-hover); color: var(--eug-text);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.eug-btn:hover { border-color: var(--eug-cyan); }
.eug-btn-restart { background: var(--eug-warn); border-color: var(--eug-warn); color: var(--eug-warn-text); }
.eug-btn-restart:hover { background: #ffdf82; border-color: #ffdf82; }
.eug-btn-start { background: var(--eug-lime); border-color: var(--eug-lime); color: var(--eug-lime-text); }
.eug-btn-start:hover { background: var(--eug-lime-hover); border-color: var(--eug-lime-hover); }
.eug-btn-stop { background: transparent; border-color: rgba(255, 92, 92, 0.45); color: var(--eug-bad); }
.eug-btn-stop:hover { background: var(--eug-bad); border-color: var(--eug-bad); color: #fff; }

/* ── Address bar ── */
.eug-addressbar {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--eug-card); border: 1px solid var(--eug-border); border-radius: 14px;
    padding: 14px 18px; margin-bottom: 14px;
}
.eug-addressbar label {
    display: block;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--eug-muted); margin: 0 0 2px;
}
.eug-addressbar strong {
    font-family: var(--eug-font-display); font-size: 22px; font-weight: 700;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--eug-text);
}
.eug-copybtn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--eug-border); background: var(--eug-hover);
    color: var(--eug-text); font-size: 12.5px; font-weight: 600;
}
.eug-copybtn:hover { border-color: var(--eug-cyan); color: var(--eug-cyan); }
.eug-copybtn.eug-copied, .eug-iconbtn.eug-copied { border-color: var(--eug-lime) !important; color: var(--eug-lime) !important; }
.eug-uptime { margin-left: auto; color: var(--eug-muted); font-size: 12.5px; }
.eug-uptime b { color: var(--eug-text); font-weight: 600; }

/* ── Metrics (cards already styled above; row spacing here) ── */
.eug-dash .gb-metric-cards { margin-bottom: 4px; }

/* ── Two-column cards ── */
.eug-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; margin-top: 14px; }
@media (max-width: 1000px) { .eug-cards { grid-template-columns: 1fr; } }
.eug-card {
    background: var(--eug-card); border: 1px solid var(--eug-border); border-radius: 14px;
    padding: 18px 20px;
}
.eug-card h3 {
    display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
    font-family: var(--eug-font-display) !important; font-weight: 700; font-size: 16.5px;
    color: var(--eug-text);
}
.eug-card h3 i { color: var(--eug-cyan); font-size: 14px; }
.eug-row {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 9px 2px; min-height: 38px;
    border-bottom: 1px solid rgba(36, 50, 71, 0.55);
    font-size: 13px;
}
.eug-row:last-child { border-bottom: 0; }
.eug-row > span:first-child { color: var(--eug-muted); white-space: nowrap; }
.eug-v { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--eug-text); overflow-wrap: anywhere; text-align: right; }
.eug-v a { color: var(--eug-cyan); text-decoration: none; font-weight: 600; }
.eug-iconbtn {
    display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
    border-radius: 7px; border: 1px solid var(--eug-border); background: var(--eug-hover);
    color: var(--eug-muted); cursor: pointer; font-size: 12px;
}
.eug-iconbtn:hover { border-color: var(--eug-cyan); color: var(--eug-cyan); }

/* ── Support strip ── */
.eug-supportstrip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--eug-card); border: 1px solid var(--eug-border); border-radius: 14px;
    padding: 12px 18px; margin-top: 14px;
}
.eug-supportstrip .eug-lbl { color: var(--eug-muted); font-size: 12.5px; margin-right: 4px; }
.eug-supportstrip a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 8px;
    border: 1px solid var(--eug-border); background: var(--eug-hover);
    color: var(--eug-text) !important; font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.eug-supportstrip a:hover { border-color: var(--eug-cyan); color: var(--eug-cyan) !important; }
.eug-supportstrip a i { color: var(--eug-cyan); }

.eug-btn:focus-visible, .eug-copybtn:focus-visible, .eug-iconbtn:focus-visible,
.eug-supportstrip a:focus-visible { outline: 2px solid var(--eug-cyan); outline-offset: 2px; }

/* Restored after the prune: our header numbers ARE the values —
   never print Kendo's inline text over the bars */
.gb-metric-card .k-progress-status-wrap { display: none !important; }

/* Restored after the prune: custom-image icons never double up
   with a generated mask glyph */
.service-icon.custom-icon-image div:before,
.page-icon.custom-icon-image div:before { display: none !important; }

/* Bar tracks in brand steel, not Kendo default */
.gb-metric-card .k-progressbar { background-color: var(--eug-border) !important; border-color: transparent !important; }

/* Tighter info rows, equalized card padding */
.eug-card { padding: 16px 20px 14px !important; }
.eug-row { min-height: 34px; padding: 7px 2px; }

/* Auto-refresh docks to the metrics row */
.gb-metric-refresh { margin: 6px 4px 0 0 !important; }
.eug-cards { margin-top: 12px; }

/* Session toolbar (bell/avatar) clear of the viewport edge */
#header .search-container { right: 18px !important; }

/* ══════════════════════════════════════════
   DASHBOARD LAYOUT NORMALIZATION
══════════════════════════════════════════ */

/* 1. Clear the breadcrumb strip that overlays the top of #main,
   and 2. stop pages shrink-wrapping the content — the dashboard
   always gets the available width (capped for readability) */
.Service_Home #main { float: none !important; width: auto !important; }
.Service_Home #main .detail {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 1560px;
    margin: 46px 24px 24px 6px !important;
}
.Service_Home #main .detail > fieldset,
.Service_Home .fieldset-form {
    width: 100% !important;
    min-width: 0 !important;
}
.eug-dash { width: 100% !important; }

/* 3. Sidebar tool labels read white; the icons carry the blue */
#sidebar fieldset ul li a,
#sidebar fieldset ul li a span,
#sidebar fieldset ul li a div,
#sidebar > .links a,
#serviceicons a,
#serviceicons a div,
#serviceicons a span {
    color: var(--eug-text) !important;
}
#sidebar fieldset ul li a:hover,
#sidebar fieldset ul li a:hover span,
#sidebar fieldset ul li a:hover div,
#serviceicons a:hover div,
#serviceicons a:hover span {
    color: var(--eug-cyan) !important;
}

/* ══════════════════════════════════════════
   DASHBOARD V3 — two-column layout, quick
   actions, sparklines, chips
══════════════════════════════════════════ */

/* Two columns: main content + info rail */
.eug-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
    margin-top: 12px;
}
.eug-colmain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.eug-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The nav + tools sidebars eat ~560px, so below a ~1450px viewport the
   main column would drop under ~450px — collapse to one column there,
   and let the rail cards share a row so the width still gets used */
@media (max-width: 1450px) {
    .eug-cols { grid-template-columns: 1fr; }
    .eug-rail {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
        align-items: start;
    }
}

/* Metrics header row with the docked auto-refresh toggle */
.eug-metrics-top {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 2px;
}
.eug-metrics-top h2 {
    margin: 0; font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--eug-muted);
}
.eug-metrics-top .gb-metric-refresh { margin: 0 !important; }

/* Uptime chip in the title row */
.eug-upchip { display: inline-flex; align-items: center; gap: 7px; color: var(--eug-muted); font-size: 12.5px; }
.eug-upchip b { color: var(--eug-text); }
.eug-upchip i { color: var(--eug-cyan); }

/* Address bar extras */
.eug-ghostbtn { background: transparent !important; text-decoration: none !important; }
.eug-addrspacer { flex: 1; }
.eug-nodechip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--eug-hover); border: 1px solid var(--eug-border);
    border-radius: 999px; padding: 6px 14px;
    color: var(--eug-muted); font-size: 12px; white-space: nowrap;
}
.eug-nodechip b { color: var(--eug-text); }
.eug-nodechip i { color: var(--eug-cyan); font-size: 11px; }

/* Quick actions row */
.eug-qa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.eug-qa a {
    display: flex; align-items: center; gap: 11px;
    background: var(--eug-card); border: 1px solid var(--eug-border);
    border-radius: 12px; padding: 12px 15px;
    color: var(--eug-text) !important; font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    transition: border-color var(--eug-transition), color var(--eug-transition);
}
.eug-qa a i { color: var(--eug-cyan); font-size: 14px; width: 17px; text-align: center; flex: 0 0 auto; }
.eug-qa a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eug-qa a:hover { border-color: var(--eug-cyan); }

/* Sidebar tool-group headers — clickable drop-down sections, styled
   as buttons so the affordance is obvious */
li.eug-side-h {
    list-style: none;
    display: flex; align-items: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--eug-muted);
    background: var(--eug-hover);
    border: 1px solid var(--eug-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 6px 6px 0;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
    transition: color var(--eug-transition), border-color var(--eug-transition);
}
li.eug-side-h:hover { color: var(--eug-ice); border-color: var(--eug-cyan); }
li.eug-side-h .eug-side-caret { margin-left: auto; padding-left: 8px; }
li.eug-side-h .eug-side-caret::before {
    content: "\25BE";
    display: inline-block;
    font-size: 11px;
    color: var(--eug-cyan);
    transition: transform var(--eug-transition);
}
li.eug-side-h.eug-collapsed .eug-side-caret::before { transform: rotate(-90deg); }
li.eug-side-item.eug-side-hidden { display: none !important; }

/* Header anchors: inherit the muted header look, never the sidebar
   link pill treatment */
#sidebar fieldset ul li.eug-side-h a,
#serviceicons li.eug-side-h a,
#serviceicons li.eug-side-h a span {
    display: flex; align-items: center; flex: 1;
    color: inherit !important;
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 !important;
    text-decoration: none !important;
    font-size: inherit; font-weight: inherit; letter-spacing: inherit;
}
#sidebar fieldset ul li.eug-side-h a:hover,
#serviceicons li.eug-side-h a:hover,
#serviceicons li.eug-side-h a:hover span {
    color: inherit !important;
    background: transparent !important;
    border-color: transparent !important;
}
/* ...except the caret, which stays pinned to the right edge */
#sidebar fieldset ul li.eug-side-h a .eug-side-caret,
#serviceicons li.eug-side-h a .eug-side-caret {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: inherit !important;
}

/* Drawer pages: while the stock drawer is collapsed to icons the
   headers disappear; they return when it hover-expands. Folded groups
   only fold in expanded views — the icon strip always shows every
   tool, so nothing becomes unreachable */
#serviceicons > legend.service-icons-collapsed ~ ul li.eug-side-h { display: none; }
#serviceicons > legend.service-icons-collapsed ~ ul li.eug-side-item.eug-side-hidden { display: block !important; }

/* Long tool labels wrap to a second line wherever the sidebar is
   expanded by design (dashboard, wide viewports, mobile). The stock
   nowrap stays in force for the 901-1399px drawer, whose collapsed
   40px strip depends on it. Anchors go flex so a wrapped second line
   aligns under the text, not under the icon. */
.Service_Home #serviceicons > ul { white-space: normal; }
.Service_Home #serviceicons ul li a { display: flex; align-items: center; }
.Service_Home #serviceicons ul li a > * { min-width: 0; }
@media only screen and (min-width: 1400px) {
    #serviceicons > ul { white-space: normal; }
    #serviceicons ul li a { display: flex; align-items: center; }
    #serviceicons ul li a > * { min-width: 0; }
}
@media only screen and (max-width: 900px) {
    #serviceicons > ul { white-space: normal; }
    #serviceicons ul li a { display: flex; align-items: center; }
    #serviceicons ul li a > * { min-width: 0; }
}

/* On wide viewports the drawer never engages (Template.js skips it at
   >=1400px), so every service page shows the expanded grouped sidebar —
   give it the same card treatment as the dashboard */
@media only screen and (min-width: 1400px) {
    #sidebar > fieldset#serviceicons {
        background: var(--eug-panel);
        border: 1px solid var(--eug-border) !important;
        border-radius: 12px;
        padding: 10px 10px 14px;
        margin: 0 0 12px;
    }
    #sidebar > fieldset#serviceicons > legend {
        float: left; width: 100%;
        margin: 0 0 6px !important;
        padding: 4px 6px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--eug-border) !important;
        background: transparent !important;
        color: var(--eug-text) !important;
    }
    #sidebar > fieldset#serviceicons > ul { clear: both; }
}

/* Sidebar top aligns with the dashboard title (the breadcrumb strip
   gets the full-width band above both). The fieldset renders as a
   rounded card with MANAGE as a normal header row — a floated legend
   stops straddling the fieldset edge, which is what caused the odd
   sliver of background above the title. */
@media only screen and (min-width: 901px) {
    .Service_Home #sidebar {
        margin-top: 46px;
        background: transparent !important;
    }
    .Service_Home #sidebar > fieldset {
        background: var(--eug-panel);
        border: 1px solid var(--eug-border) !important;
        border-radius: 12px;
        padding: 10px 10px 14px;
        margin: 0 0 12px;
    }
    .Service_Home #sidebar > fieldset > legend {
        float: left; width: 100%;
        margin: 0 0 6px !important;
        padding: 4px 6px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--eug-border) !important;
        background: transparent !important;
        color: var(--eug-text) !important;
    }
    .Service_Home #sidebar > fieldset > ul { clear: both; }
}

/* Per-game background images arrive without fixed/cover, so they used
   to end mid-scroll — pin every page background to the viewport,
   wherever TCAdmin puts it */
html, body {
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}
html { min-height: 100%; }
body { min-height: 100vh; }

/* Support card in the rail */
.eug-supportcard a {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 12px; margin-bottom: 7px; border-radius: 8px;
    border: 1px solid var(--eug-border); background: var(--eug-hover);
    color: var(--eug-text) !important; font-size: 12.5px; font-weight: 600;
    text-decoration: none !important;
}
.eug-supportcard a:hover { border-color: var(--eug-cyan); color: var(--eug-cyan) !important; }
.eug-supportcard a i { color: var(--eug-cyan); width: 16px; text-align: center; }
.eug-supportcard a:last-child { margin-bottom: 2px; }

/* ── Discord live card (rail) ── */
.eug-discord {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.16), var(--eug-card) 55%) !important;
    border-color: rgba(88, 101, 242, 0.45) !important;
}
.eug-discord h3 i { color: #8b96f5; }
.eug-discord-online { display: flex; align-items: center; gap: 9px; margin: 2px 0 10px; }
.eug-discord-online b { font-size: 15px; }
.eug-discord-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #5CE08A; box-shadow: 0 0 8px rgba(92, 224, 138, 0.8);
}
.eug-discord-avs { display: flex; margin: 0 0 12px; }
.eug-discord-avs img,
.eug-discord-avs span {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2px solid var(--eug-card); margin-right: -9px;
    background: var(--eug-hover);
}
.eug-discord-avs span {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--eug-muted); font-size: 10px; font-weight: 700;
}
.eug-discord-join {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: #5865F2; border-radius: 9px; padding: 10px;
    font-weight: 700; font-size: 13px;
    color: #fff !important; text-decoration: none !important;
    transition: background var(--eug-transition);
    margin-bottom: 4px;
}
.eug-discord-join:hover { background: #6a76f3; }
.eug-discord-join i { color: #fff; }

/* ══════════════════════════════════════════
   MOBILE (TCAdmin's own breakpoint is 900px)
   Desktop rules above are untouched.
══════════════════════════════════════════ */
@media only screen and (max-width: 900px) {
    /* No absolute breadcrumb overlay on mobile — reclaim the 46px band */
    .Service_Home #main .detail { margin: 12px 10px 18px !important; }

    /* iOS ignores fixed attachment and sizes cover against the whole
       document (huge upscale + janky scroll repaints) — use scroll
       attachment on phones; body min-height keeps it covering */
    html, body { background-attachment: scroll !important; }

    /* Tighter type and spacing on small screens */
    .eug-server-name { font-size: 20px; }
    .eug-addressbar { padding: 12px 14px; gap: 10px; }
    .eug-addressbar strong { font-size: 18px; word-break: break-all; }
    .eug-pagehead { gap: 10px; margin-bottom: 12px; }
    .eug-cols { gap: 12px; margin-top: 8px; }

    /* Two metric cards / two quick actions per row on a phone */
    .gb-metric-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .eug-qa { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }

    /* Info rows may wrap the value under the label on tiny widths */
    .eug-row { flex-wrap: wrap; }
}

/* ── Loading spinner (Kendo mask + TCAdmin's iframe loader) ──
   Stock shows a dated GIF over a pale mask; replace with a dark dim
   and a brand-cyan ring */
.k-loading-mask .k-loading-text { display: none !important; }
.k-loading-mask .k-loading-color {
    background-color: var(--eug-canvas) !important;
    opacity: 0.55 !important;
}
/* Kendo's own spinner element varies by version (gif background or
   pseudo-element glyphs) - hide it entirely and draw the ring on the
   mask itself, which is always present and positioned */
.k-loading-mask .k-loading-image { display: none !important; }
.k-loading-mask::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 42px; height: 42px; margin: -21px 0 0 -21px;
    border-radius: 50%;
    border: 3px solid rgba(69, 199, 255, 0.18);
    border-top-color: var(--eug-cyan);
    animation: eug-spin 0.8s linear infinite;
    z-index: 1;
}
@keyframes eug-spin { to { transform: rotate(360deg); } }
/* TCAdmin's page loader (iframe pages) uses an <img> gif - same ring */
#divloading { padding: 40px 0; }
#divloading img { display: none !important; }
#divloading::after {
    content: "";
    display: inline-block;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 3px solid rgba(69, 199, 255, 0.18);
    border-top-color: var(--eug-cyan);
    animation: eug-spin 0.8s linear infinite;
}

/* ── Confirm modal (replaces window.confirm for Stop) ── */
.eug-modal-backdrop {
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(4, 7, 12, 0.7);
    display: flex; align-items: center; justify-content: center;
}
.eug-modal {
    background: var(--eug-panel);
    border: 1px solid var(--eug-border);
    border-radius: 14px;
    padding: 22px 24px;
    width: 400px; max-width: calc(100vw - 32px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.eug-modal h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 700; margin: 0 0 8px;
    color: var(--eug-text);
}
.eug-modal h3 i { color: #FF5C5C; }
.eug-modal p { color: var(--eug-muted); font-size: 13.5px; margin: 0 0 18px; }
.eug-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Wide data grids must fit the page (mods browser etc.) ──
   Long URLs + fixed column widths push grids past the viewport,
   forcing users to zoom out. Neutralize the fixed column hints, cap
   the grid at its container and wrap long tokens. The file manager
   keeps its own layout. */
#main .k-grid { max-width: 100% !important; }
#main .k-grid:not(.k-filemanager .k-grid) .k-grid-header table,
#main .k-grid:not(.k-filemanager .k-grid) .k-grid-content table,
#main .k-grid:not(.k-filemanager .k-grid) > table {
    width: 100% !important;
    table-layout: fixed !important;
}
#main .k-grid:not(.k-filemanager .k-grid) col { width: auto !important; }
#main .k-grid td { overflow-wrap: anywhere; }
/* Narrow utility columns (status / action buttons) keep their size */
#main .k-grid .k-hierarchy-col { width: 28px !important; }

/* ── Themed scrollbars (panel-wide) ── */
html { scrollbar-width: thin; scrollbar-color: #2a3a52 var(--eug-panel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: #2a3a52;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--eug-cyan); }
::-webkit-scrollbar-corner { background: transparent; }