/* ============================================================================
   SQL Sourcing — Application Theme (Global Blue brand)
   Brand: globalblue.com — Noto Sans, primary #001ec8, navy #151b49, red #cc3848
   ----------------------------------------------------------------------------
   Load order: bootstrap.css → ...vendor... → z-base-style.css → app-theme.css
   This file is loaded LAST so it re-skins Bootstrap 3 primitives app-wide and
   defines the new application shell. No JavaScript/behaviour is changed.
   ============================================================================ */

/* ---------- Self-hosted font (Noto Sans, variable 400–700) ---------- */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/noto-sans/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/noto-sans/noto-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ---------- */
:root {
  --c-bg:            #f6f6f6;
  --c-surface:       #ffffff;
  --c-surface-2:     #fafafa;
  --c-border:        #e6e7ee;
  --c-border-strong: #cdd0dd;

  --c-text:          #1c2140;
  --c-text-2:        #424242;
  --c-text-3:        #8b8fa3;

  --c-primary:       #001ec8;
  --c-primary-600:   #0018a6;
  --c-primary-700:   #151b49;
  --c-primary-050:   #eef1ff;
  --c-primary-100:   #d9defb;
  --c-secondary:     #647de1;

  --c-success:#1a8a52;  --c-success-bg:#e9f6ee;  --c-success-bd:#bfe6cd;
  --c-warning:#b26a00;  --c-warning-bg:#fbf1dd;  --c-warning-bd:#f0d9a8;
  --c-danger:#cc3848;   --c-danger-bg:#fbebed;   --c-danger-bd:#f2c5cb;
  --c-info:#001ec8;     --c-info-bg:#e9ecfb;     --c-info-bd:#c9d0f5;

  --c-side-bg:#151b49;
  --c-side-bg-2:#1e2661;
  --c-side-text:#a7adcf;
  --c-side-text-active:#ffffff;
  --c-side-active:#26306e;
  --c-side-accent:#647de1;

  --font: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:5px; --r-md:8px; --r-lg:12px;
  --sh-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sh-2:0 2px 6px rgba(16,24,40,.08), 0 6px 16px rgba(16,24,40,.08);
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--font) !important;
  font-size: var(--fs-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--c-text);
  font-weight: 600;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
a { color: var(--c-primary); cursor: pointer; }
a:hover, a:focus { color: var(--c-primary-700); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-surface-2); }
::-webkit-scrollbar-thumb { background: #cfd3e0; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #b5bacc; }

/* ============================================================================
   APPLICATION SHELL  (used by home.html)
   ============================================================================ */
.gb-app { display: flex; min-height: 100vh; align-items: stretch; }

/* Sidebar */
.gb-side {
  width: 240px; flex: 0 0 240px; background: var(--c-side-bg); color: var(--c-side-text);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width .18s ease, flex-basis .18s ease;
}
.gb-side-brand { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 56px; }
.gb-side-brand img { height: 26px; width: auto; }
.gb-side-brand .gb-brand-text { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; white-space: nowrap; }
.gb-side-brand .gb-brand-name { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.gb-side-brand .gb-brand-sub { color: var(--c-side-text); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.gb-side-nav { padding: 10px; overflow-x: hidden; overflow-y: auto; flex: 1; }
.gb-side-nav ul { list-style: none; margin: 0; padding: 0; }
.gb-side-nav .gb-nav-group { color: #7b83a8; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 14px 12px 6px; white-space: nowrap; }
.gb-side-nav li button, .gb-side-nav li > a {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-radius: 7px; background: transparent;
  color: var(--c-side-text); font-family: var(--font); font-size: var(--fs-md); font-weight: 500;
  margin-bottom: 2px; cursor: pointer; white-space: nowrap;
}
.gb-side-nav li button .gb-ico, .gb-side-nav li > a .gb-ico { width: 17px; height: 17px; flex: 0 0 17px; opacity: .9; }
.gb-side-nav li button:hover, .gb-side-nav li > a:hover { background: var(--c-side-bg-2); color: #fff; text-decoration: none; }
.gb-side-nav li button.active, .gb-side-nav li > a.active {
  background: var(--c-side-active); color: var(--c-side-text-active); box-shadow: inset 3px 0 0 var(--c-side-accent);
}
.gb-side-nav li button:disabled, .gb-side-nav li button[disabled] { color: #5a6088; cursor: not-allowed; }
.gb-side-sub { padding-left: 14px; }
.gb-side-sub li button { font-size: var(--fs-sm); padding: 7px 12px; }
.gb-side-foot { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #6a7099; white-space: nowrap; }

/* Collapsed sidebar (hamburger toggles .gb-collapsed on .gb-app) */
.gb-app.gb-collapsed .gb-side { width: 62px; flex-basis: 62px; }
.gb-app.gb-collapsed .gb-brand-text,
.gb-app.gb-collapsed .gb-nav-label,
.gb-app.gb-collapsed .gb-nav-group,
.gb-app.gb-collapsed .gb-side-foot,
.gb-app.gb-collapsed .gb-side-sub { display: none; }
.gb-app.gb-collapsed .gb-side-nav li button,
.gb-app.gb-collapsed .gb-side-nav li > a { justify-content: center; }

/* Main column */
.gb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gb-topbar {
  min-height: 56px; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; gap: 14px; padding: 0 20px; position: sticky; top: 0; z-index: 30;
}
.gb-topbar .gb-hamburger {
  border: 0; background: transparent; color: var(--c-text-2); width: 34px; height: 34px;
  border-radius: 7px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.gb-topbar .gb-hamburger:hover { background: var(--c-surface-2); color: var(--c-text); }
.gb-topbar .gb-crumbs { color: var(--c-text-3); font-size: var(--fs-sm); }
.gb-topbar .gb-crumbs b { color: var(--c-text); font-weight: 600; }
.gb-topbar .gb-spacer { flex: 1; }
.gb-topbar .gb-tb-link {
  display: flex; align-items: center; gap: 7px; color: var(--c-text-2); font-size: var(--fs-md);
  padding: 7px 10px; border-radius: 7px; cursor: pointer; background: transparent; border: 0; font-family: var(--font);
}
.gb-topbar .gb-tb-link:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.gb-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary-100); color: var(--c-primary-700); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.gb-user-menu { position: relative; }
.gb-user-menu .dropdown-menu { right: 0; left: auto; }

.gb-content { padding: 20px 24px; width: 100%; max-width: 1560px; }

/* Page header pattern */
.gb-page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.gb-page-head h1 { font-size: var(--fs-2xl); font-weight: 600; margin: 0; }
.gb-page-head p { margin: 3px 0 0; color: var(--c-text-2); font-size: var(--fs-md); }
.gb-page-head .gb-spacer { flex: 1; }

/* ============================================================================
   BOOTSTRAP 3 RE-SKIN  (applies to all existing templates)
   ============================================================================ */

/* Buttons */
.btn {
  font-family: var(--font); font-size: var(--fs-md); font-weight: 600;
  border-radius: var(--r-sm) !important; border: 1px solid transparent; padding: 8px 14px;
  transition: background .12s, border-color .12s, box-shadow .12s; text-transform: none;
}
/* Glyphicons must keep their icon font when combined with .btn (grid action cells). */
.btn.glyphicon,
.glyphicon {
  font-family: 'Glyphicons Halflings' !important;
  font-weight: normal;
  font-style: normal;
}
.btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.btn:focus:not(:focus-visible) { outline: none; }
.btn-primary {
  background: var(--c-primary) !important; background-image: none !important;
  color: #fff !important; border-color: var(--c-primary) !important; text-transform: none !important;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background: var(--c-primary-600) !important; border-color: var(--c-primary-600) !important;
}
.btn-primary[disabled], .btn-primary:disabled {
  background: #9aa3d6 !important; border-color: #9aa3d6 !important; background-image: none !important; opacity: 1;
}
.btn-default {
  background: var(--c-surface) !important; color: var(--c-text) !important;
  border-color: var(--c-border-strong) !important; border-radius: var(--r-sm);
}
.btn-default:hover, .btn-default:active, .btn-default:focus {
  background: var(--c-surface-2) !important; color: var(--c-text) !important; border-color: var(--c-text-3) !important;
}
.btn-danger { background: var(--c-danger) !important; border-color: var(--c-danger) !important; color: #fff !important; }
.btn-danger:hover, .btn-danger:active, .btn-danger:focus { filter: brightness(.94); }
.btn-success { background: var(--c-success) !important; border-color: var(--c-success) !important; color: #fff !important; }
.btn-info { background: var(--c-secondary) !important; border-color: var(--c-secondary) !important; color: #fff !important; }
.btn-link { color: var(--c-primary); font-weight: 500; }
.btn-sm, .btn-xs { border-radius: var(--r-sm) !important; }

/* Forms */
.form-control {
  font-family: var(--font); font-size: var(--fs-md); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); box-shadow: none;
  height: auto; padding: 8px 11px;
}
.form-control:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); }
.form-control::placeholder { color: var(--c-text-3); }
label, .control-label { font-weight: 600; color: var(--c-text-2); font-size: var(--fs-sm); }
.input-group-addon { background: var(--c-surface-2); border-color: var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-text-2); }

/* Panels → cards */
.panel {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-1); margin-bottom: 18px;
}
.panel-heading {
  background: var(--c-surface) !important; border-bottom: 1px solid var(--c-border);
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important; padding: 13px 18px;
  color: var(--c-text) !important; font-weight: 600; font-size: var(--fs-lg);
}
.panel-title { font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); }
.panel-body { padding: 16px 18px; }
.panel-default > .panel-heading { color: var(--c-text) !important; }
/* Coloured panels: keep a subtle accent bar instead of heavy fills */
.panel-success > .panel-heading { border-top: 3px solid var(--c-success); }
.panel-warning > .panel-heading { border-top: 3px solid var(--c-warning); }
.panel-danger  > .panel-heading { border-top: 3px solid var(--c-danger); }
.panel-info    > .panel-heading { border-top: 3px solid var(--c-primary); }
.panel-success, .panel-warning, .panel-danger, .panel-info, .panel-primary { border-color: var(--c-border); }
.well { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

/* Tables */
.table { font-size: var(--fs-md); color: var(--c-text); margin-bottom: 0; }
.table > thead > tr > th {
  text-transform: uppercase; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .6px;
  color: var(--c-text-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border) !important;
  padding: 9px 14px; vertical-align: middle; white-space: nowrap;
}
.table > tbody > tr > td { padding: 10px 14px; border-top: 1px solid var(--c-border); vertical-align: middle; }
.table-hover > tbody > tr:hover { background: var(--c-primary-050); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--c-surface-2); }
.table-responsive { border: 0; }

/* Dashboard logged-errors table */
.gb-errors-table { table-layout: fixed; width: 100%; }
.gb-errors-table .gb-errors-col-task { width: 18%; }
.gb-errors-table .gb-errors-col-table { width: 14%; }
.gb-errors-table .gb-errors-col-time { width: 14%; }
.gb-errors-table .gb-errors-col-detail { width: 54%; }
.gb-errors-table > tbody > tr > td { vertical-align: top; }
.gb-errors-table .gb-errors-detail {
  max-height: 140px;
  overflow-x: hidden;
  overflow-y: scroll;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  color: var(--c-text-2);
  padding: 2px;
}

/* Tabs (uib-tabset / nav-tabs) */
.nav-tabs { border-bottom: 1px solid var(--c-border); }
.nav-tabs > li > a {
  border: 0; border-bottom: 2px solid transparent; margin-right: 2px; color: var(--c-text-2);
  font-weight: 600; border-radius: 0; padding: 9px 15px;
}
.nav-tabs > li > a:hover { background: var(--c-surface-2); border-color: transparent; border-bottom-color: var(--c-border-strong); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--c-primary); background: transparent; border: 0; border-bottom: 2px solid var(--c-primary);
}

/* Labels → status pills */
.label {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px;
  border-radius: 999px; border: 1px solid transparent; letter-spacing: .2px; line-height: 1.4;
}
.label-success, .label-success.label { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success-bd); }
.label-danger,  .label-danger.label  { color: var(--c-danger);  background: var(--c-danger-bg);  border-color: var(--c-danger-bd); }
.label-warning, .label-warning.label { color: var(--c-warning); background: var(--c-warning-bg); border-color: var(--c-warning-bd); }
.label-info,    .label-info.label    { color: var(--c-info);    background: var(--c-info-bg);    border-color: var(--c-info-bd); }
.label-default, .label-default.label { color: var(--c-text-2);  background: var(--c-surface-2);  border-color: var(--c-border); }

/* Reusable status pill (new markup) */
.gb-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; letter-spacing: .2px; }
.gb-pill .gb-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gb-pill.is-success { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success-bd); }
.gb-pill.is-danger  { color: var(--c-danger);  background: var(--c-danger-bg);  border-color: var(--c-danger-bd); }
.gb-pill.is-warning { color: var(--c-warning); background: var(--c-warning-bg); border-color: var(--c-warning-bd); }
.gb-pill.is-info    { color: var(--c-info);    background: var(--c-info-bg);    border-color: var(--c-info-bd); }
.gb-pill.is-neutral { color: var(--c-text-2);  background: var(--c-surface-2);  border-color: var(--c-border); }

