:root{
  --sidebar-w: 252px;
  --sidebar-w-collapsed: 76px;
  --qs-w: 15%;

  --sidebar-bg-1:#0b0e17;
  --sidebar-bg-2:#131829;
  --sidebar-border:#1f2540;
  --sidebar-text:#aab2d6;
  --sidebar-text-dim:#7981a4;

  --accent:#5b5ff2;
  --accent-hover:#4c50e0;
  --accent-tint:#eef0ff;
  --accent-tint-strong:#e2e4ff;

  --page-bg:#f6f7fb;
  --surface:#ffffff;
  --border:#e8eaf0;
  --border-soft:#eef0f5;
  --text:#14161f;
  --text-muted:#64748b;
  --text-faint:#828a9d;

  --green:#12925a;
  --green-bg:#e9f9f0;
  --green-border:#c9f0dc;
  --red:#e0294b;
  --red-bg:#fdecf0;
  --red-border:#f8ccd6;
  --amber:#b7791f;
  --amber-bg:#fef6e5;
  --amber-border:#f5e2ab;
  --blue:#2f6fed;
  --blue-bg:#eef4ff;
  --blue-border:#cddffb;

  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(16, 24, 40, 0.10);
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 14px rgba(16,24,40,.08);
  --shadow-lg:0 12px 32px rgba(8,10,20,.35);
  --shadow-xl:0 24px 64px rgba(0,0,0,.4);

  /* status glow/border variants (semi-transparent versions of status colors) */
  --red-border-strong:rgba(224,41,75,.5);
  --red-glow:rgba(224,41,75,.15);
  --amber-border-strong:rgba(217,119,6,.6);
  --amber-glow:rgba(217,119,6,.15);
  --green-border-strong:rgba(18,146,90,.4);

  /* vivid palette — CRM-style list avatars, status dots and pills.
     Kept distinct from the softer semantic tokens above (--green,
     --red, --blue, etc.) since they serve a different, more saturated
     decorative purpose; components below reuse these instead of
     scattering one-off hex values. */
  --teal-bg:#d1f5ea; --teal-text:#0f766e;
  --violet-bg:#e4e1fb; --violet-text:#5b21b6;
  --orange-bg:#ffe8d1; --orange-text:#c2410c;
  --blue-bg-alt:#dbeafe; --blue-text:#2563eb;
  --pink-bg:#fce7f3; --pink-text:#be185d;
  --amber-bg-alt:#fef3c7; --amber-text:#b45309; --amber-text-dot:#d97706;
  --green-text:#16a34a; --green-bg-alt:#dcfce7;
  --red-text:#dc2626; --red-bg-alt:#fee2e2;
  --pill-gray-bg:#f1f5f9;
  --teal:#22c1d6;

  /* dashboard sub-tab icon-badge pastels (separate decorative set) */
  --icon-amber-bg:#fdf1e4;
  --icon-purple-bg:#f3ebfe;
  --icon-neutral-bg:#eef1f5;

  /* code / terminal surfaces */
  --code-bg:#0d1117;
  --code-text:#c9d1d9;

  /* HTTP method badges (API Explorer) */
  --method-get:#1976d2;
  --method-post:#43a047;
  --method-put:#fb8c00;
  --method-delete:#e53935;
  --method-patch:#6c63ff;

  /* misc */
  --border-hover:#d7dbe6;
  --scrollbar-thumb:#e2e8f0;
  --page-bg-hover:#eceef3;
  --accent-grad-end:#8b7bf7;
  --icon-muted:#4b5563;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#fff;
  color:var(--text);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a {
    text-decoration: none;
}
.layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr var(--qs-w);
  grid-template-areas:"sidebar main quick";
  min-height:100vh;
  transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1);
}
html.sidebar-collapsed .layout{
  grid-template-columns:var(--sidebar-w-collapsed) 1fr var(--qs-w);
}
.layout.no-quick-stats{
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-areas:"sidebar main";
}
html.sidebar-collapsed .layout.no-quick-stats{
  grid-template-columns:var(--sidebar-w-collapsed) 1fr;
}
.sidebar{grid-area:sidebar;}
.main{grid-area:main;}
.quick-stats{grid-area:quick;}

/* ------------------------------------------------------- mobile drawer -- */
.mobile-menu-btn{display:none;}
.sidebar-backdrop{display:none;}

/* ============================================================ SIDEBAR */
.sidebar{
  background:linear-gradient(180deg,var(--sidebar-bg-1),var(--sidebar-bg-2));
  border-right:1px solid var(--sidebar-border);
  color:var(--sidebar-text);
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  transition:padding .22s ease;
}
html.sidebar-collapsed .sidebar{padding:18px 12px;align-items:center;}

