/*
 * Hostereo UI — 2026 console facelift.
 *
 * Hand-written, NOT built by laravel-mix: prod has no asset build step, so this
 * file is the source. It loads after overrides.css (panels/styles.blade.php).
 *
 *  - Theme rules are scoped to html.hst-ui, which the layout sets only when the
 *    request is NOT a white-label (cross-domain) one, so partner colours keep
 *    working untouched.
 *  - Layout fixes (tables that overflow their card, mobile instance cards) are
 *    unscoped: they are bugs on every brand.
 *  - Dark mode reuses Vuexy's html.dark-layout class (dark-layout.css already
 *    covers the vendor components); this file re-tones it to the brand navy.
 *    The toggle lives in public/js/hostereo-ui.js.
 */

/* ---------------------------------------------------------------- tokens */
html.hst-ui {
  --hst-primary: #7367f0;
  --hst-primary-hover: #5e50ee;
  --hst-primary-text: #5b4fe0;
  --hst-primary-soft: rgba(115, 103, 240, .10);
  --hst-primary-soft-2: rgba(115, 103, 240, .18);
  --hst-on-primary: #ffffff;

  --hst-bg: #f5f5fa;
  --hst-surface: #ffffff;
  --hst-surface-2: #f9f9fc;
  --hst-surface-3: #f1f0f8;
  --hst-border: #e6e5f0;
  --hst-border-strong: #d4d2e6;
  --hst-text: #2b2847;
  --hst-heading: #15122c;
  --hst-muted: #6e6b8c;

  --hst-success: #16a34a;
  --hst-success-soft: rgba(22, 163, 74, .12);
  --hst-warning: #d97706;
  --hst-warning-soft: rgba(217, 119, 6, .12);
  --hst-danger: #dc2626;
  --hst-danger-soft: rgba(220, 38, 38, .10);

  --hst-radius-sm: 8px;
  --hst-radius: 12px;
  --hst-radius-lg: 16px;
  --hst-shadow-sm: 0 1px 2px rgba(21, 18, 44, .05);
  --hst-shadow: 0 1px 3px rgba(21, 18, 44, .06), 0 6px 16px -8px rgba(21, 18, 44, .10);
  --hst-shadow-lg: 0 12px 40px -12px rgba(21, 18, 44, .25);
  --hst-ring: 0 0 0 3px rgba(115, 103, 240, .25);

  --hst-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hst-font-display: "Manrope", "Inter", system-ui, sans-serif;
  --hst-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
  --bs-body-font-family: var(--hst-font);
  --bs-font-sans-serif: var(--hst-font);
}