/* Stat cards (new markup, used on dashboard) */
.gb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.gb-stat { position: relative; overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 16px 18px; }
.gb-stat .gb-stat-k { font-size: var(--fs-sm); color: var(--c-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.gb-stat .gb-stat-v { font-size: 30px; font-weight: 700; color: var(--c-text); margin-top: 6px; line-height: 1; font-variant-numeric: tabular-nums; }
.gb-stat .gb-stat-m { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: 6px; }
.gb-stat .gb-stat-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.gb-stat.is-primary .gb-stat-strip { background: var(--c-primary); }
.gb-stat.is-success .gb-stat-strip { background: var(--c-success); }
.gb-stat.is-warning .gb-stat-strip { background: var(--c-warning); }
.gb-stat.is-danger  .gb-stat-strip { background: var(--c-danger); }
@media (max-width: 1100px) { .gb-stats { grid-template-columns: repeat(2, 1fr); } }

/* Progress bar (inline, for running tasks) */
.gb-bar { height: 7px; min-width: 90px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 4px; overflow: hidden; }
.gb-bar > span { display: block; height: 100%; background: var(--c-primary); }

/* Modals */
.modal-content { border: 0; border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--c-border); padding: 16px 20px; }
.modal-header .modal-title { font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--c-border); padding: 14px 20px; }

/* ----- Legacy "z-model" modals (Create Task, Reconfigure, etc.) reskin ----- */
/* These modals render outside .gb-content, so tokens are applied globally here. */
.z-model-header {
  background: var(--c-surface); color: var(--c-text);
  border-bottom: 1px solid var(--c-border); padding: 16px 22px;
  display: flex; align-items: center; gap: 12px;
}
.z-model-header .modal-title { flex: 1; font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); }
.z-model-header .glyphicon-remove { color: var(--c-text-3); font-size: 15px; padding: 4px; border-radius: 6px; transition: background .12s, color .12s; }
.z-model-header .glyphicon-remove:hover { color: var(--c-text); background: var(--c-surface-2); }

.z-modal-body-newtask { padding: 20px 28px; overflow-y: auto; overflow-x: hidden; }
.z-model-heading { font-size: var(--fs-xl); font-weight: 600; color: var(--c-text); border-bottom: 1px solid var(--c-border); padding-bottom: 12px; margin: 0 0 18px; }
.z-form-label h3, .z-vertical-spacer > h3 { font-size: var(--fs-md); font-weight: 600; color: var(--c-text-2); }
.z-vertical-spacer { margin: 16px 0; }

.z-model-footer { background: var(--c-surface-2); border-top: 1px solid var(--c-border); }
.z-model-footer label { font-weight: 500; color: var(--c-text-2); font-size: var(--fs-md); margin: 0; }
.z-model-footer label input[type="checkbox"] { margin-right: 6px; vertical-align: -2px; }

/* Compact, centered confirmation dialog (windowClass: 'gb-modal-sm') */
.gb-modal-sm .modal-dialog { width: 380px; max-width: 92%; }
.gb-modal-sm .modal-content { border-radius: var(--r-lg); overflow: hidden; }

/* Header — borderless, just a subtle title + close */
.gb-modal-sm .z-model-header { background: var(--c-surface); border-bottom: 0; padding: 16px 18px 0; }
.gb-modal-sm .z-model-header .modal-title { font-size: var(--fs-md); font-weight: 600; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .5px; }
.gb-modal-sm .z-model-header .glyphicon-remove { font-size: 13px; }

/* Body — centered icon badge + message */
.gb-modal-sm .z-modal-body { padding: 12px 26px 22px; text-align: center; }
.gb-modal-sm .z-vertical-spacer { margin: 0; }
.gb-modal-sm .z-label-info {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: var(--fs-lg); font-weight: 500; color: var(--c-text); line-height: 1.45;
}
.gb-modal-sm .z-label-info .glyphicon-exclamation-sign {
  color: var(--c-warning) !important; font-size: 30px;
  width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-warning-bg); box-shadow: 0 0 0 6px rgba(178,106,0,.08);
}