.sidebar-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:22px;
  width:100%;
}
.brand{display:flex;align-items:center;gap:10px;overflow:hidden;}
.brand-mark{
  flex:0 0 auto;
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent-grad-end));
  color:#fff;font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(91,95,242,.45);
}
.brand-name{
  font-size:16.5px;font-weight:700;color:#f2f4ff;
  white-space:nowrap;letter-spacing:-.01em;
}
.brand-title { display: block; font-size: 16.5px; } .brand-by { display: block; font-size: 13.5px; }
.collapse-btn{
  flex:0 0 auto;
  background:transparent;border:1px solid var(--sidebar-border);
  color:#e7eaff;
  border-radius:7px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s;
}
.collapse-btn:hover{background:#1a2036;color:#e7eaff;}

html.sidebar-collapsed .brand-name,
html.sidebar-collapsed .welcome-text,
html.sidebar-collapsed .label,
html.sidebar-collapsed .label-text{
  display:none;
}
html.sidebar-collapsed .sidebar-head{flex-direction:column;gap:14px;margin-bottom:20px;}

.welcome{
  display:flex;align-items:center;gap:9px;
  padding:9px 10px;margin-bottom:18px;
  background:#141a2e;border:1px solid var(--sidebar-border);
  border-radius:var(--radius-sm);
  width:100%;
}
html.sidebar-collapsed .welcome{
  padding:0;background:transparent;border:none;justify-content:center;margin-bottom:20px;
}
.welcome-avatar{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.welcome-text{font-size:12.5px;color:var(--sidebar-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.welcome-text strong{color:#e6e9ff;font-weight:600;}


.sidebar-nav{
  display:flex;flex-direction:column;gap:14px;width:100%;
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding-right:2px;margin-right:-2px;
}
.sidebar-nav::-webkit-scrollbar{width:7px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:#3a4270;border-radius:4px;}
.sidebar-nav::-webkit-scrollbar-thumb:hover{background:#4a5490;}
.sidebar-nav::-webkit-scrollbar-track{background:transparent;}

.nav-group{width:100%;}
.nav-group-header{
  display:flex;align-items:center;gap:8px;width:100%;
  background:transparent;border:none;color:var(--sidebar-text);
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:4px 6px 9px;cursor:pointer;
}
.nav-group-header .chevron{
  display:inline-flex;transition:transform .18s ease;flex:0 0 auto;
  color:var(--sidebar-text-dim);
}
.nav-group.collapsed .nav-group-header .chevron{transform:rotate(-90deg);}
.nav-group-header .group-icon{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(91,95,242,.25);flex:0 0 auto;
}
.nav-group-header .group-label{white-space:nowrap;}

.nav-group-items{
  display:flex;flex-direction:column;gap:3px;width:100%;
  max-height:1200px;overflow:hidden;
  transition:max-height .22s ease;
}
.nav-group.collapsed .nav-group-items{max-height:0;}

html.sidebar-collapsed .nav-group{margin-bottom:2px;}
html.sidebar-collapsed .nav-group-header{display:none;}
html.sidebar-collapsed .nav-group-items{max-height:none !important;}

.sidebar-item{
  position:relative;
  display:flex;align-items:center;gap:11px;
  background:transparent;border:1px solid transparent;color:#ebedf5;
  border-radius:var(--radius-sm);padding:9px 11px;text-align:left;
  font-size:13px;font-family:inherit;cursor:pointer;width:100%;
  transition:background .15s,color .15s;
  text-decoration:none;
}
.sidebar-item:hover:not(:disabled){background:#161c33;color:#e9ecff;}
.sidebar-item .icon{font-size:15px;flex:0 0 auto;width:18px;text-align:center;}
.sidebar-item .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-item.active{
  background:linear-gradient(90deg,rgba(91,95,242,.22),rgba(91,95,242,.12));
  border-color:rgba(91,95,242,.35);
  color:#fff;font-weight:600;
}
.sidebar-item .active-dot{
  margin-left:auto;width:6px;height:6px;border-radius:50%;
  background:#8b93ff;flex:0 0 auto;
}
.sidebar-item:disabled{cursor:default;}
html.sidebar-collapsed .sidebar-item{justify-content:center;padding:10px;}
html.sidebar-collapsed .sidebar-item .active-dot{display:none;}


/* ============================================================ MAIN */
.main{display:flex;flex-direction:column;min-width:0;}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 28px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;
}
.topbar-title{min-width:0;flex:1;overflow:hidden;}
.topbar-title .page-title{
  margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;
}
.topbar-title .page-title-icon{font-size:16px;}
.topbar-search{
  flex:1;max-width:420px;
  display:flex;align-items:center;gap:9px;
  background:var(--page-bg);border:1px solid var(--border);
  border-radius:10px;padding:8px 12px;color:var(--text-faint);
}
.topbar-search input{
  border:none;background:transparent;outline:none;font-size:13.5px;
  color:var(--text);width:100%;font-family:inherit;
}
.topbar-search input::placeholder{color:var(--text-faint);}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.instance-chip{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-size:12.5px;font-weight:600;min-width:0;
}
.instance-chip svg{flex:none;color:var(--accent);}
.instance-chip-name{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:640px){.instance-chip-name{max-width:96px;}}
.icon-btn{
  position:relative;
  width:36px;height:36px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);color:var(--icon-muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.icon-btn:hover{background:var(--page-bg);border-color:var(--border-hover);}
.notif-dot{
  position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--surface);
}
.notif-wrap{position:relative;}
.notif-panel{
  display:none;position:absolute;top:calc(100% + 8px);right:0;width:330px;max-width:calc(100vw - 32px);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-md);z-index:120;overflow:hidden;
}
.notif-panel.open{display:block;}
.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--border-soft);font-size:13px;font-weight:700;color:var(--text);
}
.notif-mark-read{
  background:none;border:none;color:var(--accent);font-size:12px;font-weight:600;
  cursor:pointer;padding:0;
}
.notif-mark-read:hover{color:var(--accent-hover);text-decoration:underline;}
.notif-panel-body{max-height:360px;overflow-y:auto;}
.notif-item{
  display:flex;gap:8px;align-items:flex-start;padding:10px 14px;
  border-bottom:1px solid var(--border-soft);font-size:12.5px;color:var(--text);
}
.notif-item:last-child{border-bottom:none;}
.notif-item.unread{background:var(--accent-tint);}
.notif-item-icon{flex-shrink:0;font-size:14px;line-height:1.3;}
.notif-item-body{flex:1;min-width:0;}
.notif-item-message{line-height:1.4;word-wrap:break-word;}
.notif-item-link{display:inline-block;margin-top:4px;font-size:12px;font-weight:600;color:var(--accent);}
.notif-item-link:hover{text-decoration:underline;}
.notif-item-time{margin-top:2px;font-size:11px;color:var(--text-faint);}
.avatar-chip{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-grad-end));color:#fff;
  font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}

/* .content{padding:26px 28px 40px;} */
.content{padding:6px 28px;}
.page-head{margin-bottom:20px;}
.page-title{
  display:flex;align-items:center;gap:10px;
  font-size:24px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 5px;color:var(--text);
}
.page-title-icon{font-size:21px;}
.page-subtitle{margin:0;color:var(--text-muted);font-size:13.5px;}

.main-tabs, .tabs-connected{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:20px;background:var(--page-bg);border:1px solid var(--border);border-radius:10px;padding:5px;}
.main-tab, .tabs-connected .tab-segment{
  text-align:center;padding:9px 16px;font-size:14px;font-weight:500;color:var(--text-muted);
  cursor:pointer;border-radius:7px;font-family:inherit;background:transparent;border:none;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.main-tab.active, .tabs-connected .tab-segment.active{
  background:var(--accent);color:#fff;font-weight:600;
  box-shadow:0 3px 8px -1px rgba(91,95,242,.4),0 1px 2px rgba(16,24,40,.08);
  transform:translateY(-1px);
}
.main-tab:hover:not(.active), .tabs-connected .tab-segment:hover:not(.active){
  background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.06);
}

.sub-tabs, .subtabs-underline{display:flex;flex-wrap:wrap;gap:22px;border-bottom:1px solid var(--border);margin-bottom:20px;position:relative;}
.sub-tab, .subtabs-underline .subtab-segment{
  display:flex;align-items:center;gap:6px;padding:0 0 10px;font-size:14px;font-weight:500;color:var(--text-muted);
  cursor:pointer;background:none;border:none;border-radius:0;font-family:inherit;
  margin-bottom:-1px;transition:color .15s;
}
.sub-tab.active, .subtabs-underline .subtab-segment.active{color:var(--accent);font-weight:600;background:none;}
.sub-tab:hover:not(.active), .subtabs-underline .subtab-segment:hover:not(.active){color:var(--text);}
.sub-tab-indicator{
  position:absolute;bottom:-1px;left:0;height:2px;background:var(--accent);border-radius:2px;
  transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);
  pointer-events:none;opacity:0;
}
.sub-tab-indicator.positioned{opacity:1;}

/* Plain text tabs with a bottom-border underline on the active one — same
   visual language as .sub-tabs/.sub-tab elsewhere in the app, kept as
   this page's own class (rather than reusing .sub-tab directly) since
   setActiveSubTab() (app.js) already targets .dashboard-subtab
   specifically and this is the only template using it. Replaced the
   previous card-grid-of-icons style per explicit design feedback (plain
   underlined-text tabs, no emoji). */
.dashboard-subtabs{
  display:flex;flex-wrap:wrap;gap:22px;
  border-bottom:1px solid var(--border);margin-bottom:20px;
}
.dashboard-subtab{
  padding:0 0 10px;font-size:14px;font-weight:500;color:var(--text-muted);
  cursor:pointer;background:none;border:none;border-radius:0;font-family:inherit;
  margin-bottom:-1px;position:relative;transition:color .15s ease;
}
.dashboard-subtab:hover:not(.active){color:var(--text);}
.dashboard-subtab.active{color:var(--accent);font-weight:600;}
.dashboard-subtab.active::after{
  content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;
  border-radius:2px;background:var(--accent);
}


/* ---------------- panel / stats ---------------- */
.panel{background:var(--surface);}

.dashboard-panel{  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-xl);
  padding:24px 26px;box-shadow:var(--shadow-lg);}
.panel-title{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;margin:0 0 20px;color:var(--text);}
.panel-subtitle{font-size:14.5px;font-weight:700;margin:6px 0 14px;color:var(--text);}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:6px;}
.stat-block{
  background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:16px 16px;
}
.stat-label{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.hint{color:var(--text-faint);font-size:11px;cursor:help;}
.stat-value{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.02em;}
.stat-delta{font-size:11.5px;font-weight:600;margin-top:8px;display:inline-block;padding:2px 9px;border-radius:999px;}
.stat-delta.up{background:var(--green-bg);color:var(--green);}
.stat-delta.down{background:var(--red-bg);color:var(--red);}

.divider{border:none;border-top:1px solid var(--border-soft);margin:24px 0;}

.chart-mode-row{display:flex;flex-direction:column;gap:6px;max-width:340px;margin-bottom:18px;}
.chart-mode-row label{font-size:12.5px;color:var(--text-muted);font-weight:500;}
.select-input{
  padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;
  background:var(--surface);font-family:inherit;color:var(--text);width: 100%;
}
.select-input:focus{outline:2px solid var(--accent-tint-strong);border-color:var(--accent);}

.chart-card{border:1px solid var(--border-soft);border-radius:var(--radius);padding:16px 18px;background:var(--surface);}
.chart-legend{display:flex;gap:20px;font-size:12.5px;color:var(--text-muted);margin-bottom:8px;font-weight:500;}
.legend-item{display:flex;align-items:center;gap:6px;}
.legend-swatch{width:14px;height:3px;display:inline-block;border-radius:2px;}
.legend-swatch.line{background:var(--teal);height:2px;}
.legend-swatch.green{background:var(--green);height:10px;border-radius:3px;}
.legend-swatch.red{background:var(--red);height:10px;border-radius:3px;}
.chart-wrap{position:relative;width:100%;height:340px;}

/* ---------------- generic table panel (other sub-tabs) ---------------- */
.data-table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;table-layout:auto;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.data-table th{
  text-align:left;color:var(--text-muted);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;
  background:var(--page-bg);
  border-bottom:1px solid var(--border);padding:12px 14px;
}
.data-table td{
  padding:12px 14px;border-bottom:1px solid var(--border-soft);
  word-break:break-word;overflow-wrap:break-word;white-space:normal;
  vertical-align:top;
}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tbody tr:hover{background:var(--page-bg);}
.pill{padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;}
.pill-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}
.pill-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.pill-gray{background:var(--page-bg);color:var(--text-muted);border:1px solid var(--border);}
.pill-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.pill-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}

/* Compare Integrations — line diff of one changed file */
.cmp-diff{margin:0;padding:8px 0;font-size:12px;line-height:1.5;background:var(--page-bg);border:1px solid var(--border);border-radius:8px;max-height:480px;overflow:auto;}
.cmp-l{display:block;padding:0 12px;white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.cmp-add{background:var(--green-bg);color:var(--green);}
.cmp-del{background:var(--red-bg);color:var(--red);}
.cmp-hunk{background:var(--blue-bg);color:var(--blue);}
.cmp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 10px;}
.cmp-chip{border:2px solid var(--border);border-radius:999px;padding:3px 12px;font-size:12.5px;background:var(--surface);}
.cmp-sync{margin-left:auto;font-size:12.5px;display:flex;gap:6px;align-items:center;cursor:pointer;}
.cmp-flow-pane{max-height:78vh;overflow:auto;border:1px solid var(--border);border-radius:8px;background:#fff;margin-top:8px;}
.cmp-flow-pane img{display:block;width:100%;height:auto;cursor:zoom-in;}
.cmp-file-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;}
.cmp-path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all;}

.loading-stub{color:var(--text-muted);font-size:13.5px;padding:24px 4px;display:flex;align-items:center;gap:10px;}

