/* ============================================================
   Web Monitor — iMedia theme v1.0
   Pixel-matches scriptmonitor.mycdn.org v10.04
   Dark default; body.light = light mode
   ============================================================ */

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

/* ── Tokens: DARK (exact match scriptmonitor v10.04) ─────── */
:root {
  --accent:      #0d9488; --accent-lt: rgba(13,148,136,.15); --accent-hv: #0f766e; --accent-text: #5eead4;
  --green:       #10b981; --green-lt:  rgba(16,185,129,.15); --green-text: #6ee7b7;
  --red:         #ef4444; --red-lt:    rgba(239,68,68,.12);  --red-text:   #f87171;
  --amber:       #f59e0b; --amber-lt:  rgba(245,158,11,.12); --amber-text: #fcd34d;
  --gray:        #94a3b8; --gray-lt:   rgba(255,255,255,.05);
  --bg:          #06172b; --bg-2: #091e35; --bg-3: #0d2540;
  --body-bg:     #02080f;
  --card-bg:     #091e35;
  --border:      rgba(20,184,166,.12); --border-2: rgba(255,255,255,.07);
  --text:        #e3e3e3; --text-2: #64748b; --text-3: rgba(148,163,184,.35);
  --nav-bg:      #07152a; --nav-border: rgba(20,184,166,.12);
  --nav-text:    rgba(148,163,184,.55); --nav-active: #5eead4; --nav-active-bd: #0d9488;
  --radius:      6px; --radius-lg: 10px;
  --shadow:      0 4px 24px rgba(0,0,0,.4);
  --tr:          .2s ease;
  --font:        'Inter', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Mono', monospace;
}

/* ── Tokens: LIGHT ──────────────────────────────────────── */
body.light {
  --accent:      #0d9488; --accent-lt: #f0fdfa; --accent-hv: #0f766e; --accent-text: #0f766e;
  --green:       #059669; --green-lt:  #f0fdf4; --green-text: #065f46;
  --red:         #dc2626; --red-lt:    #fef2f2; --red-text:   #991b1b;
  --amber:       #d97706; --amber-lt:  #fffbeb; --amber-text: #92400e;
  --bg:          #f7f7f7; --bg-2: #eef0f2; --bg-3: #e4e7ea; --body-bg: #e8f5f4;
  --card-bg:     #ffffff;
  --border:      rgba(0,0,0,.08); --border-2: rgba(0,0,0,.06);
  --text:        #0f172a; --text-2: #64748b; --text-3: #94a3b8;
  --nav-bg:      #0a1628; --nav-border: rgba(20,184,166,.15);
  --nav-text:    rgba(200,215,230,.65);
  --shadow:      0 4px 16px rgba(0,0,0,.08);
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--body-bg) !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 13px; line-height: 1.5;
  padding-top: 0 !important;
}

/* ── Boxed shell (same as scriptmonitor) ────────────────── */
.sm-shell {
  display: flex; flex-direction: column; min-height: 100vh;
  max-width: 1280px; margin: 0 auto;
  background: var(--bg);
  border-left: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  box-shadow: 0 0 60px rgba(0,0,0,.5);
}

/* ── Navigation (identical to scriptmonitor) ────────────── */
.sm-nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  height: 48px; display: flex; align-items: center;
}
.sm-nav-inner {
  display: flex; align-items: center; width: 100%; padding: 0 20px;
}
.sm-brand { display: flex; align-items: center; flex-shrink: 0; margin-right: 24px; text-decoration: none; }
.sm-brand img { height: 30px; width: auto; }
.sm-nav-menu { display: flex; align-items: center; flex: 1; }
.sm-nav-links { display: flex; align-items: center; flex: 1; }
.sm-nav-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sm-nav-link {
  display: inline-flex; align-items: center; height: 48px; padding: 0 12px;
  font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--nav-text); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--tr), border-color var(--tr);
  white-space: nowrap;
}
.sm-nav-link:hover,
.sm-nav-link:focus { color: var(--nav-active); text-decoration: none; }
.sm-nav-link.active { color: var(--nav-active); border-bottom-color: var(--nav-active-bd); }
.sm-nav-user { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-text); padding: 0 6px; white-space: nowrap; }
.sm-theme-btn { background: none; border: none; cursor: pointer; color: var(--nav-text); font-size: 16px; padding: 4px 8px; border-radius: var(--radius); transition: color var(--tr); }
.sm-theme-btn:hover { color: var(--nav-active); }
.sm-nav-toggler { display: none; background: none; border: none; cursor: pointer; color: var(--nav-text); font-size: 20px; padding: 4px 8px; margin-left: auto; }

/* Mobile nav */
@media (max-width: 767px) {
  .sm-nav-toggler { display: block; }
  .sm-nav-menu { display: none; position: absolute; top: 48px; left: 0; right: 0; z-index: 999; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); flex-direction: column; align-items: stretch; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
  .sm-nav-menu.open { display: flex; }
  .sm-nav-links { flex-direction: column; padding: 8px 20px 4px; }
  .sm-nav-right { flex-direction: row; flex-wrap: nowrap; padding: 10px 20px 14px; border-top: 1px solid var(--border-2); width: 100%; justify-content: space-between; align-items: center; gap: 8px; }
  .sm-nav-link { height: auto; padding: 10px 0; border-bottom: none; font-size: .8rem; }
  .sm-main { padding: 12px !important; }
}

/* ── Main content ────────────────────────────────────────── */
.sm-main { padding: 20px; flex: 1; }

/* ── Footer ──────────────────────────────────────────────── */
.sm-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; font-size: .72rem; color: var(--text-3);
  border-top: 1px solid var(--border);
}
.sm-footer a { color: var(--text-3); text-decoration: none; }
.sm-footer a:hover { color: var(--accent-text); }

/* ── Bootstrap layout overrides ─────────────────────────── */
/* Remove Bootstrap's padding-top offset for fixed-top navbar */
.container-fluid, .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.row { margin-left: 0 !important; margin-right: 0 !important; }
[class*="col-"] { padding-left: 0; padding-right: 0; }
.col-sm-12, .col-md-12, .col-12, .col { padding: 0; width: 100%; }

/* ── Typography (matching scriptmonitor exactly) ─────────── */
h1, .h1 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; }
h2, .h2 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: .75rem; }
h3, .h3 { font-size: .9rem;  font-weight: 600; color: var(--text); margin-bottom: .5rem; }
p { color: var(--text-2); }
code { background: var(--bg-3); color: var(--accent-text); padding: 1px 5px; border-radius: 3px; font-size: .8em; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text); opacity: .8; }
/* Table links should be light not teal — same as scriptmonitor */
.table td a, .table th a { color: var(--text); }
.table td a:hover { color: var(--accent-text); }
.text-muted { color: var(--text-2) !important; }

/* ── PSM: server group header (matches scriptmonitor source-hdr) ─ */
.server-label, h3.server-label {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; color: var(--accent-text) !important;
  background: rgba(13,148,136,.07) !important;
  padding: 7px 12px !important; margin: 16px 0 0 !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: none !important;
  display: flex; align-items: center; gap: 6px;
}
.server-label::before {
  content: '';
  display: inline-block;
  width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235eead4'%3E%3Cpath d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'/%3E%3C/svg%3E") no-repeat center/contain;
  opacity: .75; flex-shrink: 0;
}

/* ── Bootstrap: alerts ───────────────────────────────────── */
.alert { border-radius: var(--radius); font-size: 12px; margin-bottom: 12px; border: none; }
.alert-success { background: var(--green-lt) !important; color: var(--green-text) !important; }
.alert-danger  { background: var(--red-lt)   !important; color: var(--red-text)   !important; }
.alert-warning { background: var(--amber-lt) !important; color: var(--amber-text) !important; }
.alert-info    { background: var(--accent-lt)!important; color: var(--accent-text)!important; }

/* ── Bootstrap: cards (PSM config page) ──────────────────── */
.card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 16px;
  box-shadow: none;
}
.card-header {
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: .78rem; font-weight: 600; color: var(--text);
  padding: 10px 14px; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.card-body { padding: 14px; background: transparent; }
body.light .card-header { background: var(--bg-2) !important; }

/* ── Bootstrap: tables (identical to scriptmonitor sm-table) */
.table {
  color: var(--text) !important; font-size: 13px;
  border-collapse: collapse; width: 100%;
}
.table-bordered { border: 1px solid var(--border) !important; border-radius: var(--radius-lg); overflow: hidden; }
.table thead th {
  background: var(--bg-2) !important; color: var(--text-2) !important;
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 10px !important; white-space: nowrap;
  border-bottom: 2px solid var(--border) !important;
  border-top: none !important;
  vertical-align: middle !important;
}
.table td, .table th {
  padding: 8px 10px !important;
  border-color: var(--border) !important;
  vertical-align: middle !important;
  color: var(--text);
}
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02) !important; }
.table-hover tbody tr:hover { background: rgba(13,148,136,.06) !important; }
body.light .table { color: var(--text) !important; }
body.light .table thead th { background: var(--bg-2) !important; }
body.light .table-striped tbody tr:nth-of-type(odd) { background: rgba(0,0,0,.025) !important; }