html.hst-ui.dark-layout {
  --hst-primary: #7c71f5;
  --hst-primary-hover: #8f86ff;
  --hst-primary-text: #a9a2ff;
  --hst-primary-soft: rgba(124, 113, 245, .16);
  --hst-primary-soft-2: rgba(124, 113, 245, .26);

  --hst-bg: #0d0b1f;
  --hst-surface: #161330;
  --hst-surface-2: #1b1838;
  --hst-surface-3: #221e44;
  --hst-border: #2a2652;
  --hst-border-strong: #3a3569;
  --hst-text: #dcdaf0;
  --hst-heading: #ffffff;
  --hst-muted: #9b98bd;

  --hst-success: #4ade80;
  --hst-success-soft: rgba(74, 222, 128, .14);
  --hst-warning: #fbbf24;
  --hst-warning-soft: rgba(251, 191, 36, .14);
  --hst-danger: #f87171;
  --hst-danger-soft: rgba(248, 113, 113, .14);

  --hst-shadow-sm: none;
  --hst-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px -12px rgba(0, 0, 0, .6);
  --hst-shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

/* ------------------------------------------------------------- base type */
html.hst-ui body {
  font-family: var(--hst-font);
  font-size: 14px;
  letter-spacing: -.003em;
  color: var(--hst-text);
  background-color: var(--hst-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.hst-ui body h1, html.hst-ui body h2, html.hst-ui body h3,
html.hst-ui body h4, html.hst-ui body h5, html.hst-ui body h6,
html.hst-ui body .h1, html.hst-ui body .h2, html.hst-ui body .h3,
html.hst-ui body .h4, html.hst-ui body .h5, html.hst-ui body .h6,
html.hst-ui body .display-5, html.hst-ui body .display-6 {
  font-family: var(--hst-font-display);
  color: var(--hst-heading);
  letter-spacing: -.015em;
  font-weight: 700;
}

html.hst-ui body .text-muted { color: var(--hst-muted) !important; }
html.hst-ui body a { color: var(--hst-primary-text); }
html.hst-ui body a:hover { color: var(--hst-primary-hover); }
html.hst-ui body .text-primary { color: var(--hst-primary-text) !important; }
html.hst-ui body code {
  font-family: var(--hst-font-mono);
  font-size: .86em;
  color: var(--hst-primary-text);
  background: var(--hst-primary-soft);
  padding: .1em .4em;
  border-radius: 6px;
}

html.hst-ui body ::selection { background: var(--hst-primary-soft-2); }

/* -------------------------------------------------------------- sidebar */
html.hst-ui body .main-menu,
html.hst-ui body .main-menu.menu-light,
html.hst-ui body .main-menu.menu-dark {
  background: var(--hst-surface);
  border-right: 1px solid var(--hst-border);
  box-shadow: none;
  color: var(--hst-text);
}
html.hst-ui body .main-menu .shadow-bottom { display: none; }
html.hst-ui body .main-menu .navbar-header { height: 72px; padding: 1.1rem 1rem .5rem 1.25rem; }
html.hst-ui body .main-menu .main-menu-content { padding-top: .5rem; }

html.hst-ui body .main-menu .navigation {
  background: transparent;
  font-family: var(--hst-font);
  font-size: 14px;
  font-weight: 500;
  padding: 0 .75rem;
}
html.hst-ui body .main-menu .navigation > li > a,
html.hst-ui body .main-menu .navigation li a {
  color: var(--hst-text);
  margin: 0;
  padding: .6rem .8rem;
  border-radius: var(--hst-radius-sm);
  transition: background-color .15s ease, color .15s ease;
}
html.hst-ui body .main-menu .navigation > li { margin-bottom: 2px; }
html.hst-ui body .main-menu .navigation li a svg,
html.hst-ui body .main-menu .navigation li a i {
  color: var(--hst-muted);
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8;
  margin-right: .85rem;
  transition: color .15s ease;
}
html.hst-ui body .main-menu .navigation li a:hover {
  background: var(--hst-surface-3);
  color: var(--hst-heading);
}
html.hst-ui body .main-menu .navigation li a:hover svg { color: var(--hst-heading); }
html.hst-ui body .main-menu .navigation li:not(.open):not(.has-sub) > a:hover { transform: none; padding-left: .8rem; }

html.hst-ui body .main-menu .navigation > li.active > a,
html.hst-ui body .main-menu .navigation li ul .active,
html.hst-ui body .main-menu .navigation li ul .active > a {
  background: var(--hst-primary-soft) !important;
  color: var(--hst-primary-text) !important;
  box-shadow: none !important;
  font-weight: 600;
}
html.hst-ui body .main-menu .navigation > li.active > a svg,
html.hst-ui body .main-menu .navigation li ul .active > a svg { color: var(--hst-primary-text) !important; }

html.hst-ui body .main-menu .navigation > li.open:not(.menu-item-closing) > a,
html.hst-ui body .main-menu .navigation > li.sidebar-group-active > a {
  background: var(--hst-surface-3);
  color: var(--hst-heading);
}
html.hst-ui body .main-menu .navigation li.has-sub > a::after { opacity: .55; }
html.hst-ui body .main-menu .navigation li ul { background: transparent; }
html.hst-ui body .main-menu .navigation li ul li a { padding-left: 1.2rem; font-weight: 500; }

html.hst-ui body .main-menu .navigation .navigation-header {
  font-family: var(--hst-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--hst-muted);
  margin: 1.25rem 0 .35rem .8rem;
}

html.hst-ui body .main-menu .nav-item .badge { font-size: 10px; font-weight: 600; }
html.hst-ui body .main-menu .modern-nav-toggle svg { color: var(--hst-muted) !important; }

/* "new" chip used on sidebar items (MCP) */
html.hst-ui body .main-menu .hst-new-chip,
.hst-new-chip {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 999px;
  color: var(--hst-primary-text, #5b4fe0);
  background: var(--hst-primary-soft, rgba(115, 103, 240, .12));
}
.vertical-layout.menu-collapsed .main-menu:not(.expanded) .hst-new-chip { display: none; }

/* --------------------------------------------------------------- navbar */
html.hst-ui body .header-navbar.floating-nav,
html.hst-ui body .header-navbar {
  background: color-mix(in srgb, var(--hst-surface) 82%, transparent) !important;
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-radius);
  box-shadow: var(--hst-shadow-sm);
  min-height: 60px;
}
html.hst-ui body .header-navbar-shadow { display: none !important; }
html.hst-ui body .header-navbar .navbar-container ul.navbar-nav li > a.nav-link,
html.hst-ui body .header-navbar .navbar-container ul.navbar-nav li .ficon,
html.hst-ui body .header-navbar .navbar-container ul.navbar-nav li svg.ficon {
  color: var(--hst-text);
}
html.hst-ui body .header-navbar .navbar-container ul.navbar-nav li .ficon { width: 19px; height: 19px; }
html.hst-ui body .header-navbar .navbar-container ul.navbar-nav li > a.nav-link:hover .ficon { color: var(--hst-primary-text); }
html.hst-ui body .header-navbar .user-nav span { color: var(--hst-text); font-weight: 500; }
html.hst-ui body .header-navbar .supportNavItem .support-title { font-weight: 500; }

/* theme switcher */
.hst-theme-toggle .nav-link { display: flex; align-items: center; }
.hst-theme-toggle .dropdown-menu { min-width: 10rem; }
.hst-theme-toggle .dropdown-item { display: flex; align-items: center; gap: .6rem; }
.hst-theme-toggle .dropdown-item .hst-check { margin-left: auto; visibility: hidden; }
.hst-theme-toggle .dropdown-item.active .hst-check { visibility: visible; }
.hst-theme-toggle .hst-ico { display: none; }
html[data-hst-theme="light"] .hst-theme-toggle .hst-ico-light,
html[data-hst-theme="dark"] .hst-theme-toggle .hst-ico-dark,
html[data-hst-theme="system"] .hst-theme-toggle .hst-ico-system,
html:not([data-hst-theme]) .hst-theme-toggle .hst-ico-system { display: inline-block; }

/* ---------------------------------------------------------- page header */
html.hst-ui body .content-header { margin-bottom: .25rem; }
html.hst-ui body .content-header .content-header-title {
  font-family: var(--hst-font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--hst-heading) !important;
  border-right: 1px solid var(--hst-border);
  padding-right: 1rem;
}
html.hst-ui body .content-header .breadcrumb { font-size: 13px; }
html.hst-ui body .content-header .breadcrumb .breadcrumb-item,
html.hst-ui body .content-header .breadcrumb .breadcrumb-item a { color: var(--hst-muted); }
html.hst-ui body .content-header .breadcrumb .breadcrumb-item a:hover { color: var(--hst-primary-text); }

/* ----------------------------------------------------------------- cards */
html.hst-ui body .card {
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-radius-lg);
  box-shadow: var(--hst-shadow);
}
html.hst-ui body .card .card-header {
  background: transparent;
  border-bottom: 0;
  padding: 1.25rem 1.5rem .5rem;
}
html.hst-ui body .card .card-title {
  font-family: var(--hst-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--hst-heading);
}
html.hst-ui body .card .card-body { padding: 1.25rem 1.5rem; }
html.hst-ui body .card .card-footer { background: transparent; border-top: 1px solid var(--hst-border); }

/* --------------------------------------------------------------- buttons */
html.hst-ui body .btn {
  font-family: var(--hst-font);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 10px;
  padding: .6rem 1.1rem;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
html.hst-ui body .btn-sm { padding: .4rem .75rem; border-radius: 8px; }
html.hst-ui body .btn-lg { padding: .75rem 1.4rem; }
html.hst-ui body .btn-primary,
html.hst-ui body .btn.btn-primary,
html.hst-ui body .dt-button.btn-primary {
  background: var(--hst-primary) !important;
  border-color: var(--hst-primary) !important;
  color: var(--hst-on-primary) !important;
  box-shadow: 0 1px 2px rgba(21, 18, 44, .12), inset 0 1px 0 rgba(255, 255, 255, .12);
}
html.hst-ui body .btn-primary:hover:not(.disabled):not(:disabled),
html.hst-ui body .btn-primary:focus,
html.hst-ui body .btn-primary:active {
  background: var(--hst-primary-hover) !important;
  border-color: var(--hst-primary-hover) !important;
  color: var(--hst-on-primary) !important;
  box-shadow: 0 6px 18px -8px var(--hst-primary) !important;
}
html.hst-ui body .btn-primary.disabled,
html.hst-ui body .btn-primary:disabled { opacity: .45; }

html.hst-ui body .btn-outline-primary,
html.hst-ui body .btn-outline-secondary {
  background: var(--hst-surface) !important;
  border: 1px solid var(--hst-border-strong) !important;
  color: var(--hst-text) !important;
}
html.hst-ui body .btn-outline-primary:hover:not(.disabled):not(:disabled),
html.hst-ui body .btn-outline-secondary:hover:not(.disabled):not(:disabled) {
  background: var(--hst-surface-3) !important;
  border-color: var(--hst-border-strong) !important;
  color: var(--hst-heading) !important;
  box-shadow: none !important;
}
html.hst-ui body .btn-primary-custom {
  background: var(--hst-primary-soft) !important;
  color: var(--hst-primary-text) !important;
  border-color: transparent !important;
}
html.hst-ui body .btn:focus-visible,
html.hst-ui body .form-control:focus,
html.hst-ui body .form-select:focus { box-shadow: var(--hst-ring) !important; }

/* ----------------------------------------------------------------- forms */
html.hst-ui body .form-control,
html.hst-ui body .form-select,
html.hst-ui body .input-group-text,
html.hst-ui body .select2-container--default .select2-selection--single,
html.hst-ui body .select2-container--default .select2-selection--multiple {
  background-color: var(--hst-surface);
  border: 1px solid var(--hst-border-strong);
  border-radius: 10px;
  color: var(--hst-text);
  font-family: var(--hst-font);
  min-height: 40px;
}
html.hst-ui body .input-group > .form-control:not(:first-child),
html.hst-ui body .input-group > .input-group-text:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
html.hst-ui body .input-group > .form-control:not(:last-child),
html.hst-ui body .input-group > .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
html.hst-ui body .form-control::placeholder { color: var(--hst-muted); opacity: .8; }
html.hst-ui body .form-control:focus,
html.hst-ui body .form-select:focus { border-color: var(--hst-primary); background-color: var(--hst-surface); color: var(--hst-text); }
html.hst-ui body .form-label, html.hst-ui body label { color: var(--hst-text); font-weight: 500; }
html.hst-ui body .form-check-input:checked { background-color: var(--hst-primary); border-color: var(--hst-primary); }
html.hst-ui body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--hst-text); line-height: 38px; }
html.hst-ui body .select2-dropdown { background: var(--hst-surface); border-color: var(--hst-border); border-radius: 10px; overflow: hidden; }

/* ---------------------------------------------------------------- tables */
html.hst-ui body .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hst-text);
  --bs-table-hover-bg: var(--hst-surface-2);
  --bs-table-hover-color: var(--hst-heading);
  color: var(--hst-text);
  border-color: var(--hst-border);
  margin-bottom: 0;
}
html.hst-ui body .table > :not(caption) > * > * { border-bottom-color: var(--hst-border); }
html.hst-ui body .table thead th,
html.hst-ui body .table thead th.sorting {
  background: var(--hst-surface-2) !important;
  color: var(--hst-muted);
  font-family: var(--hst-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top: 1px solid var(--hst-border);
  border-bottom: 1px solid var(--hst-border);
  padding-top: .8rem;
  padding-bottom: .8rem;
  white-space: nowrap;
}
html.hst-ui body .table tbody td { padding-top: .85rem; padding-bottom: .85rem; vertical-align: middle; }
html.hst-ui body .table tbody tr { transition: background-color .12s ease; }
html.hst-ui body .table tbody tr:hover > * { background-color: var(--hst-surface-2); }
html.hst-ui body .table tbody tr:last-child > * { border-bottom: 0; }
html.hst-ui body .dataTables_wrapper .table-header { padding: .75rem 1.25rem; }
html.hst-ui body .dataTables_wrapper .dataTables_filter input { border-radius: 10px; }
html.hst-ui body .page-item .page-link { border-radius: 8px; margin: 0 2px; }
html.hst-ui body .page-item.active .page-link { background: var(--hst-primary); border-color: var(--hst-primary); }

/* Every DataTable gets a horizontal-scroll wrapper (hostereo-ui.js wraps it),
   so a wide table scrolls inside its card instead of running off the page. */
.hst-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.hst-table-scroll > table { width: 100% !important; }
.card { min-width: 0; }
.content-body .row > [class*="col"] { min-width: 0; }

/* ---------------------------------------------------------------- badges */
html.hst-ui body .badge {
  font-family: var(--hst-font);
  font-weight: 600;
  font-size: 11px;
  border-radius: 999px;
  padding: .3em .65em;
  letter-spacing: .01em;
}
html.hst-ui body .badge-light-primary { background: var(--hst-primary-soft) !important; color: var(--hst-primary-text) !important; }
html.hst-ui body .badge-light-success { background: var(--hst-success-soft) !important; color: var(--hst-success) !important; }
html.hst-ui body .badge-light-danger { background: var(--hst-danger-soft) !important; color: var(--hst-danger) !important; }
html.hst-ui body .badge-light-warning { background: var(--hst-warning-soft) !important; color: var(--hst-warning) !important; }
html.hst-ui body .badge-light-secondary { background: var(--hst-surface-3) !important; color: var(--hst-muted) !important; }
html.hst-ui body .badge-light-info { background: rgba(14, 165, 233, .12) !important; color: #0284c7 !important; }
html.hst-ui.dark-layout body .badge-light-info { color: #7dd3fc !important; }

/* ------------------------------------------------- dropdowns / modals */
html.hst-ui body .dropdown-menu {
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-radius);
  box-shadow: var(--hst-shadow-lg);
  padding: .35rem;
  color: var(--hst-text);
}
html.hst-ui body .dropdown-menu .dropdown-item {
  border-radius: var(--hst-radius-sm);
  color: var(--hst-text);
  padding: .5rem .75rem;
  font-weight: 500;
}
html.hst-ui body .dropdown-menu .dropdown-item:hover,
html.hst-ui body .dropdown-menu .dropdown-item:focus { background: var(--hst-surface-3); color: var(--hst-heading); }
html.hst-ui body .dropdown-menu .dropdown-item.text-danger:hover { background: var(--hst-danger-soft); color: var(--hst-danger) !important; }
html.hst-ui body .dropdown-menu .dropdown-item.active,
html.hst-ui body .dropdown-menu .dropdown-item:active { background: var(--hst-primary-soft); color: var(--hst-primary-text); }
html.hst-ui body .dropdown-divider { border-color: var(--hst-border); }

html.hst-ui body .modal-content {
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-radius-lg);
  box-shadow: var(--hst-shadow-lg);
}
html.hst-ui body .modal-header { background: transparent; border-bottom: 0; }
html.hst-ui body .modal-footer { border-top: 1px solid var(--hst-border); }
html.hst-ui body .modal-backdrop.show { opacity: .55; }

/* ------------------------------------------------------- tabs / alerts */
html.hst-ui body .nav-tabs { border-bottom: 1px solid var(--hst-border); gap: .25rem; }
html.hst-ui body .nav-tabs .nav-link {
  border: 0 !important;
  border-radius: var(--hst-radius-sm) var(--hst-radius-sm) 0 0;
  color: var(--hst-muted);
  font-weight: 600;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 transparent;
}
html.hst-ui body .nav-tabs .nav-link:hover { color: var(--hst-heading); }
html.hst-ui body .nav-tabs .nav-link.active,
html.hst-ui body .nav-tabs .nav-item .nav-link.active {
  color: var(--hst-primary-text) !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 var(--hst-primary);
}
html.hst-ui body .nav-pills .nav-link.active { background: var(--hst-primary); box-shadow: none; }

html.hst-ui body .alert { border-radius: var(--hst-radius); border: 1px solid transparent; }
html.hst-ui body .alert-primary { background: var(--hst-primary-soft) !important; color: var(--hst-primary-text) !important; border-color: var(--hst-primary-soft-2); }
html.hst-ui body .alert-primary .alert-body { color: inherit; }

/* --------------------------------------------------------------- footer */
html.hst-ui body .footer { color: var(--hst-muted); background: transparent; }
html.hst-ui body .scroll-top { border-radius: 10px; }

/* scrollbars */
html.hst-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
html.hst-ui ::-webkit-scrollbar-thumb { background: var(--hst-border-strong); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html.hst-ui ::-webkit-scrollbar-track { background: transparent; }

/* =================================================================
 * Instances list
 * ================================================================= */
html.hst-ui body #instances-list { overflow: hidden; }
html.hst-ui body #instances-list .table-left-header .h2 {
  font-family: var(--hst-font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--hst-heading) !important;
  margin: .5rem 0 !important;
}
html.hst-ui body #instances-table td.nameColumn a {
  font-weight: 600;
  color: var(--hst-heading);
}
html.hst-ui body #instances-table td.nameColumn a:hover { color: var(--hst-primary-text); }
html.hst-ui body #instances-table td.nameColumn .badge { margin-left: .25rem; }
html.hst-ui body #instances-table .js-move-to-project { opacity: .45; margin-left: .2rem; }
html.hst-ui body #instances-table tr:hover .js-move-to-project { opacity: 1; }
html.hst-ui body #instances-table [data-ip-id] { font-family: var(--hst-font-mono); font-size: 13px; }
html.hst-ui body #instances-table [data-ip-id] svg path { stroke: var(--hst-muted); }
html.hst-ui body #instances-table [data-ip-id] svg:hover path { stroke: var(--hst-primary); }
html.hst-ui body #instances-table .os__td { color: var(--hst-text); }