/* Footer — two balanced buttons, no float, no underline link */
.gb-modal-sm .z-model-footer { display: flex; gap: 10px; background: var(--c-surface); border-top: 0; padding: 4px 22px 22px; }
.gb-modal-sm .z-model-footer button { flex: 1 1 0; margin: 0 !important; float: none !important; padding: 10px 14px; font-weight: 600; }
.gb-modal-sm .z-model-footer .btn-link {
  border: 1px solid var(--c-border-strong); color: var(--c-text-2); background: var(--c-surface);
  border-radius: var(--r-sm); text-decoration: none;
}
.gb-modal-sm .z-model-footer .btn-link:hover,
.gb-modal-sm .z-model-footer .btn-link:focus { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.z-model-footer .btn + .btn { margin-left: 8px; }

/* Confirmation / decision / yes-no dialog message — icon badge + readable text */
.z-modal-body .z-label-info { display: flex; align-items: center; gap: 14px; margin: 6px 0; font-size: var(--fs-lg); color: var(--c-text); line-height: 1.5; }
.z-modal-body .z-label-info .glyphicon-exclamation-sign {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px;
  color: var(--c-warning) !important; background: var(--c-warning-bg);
}

/* Bootstrap popovers (inline delete / stop / populate confirmations) */
.popover { border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: 0; font-family: var(--font); max-width: 320px; }
.popover-title { background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); font-weight: 600; color: var(--c-text); font-size: var(--fs-md); padding: 10px 14px; border-radius: var(--r-md) var(--r-md) 0 0; }
.popover-content { padding: 14px; color: var(--c-text); font-size: var(--fs-md); }
.popover-content .form-group { margin-bottom: 12px; }
.popover-content .btn { margin: 2px 4px 2px 0; }

/* Date-picker input groups: keep the calendar button flush with the field */
.z-form-label-picker .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.z-form-label-picker button { margin-left: -1px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.datePick-area .date-checkbox input { margin: 0 14px; }

/* "Repeats every" HH:MM:SS boxes — themed number inputs */
.LogRF { align-items: flex-start; gap: 6px; }
.LogRF div input[type="number"] {
  width: 46px; height: 38px; text-align: center; font-size: var(--fs-md); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); padding: 6px 4px;
}
.LogRF div input[type="number"]:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); outline: none; }
.LogRF small { color: var(--c-text-3); font-size: var(--fs-xs); margin-top: 3px; }
.LogRF h3 { align-self: center; margin: 0 6px; }

/* ----- Scheduled execution: frequency / recurrence sub-forms -----
   Each recurrence row keeps the template's inline flow, but is given a fixed
   line-height that matches the field height, so labels, text ("of", "day(s)"),
   number inputs and selects all sit centered on the same line. */
.frequency_pane, .frequency_pane_range { margin-top: 10px; }
.frequency_pane .z-form-label,
.frequency_pane_range .z-form-label { color: var(--c-text-2); font-size: var(--fs-md); line-height: 40px; }
.frequency_pane .z-form-label h3,
.frequency_pane_range .z-form-label h3 { margin: 0; font-weight: 600; }
.frequency_pane .z-form-label input.form-control,
.frequency_pane .z-form-label select.form-control {
  display: inline-block; height: 34px; line-height: 20px; padding: 4px 8px; margin: 0 4px; vertical-align: middle;
}
.frequency_pane .z-form-label input.form-control { width: 60px; text-align: center; }
.frequency_pane .z-form-label select.form-control { width: auto; min-width: 150px; }
/* Weekday chips drop to their own row with tight (non-40px) line spacing */
.frequency_pane .z-form-label > div { line-height: 1.7; margin-top: 6px; }

/* Weekday checkboxes as compact inline chips.
   Selector carries .z-form-label so it out-specifies the row line-height rule. */
.frequency_pane .z-form-label.weekdays {
  display: inline-flex; align-items: center; vertical-align: middle; line-height: 1;
  margin: 0 8px 8px 0 !important; padding: 7px 13px;
  border: 1px solid var(--c-border); border-radius: 20px; background: var(--c-surface-2);
  color: var(--c-text-2); font-weight: 500; cursor: pointer; white-space: nowrap;
}
.frequency_pane .z-form-label.weekdays:hover { border-color: var(--c-border-strong); }
.frequency_pane .z-form-label.weekdays input { margin: 0 7px 0 0; }

/* Daily-frequency "Occurs once at HH:MM AM/PM" row.
   align-items: baseline keeps both time boxes on one line; the HH/(1-12)
   captions hang below without dragging the other items down. */
.task-config-frequency { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 12px 0; }
.task-config-frequency input[type="number"] {
  width: 56px; height: 34px; text-align: center; color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); padding: 4px;
}
.task-config-frequency input[type="number"]:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); outline: none; }
.task-config-frequency label { margin: 0; font-weight: 500; }
.task-config-frequency label input[type="radio"] { margin: 0 5px 0 0; vertical-align: middle; }
.task-config-frequency small { color: var(--c-text-3); font-size: var(--fs-xs); }

/* Pagination */
.pagination > li > a, .pagination > li > span { color: var(--c-primary); border-color: var(--c-border); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > a:focus {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}

/* Dropdown */
.dropdown-menu { border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: 6px; }
.dropdown-menu > li > a { border-radius: var(--r-sm); padding: 8px 12px; color: var(--c-text); font-size: var(--fs-md); }
.dropdown-menu > li > a:hover { background: var(--c-primary-050); color: var(--c-primary-700); }

/* Alerts */
.alert { border-radius: var(--r-md); border: 1px solid transparent; }
.alert-success { background: var(--c-success-bg); border-color: var(--c-success-bd); color: var(--c-success); }
.alert-danger  { background: var(--c-danger-bg);  border-color: var(--c-danger-bd);  color: var(--c-danger); }
.alert-warning { background: var(--c-warning-bg); border-color: var(--c-warning-bd); color: var(--c-warning); }
.alert-info    { background: var(--c-info-bg);    border-color: var(--c-info-bd);    color: var(--c-info); }

/* ---------- ui-grid re-skin ---------- */
.ui-grid, .ui-grid-viewport, .ui-grid-header-cell, .ui-grid-cell-contents { font-family: var(--font); font-size: var(--fs-md); }
.ui-grid { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); }
.ui-grid-header-cell { background: var(--c-surface-2); }
.ui-grid-header-cell .ui-grid-cell-contents { color: var(--c-text-3); text-transform: uppercase; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; }
.ui-grid-row:nth-child(odd) .ui-grid-cell { background: var(--c-surface); }
.ui-grid-row:nth-child(even) .ui-grid-cell { background: var(--c-surface-2); }
.ui-grid-row:hover .ui-grid-cell { background: var(--c-primary-050); }
.ui-grid-cell, .ui-grid-header-cell { border-color: var(--c-border) !important; }

/* Grid cell text (was steelblue) + clickable table names */
.grid { color: var(--c-text); }
.grid .grid-cell-link-item, .ui-grid .grid-cell-link-item { color: var(--c-primary); font-weight: 500; }
.grid .grid-cell-link-item:hover { color: var(--c-primary-700); text-decoration: underline; }

/* Row action icons → subtle icon buttons */
.z-grid-action-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.z-grid-action-btn.btn {
  color: var(--c-text-3); background: transparent; border-color: transparent;
  padding: 5px 7px; border-radius: 6px !important; box-shadow: none;
}
.z-grid-action-btn.btn:hover, .z-grid-action-btn.btn:focus { color: var(--c-primary); background: var(--c-primary-050); border-color: transparent; }
.z-grid-action-btn.glyphicon-exclamation-sign { color: var(--c-danger); }
.z-grid-action-btn.glyphicon-stop:hover { color: var(--c-danger); background: var(--c-danger-bg); }

/* ============================================================================
   MANAGE TASKS DASHBOARD  (taskList.html)
   ============================================================================ */
/* KPI summary cards */
.tk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 16px; }
.tk-stat { display: flex; align-items: center; gap: 12px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; }
.tk-stat-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.tk-ico-total { background: var(--c-primary-050); color: var(--c-primary); }
.tk-ico-run { background: var(--c-info-bg); color: var(--c-secondary); }
.tk-ico-ok { background: var(--c-success-bg); color: var(--c-success); }
.tk-ico-fail { background: var(--c-danger-bg); color: var(--c-danger); }
.tk-ico-warn { background: var(--c-warning-bg); color: var(--c-warning); }
.tk-stat-body { display: flex; flex-direction: column; min-width: 0; }
.tk-stat-num { font-size: 24px; font-weight: 700; color: var(--c-text); line-height: 1.1; }
.tk-stat-lbl { font-size: var(--fs-sm); color: var(--c-text-3); }
.tk-stat--btn { cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s; }
.tk-stat--btn:hover { border-color: var(--c-border-strong); box-shadow: var(--sh-2); }
.tk-stat--btn.is-active { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-050); }

