/* LW TacticalRMM skin (based on the Hermes "N-central style" mockup)
 * - Only active when <body> has class "lw-skin" (set by lw-skin.js)
 * - Pure CSS restyle: does not hide, move or replace TacticalRMM elements
 * - Keeps original layout heights (header 50px, menubar 40px) because the
 *   dashboard computes its splitter height in JS from those values
 * - Light and dark mode (TRMM toggle) share one ruleset via --lw-* tokens
 * Served from /opt/tacticalrmm-custom-theme/skin via nginx (survives TRMM updates)
 */

/* ======================= Tokens ======================= */
body.lw-skin{
  /* fixed brand colours (same in both themes) */
  --lw-purple:#8500d4;--lw-purple-2:#7600cb;--lw-purple-hi:#c33cff;--lw-purple-hi-2:#b72dff;
  --lw-black:#101010;--lw-nav:#1e2022;--lw-nav-2:#151719;--lw-nav-text:#c9d0d4;
  --lw-blue:#2b9ec3;--lw-green:#55b800;--lw-red:#ef4d23;--lw-yellow:#f7c927;--lw-orange:#ffae1a;

  /* light theme surfaces */
  --lw-page:#eef1f3;--lw-surface:#fff;--lw-head:#fafbfb;--lw-bar:#eef3f6;
  --lw-line:#d5dde1;--lw-line-soft:#edf1f3;--lw-text:#34424a;--lw-text-2:#52636c;--lw-muted:#687981;
  --lw-row:#f6f8f8;--lw-hover:#e4f2fb;--lw-select:#c9e6f5;--lw-link:#118ec0;
  --lw-offline:#dfe3e6;--lw-overdue:#ffdcd2;--lw-shadow:0 1px 2px #0000001a;

  --q-primary:#2b9ec3!important;--q-secondary:#5c6b73!important;--q-accent:#8500d4!important;
  --q-positive:#55b800!important;--q-negative:#ef4d23!important;
  --q-info:#2b9ec3!important;--q-warning:#f7c927!important;

  font-family:Arial,Helvetica,sans-serif;
  background:var(--lw-page);color:var(--lw-text);
}
body.lw-skin.body--dark{
  --lw-page:#141618;--lw-surface:#1b1d20;--lw-head:#202326;--lw-bar:#1e2124;
  --lw-line:#2e3236;--lw-line-soft:#25292c;--lw-text:#d4dadd;--lw-text-2:#aeb8be;--lw-muted:#8a969c;
  --lw-row:#191b1e;--lw-hover:#1f3440;--lw-select:#23465a;--lw-link:#3db4e0;
  --lw-offline:#2b2e31;--lw-overdue:#4a1d16;--lw-shadow:0 1px 3px #00000066;
  --q-dark-page:#141618!important;--q-dark:#1b1d20!important;
}
body.lw-skin a{color:var(--lw-link)}
body.lw-skin .q-page-container,
body.lw-skin .q-page{background:var(--lw-page)}