/* ── PSM: uptime bar (styled as mini progress bar) ───────── */
.bar-uptime, .progress-uptime, .uptime-row {
  background: var(--bg-3); border-radius: 3px; height: 7px; overflow: hidden;
}
.bar-uptime .fill, .progress-uptime .progress-bar, .uptime-row .fill {
  background: var(--green); height: 100%; border-radius: 3px;
  transition: width .3s ease;
}
/* PSM uptime text labels */
td .text-success { color: var(--green-text) !important; }
td .text-danger  { color: var(--red-text)   !important; }
td .text-warning { color: var(--amber-text) !important; }

/* ── Bootstrap: badges → scriptmonitor pills ─────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; border: none !important;
  white-space: nowrap;
}
/* Online / Success */
.badge-success, .badge.bg-success, .badge-online {
  background: var(--green-lt) !important; color: var(--green-text) !important;
}
/* Offline / Danger */
.badge-danger, .badge.bg-danger, .badge-offline {
  background: var(--red-lt) !important; color: var(--red-text) !important;
}
/* Warning */
.badge-warning, .badge.bg-warning {
  background: var(--amber-lt) !important; color: var(--amber-text) !important;
}
/* Secondary / inactive */
.badge-secondary, .badge.bg-secondary {
  background: var(--gray-lt) !important; color: var(--gray) !important;
}
/* Info */
.badge-info, .badge.bg-info {
  background: var(--accent-lt) !important; color: var(--accent-text) !important;
}

/* ── Bootstrap: buttons (identical to scriptmonitor btns) ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; font-size: 12px; font-family: var(--font); font-weight: 500;
  border-radius: var(--radius); cursor: pointer; text-decoration: none;
  border: 1px solid transparent; transition: all var(--tr);
  line-height: 1.4;
}
.btn-primary  { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-primary:hover { background: var(--accent-hv) !important; border-color: var(--accent-hv) !important; color: #fff !important; }
.btn-danger   { background: var(--red) !important;   border-color: var(--red) !important;   color: #fff !important; }
.btn-danger:hover { opacity: .9; }
.btn-success  { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }
.btn-warning  { background: var(--amber) !important; border-color: var(--amber) !important; color: #000 !important; }
.btn-secondary, .btn-default, .btn-light, .btn-outline-secondary {
  background: var(--bg-2) !important; border-color: var(--border-2) !important; color: var(--text) !important;
}
.btn-secondary:hover { background: var(--bg-3) !important; }
.btn-link { background: none !important; border: none !important; color: var(--accent-text) !important; padding: 0; }
.btn-sm { padding: 4px 9px !important; font-size: 11px !important; }
.btn-xs { padding: 2px 7px !important; font-size: 10px !important; }
.btn-group .btn { border-radius: 0 !important; }
.btn-group .btn:first-child { border-radius: var(--radius) 0 0 var(--radius) !important; }
.btn-group .btn:last-child  { border-radius: 0 var(--radius) var(--radius) 0 !important; }

/* ── Bootstrap: forms ────────────────────────────────────── */
.form-control, .form-select, .custom-select {
  background: var(--bg-2) !important; color: var(--text) !important;
  border: 1px solid var(--border-2) !important; border-radius: var(--radius) !important;
  font-family: var(--font) !important; font-size: 12px !important;
  padding: 6px 10px; transition: border-color var(--tr), box-shadow var(--tr);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-2) !important; color: var(--text) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(13,148,136,.2) !important;
  outline: none;
}
label { color: var(--text-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; display: block; }
.form-group, .form-row { margin-bottom: 14px; }
.form-check-label { color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0; }
.form-check-input { background-color: var(--bg-2); border-color: var(--border-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.custom-control-label { color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0; }
.custom-control-label::before { background: var(--bg-2) !important; border-color: var(--border-2) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--accent) !important; border-color: var(--accent) !important; }
select option { background: var(--bg-3); color: var(--text); }
.input-group-text { background: var(--bg-3) !important; border-color: var(--border-2) !important; color: var(--text-2) !important; font-size: 12px; }

/* bootstrap-select dropdown */
.bootstrap-select .btn { background: var(--bg-2) !important; border-color: var(--border-2) !important; color: var(--text) !important; }
.bootstrap-select .dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); }
.bootstrap-select .dropdown-item { color: var(--text); font-size: 12px; }
.bootstrap-select .dropdown-item:hover { background: var(--bg-2); }
.bootstrap-select .dropdown-item.active { background: var(--accent); color: #fff; }

/* ── Bootstrap: nav-tabs (server detail history/log tabs) ── */
.nav-tabs {
  border-bottom: 1px solid var(--border) !important; margin-bottom: 16px; flex-wrap: nowrap; overflow-x: auto;
}
.nav-tabs .nav-link {
  color: var(--text-2) !important; font-size: .72rem !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px;
  border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  transition: color var(--tr), border-color var(--tr); white-space: nowrap;
}
.nav-tabs .nav-link:hover { color: var(--text) !important; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  background: transparent !important; color: var(--accent-text) !important;
  border-bottom-color: var(--accent) !important;
}
.tab-content { padding-top: 0; }

/* ── Bootstrap: modals ───────────────────────────────────── */
.modal-content { background: var(--card-bg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; color: var(--text); }
.modal-header { border-bottom: 1px solid var(--border) !important; padding: 12px 16px; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 10px 16px; }
.modal-title { font-size: .9rem; font-weight: 600; color: var(--text); }
.modal-backdrop.show { opacity: .6; background: rgba(0,0,0,.8); }
.close { color: var(--text-3) !important; opacity: 1 !important; }
.close:hover { color: var(--text) !important; }

/* ── Bootstrap: dropdowns ────────────────────────────────── */
.dropdown-menu { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dropdown-item { color: var(--text); font-size: 12px; padding: 6px 14px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-2); color: var(--text); }
.dropdown-divider { border-top-color: var(--border); }

/* ── Bootstrap: pagination ───────────────────────────────── */
.pagination { gap: 4px; }
.page-item .page-link {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2);
  font-size: 11px; padding: 4px 9px; border-radius: var(--radius) !important;
  transition: all var(--tr);
}
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-item .page-link:hover { background: var(--bg-3); color: var(--text); }
.page-item.disabled .page-link { background: transparent; color: var(--text-3); border-color: var(--border); }

/* ── PSM-specific: server status page ───────────────────── */
/* "Last check" / timestamps */
.last-check { font-size: 11px; color: var(--text-2); }
/* Server name in table */
.server-name { font-weight: 600; color: var(--text); }
.server-name a { color: var(--text); font-weight: 600; }
.server-name a:hover { color: var(--accent-text); }
.server-ip { font-size: 10px; color: var(--text-3); }

/* ── PSM: history/chart page ─────────────────────────────── */
/* Chart.js canvas — force dark background area */
.chart-container, .history-chart { background: var(--bg-2); border-radius: var(--radius-lg); padding: 12px; border: 1px solid var(--border); }
canvas { max-width: 100%; }

/* ── PSM: sidebar (server detail page) ─────────────────── */
.psm-sidebar { padding: 0; }
.psm-sidebar .card { margin-bottom: 12px; }
.psm-sidebar .card-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.psm-sidebar table.table td:first-child { color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

/* ── PSM: config/settings page ──────────────────────────── */
.config-section { margin-bottom: 24px; }
.config-section h3 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); padding-bottom: 6px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
fieldset { border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 14px !important; margin-bottom: 16px; }
legend { font-size: .72rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--text-3) !important; padding: 0 8px !important; width: auto !important; float: none !important; }

/* ── PSM: log page table ────────────────────────────────── */
.table-log td:nth-child(5) { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-2); }

/* ── Login page ──────────────────────────────────────────── */
.form-signin {
  max-width: 380px; margin: 60px auto;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow);
}
.login-logo { text-align: center; margin-bottom: 20px; }
.login-logo img { height: 36px; width: auto; }
.form-signin h1 { font-size: 1.15rem; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 20px; }
.cf-turnstile { margin: 12px 0; }