/* ---------------- spinner ---------------- */
.spinner{
  width:16px;height:16px;flex:0 0 auto;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.spinner-lg{width:22px;height:22px;border-width:3px;}
.spinner-on-dark{border-color:rgba(255,255,255,.35);border-top-color:#fff;}
@keyframes spin{to{transform:rotate(360deg);}}

.global-overlay{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  background:rgba(15,17,25,.4);
  backdrop-filter:blur(2px);
}
.global-overlay.visible{display:flex;}
.global-overlay-box{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);color:var(--text);
  padding:16px 24px;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  font-size:14px;font-weight:600;
}
.global-overlay-box .spinner{border-color:var(--border);border-top-color:var(--accent);}

/* ---------------- quick stats (right column) ---------------- */
.quick-stats{padding:26px 20px;border-left:1px solid var(--border);background:var(--surface);}
.qs-title{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;margin:4px 0 18px;color:var(--text);}
.qs-card{
  border:1px solid var(--border-soft);border-radius:var(--radius);padding:15px 15px;margin-bottom:12px;
  background:var(--page-bg);
}
a.qs-card{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;}
a.qs-card:hover{border-color:var(--accent-tint-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.qs-card-title{
  display:flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px;
}
.qs-card-row{font-size:13px;color:var(--text);margin-top:4px;line-height:1.5;}
.qs-blue{background:var(--blue-bg);border-color:var(--blue-border);}
.qs-blue .qs-card-title{color:var(--blue);}
.qs-red{background:var(--red-bg);border-color:var(--red-border);}
.qs-red .qs-card-title{color:var(--red);}
.qs-yellow{background:var(--amber-bg);border-color:var(--amber-border);}
.qs-yellow .qs-card-title{color:var(--amber);}
.qs-green{background:var(--green-bg);border-color:var(--green-border);}
.qs-green .qs-card-title{color:var(--green);}

.qs-totals-value{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.02em;}
.qs-progress{
  margin-top:10px;height:5px;border-radius:99px;background:rgba(0,0,0,.06);overflow:hidden;
}
.qs-progress-bar{height:100%;background:var(--blue);border-radius:99px;}
.qs-progress-label{margin-top:6px;font-size:11.5px;color:var(--text-muted);font-weight:500;}

/* ---------------- info banners (peak activity / weekly pattern) ---------------- */
.info-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  border-radius:var(--radius);padding:13px 16px;margin:18px 0 10px;font-size:13px;
}
.info-banner .banner-icon{font-size:14px;}
.info-banner .banner-title{font-weight:700;color:var(--text);}
.info-banner .banner-sep{color:var(--text-faint);}
.info-banner .banner-fact{color:var(--text-muted);}
.info-banner .banner-fact strong{color:var(--text);font-weight:700;}
.banner-red{background:var(--red-bg);border:1px solid var(--red-border);}
.banner-blue{background:var(--blue-bg);border:1px solid var(--blue-border);}

/* ---------------- expanders ---------------- */
.expander{
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:22px;
  background:var(--surface);overflow:hidden;padding:16px;
}
.expander-header{
  width:100%;display:flex;align-items:center;gap:9px;
  background:transparent;border:none;padding:12px 16px;
  font-size:13.5px;font-weight:500;color:var(--text);cursor:pointer;font-family:inherit;
  text-align:left;
}
.expander-header:hover{background:var(--page-bg);}
.expander-chevron{transition:transform .18s ease;flex:0 0 auto;color:var(--text-muted);}
.expander.open .expander-chevron{transform:rotate(90deg);}
.expander-body{max-height:0;overflow:hidden;transition:max-height .22s ease;}
.expander.open .expander-body{max-height:2000px;}
.detail-table-wrap{padding:0 16px 14px;max-height:340px;overflow-y:auto;}
.fo-table-scroll{max-height:460px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;}
.fo-table-scroll table.data-table{margin:0;border:none;border-radius:0;}
.fo-table-scroll thead th{position:sticky;top:0;background:var(--page-bg);z-index:1;}

/* ---------------- CRM-style list table (spacious, avatar + status-dot rows) ---------------- */
.list-table{
  width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.list-table th{
  text-align:left;padding:12px 16px;font-size:12px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;background:var(--page-bg);border-bottom:1px solid var(--border);
}
.list-table td{padding:14px 16px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
.list-table tbody tr{transition:background .12s;}
.list-table tbody tr:hover{background:var(--page-bg);}
.list-table tbody tr:last-child td{border-bottom:none;}

.list-checkbox{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}

.list-lead{display:flex;align-items:center;gap:12px;}
.list-avatar{
  width:38px;height:38px;border-radius:999px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.list-avatar-1{background:var(--teal-bg);color:var(--teal-text);}
.list-avatar-2{background:var(--violet-bg);color:var(--violet-text);}
.list-avatar-3{background:var(--orange-bg);color:var(--orange-text);}
.list-avatar-4{background:var(--blue-bg-alt);color:var(--blue-text);}
.list-avatar-5{background:var(--pink-bg);color:var(--pink-text);}
.list-avatar-6{background:var(--amber-bg-alt);color:var(--amber-text);}

.list-primary{font-size:14px;font-weight:600;color:var(--text);line-height:1.4;}
.list-secondary{font-size:13px;color:var(--text-muted);line-height:1.4;}

.list-status{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;}
.list-status-dot{width:7px;height:7px;border-radius:999px;flex:0 0 auto;}
.list-status-blue{color:var(--blue-text);} .list-status-blue .list-status-dot{background:var(--blue-text);}
.list-status-green{color:var(--green-text);} .list-status-green .list-status-dot{background:var(--green-text);}
.list-status-gray{color:var(--text-muted);} .list-status-gray .list-status-dot{background:var(--text-faint);}
.list-status-red{color:var(--red-text);} .list-status-red .list-status-dot{background:var(--red-text);}
.list-status-amber{color:var(--amber-text);} .list-status-amber .list-status-dot{background:var(--amber-text-dot);}

.list-pill{display:inline-block;padding:4px 13px;border-radius:999px;font-size:13px;font-weight:600;}
.list-pill-red{background:var(--red-bg-alt);color:var(--red-text);}
.list-pill-amber{background:var(--amber-bg-alt);color:var(--amber-text);}
.list-pill-gray{background:var(--pill-gray-bg);color:var(--text-muted);}
.list-pill-green{background:var(--green-bg-alt);color:var(--green-text);}
.list-pill-blue{background:var(--blue-bg-alt);color:var(--blue-text);}

.list-meta{font-size:13.5px;color:var(--text-muted);}
.list-value{font-size:14px;font-weight:700;color:var(--text);}

.list-kebab{
  width:30px;height:30px;border-radius:8px;border:none;background:transparent;
  color:var(--text-faint);cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.list-kebab:hover{background:var(--page-bg);color:var(--text-muted);}

/* ---------------- SFTP File Manager ---------------- */
.sftp-path-display{
  background:var(--page-bg);border-left:4px solid var(--accent);border-radius:var(--radius-sm);
  padding:12px 16px;margin-bottom:16px;
}
.sftp-path-label{font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:4px;}
.sftp-path-display code{font-size:14px;color:var(--text);}

.sftp-favorites-list{display:flex;flex-wrap:wrap;gap:8px;}

.sftp-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.sftp-crumb{
  font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;
  padding:4px 8px;border-radius:6px;
}
.sftp-crumb:hover{background:var(--accent-tint);}
.sftp-crumb-sep{color:var(--text-faint);font-size:13px;}

.sftp-folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:8px;}
.sftp-folder-btn{
  display:flex;align-items:center;gap:8px;
  background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--text);text-decoration:none;
  transition:all .15s;
}
.sftp-folder-btn:hover{border-color:var(--accent-tint-strong);background:var(--accent-tint);transform:translateY(-1px);}

.range-note{
  display:flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--text-muted);margin-top:14px;
}

/* ---------------- file server panel ---------------- */
.panel-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.panel-head-row .panel-title{margin:0;}
.panel-count{font-size:12.5px;color:var(--text-muted);font-weight:500;}
.download-btn, .refresh-btn, .view-tab{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:7px 14px;font-size:12.5px;font-weight:500;color:var(--text-muted);cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
}
.download-btn:hover, .refresh-btn:hover, .view-tab:hover{background:var(--page-bg);color:var(--text);border-color:var(--border-hover);}
.table-toolbar{display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px;}

.table-modal{
  display:none;position:fixed;inset:0;z-index:150;
  background:rgba(15,17,25,.55);
  align-items:center;justify-content:center;
  padding:28px;
}
.table-modal.visible{display:flex;}
.table-modal-inner{
  background:var(--surface);border-radius:var(--radius-lg);
  width:100%;height:100%;max-width:1800px;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}
.table-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--border);flex:0 0 auto;
}
.table-modal-title{font-weight:700;font-size:15px;color:var(--text);}
.table-modal-close{
  background:var(--page-bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  width:32px;height:32px;cursor:pointer;font-size:14px;color:var(--text-muted);
}
.table-modal-close:hover{background:var(--border-soft);color:var(--text);}
.table-modal-body{flex:1;overflow:auto;padding:20px 22px;}
.table-modal-body .data-table{width:100%;font-size:14px;}

/* Right-side settings drawer: off-canvas panel hidden until a
   ".settings-open" class is toggled onto some ancestor container (the
   page decides which element that is — e.g. a wrapper div around the
   whole page, or an AJAX-swap target that should keep the drawer's open
   state across its own re-renders). Originally built page-local for Flow
   Editor's "Create New Diagram" settings; promoted here once Fusion API
   Workbench needed the identical pattern, rather than a second copy of
   the same ~30 lines of CSS. */
.settings-drawer-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 14px; cursor:pointer; color:var(--text); font-size:14px; font-weight:600;
}
.settings-drawer-toggle:hover{background:var(--page-bg);}
.settings-drawer-backdrop{display:none; position:fixed; inset:0; background:rgba(10,12,20,.5); z-index:145;}
.settings-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:150;
  width:340px; max-width:90vw;
  background:var(--surface);
  box-shadow:-12px 0 32px rgba(8,10,20,.35);
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.settings-open .settings-drawer-backdrop{display:block;}
.settings-open .settings-drawer{transform:translateX(0);}
.settings-drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); flex:0 0 auto;
  font-weight:700; color:var(--text);
}
.settings-drawer-close{
  background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  width:28px; height:28px; cursor:pointer; color:var(--text-muted);
}
.settings-drawer-close:hover{background:var(--border-soft); color:var(--text);}
.settings-drawer-body{padding:16px 20px; flex:1;}