/* status cell → pill */
html.hst-ui body #instances-table td[data-status-id] {
  white-space: nowrap;
}
html.hst-ui body #instances-table td[data-status-id] > * { vertical-align: middle; }
html.hst-ui body #instances-table td[data-status-id] .itemStatus {
  font-weight: 600;
  font-size: 12.5px;
}

/* Name / IP / location columns used to wrap mid-word ("Interhost-\nShipyard") */
#instances-table td.nameColumn a { word-break: normal; overflow-wrap: normal; white-space: nowrap; }
#instances-table td.nameColumn { min-width: 12rem; }
#instances-table td.nameColumn .js-move-to-project { white-space: nowrap; }
#instances-table [data-ip-id] { white-space: nowrap; }
#instances-table [data-ip-id] br { display: none; }
#instances-table [data-ip-id] svg { margin-left: .35rem; vertical-align: -2px; }
#instances-table td.toggle { width: 1%; }

/* Fit, don't scroll: the Location/Status <th> carry Bootstrap .col-2 (width 16.66% each),
   which left a big gap after OS and pushed Status/Actions out of the card. */
#instances-table th.col-2 { width: auto !important; flex: none; }
#instances-table td.os__td .os__icon { display: inline-block; vertical-align: middle; }
#instances-table td[data-status-id] { white-space: nowrap; }
#instances-table td.toggle .dropdown-toggle { padding-right: 0 !important; }

/* OS: logo + name always; on narrower screens the name wraps instead of hiding */
#instances-table td.os__td { min-width: 9rem; }
#instances-table td.os__td .os__title { white-space: nowrap; }
@media (max-width: 1399.98px) {
  #instances-table td.os__td { white-space: normal; }
  #instances-table td.os__td .os__icon { float: left; margin: .15rem .5rem 0 0; }
  #instances-table td.os__td .os__title { white-space: normal; display: block; overflow: hidden; line-height: 1.3; }
  #instances-table td.nameColumn { min-width: 10rem; }
  /* Vuexy pads cells 2rem each side; tighten so all columns fit */
  #instances-table thead th, #instances-table tbody td { padding-left: .75rem !important; padding-right: .75rem !important; }
  #instances-table thead th:first-child, #instances-table tbody td:first-child { padding-left: 1.25rem !important; }
}
/* Small laptop / tablet landscape (and 1200-1279 where the sidebar opens): drop the ID column */
@media (min-width: 992px) and (max-width: 1279.98px) {
  #instances-table thead th.ps-5, #instances-table td.hst-col-id { display: none; }
}

/* Tablet + phone: each instance becomes a card (labels come from data-label) */
@media (max-width: 991.98px) {
  #instances-table td.os__td .os__title { display: inline; }
  #instances-list .table-header { flex-wrap: wrap; row-gap: .5rem; }
  #instances-list .table-header > div { width: 100%; justify-content: flex-start !important; flex-wrap: wrap; gap: .5rem; }
  #instances-list .dataTables_filter, #instances-list .dataTables_filter label { width: 100%; min-width: 0 !important; margin-left: 0 !important; }
  #instances-list .dataTables_filter label { display: flex; gap: .5rem; }
  #instances-list .dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0 !important; margin-left: 0 !important; }
  #instances-list .dt-action-buttons { margin-left: 0 !important; width: 100%; }
  #instances-list .dt-action-buttons .btn { width: 100%; }

  #instances-list .hst-table-scroll { overflow: visible; }
  #instances-table, #instances-table tbody, #instances-table tr, #instances-table td { display: block; width: 100% !important; }
  #instances-table thead { display: none; }
  #instances-table tbody tr {
    position: relative;
    margin: 0 .75rem .75rem;
    width: auto !important;
    padding: .9rem 1rem .6rem;
    border: 1px solid var(--hst-border, #e6e5f0);
    border-radius: 14px;
    background: var(--hst-surface, #fff);
  }
  #instances-table tbody td {
    border: 0 !important;
    padding: .2rem 0 !important;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0 !important;
    text-align: left !important;
  }
  #instances-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hst-muted, #6e6b8c);
  }
  #instances-table tbody td.nameColumn { flex-wrap: wrap; padding-right: 5rem !important; }
  #instances-table tbody td { box-sizing: border-box; width: auto !important; max-width: 100%; }
  #instances-table tbody td.nameColumn::before { display: none; }
  #instances-table tbody td.nameColumn a { font-size: 15px; white-space: normal; }
  #instances-table tbody td.hst-col-id { position: absolute; top: .95rem; right: 3rem; width: auto !important; color: var(--hst-muted, #6e6b8c); font-size: 12px; }
  #instances-table tbody td.hst-col-id::before { display: none; }
  #instances-table tbody td.toggle { position: absolute; top: .55rem; right: .25rem; width: auto !important; }
  #instances-table tbody td.toggle::before { display: none; }
  #instances-table tbody tr:hover > * { background: transparent !important; }
}

