without .table (profile dialogs, report fragments) */
table:not(.table):not(.tablesorter):not(.ui-datepicker-calendar):not(.ui-datepicker) { color: var(--text); }
table:not(.table):not(.tablesorter):not(.ui-datepicker-calendar) > thead > tr > th,
table:not(.table):not(.tablesorter):not(.ui-datepicker-calendar) > tbody > tr > th,
table:not(.table):not(.tablesorter):not(.ui-datepicker-calendar) > tr > th { color: var(--glow); font-weight: 600; }
table:not(.table):not(.tablesorter):not(.ui-datepicker-calendar) td,
table:not(.table):not(.tablesorter):not(.ui-datepicker-calendar) th { border-color: var(--line); background: transparent; }
table[border], table[bgcolor], tr[bgcolor] { background-color: transparent !important; border-color: var(--line) !important; }
/* legacy bgcolor cells: keep the meaning (green = taken, pink = not) in theme tints */
td[bgcolor], th[bgcolor] { background-color: rgba(var(--glow-rgb),.06) !important; }
td[bgcolor="#A1C935" i], td[bgcolor="green" i], td[bgcolor="lightgreen" i] { background-color: rgba(63,224,143,.18) !important; }
td[bgcolor="pink" i], td[bgcolor="red" i], td[bgcolor="#F08080" i] { background-color: rgba(255,75,92,.16) !important; }
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > td { padding: 4px 6px; }
.c-table-slim th, .c-table-slim td { border-top: 0; }
.table-striped2 > tbody:nth-of-type(odd) { background-color: rgba(var(--glow-rgb),.05); }
.table caption { color: var(--text-dim); }
.table > tbody > tr > td > .table, .table .table { background: transparent; margin-bottom: 0; }
/* ---------- forms ---------- */
label, .control-label { color: var(--text-dim); font-weight: 500; font-size: 12px; letter-spacing: .03em; }
.form-control, input:not([type]), input[type=text], input[type=search], input[type=number], input[type=email], input[type=password],
input[type=tel], input[type=datetime], input[type=datetime-local], input[type=date], input[type=time], input[type=month], input[type=week], input[type=url], select, textarea {
background-color: rgba(var(--bg-rgb),.75); border: 1px solid var(--line); color: var(--text); border-radius: 0; box-shadow: none;
font-family: var(--font-body);
}
input:not([type]), input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=datetime],
input[type=datetime-local], input[type=date], input[type=time], input[type=url], select:not(.form-control), textarea:not(.form-control) { padding: 4px 8px; }
input[type=file] { color: var(--text-dim); }
input[type=file]::file-selector-button { font-family: var(--font-ui); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--head);
background: linear-gradient(180deg, rgba(var(--steel-rgb),.55), rgba(var(--panel2-rgb),.85)); border: 1px solid var(--line-hi); padding: 3px 10px; margin-right: 8px; cursor: pointer; }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #06101e inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); }
.form-control:focus, input:focus, select:focus, textarea:focus {
border-color: var(--glow) !important; outline: 0; box-shadow: 0 0 0 1px var(--glow-faint), 0 0 14px var(--glow-faint) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--text-mute); }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: rgba(var(--line-rgb),.2); color: var(--text-dim); }
select option, select optgroup { background: var(--panel-solid); color: var(--text); }
input[type=checkbox], input[type=radio] { accent-color: var(--glow); }
input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.75) sepia(1) hue-rotate(170deg) saturate(3); }
.input-group-addon { background: rgba(var(--glow-rgb),.08); border: 1px solid var(--line); color: var(--glow); border-radius: 0; }
.help-block, .help-inline { color: var(--text-mute); }
.has-error .form-control { border-color: var(--danger); } .has-error .help-block, .has-error .help-inline, .has-error .control-label { color: var(--danger); }
.has-success .form-control { border-color: var(--success); }
legend { color: var(--head); border-bottom-color: var(--line); font-family: var(--font-ui); font-size: 15px; letter-spacing: .08em; }
fieldset { border-color: var(--line); }
/* ---------- buttons (bevelled command buttons) ---------- */
.btn, .ui-button, button.ui-button {
--b: var(--line-hi);
font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
border-radius: 0 !important; border: 1px solid var(--b); color: var(--head); text-shadow: none !important;
background: linear-gradient(180deg, rgba(var(--steel-rgb),.55), rgba(var(--panel2-rgb),.85));
box-shadow: inset 0 1px 0 rgba(160,220,255,.15), inset 0 0 12px rgba(var(--glow-rgb),.06) !important;
clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
transition: background .15s, box-shadow .15s, color .15s, filter .15s;
}
.btn:hover, .btn:focus, .ui-button:hover {
color: var(--bright); border-color: var(--glow);
background: linear-gradient(180deg, rgba(58,140,220,.7), rgba(16,44,82,.9));
box-shadow: inset 0 1px 0 rgba(180,230,255,.3), inset 0 0 18px rgba(var(--glow-rgb),.25) !important;
}
.btn:active, .btn.active { filter: brightness(.85); }
.btn-primary { --b: var(--glow); background: linear-gradient(180deg, var(--btn-2), var(--btn-3)); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, #4aa6ff, #1556a8); }
.btn-success { --b: #3fe08f; background: linear-gradient(180deg, rgba(40,170,105,.85), rgba(10,70,45,.95)); }
.btn-success:hover, .btn-success:focus { border-color: #7ff5b7; background: linear-gradient(180deg, rgba(60,200,130,.9), rgba(14,90,58,.95)); }
.btn-info { --b: #5fd0ff; background: linear-gradient(180deg, rgba(40,150,200,.8), rgba(10,60,90,.95)); }
.btn-warning { --b: #f2a33a; background: linear-gradient(180deg, rgba(200,130,40,.85), rgba(90,52,10,.95)); }
.btn-warning:hover, .btn-warning:focus { border-color: #ffc777; background: linear-gradient(180deg, rgba(230,155,55,.9), rgba(110,64,14,.95)); }
.btn-danger { --b: #ff4b5c; background: linear-gradient(180deg, rgba(210,50,65,.85), rgba(90,12,22,.95)); }
.btn-danger:hover, .btn-danger:focus { border-color: #ff8a96; background: linear-gradient(180deg, rgba(240,70,85,.9), rgba(115,16,28,.95)); }
.btn-default { --b: var(--line-hi); }
.btn-link { background: none; border-color: transparent; box-shadow: none !important; clip-path: none; color: var(--glow); }
.btn-link:hover { background: none; border-color: transparent; }
.btn-xs, .btn-group-xs > .btn { font-size: 10px; padding: 1px 7px; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.btn-sm, .btn-group-sm > .btn { font-size: 11px; }
.btn.disabled, .btn[disabled] { opacity: .45; filter: grayscale(.6); }
.btn-group > .btn { clip-path: none; }
.btn-group > .btn:first-child { clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }
.btn-group > .btn:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
.btn-group > .btn:only-child { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.btn .caret { border-top-color: currentColor; }
/* ---------- nav / tabs / pills / pagination ---------- */
.nav-tabs { border-bottom: 1px solid var(--line); }
.nav-tabs > li > a { border-radius: 0; color: var(--text-dim); border: 1px solid transparent; font-family: var(--font-ui);
font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-right: 2px; }
.nav-tabs > li > a:hover { background: rgba(var(--glow-rgb),.08); border-color: transparent; color: var(--head); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
background: linear-gradient(180deg, rgba(var(--glow-rgb),.18), rgba(10,22,40,.9)); color: var(--bright); border: 1px solid var(--line);
border-bottom-color: transparent; border-top: 2px solid var(--glow); text-shadow: 0 0 8px var(--glow-soft); }
.nav-pills > li > a { border-radius: 0; color: var(--text-dim); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: rgba(var(--glow-rgb),.2); color: var(--bright); box-shadow: inset 2px 0 0 var(--glow); }
.nav > li > a:hover, .nav > li > a:focus { background: rgba(var(--glow-rgb),.08); }
.tab-content { padding-top: 12px; }
.pagination > li > a, .pagination > li > span { background: rgba(var(--bg-rgb),.6); border-color: var(--line); color: var(--text); border-radius: 0 !important; }
.pagination > li > a:hover { background: rgba(var(--glow-rgb),.12); color: var(--bright); border-color: var(--line-hi); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: rgba(var(--glow-rgb),.3); border-color: var(--glow); color: var(--bright); }
.pagination > .disabled > a, .pagination > .disabled > span { background: transparent; border-color: var(--line); color: var(--text-mute); }
.pager li > a { background: var(--panel); border-color: var(--line); border-radius: 0; }
.breadcrumb { background: transparent; padding: 0; color: var(--text-dim); }
.breadcrumb > .active { color: var(--head); }
/* legacy navbar (if any page still renders one) */
.navbar-inverse { background: var(--panel-solid); border-color: var(--line); }
/* ---------- dropdowns ---------- */
.dropdown-menu { padding: 4px 0; border-radius: 0; background: rgba(var(--panel-rgb),.97); border-color: var(--line-hi); box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--glow-rgb),.06); }
.dropdown-menu > li > a { color: var(--text); padding: 6px 16px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: linear-gradient(90deg, rgba(var(--glow-rgb),.22), transparent); color: var(--bright); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: rgba(var(--glow-rgb),.3); }
.dropdown-menu .divider { background: var(--line); }
.dropdown-header { color: var(--text-mute); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
/* ---------- list-group / badges / labels ---------- */
.list-group { padding: 0; }
.list-group-item { background: transparent; border: 0; border-bottom: 1px solid rgba(var(--line-rgb),.6); color: var(--text); border-radius: 0 !important; }
.list-group-item:last-child { border-bottom: 0; }
a.list-group-item { color: var(--text); } a.list-group-item:hover { background: rgba(var(--glow-rgb),.08); color: var(--bright); }
.list-group-item.active, .list-group-item.active:hover { background: rgba(var(--glow-rgb),.22); border-color: var(--line); color: var(--bright); }
.badge { background: rgba(var(--glow-rgb),.18); color: var(--glow); border: 1px solid rgba(var(--glow-rgb),.4); border-radius: 2px;
font-family: var(--font-mono); font-weight: 500; }
.list-group-item > .badge { margin-top: 1px; }
.label { border-radius: 2px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .06em; padding: .25em .55em; }
.label-default { background: rgba(125,149,179,.25); color: var(--text); }
.label-primary { background: rgba(var(--glow-rgb),.25); color: #bfe8ff; }
.label-success { background: rgba(63,224,143,.2); color: var(--success); }
.label-warning { background: rgba(242,163,58,.22); color: var(--warning); }
.label-danger { background: rgba(255,75,92,.22); color: #ff8a96; }
.label-info { background: rgba(95,208,255,.2); color: var(--info); }
/* ---------- alerts ---------- */
.alert { border-radius: 0; border: 1px solid; border-left-width: 3px; background-image: none !important; text-shadow: none; box-shadow: none; }
.alert-success { background: rgba(63,224,143,.08); border-color: rgba(63,224,143,.5); color: #b5f3d3; }
.alert-info { background: rgba(95,208,255,.08); border-color: rgba(95,208,255,.5); color: #c4ecff; }
.alert-warning { background: rgba(242,163,58,.09); border-color: rgba(242,163,58,.55); color: #ffdcab; }
.alert-danger { background: rgba(255,75,92,.09); border-color: rgba(255,75,92,.55); color: #ffc0c7; }
.alert .close { color: inherit; text-shadow: none; opacity: .6; }
/* ---------- modal / popover / tooltip / progress ---------- */
.modal-backdrop.in { opacity: .7; background: #000; }
.modal-content { background: rgba(var(--panel-rgb),.98); padding: 0; }
.modal-header { background: linear-gradient(90deg, rgba(var(--glow-rgb),.16), transparent); border: 0; border-bottom: 1px solid var(--line); color: var(--head); border-radius: 0; padding: 10px 16px; }
.modal-title { font-family: var(--font-ui); letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }
.modal-footer { border-top: 1px solid var(--line); }
.modal-body, .modal-footer button { font-family: var(--font-body); }
.close { color: var(--text); text-shadow: none; opacity: .6; } .close:hover { color: var(--bright); opacity: 1; }
.popover { background: rgba(var(--panel-rgb),.98); border-color: var(--line-hi); color: var(--text); }
.popover-title { background: rgba(var(--glow-rgb),.1); border-bottom-color: var(--line); color: var(--head); }
.tooltip-inner { background: #0d2240; border: 1px solid var(--line-hi); border-radius: 0; color: var(--head); }
.progress { background: rgba(var(--bg-rgb),.8); border: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.progress-bar { background: linear-gradient(90deg, var(--btn-1), var(--glow)); box-shadow: 0 0 10px var(--glow-soft); }
.thumbnail { background: var(--panel); border-color: var(--line); border-radius: 0; }
/* ---------- jQuery UI (dialogs, tabs, datepicker) ---------- */
.ui-widget { font-family: var(--font-body); font-size: 13px; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: var(--font-body); }
.ui-widget-content { background: rgba(var(--panel-rgb),.98); border: 1px solid var(--line); color: var(--text); }
.ui-widget-content a { color: var(--glow); }
.ui-widget-header { background: linear-gradient(90deg, rgba(var(--glow-rgb),.18), rgba(var(--glow-rgb),.02)); border: 0; border-bottom: 1px solid var(--line);
color: var(--head); font-family: var(--font-ui); letter-spacing: .08em; }
.ui-corner-all, .ui-corner-top, .ui-corner-bottom, .ui-corner-left, .ui-corner-right, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { border-radius: 0; }
.ui-dialog { padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--glow-rgb),.1); }
.ui-dialog .ui-dialog-titlebar { padding: 9px 14px; text-transform: uppercase; font-size: 13px; }
.ui-dialog .ui-dialog-buttonpane { background: transparent; border-top: 1px solid var(--line); margin-top: 0; }
.ui-dialog .ui-dialog-titlebar-close { background: transparent; border: 1px solid var(--line); clip-path: none; }
.ui-widget-overlay { background: #000; opacity: .65; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background: rgba(var(--line-rgb),.35); border: 1px solid var(--line); color: var(--text); font-weight: 500; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: var(--text-dim); }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus {
background: rgba(var(--glow-rgb),.18); border-color: var(--line-hi); color: var(--bright); }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background: rgba(var(--glow-rgb),.3); border-color: var(--glow); color: var(--bright); }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: var(--bright); }
.ui-state-highlight, .ui-widget-content .ui-state-highlight { background: rgba(242,193,78,.18); border-color: var(--gold); color: var(--gold); }
.ui-state-error, .ui-widget-content .ui-state-error { background: rgba(255,75,92,.18); border-color: var(--danger); color: #ffc0c7; }
.ui-tabs .ui-tabs-nav { background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.ui-tabs .ui-tabs-nav li { border-bottom: 0 !important; }
.ui-datepicker { padding: 6px; }
.ui-datepicker th { color: var(--text-dim); font-weight: 500; font-size: 11px; }
.ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon { filter: invert(.8) sepia(1) hue-rotate(170deg) saturate(4); }
.ui-autocomplete { background: rgba(var(--panel-rgb),.98); }
/* blockUI "wait please" */
.blockOverlay { background: #000 !important; opacity: .55 !important; }
.blockMsg { background: rgba(var(--panel-rgb),.98) !important; color: var(--head) !important; border: 1px solid var(--glow) !important;
font-family: var(--font-ui); letter-spacing: .12em; text-transform: uppercase; padding: 18px !important;
box-shadow: 0 0 30px var(--glow-soft); }
.blockMsg::before { content: ""; display: block; height: 2px; margin: -18px -18px 14px; background: linear-gradient(90deg, transparent, var(--glow), transparent);
background-size: 200% 100%; animation: scan 1.2s linear infinite; }
@keyframes scan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* bootstrap-multiselect / datetimepicker */
.multiselect-container > li > a > label { color: var(--text); }
.bootstrap-datetimepicker-widget { background: rgba(var(--panel-rgb),.98); color: var(--text); }
.bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td span.active { background: var(--accent) !important; }
.bootstrap-datetimepicker-widget td.day:hover, .bootstrap-datetimepicker-widget td.hour:hover, .bootstrap-datetimepicker-widget td.minute:hover { background: rgba(var(--glow-rgb),.18); }
/* JSON highlight (legacy main.css palette, re-tuned for dark bg) */
.string { color: #7ee0a6; } .number { color: #f2c14e; } .boolean { color: #5fd0ff; } .null { color: #ff7ad9; } .key { color: #ff8a96; }
/* legacy rgraph / google chart containers on dark */
canvas { max-width: 100%; }
/* =====================================================================
Dashboard components
===================================================================== */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; font-size: 24px; letter-spacing: .1em; text-transform: uppercase; }
.dash-head h1 small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .26em; color: var(--text-dim); font-family: var(--font-ui); }
.dash-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); display: flex; align-items: center; gap: 12px; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); margin-right: 6px; animation: envpulse 2s infinite; }
.dash-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; }
@media (max-width: 1399px) { .span-3 { grid-column: span 6; } }
@media (max-width: 1199px) { .span-4, .span-5, .span-7, .span-8 { grid-column: span 12; } }
@media (max-width: 640px) { .span-3, .span-6 { grid-column: span 12; } }
.hud { padding: 0; }
.hud-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line);
background: linear-gradient(90deg, rgba(var(--glow-rgb),.08), transparent 70%); }
.hud-head h3 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--head); }
.hud-head .glyphicon { color: var(--glow); font-size: 12px; }
.hud-head .hud-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.hud-body { padding: 16px; }
.hud-body.flush { padding: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button { background: transparent; border: 0; color: var(--text-dim); font-family: var(--font-ui); font-size: 11px; font-weight: 600;
letter-spacing: .1em; padding: 3px 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--bright); background: rgba(var(--glow-rgb),.1); }
.seg button.on { color: var(--bright); background: rgba(var(--glow-rgb),.28); box-shadow: inset 0 -2px 0 var(--glow); }
/* KPI tiles */
.kpi { padding: 16px 18px 14px; min-height: 118px; overflow: hidden; }
.kpi-label { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }
.kpi-label .glyphicon { color: var(--glow); }
.kpi-value { font-family: var(--font-ui); font-size: 38px; font-weight: 700; line-height: 1.1; color: var(--bright); margin-top: 8px;
text-shadow: 0 0 18px rgba(var(--glow-rgb),.45); font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: 14px; color: var(--text-dim); font-weight: 500; text-shadow: none; margin-left: 4px; }
.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.kpi-sub b { color: var(--text); font-weight: 500; }
.kpi::after { /* faint emblem */
content: ""; position: absolute; right: -24px; bottom: -24px; width: 110px; height: 110px; pointer-events: none;
border: 1px solid rgba(var(--glow-rgb),.12); transform: rotate(45deg);
box-shadow: inset 0 0 0 14px rgba(var(--glow-rgb),.025), 0 0 0 14px rgba(var(--glow-rgb),.02);
}
.kpi.k-gold .kpi-value { text-shadow: 0 0 18px rgba(242,193,78,.4); }
.kpi.k-gold .kpi-label .glyphicon { color: var(--gold); }
.kpi.k-green .kpi-value { text-shadow: 0 0 18px rgba(63,224,143,.35); }
.kpi.k-green .kpi-label .glyphicon { color: var(--success); }
.kpi.k-red .kpi-label .glyphicon { color: var(--danger); }
.kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; opacity: .55; }
/* bars list (servers, countries) */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(70px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 7px 16px; border-bottom: 1px solid rgba(var(--line-rgb),.45); }
.bars li:last-child { border-bottom: 0; }
.bars .name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bars .name code { background: none; padding: 0; color: var(--text-dim); }
.bars .track { height: 6px; background: rgba(var(--line-rgb),.45); position: relative; overflow: hidden; }
.bars .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--btn-1), var(--glow)); box-shadow: 0 0 8px var(--glow-soft); }
.bars .val { font-family: var(--font-mono); font-size: 12px; color: var(--head); text-align: right; min-width: 64px; }
.bars .val small { color: var(--text-mute); margin-left: 4px; }
.bars-scroll { max-height: 360px; overflow-y: auto; }
/* system feed */
.feed { font-family: var(--font-mono); font-size: 12px; max-height: 360px; overflow-y: auto; }
.feed-row { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 6px 16px; border-bottom: 1px solid rgba(var(--line-rgb),.35); }
.feed-row:hover { background: rgba(var(--glow-rgb),.06); }
.feed-row time { color: var(--text-mute); }
.feed-row a { color: var(--text); word-break: break-word; }
.feed-row.sys a { color: #9ff0c4; }
.feed-row a:hover { color: var(--bright); }
.feed-filter { height: 24px; width: 160px; font-size: 11px; padding: 0 8px; }
/* quick actions */
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 16px; }
.quick a {
display: flex; flex-direction: column; gap: 8px; padding: 14px; color: var(--text); font-size: 12px;
background: linear-gradient(180deg, rgba(var(--line-rgb),.35), rgba(8,18,34,.6)); border: 1px solid var(--line);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: border-color .15s, background .15s, transform .15s;
}
.quick a .glyphicon { font-size: 18px; color: var(--glow); }
.quick a b { font-family: var(--font-ui); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--head); font-size: 12px; }
.quick a:hover { border-color: var(--glow); background: linear-gradient(180deg, rgba(58,140,220,.35), rgba(10,26,50,.7)); transform: translateY(-1px); text-shadow: none; }
.chart-box { position: relative; height: 300px; padding: 12px 16px 8px; }
.chart-legend { display: flex; gap: 16px; padding: 0 16px 12px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; }
.chart-legend i { display: inline-block; width: 10px; height: 3px; margin-right: 6px; vertical-align: middle; }
.dash-empty { padding: 28px 16px; text-align: center; color: var(--text-mute); font-size: 12px; }
.skeleton { display: inline-block; min-width: 60px; height: .9em; background: linear-gradient(90deg, rgba(var(--line-rgb),.4), rgba(var(--glow-rgb),.2), rgba(var(--line-rgb),.4));
background-size: 200% 100%; animation: scan 1.4s linear infinite; vertical-align: middle; }
/* =====================================================================
Login
===================================================================== */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; overflow: hidden; }
.login-body::before { /* horizon glow */
content: ""; position: fixed; left: -10%; right: -10%; bottom: -30vh; height: 60vh; pointer-events: none;
background: radial-gradient(closest-side, rgba(var(--glow-rgb),.35), transparent); filter: blur(10px);
}
.login-card { width: 380px; max-width: 100%; padding: 30px 30px 26px; }
.login-emblem { width: 64px; height: 64px; margin: -62px auto 14px; display: grid; place-items: center;
font-family: var(--font-ui); font-weight: 800; font-size: 20px; color: #fff;
background: linear-gradient(135deg, var(--btn-2), var(--btn-3)); border: 1px solid var(--glow);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
box-shadow: 0 0 30px var(--glow-soft); }
.login-card h1 { margin: 0 0 4px; text-align: center; font-size: 20px; letter-spacing: .3em; text-transform: uppercase; }
.login-card .login-sub { text-align: center; font-size: 10px; letter-spacing: .4em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 24px; font-family: var(--font-ui); }
.login-card .field { margin-bottom: 14px; }
.login-card .field label { display: block; font-family: var(--font-ui); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 6px; }
.login-card input { width: 100%; height: 40px !important; font-size: 14px; padding: 0 12px !important; }
.login-card .btn { width: 100%; height: 44px; font-size: 14px; letter-spacing: .3em; margin-top: 8px; }
.login-msg { padding: 8px 12px; margin-bottom: 14px; font-size: 12px; border-left: 3px solid; }
.login-msg.error { color: #ffc0c7; border-color: var(--danger); background: rgba(255,75,92,.1); }
.login-msg.success { color: #b5f3d3; border-color: var(--success); background: rgba(63,224,143,.08); }
.login-foot { margin-top: 18px; text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); letter-spacing: .12em; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* =====================================================================
Profile window (Views/Profiles/Show.cshtml inside #profileWindow)
===================================================================== */
/* the dialog is a Bootstrap modal (js/jquery.dialog.js shim); .pw-dialog is set on .modal-dialog */
.modal-dialog.pw-dialog { margin: 14px auto; }
.modal-dialog.pw-dialog .modal-content { height: 100%; padding: 0; display: flex; flex-direction: column; border-color: var(--line-hi); }
.modal-dialog.pw-dialog .modal-header, .modal-dialog.pw-dialog .modal-footer { display: none; }
.modal-dialog.pw-dialog .modal-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.modal-dialog.pw-dialog #profileWindow { height: 100%; }
.pw { display: grid; grid-template-columns: 224px minmax(0, 1fr); height: 100%; min-height: 0; background: rgba(var(--panel-rgb),.98); }
.pw-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line);
background: linear-gradient(180deg, rgba(8,18,34,.9), rgba(var(--card2-rgb),.95)); }
.pw-id { padding: 16px 14px 12px; border-bottom: 1px solid var(--line); }
.pw-ava { width: 52px; height: 52px; display: grid; place-items: center; font: 700 18px var(--font-ui); color: #fff;
background: linear-gradient(135deg, var(--btn-2), var(--btn-3)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-bottom: 10px; }
.pw-name { font: 600 15px var(--font-ui); color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-name small { display: block; font: 11px var(--font-mono); color: var(--text-dim); margin-top: 2px; }
.pw-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.pw-tags .label { font-size: 9px; }
.pw-nav.nav-tabs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 8px; border: 0; }
.pw-nav.nav-tabs > li { float: none; margin: 0; }
.pw-nav.nav-tabs > li.sub { padding: 10px 14px 3px; font: 600 10px var(--font-ui); letter-spacing: .16em; color: var(--text-mute); text-transform: uppercase; }
.pw-nav.nav-tabs > li > a { display: block; margin: 0; padding: 5px 14px; border: 0; border-left: 2px solid transparent; border-radius: 0;
color: var(--text); font: 13px var(--font-body); text-transform: none; letter-spacing: 0; }
.pw-nav.nav-tabs > li > a:hover { background: rgba(var(--glow-rgb),.1); border-color: transparent; border-left-color: transparent; color: var(--bright); }
.pw-nav.nav-tabs > li.active > a, .pw-nav.nav-tabs > li.active > a:hover, .pw-nav.nav-tabs > li.active > a:focus {
color: var(--bright); border: 0; border-left: 2px solid var(--glow); background: linear-gradient(90deg, rgba(var(--glow-rgb),.22), transparent); text-shadow: none; }
.pw-foot { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.pw-foot .dropup { display: flex; } .pw-foot .dropup > .btn { flex: 1; }
.pw-foot .dropdown-menu { bottom: 100%; top: auto; margin-bottom: 4px; }
.pw-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pw-top { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-bottom: 1px solid var(--line);
background: linear-gradient(90deg, rgba(var(--glow-rgb),.1), transparent 60%); }
.pw-top h3 { margin: 0; font: 600 13px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--bright); }
.pw-upd { font-size: 11px; color: var(--text-mute); font-family: var(--font-mono); }
.pw-top .sp { flex: 1; }
.pw-find { height: 28px !important; width: 220px; font-size: 12px; padding: 0 10px !important; }
.pw-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 16px; }
.pw-body > .tab-pane > .well { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.pw-body > .tab-pane > .well::before { display: none; }
.pw-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-content: start; }
.pw-kpi { grid-column: span 3; padding: 12px 14px; min-height: 0; }
.pw-kpi .kpi-value { font-size: 26px; margin-top: 4px; }
.pw-kpi .kpi-value.pw-kpi-date { font-size: 20px; }
.pw-kpi .kpi-label { font-size: 10px; }
.pw-kpi .kpi-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-s6 { grid-column: span 6; } .pw-s12 { grid-column: span 12; }
@media (max-width: 1200px) { .pw-kpi { grid-column: span 6; } .pw-s6 { grid-column: span 12; } }
/* narrow screens: like the main shell — the side panel is off-canvas, a burger in the window header opens it */
.pw-burger { display: none; }
.pw-backdrop { display: none; }
@media (max-width: 820px) {
.pw { display: flex; flex-direction: column; position: relative; }
.pw-side { position: absolute; top: 0; bottom: 0; left: 0; width: min(280px, 85%); z-index: 20; transform: translateX(-104%);
transition: transform .18s ease; box-shadow: 8px 0 24px rgba(0,0,0,.5); background: var(--panel-solid); }
.pw.side-open .pw-side { transform: none; }
.pw-backdrop { position: absolute; inset: 0; z-index: 19; background: rgba(0,0,0,.55); }
.pw.side-open .pw-backdrop { display: block; }
.pw-burger { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 28px; margin-right: 4px; padding: 0;
border: 1px solid var(--line); background: rgba(var(--glow-rgb),.08); color: var(--bright); font-size: 14px; }
.pw-burger:hover { border-color: var(--glow); }
.pw-main { flex: 1 1 auto; min-height: 0; }
.pw-top { flex-wrap: wrap; padding: 8px 12px; }
.pw-top .pw-crumbs { max-width: 100%; }
.pw-find { width: 140px; }
.pw-body { padding: 10px 12px; }
}
}
.pw-grp { padding: 0; }
.pw-grp > h4 { margin: 0; padding: 8px 14px; font-size: 11px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
background: linear-gradient(90deg, rgba(var(--glow-rgb),.08), transparent); }
.pw-grp > h4 + h4 { border-top: 1px solid var(--line); }
.pw-grp > h4 .btn { margin-left: auto; }
.pw-grp > .table { margin: 0; }
.kv { display: grid; grid-template-columns: minmax(130px, 170px) minmax(0, 1fr); font-size: 12px; }
.kv > div { padding: 5px 14px; border-bottom: 1px solid rgba(var(--line-rgb),.4); min-width: 0; }
.kv > div:nth-child(odd) { color: var(--text-dim); }
.kv > div:nth-child(even) { color: var(--head); font-family: var(--font-mono); font-size: 12px; word-break: break-word; }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.kv .pw-wrap { overflow-wrap: anywhere; }
.pw-mono { font-family: var(--font-mono); font-size: 11px; }
.kv > div.pw-hit, .pw-raw.pw-hit > h4 { background: rgba(242,193,78,.12); }
.pw-grp.pw-miss, .pw-kpi.pw-miss { display: none; }
/* inline editors: the Ui.Updatable* buttons become dashed links */
.kv .btn.btn-xs, .pw-raw .btn-default.btn-sm { min-height: 0 !important; min-width: 0 !important; padding: 0 2px; margin: 0; border: 0; border-bottom: 1px dashed rgba(var(--glow-rgb),.45);
background: none !important; box-shadow: none !important; clip-path: none; color: var(--glow); font: inherit; font-family: var(--font-mono); text-transform: none;
letter-spacing: 0; cursor: pointer; text-align: left; white-space: normal; word-break: break-word; }
.kv .btn.btn-xs:hover, .pw-raw .btn-default.btn-sm:hover { color: var(--bright); text-shadow: 0 0 8px var(--glow-soft); border-bottom-color: var(--glow); }
.kv .btn.btn-xs:empty::before { content: "—"; color: var(--text-mute); }
.pw-ro .kv .btn.btn-xs { pointer-events: none; border-bottom-color: transparent; color: var(--head); }
.pw-danger > h4 .glyphicon { color: var(--danger); }
.pw-raw .pw-rawbody { padding: 8px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text); max-height: 220px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.pw-raw .btn-default.btn-sm { display: block; }
.pw-raw .pw-rawbody:empty::before { content: "пусто"; color: var(--text-mute); }
.kv .btn.pw-on::before, .kv .btn.pw-off::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: var(--text-mute); }
.kv .btn.pw-on { color: var(--success); } .kv .btn.pw-on::before { background: var(--success); box-shadow: 0 0 6px var(--success); }
.kv .btn.pw-off { color: var(--text-dim); }
.pw-danger .kv .btn.pw-on { color: var(--danger); } .pw-danger .kv .btn.pw-on::before { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
/* infinite loader */
.bw-more-wrap { display: flex; justify-content: center; padding: 12px 0 4px; }
.bw-more { min-width: 200px; }
.bw-more.loading { opacity: .7; }
.bw-more.loading .glyphicon { animation: bwspin 1s linear infinite; }
@keyframes bwspin { to { transform: rotate(360deg); } }
.bw-end { text-align: center; padding: 12px; font: 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
/* JSON values */
.bw-json, .bw-json a, .bw-json .btn, .bw-json code { font-family: var(--font-mono) !important; font-size: 11.5px !important; }
td.bw-json, .kv > div.bw-json, .pw-rawbody.bw-json, .btn-default.btn-sm.bw-json { white-space: pre-wrap; overflow-wrap: anywhere; color: #a9d2f5; }
/* editable text areas rendered as (Ui.UpdatableArea) — Bootstrap paints them white */
.btn-default:not(.btn):not(td):not(th):not(tr), div.btn-default.btn-sm, span.btn-default.btn-sm {
background: rgba(var(--bg-rgb),.6) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: 0;
box-shadow: none !important; text-shadow: none; padding: 6px 10px; cursor: pointer; font-family: var(--font-mono); font-size: 11.5px;
white-space: pre-wrap; overflow-wrap: anywhere; display: block; min-height: 30px; }
.btn-default:not(.btn):not(td):not(th):hover, div.btn-default.btn-sm:hover { border-color: var(--glow) !important; color: var(--bright) !important; box-shadow: 0 0 10px var(--glow-faint) !important; }
.btn-default:not(.btn):not(td):not(th):empty::before { content: "пусто — нажмите, чтобы задать"; color: var(--text-mute); font-family: var(--font-body); }
.pw-raw .btn-default.btn-sm { border: 0 !important; background: transparent !important; padding: 8px 14px; max-height: 220px; overflow: auto; }
.pw-raw .btn-default.btn-sm:hover { background: rgba(var(--glow-rgb),.05) !important; box-shadow: none !important; }
/* plain