/* Non-modal variant of the drawer above: same off-canvas slide-in panel,
   but deliberately WITHOUT a backdrop element — for a "browse this while
   still looking at/using the rest of the page" panel (e.g. Fusion API
   Workbench's API Catalog browser, meant to stay open side-by-side with
   the request builder so picking a catalog entry and testing it is one
   continuous flow, not open-panel -> pick -> panel-blocks-you -> close
   panel -> now edit request). Gated by ".catalog-open" (a different class
   than ".settings-open") so this panel and the modal settings drawer can
   coexist in the same page without one's toggle affecting the other. */
.side-panel-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px 14px; cursor:pointer; color:var(--text); font-size:14px; font-weight:600;
}
.side-panel-toggle:hover{background:var(--page-bg);}
.side-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:140;
  width:380px; max-width:90vw;
  background:var(--surface);
  box-shadow:-12px 0 32px rgba(8,10,20,.25);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.catalog-open .side-panel{transform:translateX(0);}
.side-panel-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--border); flex:0 0 auto;
  font-weight:700; color:var(--text);
  position:sticky; top:0; background:var(--surface); z-index:1;
}
.side-panel-close{
  background:var(--page-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  width:28px; height:28px; cursor:pointer; color:var(--text-muted);
}
.side-panel-close:hover{background:var(--border-soft); color:var(--text);}
.side-panel-body{padding:16px 20px; flex:1;}

.rights-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:4px;}
.rights-col-title{font-size:12.5px;font-weight:700;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:.03em;}
.rights-item{font-size:13.5px;color:var(--text);padding:4px 0;}
.rights-item.empty{color:var(--text-faint);}

.fs-progress{margin:18px 0 16px;height:8px;}
.fs-status{margin-top:4px;}
.status-banner{
  display:inline-block;padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
}
.status-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.status-amber{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border);}
.status-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);}

.empty-note{color:var(--text-muted);font-size:13.5px;padding:8px 2px;}
.empty-note.error-note{color:var(--red);}
.empty-note.success-note{color:var(--green);margin-bottom:14px;}

/* ---------------- instance properties ---------------- */
.stat-value-sm{font-size:19px;}

.feature-row{display:flex;gap:12px;flex-wrap:wrap;}
.feature-badge{
  padding:10px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600;
  border:1px solid var(--border);
}
.feature-neutral{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-border);}
.feature-success{background:var(--green-bg);color:var(--green);border-color:var(--green-border);}

.ip-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px;}
.ip-field{background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius);padding:14px 16px;}
.ip-label{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.ip-value-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ip-value{font-size:14px;font-family:'SFMono-Regular',Consolas,monospace;color:var(--text);}
.eye-btn{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  width:30px;height:30px;flex:0 0 auto;cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.eye-btn:hover{background:var(--page-bg);}

.raw-json{
  margin:0;padding:14px 16px;font-size:12.5px;line-height:1.6;
  background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-sm);
  overflow-x:auto;max-height:360px;overflow-y:auto;
}

/* ---------------- integrations overview ---------------- */
.compact-type-container { margin: 16px; }
.compact-type-row {
    background: var(--surface);
    padding: 16px 19px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    border: 1px solid var(--border);
    display: grid;
    grid-template-columns: 45px 1fr repeat(3, minmax(70px, 1fr));
    gap: 16px;
    align-items: center;
    transition: all 0.3s ease;
}
.compact-type-row:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-tint-strong);
}
a.compact-type-row { text-decoration: none; color: inherit; cursor: pointer; }
.compact-icon { font-size: 28px; text-align: center; }
.compact-name {
    font-size: 16px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compact-metric {
    text-align: center; padding: 6px 10px; border-radius: var(--radius-sm);
    min-width: 70px; white-space: nowrap;
}
.compact-total { background: var(--accent-tint); border: 1px solid var(--accent-tint-strong); }
.compact-active { background: var(--green-bg); border: 1px solid var(--green-border); }
.compact-inactive { background: var(--red-bg); border: 1px solid var(--red-border); }
.compact-label { font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
.compact-value { font-size: 19px; font-weight: 700; margin-top: 3px; }
.compact-total .compact-label { color: var(--accent-hover); }
.compact-total .compact-value { color: var(--accent); }
.compact-active .compact-label { color: var(--green); }
.compact-active .compact-value { color: var(--green); }
.compact-inactive .compact-label { color: var(--red); }
.compact-inactive .compact-value { color: var(--red); }

.metric-card {
    background: var(--surface);
    padding: 21px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    height: 100%;
    margin-bottom: 8px;
}
.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat-value-ellipsis{font-size:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.section-divider {
    margin: 32px 0 16px; border: none; height: 2px;
    background: linear-gradient(90deg, var(--accent-tint-strong) 0%, transparent 100%);
}
.metric-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.metric-cards-row-5{grid-template-columns:repeat(5,1fr);}
.metric-cards-row-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:820px){.metric-cards-row{grid-template-columns:1fr;}}
.chart-container{width:100%;min-height:420px;}

.card {
    background: var(--surface);
    padding: 19px;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-sm);
    font-family: inherit;
    margin: 8px 0;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeInUp 0.35s ease-out;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-hover);
}

.integrations-overview-header {
    margin-bottom: 8px;
    color: var(--text);
    font-weight: 600;
}

/* Responsive grid layout */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* Animation for card loading */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------- agents ---------------- */
.agent-group{margin-bottom:16px;}
.agent-group:last-child{margin-bottom:0;}
.agent-group-header{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:8px;
}
.agent-group-ok{background:var(--green-bg);}
.agent-group-alert{background:var(--red-bg);}
.agent-group-name{font-weight:700;font-size:14px;}
.agent-group-ok .agent-group-name{color:var(--green);}
.agent-group-alert .agent-group-name{color:var(--red);}
.agent-group-status{font-size:12.5px;color:var(--text-muted);}

.agent-card{
  height:auto;text-align:left;align-items:flex-start;justify-content:flex-start;
  margin:0;
}
.agent-card-name{font-weight:700;font-size:13.5px;color:var(--text);margin-bottom:6px;}
.agent-card-row{font-size:12.5px;color:var(--text-muted);line-height:1.7;}
.agent-card-row strong{color:var(--text);}

/* ---------------- certificates ---------------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:20px;}
.cert-card{
  background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-sm);
}
.cert-expired{border-color:var(--red-border-strong);box-shadow:0 0 10px var(--red-glow);}
.cert-expiring{border-color:var(--amber-border-strong);box-shadow:0 0 10px var(--amber-glow);}
.cert-valid{border-color:var(--green-border-strong);}
.cert-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.cert-icon{font-size:18px;}
.cert-name{word-break: break-word;font-weight:700;font-size:13px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em;}
.cert-field{font-size:13px;color:var(--text);margin-top:4px;}
.cert-expiry{font-size:12.5px;font-weight:600;margin-top:10px;}
.cert-expiry-expired{color:var(--red);}
.cert-expiry-expiring{color:var(--amber);}
.cert-expiry-valid{color:var(--green);}

.cert-summary-banner{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:13.5px;border-left:4px solid;}
.cert-summary-ok{background:var(--green-bg);border-color:var(--green);color:var(--green);}
.cert-summary-alert{background:var(--amber-bg);border-color:var(--amber);color:var(--text);}

.cert-cell-expired{color:var(--red);font-weight:600;background:var(--red-bg);}
.cert-cell-expiring{color:var(--amber);font-weight:600;background:var(--amber-bg);}

.cert-total{text-align:right;color:var(--text-muted);font-size:12.5px;font-weight:500;margin-top:10px;}

/* ---------------- OIC Notes ---------------- */
.notes-tab-panel{display:none;}
.notes-tab-panel.active{display:block;}

.note-block{margin-bottom:14px;}
.note-block-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin:6px;}
.note-list{margin:0;padding-left:20px;color:var(--text);font-size:13.5px;line-height:1.8;}
.note-list li{margin-bottom:2px;}
.note-problem{background:var(--red-bg);border-left:3px solid var(--red);padding:10px 14px;border-radius:var(--radius-xs);font-size:13.5px;color:var(--text);margin-bottom:14px;}
.note-quote{background:var(--blue-bg);border-left:3px solid var(--blue);padding:10px 14px;border-radius:var(--radius-xs);font-size:13.5px;font-style:italic;color:var(--text);margin-bottom:14px;}
.note-example{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.note-example-bad,.note-example-good{flex:1;min-width:220px;padding:10px 14px;border-radius:var(--radius-xs);font-size:12.5px;font-family:monospace;}
.note-example-bad{background:var(--red-bg);color:var(--red);}
.note-example-good{background:var(--green-bg);color:var(--green);}

.notes-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media (max-width:820px){.notes-columns{grid-template-columns:1fr;}}

.quick-ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0;}
@media (max-width:820px){.quick-ref-grid{grid-template-columns:1fr;}}
.quick-ref-box{background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius);padding:14px 16px;}
.quick-ref-box-title{font-weight:700;font-size:13px;margin-bottom:8px;}