/* Active-filter indicator bar */
.tk-filterbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 8px 14px; background: var(--c-primary-050); border: 1px solid var(--c-primary-100); border-radius: var(--r-md); font-size: var(--fs-md); color: var(--c-text-2); }
.tk-filterbar b { color: var(--c-primary); }
.tk-filterbar i.glyphicon-filter { color: var(--c-primary); margin-right: 2px; }
.tk-filterbar .btn { margin-left: auto; }

/* Distribution bars */
.tk-viz { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .tk-viz { grid-template-columns: 1fr; } }
.tk-viz-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 14px 16px; }
.tk-viz-title { font-size: var(--fs-md); font-weight: 600; color: var(--c-text-2); margin-bottom: 12px; }
.tk-viz-title small { color: var(--c-text-3); font-weight: 400; }
.tk-bar { display: flex; height: 12px; border-radius: 7px; overflow: hidden; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.tk-seg { height: 100%; transition: width .4s ease; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: var(--fs-sm); color: var(--c-text-2); }
.tk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tk-legend b { color: var(--c-text); font-weight: 600; }
.tk-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tk-legend--btn span { cursor: pointer; padding: 3px 8px; border-radius: 20px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.tk-legend--btn span:hover { background: var(--c-surface-2); border-color: var(--c-border); }
.tk-legend--btn span.is-active { background: var(--c-primary-050); border-color: var(--c-primary-100); }

.tk-seg-rt, .tk-dot.tk-seg-rt { background: var(--c-primary); }
.tk-seg-sc, .tk-dot.tk-seg-sc { background: var(--c-secondary); }
.tk-seg-od, .tk-dot.tk-seg-od { background: #a9b2ee; }
.tk-seg-running, .tk-dot.tk-seg-running { background: var(--c-primary); }
.tk-seg-completed, .tk-dot.tk-seg-completed { background: var(--c-success); }
.tk-seg-failed, .tk-dot.tk-seg-failed { background: var(--c-danger); }
.tk-seg-stopped, .tk-dot.tk-seg-stopped { background: var(--c-warning); }
.tk-seg-idle, .tk-dot.tk-seg-idle { background: var(--c-border-strong); }

/* Selected-task action toolbar (above the grid) */
.tk-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 10px 16px; margin-bottom: 12px;
}
.tk-toolbar .tk-detail-name { font-size: var(--fs-lg); }

/* Clickable rows + selected-row highlight (hover is themed in the ui-grid block) */
.tasks-dashboard .ui-grid-row .ui-grid-cell { cursor: pointer; }
.ui-grid-row-selected .ui-grid-cell { background: var(--c-primary-100) !important; }

/* Selected task detail panel */
.tk-detail { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 18px 20px; margin-top: 16px; }
.tk-detail-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tk-detail-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.tk-detail-name { font-size: var(--fs-xl); font-weight: 600; color: var(--c-text); }
.tk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tk-actions .btn, .tk-rt-controls .btn { display: inline-flex; align-items: center; gap: 6px; }
.tk-btn-danger:hover, .tk-btn-danger:focus { background: var(--c-danger-bg) !important; border-color: var(--c-danger-bd) !important; color: var(--c-danger) !important; }
.tk-detail-meta { margin: 10px 0 2px; color: var(--c-text-2); font-size: var(--fs-md); }
.tk-detail-meta i { color: var(--c-primary); margin-right: 4px; }
.tk-detail-io { margin-top: 16px; margin-bottom: 0; max-width: none; }

.tk-badge { font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 3px 9px; border-radius: 20px; text-transform: uppercase; }
.tk-badge-type { background: var(--c-primary-050); color: var(--c-primary); }
.tk-badge-running { background: var(--c-info-bg); color: var(--c-primary); }
.tk-badge-completed { background: var(--c-success-bg); color: var(--c-success); }
.tk-badge-failed { background: var(--c-danger-bg); color: var(--c-danger); }
.tk-badge-stopped { background: var(--c-warning-bg); color: var(--c-warning); }
.tk-badge-idle { background: var(--c-surface-2); color: var(--c-text-3); }

.tk-rt { margin-top: 16px; border-top: 1px solid var(--c-border); padding-top: 14px; }
.tk-rt-title { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-3); margin-bottom: 10px; }
.tk-rt-controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================================
   EXECUTED / CURRENT TASK RUNS — card feed (executedTaskList)
   ============================================================================ */
.ex-count { color: var(--c-text-3); font-size: var(--fs-md); }
.ex-count b { color: var(--c-text); font-weight: 700; }
.ex-feed { display: flex; flex-direction: column; gap: 10px; }
.ex-card {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 13px 16px;
  transition: box-shadow .12s, border-color .12s, transform .05s;
}
.ex-card:hover { box-shadow: var(--sh-2); border-left-color: var(--c-primary); }
.ex-card:active { transform: translateY(1px); }
.ex-card--running { border-left-color: var(--c-primary); }
.ex-card--completed { border-left-color: var(--c-success); }
.ex-card--failed { border-left-color: var(--c-danger); }
.ex-card--stopped { border-left-color: var(--c-warning); }

.ex-status { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--c-surface-2); color: var(--c-text-3); }
.ex-status--running { background: var(--c-info-bg); color: var(--c-primary); }
.ex-status--completed { background: var(--c-success-bg); color: var(--c-success); }
.ex-status--failed { background: var(--c-danger-bg); color: var(--c-danger); }
.ex-status--stopped { background: var(--c-warning-bg); color: var(--c-warning); }