/* ======================= Main header ======================= */
/* (.q-layout-container = nested layouts such as the agent sub-tabs; leave those alone) */
body.lw-skin .q-header:not(.q-layout-container .q-header){
  background:var(--lw-black)!important;color:#fff!important;box-shadow:0 1px 3px #0006!important;
}
body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar{padding-left:0;padding-right:10px}
/* purple brand block */
body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar::before{
  content:"RMM";flex:0 0 auto;align-self:stretch;display:flex;align-items:center;
  padding:0 26px 0 22px;color:#fff;font-size:19px;font-weight:800;letter-spacing:.2px;
  background:linear-gradient(90deg,var(--lw-purple),var(--lw-purple-2));
  box-shadow:inset -1px 0 rgba(0,0,0,.35);
}
/* refresh / back-to-dashboard button as purple icon block */
body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar>.q-btn:first-child{
  align-self:stretch;width:52px;border-radius:0;
  background:linear-gradient(180deg,var(--lw-purple-hi),var(--lw-purple-hi-2))!important;color:#fff!important;
  border-left:1px solid #9823df;border-right:1px solid #9823df;
}
body.lw-skin .q-header .q-toolbar__title{
  display:flex;align-items:center;gap:8px;padding-left:18px;
  text-transform:uppercase;font-size:20px;font-weight:400;letter-spacing:.3px;
}
body.lw-skin .q-header .q-toolbar__title .text-overline{text-transform:none;color:#9aa5ab;font-size:11px;letter-spacing:.5px}
body.lw-skin .q-header .q-toolbar__title .q-chip{text-transform:none;font-size:11px}
body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar .q-chip.cursor-pointer{
  background:#24272a!important;color:#dfe3e6!important;border:1px solid #33373b;border-radius:3px;
}
body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar>.q-btn:not(:first-child){color:#dfe3e6}
body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar>.q-btn:not(:first-child):hover{color:#fff}

/* ======================= Menu bar (File / View / Agents / ...) ======================= */
body.lw-skin .q-page-container .q-bar{
  background:linear-gradient(180deg,var(--lw-nav),var(--lw-nav-2))!important;color:var(--lw-nav-text)!important;
  border-bottom:1px solid #000;box-shadow:0 1px 2px #0004;
}
body.lw-skin .q-page-container .q-bar .q-btn{
  color:var(--lw-nav-text)!important;font-size:13px;font-weight:400;border-radius:0;padding:0 12px;align-self:stretch;
}
body.lw-skin .q-page-container .q-bar .q-btn:hover,
body.lw-skin .q-page-container .q-bar .q-btn[aria-expanded="true"]{color:#fff!important;background:#ffffff14}
body.lw-skin .q-page-container .q-bar .q-btn[aria-expanded="true"]{box-shadow:inset 0 -2px var(--lw-purple-hi)}

/* ======================= Client tree (left pane of dashboard) ======================= */
/* = the vertical splitter directly after the menu bar wrapper */
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before{
  background:linear-gradient(180deg,var(--lw-nav),var(--lw-nav-2))!important;color:var(--lw-nav-text);
  box-shadow:2px 0 4px #0004;
}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-item,
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree{color:#d7dcdf}
/* "All Clients" row = N-central style section header */
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-list>.q-item{
  min-height:40px;background:#202226;border-bottom:1px solid #ffffff11;text-transform:uppercase;font-size:12px;letter-spacing:.4px;
}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-list>.q-item .q-icon{color:#9fa8ad;font-size:18px}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-item--active{
  color:#fff!important;box-shadow:inset 3px 0 var(--lw-purple-hi);
}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree{padding-top:8px;font-size:13px}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree__node-header{
  border-radius:0;padding:5px 6px;margin-top:0;
}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree__node-header:hover{background:#ffffff10}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree__node--selected{
  background:#ffffff16;color:#fff!important;box-shadow:inset 3px 0 var(--lw-purple-hi);
}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree__arrow{color:#88949b}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree .text-green{color:var(--lw-green)!important}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree .text-red,
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__before .q-tree .text-negative{color:var(--lw-red)!important}
body.lw-skin .q-page-container div:has(>.q-bar)+.q-splitter--vertical>.q-splitter__separator{background:#000}

/* ======================= Splitters ======================= */
body.lw-skin .q-splitter--horizontal>.q-splitter__separator{background:var(--lw-line)}
body.lw-skin .q-splitter--horizontal>.q-splitter__before,
body.lw-skin .q-splitter--horizontal>.q-splitter__after{background:var(--lw-page)}

/* ======================= Tabs ======================= */
body.lw-skin .q-tabs{color:var(--lw-muted)}
body.lw-skin .q-tab{text-transform:uppercase;min-height:40px}
body.lw-skin .q-tab__label{font-size:12px;font-weight:700;letter-spacing:.3px}
body.lw-skin .q-tab__icon{font-size:17px}
body.lw-skin .q-tab--active{color:var(--q-primary)!important}
body.lw-skin .q-tab__indicator{height:3px}
/* dashboard: Servers / Workstations / Mixed + search row */
body.lw-skin .q-splitter--horizontal>.q-splitter__before>.row:first-child{
  background:var(--lw-bar);border-bottom:1px solid var(--lw-line);padding:4px 0 0 4px;align-items:center;
}
/* agent detail sub-tab header (Summary / Checks / ...) */
body.lw-skin .q-layout-container .q-header{
  background:var(--lw-bar)!important;color:var(--lw-text)!important;border-bottom:1px solid var(--lw-line);box-shadow:none!important;
}

/* ======================= Tables ======================= */
body.lw-skin .q-table__container{
  background:var(--lw-surface);color:var(--lw-text);border-radius:0;box-shadow:var(--lw-shadow);
}
body.lw-skin .q-table__card{border:1px solid var(--lw-line)}
body.lw-skin .q-table__top,
body.lw-skin .q-table__bottom,
body.lw-skin .table-bgcolor .q-table__top,body.lw-skin .table-bgcolor .q-table__bottom,
body.lw-skin .table-bgcolor-dark .q-table__top,body.lw-skin .table-bgcolor-dark .q-table__bottom{
  background:var(--lw-bar)!important;color:var(--lw-muted);
}
body.lw-skin .q-table__top{border-bottom:1px solid var(--lw-line);min-height:40px;padding:4px 10px}
body.lw-skin .q-table__bottom{border-top:1px solid var(--lw-line);min-height:36px;font-size:12px}
body.lw-skin .q-table__title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--lw-text-2)}
body.lw-skin .q-table thead th,
body.lw-skin .table-bgcolor thead tr:first-child th,
body.lw-skin .table-bgcolor-dark thead tr:first-child th{
  background:var(--lw-head)!important;color:var(--lw-text-2);
  border-bottom:1px solid var(--lw-line);
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;
}
body.lw-skin .q-table thead th .q-icon{color:var(--lw-text-2)}
body.lw-skin .q-table thead th.sorted{color:var(--lw-text)}
body.lw-skin .q-table tbody td{color:var(--lw-text);border-color:var(--lw-line-soft)}
body.lw-skin .q-table tbody td:before{display:none}
/* zebra + hover on the row so TRMM's own row classes keep priority */
body.lw-skin .q-table tbody tr:nth-child(even){background:var(--lw-row)}
body.lw-skin .q-table tbody tr:hover{background:var(--lw-hover)}
body.lw-skin .q-table tbody tr.highlight,
body.lw-skin .q-table tbody tr.highlight-dark,
body.lw-skin .q-table tbody tr.q-tr--selected{background:var(--lw-select)!important;box-shadow:inset 3px 0 var(--lw-blue)}
body.lw-skin .q-table tbody tr.agent-offline{background:var(--lw-offline)!important;color:var(--lw-muted)}
body.lw-skin .q-table tbody tr.agent-offline td{color:var(--lw-muted)}
body.lw-skin .q-table tbody tr.agent-overdue{background:var(--lw-overdue)!important}
body.lw-skin .q-table tbody tr.action-completed{background:#55b80033!important}
body.lw-skin .q-table--dense tbody td{height:30px}
body.lw-skin .q-table tbody td .q-checkbox__inner{font-size:34px}

/* status colours in tables & lists */
body.lw-skin .text-green,body.lw-skin .text-positive{color:var(--lw-green)!important}
body.lw-skin .text-red,body.lw-skin .text-negative{color:var(--lw-red)!important}
body.lw-skin .text-warning,body.lw-skin .text-yellow-8{color:var(--lw-yellow)!important}
body.lw-skin .text-orange{color:var(--lw-orange)!important}
body.lw-skin .bg-green,body.lw-skin .bg-positive{background:var(--lw-green)!important}
body.lw-skin .bg-red,body.lw-skin .bg-negative{background:var(--lw-red)!important}
body.lw-skin .bg-warning{background:var(--lw-yellow)!important}

/* ======================= Buttons ======================= */
body.lw-skin .q-btn{letter-spacing:.2px}
body.lw-skin .q-btn--standard,
body.lw-skin .q-btn--unelevated,
body.lw-skin .q-btn--push{border-radius:3px;font-weight:700;text-transform:uppercase;font-size:12px;box-shadow:none}
body.lw-skin .q-btn--standard:before,body.lw-skin .q-btn--push:before{box-shadow:none}
body.lw-skin .q-btn--outline{border-radius:3px;font-weight:700;text-transform:uppercase;font-size:12px}
body.lw-skin .q-btn--round,body.lw-skin .q-btn--fab,body.lw-skin .q-btn--fab-mini{border-radius:50%}
/* grey "secondary" buttons like the mockup's Reset Filter */
body.lw-skin .q-btn.bg-grey,body.lw-skin .q-btn.bg-grey-5,body.lw-skin .q-btn.bg-secondary{
  background:#dce4e8!important;color:#43515a!important;
}
body.lw-skin.body--dark .q-btn.bg-grey,body.lw-skin.body--dark .q-btn.bg-grey-5,body.lw-skin.body--dark .q-btn.bg-secondary{
  background:#2e3337!important;color:#d4dadd!important;
}
body.lw-skin .q-btn-group{border-radius:3px;box-shadow:none}
body.lw-skin .q-btn-dropdown--split .q-btn-dropdown__arrow-container{border-left:1px solid #ffffff40!important}

/* ======================= Form fields ======================= */
body.lw-skin .q-field--outlined .q-field__control{border-radius:3px;background:var(--lw-surface)}
body.lw-skin .q-field--outlined .q-field__control:before{border-color:var(--lw-line)}
body.lw-skin .q-field--outlined:hover .q-field__control:before{border-color:var(--lw-muted)}
body.lw-skin .q-field--filled .q-field__control{border-radius:3px 3px 0 0;background:var(--lw-bar)}
body.lw-skin .q-field__label{color:var(--lw-muted)}
body.lw-skin .q-field--focused .q-field__label{color:var(--q-primary)}
body.lw-skin .q-field__native,body.lw-skin .q-field__input{color:var(--lw-text)}
body.lw-skin .q-checkbox__bg{border-radius:2px}
body.lw-skin .q-toggle__inner--truthy{color:var(--lw-green)}
body.lw-skin .q-header .q-toggle__inner--truthy{color:var(--lw-purple-hi)}

/* ======================= Cards & dialogs ======================= */
body.lw-skin .q-card{background:var(--lw-surface);color:var(--lw-text);border-radius:3px;box-shadow:var(--lw-shadow)}
body.lw-skin .q-dialog .q-card,
body.lw-skin .q-dialog-plugin{border:1px solid var(--lw-line);box-shadow:0 10px 30px #0000004d!important;border-radius:3px}
/* dialog title bars: black with purple accent */
body.lw-skin .q-dialog .q-card>.q-bar:first-child,
body.lw-skin .q-dialog .q-card>.q-card__section:first-child>.q-bar:first-child{
  background:var(--lw-black)!important;color:#fff!important;height:42px;font-size:15px;
  text-transform:uppercase;letter-spacing:.3px;box-shadow:inset 4px 0 var(--lw-purple-hi);border-radius:3px 3px 0 0;
}
body.lw-skin .q-dialog .q-card>.q-bar:first-child .q-btn{color:#dfe3e6!important}
body.lw-skin .q-dialog .q-card>.q-card__section:first-child:has(>.text-h6){
  background:var(--lw-black);color:#fff;box-shadow:inset 4px 0 var(--lw-purple-hi);padding:10px 16px;
}
body.lw-skin .q-dialog .q-card>.q-card__section:first-child>.text-h6{font-size:16px;text-transform:uppercase;letter-spacing:.3px}
body.lw-skin .q-dialog .q-card__actions{background:var(--lw-bar);border-top:1px solid var(--lw-line);padding:8px 12px}
body.lw-skin .q-card .bg-white.text-primary,
body.lw-skin .q-card .text-primary.bg-white{background:var(--lw-surface)!important}
body.lw-skin .q-separator{background:var(--lw-line)}
body.lw-skin .q-expansion-item__container>.q-item{background:var(--lw-bar);border-bottom:1px solid var(--lw-line)}
body.lw-skin .q-stepper{background:var(--lw-surface);box-shadow:none;border:1px solid var(--lw-line);border-radius:3px}

/* ======================= Menus, tooltips, notifications ======================= */
body.lw-skin .q-menu{
  background:var(--lw-surface);color:var(--lw-text);
  border:1px solid var(--lw-line);border-radius:2px;box-shadow:0 6px 16px #0000004d;
}
body.lw-skin .q-menu .q-item{min-height:34px;font-size:13px}
body.lw-skin .q-menu .q-item:hover{background:var(--lw-hover)}
body.lw-skin .q-menu .q-item__label--header{
  background:var(--lw-bar);border-bottom:1px solid var(--lw-line);font-weight:700;color:var(--lw-text-2);
  padding:8px 12px;text-transform:uppercase;font-size:11px;
}
body.lw-skin .q-menu .q-item .q-icon{color:var(--lw-muted)}
body.lw-skin .q-menu .q-item .q-icon.text-primary,body.lw-skin .q-menu .q-item .q-icon[class*="text-"]{color:inherit}
body.lw-skin .q-tooltip{background:var(--lw-black);color:#eef1f3;font-size:12px;border-radius:2px;border-left:3px solid var(--lw-purple-hi)}
body.lw-skin .q-notification{border-radius:3px;font-family:Arial,Helvetica,sans-serif}
body.lw-skin .q-badge{border-radius:3px;font-weight:700}
body.lw-skin .q-chip{border-radius:3px}
body.lw-skin .q-banner{border-radius:0}

/* ======================= Lists ======================= */
body.lw-skin .q-list--bordered{border-color:var(--lw-line)}
body.lw-skin .q-item__label--caption{color:var(--lw-muted)}
body.lw-skin .q-item.q-router-link--active,body.lw-skin .q-item--active{color:var(--q-primary)}

/* ======================= Login page ======================= */
body.lw-skin .bg-image{background:radial-gradient(circle at 20% 0%,#3a0a5e 0%,#151719 55%,#0c0d0e 100%)!important}
body.lw-skin .bg-image .q-card{border-top:4px solid var(--lw-purple);border-radius:3px}

/* ======================= Scrollbars ======================= */
body.lw-skin *{scrollbar-width:thin;scrollbar-color:#9aa5ab55 transparent}
body.lw-skin ::-webkit-scrollbar{width:10px;height:10px}
body.lw-skin ::-webkit-scrollbar-thumb{background:#9aa5ab66;border-radius:6px;border:2px solid transparent;background-clip:content-box}
body.lw-skin ::-webkit-scrollbar-track{background:transparent}

/* ======================= Small screens ======================= */
@media (max-width:1200px){
  body.lw-skin .q-header:not(.q-layout-container .q-header)>.q-toolbar::before{padding:0 14px;font-size:16px}
  body.lw-skin .q-header .q-toolbar__title{font-size:17px;padding-left:12px}
}