.checklist-group{margin-bottom:16px;}
.checklist-group-title{font-weight:700;font-size:13.5px;margin-bottom:8px;color:var(--text);}
.checklist-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);padding:3px 0;}
.checklist-item::before{content:"☐";color:var(--text-faint);}

.scoring-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;}
.scoring-badge{padding:3px 12px;border-radius:999px;font-weight:700;font-size:12px;min-width:70px;text-align:center;}

/* ---------------- iCal Generator ---------------- */
.ical-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
@media (max-width:1020px){.ical-columns{grid-template-columns:1fr;}}
.one-row{display: flex;justify-content: space-between;}
.ical-field{margin-bottom:16px;}
.ical-field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px;}
.ical-field-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
@media (max-width:640px){.ical-field-row{grid-template-columns:1fr;}}

.chip-group{display:flex;flex-wrap:wrap;gap:6px;}
.chip{
  background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:500;color:var(--text-muted);cursor:pointer;
  font-family:inherit;transition:all .15s;
}
.chip:hover{border-color:var(--border-hover);color:var(--text);}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;}

.ical-radio-row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;}
.ical-radio-option{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;}

.ical-output-textarea{
  width:100%;min-height:110px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-family:'SFMono-Regular',Consolas,monospace;font-size:13px;color:var(--text);background:var(--page-bg);
  resize:vertical;
}
.ical-output-code{
  margin-top:10px;padding:12px 14px;background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-sm);
  font-family:monospace;font-size:12.5px;word-break:break-all;
}
.ical-english-box{
  margin-top:14px;padding:12px 16px;background:var(--blue-bg);border:1px solid var(--blue-border);
  border-radius:var(--radius-sm);font-size:13.5px;color:var(--text);
}

.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media (max-width:820px){.preset-grid{grid-template-columns:1fr;}}
.preset-card{background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius);padding:14px 16px;}
.preset-card-title{font-weight:700;font-size:13.5px;margin-bottom:4px;}
.preset-card-desc{font-size:12.5px;color:var(--text-muted);font-style:italic;margin-bottom:8px;}
.preset-card-code{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--code-bg);color:var(--code-text);border-radius:var(--radius-sm);padding:9px 12px;
  font-family:monospace;font-size:11.5px;
}
.preset-card-code code{overflow-x:auto;white-space:nowrap;}
.preset-copy-btn{
  flex:0 0 auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--code-text);
  border-radius:var(--radius-xs);padding:4px 8px;font-size:11px;cursor:pointer;
}
.preset-copy-btn:hover{background:rgba(255,255,255,.18);}

.guide-table th, .guide-table td{font-size:13px;}

/* ---------------- API Explorer ---------------- */
.endpoint-method{
  display:inline-block;padding:4px 10px;border-radius:var(--radius-xs);
  font-weight:700;font-size:11.5px;color:#fff;letter-spacing:.02em;
}
.method-get{background:var(--method-get);}
.method-post{background:var(--method-post);}
.method-put{background:var(--method-put);}
.method-delete{background:var(--method-delete);}
.method-patch{background:var(--method-patch);}

.endpoint-row{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;background:var(--surface);}
.endpoint-row-header{
  display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap;
}
.endpoint-path{font-family:monospace;font-size:13.5px;font-weight:700;color:var(--text);}
.endpoint-summary{font-size:13px;color:var(--text-muted);flex:1;min-width:200px;}

.param-item{
  background:var(--page-bg);padding:10px 14px;border-radius:var(--radius-xs);
  margin-bottom:8px;border-left:3px solid var(--accent);font-size:13px;
}
.param-item code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;}
.param-item p{margin:6px 0 0;font-size:12.5px;color:var(--text-muted);}

.explorer-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px;max-width:500px;}

.desc-html p{margin:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--text);}
.desc-html pre{background:var(--code-bg);color:var(--code-text);padding:12px 14px;border-radius:var(--radius-xs);overflow-x:auto;font-size:12px;}
.desc-html code{font-family:monospace;}
.desc-html ul{margin:0 0 10px;padding-left:20px;font-size:13.5px;}

/* ---------------- Connect / login ---------------- */
.connect-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
@media (max-width:1020px){.connect-columns{grid-template-columns:1fr;}}
.connect-textarea{
  width:100%;min-height:130px;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--radius-sm);
  font-family:'SFMono-Regular',Consolas,monospace;font-size:12.5px;color:var(--text);background:var(--page-bg);
  resize:vertical;
}
.connect-status-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;
}
.connect-status-connected{background:var(--green-bg);border:1px solid var(--green-border);}
.connect-status-disconnected{background:var(--blue-bg);border:1px solid var(--blue-border);}

/* ---------------- standalone auth page (no sidebar/topbar) ---------------- */
.auth-page{
  min-height:100vh;display:flex;align-items:flex-start;justify-content:center;
  background:var(--page-bg);padding:48px 24px;
}
.auth-container{width:100%;max-width:1000px;}
.auth-brand-centered{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:32px;text-align:center;}
.auth-brand-logo{width:56px;height:56px;border-radius:var(--radius-lg);box-shadow:0 4px 16px rgba(91,95,242,.3);}
.auth-brand-name{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.01em;}
.auth-brand-by{font-size:14px;font-weight:500;color:var(--text-muted);}

/* ---------------- OIC Design Time ---------------- */
.dt-filter-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
@media (max-width:900px){.dt-filter-row{grid-template-columns:1fr 1fr;}}
.dt-search-row{display:flex;gap:10px;align-items:center;margin-bottom:6px;}
.dt-search-row input{flex:1;}

.dt-filters-card .dt-filter-row{margin-bottom:0;}

.dt-section-head{display:flex;align-items:center;justify-content:space-between;margin-top:4px;}
.dt-section-head .panel-subtitle{margin:0;}

.package-row-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:10px;
}
.package-row-info{display:flex;align-items:center;gap:14px;flex:1;min-width:0;}
.package-row-name{font-weight:600;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.package-row-count{background:var(--blue-bg);color:var(--blue);padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;}

.panel-footer-actions{display:flex;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-soft);}
.primary-btn{
  background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);
  padding:10px 20px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:0 2px 8px rgba(91,95,242,.3);
  transition:background .15s,transform .1s;
}
.primary-btn:hover{background:var(--accent-hover);}
.primary-btn:active{transform:translateY(1px);}

/* ---------------- scheduled integrations: future runs ---------------- */
.submitters-list{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.submitter-card{
  background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13.5px;color:var(--text);
}

.view-tabs{display:flex;gap:6px;margin:18px 0 16px;}
.view-tab.active{background:var(--accent-tint);border-color:var(--accent-tint-strong);color:var(--accent);font-weight:600;}

.runs-view{display:none;}
.runs-view.active{display:block;}

.calendar-frame{width:100%;border:1px solid var(--border);border-radius:var(--radius);}
.timeline-chart{width:100%;min-height:480px;}

/* ---------------- responsive ---------------- */

.panel, .dashboard-panel{overflow-x:auto;}

/* ---- tablet: quick-stats drops below main, sidebar stays as a rail ---- */
@media (max-width:1180px){
  .layout{
    grid-template-columns:var(--sidebar-w) 1fr;
    grid-template-areas:"sidebar main" "sidebar quick";
  }
  html.sidebar-collapsed .layout{grid-template-columns:var(--sidebar-w-collapsed) 1fr;}
  .quick-stats{
    border-left:none;border-top:1px solid var(--border);
    padding:22px 28px 32px;
  }
  .qs-title{margin-top:0;}
}

/* ---- mobile: sidebar becomes an off-canvas drawer ---- */
@media (max-width:860px){
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:"main" "quick";
  }
  html.sidebar-collapsed .layout{grid-template-columns:1fr;}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:40;
    width:270px;height:100vh;
    transform:translateX(-100%);
    box-shadow:none;
    transition:transform .25s cubic-bezier(.4,0,.2,1);
  }
  html.mobile-sidebar-open .sidebar{
    transform:translateX(0);
    box-shadow:12px 0 32px rgba(8,10,20,.35);
  }
  html.sidebar-collapsed .sidebar{padding:18px 14px;align-items:stretch;}
  html.sidebar-collapsed .brand-name,
  html.sidebar-collapsed .welcome-text,
  html.sidebar-collapsed .label,
  html.sidebar-collapsed .label-text{display:inline;}
  html.sidebar-collapsed .sidebar-item{justify-content:flex-start;padding:9px 11px;}
  html.sidebar-collapsed .sidebar-head{flex-direction:row;justify-content:space-between;}

  .collapse-btn{display:none;} /* the hamburger + backdrop own open/close on mobile */

  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,12,20,.5);z-index:35;}
  html.mobile-sidebar-open .sidebar-backdrop{display:block;}

  .mobile-menu-btn{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:10px;
    background:var(--surface);border:1px solid var(--border);color:var(--icon-muted);
    cursor:pointer;flex:0 0 auto;
  }
  .mobile-menu-btn:hover{background:var(--page-bg);}

  .topbar{padding:12px 16px;gap:10px;}
  .topbar-search{display:none;}
  .content{padding:8px 16px 32px;}
  .quick-stats{padding:18px 16px 28px;}
  .page-title{font-size:20px;}
  .page-subtitle{font-size:13px;}
  .main-tabs{max-width:100%;overflow-x:auto;}
  .stat-value{font-size:21px;}
  .chart-wrap{height:280px;}
  .info-banner{flex-direction:column;align-items:flex-start;gap:4px;}
  .info-banner .banner-sep{display:none;}
}