.ex-body { flex: 1 1 auto; min-width: 0; }
.ex-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-name { font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ex-badge { font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 2px 8px; border-radius: 20px; text-transform: uppercase; }
.ex-badge--type { background: var(--c-primary-050); color: var(--c-primary); }
.ex-badge--running { background: var(--c-info-bg); color: var(--c-primary); }
.ex-badge--completed { background: var(--c-success-bg); color: var(--c-success); }
.ex-badge--failed { background: var(--c-danger-bg); color: var(--c-danger); }
.ex-badge--stopped { background: var(--c-warning-bg); color: var(--c-warning); }

.ex-flow { display: flex; align-items: center; gap: 8px; margin-top: 5px; min-width: 0; color: var(--c-text-2); font-size: var(--fs-md); }
.ex-flow .ct-ico { width: 15px; height: 15px; color: var(--c-primary); }
.ex-db { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-db--dest .ct-ico { color: var(--c-warning); }
.ex-flow-arrow { color: var(--c-text-3); font-size: 11px; flex: 0 0 auto; }

.ex-time { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; padding: 0 6px; }
.ex-time-row { display: flex; gap: 8px; font-size: var(--fs-sm); white-space: nowrap; }
.ex-time-lbl { flex: 0 0 34px; color: var(--c-text-3); text-transform: uppercase; font-size: var(--fs-xs); font-weight: 700; padding-top: 1px; }
.ex-time-val { color: var(--c-text-2); }

.ex-dur { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 20px; color: var(--c-text-2); font-size: var(--fs-sm); white-space: nowrap; }
.ex-dur .glyphicon { color: var(--c-primary); font-size: 12px; }

.ex-open { flex: 0 0 auto; color: var(--c-text-3); font-size: 14px; }
.ex-card:hover .ex-open { color: var(--c-primary); }

.ex-empty { text-align: center; color: var(--c-text-3); padding: 60px 20px; background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); }
.ex-empty .ct-ico { width: 40px; height: 40px; opacity: .4; margin: 0 auto 12px; }
.ex-empty p { margin: 0; font-size: var(--fs-md); }

.ex-pager { display: flex; justify-content: center; margin-top: 16px; }
.ex-pager .pagination { margin: 0; }

@media (max-width: 980px) {
  .ex-card { flex-wrap: wrap; }
  .ex-body { flex-basis: 100%; }
  .ex-time { padding-left: 56px; }
}

/* ============================================================================
   SERVICE MONITOR — live health cards + activity feed (monitoring)
   ============================================================================ */
.mon-page .custom-panel-group { height: auto; }

/* Legend */
.mon-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 16px; padding: 10px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.mon-legend-title { font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .5px; color: var(--c-text-3); }
.mon-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--c-text-2); }
.mon-legend-err { margin-left: auto; }
.mon-lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.mon-lg-reader { background: #f0997b; }
.mon-lg-analyzer { background: #97c459; }
.mon-lg-distributor { background: #ef9f27; }
.mon-lg-cleanup { background: #a1887f; }
.mon-lg-error { background: var(--c-danger); }
.mon-lg-all { background: linear-gradient(135deg, #f0997b 0 25%, #97c459 25% 50%, #ef9f27 50% 75%, #a1887f 75% 100%); }

/* Legend items double as activity-feed filter chips */
.mon-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: var(--fs-md); color: var(--c-text-2); background: transparent; border: 1px solid var(--c-border); border-radius: 20px; padding: 4px 12px; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.mon-chip:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.mon-chip.is-active { background: var(--c-primary-050); border-color: var(--c-primary); color: var(--c-primary-700); font-weight: 600; }

/* Health pulse cards */
.mon-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 20px; }
.mon-card { display: flex; align-items: center; gap: 12px; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 14px 16px; }
.mon-card--up { border-left-color: var(--c-success); }
.mon-card--down { border-left-color: var(--c-danger); }
.mon-card--reader .mon-card-name .glyphicon { color: #d85a30; }
.mon-card--analyzer .mon-card-name .glyphicon { color: #639922; }
.mon-card--distributor .mon-card-name .glyphicon { color: #ba7517; }
.mon-card--cleanup .mon-card-name .glyphicon { color: #8d6e63; }

.mon-pulse { flex: 0 0 14px; width: 14px; height: 14px; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.mon-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-success); position: relative; z-index: 1; }
.mon-pulse::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--c-success); opacity: .6; animation: mon-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
.mon-card--down .mon-dot { background: var(--c-danger); }
.mon-card--down .mon-pulse::after { display: none; }
@keyframes mon-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mon-pulse::after { animation: none; } }

.mon-card-info { flex: 1 1 auto; min-width: 0; }
.mon-card-name { font-weight: 600; color: var(--c-text); font-size: var(--fs-md); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-card-time { color: var(--c-text-3); font-size: var(--fs-sm); margin-top: 2px; }
.mon-card-tags { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mon-tag { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 9px; border-radius: 20px; }
.mon-tag--up { background: var(--c-success-bg); color: var(--c-success); }
.mon-tag--down { background: var(--c-danger-bg); color: var(--c-danger); }
.mon-tag--err { background: var(--c-danger-bg); color: var(--c-danger); padding: 3px 7px; }
.mon-health-empty { display: flex; align-items: center; gap: 10px; color: var(--c-text-3); font-size: var(--fs-md); padding: 14px 16px; background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); }

/* Activity feed */
.mon-activity { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.mon-activity-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-weight: 600; font-size: var(--fs-lg); }
.mon-activity-head .glyphicon { color: var(--c-primary); font-size: 14px; }
.mon-accordion { padding: 12px; margin: 0; }
.mon-accordion .panel-default, .mon-accordion .custom-panel { box-shadow: none !important; border: 1px solid var(--c-border); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; }
.mon-accordion .panel-heading { background: var(--c-surface-2); padding: 0; }
.mon-accordion .panel-title > a { display: block; padding: 10px 14px; color: var(--c-text); font-weight: 600; font-size: var(--fs-md); text-decoration: none; }
.mon-accordion .panel-title > a:hover { background: var(--c-primary-050); }
.mon-accordion .panel-body { padding: 10px 12px; }
.mon-accordion .panelbody-scroll { max-height: 320px; }

/* Activity rows — clean feed with a type-coloured left accent */
.mon-activity .custom-panel-list-group { margin: 0; }
.mon-activity .custom-panel-list-item { border: 1px solid var(--c-border) !important; border-left-width: 3px !important; border-radius: var(--r-sm); background: var(--c-surface) !important; padding: 8px 12px; margin-bottom: 6px; }
.mon-activity .custom-panel-list-item-r { border-left-color: #d85a30 !important; }
.mon-activity .custom-panel-list-item-g { border-left-color: #639922 !important; }
.mon-activity .custom-panel-list-item-y { border-left-color: #ba7517 !important; }
.mon-activity .custom-panel-list-item-b { border-left-color: #8d6e63 !important; }
.mon-activity .custom-panel-list-item-danger { border-color: var(--c-danger-bd) !important; border-left-color: var(--c-danger) !important; background: var(--c-danger-bg) !important; }
.mon-activity .custom-panel-list-item-heading { color: var(--c-text-2) !important; font-weight: 600; font-size: var(--fs-sm); }
.mon-activity .custom-panel-list-item-heading-danger { color: var(--c-danger) !important; }
.mon-activity .custom-panel-list-item p { color: var(--c-text); font-size: var(--fs-sm); margin: 4px 0 0; word-break: break-word; }
.mon-empty { color: var(--c-text-3); font-size: var(--fs-md); padding: 20px 6px; text-align: center; }

/* ============================================================================
   SERVICE EXECUTION LOGS — log-stream console (serviceExecutionLogsPage)
   ============================================================================ */
.sel-count { color: var(--c-text-3); font-size: var(--fs-md); }
.sel-count b { color: var(--c-text); font-weight: 700; }

/* Filter toolbar */
.sel-toolbar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 14px; padding: 12px 16px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-1); }
.sel-field { display: flex; flex-direction: column; gap: 4px; }
.sel-field > label { margin: 0; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--c-text-3); }
.sel-field .form-control { height: 34px; }
.sel-field select.form-control { min-width: 130px; }
.sel-field--wide select.form-control { min-width: 260px; max-width: 360px; }
.sel-spacer { flex: 1 1 auto; }
.sel-invalid { padding: 8px 14px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

/* Log stream */
.sel-feed { display: flex; flex-direction: column; gap: 6px; }
.sel-row { --rail: var(--c-border-strong); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.sel-row.service-execution-log-level-information { --rail: #378add; }
.sel-row.service-execution-log-level-warning { --rail: var(--c-warning); }
.sel-row.service-execution-log-level-error { --rail: var(--c-danger); }
.sel-row.service-execution-log-level-critical { --rail: #7f1d1d; }
.sel-row.service-execution-log-level-verbose { --rail: var(--c-text-3); }
.sel-row.is-error { background: linear-gradient(90deg, var(--c-danger-bg) 0, var(--c-surface) 3px); }

.sel-line { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 0; cursor: pointer; }
.sel-line:hover { background: var(--c-surface-2); }
.sel-rail { flex: 0 0 4px; align-self: stretch; background: var(--rail); }
.sel-ico { flex: 0 0 auto; color: var(--rail); font-size: 15px; }
.sel-content { flex: 1 1 auto; min-width: 0; }
.sel-msg { color: var(--c-text); font-size: var(--fs-md); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; color: var(--c-text-3); font-size: var(--fs-sm); }
.sel-meta .glyphicon { font-size: 11px; margin-right: 3px; }
.sel-meta .sel-proc { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-task { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 20px; padding: 0 8px; color: var(--c-text-2); }

.sel-badges { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sel-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.sel-badge.service-execution-log-level-information { color: #185fa5; background: var(--c-info-bg); border-color: #c9d0f5; }
.sel-badge.service-execution-log-level-warning { color: var(--c-warning); background: var(--c-warning-bg); border-color: var(--c-warning-bd); }
.sel-badge.service-execution-log-level-error { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-bd); }
.sel-badge.service-execution-log-level-critical { color: #fff; background: #7f1d1d; border-color: #5f1515; }
.sel-badge.service-execution-log-level-verbose,
.sel-badge.service-execution-log-level-default { color: var(--c-text-2); background: var(--c-surface-2); border-color: var(--c-border-strong); }
.sel-badge.service-execution-log-outcome-started { color: var(--c-warning); background: var(--c-warning-bg); border-color: var(--c-warning-bd); }
.sel-badge.service-execution-log-outcome-completed { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success-bd); }
.sel-badge.service-execution-log-outcome-failed { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-bd); }
.sel-badge.service-execution-log-outcome-default { color: var(--c-text-3); background: var(--c-surface-2); border-color: var(--c-border-strong); }
.sel-badge.service-execution-log-error-error { color: var(--c-danger); background: var(--c-danger-bg); border-color: var(--c-danger-bd); }
.sel-badge.service-execution-log-error-ok { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success-bd); }
.sel-chev { color: var(--c-text-3); font-size: 12px; margin-left: 2px; }

.sel-detail { border-top: 1px dashed var(--c-border); background: var(--c-surface-2); }
.sel-detail-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.sel-detail-head .glyphicon { color: var(--c-primary); margin-right: 5px; }
.sel-detail-body { margin: 0; padding: 12px 14px; background: var(--c-primary-700); color: #e8ebff; border: 0; border-radius: 0; font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; }

.sel-empty { text-align: center; color: var(--c-text-3); padding: 60px 20px; background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); }
.sel-empty .glyphicon { font-size: 30px; opacity: .4; display: block; margin-bottom: 10px; }
.sel-empty p { margin: 0; font-size: var(--fs-md); }

.sel-pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sel-pager .pagination { margin: 0; }
.sel-pagesize { display: flex; align-items: center; gap: 8px; color: var(--c-text-3); font-size: var(--fs-sm); }
.sel-pagesize .form-control { height: 32px; width: auto; display: inline-block; }

@media (max-width: 860px) {
  .sel-badges { flex-wrap: wrap; justify-content: flex-end; max-width: 130px; }
  .sel-field--wide select.form-control { min-width: 180px; }
}

/* ============================================================================
   SQL SERVER LIST — infrastructure inventory explorer (machineList)
   ============================================================================ */
.mx-tree ul.ivh-treeview { list-style: none; margin: 0; padding-left: 0; }
.mx-tree ul.ivh-treeview ul.ivh-treeview { padding-left: 28px; }
.mx-tree li { position: relative; }

.mx-row { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); }
.mx-twistie { flex: 0 0 16px; width: 16px; display: inline-flex; justify-content: center; padding-top: 2px; color: var(--c-text-3); cursor: pointer; }
.mx-item { display: flex; align-items: flex-start; gap: 11px; flex: 1 1 auto; min-width: 0; }
.mx-ico { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.mx-item-body { flex: 1 1 auto; min-width: 0; }
.mx-item-title { font-weight: 600; color: var(--c-text); font-size: var(--fs-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mx-chip { font-size: var(--fs-xs); color: var(--c-text-2); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.mx-chip b { color: var(--c-text); font-weight: 700; }

/* Machine — bold header card */
.mx-row--machine { background: linear-gradient(135deg, var(--c-primary-700), var(--c-primary)); box-shadow: var(--sh-1); margin: 16px 0 6px; }
.mx-row--machine .mx-item-title { color: #fff; font-size: var(--fs-lg); }
.mx-row--machine .mx-ico { color: #fff; }
.mx-row--machine .mx-twistie { color: rgba(255,255,255,.85); }
.mx-row--machine .mx-chip { background: rgba(255,255,255,.16); border-color: transparent; color: #eef1ff; }
.mx-row--machine .mx-chip b { color: #fff; }

/* Instance — sub-card */
.mx-row--instance { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-secondary); box-shadow: var(--sh-1); margin: 6px 0; }
.mx-row--instance .mx-ico { color: var(--c-secondary); }
.mx-count { font-weight: 600; font-size: var(--fs-sm); color: var(--c-secondary); background: var(--c-primary-050); padding: 1px 9px; border-radius: 20px; }

/* Database — clean row */
.mx-row--db { border-bottom: 1px solid var(--c-border); border-radius: 0; padding: 9px 14px; }
.mx-row--db:hover { background: var(--c-surface-2); }
.mx-row--db .mx-ico { width: 16px; height: 16px; color: var(--c-primary); }
.mx-row--db .mx-item-title { font-weight: 500; }

/* Status + recovery-model pills */
.mx-status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 9px; border-radius: 20px; background: var(--c-surface-2); color: var(--c-text-3); }
.mx-status--online { background: var(--c-success-bg); color: var(--c-success); }
.mx-status--offline, .mx-status--suspect, .mx-status--recovering, .mx-status--emergency { background: var(--c-danger-bg); color: var(--c-danger); }
.mx-chip--rm-full { background: var(--c-info-bg); color: var(--c-primary); border-color: #c9d0f5; }
.mx-chip--rm-bulk-logged, .mx-chip--rm-bulk_logged { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning-bd); }

/* ============================================================================
   SQL SERVER SCANNER — live console + scan job cards (scan)
   ============================================================================ */
.scan-section { margin-top: 22px; }
.scan-section-title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); font-weight: 600; margin: 0 0 12px; }
.scan-section-title .glyphicon { color: var(--c-primary); font-size: 14px; }

/* Live console */
.scan-console { margin-top: 18px; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.scan-console-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.scan-console-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-md); }
.scan-console-title .glyphicon { color: var(--c-primary); font-size: 13px; }
.scan-live { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary); }
.scan-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 0 rgba(0,30,200,.5); animation: scan-blink 1.2s ease-in-out infinite; }
@keyframes scan-blink { 0%,100% { box-shadow: 0 0 0 0 rgba(0,30,200,.45); } 50% { box-shadow: 0 0 0 6px rgba(0,30,200,0); } }
.scan-live--idle { color: var(--c-success); }
@media (prefers-reduced-motion: reduce) { .scan-live-dot { animation: none; } }

.scan-log { list-style: none; margin: 0; padding: 8px 0; background: var(--c-primary-700); max-height: 320px; overflow: auto; font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); }
.scan-log-line { display: flex; gap: 12px; padding: 3px 16px; color: #dfe4ff; font-size: 12px; line-height: 1.7; }
.scan-log-idx { flex: 0 0 26px; text-align: right; color: #6b74b8; user-select: none; }
.scan-log-msg { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; }
.scan-log-line--active .scan-log-idx { color: var(--c-secondary); }
.scan-caret { display: inline-block; width: 8px; height: 15px; background: var(--c-secondary); vertical-align: -3px; animation: scan-caret 1s step-end infinite; }
@keyframes scan-caret { 50% { opacity: 0; } }

/* Scan job cards */
.scan-jobs { display: flex; flex-direction: column; gap: 10px; }
.scan-job { display: flex; align-items: center; gap: 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong); border-radius: var(--r-md); box-shadow: var(--sh-1); padding: 14px 16px; }
.scan-job--running { border-left-color: var(--c-primary); }
.scan-job--success { border-left-color: var(--c-success); }
.scan-job--saved { border-left-color: var(--c-secondary); }
.scan-job--failed { border-left-color: var(--c-danger); }
.scan-job-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--c-primary-050); color: var(--c-primary); font-size: 18px; }
.scan-job--success .scan-job-ico { background: var(--c-success-bg); color: var(--c-success); }
.scan-job--failed .scan-job-ico { background: var(--c-danger-bg); color: var(--c-danger); }
.scan-job-body { flex: 1 1 auto; min-width: 0; }
.scan-job-domain { font-weight: 600; font-size: var(--fs-lg); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-job-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--c-text-3); font-size: var(--fs-sm); }
.scan-job-meta .glyphicon { font-size: 11px; margin-right: 3px; }
.scan-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; background: var(--c-surface-2); color: var(--c-text-3); }
.scan-status--running { background: var(--c-info-bg); color: var(--c-primary); }
.scan-status--success { background: var(--c-success-bg); color: var(--c-success); }
.scan-status--saved { background: var(--c-primary-050); color: var(--c-secondary); }
.scan-status--failed { background: var(--c-danger-bg); color: var(--c-danger); }
.scan-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); animation: scan-blink 1.2s ease-in-out infinite; }
.scan-job-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.scan-del { color: var(--c-danger); }
.scan-del:hover, .scan-del:active, .scan-del:focus { background: var(--c-danger-bg) !important; border-color: var(--c-danger-bd) !important; color: var(--c-danger) !important; }
.scan-pager { display: flex; justify-content: center; margin-top: 14px; }
.scan-pager .pagination { margin: 0; }

@media (max-width: 760px) {
  .scan-job { flex-wrap: wrap; }
  .scan-job-body { flex-basis: calc(100% - 56px); }
}

/* ============================================================================
   POPOVER ACTION MENUS  (tableList row actions + populate/cancel confirms)
   ============================================================================ */
.popover { border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-2); padding: 0; max-width: 320px; font-family: var(--font); }
.popover-content { padding: 6px; }
.popover.top > .arrow { border-top-color: var(--c-border); }
.popover.top > .arrow:after { border-top-color: var(--c-surface); }
.popover.bottom > .arrow { border-bottom-color: var(--c-border); }
.popover.bottom > .arrow:after { border-bottom-color: var(--c-surface); }
.popover.left > .arrow { border-left-color: var(--c-border); }
.popover.left > .arrow:after { border-left-color: var(--c-surface); }
.popover.right > .arrow { border-right-color: var(--c-border); }
.popover.right > .arrow:after { border-right-color: var(--c-surface); }

.tp-pop { min-width: 232px; }
.tp-pop-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-text-2); padding: 4px 6px 8px; margin-bottom: 6px; border-bottom: 1px solid var(--c-border); }
.tp-pop-title b { color: var(--c-text); }

.tp-pop-actions { display: flex; flex-direction: column; gap: 4px; }
.tp-act { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 8px 11px; cursor: pointer; font-family: var(--font); color: var(--c-text); transition: background .12s, border-color .12s; }
.tp-act:hover { background: var(--c-primary-050); border-color: var(--c-primary-100); }
.tp-act > .glyphicon { color: var(--c-primary); font-size: 14px; flex: 0 0 auto; }
.tp-act-body { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tp-act-lbl { font-weight: 600; font-size: var(--fs-md); }
.tp-act-sub { font-size: var(--fs-xs); color: var(--c-text-3); }
.tp-act--danger:hover { background: var(--c-danger-bg); border-color: var(--c-danger-bd); }
.tp-act--danger > .glyphicon { color: var(--c-danger); }

.tp-pop-foot { display: flex; justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.tp-pop-foot--split { justify-content: stretch; gap: 8px; }
.tp-pop-foot--split > button { flex: 1 1 0; }
.tp-pop--confirm .tp-pop-foot { border-top: 0; margin-top: 4px; padding-top: 0; }

.tp-cancel, .tp-ok { border-radius: var(--r-sm); padding: 7px 14px; font-weight: 600; font-size: var(--fs-sm); font-family: var(--font); cursor: pointer; border: 1px solid transparent; }
.tp-cancel { background: var(--c-surface); border-color: var(--c-border-strong); color: var(--c-text-2); }
.tp-cancel:hover { background: var(--c-surface-2); color: var(--c-text); }
.tp-ok { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.tp-ok:hover { background: var(--c-primary-600); }
.tp-ok--danger { background: var(--c-danger); border-color: var(--c-danger); }
.tp-ok--danger:hover { filter: brightness(.94); }

.tp-pop-msg { display: flex; gap: 9px; align-items: flex-start; padding: 6px 6px 4px; font-size: var(--fs-md); color: var(--c-text); line-height: 1.45; }
.tp-pop-msg > .glyphicon { color: var(--c-primary); font-size: 16px; margin-top: 1px; flex: 0 0 auto; }
.tp-pop-msg--warn > .glyphicon { color: var(--c-warning); }
.tp-pop-msg b { font-weight: 600; }

/* ---------- Toastr ---------- */
.toast { border-radius: var(--r-md) !important; box-shadow: var(--sh-2) !important; font-family: var(--font); }
#toast-container > .toast-success { background-color: var(--c-success) !important; }
#toast-container > .toast-error { background-color: var(--c-danger) !important; }
#toast-container > .toast-info { background-color: var(--c-primary) !important; }
#toast-container > .toast-warning { background-color: var(--c-warning) !important; }

/* Empty state helper */
.gb-empty { text-align: center; padding: 26px 10px; color: var(--c-text-3); }
.gb-empty .gb-empty-title { font-weight: 600; color: var(--c-text-2); margin-top: 8px; }
.gb-empty .gb-empty-sub { font-size: 12px; margin-top: 4px; }

/* Card accent bar (small vertical mark for panel headings) */
.gb-accent { display: inline-block; width: 4px; height: 16px; border-radius: 2px; background: var(--c-primary); vertical-align: middle; margin-right: 8px; }
.mono, .gb-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ============================================================================
   LEGACY LAYOUT NEUTRALISERS
   The old shell provided a 250px left column + a floated right column with a
   1340px min-width. The new shell (.gb-app) owns layout, so neutralise the old
   wrappers wherever module templates still use them — this makes every existing
   screen lay out full-width inside .gb-content and inherit the new components.
   ============================================================================ */
.gb-content .z-page-container { min-width: 0; }
.gb-content .z-page { margin: 0; min-height: 0; overflow: visible; background: none; }
.gb-content .z-page.two-column { background: none; }
.gb-content .z-page-left-column { display: none; }
.gb-content .z-page-right-column { width: 100%; float: none; padding-left: 0; }
.gb-content .extended .z-page-right-column { width: 100%; }
/* Old action-panel banner used a fixed calc() width; let it size naturally */
.gb-content .action-panel h1.banner, .gb-content .action-panel h2.banner { width: auto !important; }

/* ============================================================================
   TASK SOURCE / DESTINATION CARDS  (taskList, executeTask) — harmonised to GB
   ============================================================================ */
.gb-content .execute-task-info-card { border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; }
.gb-content .execute-task-info-card-source-head,
.gb-content .execute-task-info-card-destination-head,
.gb-content .execute-task-info-card-default-head {
  border-bottom: 1px solid var(--c-border); font-weight: 700; padding: 10px 14px; font-size: var(--fs-md);
}
.gb-content .execute-task-info-card-source-head { background: var(--c-info-bg); color: var(--c-primary); border-top: 3px solid var(--c-primary); }
.gb-content .execute-task-info-card-destination-head { background: var(--c-warning-bg); color: var(--c-warning); border-top: 3px solid var(--c-warning); }
.gb-content .execute-task-info-card-default-head { background: var(--c-surface-2); color: var(--c-text-2); border-top: 3px solid var(--c-border-strong); }
.gb-content .execute-task-devider i { color: var(--c-text-3); }

/* ============================================================================
   CREATE TASK WORKSPACE  (serverNode.html) — full redesign
   ============================================================================ */
.ct-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .ct-workspace { grid-template-columns: 1fr; } }

/* Reusable mask icons (color follows currentColor) */
.ct-ico {
  display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ct-ico-db {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='5'%20rx='7'%20ry='3'/%3E%3Cpath%20d='M5%205v14c0%201.6%203.2%203%207%203s7-1.4%207-3V5'/%3E%3Cpath%20d='M5%2012c0%201.6%203.2%203%207%203s7-1.4%207-3'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cellipse%20cx='12'%20cy='5'%20rx='7'%20ry='3'/%3E%3Cpath%20d='M5%205v14c0%201.6%203.2%203%207%203s7-1.4%207-3V5'/%3E%3Cpath%20d='M5%2012c0%201.6%203.2%203%207%203s7-1.4%207-3'/%3E%3C/svg%3E");
}
.ct-ico-server {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='7'%20rx='1.5'/%3E%3Crect%20x='3'%20y='13'%20width='18'%20height='7'%20rx='1.5'/%3E%3Cline%20x1='7'%20y1='7.5'%20x2='7.01'%20y2='7.5'/%3E%3Cline%20x1='7'%20y1='16.5'%20x2='7.01'%20y2='16.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='7'%20rx='1.5'/%3E%3Crect%20x='3'%20y='13'%20width='18'%20height='7'%20rx='1.5'/%3E%3Cline%20x1='7'%20y1='7.5'%20x2='7.01'%20y2='7.5'/%3E%3Cline%20x1='7'%20y1='16.5'%20x2='7.01'%20y2='16.5'/%3E%3C/svg%3E");
}

/* Panels (shared shell for the explorer card) */
.ct-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); display: flex; flex-direction: column; overflow: hidden; }
.ct-panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--c-border); }
.ct-panel-ico { width: 22px; height: 22px; color: var(--c-primary); }
.ct-panel-title { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
.ct-panel-sub { display: block; color: var(--c-text-3); font-size: var(--fs-sm); margin-top: 1px; }

/* Explorer */
.ct-explorer .ct-search { margin: 14px 16px 6px; display: flex; }
.ct-tree { position: relative; margin: 6px 8px 0; padding: 6px 8px; overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 330px); min-height: 260px; }
.ct-pager { display: flex; justify-content: center; padding: 8px 16px 12px; border-top: 1px solid var(--c-border); margin-top: 6px; }
.ct-pager .pagination { margin: 0; }

/* Tree — neutralise legacy fixed widths, apply modern node rows */
.ct-tree ul.ivh-treeview { list-style: none; margin: 0; padding-left: 18px; }
.ct-tree > div > ul.ivh-treeview { padding-left: 0; }
.ct-tree li { position: relative; }
.ct-node { display: flex; align-items: center; gap: 8px; width: auto; min-width: 0; max-width: none; padding: 4px 8px; border-radius: var(--r-sm); }
.ct-node:hover { background: var(--c-surface-2); }
.ct-twistie { flex: 0 0 14px; width: 14px; display: inline-flex; justify-content: center; color: var(--c-text-3); cursor: pointer; }
.ct-node-label { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.ct-node-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-branch { color: var(--c-primary-700); }
.ct-branch .ct-ico { color: var(--c-secondary); }
.ct-leaf { cursor: grab; color: var(--c-text); padding: 3px 8px; border-radius: var(--r-sm); border: 1px solid transparent; }
.ct-leaf .ct-ico { color: var(--c-primary); }
.ct-leaf:hover { background: var(--c-primary-050); border-color: var(--c-primary-100); }
.ct-leaf:active { cursor: grabbing; }
.ct-grip { margin-left: auto; padding-left: 8px; color: var(--c-text-3); font-size: 11px; opacity: 0; transition: opacity .12s; }
.ct-leaf:hover .ct-grip { opacity: .65; }

/* Click-to-assign quick actions (revealed on hover) */
.ct-leaf-actions { margin-left: auto; display: inline-flex; gap: 6px; opacity: 0; transform: translateX(4px); transition: opacity .12s, transform .12s; }
.ct-leaf:hover .ct-leaf-actions { opacity: 1; transform: none; }
.ct-leaf:hover .ct-grip { display: none; }
.ct-assign { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--c-border-strong); background: var(--c-surface); border-radius: 20px; padding: 2px 10px; cursor: pointer; line-height: 1.5; }
.ct-assign .glyphicon { font-size: 10px; }
.ct-assign--src { color: var(--c-primary); border-color: var(--c-primary-100); }
.ct-assign--src:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ct-assign--dst { color: var(--c-warning); border-color: var(--c-warning-bd); }
.ct-assign--dst:hover { background: var(--c-warning); color: #fff; border-color: var(--c-warning); }

/* Assigned-state badge + row highlight */
.ct-assigned { margin-left: auto; font-size: 9px; font-weight: 700; letter-spacing: .5px; padding: 1px 7px; border-radius: 20px; }
.ct-leaf-actions + .ct-assigned, .ct-assigned + .ct-leaf-actions { margin-left: 6px; }
.ct-assigned--src { background: var(--c-info-bg); color: var(--c-primary); }
.ct-assigned--dst { background: var(--c-warning-bg); color: var(--c-warning); }
.ct-leaf.is-source { background: var(--c-primary-050); border-color: var(--c-primary-100); }
.ct-leaf.is-dest { background: var(--c-warning-bg); border-color: var(--c-warning-bd); }
.ct-leaf.is-source .ct-ico { color: var(--c-primary); }
.ct-leaf.is-dest .ct-ico { color: var(--c-warning); }
.ct-node-actions { display: flex; gap: 4px; margin-left: auto; padding-left: 8px; }
.ct-node-actions > span { color: var(--c-text-3); cursor: pointer; padding: 3px 5px; border-radius: 4px; line-height: 1; }
.ct-node-actions > span:hover { color: var(--c-primary); background: var(--c-primary-050); }
.ct-empty { text-align: center; color: var(--c-text-3); padding: 44px 20px; }
.ct-empty .ct-ico { width: 34px; height: 34px; opacity: .45; margin: 0 auto 10px; }
.ct-empty p { margin: 0; font-size: var(--fs-md); }

/* Configuration column */
.ct-config { display: flex; flex-direction: column; }
.ct-slot { background: var(--c-surface); border: 1.5px dashed var(--c-border-strong); border-radius: var(--r-lg); padding: 16px; transition: border-color .15s, background .15s, box-shadow .15s; }
.ct-slot.is-over { border-color: var(--c-primary); border-style: dashed; background: var(--c-primary-050); box-shadow: 0 0 0 3px var(--c-primary-100); }
.ct-slot.is-filled { border-style: solid; border-color: var(--c-border); box-shadow: var(--sh-1); }
.ct-slot-label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c-text-2); font-size: var(--fs-md); margin-bottom: 12px; }
.ct-badge { font-size: 10px; font-weight: 700; letter-spacing: .6px; padding: 2px 8px; border-radius: 20px; }
.ct-badge--source { background: var(--c-info-bg); color: var(--c-primary); }
.ct-badge--dest { background: var(--c-warning-bg); color: var(--c-warning); }

.ct-slot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 74px; padding: 12px; text-align: center; color: var(--c-text-3); }
.ct-slot-empty .ct-ico { width: 28px; height: 28px; opacity: .55; }
.ct-slot-empty p { margin: 0; font-size: var(--fs-md); }
.ct-slot-empty b { color: var(--c-text-2); }