/* ── Misc ────────────────────────────────────────────────── */
.badge-pill { border-radius: 10px !important; }
.breadcrumb { background: transparent !important; font-size: 11px; }
.breadcrumb-item a { color: var(--accent-text); }
.breadcrumb-item.active { color: var(--text-2); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-3); }
pre, code { font-family: var(--font-mono); }
.table code { background: var(--bg-3); color: var(--amber-text); }
::placeholder { color: var(--text-3) !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ============================================================
   Patch v1.1 — comparison-driven fixes
   ============================================================ */

/* ── FIX 1 CRITICAL: Remove PSM's solid green/red row backgrounds ── */
/* PSM adds class="success"/"danger" to <tr> for online/offline */
.table > tbody > tr.success,
.table > tbody > tr.success > td,
.table > tbody > tr.success > th { background: rgba(16,185,129,.03) !important; }
.table > tbody > tr.danger,
.table > tbody > tr.danger > td,
.table > tbody > tr.danger > th  { background: rgba(239,68,68,.03)  !important; }
.table > tbody > tr.warning,
.table > tbody > tr.warning > td { background: rgba(245,158,11,.03) !important; }
/* Also covers Bootstrap 4 contextual helpers */
.table-success, .table-success > td, .table-success > th { background: rgba(16,185,129,.03)  !important; color: var(--text) !important; }
.table-danger,  .table-danger  > td, .table-danger  > th { background: rgba(239,68,68,.03)   !important; color: var(--text) !important; }
.table-warning, .table-warning > td, .table-warning > th { background: rgba(245,158,11,.03)  !important; color: var(--text) !important; }

/* ── FIX 2: Hide PSM progress bar under config tabs ─────── */
/* PSM shows a thin colored bar indicating config section scroll position */
main .progress, .sm-main .progress { display: none !important; }

/* ── FIX 3: Status cards — visible border + card bg ─────── */
/* PSM card view: each server is a .card or .col .card */
.server-box, .status-card, .card.server-card,
.col-sm-6 .card, .col-md-6 .card, .col-lg-4 .card,
.col-md-4 .card, .col-sm-12 .card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 12px;
  transition: border-color var(--tr);
}
.col-sm-6 .card:hover, .col-md-6 .card:hover, .col-md-4 .card:hover {
  border-color: var(--accent) !important;
}
/* Card name (h5 inside card-body) */
.card .card-title, .card h4, .card h5 {
  font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 8px;
}
/* Card meta lines */
.card .card-text, .card p { font-size: 11px; color: var(--text-2); margin-bottom: 3px; }

/* ── FIX 4: Search button — rect not circle ──────────────── */
/* PSM search: <button> with just a magnifier icon, no label */
.psm-search, button.psm-search,
form.search-form button[type="submit"],
.input-group > .btn:only-child,
button.btn.btn-default.btn-sm > i.fas.fa-search,
button.btn:has(i.fa-search),
.search-form .btn { border-radius: var(--radius) !important; }
/* The circular button is likely a plain .btn.btn-default with only an icon */
/* Target it by its icon child */
.btn > .fas.fa-search, .btn > .fa-search { font-size: 13px; }
/* If the button has no text (icon-only), give it a fixed width */
button:has(> .fas.fa-search):not(:has(> span)):not(:has(> text)) {
  border-radius: var(--radius) !important;
  width: auto !important; height: auto !important;
  padding: 6px 12px !important;
}

/* ── FIX 5: Log messages — single line, truncate ─────────── */
/* Log table last column (message) */
.table td:last-child {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-2);
}
/* But don't truncate on servers table action column */
.table-servers td:last-child { max-width: none; white-space: normal; }

/* ── FIX 6: Config/Profile section dividers ──────────────── */
/* PSM uses <h3 class="col-sm-12"> or similar as section headers */
.col-sm-12 > h3.panel-title,
.section-header, .config-group-title,
fieldset > legend,
.col-sm-12 > h4 {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  color: var(--text-3) !important;
  padding: 0 0 6px 0 !important; margin: 20px 0 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── FIX 7: Input-group addon styling ───────────────────── */
.input-group-append .btn,
.input-group-append .input-group-text,
.input-group > span.input-group-addon {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-2) !important;
  border-left: none !important;
  color: var(--text-2) !important;
  font-size: 11px;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}
.input-group .form-control:not(:last-child) {
  border-radius: var(--radius) 0 0 var(--radius) !important;
  border-right: none !important;
}

/* ── FIX 8: Monitoring icons (Servers table) ──────────────── */
/* The eye/email/notification dot icons in last column */
.server-actions a, .server-actions button,
td > a > i.fas, td > a > i.far,
td > button > i.fas, td > button > i.far {
  color: var(--text-2) !important; transition: color var(--tr);
}
td > a:hover > i, td > button:hover > i { color: var(--accent-text) !important; }
/* Active monitoring indicator dot */
.fas.fa-circle { font-size: 8px !important; vertical-align: middle; }
/* Online = green dot, offline = red */
.text-success .fas.fa-circle { color: var(--green) !important; }
.text-danger  .fas.fa-circle { color: var(--red)   !important; }

/* ── FIX 9: Small/hint text under form fields ────────────── */
small, .form-text, .text-muted small, .help-block {
  font-size: 11px !important; color: var(--text-3) !important;
  display: block; margin-top: 4px; line-height: 1.4;
}
small a { color: var(--accent-text) !important; }

/* ── FIX 10: Profile/Config page layout padding ──────────── */
/* PSM wraps config content in Bootstrap grid — remove excess padding */
.col-sm-10, .col-md-10, .col-lg-10 { padding: 0 !important; }
.col-sm-offset-1, .col-md-offset-1 { margin-left: 0 !important; }

/* ── FIX 11: Active nav tab underline visibility ─────────── */
/* Make sure the active tab underline is clearly visible */
.nav-tabs .nav-link.active::after,
.nav-tabs .nav-item.active .nav-link::after { content: ''; display: block; }

/* ── FIX 12: 2FA section in Profile ─────────────────────── */
/* The 2FA warning alert */
.alert-totp, .totp-section .alert {
  background: var(--amber-lt) !important; color: var(--amber-text) !important;
}
/* Enable 2FA button */
.btn-totp, button[href*="totp"], a[href*="totp"] {
  background: var(--accent) !important; color: #fff !important;
  border-color: var(--accent) !important;
}

/* ── FIX 13: Dropdown menu (3-dot server actions) ───────── */
.dropdown-menu { min-width: 140px; }
.dropdown-item i { width: 16px; margin-right: 6px; color: var(--text-3); }
.dropdown-item:hover i { color: var(--accent-text); }

/* ── FIX 14: Bootstrap .panel legacy (PSM uses both cards and panels) */
.panel {
  background: var(--card-bg) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important; margin-bottom: 16px;
}
.panel-heading, .panel-header {
  background: rgba(255,255,255,.03) !important; border-bottom: 1px solid var(--border) !important;
  padding: 10px 14px; font-size: .78rem; font-weight: 600;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--text);
}
.panel-body { padding: 14px; }