/* =================================================================
 * Create-instance wizard
 * ================================================================= */
.hst-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: .5rem auto 1.5rem;
  flex-wrap: nowrap;
}
.hst-stepper li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 600;
  font-size: 13px;
  color: var(--hst-muted, #6e6b8c);
}
.hst-stepper li .hst-step-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1.5px solid var(--hst-border-strong, #d4d2e6);
  background: var(--hst-surface, #fff);
  font-size: 12px;
}
.hst-stepper li + li::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--hst-border, #e6e5f0);
  margin-right: .5rem;
}
.hst-stepper li.is-done { color: var(--hst-text, #2b2847); }
.hst-stepper li.is-done .hst-step-num { background: var(--hst-primary-soft, rgba(115,103,240,.1)); border-color: transparent; color: var(--hst-primary-text, #5b4fe0); }
.hst-stepper li.is-done + li::before,
.hst-stepper li.is-current + li::before { background: var(--hst-primary-soft-2, rgba(115,103,240,.2)); }
.hst-stepper li.is-current { color: var(--hst-heading, #15122c); }
.hst-stepper li.is-current .hst-step-num { background: var(--hst-primary, #7367f0); border-color: var(--hst-primary, #7367f0); color: #fff; box-shadow: 0 0 0 4px var(--hst-primary-soft, rgba(115,103,240,.12)); }
@media (max-width: 575.98px) {
  .hst-stepper li .hst-step-label { display: none; }
  .hst-stepper li.is-current .hst-step-label { display: inline; }
  .hst-stepper li + li::before { width: 1.25rem; }
}

.hst-wizard-head { text-align: center; margin: 0 auto 1.5rem; }
.hst-wizard-head > p { max-width: 46rem; margin-left: auto; margin-right: auto; }
.hst-wizard-head .hst-wizard-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: .35rem; }
.hst-wizard-head .hst-wizard-sub { color: var(--hst-muted, #6e6b8c); margin: 0; }

html.hst-ui body .datacenter-item,
html.hst-ui body .os-item { margin-bottom: 1rem; }
html.hst-ui body .datacenter-item .card,
html.hst-ui body .os-item .card {
  border: 1.5px solid var(--hst-border) !important;
  border-radius: var(--hst-radius-lg);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  height: 100%;
}
html.hst-ui body .datacenter-item:hover .card,
html.hst-ui body .os-item:hover .card {
  border-color: var(--hst-border-strong) !important;
  box-shadow: var(--hst-shadow);
  transform: translateY(-1px);
}
html.hst-ui body .datacenter-item .card.active,
html.hst-ui body .datacenter-item .active,
html.hst-ui body .os-item .active {
  border-color: var(--hst-primary) !important;
  box-shadow: var(--hst-ring) !important;
}
html.hst-ui body .datacenter-item .location-flag { border-radius: 6px; box-shadow: 0 0 0 1px var(--hst-border); }
html.hst-ui body .datacenter-item .locationCity { font-weight: 700; color: var(--hst-heading); }
html.hst-ui body .instance-detail .plan-item,
html.hst-ui body .plan-section .card { border-radius: var(--hst-radius-lg); }
html.hst-ui body .instance-detail .plan-item.active,
html.hst-ui body .plan-section .card.active { border-color: var(--hst-primary) !important; box-shadow: var(--hst-ring) !important; }
html.hst-ui body .instance-password .row[style*="margin-top: 130px"] { margin-top: 1rem !important; }

/* =================================================================
 * Instance detail
 * ================================================================= */
html.hst-ui body .instanceDetailHeader .instanceName {
  font-family: var(--hst-font-display);
  font-weight: 800;
  color: var(--hst-heading) !important;
}
html.hst-ui body .instance-detail .server-control { border-radius: var(--hst-radius); }

/* =================================================================
 * MCP page
 * ================================================================= */
.hst-mcp-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(115, 103, 240, .22) 0%, transparent 55%),
    linear-gradient(135deg, #15122c 0%, #262161 100%) !important;
  border: 0 !important;
  color: #e6e4f5;
}
.hst-mcp-hero h3, .hst-mcp-hero .h3 { color: #fff !important; }
.hst-mcp-hero p { color: #c9c6e6; max-width: 46rem; }
.hst-mcp-hero .hst-endpoint {
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: .45rem .5rem .45rem .8rem;
  font-family: var(--hst-font-mono, monospace);
  font-size: 13px;
  color: #fff;
  max-width: 100%;
  word-break: break-all;
}
.hst-mcp-hero .hst-endpoint .btn { padding: .25rem .6rem; font-size: 12px; }
.hst-mcp-steps { counter-reset: hststep; list-style: none; padding: 0; margin: 0; }
.hst-mcp-steps > li { counter-increment: hststep; position: relative; padding-left: 2.6rem; margin-bottom: 1.1rem; }
.hst-mcp-steps > li::before {
  content: counter(hststep);
  position: absolute; left: 0; top: -.1rem;
  width: 1.8rem; height: 1.8rem; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  color: var(--hst-primary-text, #5b4fe0);
  background: var(--hst-primary-soft, rgba(115,103,240,.12));
}
.hst-code {
  position: relative;
  margin: .5rem 0 0;
  background: #120f28;
  color: #e6e4f5;
  border-radius: 12px;
  border: 1px solid #2a2652;
  font-family: var(--hst-font-mono, monospace);
  font-size: 12.5px;
  line-height: 1.6;
}
.hst-code pre { font-family: var(--hst-font-mono, monospace) !important; font-size: 12.5px; margin: 0; padding: 1rem 3.5rem 1rem 1rem; color: inherit; white-space: pre; overflow-x: auto; background: transparent; }
.hst-code .hst-copy {
  position: absolute; top: .5rem; right: .5rem;
  border: 1px solid #3a3569; background: #1b1838; color: #dcdaf0;
  border-radius: 8px; font-size: 11.5px; padding: .25rem .55rem; font-weight: 600;
}
.hst-code .hst-copy:hover { background: #262161; color: #fff; }
.hst-client-tabs .nav-link { padding: .55rem .9rem; }
.hst-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.hst-tool {
  border: 1px solid var(--hst-border, #e6e5f0);
  border-radius: 12px;
  padding: .75rem .9rem;
  background: var(--hst-surface-2, #f9f9fc);
}
.hst-tool code { background: transparent !important; padding: 0 !important; font-weight: 600; }
.hst-tool p { margin: .25rem 0 0; font-size: 12.5px; color: var(--hst-muted, #6e6b8c); }
.hst-tool .badge { float: right; }

/* =================================================================
 * Dark mode: re-tone Vuexy's dark-layout + overrides.css hard-codes
 * ================================================================= */
html.hst-ui.dark-layout body,
html.hst-ui.dark-layout body .app-content,
html.hst-ui.dark-layout body .content-wrapper { background-color: var(--hst-bg); }
html.hst-ui.dark-layout body .content-overlay { background: rgba(0, 0, 0, .5); }

html.hst-ui.dark-layout body .card,
html.hst-ui.dark-layout body .modal-content,
html.hst-ui.dark-layout body .dropdown-menu,
html.hst-ui.dark-layout body .main-menu,
html.hst-ui.dark-layout body .popover,
html.hst-ui.dark-layout body .toast,
html.hst-ui.dark-layout body .list-group-item,
html.hst-ui.dark-layout body .bg-white,
html.hst-ui.dark-layout body .limits_header,
html.hst-ui.dark-layout body .safe-update-preview-item-background { background-color: var(--hst-surface) !important; }

html.hst-ui.dark-layout body .card,
html.hst-ui.dark-layout body .list-group-item,
html.hst-ui.dark-layout body .border,
html.hst-ui.dark-layout body .border-bottom,
html.hst-ui.dark-layout body .border-top { border-color: var(--hst-border) !important; }

html.hst-ui.dark-layout body,
html.hst-ui.dark-layout body p,
html.hst-ui.dark-layout body span:not(.badge):not([class*="text-"]),
html.hst-ui.dark-layout body li,
html.hst-ui.dark-layout body td,
html.hst-ui.dark-layout body label,
html.hst-ui.dark-layout body .card-text,
html.hst-ui.dark-layout body .limits_list { color: var(--hst-text); }
html.hst-ui.dark-layout body .text-dark,
html.hst-ui.dark-layout body .text-black,
html.hst-ui.dark-layout body .text-body { color: var(--hst-text) !important; }

html.hst-ui.dark-layout body .table,
html.hst-ui.dark-layout body .table td,
html.hst-ui.dark-layout body .table th { border-color: var(--hst-border) !important; }
html.hst-ui.dark-layout body .table tbody tr { background-color: transparent; }
html.hst-ui.dark-layout body .table-active > * { --bs-table-accent-bg: var(--hst-surface-3); background-color: var(--hst-surface-3) !important; }

html.hst-ui.dark-layout body .form-control,
html.hst-ui.dark-layout body .form-select,
html.hst-ui.dark-layout body .input-group-text,
html.hst-ui.dark-layout body .select2-container--default .select2-selection--single,
html.hst-ui.dark-layout body .select2-container--default .select2-selection--multiple,
html.hst-ui.dark-layout body .select2-dropdown,
html.hst-ui.dark-layout body .select2-search__field {
  background-color: var(--hst-surface-2) !important;
  border-color: var(--hst-border-strong) !important;
  color: var(--hst-text) !important;
}
html.hst-ui.dark-layout body .form-control:disabled,
html.hst-ui.dark-layout body .form-control[readonly] { background-color: var(--hst-surface-3) !important; }
html.hst-ui.dark-layout body .select2-results__option { color: var(--hst-text); }
html.hst-ui.dark-layout body .select2-container--default .select2-results__option--highlighted { background: var(--hst-surface-3) !important; color: var(--hst-heading) !important; }

html.hst-ui.dark-layout body .header-navbar .navbar-container .dropdown-menu,
html.hst-ui.dark-layout body .notification-menu { background: var(--hst-surface) !important; }
html.hst-ui.dark-layout body .header-navbar.navbar-dark,
html.hst-ui.dark-layout body .header-navbar.navbar-light { background: color-mix(in srgb, var(--hst-surface) 82%, transparent) !important; }
html.hst-ui.dark-layout body .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html.hst-ui.dark-layout body hr { border-color: var(--hst-border); opacity: 1; }
html.hst-ui.dark-layout body .footer { background: transparent !important; }
html.hst-ui.dark-layout body .main-menu .navbar-header,
html.hst-ui.dark-layout body .main-menu .main-menu-content,
html.hst-ui.dark-layout body .main-menu .navigation { background: transparent !important; }

/* the Hostereo wordmark SVG is dark ink on transparent — lift it on navy */
html.hst-ui.dark-layout body .main-menu .navbar-brand img { filter: brightness(0) invert(1) opacity(.92); }
html.hst-ui.dark-layout body .main-menu .navbar-brand .brand-logo img { filter: none; }

/* No-transition flash guard while the theme class is being applied */
html.hst-theme-switching *, html.hst-theme-switching *::before, html.hst-theme-switching *::after { transition: none !important; }

/* =================================================================
 * Per-project colours: .hst-proj-c{project_id % 10}
 * Used by project badges (instances list) and dots (Projects page).
 * Unscoped so white-label brands get them too.
 * ================================================================= */
.hst-proj-c0 { --hst-proj: #7367f0; --hst-proj-ink: #5146d8; --hst-proj-ink-dark: #b3acff; }
.hst-proj-c1 { --hst-proj: #ea580c; --hst-proj-ink: #c2410c; --hst-proj-ink-dark: #fdba74; }
.hst-proj-c2 { --hst-proj: #0d9488; --hst-proj-ink: #0f766e; --hst-proj-ink-dark: #5eead4; }
.hst-proj-c3 { --hst-proj: #db2777; --hst-proj-ink: #be185d; --hst-proj-ink-dark: #f9a8d4; }
.hst-proj-c4 { --hst-proj: #2563eb; --hst-proj-ink: #1d4ed8; --hst-proj-ink-dark: #93b4ff; }
.hst-proj-c5 { --hst-proj: #ca8a04; --hst-proj-ink: #a16207; --hst-proj-ink-dark: #fde047; }
.hst-proj-c6 { --hst-proj: #16a34a; --hst-proj-ink: #15803d; --hst-proj-ink-dark: #86efac; }
.hst-proj-c7 { --hst-proj: #e11d48; --hst-proj-ink: #be123c; --hst-proj-ink-dark: #fda4af; }
.hst-proj-c8 { --hst-proj: #0891b2; --hst-proj-ink: #0e7490; --hst-proj-ink-dark: #67e8f9; }
.hst-proj-c9 { --hst-proj: #9333ea; --hst-proj-ink: #7e22ce; --hst-proj-ink-dark: #d8b4fe; }

.badge.hst-project-badge[class*="hst-proj-c"] {
  background: color-mix(in srgb, var(--hst-proj) 13%, transparent) !important;
  color: var(--hst-proj-ink) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hst-proj) 22%, transparent);
}
.badge.hst-project-badge[class*="hst-proj-c"]::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--hst-proj);
  margin-right: .35em;
  vertical-align: 1px;
}
.dark-layout .badge.hst-project-badge[class*="hst-proj-c"] {
  background: color-mix(in srgb, var(--hst-proj) 22%, transparent) !important;
  color: var(--hst-proj-ink-dark) !important;
}
.hst-project-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--hst-proj, #7367f0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hst-proj, #7367f0) 20%, transparent);
  margin-right: .6rem;
  vertical-align: 0;
}

/* wizard "Next" row: full-width .row child with ms-1 pushed the page 11px wide on phones */
.content-body .row > .dt-action-buttons.ms-1 { margin-left: 0 !important; }

/* =================================================================
 * Auth pages (login, register, password reset, verify):
 * layouts/fullLayoutMaster + .auth-wrapper.auth-basic
 * ================================================================= */
html.hst-ui body.blank-page,
html.hst-ui body.blank-page .app-content,
html.hst-ui body.blank-page .content-wrapper { background: var(--hst-bg); }

html.hst-ui body .auth-wrapper.auth-basic {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(115, 103, 240, .22), transparent 60%),
    radial-gradient(50rem 36rem at -10% 110%, rgba(38, 33, 97, .14), transparent 60%),
    var(--hst-bg);
}
/* faint grid, fades out towards the edges */
html.hst-ui body .auth-wrapper.auth-basic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--hst-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--hst-border) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  pointer-events: none;
}
html.hst-ui.dark-layout body .auth-wrapper.auth-basic {
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(124, 113, 245, .30), transparent 60%),
    radial-gradient(50rem 36rem at -10% 110%, rgba(38, 33, 97, .65), transparent 60%),
    var(--hst-bg);
}
html.hst-ui.dark-layout body .auth-wrapper.auth-basic::before { opacity: .35; }

/* drop Vuexy's decorative squares */
html.hst-ui body .auth-wrapper.auth-basic .auth-inner::before,
html.hst-ui body .auth-wrapper.auth-basic .auth-inner::after { display: none !important; }

html.hst-ui body .auth-wrapper.auth-basic .auth-inner { max-width: 440px; }
html.hst-ui body .auth-wrapper.auth-basic .auth-inner > .card {
  border-radius: 20px;
  border: 1px solid var(--hst-border);
  background: color-mix(in srgb, var(--hst-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(21, 18, 44, .04), 0 24px 60px -24px rgba(38, 33, 97, .35);
}
html.hst-ui.dark-layout body .auth-wrapper.auth-basic .auth-inner > .card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .02) inset, 0 30px 80px -30px rgba(0, 0, 0, .8);
}
html.hst-ui body .auth-wrapper.auth-basic .card .card-body { padding: 1.75rem 2rem 2rem; }
@media (max-width: 575.98px) {
  html.hst-ui body .auth-wrapper.auth-basic .card .card-body { padding: 1.25rem 1.25rem 1.5rem; }
}

html.hst-ui body .auth-wrapper .brand-logo { display: flex; justify-content: center; margin: .75rem 0 1.75rem; }
html.hst-ui body .auth-wrapper .brand-logo img { max-height: 46px; width: auto; }
html.hst-ui.dark-layout body .auth-wrapper .brand-logo img { filter: brightness(1.25) saturate(1.1); }

html.hst-ui body .auth-wrapper .card-title {
  font-family: var(--hst-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hst-heading);
  margin-bottom: .35rem !important;
}
html.hst-ui body .auth-wrapper .card-text { color: var(--hst-muted); }
html.hst-ui body .auth-wrapper .form-control { min-height: 44px; }
html.hst-ui body .auth-wrapper .input-group-merge .input-group-text { min-height: 44px; }
html.hst-ui body .auth-wrapper .btn-primary { min-height: 46px; font-size: 15px; }
html.hst-ui body .auth-wrapper p.text-center { color: var(--hst-muted); }
html.hst-ui body .auth-wrapper a { font-weight: 600; }

/* top row: theme switch + language flags */
html.hst-ui body .auth-wrapper .card-body > .text-end:first-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}
html.hst-ui body .auth-wrapper .flag-icon { border-radius: 3px; opacity: .8; transition: opacity .15s; }
html.hst-ui body .auth-wrapper a:hover .flag-icon { opacity: 1; }
.hst-auth-theme {
  display: inline-flex;
  margin-right: auto;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: var(--hst-surface-3, #f1f0f8);
  border: 1px solid var(--hst-border, #e6e5f0);
}
.hst-auth-theme button {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--hst-muted, #6e6b8c);
  cursor: pointer;
}
.hst-auth-theme button:hover { color: var(--hst-heading, #15122c); }
.hst-auth-theme button.active {
  background: var(--hst-surface, #fff);
  color: var(--hst-primary-text, #5b4fe0);
  box-shadow: 0 1px 2px rgba(21, 18, 44, .12);
}
.hst-auth-theme svg { width: 14px; height: 14px; }

/* =================================================================
 * Dark mode: hard-coded light backgrounds + dark text from overrides.css
 * and page <style> blocks (generated from a scan, 2026-10-09).
 * ================================================================= */

html.hst-ui.dark-layout body #dns-management .filter-content,
html.hst-ui.dark-layout body #selectStagingModal .modal-header,
html.hst-ui.dark-layout body #tableNameserversPreloader,
html.hst-ui.dark-layout body .billingAddress .preloader,
html.hst-ui.dark-layout body .btn_acc,
html.hst-ui.dark-layout body .file-manager .card,
html.hst-ui.dark-layout body .instance-detail .preloader,
html.hst-ui.dark-layout body .instance-detail .resizeTypeItem.active, .instance-password .authTypeItem.active,
html.hst-ui.dark-layout body .instance-detail-app-menu__wrapper .instance-detail-app-menu .block .icons > div,
html.hst-ui.dark-layout body .instance-detail-app-menu__wrapper .instance-detail-app-menu .search-block .search-block__results,
html.hst-ui.dark-layout body .limits_close,
html.hst-ui.dark-layout body .limits_header,
html.hst-ui.dark-layout body .nocard,
html.hst-ui.dark-layout body .paymentAuthorization .preloader,
html.hst-ui.dark-layout body .reserved-ips__block .item.active,
html.hst-ui.dark-layout body .safe-update-preview-item-background,
html.hst-ui.dark-layout body .table-preloader,
html.hst-ui.dark-layout body .vpc-linked-instances .select2-container--classic .select2-selection--multiple .select2-selection__choice, .vpc-linked-instances .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--hst-surface) !important;
  border-color: var(--hst-border) !important;
}

html.hst-ui.dark-layout body #dns-management .form_warning,
html.hst-ui.dark-layout body #dns-management .info,
html.hst-ui.dark-layout body #dns-management .steps,
html.hst-ui.dark-layout body .animated-background,
html.hst-ui.dark-layout body .background-scan-wp-users,
html.hst-ui.dark-layout body .datatables-reserved-ips tbody td:first-child:before,
html.hst-ui.dark-layout body .datatables-reserved-ips tbody td:last-child:after,
html.hst-ui.dark-layout body .datatables-reserved-ips thead:after,
html.hst-ui.dark-layout body .datatables-reserved-ips thead:before,
html.hst-ui.dark-layout body .instance-detail .resizeTypeItem, .instance-password .authTypeItem,
html.hst-ui.dark-layout body .instance-detail-app-content .note,
html.hst-ui.dark-layout body .instance-detail-app-menu__wrapper .instance-detail-app-menu,
html.hst-ui.dark-layout body .instance-self-update-tabs,
html.hst-ui.dark-layout body .linkCreditCard .amountRectangle:hover,
html.hst-ui.dark-layout body .reserved-ips__block .item,
html.hst-ui.dark-layout body .self-update-table tr {
  background-color: var(--hst-surface-3) !important;
  border-color: var(--hst-border) !important;
}

html.hst-ui.dark-layout body #dynamic-selection-area .selected-block,
html.hst-ui.dark-layout body .attachment-control,
html.hst-ui.dark-layout body .marketplace .comingSoon p,
html.hst-ui.dark-layout body .my-dropzone,
html.hst-ui.dark-layout body .my-dropzone .attachment-control {
  background-color: var(--hst-primary-soft) !important;
  border-color: var(--hst-primary-soft-2) !important;
}

 {
  background-color: var(--hst-warning-soft) !important;
  color: var(--hst-text) !important;
}

html.hst-ui.dark-layout body #attachments-dropzone::-moz-placeholder,
html.hst-ui.dark-layout body #attachments-dropzone::placeholder,
html.hst-ui.dark-layout body #file-editor .numbers span::before,
html.hst-ui.dark-layout body .attachment-control-icon,
html.hst-ui.dark-layout body .btn-account-tab,
html.hst-ui.dark-layout body .btn-account-tab:hover,
html.hst-ui.dark-layout body .datatables-reserved-ips .delete-icon,
html.hst-ui.dark-layout body .datatables-reserved-ips tbody td:first-child,
html.hst-ui.dark-layout body .datatables-reserved-ips thead tr,
html.hst-ui.dark-layout body .empty-ips-block h1,
html.hst-ui.dark-layout body .git-deployment-color-grey,
html.hst-ui.dark-layout body .instance-detail-app-content .h4,
html.hst-ui.dark-layout body .instance-detail-app-content .note,
html.hst-ui.dark-layout body body {
  color: var(--hst-muted) !important;
}

html.hst-ui.dark-layout body .btn-primary,
html.hst-ui.dark-layout body .color-black,
html.hst-ui.dark-layout body .custom-pricing-plan .selected-block-description,
html.hst-ui.dark-layout body .dropdown-item,
html.hst-ui.dark-layout body .limits_list,
html.hst-ui.dark-layout body .reserved-ips-dl dl dd,
html.hst-ui.dark-layout body .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--hst-text) !important;
}

/* text inside the tinted tiles (pricing "Selected configuration", etc.) */
html.hst-ui.dark-layout body #dynamic-selection-area .selected-block,
html.hst-ui.dark-layout body #dynamic-selection-area .selected-block * { color: var(--hst-text) !important; }
html.hst-ui.dark-layout body .nocard,
html.hst-ui.dark-layout body .nocard label,
html.hst-ui.dark-layout body .nocard p { color: var(--hst-text); }
html.hst-ui.dark-layout body .nocard .text-muted { color: var(--hst-muted) !important; }
html.hst-ui.dark-layout body .nocard { border-radius: var(--hst-radius-lg); border: 1px solid var(--hst-border); }

/* inline success/danger pills on the 2FA pages */
html.hst-ui.dark-layout body [style*="#bcffaa"], html.hst-ui.dark-layout body [style*="#BCFFAA"] { background: var(--hst-success-soft) !important; color: var(--hst-success) !important; }
html.hst-ui.dark-layout body [style*="#ffd9c2"], html.hst-ui.dark-layout body [style*="#FFD9C2"] { background: var(--hst-danger-soft) !important; color: var(--hst-danger) !important; }

/* generic Bootstrap light utilities + inline white backgrounds */
html.hst-ui.dark-layout body .content-body .bg-light,
html.hst-ui.dark-layout body .content-body .bg-white,
html.hst-ui.dark-layout body .content-body [style*="background-color: white"],
html.hst-ui.dark-layout body .content-body [style*="background-color: #fff"],
html.hst-ui.dark-layout body .content-body [style*="background: #fff"],
html.hst-ui.dark-layout body .content-body [style*="background:#fff"],
html.hst-ui.dark-layout body .content-body [style*="background-color:#fff"] { background-color: var(--hst-surface) !important; }
html.hst-ui.dark-layout body .content-body .text-white:not(.btn):not(.badge):not([class*="bg-"]) { color: var(--hst-text) !important; }

/* Dark mode, pass 2: tickets (chat window), notifications list, chat page CSS (scan 2026-10-09) */
html.hst-ui.dark-layout body .chat-app-window .active-chat .chat-header,
html.hst-ui.dark-layout body .chat-app-window .chat-app-form,
html.hst-ui.dark-layout body .chat-app-window .chats .chat-left .chat-body .chat-content,
html.hst-ui.dark-layout body .chat-app-window .user-chats,
html.hst-ui.dark-layout body .chat-application .chat-app-window .start-chat-area .start-chat-icon,
html.hst-ui.dark-layout body .chat-application .chat-app-window .start-chat-area .start-chat-text,
html.hst-ui.dark-layout body .chat-application .chat-app-window .start-chat-area,
html.hst-ui.dark-layout body .chat-application .chat-app-window .user-chats,
html.hst-ui.dark-layout body .chat-application .chat-profile-sidebar,
html.hst-ui.dark-layout body .chat-application .sidebar-content,
html.hst-ui.dark-layout body .chat-application .sidebar-content .chat-user-list-wrapper li:hover,
html.hst-ui.dark-layout body .chat-application .user-profile-sidebar,
html.hst-ui.dark-layout body .chat-widget .chat-app-window .user-chats,
html.hst-ui.dark-layout body .index_notification-item {
  background-color: var(--hst-surface) !important;
  border-color: var(--hst-border) !important;
}
html.hst-ui.dark-layout body .index_notification-read,
html.hst-ui.dark-layout body .subtitle { color: var(--hst-text) !important; }
html.hst-ui.dark-layout body .chat-app-window .chats .chat-left .chat-body .chat-content,
html.hst-ui.dark-layout body .chat-application .chat-app-window .start-chat-area .start-chat-icon,
html.hst-ui.dark-layout body .chat-application .chat-app-window .start-chat-area .start-chat-text,
html.hst-ui.dark-layout body .docs-bar a,
html.hst-ui.dark-layout body .index_notification-unread,
html.hst-ui.dark-layout body .notification-unread a,
html.hst-ui.dark-layout body .page,
html.hst-ui.dark-layout body table { color: var(--hst-muted) !important; }
/* ticket conversation: inline #f5f5f5 pane + #E0F9FC own-message bubble with .text-black */
html.hst-ui.dark-layout body .user-chats[style*="#f5f5f5"] { background: var(--hst-surface-2) !important; }
html.hst-ui.dark-layout body .chat-app-window .chat-header,
html.hst-ui.dark-layout body .chat-app-window .chat-app-form { background: var(--hst-surface) !important; border-color: var(--hst-border) !important; }
html.hst-ui.dark-layout body .chat-app-window .chats .chat-content {
  background: var(--hst-surface-3) !important;
  color: var(--hst-text) !important;
  box-shadow: none !important;
  border: 1px solid var(--hst-border);
}
html.hst-ui.dark-layout body .chat-app-window .chats .chat-content[style*="E0F9FC"],
html.hst-ui.dark-layout body .chat-app-window .chats .chat-content[style*="e0f9fc"] {
  background: var(--hst-primary-soft-2) !important;
  border-color: transparent;
}
html.hst-ui.dark-layout body .chat-app-window .chats .chat-content * { color: inherit; }
html.hst-ui.dark-layout body .chat-app-window .chats .chat-content .text-muted,
html.hst-ui.dark-layout body .chat-app-window .chats .chat-content small { color: var(--hst-muted) !important; }
/* light mode: keep the readable cyan/grey, just round them like the rest */
html.hst-ui body .chat-app-window .chats .chat-content { border-radius: 14px; }
html.hst-ui body .user-chats[style*="#f5f5f5"] { border: 1px solid var(--hst-border); }


/* =================================================================
 * Live console preview (instance overview) — public/js/hostereo-console-preview.js
 * ================================================================= */
.hst-console-preview { width: 100%; }
.hst-cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.hst-cp-title { font-weight: 600; font-size: 13px; color: var(--hst-text, #2b2847); display: inline-flex; align-items: center; gap: .4rem; }
.hst-cp-title svg { width: 15px; height: 15px; color: var(--hst-muted, #6e6b8c); }
.hst-cp-badge { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .15rem .55rem; }
.hst-cp-badge:empty { display: none; }
.hst-cp-badge[data-state="live"] { color: #16a34a; background: rgba(22, 163, 74, .12); }
.hst-cp-badge[data-state="live"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: currentColor; margin-right: .35rem; vertical-align: 1px; animation: hst-pulse 1.6s ease-in-out infinite; }
.hst-cp-badge[data-state="connecting"], .hst-cp-badge[data-state="paused"] { color: var(--hst-muted, #6e6b8c); background: var(--hst-surface-3, #f1f0f8); }
@keyframes hst-pulse { 50% { opacity: .35; } }

.hst-cp-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0a18;
  border: 1px solid var(--hst-border, #e6e5f0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
  cursor: pointer;
}
.hst-cp-screen:focus-visible { outline: none; box-shadow: var(--hst-ring, 0 0 0 3px rgba(115,103,240,.25)); }
.hst-cp-frame { position: absolute; inset: 0; }
.hst-cp-frame iframe { border: 0; transform-origin: 0 0; pointer-events: none; background: #000; }
.hst-cp-msg {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem;
  text-align: center; color: #b9b6d6; font-size: 13px; pointer-events: none;
}
.hst-console-preview[data-state="live"] .hst-cp-msg { display: none; }
/* the shield blocks every keystroke/click from reaching the VM; it only opens the full console */
.hst-cp-shield { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-end; padding: .6rem; background: transparent; transition: background-color .15s ease; }
.hst-cp-open {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: 12px; font-weight: 600; color: #fff;
  background: rgba(21, 18, 44, .72); border: 1px solid rgba(255, 255, 255, .14);
  padding: .3rem .6rem; border-radius: 8px;
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.hst-cp-open svg { width: 13px; height: 13px; }
.hst-cp-screen:hover .hst-cp-shield, .hst-cp-screen:focus-visible .hst-cp-shield { background: rgba(115, 103, 240, .08); }
.hst-cp-screen:hover .hst-cp-open, .hst-cp-screen:focus-visible .hst-cp-open { opacity: 1; transform: none; }
@media (hover: none) { .hst-cp-open { opacity: 1; transform: none; } }
.hst-console-preview[data-state="off"] .hst-cp-screen { cursor: default; }
.hst-console-preview[data-state="off"] .hst-cp-open { display: none; }

/* =================================================================
 * List pages (firewalls, …): header + rows
 * ================================================================= */
.hst-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem 1rem;
}
.hst-list-head__text { flex: 1 1 22rem; min-width: 0; }
.hst-list-head__text h3 { margin-bottom: .35rem; }
.hst-list-head__text p { color: var(--hst-muted, #6e6b8c); max-width: 52rem; }
.hst-list-head .btn svg { width: 15px; height: 15px; vertical-align: -2px; }
@media (max-width: 575.98px) { .hst-list-head .btn { width: 100%; } }

/* .nocard used as a page card (firewalls etc.): give it the card look */
html.hst-ui body .content-body .nocard {
  background: var(--hst-surface);
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-radius-lg);
  box-shadow: var(--hst-shadow);
  overflow: hidden;
}
html.hst-ui body .content-body .nocard .dataTables_wrapper > .row:last-child { padding: .75rem 1.5rem 1rem; }

/* firewalls list: overrides.css forced white cells (unreadable in dark); one row colour, no stripe text flip */
html.hst-ui body #user-firewalls-datatable > tbody > tr > td {
  --bs-table-accent-bg: transparent !important;
  background: transparent !important;
  color: var(--hst-text) !important;
  box-shadow: none !important;
}
html.hst-ui body #user-firewalls-datatable > tbody > tr:hover > td { background: var(--hst-surface-2) !important; }
html.hst-ui body #user-firewalls-datatable td a { font-weight: 600; color: var(--hst-heading); }
html.hst-ui body #user-firewalls-datatable td a:hover { color: var(--hst-primary-text); }
html.hst-ui body #user-firewalls-datatable td .text-secondary svg { color: var(--hst-muted); }
html.hst-ui body #user-firewalls-datatable td .text-secondary:hover svg { color: var(--hst-primary-text); }
html.hst-ui body #user-firewalls-datatable td .delete-item:hover svg { color: var(--hst-danger); }
html.hst-ui body #user-firewalls-datatable .row-control { white-space: nowrap; }

/* Generic: .hst-stack-mobile tables become one card per row on phones (labels from data-label) */
@media (max-width: 767.98px) {
  .hst-table-scroll:has(> table.hst-stack-mobile) { overflow: visible; }
  table.hst-stack-mobile, table.hst-stack-mobile tbody, table.hst-stack-mobile tr, table.hst-stack-mobile td { display: block; }
  table.hst-stack-mobile { width: 100% !important; }
  table.hst-stack-mobile thead { display: none; }
  table.hst-stack-mobile tbody tr {
    margin: 0 .75rem .75rem;
    padding: .7rem .9rem;
    border: 1px solid var(--hst-border, #e6e5f0);
    border-radius: 14px;
    background: var(--hst-surface, #fff);
  }
  table.hst-stack-mobile tbody td {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem 0 !important;
    border: 0 !important;
    width: auto !important;
    text-align: left !important;
    min-width: 0;
    box-sizing: border-box;
  }
  table.hst-stack-mobile tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 7.5rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--hst-muted, #6e6b8c);
  }
  table.hst-stack-mobile tbody td.dataTables_empty::before { display: none; }
}

/* =================================================================
 * Native usage graphs — public/js/hostereo-usage-graphs.js
 * ================================================================= */
.hst-metrics { padding: 1rem 1.25rem 1.5rem; }
.hst-metrics__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.hst-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--hst-surface-3, #f1f0f8); border: 1px solid var(--hst-border, #e6e5f0); }
.hst-seg button {
  border: 0; background: transparent; color: var(--hst-muted, #6e6b8c);
  font-weight: 600; font-size: 13px; padding: .4rem .85rem; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.hst-seg button:hover { color: var(--hst-heading, #15122c); }
.hst-seg button.active { background: var(--hst-surface, #fff); color: var(--hst-primary-text, #5b4fe0); box-shadow: 0 1px 2px rgba(21, 18, 44, .12); }
.hst-live-dot { width: 7px; height: 7px; border-radius: 99px; background: #16a34a; }
.hst-metrics[data-range="live"] .hst-live-dot { animation: hst-pulse 1.6s ease-in-out infinite; }

.hst-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 991.98px) { .hst-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hst-kpi {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  padding: .8rem 1rem; border-radius: 12px;
  background: var(--hst-surface-2, #f9f9fc); border: 1px solid var(--hst-border, #e6e5f0);
}
.hst-kpi__label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hst-muted, #6e6b8c); }
.hst-kpi__value { font-family: var(--hst-font-display, inherit); font-size: 1.35rem; font-weight: 800; color: var(--hst-heading, #15122c); line-height: 1.2; }
.hst-kpi__sub { font-size: 12px; color: var(--hst-muted, #6e6b8c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hst-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1199.98px) { .hst-charts { grid-template-columns: minmax(0, 1fr); } }
.hst-chart { border: 1px solid var(--hst-border, #e6e5f0); border-radius: 14px; padding: .75rem .75rem .25rem; background: var(--hst-surface, #fff); min-width: 0; }
.hst-chart__title { font-weight: 700; font-size: 13px; color: var(--hst-heading, #15122c); padding: 0 .35rem; }
.hst-chart__title small { color: var(--hst-muted, #6e6b8c); font-weight: 600; }
.hst-metrics.is-loading .hst-chart { opacity: .6; transition: opacity .15s; }
.hst-metrics.is-error .hst-metrics__status { color: var(--hst-danger, #dc2626) !important; }
.hst-chart .apexcharts-tooltip { border-radius: 10px !important; box-shadow: var(--hst-shadow-lg) !important; }

/* Static console card (replaces the live preview, 2026-10-09) */
.hst-cp-static { display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, #1b1838 0%, #0b0a18 70%); }
.hst-cp-static__inner { display: flex; flex-direction: column; align-items: center; gap: .6rem; color: #c9c6e6; }
.hst-cp-static__inner svg { width: 34px; height: 34px; stroke-width: 1.5; color: #8f86ff; }
.hst-cp-static__label { font-weight: 600; font-size: 14px; }
.hst-cp-static:hover .hst-cp-static__inner svg { color: #fff; }
.hst-console-preview[data-state="off"] .hst-cp-static { cursor: default; }
.hst-console-preview[data-state="off"] .hst-cp-static__inner svg { color: #6e6b8c; }

/* Instance overview details: labels broke mid-word ("Locatio / n:") because the label
   column is a fixed col-md-4 inside a narrow column. Size labels to content, never wrap. */
.machineOptions .row > .col-6.col-md-4 { flex: 0 0 9rem; width: 9rem; max-width: 45%; padding-right: .75rem; }
.machineOptions .row > .col-6.col-md-8 { flex: 1 1 0; width: auto; min-width: 0; overflow-wrap: anywhere; }
.machineOptions .option-title, .machineOptions .option-title span { white-space: nowrap; }
@media (max-width: 575.98px) { .machineOptions .row > .col-6.col-md-4 { flex-basis: 8rem; width: 8rem; } }

/* API delete protection switch (instance Overview, under the console card) */
.hst-delprot { margin-top: .9rem; padding: .75rem .9rem; border: 1px solid var(--hst-border, #e6e5f0); border-radius: 12px; background: var(--hst-surface-2, #f9f9fc); }
.hst-delprot .form-check-label { font-weight: 600; color: var(--hst-heading, #15122c); }
.hst-delprot__hint { margin: .35rem 0 0; font-size: 12.5px; color: var(--hst-muted, #6e6b8c); }
/* Overview console card: one fresh still frame (instance-detail-screen), never live */
.hst-cp-screen { position: relative; }
.hst-cp-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; border-radius: inherit; opacity: 0; transition: opacity .2s ease; }
.hst-cp-screen.has-shot .hst-cp-shot { opacity: 1; }
.hst-cp-screen.has-shot .hst-cp-static__inner { display: none; }
.hst-cp-screen.is-loading .hst-cp-static__inner svg { animation: hst-pulse 1.4s ease-in-out infinite; }
.hst-cp-screen .hst-cp-open { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; }
.hst-cp-screen:not(.has-shot) .hst-cp-open { display: none; }
.hst-cp-frame-badge { color: var(--hst-muted, #6e6b8c) !important; background: var(--hst-surface-3, #f1f0f8) !important; }

/* =================================================================
 * Right-to-left (Hebrew): the facelift rules above are written for LTR;
 * mirror the ones that use physical left/right. html[data-textdirection]
 * is set by the layouts from the session locale.
 * ================================================================= */
html[data-textdirection="rtl"].hst-ui body .main-menu { border-right: 0; border-left: 1px solid var(--hst-border); }
html[data-textdirection="rtl"].hst-ui body .main-menu .navigation li a svg,
html[data-textdirection="rtl"].hst-ui body .main-menu .navigation li a i { margin-right: 0; margin-left: .85rem; }
html[data-textdirection="rtl"].hst-ui body .main-menu .navigation li:not(.open):not(.has-sub) > a:hover { padding-left: .8rem; padding-right: .8rem; }
html[data-textdirection="rtl"].hst-ui body .main-menu .navigation li ul li a { padding-left: .8rem; padding-right: 1.2rem; }
html[data-textdirection="rtl"].hst-ui body .main-menu .navigation .navigation-header { margin: 1.25rem .8rem .35rem 0; }
/* submenu chevron sat on top of the icon: move it to the far (left) side and point it inward */
html[data-textdirection="rtl"] .main-menu .navigation li.has-sub > a::after { right: auto !important; left: 18px !important; }
html[data-textdirection="rtl"] .main-menu .hst-new-chip,
html[data-textdirection="rtl"] .hst-new-chip { margin-left: 0; margin-right: auto; }
html[data-textdirection="rtl"].hst-ui body .content-header .content-header-title { border-right: 0; padding-right: 0; border-left: 1px solid var(--hst-border); padding-left: 1rem; }
html[data-textdirection="rtl"] .hst-list-head__text, html[data-textdirection="rtl"] .hst-wizard-head { text-align: right; }
html[data-textdirection="rtl"] .hst-wizard-head { text-align: center; }
html[data-textdirection="rtl"] .badge.hst-project-badge[class*="hst-proj-c"]::before { margin-right: 0; margin-left: .35em; }
html[data-textdirection="rtl"] .hst-project-dot { margin-right: 0; margin-left: .6rem; }
html[data-textdirection="rtl"] .machineOptions .row > .col-6.col-md-4 { padding-right: 0; padding-left: .75rem; }
@media (max-width: 767.98px) {
  html[data-textdirection="rtl"] #instances-table tbody td { text-align: right !important; }
  html[data-textdirection="rtl"] #instances-table tbody td.hst-col-id { right: auto; left: 3rem; }
  html[data-textdirection="rtl"] #instances-table tbody td.toggle { right: auto; left: .25rem; }
  html[data-textdirection="rtl"] #instances-table tbody td.nameColumn { padding-right: 0 !important; padding-left: 5rem !important; }
  html[data-textdirection="rtl"] table.hst-stack-mobile tbody td { text-align: right !important; }
}

/* =================================================================
 * SweetAlert2 pop-ups (create API key, confirmations…): they stayed white in
 * dark mode while their text turned light → unreadable. Theme them.
 * ================================================================= */
html.hst-ui body .swal2-popup {
  background: var(--hst-surface) !important;
  color: var(--hst-text) !important;
  border: 1px solid var(--hst-border);
  border-radius: var(--hst-radius-lg);
  box-shadow: var(--hst-shadow-lg);
  font-family: var(--hst-font);
}
html.hst-ui body .swal2-title { color: var(--hst-heading) !important; font-family: var(--hst-font-display); }
html.hst-ui body .swal2-html-container,
html.hst-ui body .swal2-html-container *:not(input):not(.btn):not(a),
html.hst-ui body .swal2-content { color: var(--hst-text) !important; }
html.hst-ui body .swal2-html-container input,
html.hst-ui body .swal2-input { background: var(--hst-surface-2) !important; color: var(--hst-text) !important; border: 1px solid var(--hst-border-strong) !important; border-radius: 10px; font-family: var(--hst-font-mono); }
html.hst-ui body .swal2-close { color: var(--hst-muted) !important; }
html.hst-ui.dark-layout body .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
html.hst-ui.dark-layout body .swal2-icon.swal2-success .swal2-success-fix { background: transparent !important; }
html.hst-ui body .swal2-backdrop-show { background: rgba(10, 8, 24, .55) !important; }