.ct-db-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-md); }
.ct-slot--source .ct-db-card { border-left: 3px solid var(--c-primary); }
.ct-slot--dest .ct-db-card { border-left: 3px solid var(--c-warning); }
.ct-db-card .ct-ico { width: 26px; height: 26px; color: var(--c-primary); }
.ct-slot--dest .ct-db-card .ct-ico { color: var(--c-warning); }
.ct-db-meta { flex: 1 1 auto; min-width: 0; }
.ct-db-name { font-weight: 600; color: var(--c-text); font-size: var(--fs-lg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-db-sub { color: var(--c-text-3); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-db-remove { flex: 0 0 28px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--c-text-3); border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; transition: background .12s, color .12s; }
.ct-db-remove:hover { background: var(--c-danger-bg); color: var(--c-danger); }

.ct-flow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; }
.ct-flow-line { width: 2px; height: 12px; background: var(--c-border-strong); }
.ct-flow-arrow { width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary-050); border: 1px solid var(--c-primary-100); color: var(--c-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; }

.ct-config-hint { display: flex; gap: 8px; align-items: flex-start; margin: 16px 2px 0; color: var(--c-text-3); font-size: var(--fs-sm); line-height: 1.5; }
.ct-config-hint i { color: var(--c-primary); margin-top: 2px; }
.ct-ready { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; padding: 10px 14px; background: var(--c-success-bg); border: 1px solid var(--c-success-bd); border-radius: var(--r-md); color: var(--c-success); font-size: var(--fs-md); font-weight: 500; }
.ct-ready i { font-size: 15px; }

/* Static source -> destination pair (executeTask) reuses the slot/card system */
.ct-io { display: flex; align-items: stretch; gap: 0; max-width: 860px; margin-bottom: 24px; }
.ct-io .ct-slot { flex: 1 1 0; min-width: 0; }
.ct-slot--static { cursor: default; }
.ct-slot--static .ct-slot-label { margin-bottom: 12px; }
.ct-flow--h { flex-direction: row; align-self: center; padding: 0 8px; }
.ct-flow--h .ct-flow-line { width: 12px; height: 2px; }
@media (max-width: 760px) {
  .ct-io { flex-direction: column; }
  .ct-flow--h { flex-direction: column; padding: 6px 0; }
  .ct-flow--h .ct-flow-line { width: 2px; height: 12px; }
}

/* Section header row (tableList) */
.ct-section-head { margin-bottom: 12px; align-items: center; }
.ct-section-title { font-size: var(--fs-xl); font-weight: 600; margin: 0; }

/* Fields panel (executeTask) */
.ct-fields { margin-bottom: 24px; }
.ct-fields-body { padding: 8px 12px; }
.ct-ico-table {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3E%3Cline%20x1='3'%20y1='14'%20x2='21'%20y2='14'/%3E%3Cline%20x1='9'%20y1='9'%20x2='9'%20y2='20'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3E%3Cline%20x1='3'%20y1='14'%20x2='21'%20y2='14'/%3E%3Cline%20x1='9'%20y1='9'%20x2='9'%20y2='20'/%3E%3C/svg%3E");
}
.ct-fields .ct-node-label .ct-ico-table { color: var(--c-secondary); }
.ct-node-col { color: var(--c-text-2); }
.ct-col-type { margin-left: 8px; color: var(--c-text-3); font-size: var(--fs-sm); }

/* Scan progress list */
.gb-content #progressBox.list-group { border-radius: var(--r-md); overflow: hidden; }
.gb-content .scan-item.list-group-item { background: var(--c-surface-2); border-color: var(--c-border); font-size: var(--fs-md); }

/* Task execution detail list - responsive vertical scroller */
.gb-content #taskDetailProgressBox.list-group {
    border-radius: var(--r-md);
    max-height: calc(100vh - 240px);
    min-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-word;
}
@media (max-width: 767px) {
    .gb-content #taskDetailProgressBox.list-group {
        max-height: calc(100vh - 180px);
    }
}