/* ── FIX 15: Checkbox toggles (Bootstrap custom-switch) ──── */
.custom-switch .custom-control-label::before { background: var(--bg-3) !important; border-color: var(--border-2) !important; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--accent) !important; }
.custom-switch .custom-control-label::after { background: #fff !important; }

/* ── FIX 16: Status page — card view consistent gap ──────── */
.row.server-list { gap: 0; }
.row.server-list [class*="col-"] { padding: 6px !important; }

/* ── FIX 17: Server name link hover (matches scriptmonitor sc-link) */
.table td a, .card-title a, .server-name a {
  color: inherit; text-decoration: none; transition: color var(--tr);
}
.table td a:hover, .card-title a:hover, .server-name a:hover {
  color: var(--accent-text) !important;
}

/* ── FIX 18: Uptime bar refinement ───────────────────────── */
.progress { background: var(--bg-3) !important; border-radius: 3px !important; height: 8px !important; overflow: hidden; }
.progress-bar { border-radius: 3px !important; transition: width .4s ease; }
.progress-bar.bg-success, .progress-bar.progress-bar-success { background: var(--green) !important; }
.progress-bar.bg-danger,  .progress-bar.progress-bar-danger  { background: var(--red)   !important; }
/* Only show progress bars that are inside the server uptime context, hide others */
.sm-main > .row > .col .progress,
.tab-content .progress { display: none !important; }
/* But show uptime progress bars specifically */
.uptime-progress .progress,
td .progress { display: flex !important; }

/* ============================================================
   v1.2 — beat style.min.css !important overrides
   ============================================================ */

/* ── CRITICAL: bg-success / bg-danger row override ──────── */
/* PSM style.min.css has .bg-success{background:#0E6800!important} */
/* Need html+body+table+tbody+tr+td chain to win specificity  */
html body .table > tbody > tr.bg-success,
html body .table > tbody > tr.bg-success > td,
html body .table > tbody > tr.bg-success > th,
html body table > tbody > tr.bg-success > td,
html body tr.bg-success > td,
html body tr.bg-success { background-color: rgba(16,185,129,.04) !important; }

html body .table > tbody > tr.bg-danger,
html body .table > tbody > tr.bg-danger > td,
html body .table > tbody > tr.bg-danger > th,
html body tr.bg-danger > td,
html body tr.bg-danger { background-color: rgba(239,68,68,.04) !important; }

html body .table > tbody > tr.bg-warning > td,
html body tr.bg-warning > td { background-color: rgba(245,158,11,.04) !important; }

/* text-white on green rows makes text invisible */
html body tr.bg-success.text-white td,
html body tr.bg-success .text-white,
html body .table tr.bg-success td { color: var(--text) !important; }

/* Bootstrap bg utility classes (non-table context keep subtle tint) */
html body .bg-success:not(tr):not(td) { background-color: var(--green-lt) !important; color: var(--green-text) !important; }
html body .bg-danger:not(tr):not(td)  { background-color: var(--red-lt)   !important; color: var(--red-text)   !important; }

/* ── Body: remove PSM fixed-nav margin, force Inter ─────── */
html body {
  font-family: 'Inter', system-ui, sans-serif !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ── Links: no underline on hover ────────────────────────── */
html body a:hover,
html body a:focus { text-decoration: none !important; color: var(--accent-text) !important; }
html body .table a:hover { color: var(--accent-text) !important; }
/* Nav links keep their own color */
html body .sm-nav a:hover { color: var(--nav-active) !important; }

/* ── Table: 12px, Inter, no Bootstrap stripes ────────────── */
html body .table { font-size: 12px !important; font-family: 'Inter', system-ui, sans-serif !important; }
html body .table td, html body .table th { font-family: 'Inter', system-ui, sans-serif !important; }

/* ── Mono: latency / numbers / IPs ──────────────────────── */
/* Scriptmonitor uses .mono for all numeric/code values */
.mono,
.table td.latency, .table td:nth-child(4),
td[class*="latency"], .latency,
.server-latency, .response-time {
  font-family: 'Consolas', 'Courier New', monospace !important;
  font-size: 11px !important;
}

/* ── Toggle view buttons — right side ───────────────────── */
/* PSM status/header.tpl.html floats these right but Bootstrap 4
   dropped .pull-right — restore it */
.pull-right  { float: right !important; }
.float-right { float: right !important; }
/* The toggle container sits in a col — make it flex push-right */
.col-sm-12:has(> .btn-group) {
  display: flex !important; justify-content: flex-end !important;
}
/* Also target when it's a direct div wrapper */
.col-sm-12 > div[style*="float:right"],
.col-sm-12 > div[style*="float: right"] { margin-left: auto !important; }
/* Override scriptmonitor's .view-toggle if PSM reuses that class */
.btn-group.view-toggle, div.view-toggle { margin-left: auto !important; }

/* ── Headings with inline toggle — flex row ─────────────── */
/* "Status" h1 and the toggle should be on same line */
.sm-main > h1, .sm-main .psm-page-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ============================================================
   v1.3 — status page: filter pills, cards, badges, search
   ============================================================ */

/* ── Page header: h1 + toggle on same row ───────────────── */
.psm-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.psm-page-hdr .psm-page-title { margin-bottom: 0; }
.psm-accessories { display: flex; align-items: center; gap: 8px; }
.psm-status-hdr { display: flex; align-items: center; }

/* ── Filter bar: pills + search ─────────────────────────── */
.psm-filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.psm-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Status filter pills (match scriptmonitor pill style) ── */
.psm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; user-select: none; white-space: nowrap;
  background: var(--bg-2); border: 1px solid var(--border-2);
  color: var(--text-2); transition: all .2s ease;
}
.psm-pill:hover { border-color: var(--border); color: var(--text); }
.psm-pill-all.active  { background: var(--bg-3); color: var(--text); border-color: var(--border); }
.psm-pill-online.active  { background: var(--green-lt); color: var(--green-text); border-color: rgba(16,185,129,.4); }
.psm-pill-offline.active { background: var(--red-lt);   color: var(--red-text);   border-color: rgba(239,68,68,.4); }
.psm-pill-warning.active { background: var(--amber-lt); color: var(--amber-text); border-color: rgba(245,158,11,.4); }

/* ── Search input ────────────────────────────────────────── */
.psm-search-input {
  background: var(--bg-2); border: 1px solid var(--border-2);
  color: var(--text); border-radius: var(--radius);
  padding: 5px 10px; font-size: 11px; width: 200px;
  outline: none; font-family: var(--font);
  transition: border-color .2s ease;
}
.psm-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(13,148,136,.2); }
.psm-search-input::placeholder { color: var(--text-3); }

/* ── Status badges ───────────────────────────────────────── */
.psm-badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
}
.psm-badge-online  { background: var(--green-lt); color: var(--green-text); }
.psm-badge-offline { background: var(--red-lt);   color: var(--red-text);   }
.psm-badge-warning { background: var(--amber-lt); color: var(--amber-text); }

/* ── Card grid ───────────────────────────────────────────── */
.psm-card-grid { gap: 0; }
.psm-card-col { padding: 6px !important; }
.psm-server-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  cursor: pointer; margin-bottom: 0 !important;
  transition: border-color .2s ease, box-shadow .2s ease;
  /* Override PSM's bg-success/bg-danger/bg-warning entirely */
  background-color: var(--card-bg) !important;
  color: var(--text) !important;
}
.psm-server-card:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 1px rgba(13,148,136,.2); }
.psm-server-card .card-body { padding: 12px 14px; }

.psm-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.psm-card-name {
  font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
  word-break: break-word; flex: 1;
}
.psm-card-name:hover { color: var(--accent-text); }

.psm-card-meta { font-size: 11px; color: var(--text-2); }
.psm-card-meta > div { margin-bottom: 3px; }
.psm-card-meta span { color: var(--text); }
.psm-card-meta .mono { font-family: 'Consolas','Courier New',monospace; color: var(--accent-text); }

/* ── Table wrapper ───────────────────────────────────────── */
.sm-table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; overflow-x: auto;
}
.sm-table-wrap .table { margin-bottom: 0; }

/* ── Status table server name link ───────────────────────── */
.psm-server-link { color: var(--text); font-weight: 600; text-decoration: none; }
.psm-server-link:hover { color: var(--accent-text); }

/* ── View toggle active state ────────────────────────────── */
.btn-group .btn.active, .btn-group .btn.active:focus {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: #fff !important;
}
.psm-status-table tr { cursor: pointer; }
.psm-status-table tbody tr:hover { background: rgba(13,148,136,.06) !important; }

/* ============================================================
   v1.4 — comprehensive UI polish (all 15+ issues)
   ============================================================ */

/* ── 1. CARDS / PANELS: force dark bg everywhere ─────────── */
/* Beat PSM's style.min.css .card{background:#fff} */
html body .card,
html body .card .card-body,
html body .card-body,
html body .panel,
html body .panel-default,
html body .panel-body,
html body .panel-default .panel-body { background-color: var(--card-bg) !important; color: var(--text) !important; }
html body .card .card-header,
html body .card-header,
html body .panel-heading,
html body .panel-default .panel-heading { background-color: rgba(255,255,255,.04) !important; color: var(--text) !important; border-color: var(--border) !important; }
html body .bg-white  { background-color: var(--card-bg) !important; color: var(--text) !important; }
html body .bg-light  { background-color: var(--bg-2)    !important; color: var(--text) !important; }
html body .text-dark { color: var(--text) !important; }
/* Card inside card (nested) */
html body .card .card  { background-color: var(--bg-2) !important; }

/* ── 2. DROPDOWN OVERFLOW: let dropdowns escape table ─────── */
html body .table-responsive,
html body .row.table-responsive,
html body .col-sm-12 > .table-responsive { overflow: visible !important; }
/* Dropdown menu high z-index */
html body .dropdown-menu { z-index: 9999 !important; position: absolute !important; }
/* item-action dropdown needs relative positioning on parent */
html body td .item-action { position: relative; }
html body td .item-action .dropdown-menu { right: 0; left: auto; min-width: 140px; }