@media (max-width:420px){
  .content{padding:14px 12px 28px;}
  .panel{padding:18px 16px;}
  .qs-card{padding:13px;}
  .brand-name{font-size:15px;}
}

/* ---- fixed multi-column grids that previously had no mobile fallback ---- */
@media (max-width:820px){
  .rights-columns{grid-template-columns:1fr;gap:16px;}
  .ip-row{grid-template-columns:1fr;gap:14px;}
  .metric-cards-row-4,.metric-cards-row-5{grid-template-columns:repeat(2,1fr);}
  .dt-filter-row{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .mi-btn-row{grid-template-columns:1fr;}
  .metric-cards-row-4,.metric-cards-row-5{grid-template-columns:1fr;}
  .dt-filter-row{grid-template-columns:1fr;}
  .explorer-metrics{grid-template-columns:1fr;}
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}
.sidebar-item:focus-visible,
.main-tab:focus-visible,
.sub-tab:focus-visible,
.chip:focus-visible{
  outline-offset:1px;
}


/* ---------------- custom thin scrollbar (adopted from the reference Tailwind build) ---------------- */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border:2px solid #fff;border-radius:var(--radius-xs);}
::-webkit-scrollbar-track{background:transparent;}

/* ---------------- Tabulator.js theming (Fusion Outage Manage tab prototype) ---------------- */
.tabulator{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  font-family:inherit;font-size:13.5px;background:var(--surface);
}
.tabulator-header{background:var(--page-bg);border-bottom:1px solid var(--border);}
.tabulator-col{background:var(--page-bg);border-right:none !important;}
.tabulator-col-title{font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;}
.tabulator-header-filter input{
  border:1px solid var(--border-soft);border-radius:var(--radius-xs);padding:5px 8px;font-size:12.5px;
  font-family:inherit;background:var(--surface);color:var(--text);
}
.tabulator-header-filter input:focus{outline:none;border-color:var(--accent);}
.tabulator-row{background:var(--surface);border-bottom:1px solid var(--border-soft);}
.tabulator-row:hover{background:var(--page-bg);}
.tabulator-row .tabulator-cell{padding:12px 14px;border-right:none !important;}
.tabulator-row.tabulator-selected{background:var(--accent-tint) !important;}
.tabulator-cell.tabulator-editing input,
.tabulator-cell.tabulator-editing select{
  border:1.5px solid var(--accent);border-radius:var(--radius-xs);padding:6px 8px;font-family:inherit;font-size:13.5px;
}
.tabulator-footer{background:var(--page-bg);border-top:1px solid var(--border);padding:8px 14px;}
.tabulator-paginator{font-size:13px;color:var(--text-muted);}
.tabulator-page{
  border:1px solid var(--border-soft) !important;border-radius:var(--radius-xs) !important;
  background:var(--surface) !important;color:var(--text) !important;font-size:13px !important;
  padding:4px 10px !important;margin:0 2px !important;
}
.tabulator-page:hover{background:var(--accent-tint) !important;}
.tabulator-page.active{background:var(--accent) !important;color:#fff !important;border-color:var(--accent) !important;}
.tabulator-page[disabled]{opacity:.4;}

/* ---------------- AG Grid theming (Fusion Outage Manage tab prototype) ---------------- */
.ag-theme-quartz.oic-ag-grid, .ag-theme-quartz-dark.oic-ag-grid, .ag-theme-quartz-auto-dark.oic-ag-grid{
  --ag-active-color:var(--accent);
  --ag-selected-row-background-color:var(--accent-tint);
  --ag-row-hover-color:var(--page-bg);
  --ag-header-background-color:var(--page-bg);
  --ag-header-foreground-color:var(--text-muted);
  --ag-border-color:var(--border);
  --ag-row-border-color:var(--border-soft);
  --ag-font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ag-font-size:13.5px;
  --ag-cell-horizontal-padding:14px;
  --ag-header-height:42px;
  --ag-row-height:44px;
  --ag-border-radius:var(--radius);
  --ag-wrapper-border-radius:var(--radius);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.oic-ag-grid .ag-header-cell-text{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;}

/* ---------------- Generate TDD: rendered markdown body ---------------- */
.markdown-body{font-size:14px;line-height:1.6;color:var(--text);}
.markdown-body h1{font-size:22px;font-weight:800;margin:0 0 12px;}
.markdown-body h2{font-size:18px;font-weight:700;margin:24px 0 10px;border-bottom:1px solid var(--border-soft);padding-bottom:6px;}
.markdown-body h3{font-size:15px;font-weight:700;margin:18px 0 8px;}
.markdown-body p{margin:0 0 10px;}
.markdown-body table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;margin:10px 0 16px;
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;font-size:13.5px;}
.markdown-body th{background:var(--page-bg);text-align:left;padding:8px 12px;font-weight:700;
  color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--border);
  word-break:break-word;overflow-wrap:break-word;}
.markdown-body td{padding:8px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top;
  word-break:break-word;overflow-wrap:break-word;white-space:normal;}
.markdown-body tr:last-child td{border-bottom:none;}
.markdown-body code{background:var(--page-bg);padding:1px 5px;border-radius:4px;font-size:12.5px;font-family:ui-monospace,monospace;}
.markdown-body pre{background:var(--page-bg);border:1px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:12px 14px;overflow-x:auto;margin:10px 0 16px;}
.markdown-body pre code{background:none;padding:0;}

/* ---------------- Tile (icon-badge metric card) ---------------- */
.tile{
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  padding:16px 20px;box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;
  text-decoration:none;color:inherit;
}
.tile.tile-clickable{cursor:pointer;}
.tile:hover{border-color:var(--accent-tint-strong);box-shadow:var(--shadow-md);}
.tile-icon{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;
  background:var(--accent-tint);color:var(--accent);font-size:18px;
}
.tile-body{min-width:0;}
.tile-label{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-value{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-value-sm{font-size:15px;font-weight:700;}
.tile-subtitle{font-size:11px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px;}



/* ---------------- Monitor Integrations: refined card + empty state ---------------- */
.mi-card{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-xl);
  padding:24px 26px;box-shadow:var(--shadow-lg);
}
.mi-card-header{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;color:var(--text);margin-bottom:20px;}
.mi-card-header .mi-card-check{color:var(--green);font-size:15px;}

.mi-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 20px;}
.mi-empty-icon{
  width:44px;height:44px;border-radius:var(--radius);background:var(--page-bg);
  display:flex;align-items:center;justify-content:center;font-size:19px;color:var(--text-faint);
  margin-bottom:16px;
}
.mi-empty-title{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:6px;}
.mi-empty-subtitle{font-size:13px;color:var(--text-muted);max-width:340px;line-height:1.5;}

/* ---------------- Monitor Integrations: dark primary + refined secondary buttons ---------------- */
.mi-btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;}
.mi-btn-primary{
  background:var(--accent);color:#fff;border:none;border-radius:var(--radius-md);
  padding:11px 16px;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .15s;
  box-shadow:0 2px 8px rgba(91,95,242,.3);
}
.mi-btn-primary:hover{background:var(--accent-hover);}
.mi-btn-secondary{
  background:var(--page-bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:11px 16px;font-size:13.5px;font-weight:500;font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.mi-btn-secondary:hover{background:var(--page-bg-hover);border-color:var(--border-hover);}

.mi-page .download-btn, .mi-page .refresh-btn, .mi-page .view-tab{background:var(--page-bg);}
.mi-page .download-btn:hover, .mi-page .refresh-btn:hover, .mi-page .view-tab:hover{background:var(--page-bg-hover);}
.mi-page .ical-field label{color:var(--text);}

/* ---------------- Settings page ---------------- */
.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:1180px){.settings-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.settings-grid{grid-template-columns:1fr;}}
.settings-card{
  position:relative;display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .1s;
}
a.settings-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(91,95,242,.12);transform:translateY(-1px);}
.settings-card.is-soon{opacity:.55;}
.settings-card-icon{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.settings-card-body{flex:1;min-width:0;}
.settings-card-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:3px;}
.settings-card-desc{font-size:12px;color:var(--text-muted);line-height:1.45;}
.settings-card-badge{
  position:absolute;top:12px;right:14px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--text-faint);
  background:var(--page-bg);border:1px solid var(--border);border-radius:999px;padding:2px 8px;
}
.settings-card-chevron{flex:0 0 auto;align-self:center;color:var(--text-faint);opacity:0;transition:opacity .15s,transform .15s;}
a.settings-card:hover .settings-card-chevron{opacity:1;transform:translateX(2px);}