/* Footer */
footer { background: var(--c-surface); border-top: 1px solid var(--c-border); color: var(--c-text-3); }

/* Form field wrapper (login / modals) */
.field { margin-bottom: 16px; }
.field > label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); margin-bottom: 6px; }

/* ============================================================================
   LOGIN
   ============================================================================ */
.gb-login {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary-700) 0%, var(--c-primary) 100%);
  padding: 24px;
}
.gb-login-card {
  width: 100%; max-width: 400px; background: var(--c-surface); border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(21,27,73,.35); padding: 34px 34px 30px;
}
.gb-login-brand { text-align: center; margin-bottom: 26px; }
.gb-login-brand img { height: 40px; width: auto; margin-bottom: 14px; }
.gb-login-title { font-size: 22px; font-weight: 700; color: var(--c-text); }
.gb-login-sub { font-size: var(--fs-md); color: var(--c-text-3); margin-top: 4px; }
.gb-login .gb-required { float: right; color: var(--c-danger); font-size: var(--fs-xs); font-weight: 700; }
.gb-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--c-text-2); font-size: var(--fs-md); margin: 4px 0 20px; cursor: pointer; }
.gb-checkbox input { width: 16px; height: 16px; }
.gb-login-btn { width: 100%; justify-content: center; padding: 11px; font-size: var(--fs-md); }
.gb-login-foot { color: rgba(255,255,255,.7); font-size: var(--fs-xs); margin-top: 20px; }