/* ── 3. BUTTONS: compact like scriptmonitor ──────────────── */
html body .btn,
html body a.btn,
html body button.btn,
html body input.btn {
  padding: 5px 12px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 0 !important;
}
html body .btn.btn-sm, html body .btn-sm { padding: 3px 8px !important; font-size: 11px !important; }
html body .btn.btn-lg, html body .btn-lg { padding: 5px 12px !important; font-size: 12px !important; }
/* Specific large buttons that PSM renders without .btn-sm */
html body .btn.btn-danger,
html body .btn.btn-success,
html body .btn.btn-primary { min-width: 0 !important; }

/* ── 4. SEARCH: inline rect, same height as scriptmonitor ── */
/* PSM search markup: .searchbar > .search_input + .search_icon */
html body .searchbar {
  display: inline-flex !important; align-items: center !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: var(--radius) !important;
  height: 30px !important; padding: 0 !important;
  overflow: hidden; margin-bottom: 12px !important;
  width: auto !important; min-width: 200px !important;
}
html body .search_input {
  background: transparent !important; border: none !important;
  color: var(--text) !important; font-size: 12px !important;
  font-family: var(--font) !important;
  height: 30px !important; line-height: 30px !important;
  padding: 0 10px !important; flex: 1 !important;
  outline: none !important;
}
html body .search_icon {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important;
  min-width: 30px !important; min-height: 30px !important;
  background: var(--bg-3) !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--border-2) !important;
  color: var(--text-2) !important;
}
html body .search_icon:hover { color: var(--accent-text) !important; }
html body .search_icon p { display: none !important; }
html body .search_icon i { font-size: 12px !important; }

/* ── 5. LOG PAGE: column widths + single-line message ──────── */
/* Target PSM's log table specifically */
html body .table td:has(> br),
html body .table td br { display: none !important; }
/* Log column widths - DATE narrow, MESSAGE wide, USERS narrow */
html body .table th:first-child,
html body .table td:first-child { width: 120px !important; white-space: nowrap; }
html body .table th:last-child,
html body .table td:last-child { width: 100px !important; }
/* Message column fills remaining space */
html body .table th:nth-child(2),
html body .table td:nth-child(2) { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 6. USERS PAGE: Sites column pills ───────────────────── */
/* .full class is the servers/sites column in PSM */
html body td.full { min-width: 280px !important; }
html body td.full a {
  display: inline-flex !important; align-items: center !important;
  background: var(--bg-2) !important; border: 1px solid var(--border-2) !important;
  border-radius: 12px !important; padding: 2px 10px !important;
  margin: 2px 3px !important; font-size: 11px !important;
  color: var(--text-2) !important; text-decoration: none !important;
  white-space: nowrap !important; line-height: 1.4 !important;
  transition: border-color .15s, color .15s !important;
}
html body td.full a:hover { border-color: var(--accent) !important; color: var(--accent-text) !important; }
/* Remove the <br> between pills via display block on a */
html body td.full br { display: none !important; }

/* ── 7. SERVER DETAIL PAGE: section headers alignment ──────── */
/* PSM's server update/view sections use uppercase labels */
html body .col-sm-2.col-form-label,
html body .field-label, html body label.col-sm-2,
html body label.col-form-label {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  color: var(--text-3) !important; padding-top: 8px !important;
}
/* Section dividers in server edit (CUSTOM HEADER, AUTHENTICATION etc.) */
html body .col-sm-12 > h4 {
  font-size: 10px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  color: var(--text-3) !important;
  padding: 4px 0 8px !important; margin: 20px 0 10px !important;
  border-bottom: 1px solid var(--border) !important;
}
/* "Go back" and "Edit" buttons on detail page */
html body .btn.btn-secondary,
html body .btn.btn-default { color: var(--text) !important; background: var(--bg-2) !important; border-color: var(--border-2) !important; }
html body .btn.btn-secondary:hover { background: var(--bg-3) !important; color: var(--accent-text) !important; }

/* ── 8. UPTIME CHART AREA: dark bg ──────────────────────── */
/* Pie/donut chart area next to the latency chart */
html body #server-latency-container,
html body .server-latency, html body .chart-wrapper,
html body .col-md-4 canvas, html body .col-md-8 canvas,
html body .uptime-donut, html body .donut-container {
  background: transparent !important;
}
/* Force all Bootstrap col divs that contain charts to dark bg */
html body .row.chart-row > [class*="col-"],
html body .row > [class*="col-"] > canvas { background: transparent !important; }

/* ── 9. SM-TABLE-WRAP: don't clip dropdowns ─────────────── */
html body .sm-table-wrap { overflow: visible !important; }

/* ── 10. SERVER LIST TABLE: status col align ─────────────── */
html body .psm-status-table td { vertical-align: middle !important; }

/* ── 11. NAV active state visible ────────────────────────── */
html body .sm-nav-link.active { color: var(--nav-active) !important; border-bottom: 2px solid var(--nav-active-bd) !important; }

/* ── 12. Pre/code in detail page output ─────────────────── */
html body pre { background: var(--bg-3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 10px !important; font-size: 11px !important; white-space: pre-wrap !important; word-break: break-word !important; }

/* ── 13. Config page: section headers ───────────────────── */
/* PSM config uses Bootstrap .col-sm-12 for section headers */
html body .config-section-header,
html body form .col-sm-12 > h4,
html body form .col-sm-12 > .text-muted.mt-4 { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: var(--text-3) !important; border-bottom: 1px solid var(--border) !important; padding-bottom: 6px !important; margin: 20px 0 12px !important; }

/* ── 14. Input show/hide password button (red dots icon) ─── */
html body .input-group-append.psm-password { position: relative; }

/* ── 15. Table: prevent overall last-col truncation on non-log pages */
/* Only truncate on log tables, not servers/users tables */
html body .table.table-bordered td:last-child,
html body .table.table-bordered th:last-child { 
  width: auto !important; max-width: none !important; 
  overflow: visible !important; white-space: normal !important;
}
/* Undo the column width overrides for bordered tables (servers/users) */
html body .table.table-bordered th:first-child,
html body .table.table-bordered td:first-child { width: auto !important; }

/* ── Users: site pills ───────────────────────────────────── */
.psm-sites-col { min-width: 300px !important; padding: 8px 10px !important; }
.psm-site-pill {
  display: inline-flex !important; align-items: center !important;
  background: var(--bg-2) !important; border: 1px solid var(--border-2) !important;
  border-radius: 12px !important; padding: 2px 10px !important;
  margin: 2px !important; font-size: 11px !important;
  color: var(--text-2) !important; text-decoration: none !important;
  white-space: nowrap !important; transition: all .15s !important;
}
.psm-site-pill:hover { border-color: var(--accent) !important; color: var(--accent-text) !important; }

/* ============================================================
   v1.5 — full template retheme (view, edit, chart, log, config)
   ============================================================ */

/* ── Sites list: status icon colors ─────────────────────── */
html body .psm-sites-list .fas.fa-check-circle { color: var(--green-text) !important; }
html body .psm-sites-list .fas.fa-times-circle  { color: var(--red-text)   !important; }
html body .psm-sites-list .fas.fa-exclamation-triangle { color: var(--amber-text) !important; }
html body .psm-sites-list td:nth-child(5) { font-family: 'Consolas','Courier New',monospace !important; }

/* ── Site edit form ──────────────────────────────────────── */
.psm-edit-form { width: 100%; }
.psm-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-bottom: 16px; }
.psm-edit-actions { display: flex; align-items: center; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); }
@media(max-width:768px) { .psm-edit-grid { grid-template-columns: 1fr; } }

/* ── Site detail view ────────────────────────────────────── */
.psm-view-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }

/* Status icon card */
.psm-view-status-card {
  flex: 0 0 120px; min-height: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--card-bg); gap: 8px; padding: 16px;
}
.psm-view-status-card i { font-size: 2.5rem; }
.psm-status-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.psm-status-on { border-color: rgba(16,185,129,.4) !important; }
.psm-status-on i, .psm-status-on .psm-status-label { color: var(--green-text); }
.psm-status-off { border-color: rgba(239,68,68,.4) !important; }
.psm-status-off i, .psm-status-off .psm-status-label { color: var(--red-text); }
.psm-status-warning { border-color: rgba(245,158,11,.4) !important; }
.psm-status-warning i, .psm-status-warning .psm-status-label { color: var(--amber-text); }

/* Info cards */
.psm-view-card { flex: 1; min-width: 220px; }
.psm-view-output-card { flex: 0 0 100%; }