.settings-bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
@media (max-width:900px){.settings-bottom-grid{grid-template-columns:1fr;}}
.settings-env-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13px;
}
.settings-env-row:last-child{border-bottom:none;}
.settings-env-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text);}
.settings-env-dot{width:7px;height:7px;border-radius:999px;background:var(--text-faint);flex:0 0 auto;}
.settings-env-dot.active{background:var(--green);}
.settings-action-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--border-soft);text-decoration:none;color:inherit;
}
.settings-action-row:last-child{border-bottom:none;}
.settings-action-title{font-size:13px;font-weight:600;color:var(--text);}
.settings-action-desc{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.settings-shortcut-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13px;
}
.settings-shortcut-row:last-child{border-bottom:none;}
.settings-shortcut-desc{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.settings-kbd{
  font-family:inherit;font-size:11px;font-weight:700;color:var(--text-muted);
  background:var(--page-bg);border:1px solid var(--border);border-radius:5px;padding:3px 7px;white-space:nowrap;
}

/* ---------------- styled range slider (native <input type="range">, cross-browser) ---------------- */
.styled-range{
  -webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  background:var(--border);outline:none;cursor:pointer;margin:4px 0;
}
.styled-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
.styled-range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);
  box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
.styled-range::-moz-range-track{height:6px;border-radius:99px;background:var(--border);}
/* Diagram viewer popup (openImageViewer in app.js) */
.img-viewer{display:flex;flex-direction:column;height:100%;min-height:0;}
.img-viewer-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border);flex:0 0 auto;}
.img-viewer-zoom{font-weight:700;min-width:48px;text-align:center;color:var(--text);}
.img-viewer-hint{margin-left:auto;font-size:12px;color:var(--text-muted);}
.img-viewer-stage{flex:1;min-height:0;overflow:auto;background:var(--page-bg);padding:12px;cursor:grab;touch-action:none;}
.img-viewer-stage.dragging{cursor:grabbing;}
.img-viewer-stage img{display:block;max-width:none;background:#fff;user-select:none;}
img.zoomable-diagram{cursor:zoom-in;}

/* Create New Flow: forms on the left, the live picture on the right. The right column stays in view
   while the (long) forms scroll, and may shrink (minmax(0, ..)) so a wide diagram scrolls inside its
   own box instead of pushing the Settings button off the screen. Only a really narrow window stacks. */
.flow-editor-grid{display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,1.6fr); gap:20px; align-items:start;}
.flow-live-graph{min-width:0; position:sticky; top:76px; align-self:start;}
.flow-live-graph-box{overflow:auto; max-width:100%; max-height:calc(100vh - 240px); min-height:200px;
  border:1px solid var(--border); border-radius:var(--radius); background:#fff;}
@media (max-width:760px){
  .flow-editor-grid{grid-template-columns:minmax(0,1fr);}
  .flow-live-graph{position:static;}
  .flow-live-graph-box{max-height:75vh;}
}
/* The generic .panel scrolls sideways, which would stop the live graph above from staying in view
   (a sticky element sticks to its nearest scrolling ancestor). The editor's contents shrink instead. */
#fdCreateNew > .panel{overflow:visible;}

/* In-page loading indicator (loadingBlock in app.js) */
.inline-loading{display:flex;align-items:center;gap:12px;padding:16px 4px;color:var(--text-muted);font-size:14px;font-weight:500;}
.inline-progress{height:6px;border-radius:999px;background:var(--border-soft);overflow:hidden;margin:2px 4px 12px;max-width:520px;}
.inline-progress > div{height:100%;background:var(--accent);border-radius:999px;transition:width .4s ease;}

/* Create New Flow: while the picture is being re-drawn, dim it and show the spinner above it */
.flow-live-loading{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;padding:2px 10px;}
.flow-live-graph:has(.flow-live-loading) .flow-live-graph-box{opacity:.4;transition:opacity .2s;}

/* Page navigation progress bar (showNavProgress in app.js) */
.nav-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .15s;}
.nav-progress.visible{opacity:1;}
.nav-progress::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:var(--accent);border-radius:999px;animation:navProgressSlide 1.1s ease-in-out infinite;}
@keyframes navProgressSlide{0%{left:-40%;}100%{left:100%;}}
body.nav-loading{cursor:progress;}

/* Spinner over a chart while its data loads (buildTrendChart in app.js) */
.chart-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--surface) 75%, transparent);}

/* A dashboard tile that links to the matching Monitor Integrations tab */
a.tile{text-decoration:none;color:inherit;}
a.tile.tile-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ======================================================
   ESS HEALTH (full-width panel)
====================================================== */
.ess-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 16px;
    padding: 16px;
    overflow-y: auto;
}

.ess-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
}

/* The output pane takes the remaining height and scrolls internally,
   so a long report doesn't push the parameter form off the screen. */
.ess-output-card {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.ess-section-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.ess-param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.ess-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ess-field label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint);
}

.ess-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
}

.ess-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91, 95, 238, 0.14);
}

/* The literal parameter name, so what's sent is never a guess. */
.ess-param-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--text-faint);
}

.ess-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ess-run-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--green);
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ess-run-btn:hover { background: var(--green);
}

.ess-run-btn:disabled {
    background: var(--border-hover);
    color: var(--text-faint);
    cursor: not-allowed;
}

.ess-reset-btn {
    padding: 8px 14px;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
}

.ess-reset-btn:hover { border-color: var(--text-faint); color: var(--text);
}

.ess-status {
    font-size: 12px;
    color: var(--text-muted);
}

.ess-status-error { color: var(--red);
}

.ess-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ess-output-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ess-output-meta {
    font-size: 11.5px;
    color: var(--text-faint);
}

.ess-copy-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
}

.ess-copy-btn:hover { border-color: var(--accent); color: var(--accent);
}

/* Verbatim output: preserve whitespace, wrap long lines, scroll. */
.ess-output {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 12px;
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

/* ------------------ ESS dashboard ------------------ */
.ess-params-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ess-collapse-btn {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
}

.ess-collapse-btn:hover { border-color: var(--accent); color: var(--accent);
}

.ess-view-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.ess-view-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.ess-view-tab:hover { color: var(--text);
}

.ess-view-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Pushes the meta + copy button to the right of the tab strip. */
.ess-view-tabs .ess-output-meta { margin-left: auto;
}

.ess-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ess-window {
    font-size: 11.5px;
    color: var(--text-faint);
    margin-bottom: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ess-kpi-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.ess-kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-hover);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
}

/* Tone is carried on the left edge only — the number itself stays in the
   normal ink colour so a whole row of tiles doesn't read as alarming. */
.ess-kpi-good { border-left-color: var(--green);
}

.ess-kpi-warn { border-left-color: #f0a12e;
}

.ess-kpi-bad { border-left-color: var(--red);
}

.ess-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ess-kpi-label {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint);
}

.ess-chart-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.4fr);
    gap: 16px;
}

@media (max-width: 900px) {
  .ess-chart-row { grid-template-columns: 1fr;}
}

.ess-chart-card { min-width: 0;
}

.ess-section-note {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-faint);
}

.ess-donut-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ess-donut { width: 160px; height: 160px; flex: 0 0 auto;
}

.ess-donut circle { transition: opacity 0.12s ease;
}

.ess-donut:hover circle { opacity: 0.55;
}

.ess-donut circle:hover { opacity: 1;
}

.ess-donut-value {
    text-anchor: middle;
    font-size: 20px;
    font-weight: 700;
    fill: var(--text);
}

.ess-donut-label {
    text-anchor: middle;
    font-size: 10px;
    fill: var(--text-faint);
}

.ess-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ess-legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.ess-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.ess-legend-label { color: var(--text-muted);
}

