/* Outshined RMM theme for the Tactical RMM web UI.
   Follows outshined.io: charcoal surfaces, mint accent, Archivo body text,
   Red Hat Display headings, pill buttons, 14px rounded cards.
   Light and dark mode both follow the user's own Tactical RMM dark-mode setting. */

@font-face {
  font-family: "Archivo";
  src: url(/outshined/fonts/archivo.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Display";
  src: url(/outshined/fonts/redhatdisplay.woff2) format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

/* ---------- palette ---------- */
:root {
  --os-mint: #43ffae;
  --os-mint-ink: #0b0b0b;          /* text on mint */
  --os-charcoal: #151515;

  /* light mode */
  --os-page: #f5f6f8;
  --os-surface: #ffffff;
  --os-surface-2: #eef0f3;
  --os-border: #e2e4e9;
  --os-text: #171717;
  --os-muted: #5b5f6b;
  --os-accent: #0b8f5f;            /* mint is too pale for text on white */
  --os-hover: rgba(11, 143, 95, 0.07);
  --os-selected: rgba(11, 143, 95, 0.14);

  --q-primary: #0b8f5f;
  --q-secondary: #3a3f4b;
  --q-positive: #12a150;
  --q-negative: #d92d3a;
  --q-warning: #f0a92b;
  --q-info: #2f8fd8;
}

body.body--dark {
  --os-page: #151515;
  --os-surface: #1f1f1f;
  --os-surface-2: #262626;
  --os-border: #2e2e2e;
  --os-text: #d6d6e0;
  --os-muted: #9a9aa8;
  --os-accent: #43ffae;
  --os-hover: rgba(67, 255, 174, 0.06);
  --os-selected: rgba(67, 255, 174, 0.13);

  --q-primary: #43ffae;
  --q-positive: #3ddc84;
  --q-negative: #ff5c66;
  --q-dark: #1f1f1f;
  --q-dark-page: #151515;
}

/* ---------- type ---------- */
body,
.q-field,
.q-btn,
.q-tab__label,
.q-table,
.q-item {
  font-family: "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
}
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
.q-toolbar__title,
.q-dialog .q-card__section .text-h6 {
  font-family: "Red Hat Display", "Archivo", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- page and surfaces ---------- */
body {
  background: var(--os-page);
  color: var(--os-text);
}
body.body--dark .q-dark,
body.body--dark .bg-dark {
  background: var(--os-surface) !important;
}
.q-card,
.q-menu,
.q-dialog .q-card {
  border-radius: 14px !important;
}
.q-menu {
  border: 1px solid var(--os-border);
}
.q-dialog .q-bar {
  border-radius: 14px 14px 0 0;
}
.q-separator {
  background: var(--os-border) !important;
}

/* ---------- header: charcoal brand bar in both modes ---------- */
.q-layout:not(.q-layout--containerized) > .q-header.bg-grey-9,
.q-layout:not(.q-layout--containerized) > .q-header {
  background: var(--os-charcoal) !important;
  border-bottom: 1px solid #262626;
}
.q-layout:not(.q-layout--containerized) > .q-header .q-toolbar__title {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
}
.q-layout:not(.q-layout--containerized) > .q-header .q-toolbar__title::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 10px;
  flex: none;
  background: url(/outshined/outshined-logo.png) center/contain no-repeat;
}
.q-layout:not(.q-layout--containerized) > .q-header .q-toolbar__title > span {
  color: #8a8a96;
  font-family: "Archivo", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  margin-left: 6px;
}
/* File / View / Agents ... menu bar */
.q-pb-sm > .q-bar:first-child {
  background: #1b1b1b !important;
  color: #e8e8ee !important;
  border-bottom: 1px solid #262626;
}
.q-pb-sm > .q-bar:first-child .q-btn {
  color: #e8e8ee;
}
.q-pb-sm > .q-bar:first-child .q-btn:hover {
  color: var(--os-mint);
}

/* ---------- buttons ---------- */
.q-btn--standard:not(.q-btn--round):not(.q-btn--dense),
.q-btn--unelevated:not(.q-btn--round):not(.q-btn--dense),
.q-btn--push:not(.q-btn--round):not(.q-btn--dense),
.q-btn--outline:not(.q-btn--round):not(.q-btn--dense) {
  border-radius: 999px !important;
  padding-left: 18px;
  padding-right: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* mint fills need dark text in dark mode */
body.body--dark .bg-primary,
body.body--dark .bg-primary.text-white,
body.body--dark .q-btn.bg-primary .q-icon {
  color: var(--os-mint-ink) !important;
}

/* ---------- inputs ---------- */
.q-field--outlined .q-field__control,
.q-field--filled .q-field__control {
  border-radius: 10px !important;
}
.q-field--focused .q-field__control:after {
  border-color: var(--os-accent) !important;
}

/* ---------- tabs ---------- */
.q-tab--active,
.q-tab--active .q-tab__label {
  color: var(--os-accent) !important;
}
.q-tab__indicator {
  background: var(--os-accent) !important;
  height: 2px;
  border-radius: 2px;
}

/* ---------- tables ---------- */
.q-table thead th {
  color: var(--os-muted);
  font-weight: 600;
  text-transform: none;
}
.q-table tbody tr:hover > td {
  background: var(--os-hover);
}
.q-table tbody tr.highlight > td,
.q-table tbody tr.highlight-dark > td,
.highlight,
.highlight-dark {
  background: var(--os-selected) !important;
}
.q-table tbody tr.highlight > td:first-child,
.q-table tbody tr.highlight-dark > td:first-child {
  box-shadow: inset 3px 0 0 var(--os-accent);
}
.q-table--dark,
.q-table__card--dark {
  background: transparent;
}

/* ---------- tree (clients / sites) ---------- */
.q-tree__node--selected .q-tree__node-header-content {
  color: var(--os-accent) !important;
  font-weight: 600;
}
.q-tree__node-header:hover {
  background: var(--os-hover);
  border-radius: 8px;
}

/* ---------- scrollbars ---------- */
body.body--dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.body--dark ::-webkit-scrollbar-track { background: var(--os-page); }
body.body--dark ::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
  border: 2px solid var(--os-page);
}
body.body--dark ::-webkit-scrollbar-thumb:hover { background: #444; }

/* ---------- login page: always the outshined.io hero look ---------- */
.q-page.bg-image {
  background:
    radial-gradient(ellipse 60% 45% at 50% 30%, rgba(67, 255, 174, 0.13), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(67, 255, 174, 0.05), transparent 70%),
    #151515 !important;
}
.q-page.bg-image .q-card {
  background: #1f1f1f !important;
  color: #e8e8ee;
  border: 1px solid #2b2b2b;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important;
  min-width: 340px;
}
.q-page.bg-image .q-card .text-center.q-pt-lg > .text-h4 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  color: #fff;
}
/* <Outshined RMM/> wordmark, like the site's <Outshined.IO/> */
.q-page.bg-image .q-card .text-center.q-pt-lg > .text-h4::before {
  content: "<";
  color: #8a8a96;
  font-weight: 500;
}
.q-page.bg-image .q-card .text-center.q-pt-lg > .text-h4::after {
  content: "/>";
  color: #8a8a96;
  font-weight: 500;
}
.q-page.bg-image .q-card .bg-primary {
  background: var(--os-mint) !important;
  color: var(--os-mint-ink) !important;
}
.q-page.bg-image .q-card .q-field__control {
  background: #262626 !important;
}

/* =====================================================================
   Icons: one modern set (Material Symbols Rounded) everywhere.
   Classic Material Icons switch by font; Font Awesome glyphs are remapped
   by name. Brand/language logos (Windows, PowerShell, Python...) stay as-is.
   ===================================================================== */
@font-face {
  font-family: "Material Symbols Rounded";
  src: url(/outshined/fonts/materialsymbolsrounded.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.material-icons {
  font-family: "Material Symbols Rounded" !important;
  font-weight: 400 !important;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

.q-icon.fas::before,
.q-icon.far::before {
  font-family: "Material Symbols Rounded" !important;
  font-weight: 400 !important;
  font-style: normal;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  font-synthesis: none;
  font-size: 1.15em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
}
.q-icon.far.fa-clock::before          { content: "schedule" !important; }
.q-icon.far.fa-folder-open::before    { content: "folder_open" !important; }
.q-icon.far.fa-hdd::before            { content: "hard_drive" !important; }
.q-icon.far.fa-sticky-note::before    { content: "sticky_note_2" !important; }
.q-icon.fas.fa-ban::before            { content: "block" !important; }
.q-icon.fas.fa-barcode::before        { content: "barcode" !important; }
.q-icon.fas.fa-chart-area::before     { content: "area_chart" !important; }
.q-icon.fas.fa-check::before          { content: "check" !important; }
.q-icon.fas.fa-check-circle::before   { content: "check_circle" !important; }
.q-icon.fas.fa-check-double::before   { content: "done_all" !important; }
.q-icon.fas.fa-clipboard-list::before { content: "assignment" !important; }
.q-icon.fas.fa-cogs::before           { content: "settings" !important; }
.q-icon.fas.fa-desktop::before        { content: "desktop_windows" !important; }
.q-icon.fas.fa-edit::before           { content: "edit" !important; }
.q-icon.fas.fa-exclamation::before    { content: "priority_high" !important; }
.q-icon.fas.fa-first-aid::before      { content: "medical_services" !important; }
.q-icon.fas.fa-globe-americas::before { content: "public" !important; }
.q-icon.fas.fa-home::before           { content: "home" !important; }
.q-icon.fas.fa-info-circle::before    { content: "info" !important; }
.q-icon.fas.fa-memory::before         { content: "memory" !important; }
.q-icon.fas.fa-microchip::before      { content: "developer_board" !important; }
.q-icon.fas.fa-network-wired::before  { content: "lan" !important; }
.q-icon.fas.fa-plus::before           { content: "add" !important; }
.q-icon.fas.fa-power-off::before      { content: "power_settings_new" !important; }
.q-icon.fas.fa-server::before         { content: "dns" !important; }
.q-icon.fas.fa-signal::before         { content: "signal_cellular_alt" !important; }
.q-icon.fas.fa-tasks::before          { content: "checklist" !important; }
.q-icon.fas.fa-terminal::before       { content: "terminal" !important; }
.q-icon.fas.fa-trash-alt::before      { content: "delete" !important; }
.q-icon.fas.fa-tv::before             { content: "tv" !important; }
.q-icon.fas.fa-user::before           { content: "person" !important; }

/* ---------- agent status: colored dots instead of signal bars ---------- */
.q-table tbody td .q-icon.fa-signal::before {
  content: "" !important;
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
  vertical-align: middle;
}
.q-table tbody td .q-icon.fa-signal.text-positive::before {
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent),
              0 0 10px color-mix(in srgb, currentColor 45%, transparent);
}
/* OS logos in the agent table: quieter than the accent */
.q-table tbody td .q-icon.mdi-microsoft-windows,
.q-table tbody td .q-icon.mdi-linux,
.q-table tbody td .q-icon.mdi-apple,
.q-table tbody td .q-icon.fab.fa-windows {
  color: var(--os-muted) !important;
}

/* =====================================================================
   Polish
   ===================================================================== */
/* smooth hover/focus everywhere */
.q-btn, .q-item, .q-tab, .q-tree__node-header,
.q-table tbody tr > td, .q-field__control {
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* header icon buttons: soft round buttons with a mint hover */
.q-layout:not(.q-layout--containerized) > .q-header .q-toolbar .q-btn--round,
.q-layout:not(.q-layout--containerized) > .q-header .q-toolbar .q-btn--flat {
  border-radius: 10px !important;
}
.q-layout:not(.q-layout--containerized) > .q-header .q-toolbar .q-btn:hover {
  background: rgba(67, 255, 174, 0.10);
  color: var(--os-mint);
}
.q-layout:not(.q-layout--containerized) > .q-header .q-badge {
  background: var(--os-mint) !important;
  color: var(--os-mint-ink) !important;
  font-weight: 700;
}

/* agent table: a little more breathing room */
.q-table--dense tbody td,
.q-table tbody td {
  height: 38px;
}
.q-table thead tr th {
  border-bottom: 1px solid var(--os-border) !important;
}
.q-table tbody td {
  border-color: var(--os-border) !important;
}

/* dialogs: dim and blur what's behind */
.q-dialog__backdrop {
  background: rgba(10, 10, 12, 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.q-dialog .q-card {
  border: 1px solid var(--os-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35) !important;
}

/* tooltips and menus match the cards */
.q-tooltip {
  background: #262626 !important;
  color: #e8e8ee !important;
  border: 1px solid #333;
  border-radius: 8px !important;
  font-size: 0.78rem !important;
  padding: 6px 10px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.q-menu .q-item {
  border-radius: 8px;
  margin: 2px 6px;
}
.q-menu .q-item:hover,
.q-menu .q-item.q-manual-focusable--focused {
  background: var(--os-hover);
}

/* progress bars (disk usage etc.): rounded, accent fill */
.q-linear-progress {
  border-radius: 999px;
  overflow: hidden;
}
.q-linear-progress__track {
  opacity: 1 !important;
  background: var(--os-surface-2) !important;
}
.q-linear-progress__model {
  border-radius: 999px;
}

/* chips and badges */
.q-chip {
  border-radius: 999px !important;
  font-weight: 500;
}

/* focus ring for keyboard users */
.q-btn:focus-visible,
.q-tab:focus-visible {
  outline: 2px solid var(--os-accent);
  outline-offset: 2px;
}

/* =====================================================================
   Layout polish: client tree, tab bars, summary panel, search
   ===================================================================== */

/* client tree: enough room for names, no wrapping */
.q-splitter--vertical > .q-splitter__before:has(.q-tree) {
  min-width: 190px !important;
}
.q-tree__node-header {
  border-radius: 8px;
  padding: 4px 6px;
}
.q-tree__node-header-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.q-tree__node--selected {
  background: var(--os-selected) !important;
}

/* tab bars (Servers / Workstations / Mixed, and Summary / Checks / ...):
   segmented pills instead of underlines */
.q-tabs .q-tab {
  border-radius: 999px;
  margin: 4px 2px;
  min-height: 34px;
  padding: 0 14px;
  text-transform: none;
}
.q-tabs .q-tab__label {
  font-weight: 600;
  letter-spacing: 0;
}
.q-tabs .q-tab:hover {
  background: var(--os-hover);
}
.q-tabs .q-tab--active {
  background: var(--os-selected);
}
.q-tabs .q-tab__indicator {
  display: none;
}
.q-tabs .q-tab .q-focus-helper {
  border-radius: 999px;
}

/* search: pill field */
.q-field--outlined.q-field--dense .q-field__control {
  border-radius: 999px !important;
}
.q-field--outlined.q-field--dense .q-field__control:before {
  border-color: var(--os-border);
}

/* agent summary: each section (hardware, checks, disks, ...) as a card */
.q-tab-panel .q-pa-sm > .row > div:has(> .text-subtitle2) {
  background: var(--os-surface);
  border: 1px solid var(--os-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 8px 6px 0;
}
body:not(.body--dark) .q-tab-panel .q-pa-sm > .row > div:has(> .text-subtitle2) {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.q-tab-panel .q-pa-sm > .row > div > .text-subtitle2.text-bold {
  display: block;
  margin-bottom: 10px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--os-muted);
}
.q-tab-panel .q-pa-sm > .q-separator {
  display: none;
}
/* summary header line (hostname, OS, Take Control, Actions) */
.q-tab-panel .q-pa-sm > .q-bar {
  padding: 4px 8px;
  border-radius: 12px;
}