/* Info list (replaces list-group-item) */
.psm-info-list { list-style: none; padding: 0; margin: 0; }
.psm-info-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.psm-info-list li:last-child { border-bottom: none; }
.psm-info-list span { color: var(--text-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.psm-info-list code { font-family: 'Consolas','Courier New',monospace; font-size: 11px; color: var(--accent-text); background: none; padding: 0; }

/* Output section */
.psm-output-row { margin-bottom: 14px; }
.psm-output-row label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); font-weight: 700; }
.psm-output-text { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.psm-output-text.error { color: var(--red-text); }
.psm-output-pre { background: var(--bg-3) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; padding: 10px !important; font-size: 11px !important; font-family: 'Consolas','Courier New',monospace !important; white-space: pre-wrap !important; word-break: break-word !important; max-height: 200px; overflow-y: auto; }

/* list-group-item override */
html body .list-group-item {
  background-color: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html body .list-group-item:hover { background-color: rgba(13,148,136,.05) !important; }
html body .list-group-item dt { color: var(--text-2) !important; font-size: 11px; font-weight: 600; }
html body .list-group-item dd { color: var(--text) !important; font-size: 12px; }
html body .list-group { border: none; }

/* ── History charts ──────────────────────────────────────── */
.psm-chart-wrap {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px; margin-bottom: 16px;
  width: 100%;
}
.psm-chart-canvas { flex: 1; min-width: 0; }
.psm-chart-controls { flex: 0 0 160px; display: flex; flex-direction: column; align-items: flex-start; }
/* Uptime meter dark bg */
html body #meter { background: var(--bg-3) !important; }

/* ── Log page ────────────────────────────────────────────── */
.psm-log-tabs { margin-bottom: 0; }
.psm-log-table td:first-child { white-space: nowrap; }

/* ── Config page — card grid ──────────────────────────────── */
.psm-config-form { width: 100%; }
.psm-config-tabs { margin-bottom: 0; }
.psm-config-tabs-content { padding-top: 0; }
.psm-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 16px;
}
.psm-config-grid.active { display: grid !important; }
.psm-config-wide { grid-column: 1 / -1; }
/* Each card's save button sits inside the card-body — keep compact */
.psm-config-grid .card .btn { margin-top: 8px; }
@media(max-width:640px) { .psm-config-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v1.6 — undo bad generic overrides, fix all tables
   ============================================================ */

/* ── CRITICAL: undo v1.4 generic nth-child overrides ──────── */
html body .table th:first-child,
html body .table td:first-child { width: auto !important; white-space: normal !important; }
html body .table th:last-child,
html body .table td:last-child  { width: auto !important; }
html body .table th:nth-child(2),
html body .table td:nth-child(2) {
  max-width: none !important; overflow: visible !important;
  white-space: normal !important; text-overflow: clip !important;
}

/* ── FIX: overflow visible for dropdowns everywhere ─────── */
html body .card { overflow: visible !important; }
html body .sm-table-wrap { overflow: visible !important; }
html body .table-responsive { overflow: visible !important; }
/* Specific z-index for dropdown menus */
html body .dropdown-menu { z-index: 10000 !important; }
html body td .item-action { position: relative !important; }
html body td .item-action .dropdown-menu { right: 0 !important; left: auto !important; }

/* ── FIX: nav-tabs scrollbar (log page black bar) ──────── */
html body .nav-tabs {
  overflow-x: auto !important; overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}
html body .nav-tabs::-webkit-scrollbar { height: 0 !important; display: none !important; }
html body .nav-tabs { scrollbar-width: none !important; -ms-overflow-style: none !important; }

/* ── STATUS TABLE: proper column widths ─────────────────── */
.psm-status-table { table-layout: fixed; width: 100%; }
.psm-status-table th:nth-child(1), .psm-status-table td:nth-child(1) { width: auto; min-width: 150px; }
.psm-status-table th:nth-child(2), .psm-status-table td:nth-child(2) { width: 90px; text-align: center; }
.psm-status-table th:nth-child(3), .psm-status-table td:nth-child(3) { width: 140px; white-space: nowrap; }
.psm-status-table th:nth-child(4), .psm-status-table td:nth-child(4) { width: 240px; }
.psm-status-table th:nth-child(5), .psm-status-table td:nth-child(5) { width: 90px; text-align: right; font-family: 'Consolas','Courier New',monospace; font-size: 11px; }
.psm-status-table td:nth-child(1) a { font-weight: 600; color: var(--text); }
.psm-status-table td:nth-child(1) a:hover { color: var(--accent-text); }

/* ── SITES LIST TABLE: proper column widths ─────────────── */
.psm-sites-list { table-layout: auto; }
.psm-sites-list td:nth-child(1) { min-width: 180px; }
.psm-sites-list td:nth-child(2) { min-width: 160px; font-size: 11px; color: var(--accent-text); }

/* ── LOG TABLE: specific widths, message truncation ─────── */
.psm-log-table { table-layout: fixed; width: 100%; }
/* Status tab: SITE(200) | DATE(130) | MESSAGE(auto) | USERS(100) */
/* Other tabs: DATE(130) | MESSAGE(auto) | USERS(100) */
.psm-log-table th, .psm-log-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psm-log-table th:first-child { width: 180px; }
.psm-log-table td:first-child { width: 180px; font-size: 12px; font-weight: 600; }
/* The "full" class on message cells */
html body .table td.full, html body .table th.full {
  width: auto !important;
  max-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: var(--text-2) !important;
}
/* Date/time column in log */
.psm-log-table td time { font-family: 'Consolas','Courier New',monospace; font-size: 11px; color: var(--text-2); }

/* ── CONFIG: psm-config-grid show active correctly ──────── */
html body .tab-pane.active.psm-config-grid { display: grid !important; }
html body .tab-pane.psm-config-grid { display: none; }
html body .tab-pane.show.active.psm-config-grid { display: grid !important; }

/* ── PROFILE 3-col grid ──────────────────────────────────── */
.psm-profile-form { width: 100%; }
.psm-profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 900px) { .psm-profile-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .psm-profile-grid { grid-template-columns: 1fr; } }

/* ── VIEW PAGE: output 50/50 side by side ────────────────── */
.psm-output-flex { display: flex; gap: 16px; }
.psm-output-flex > div { flex: 1; min-width: 0; }

/* ── HISTORY CHART: controls above, canvas full width ────── */
.psm-chart-wrap { flex-direction: column !important; }
.psm-chart-controls { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; margin-bottom: 12px !important; width: 100% !important; flex: none !important; }
.psm-chart-canvas { width: 100% !important; flex: none !important; }

/* ── BADGE compact in table cells ───────────────────────── */
.table td .psm-badge { font-size: 9px !important; padding: 2px 7px !important; border-radius: 8px !important; }

/* ── Fix psm-edit-form grid column widths ───────────────── */
.psm-edit-grid { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 900px) { .psm-edit-grid { grid-template-columns: 1fr; } }

/* ============================================================
   v1.7 — fix overflow, table wrapping, save button alignment
   ============================================================ */

/* ── REVERT overflow fixes — use JS dropdown instead ─────── */
/* Card needs normal overflow for border-radius to clip correctly */
html body .card { overflow: hidden !important; }
html body .card-body { overflow: visible !important; }
/* Restore scroll on table wrapper */
html body .sm-table-wrap { overflow-x: auto !important; overflow-y: visible; }
html body .table-responsive { overflow-x: auto !important; }
/* Dropdown stays high z-index but repositioned via JS (see body.tpl) */
html body .dropdown-menu { z-index: 10000 !important; }

/* ── STATUS table: no wrapping in any cell ───────────────── */
html body .psm-status-table td {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Last offline can be a bit wider */
html body .psm-status-table th:nth-child(4),
html body .psm-status-table td:nth-child(4) { max-width: 260px; }
html body .psm-status-table td:nth-child(1) { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 200px; }

/* ── SITES LIST: fix column compression ──────────────────── */
html body .psm-sites-list { table-layout: auto !important; min-width: 900px; }
html body .psm-sites-list td { white-space: nowrap !important; }
html body .psm-sites-list td:nth-child(1) { min-width: 200px; }
html body .psm-sites-list td:nth-child(2) { min-width: 180px; color: var(--accent-text) !important; font-size: 11px; }
html body .psm-sites-list td:nth-child(5),
html body .psm-sites-list td:nth-child(6) { font-family: 'Consolas','Courier New',monospace; font-size: 11px; }

/* ── CONFIG + PROFILE: save button full-width, right-aligned, no border ── */
.psm-save-row {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  padding: 8px 0 !important;
  border: none !important;
  margin: 0 !important;
  background: none !important;
}
/* Profile save button */
.psm-profile-save {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
  margin-top: 4px;
}

/* ============================================================
   v1.8 — users overflow fix, sites pills compact, login logo
   ============================================================ */

/* ── Users table: overflow visible (3 cols, no h-scroll needed) ─ */
html body .psm-users-wrap {
  overflow: visible !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
html body .psm-users-wrap .table { margin-bottom: 0; }

/* ── Sites pills: compact, more per row ──────────────────── */
.psm-sites-col {
  width: auto !important;
  min-width: 0 !important;
  padding: 10px 12px !important;
  line-height: 1.8 !important;
}
.psm-site-pill {
  display: inline-flex !important; align-items: center !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-2) !important;
  border-radius: 10px !important;
  padding: 1px 8px !important;
  margin: 2px 3px !important;
  font-size: 10px !important;
  color: var(--text-2) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: border-color .15s, color .15s !important;
}
.psm-site-pill:hover {
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* ── Users table column widths ───────────────────────────── */
html body .psm-users-table th:nth-child(1),
html body .psm-users-table td:nth-child(1) { width: 180px; white-space: nowrap; }
html body .psm-users-table th:nth-child(2),
html body .psm-users-table td:nth-child(2) { width: 200px; white-space: nowrap; }
html body .psm-users-table th:nth-child(3),
html body .psm-users-table td:nth-child(3) { width: auto; }
html body .psm-users-table th:nth-child(4),
html body .psm-users-table td:nth-child(4) { width: 40px; white-space: nowrap; }

/* ── Login: use SVG logo at proper size ──────────────────── */
.login-logo img { height: 40px; width: auto; }

/* ============================================================
   v1.9 — pills flex wrap, dropdown, sites search inline
   ============================================================ */

/* ── Sites pills: flex wrap inside td ───────────────────── */
.psm-sites-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
  width: 100%;
}
.psm-sites-wrap .psm-site-pill {
  /* Ensure each pill doesn't grow or stretch */
  flex: 0 0 auto !important;
}

/* ── Custom PSM dropdown menu (no Bootstrap conflict) ────── */
html body .dropdown-menu.psm-dd-open,
html body .dropdown-menu[style*="position:fixed"] {
  display: block !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  padding: 4px 0 !important;
}

/* ── Sites list: search inline with page header ──────────── */
/* The psm-list-search-bar pulls up to sit at the right of the
   psm-page-hdr (h1 + buttons) on the same visual row */
.psm-list-search-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: -44px;   /* pull up to the psm-page-hdr level */
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.psm-list-search-bar .searchbar { margin-bottom: 0 !important; }
/* On mobile, drop back below header */
@media (max-width: 600px) {
  .psm-list-search-bar { margin-top: 0; }
}

/* ============================================================
   v2.0 — users table fixed layout, sites search position fix
   ============================================================ */

/* ── Users table: fixed layout so sites column fills remaining space ── */
html body .psm-users-table { table-layout: fixed !important; width: 100% !important; }
html body .psm-users-table th:nth-child(1),
html body .psm-users-table td:nth-child(1) { width: 190px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .psm-users-table th:nth-child(2),
html body .psm-users-table td:nth-child(2) { width: 210px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Column 3 (sites): takes ALL remaining space automatically in fixed layout */
html body .psm-users-table th:nth-child(3),
html body .psm-users-table td:nth-child(3) { width: auto !important; }
html body .psm-users-table th:nth-child(4),
html body .psm-users-table td:nth-child(4) { width: 36px !important; }

/* ── Sites list search: increase negative margin to align with header ── */
.psm-list-search-bar { margin-top: -56px !important; }

/* ── Dropdown menu open state ────────────────────────────── */
html body .dropdown-menu.psm-dd-open {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
  padding: 4px 0 !important;
  min-width: 160px !important;
}
html body .dropdown-menu.psm-dd-open .dropdown-item {
  color: var(--text) !important; font-size: 12px !important; padding: 6px 14px !important;
}
html body .dropdown-menu.psm-dd-open .dropdown-item:hover {
  background: var(--bg-2) !important; color: var(--accent-text) !important;
}
html body .dropdown-menu.psm-dd-open .dropdown-item.text-danger,
html body .dropdown-menu.psm-dd-open .dropdown-item.text-danger:hover { color: var(--red-text) !important; }

/* ============================================================
   v2.1 — inline onclick dropdown, search absolute, titles
   ============================================================ */

/* ── Sites list search: absolute position in sm-main ─────── */
/* sm-main already has position set via flex */
html body .sm-main { position: relative; }
html body .psm-list-search-bar {
  position: absolute !important;
  top: 20px !important;   /* sm-main padding-top */
  right: 20px !important; /* sm-main padding-right */
  margin: 0 !important;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
}
html body .psm-list-search-bar .searchbar { margin-bottom: 0 !important; }
/* Reserve space on right of page header so buttons don't hide under search */
html body .psm-page-hdr { padding-right: 220px !important; }
/* On mobile: reset to normal flow */
@media (max-width: 640px) {
  html body .psm-list-search-bar { position: static !important; padding-right: 0 !important; margin-bottom: 10px !important; }
  html body .psm-page-hdr { padding-right: 0 !important; }
}

/* ============================================================
   v2.2 — search inline fix, users width fix, status col first
   ============================================================ */

/* ── Remove absolute position from search bar (handled by JS now) ── */
html body .psm-list-search-bar { position: static !important; margin: 0 !important; display: flex !important; align-items: center !important; }
html body .psm-list-search-bar .searchbar { margin-bottom: 0 !important; }
html body .psm-page-hdr { padding-right: 0 !important; }

/* ── Users table: override the v1.6 first-child width:auto with higher specificity ── */
/* Use ID-like trick: add psm-users-wrap as ancestor for higher specificity */
html body .psm-users-wrap .psm-users-table th:first-child,
html body .psm-users-wrap .psm-users-table td:first-child { width: 200px !important; min-width: 200px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body .psm-users-wrap .psm-users-table th:nth-child(2),
html body .psm-users-wrap .psm-users-table td:nth-child(2) { width: 240px !important; min-width: 240px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body .psm-users-wrap .psm-users-table th:last-child,
html body .psm-users-wrap .psm-users-table td:last-child { width: 44px !important; min-width: 44px !important; text-align: right !important; }

/* ── Status table: STATUS column first, updated nth-child positions ── */
.psm-status-table { table-layout: fixed; width: 100%; }
.psm-status-table th:nth-child(1), .psm-status-table td:nth-child(1) { width: 90px !important; text-align: center !important; white-space: nowrap !important; }
.psm-status-table th:nth-child(2), .psm-status-table td:nth-child(2) { width: auto !important; min-width: 150px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.psm-status-table th:nth-child(3), .psm-status-table td:nth-child(3) { width: 140px !important; white-space: nowrap !important; overflow: hidden !important; }
.psm-status-table th:nth-child(4), .psm-status-table td:nth-child(4) { width: 240px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.psm-status-table th:nth-child(5), .psm-status-table td:nth-child(5) { width: 90px !important; font-family: 'Consolas','Courier New',monospace !important; font-size: 11px !important; text-align: right !important; white-space: nowrap !important; }

/* ── psm-accessories flex for search bar ────────────────── */
html body .psm-accessories { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; }

/* ============================================================
   v2.3 — consolidated: stronger specificity for table columns
   ============================================================ */

/* STATUS table: .sm-table-wrap ancestor beats v1.6 first-child rule */
html body .sm-table-wrap .psm-status-table th:first-child,
html body .sm-table-wrap .psm-status-table td:first-child {
  width: 90px !important; min-width: 90px !important; max-width: 90px !important;
  text-align: center !important; white-space: nowrap !important;
}
html body .sm-table-wrap .psm-status-table th:nth-child(2),
html body .sm-table-wrap .psm-status-table td:nth-child(2) {
  text-align: left !important; min-width: 150px !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
html body .sm-table-wrap .psm-status-table th:nth-child(3),
html body .sm-table-wrap .psm-status-table td:nth-child(3) { width: 130px !important; white-space: nowrap !important; }
html body .sm-table-wrap .psm-status-table th:nth-child(4),
html body .sm-table-wrap .psm-status-table td:nth-child(4) { width: 220px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body .sm-table-wrap .psm-status-table th:nth-child(5),
html body .sm-table-wrap .psm-status-table td:nth-child(5) { width: 80px !important; white-space: nowrap !important; text-align: right !important; }

/* USERS table: .psm-users-wrap ancestor beats v1.6 first-child rule */
html body .psm-users-wrap .psm-users-table th:first-child,
html body .psm-users-wrap .psm-users-table td:first-child {
  width: 200px !important; min-width: 200px !important; max-width: 200px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html body .psm-users-wrap .psm-users-table th:nth-child(2),
html body .psm-users-wrap .psm-users-table td:nth-child(2) {
  width: 240px !important; min-width: 240px !important; max-width: 240px !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
html body .psm-users-wrap .psm-users-table th:last-child,
html body .psm-users-wrap .psm-users-table td:last-child {
  width: 44px !important; min-width: 44px !important; max-width: 44px !important;
  text-align: right !important;
}

/* ============================================================
   v2.4 — colgroup column widths, search layout, always-visible pills
   ============================================================ */

/* ── Sites list: search right-aligned above table ─────────── */
.psm-list-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.psm-list-search-inline .searchbar { margin-bottom: 0 !important; }

/* ── Kill conflicting psm-list-search-bar rules ─────────────  */
html body .psm-list-search-bar { display: none !important; }

/* ── Status table: ensure fixed layout takes effect ────────── */
html body .psm-status-table,
html body .sm-table-wrap .psm-status-table { table-layout: fixed !important; width: 100% !important; }
html body .psm-status-table td { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ── Users table: ensure fixed layout takes effect ─────────── */
html body .psm-users-table,
html body .psm-users-wrap .psm-users-table { table-layout: fixed !important; width: 100% !important; }
html body .psm-users-table td { vertical-align: middle !important; }
html body .psm-users-table td:first-child,
html body .psm-users-table td:nth-child(2) { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
html body .psm-users-table td:last-child { text-align: right !important; }

/* ============================================================
   v2.5 — user-directed fixes: site col width, wrapper width
   ============================================================ */

/* Status SITE column: constrain width */
html body .sm-table-wrap .psm-status-table th:nth-child(2),
html body .sm-table-wrap .psm-status-table td:nth-child(2) {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 120px !important;
  text-align: left !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* sm-table-wrap: always full width of container */
html body .sm-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* Search inline: unhidden state when moved to accessories */
html body .psm-accessories .psm-list-top {
  display: flex !important;
  align-items: center !important;
  margin-left: 8px !important;
}
html body .psm-accessories .psm-list-top .searchbar {
  margin-bottom: 0 !important;
}

/* ============================================================
   v2.6 — PSM header_accessories already has buttons+search in .row
   ============================================================ */

/* psm-accessories: PSM renders buttons + searchbar together in a .row */
html body .psm-accessories .row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide the .w-100 flex-break div PSM inserts */
html body .psm-accessories .row .w-100 { display: none !important; }
/* Buttons div — flex row */
html body .psm-accessories .row > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
/* Searchbar — no bottom margin, inline */
html body .psm-accessories .row .searchbar,
html body .psm-accessories .searchbar { margin-bottom: 0 !important; margin-left: 8px !important; }
/* Button margins in accessories */
html body .psm-accessories .btn { margin-bottom: 0 !important; margin-right: 0 !important; }

/* ── Users page: item-action dropdown text left ──────────── */
html body .item-action .dropdown-menu { text-align: left !important; }
html body .item-action .dropdown-menu .dropdown-item { text-align: left !important; }

/* Sites list search: right-aligned above table */
.psm-sites-search { display:flex; justify-content:flex-end; margin-bottom:8px; }
.psm-sites-search .searchbar { margin-bottom:0 !important; }

/* ============================================================
   v2.7 — force header_accessories row+searchbar inline
   ============================================================ */

/* The header_accessories .row already contains buttons + .searchbar + .w-100 */
/* Make them display as a single flex row */
html body .psm-accessories > .row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Buttons div: first child of .row */
html body .psm-accessories > .row > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
/* Searchbar: always visible, no bottom margin */
html body .psm-accessories > .row > .searchbar {
  display: inline-flex !important;
  visibility: visible !important;
  margin-bottom: 0 !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
}
/* w-100 divider: hidden */
html body .psm-accessories > .row > .w-100 { display: none !important; }
/* psm-accessories itself: flex so it stretches */
html body .psm-accessories { display: flex !important; align-items: center !important; }

/* ── Scriptmonitor-style server cards (v5.36) ───────────────────────────── */
.script-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
@media(max-width: 600px) { .script-cards { grid-template-columns: 1fr; } }

.script-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--tr), box-shadow var(--tr);
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}
.script-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(13,148,136,.12);
}
.script-card.s-offline { border-left: 3px solid var(--red); }
.script-card.s-online  { border-left: 3px solid var(--green); }
.script-card.s-warning { border-left: 3px solid var(--amber); }

/* sc-hdr — title row with bottom border (matches scriptmonitor) */
.sc-hdr {
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.sc-name { font-weight: 600; font-size: .8rem; color: var(--text); }
.sc-src  { font-size: .68rem; color: var(--text-2); margin-top: 2px; text-transform: capitalize; }

/* sc-body — data rows */
.sc-body { padding: 10px 14px; font-size: 11px; }
.sc-row  { display: flex; justify-content: space-between; margin-bottom: 4px; }
.sc-row:last-child { margin-bottom: 0; }
.sc-lbl  { color: var(--text-3); }
.sc-val  { color: var(--text); font-weight: 500; font-family: 'Consolas','Courier New',monospace; }

/* ── View toggle buttons ─────────────────────────────────────────────────── */
.view-toggle { display: flex; gap: 4px; }
.view-btn {
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  padding: 5px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--tr);
  line-height: 1;
}
.view-btn.active,
.view-btn:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
  color: var(--accent-text);
}
/* psm-status-hdr layout */
.psm-status-hdr { display: flex; align-items: center; justify-content: flex-end; }

/* ── Status page: fix flex layout inside Bootstrap .row ─────────────────── */
/* #content is display:flex (Bootstrap .row), so direct children need        */
/* explicit 100% width to stack vertically instead of side-by-side.          */
.psm-filter-bar { flex: 0 0 100%; max-width: 100%; min-width: 0; }
#wm-view-card   { flex: 0 0 100%; max-width: 100%; min-width: 0; }
#wm-view-table  { flex: 0 0 100%; max-width: 100%; min-width: 0; }

/* ── Override PSM style.min.css min-height/min-width on interactive elements */
a, button, .nav-link {
  min-height: 28px !important;
  min-width: 0 !important;
}

/* ── Site detail view: meter dark theme (override PSM hardcoded white) ── */
html body #meter { background: var(--bg-2) !important; }
html body #meter:before {
  background: var(--bg-3) !important;
  box-shadow: none !important;
}
html body #meter:after {
  background: var(--bg-2) !important;
  box-shadow: 0 0 0 1px var(--border) !important;
  color: var(--text) !important;
  white-space: pre;
}
html body #needle {
  background: var(--accent) !important;
  box-shadow: none !important;
}

/* ── Site detail view: card label in output section ── */
.psm-output-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3); margin-bottom: 6px;
}

/* ── Site detail view: fix view.tpl.html cards full width in content row ── */
#content > .container-fluid { width: 100%; min-width: 0; }

/* ── Site detail view: flex layout with gap (no Bootstrap grid issues) ───── */
.psm-view-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.psm-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.psm-flex-col {
  min-width: 0;
}
.psm-flex-col > .card { height: 100%; }

/* ── Status icon card ── */
.psm-view-status-card .card-body { padding: 24px 12px !important; }
.psm-dt { color: var(--text-2) !important; font-size: 11px; font-weight: 600; }

/* ── Chart section ── */
.psm-chart-section { width: 100%; min-width: 0; margin-bottom: 12px; }

/* ── Meter: centered above chart with red→orange→green arc ── */
.psm-meter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 16px 0 0;
}
.psm-uptime-pct {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
  text-align: center;
}

/* Override PSM's hardcoded white meter colors */
html body #meter {
  background: transparent !important;
  margin: 0 auto !important;
}
html body #meter:before {
  /* Red (0% uptime) → Orange (50%) → Green (100%) */
  background: linear-gradient(to right,
    rgba(239, 68, 68, 1)   0%,
    rgba(245,158, 11, 1)  45%,
    rgba(16, 185,129, 1) 100%
  ) !important;
  box-shadow: none !important;
}
html body #meter:after {
  background: var(--card-bg) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: 1.2em !important;
  font-weight: 700 !important;
  white-space: pre;
}
html body #needle {
  background: var(--text) !important;
  box-shadow: 1px -1px 4px rgba(0,0,0,.4) !important;
}

/* ── Log entries: Message column 80% on desktop ── */
@media (min-width: 768px) {
  .psm-log-table td.full,
  .psm-log-table th.full { width: 80% !important; }
}