.ess-legend-value {
    margin-left: auto;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ess-legend-pct { color: var(--text-faint); font-size: 11px;
}

.ess-bars-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.ess-bar-row {
    display: grid;
    grid-template-columns: minmax(80px, 130px) 1fr minmax(90px, auto);
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.ess-bar-label {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ess-bar-track {
    background: var(--page-bg);
    border-radius: 3px;
    height: 16px;
    overflow: hidden;
}

.ess-bar-fill {
    height: 100%;
    border-radius: 3px;
    min-width: 2px;
}

.ess-bar-value {
    text-align: right;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ess-bar-failed {
    color: var(--red);
    font-size: 11px;
    margin-left: 4px;
}

.ess-treemap { width: 100%;
}

.ess-treemap-svg {
    width: 100%;
    height: auto;
    display: block;
}

.ess-tm-group {
    fill: var(--page-bg);
    stroke: var(--border);
    stroke-width: 1;
}

.ess-tm-group-label {
    font-size: 11px;
    font-weight: 600;
    fill: var(--text-muted);
}

.ess-tm-tile {
    stroke: var(--surface);
    stroke-width: 1;
    transition: opacity 0.1s ease;
}

.ess-tm-tile:hover { opacity: 0.7;
}

/* Outlined rather than recoloured, so the application's own colour still
   identifies the group a failing job belongs to. */
.ess-tm-tile-failing {
    stroke: var(--red);
    stroke-width: 2;
}

.ess-tm-tile-label {
    font-size: 9.5px;
    fill: #ffffff;
    pointer-events: none;
    font-weight: 500;
}

.ess-alert {
    display: grid;
    grid-template-columns: 76px minmax(140px, 1fr) minmax(90px, auto) 2fr;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.ess-alert:last-child { border-bottom: none;
}

.ess-sev {
    text-align: center;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
    background: var(--text-faint);
}

.ess-sev-critical { background: #b91c1c;
}

.ess-sev-high { background: var(--red);
}

.ess-sev-medium { background: #f0a12e;
}

.ess-sev-low { background: var(--text-faint);
}

.ess-alert-job { font-weight: 600; color: var(--text);
}

.ess-alert-app { color: var(--text-muted);
}

.ess-alert-reason { color: var(--text-faint);
}

.ess-table-wrap {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
}

.ess-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.ess-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border-hover);
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.ess-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    white-space: nowrap;
}

.ess-table tbody tr:hover { background: var(--page-bg);
}

.ess-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ess-td-job {
    font-weight: 600;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ess-risk {
    display: inline-block;
    min-width: 46px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ess-risk-good { background: var(--green-bg); color: #157f3b;
}

.ess-risk-warn { background: #fdf1dc; color: #99630f;
}

.ess-risk-bad { background: var(--red-bg); color: #a51b1b;
}

.ess-tag {
    padding: 1px 7px;
    border-radius: var(--radius-sm);
    background: var(--page-bg);
    color: var(--text-muted);
    font-size: 11px;
}

.ess-tag-warn { background: #fdf1dc; color: #99630f; font-weight: 600;
}

.ess-failed { color: var(--red);
}

.ess-no-data {
    margin: 0;
    padding: 18px 0;
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
}

.ess-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 40px 20px;
}

.ess-empty-icon { margin: 0; font-size: 30px;
}

.ess-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.ess-empty-text {
    margin: 0;
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
}

/* ------------- ESS drill-down affordances ------------- */
/* KPI tiles are buttons now — reset the UA button styling but keep the
   card look, and make it obvious they're clickable. */
.ess-kpi {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}

.ess-kpi:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

.ess-kpi:active { transform: translateY(1px);
}

.ess-kpi:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ess-legend-item {
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-sm);
}

.ess-legend-item:hover { background: var(--page-bg);
}

.ess-arc { cursor: pointer;
}

.ess-bar-row {
    cursor: pointer;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: var(--radius-sm);
}

.ess-bar-row:hover { background: var(--page-bg);
}

.ess-tm-tile, .ess-tm-group, .ess-tm-group-label, .ess-tm-tile-label {
    cursor: pointer;
}

.ess-alert {
    cursor: pointer;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;
    margin-right: -4px;
    border-radius: var(--radius-sm);
}

.ess-alert:hover { background: var(--page-bg);
}

.ess-row-clickable { cursor: pointer;
}

/* Detail section header + active-filter chip */
/* Breaks out of .ess-card's own padding (16px 20px, matched in both the
   normal and maximized states) so it sits flush across the top like
   every other panel's title bar in the app, rather than floating inset
   inside the card like a heading. .panel-title supplies the 40px strip,
   alt background, border and uppercase weight — this only adds what's
   specific to sitting inside a padded card. */
.ess-detail-titlebar {
    margin: -16px -20px 12px;
    padding: 0 20px;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.ess-detail-titletext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* text-transform inherits from .panel-title otherwise, which would
   shout the note the same as the title next to it. */
.ess-detail-titlebar .ess-section-note {
    text-transform: none;
}

.ess-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ess-detail-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ess-filter-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-tint);
    color: var(--accent-hover);
    font-size: 11.5px;
    font-weight: 600;
}

.ess-clear-filter {
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 11.5px;
}

.ess-clear-filter:hover { border-color: var(--red); color: var(--red);
}

/* Single-job detail */
.ess-job-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.ess-job-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.ess-job-meta {
    font-size: 12px;
    color: var(--text-faint);
}

.ess-back-btn {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
}

.ess-back-btn:hover { border-color: var(--accent); color: var(--accent);
}

/* Every field the report returned, two-column so long values still wrap
   sensibly rather than forcing a horizontal scroll. */
.ess-detail-fields {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2px 20px;
}

.ess-detail-field {
    display: grid;
    grid-template-columns: minmax(150px, 40%) 1fr;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.ess-detail-field dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--text-faint);
    align-self: center;
    word-break: break-word;
}

.ess-detail-field dd {
    margin: 0;
    font-size: 12px;
    color: var(--text);
    word-break: break-word;
}

.ess-detail-hidden {
    margin: 12px 0 0;
    font-size: 11.5px;
    color: var(--text-faint);
}

/* ---------------- ESS job search ---------------- */
.ess-detail-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ess-search-input {
    width: 300px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
}

.ess-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91, 95, 238, 0.14);
}

.ess-search-input::placeholder { color: var(--text-faint);
}

/* ---- Maximized job history ----

   The card itself becomes the full-screen backdrop and hands its own
   surface, padding and border to .ess-detail-tile inside it. Done this
   way round rather than stretching the card edge to edge because a table
   pinned to all four sides of the screen has nothing to sit on — the
   inset tile is what makes it read as a sheet of content. */
#ess-detail-card.maximized {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: rgba(15, 18, 28, 0.55);
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.ess-detail-tile {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#ess-detail-card.maximized .ess-detail-tile {
    flex: 1;
    min-height: 0;
    padding: 16px 20px;

    /* var(--surface), not #fff: white in the light theme, and the dark
       theme's panel colour in the dark one. A literal white tile would
       be a hole punched in a dark screen. */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Only the table scrolls — the header, search and filter chip stay put
   at the top of the tile. */
#ess-detail-card.maximized #ess-detail-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* The page behind the backdrop shouldn't scroll with the wheel. Two
   independent classes rather than one shared toggle: the job table and
   the whole panel can each be maximized on their own, and un-maximizing
   one shouldn't restore scrolling while the other is still full-screen. */
body.ess-history-maximized,
body.ess-panel-maximized {
    overflow: hidden;
}

/* Request ids are long numerics — monospace keeps them scannable and
   stops columns jittering as rows filter. */
.ess-td-reqid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ---------------- ESS parameters drawer ---------------- */
.ess-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ess-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    /* Pinned right on its own rather than relying on space-between
       against the panel title — the ERP Monitoring page hides that
       title, which left these sitting on the left. */
    margin-left: auto;
}

.ess-drawer-toggle {
    padding: 7px 14px;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.ess-drawer-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Positioning context for the drawer. The drawer is a sibling of
   .ess-body rather than a child, so it stays put while the dashboard
   scrolls underneath it. */
.ess-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.ess-stage > .ess-body {
    flex: 1;
    min-width: 0;
}

.ess-drawer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92%);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    z-index: 40;
    /* Slid out of view rather than display:none, so it animates and the
       inputs keep their values between openings.

       visibility is what actually takes the closed drawer out of the tab
       order — an off-screen form is still focusable otherwise. It's
       delayed by the slide duration on close, and switched instantly on
       open, so neither direction fights the animation. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
}

.ess-stage.drawer-open .ess-drawer {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.22s ease, visibility 0s linear 0s;
}

.ess-drawer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: rgba(16, 22, 45, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.ess-stage.drawer-open .ess-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.ess-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--page-bg);
}

.ess-drawer-header .ess-section-title { margin: 0;
}

.ess-drawer-close {
    padding: 2px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-faint);
    font-size: 14px;
    line-height: 1;
}

.ess-drawer-close:hover { background: var(--surface); color: var(--text);
}

/* One field per row — the drawer is narrow, and stacking keeps the
   labels and the literal parameter names readable. */
.ess-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ess-drawer-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--page-bg);
}

.ess-empty-btn { margin-top: 14px;
}

@media (max-width: 640px) {
  .ess-drawer { width: 100%;}
}

/* ---------------- ESS day-range shortcut ---------------- */
.ess-range {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.ess-range-select {
    padding: 6px 26px 6px 10px;
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 12.5px;
}

.ess-range-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(91, 95, 238, 0.14);
}

/* Now icon-only — the label moved onto the range dropdown beside it. */
.ess-drawer-toggle {
    padding: 7px 12px;
    font-size: 15px;
    line-height: 1;
}

.ess-run-btn:disabled {
    background: var(--border-hover);
    color: var(--text-faint);
    cursor: not-allowed;
}

/* The page's own tile. flex/min-height so it fills whatever height
   erp-view has to give rather than sizing to its content — the point is
   a full white sheet behind the empty state and the dashboard both, not
   a card that shrink-wraps around them. */
.ess-panel-tile {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 20px;
}

/* Same full-screen treatment as .result-panel.maximized and
   #ess-detail-card.maximized — this is the outer one, so it gets a
   slightly lower z-index: if the job table is ALSO maximized (nested
   inside this tile in the DOM), it should still end up on top. */
#ess-panel-tile.maximized {
    position: fixed;
    inset: 0;
    z-index: 450;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px;
    height: auto;
    min-height: 0;
}


/* ---- Pieces the reference app gets from its shell, defined here for this app ---- */
.ess-header .ess-status { min-width: 0; }
.ess-header-actions .ess-drawer-toggle { cursor: pointer; }
.ess-sample-note {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-sm);
    background: var(--amber-bg);
    color: var(--amber);
    font-size: 12.5px;
}
.ess-detail-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    box-sizing: border-box;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
}
.ess-detail-titlebar .result-panel-actions { display: flex; align-items: center; gap: 6px; }
.result-action-btn {
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
}
.result-action-btn:hover { border-color: var(--accent); color: var(--accent); }
.ess-run-btn, .ess-reset-btn, .ess-collapse-btn, .ess-copy-btn, .ess-clear-filter, .ess-back-btn, .ess-view-tab,
.ess-drawer-close, .ess-kpi { cursor: pointer; }
.ess-run-btn:disabled { cursor: not-allowed; }
.ess-run-btn.is-running { position: relative; }
.ess-loading {
    flex: 1;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}
.ess-loading.visible { display: flex; }

/* This app's pages scroll as a whole, so the tile is given a height of its own rather than filling a flex parent. */
.ess-panel-tile { height: calc(100vh - 210px); min-height: 520px; }