/* Theme toggle control (was dist/css/theme-toggle.css, loaded only by the
   Togglebox header just before theme-variables.css). Module headers load this
   file under other host themes too, whose own .theme-toggle-btn is a styled
   pill switch, so every rule is scoped to Togglebox pages. :where() keeps
   the original (0,1,0) specificity. */
:where(.template_togglebox) .theme-toggle-btn {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
}

:where(.template_togglebox) .theme-toggle-btn:focus {
    outline: none;
}

:where(.template_togglebox) .theme-toggle-btn:focus-visible {
    outline: 2px solid var(--focus-outline, currentColor);
    outline-offset: 2px;
}

:where(.template_togglebox) .theme-toggle-btn .theme-toggle-icon {
    font-size: 22px;
}

:where(.template_togglebox) .nav-link.theme-toggle-btn {
    width: 44px;
    height: 100%;
}

/**
 * SLICK COMPONENTS - Portable Design System
 * ==========================================
 *
 * SCOPE: Standalone components reusable across modules
 * REQUIRES: theme-variables.css (tokens), slick-animations.css (motion)
 * CONTEXT: Scoped to #content-cloud when specificity needed
 *
 * INCLUDES:
 * - Cards (.slick-card)
 * - Forms (.slick-form-*)
 * - Tables (.slick-table)
 * - Buttons (.slick-btn-*)
 * - Labels (.slick-label-*) - Status badges with semantic colors
 * - Help tips (.slick-help + .slick-tip) - keyboard, touch and Escape aware
 * - Dropdowns (.slick-dropdown-*) - Action menus with z-index layering
 * - Typography utilities (.slick-text-*, .slick-fw-*, .slick-mono)
 * - Icon size utilities (.slick-icon-*)
 *
 * EXCLUDES (module-specific, defined elsewhere):
 * - VM status slider (critical.css)
 * - Navigation (two-tier-navigation.css)
 * - Operation log (oplog-macterm.css)
 *
 * Z-INDEX LAYERING (uses tokens from theme-variables.css):
 * - --z-dropdown: 1000 (standard dropdowns)
 * - --z-tooltip: 1070 (tooltips)
 * - --z-nav-dropdown: 1080 (navigation menus)
 */


/* Dark generic link hover: compiled custom_darkmode `a:hover` and
   `.btn-link:hover` use #186F9A, 1.8-3.2:1 on dark surfaces; the light brand
   tint reads as a hover over the #38A9E0 rest colour at AA. :where() keeps
   the compiled rules' own specificity, (0,1,1) and (0,2,0), and this file is
   the first theme stylesheet after the compiled CSS, so the rule replaces the
   compiled colour while every later theme or module link rule still wins. */
/* Kept: removing it changes a.tb-skip-link color #6bc8ef -> #186f9a on OpenNebula createvm (hover). */
:where(html[data-theme="dark"] body) a:hover,
:where(html[data-theme="dark"] body) .btn-link:hover {
  color: var(--brand-primary-light);
}

/* Focus baseline for every other interactive element on portal and module
   pages: the shared --focus-outline recipe. :where() keeps it at (0,1,0),
   the weight of :focus-visible alone, so any component's own focus rule
   (module rings, inset rails, the dark sidebar) still wins; it only fills
   in where nothing else draws a ring. Modules drop their own copies of this
   baseline (rgw-primitives.css). This lives here, not in slick-defaults.css,
   because rgw, cloudflare and userapi headers on non-Togglebox themes load
   only theme-variables, compat, slick-components, -responsive and
   -animations. */
:where(#content-cloud, .template_togglebox) :where(a[href], button, summary, [role="button"], [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

/* Shared visually-hidden text and hidden-state utilities (modules alias or
   delete .rgw-sr-only, .checkmk-sr-only, .cf-sr-only, .u-sr-only and
   .rgw-hidden). .slick-sr-only-focusable shows a skip-style link on focus. */
:where(#content-cloud, .template_togglebox) .slick-sr-only,
:where(#content-cloud, .template_togglebox) .slick-sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
:where(#content-cloud, .template_togglebox) .is-hidden { display: none !important; }

/* Scoped components for OpenNebula under #content-cloud */
#content-cloud .slick-card, .template_togglebox .slick-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#content-cloud .slick-card:hover, .template_togglebox .slick-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* Card header/title/body - shared structure across modules */
#content-cloud .slick-card-header, .template_togglebox .slick-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, var(--color-bg-elevated, #fff) 0%, var(--color-surface, #f8f9fa) 100%);
  margin: -20px -20px 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#content-cloud .slick-card-title, .template_togglebox .slick-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-fg);
}

#content-cloud .slick-card-title i, .template_togglebox .slick-card-title i {
  color: var(--brand-info);
}

#content-cloud .slick-card-body, .template_togglebox .slick-card-body {
  padding: 20px;
}

#content-cloud .slick-card-header + .slick-card-body, .template_togglebox .slick-card-header + .slick-card-body {
  margin-top: 0;
}

#content-cloud .slick-card-body--flush, .template_togglebox .slick-card-body--flush {
  padding: 0;
}

#content-cloud .content-bar .slick-form-container {
  background: var(--surface-gradient, linear-gradient(145deg, #FFF 0%, #FAFBFC 100%));
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  /* balanced interior spacing; pages tune it through the property, not !important */
  padding: var(--slick-form-container-padding, 20px 20px 16px 20px) !important;
  margin: 16px 0 24px 0;
  box-shadow: var(--shadow-sm);
}
#content-cloud .content-bar .slick-form-container--sm { max-width: 520px; }
#content-cloud .content-bar .slick-form-container--md { max-width: 620px; }
#content-cloud .content-bar .slick-form-container--lg { max-width: 720px; }
#content-cloud .content-bar .slick-form-container--xl { max-width: 800px; }
#content-cloud .content-bar .slick-form-container .slick-form-group { margin-bottom: 16px; }
#content-cloud .content-bar .slick-form-container .slick-form-group:last-child { margin-bottom: 0; }
#content-cloud .content-bar .slick-form-container .slick-form-group:first-child { margin-top: 2px; }
#content-cloud .content-bar .slick-form-container .slick-form-label { padding-left: 2px; margin-bottom: 6px; }
#content-cloud .content-bar .slick-form-container .slick-form-input { margin-top: 2px; }
#content-cloud .slick-form-label, .template_togglebox .slick-form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: var(--font-weight-500, 500);
  font-size: .75rem;
  color: var(--color-fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-030, 0.03em);
}
#content-cloud .slick-form-input, .template_togglebox .slick-form-input {
  width: 100%;
  height: 42px;
  padding: 0 16px;
  background: var(--color-bg, #fff);
  color: var(--color-fg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 1rem;
  box-shadow: var(--shadow-control-inset);
}
#content-cloud .slick-form-input:focus, .template_togglebox .slick-form-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-bg), inset 0 1px 2px rgba(0,0,0,0.03);
}

/* Type-to-confirm dialog (module components/type_confirm_dialog.tpl, on
   modal_shell). Dialogs render outside #content-cloud, so the field is styled
   here rather than through .slick-form-input. Every colour is a theme token
   with its own dark value. */
.slick-type-confirm__summary {
  margin: 0 0 var(--space-3, 12px);
  color: var(--color-fg-strong, #111827);
  font-weight: var(--font-weight-600, 600);
}
.slick-type-confirm__summary:empty {
  display: none;
}
.slick-type-confirm__warning,
.slick-type-confirm__tip {
  margin: 0 0 var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid;
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.slick-type-confirm__warning {
  background: var(--color-danger-bg, rgba(217, 37, 46, 0.08));
  border-color: var(--color-danger-border, #D9252E);
  color: var(--color-danger-strong, #b91c1c);
}
.slick-type-confirm__tip {
  background: var(--color-success-bg, rgba(45, 199, 107, 0.08));
  border-color: color-mix(in srgb, var(--color-success-strong, #166534) 35%, transparent);
  color: var(--color-success-strong, #166534);
}
.slick-type-confirm__content {
  margin: 0 0 var(--space-3, 12px);
}
.slick-type-confirm__content:empty {
  display: none;
}
.slick-type-confirm__field {
  margin: var(--space-4, 16px) 0 0;
  /* Room for the input's focus ring (2px outline + 2px offset): the field is
     the last child of a .modal-body that clips with overflow:auto and has no
     bottom padding, so without this the bottom of the ring is cut off. */
  padding-bottom: var(--space-1, 4px);
}
.slick-type-confirm__label {
  display: block;
  margin: 0 0 var(--space-2, 8px);
  color: var(--color-fg, #212529);
  font-weight: var(--font-weight-400, 400);
}
.slick-type-confirm__word {
  color: var(--color-danger-strong, #b91c1c);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: var(--font-weight-700, 700);
}
.modal .slick-type-confirm__input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 var(--space-3, 12px);
  background: var(--color-bg, #fff);
  color: var(--color-fg, #212529);
  caret-color: var(--color-fg, #212529);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg, 16px);
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
}
.modal .slick-type-confirm__input::placeholder {
  color: var(--color-fg-muted, #5f676e);
  opacity: 1;
}
.modal .slick-type-confirm__input:focus,
.modal .slick-type-confirm__input:focus-visible {
  border-color: var(--color-danger-border, #D9252E);
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
  box-shadow: none;
}

/* Add breathing room around header/content to avoid tight stacking */
#content-cloud .header-bar { margin-bottom: 12px; }
#content-cloud .content-bar { padding-top: 6px; }

/* Page header card - reusable across cloud pages */
#content-cloud .page-header-card {
  background: var(--surface-gradient, linear-gradient(135deg, #fff 0%, var(--color-surface-subtle) 100%));
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.05));
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#content-cloud .page-header-left { display: flex; align-items: center; gap: 16px; }

#content-cloud .page-header-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary-gradient);
  border-radius: var(--radius-xl);
  color: var(--color-fg-inverse, #fff);
  font-size: 24px;
}

#content-cloud .page-header-title :where(h1, h2, h3) {
  margin: 0 0 8px;
  font-size: var(--text-headline-size);
  font-weight: var(--text-headline-weight);
  line-height: var(--text-headline-line-height);
  color: var(--color-fg);
}
/* One-sentence lede under the title (components/page_header.tpl). No
   eyebrow above the title: the heading carries the page. */
#content-cloud .page-header-lede {
  margin: 0;
  max-width: var(--measure-prose);
  color: var(--color-fg-muted);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}
#content-cloud .page-header-title :where(h1, h2, h3):has(+ .page-header-lede) { margin-bottom: var(--space-1); }

#content-cloud .page-stats { display: flex; gap: 12px; flex-wrap: wrap; }

#content-cloud .stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: var(--font-weight-500, 500);
  background: var(--color-surface-3);
  color: var(--color-fg-muted);
}

#content-cloud .stat-badge .count { font-weight: var(--font-weight-600, 600); color: var(--color-fg); }

#content-cloud .stat-badge.total { background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08)); color: var(--color-primary-strong); }
#content-cloud .stat-badge.active { background: var(--brand-success-bg, rgba(45, 199, 107, 0.08)); color: var(--color-success-strong); }
#content-cloud .stat-badge.inactive { background: var(--status-inactive-bg, #fce4ec); color: var(--status-inactive-fg, #c2185b); }

/* Actions: keep buttons perfectly aligned on one baseline */
#content-cloud .page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Icon utilities */
#content-cloud .icon-enabled { color: var(--color-success-strong); font-size: var(--icon-size-md, 18px); }
#content-cloud .icon-disabled { color: var(--brand-danger, #D9252E); font-size: var(--icon-size-md, 18px); }
#content-cloud .icon-info { color: var(--color-icon-accent); font-size: var(--icon-size-md, 18px); }
#content-cloud .icon-wrapper { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 767px) {
  #content-cloud .page-header-card { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* Base for every scope, ahead of the variant rules so their borders win.
   Modals appended to <body> and module overlays sit outside #content-cloud. */
#content-cloud .slick-btn,
.vm-shell-stack .slick-btn,
.tag-modal .slick-btn,
.modal .slick-btn,
body > .tag-modal-overlay .slick-btn,
.oneb-snap-overlay .slick-btn,
.vm-notes-popover .slick-btn,
.template_togglebox .slick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Children are spaced by gap, not an icon margin, so an icon-only
     button centres its icon with no modifier. */
  gap: 6px;
  height: auto;
  padding: .25rem .75rem;
  font-weight: var(--font-weight-500, 500);
  font-size: var(--font-size-14);
  line-height: var(--line-height-150, 1.5);
  border-radius: 6px;
  /* Every variant is the same height: filled variants carry a transparent
     border the width of the outlined variants' visible one. */
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Links styled as buttons — no underline */
#content-cloud a.slick-btn,
#content-cloud a.slick-btn-primary,
#content-cloud a.slick-btn-secondary,
#content-cloud a.slick-btn-cta,
.template_togglebox a.slick-btn,
.template_togglebox a.slick-btn-primary,
.template_togglebox a.slick-btn-secondary,
.template_togglebox a.slick-btn-cta {
  text-decoration: none;
}
#content-cloud a.slick-btn:hover,
#content-cloud a.slick-btn-primary:hover,
#content-cloud a.slick-btn-secondary:hover,
#content-cloud a.slick-btn-cta:hover,
.template_togglebox a.slick-btn:hover,
.template_togglebox a.slick-btn-primary:hover,
.template_togglebox a.slick-btn-secondary:hover,
.template_togglebox a.slick-btn-cta:hover {
  text-decoration: none;
}

#content-cloud .slick-btn-primary, .template_togglebox .slick-btn-primary {
  background: var(--color-primary-fill);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-brand-sm, 0 2px 4px rgba(41, 167, 230, .2));
}

/* Button variants (shared across module templates) */
#content-cloud .slick-btn--danger,
.tag-modal .slick-btn--danger,
.vm-shell-stack .slick-btn--danger,
.modal .slick-btn--danger,
body > .tag-modal-overlay .slick-btn--danger,
.oneb-snap-overlay .slick-btn--danger,
.vm-notes-popover .slick-btn--danger,
.template_togglebox .slick-btn--danger {
  background: var(--color-danger-fill, #dc2626);
  color: var(--color-fg-inverse, #fff);
}

#content-cloud .slick-btn--danger:hover,
.tag-modal .slick-btn--danger:hover,
.vm-shell-stack .slick-btn--danger:hover,
.modal .slick-btn--danger:hover,
body > .tag-modal-overlay .slick-btn--danger:hover,
.oneb-snap-overlay .slick-btn--danger:hover,
.vm-notes-popover .slick-btn--danger:hover,
.template_togglebox .slick-btn--danger:hover {
  background: var(--color-danger-fill-hover, #b91c1c);
  color: var(--color-fg-inverse, #fff);
}

#content-cloud .slick-btn--success,
.tag-modal .slick-btn--success,
.vm-shell-stack .slick-btn--success,
.modal .slick-btn--success,
body > .tag-modal-overlay .slick-btn--success,
.oneb-snap-overlay .slick-btn--success,
.vm-notes-popover .slick-btn--success,
.template_togglebox .slick-btn--success {
  background: var(--brand-success, #28a745);
  color: var(--color-fg-inverse, #fff);
}

#content-cloud .slick-btn--warning,
.tag-modal .slick-btn--warning,
.vm-shell-stack .slick-btn--warning,
.modal .slick-btn--warning,
body > .tag-modal-overlay .slick-btn--warning,
.oneb-snap-overlay .slick-btn--warning,
.vm-notes-popover .slick-btn--warning,
.template_togglebox .slick-btn--warning {
  background: var(--brand-warning, #ffc107);
  color: var(--color-fg, #212529);
}

#content-cloud .slick-btn--info,
.tag-modal .slick-btn--info,
.vm-shell-stack .slick-btn--info,
.modal .slick-btn--info,
body > .tag-modal-overlay .slick-btn--info,
.oneb-snap-overlay .slick-btn--info,
.vm-notes-popover .slick-btn--info,
.template_togglebox .slick-btn--info {
  background: var(--brand-info, #17a2b8);
  color: var(--color-fg-inverse, #fff);
}

#content-cloud .slick-btn--muted,
.tag-modal .slick-btn--muted,
.vm-shell-stack .slick-btn--muted,
.modal .slick-btn--muted,
body > .tag-modal-overlay .slick-btn--muted,
.oneb-snap-overlay .slick-btn--muted,
.vm-notes-popover .slick-btn--muted,
.template_togglebox .slick-btn--muted {
  /* Fixed mid-grey in both themes: #fff on it 4.7:1 (the old --gray-500
     was 2.1:1 in light). */
  background: var(--neutral-600);
  color: var(--color-fg-inverse);
  opacity: .9;
}

/* Secondary slick button (CreateVM, Overview, etc.) and its single-dash
   module alias: the primary reversed. Hover and press skip disabled buttons,
   which keep the rest state under the shared disabled opacity. */
#content-cloud .slick-btn--secondary,
#content-cloud a.slick-btn--secondary,
#content-cloud .slick-btn-secondary,
#content-cloud a.slick-btn-secondary,
.tag-modal .slick-btn--secondary,
.tag-modal a.slick-btn--secondary,
.tag-modal .slick-btn-secondary,
.tag-modal a.slick-btn-secondary,
.vm-shell-stack .slick-btn--secondary,
.vm-shell-stack a.slick-btn--secondary,
.vm-shell-stack .slick-btn-secondary,
.vm-shell-stack a.slick-btn-secondary,
.modal .slick-btn--secondary,
.modal a.slick-btn--secondary,
.modal .slick-btn-secondary,
.modal a.slick-btn-secondary,
body > .tag-modal-overlay .slick-btn--secondary,
body > .tag-modal-overlay a.slick-btn--secondary,
body > .tag-modal-overlay .slick-btn-secondary,
body > .tag-modal-overlay a.slick-btn-secondary,
.oneb-snap-overlay .slick-btn--secondary,
.oneb-snap-overlay a.slick-btn--secondary,
.oneb-snap-overlay .slick-btn-secondary,
.oneb-snap-overlay a.slick-btn-secondary,
.vm-notes-popover .slick-btn--secondary,
.vm-notes-popover a.slick-btn--secondary,
.vm-notes-popover .slick-btn-secondary,
.vm-notes-popover a.slick-btn-secondary,
.rgw-modal .slick-btn--secondary,
.rgw-modal a.slick-btn--secondary,
.rgw-modal .slick-btn-secondary,
.rgw-modal a.slick-btn-secondary,
.template_togglebox .slick-btn--secondary,
.template_togglebox a.slick-btn--secondary,
.template_togglebox .slick-btn-secondary,
.template_togglebox a.slick-btn-secondary {
  background: var(--color-secondary-fill, #fff);
  color: var(--color-secondary-fg);
  border: 1px solid var(--color-secondary-border);
  box-shadow: none;
}

#content-cloud .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
#content-cloud a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
#content-cloud .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
#content-cloud a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.tag-modal .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.tag-modal a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.tag-modal .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.tag-modal a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.modal .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.modal a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.modal .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.modal a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.rgw-modal .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.rgw-modal a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.rgw-modal .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.rgw-modal a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.template_togglebox .slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.template_togglebox a.slick-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.template_togglebox .slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]),
.template_togglebox a.slick-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-secondary-fill-hover);
  color: var(--color-secondary-fg-hover, #fff);
  border-color: var(--color-secondary-border-hover);
  transform: translateY(-1px);
}

#content-cloud .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
#content-cloud a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
#content-cloud .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
#content-cloud a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.tag-modal .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.tag-modal a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.tag-modal .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.tag-modal a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.modal .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.modal a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.modal .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.modal a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.rgw-modal .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.rgw-modal a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.rgw-modal .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.rgw-modal a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.template_togglebox .slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.template_togglebox a.slick-btn--secondary:active:not(:disabled):not([aria-disabled="true"]),
.template_togglebox .slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]),
.template_togglebox a.slick-btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(.99);
}

/* Keyboard focus for every tier. The ring sits outside the button, so it is
   measured against the surrounding surface (--focus-outline: 5.2:1 light,
   10.4:1 dark). */
#content-cloud .slick-btn:focus-visible,
.tag-modal .slick-btn:focus-visible,
.vm-shell-stack .slick-btn:focus-visible,
.modal .slick-btn:focus-visible,
body > .tag-modal-overlay .slick-btn:focus-visible,
.oneb-snap-overlay .slick-btn:focus-visible,
.vm-notes-popover .slick-btn:focus-visible,
.rgw-modal .slick-btn:focus-visible,
.template_togglebox .slick-btn:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
#content-cloud .slick-btn-danger, .template_togglebox .slick-btn-danger {
  background: var(--color-danger-fill, #dc2626);
  color: var(--color-fg-inverse, #fff);
}
#content-cloud .slick-btn-danger:hover, .template_togglebox .slick-btn-danger:hover {
  background: var(--color-danger-fill-hover, #b91c1c);
  color: var(--color-fg-inverse, #fff);
}

/* CTA button variant — commerce actions (Order, Pay, Checkout) */
#content-cloud .slick-btn--cta,
.tag-modal .slick-btn--cta,
.vm-shell-stack .slick-btn--cta,
.modal .slick-btn--cta,
body > .tag-modal-overlay .slick-btn--cta,
.oneb-snap-overlay .slick-btn--cta,
.vm-notes-popover .slick-btn--cta,
.template_togglebox .slick-btn--cta {
  background: var(--brand-cta-gradient);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-cta-sm);
}
#content-cloud .slick-btn-cta, .template_togglebox .slick-btn-cta {
  background: var(--brand-cta-gradient);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-cta-sm);
}
#content-cloud .slick-btn-cta:hover,
#content-cloud .slick-btn--cta:hover,
.tag-modal .slick-btn--cta:hover,
.vm-shell-stack .slick-btn--cta:hover,
.modal .slick-btn--cta:hover,
body > .tag-modal-overlay .slick-btn--cta:hover,
.oneb-snap-overlay .slick-btn--cta:hover,
.vm-notes-popover .slick-btn--cta:hover,
.template_togglebox .slick-btn-cta:hover,
.template_togglebox .slick-btn--cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta-md);
}

/* Icon+label button helper (prefer gap for non-<i> icons, reset <i> margin to avoid double spacing) */
#content-cloud .slick-btn.slick-btn--icon,
.tag-modal .slick-btn.slick-btn--icon,
.vm-shell-stack .slick-btn.slick-btn--icon,
.modal .slick-btn.slick-btn--icon,
body > .tag-modal-overlay .slick-btn.slick-btn--icon,
.oneb-snap-overlay .slick-btn.slick-btn--icon,
.vm-notes-popover .slick-btn.slick-btn--icon,
.template_togglebox .slick-btn.slick-btn--icon {
  gap: 6px;
}

#content-cloud .slick-btn.slick-btn--icon i,
.tag-modal .slick-btn.slick-btn--icon i,
.vm-shell-stack .slick-btn.slick-btn--icon i,
.modal .slick-btn.slick-btn--icon i,
body > .tag-modal-overlay .slick-btn.slick-btn--icon i,
.oneb-snap-overlay .slick-btn.slick-btn--icon i,
.vm-notes-popover .slick-btn.slick-btn--icon i,
.template_togglebox .slick-btn.slick-btn--icon i {
  margin-right: 0;
}

/* Compact sizes for inline actions */
#content-cloud .slick-btn.slick-btn--sm,
.tag-modal .slick-btn.slick-btn--sm,
.vm-shell-stack .slick-btn.slick-btn--sm,
.modal .slick-btn.slick-btn--sm,
body > .tag-modal-overlay .slick-btn.slick-btn--sm,
.oneb-snap-overlay .slick-btn.slick-btn--sm,
.vm-notes-popover .slick-btn.slick-btn--sm,
.template_togglebox .slick-btn.slick-btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--font-size-11);
  line-height: var(--line-height-100, 1);
}

#content-cloud .slick-btn.slick-btn--xs,
.tag-modal .slick-btn.slick-btn--xs,
.vm-shell-stack .slick-btn.slick-btn--xs,
.modal .slick-btn.slick-btn--xs,
body > .tag-modal-overlay .slick-btn.slick-btn--xs,
.oneb-snap-overlay .slick-btn.slick-btn--xs,
.vm-notes-popover .slick-btn.slick-btn--xs,
.template_togglebox .slick-btn.slick-btn--xs {
  height: 22px;
  padding: 0 8px;
  font-size: var(--font-size-10);
  line-height: var(--line-height-100, 1);
}

/* Simple button group helper (used on overview density toggle) */
#content-cloud .slick-btn-group, .template_togglebox .slick-btn-group {
  display: inline-flex;
  gap: 4px;
  background: var(--color-surface-subtle);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--color-border-subtle);
}

#content-cloud .slick-btn-group .slick-btn, .template_togglebox .slick-btn-group .slick-btn {
  box-shadow: none;
}

#content-cloud .slick-btn-group .slick-btn.is-active, .template_togglebox .slick-btn-group .slick-btn.is-active {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  color: var(--color-fg);
}

#content-cloud .vm-qa-quick-actions .vm-qa-btn {
  background: var(--brand-primary-gradient);
  color: var(--color-fg-inverse, #fff);
  border: 1px solid transparent;
}
#content-cloud .vm-qa-quick-actions .vm-qa-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-md, 0 4px 10px rgba(41, 167, 230, .28));
}
#content-cloud .vm-qa-quick-actions .vm-qa-btn:active {
  transform: scale(.99);
}
#content-cloud .vm-qa-quick-actions .vm-qa-btn[disabled],
#content-cloud .vm-qa-quick-actions .vm-qa-btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}
#content-cloud .slick-btn-primary:hover, .template_togglebox .slick-btn-primary:hover { background: var(--color-primary-fill-hover); transform: translateY(-1px); box-shadow: var(--shadow-brand-md, 0 4px 10px rgba(41, 167, 230, .28)); }
#content-cloud .slick-btn-primary:active, .template_togglebox .slick-btn-primary:active { transform: scale(.99); }

/*
 * Icon spacing inside slick buttons comes from the button's gap (base rule
 * above), so "<i></i> Label" and an icon alone both sit right. The margin
 * reset keeps compiled or module icon margins from doubling the gap.
 */
#content-cloud .slick-btn i,
#content-cloud a.slick-btn i,
.template_togglebox .slick-btn i,
.template_togglebox a.slick-btn i {
  margin-right: 0;
}

/* Icon size for out-of-flow containers (snap overlays, popovers) */
.oneb-snap-overlay .slick-btn i,
.vm-notes-popover .slick-btn i {
  margin-right: 0;
  font-size: 16px;
  line-height: 16px;
  vertical-align: -1px;
}

/* Inline, non-button informational icons preceding text */
#content-cloud .oneb-inline-icon {
  margin-right: 6px;
  vertical-align: text-bottom;
}

/* Generic inline icon spacing for common text containers (non-buttons) */
#content-cloud h1 i.ph,
#content-cloud h2 i.ph,
#content-cloud h3 i.ph,
#content-cloud h4 i.ph,
#content-cloud h5 i.ph,
#content-cloud h6 i.ph,
#content-cloud p i.ph,
#content-cloud .alert i.ph,
#content-cloud .notice i.ph,
#content-cloud .list-group-item i.ph,
#content-cloud .fs11 i.ph {
  margin-right: 6px;
  vertical-align: text-bottom;
}

.tag-modal .slick-btn-primary,
.vm-shell-stack .slick-btn-primary,
.modal .slick-btn-primary,
body > .tag-modal-overlay .slick-btn-primary,
.oneb-snap-overlay .slick-btn-primary,
.vm-notes-popover .slick-btn-primary {
  background: var(--color-primary-fill);
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-brand-sm, 0 2px 4px rgba(41, 167, 230, .2));
}

.tag-modal .slick-btn-primary:hover,
.vm-shell-stack .slick-btn-primary:hover,
.modal .slick-btn-primary:hover,
body > .tag-modal-overlay .slick-btn-primary:hover,
.oneb-snap-overlay .slick-btn-primary:hover,
.vm-notes-popover .slick-btn-primary:hover {
  background: var(--color-primary-fill-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-md, 0 4px 10px rgba(41, 167, 230, .28));
}

.tag-modal .slick-btn-primary:active,
.vm-shell-stack .slick-btn-primary:active,
.modal .slick-btn-primary:active,
body > .tag-modal-overlay .slick-btn-primary:active,
.oneb-snap-overlay .slick-btn-primary:active,
.vm-notes-popover .slick-btn-primary:active {
  transform: scale(.99);
}

/* Danger subtle — outline-style danger for lower-emphasis destructive actions */
#content-cloud .slick-btn--danger-subtle,
.tag-modal .slick-btn--danger-subtle,
.modal .slick-btn--danger-subtle,
body > .tag-modal-overlay .slick-btn--danger-subtle,
.oneb-snap-overlay .slick-btn--danger-subtle,
.vm-notes-popover .slick-btn--danger-subtle,
.vm-shell-stack .slick-btn--danger-subtle,
.template_togglebox .slick-btn--danger-subtle {
  background: transparent;
  color: var(--color-danger-strong);
  border: 1px solid var(--color-danger, #dc3545);
}
#content-cloud .slick-btn--danger-subtle:hover,
.tag-modal .slick-btn--danger-subtle:hover,
.modal .slick-btn--danger-subtle:hover,
body > .tag-modal-overlay .slick-btn--danger-subtle:hover,
.oneb-snap-overlay .slick-btn--danger-subtle:hover,
.vm-notes-popover .slick-btn--danger-subtle:hover,
.vm-shell-stack .slick-btn--danger-subtle:hover,
.template_togglebox .slick-btn--danger-subtle:hover {
  background: var(--color-danger, #dc3545);
  color: var(--color-bg, #fff);
}
#content-cloud .slick-btn--danger-subtle:focus,
.tag-modal .slick-btn--danger-subtle:focus,
.modal .slick-btn--danger-subtle:focus,
body > .tag-modal-overlay .slick-btn--danger-subtle:focus,
.oneb-snap-overlay .slick-btn--danger-subtle:focus,
.vm-notes-popover .slick-btn--danger-subtle:focus,
.vm-shell-stack .slick-btn--danger-subtle:focus,
.template_togglebox .slick-btn--danger-subtle:focus {
  box-shadow: 0 0 0 3px var(--shadow-focus-ring, rgba(96,165,250,0.25));
}

/* Disabled state for every tier. Placed after the variant hover rules so it
   wins at equal specificity; opacity works whatever fill a tier or a module
   alias sets. */
#content-cloud .slick-btn:disabled,
#content-cloud .slick-btn[aria-disabled="true"],
.tag-modal .slick-btn:disabled,
.tag-modal .slick-btn[aria-disabled="true"],
.modal .slick-btn:disabled,
.modal .slick-btn[aria-disabled="true"],
body > .tag-modal-overlay .slick-btn:disabled,
body > .tag-modal-overlay .slick-btn[aria-disabled="true"],
.oneb-snap-overlay .slick-btn:disabled,
.oneb-snap-overlay .slick-btn[aria-disabled="true"],
.vm-notes-popover .slick-btn:disabled,
.vm-notes-popover .slick-btn[aria-disabled="true"],
.vm-shell-stack .slick-btn:disabled,
.vm-shell-stack .slick-btn[aria-disabled="true"],
.template_togglebox .slick-btn:disabled,
.template_togglebox .slick-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Primary tier, modifier spelling. .slick-btn--primary is the canonical class
   for new markup; .slick-btn-primary is the original spelling, styled by its
   own rules above with matching declarations (both read --color-primary-fill,
   the same in both themes: #fff on it 5.2:1, hover 7.4:1). These --primary
   hover and press rules skip disabled buttons, so the shared disabled rule
   above keeps them flat; the alias rules do not. */
#content-cloud .slick-btn--primary,
.tag-modal .slick-btn--primary,
.vm-shell-stack .slick-btn--primary,
.modal .slick-btn--primary,
body > .tag-modal-overlay .slick-btn--primary,
.oneb-snap-overlay .slick-btn--primary,
.vm-notes-popover .slick-btn--primary,
.template_togglebox .slick-btn--primary {
  background: var(--color-primary-fill);
  color: var(--color-fg-inverse);
  box-shadow: var(--shadow-brand-sm);
}
#content-cloud .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.tag-modal .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.modal .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]),
.template_togglebox .slick-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--color-primary-fill-hover);
  color: var(--color-fg-inverse);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-md);
}
#content-cloud .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.tag-modal .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.vm-shell-stack .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.modal .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
body > .tag-modal-overlay .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.oneb-snap-overlay .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.vm-notes-popover .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]),
.template_togglebox .slick-btn--primary:active:not(:disabled):not([aria-disabled="true"]) {
  transform: scale(.99);
}

/* Size scale. --sm (26px, inline row actions; .slick-btn-sm is its alias),
   --md (32px min-height, 1px taller than the unmodified 31px default), --lg (44px, the one page-level
   action of a form or empty state). Each clears the 24px pointer target
   (WCAG 2.5.8) with a mouse and grows to --touch-target-min on touch.
   --xs (22px) stays for dense chips inside a row and is not part of the scale.
   The .slick-btn-sm alias skips OpenNebula master's #content-cloud.cloud-content,
   whose one unstyled .slick-btn-sm renders at the default size there;
   remove after OpenNebula impeccable-fixes-2 merges. */
#content-cloud .slick-btn.slick-btn-sm:not(.cloud-content *),
.tag-modal .slick-btn.slick-btn-sm:not(.cloud-content *),
.vm-shell-stack .slick-btn.slick-btn-sm:not(.cloud-content *),
.modal .slick-btn.slick-btn-sm:not(.cloud-content *),
body > .tag-modal-overlay .slick-btn.slick-btn-sm:not(.cloud-content *),
.oneb-snap-overlay .slick-btn.slick-btn-sm:not(.cloud-content *),
.vm-notes-popover .slick-btn.slick-btn-sm:not(.cloud-content *),
.template_togglebox .slick-btn.slick-btn-sm:not(.cloud-content *) {
  height: 26px;
  padding: 0 10px;
  font-size: var(--font-size-11);
  line-height: var(--line-height-100, 1);
}
#content-cloud .slick-btn.slick-btn--md,
.tag-modal .slick-btn.slick-btn--md,
.vm-shell-stack .slick-btn.slick-btn--md,
.modal .slick-btn.slick-btn--md,
body > .tag-modal-overlay .slick-btn.slick-btn--md,
.oneb-snap-overlay .slick-btn.slick-btn--md,
.vm-notes-popover .slick-btn.slick-btn--md,
.template_togglebox .slick-btn.slick-btn--md {
  min-height: 32px;
  padding: .25rem .75rem;
  font-size: var(--font-size-14);
  line-height: var(--line-height-150, 1.5);
}
#content-cloud .slick-btn.slick-btn--lg,
.tag-modal .slick-btn.slick-btn--lg,
.vm-shell-stack .slick-btn.slick-btn--lg,
.modal .slick-btn.slick-btn--lg,
body > .tag-modal-overlay .slick-btn.slick-btn--lg,
.oneb-snap-overlay .slick-btn.slick-btn--lg,
.vm-notes-popover .slick-btn.slick-btn--lg,
.template_togglebox .slick-btn.slick-btn--lg {
  min-height: 44px;
  padding: .5rem 1.25rem;
  font-size: var(--font-size-16);
  line-height: var(--line-height-150, 1.5);
  border-radius: 8px;
}
@media (pointer: coarse) {
#content-cloud :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
.tag-modal :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
.vm-shell-stack :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
.modal :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
body > .tag-modal-overlay :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
.oneb-snap-overlay :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
.vm-notes-popover :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn,
.template_togglebox :is(.slick-btn--sm, .slick-btn-sm, .slick-btn--md, .slick-btn--lg).slick-btn {
    min-height: var(--touch-target-min);
  }
}

/* Touch target minimums (44×44px) on coarse-pointer (touch) devices */
@media (pointer: coarse) {
  .slick-btn,
  .vm-qa-btn,
  .slick-btn--icon,
  .small_control { min-height: 44px; min-width: 44px; }
}

/* Coarse-pointer hit area: a transparent pseudo-element grows the touch box to
   --touch-target-min without changing layout. Each inset is min(0, (size - 44) / 2),
   so a control already 44px or larger keeps its own box. Opt in with
   .slick-hit-area, or list a component selector here when its markup is
   generated elsewhere. Module controls repeat this recipe on ::after (or
   ::before when ::after is taken) against the same token. */
@media (pointer: coarse) {
  .slick-hit-area,
  #content-cloud .page-link,
  .storage-unit-btn,
  #content-cloud .slick-settings-row-controls label,
  #oneb-createvm .slick-settings-row-controls label,
  .template_togglebox .slick-settings-row-controls label { position: relative; }

  .slick-hit-area::after,
  #content-cloud .slick-icon-btn::after,
  .template_togglebox .slick-icon-btn::after,
  #content-cloud .page-link::after,
  .storage-unit-btn::after,
  #content-cloud .slick-settings-row-controls label::after,
  #oneb-createvm .slick-settings-row-controls label::after,
  .template_togglebox .slick-settings-row-controls label::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--touch-target-min)) / 2));
  }
}

/* Dense typography defaults for portal and module pages
   - Body: 14px (--text-body-size)
   - Small: 12px (.75rem)
   - Extra small: 11px (--font-size-xs) for compact chips/indicators */
/* Defined on the portal scope too, so shared components outside
   #content-cloud (portal pages, order pages, body-level modals) resolve them. */
#content-cloud, .template_togglebox {
  --slick-font-body: var(--text-body-size);
  --slick-font-sm: .75rem;
  --slick-font-xs: var(--font-size-xs);
  --slick-icon-10: .625rem;
  --slick-icon-12: .75rem;
  --slick-icon-14: .875rem;
  --slick-icon-16: 1rem;
  --slick-icon-18: 1.125rem;
  --slick-icon-20: 1.25rem;
  --slick-icon-24: 1.5rem;
  font-size: var(--slick-font-body);
}

/* Module content ink. Host themes other than Togglebox hard-code a body
   colour that does not follow the theme toggle (userapi patched this
   locally). Zero specificity: anything inside that sets its own colour,
   including the compiled heading rules, still wins; only inherited text
   changes. #212529 on #fff 15.4:1; dark #e2e8f0 on #0f172a 14.5:1. */
:where(#content-cloud) { color: var(--color-fg); }
:where(#content-cloud) :where(h1, h2, h3, h4, h5, h6) { color: var(--color-fg-strong); }

/* Apply dense body scale across module content while keeping form controls readable */
#content-cloud input,
#content-cloud select,
#content-cloud textarea { font-size: 1rem; }

#content-cloud .slick-table, .template_togglebox .slick-table { width: 100%; background: var(--color-bg, #fff); border-radius: 8px; overflow: visible; box-shadow: var(--shadow-sm); border-collapse: separate; border-spacing: 0; }
#content-cloud .slick-table thead, .template_togglebox .slick-table thead { position: relative; background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-3) 100%); border-bottom: 2px solid var(--color-border-subtle); }
#content-cloud .slick-table tbody, #content-cloud .slick-table tr, #content-cloud .slick-table td, #content-cloud .slick-table th, .template_togglebox .slick-table tbody, .template_togglebox .slick-table tr, .template_togglebox .slick-table td, .template_togglebox .slick-table th { overflow: visible; position: relative; }
#content-cloud .slick-table th, 
#content-cloud .slick-table thead td,
.template_togglebox .slick-table th,
.template_togglebox .slick-table thead td { padding: 12px 16px; text-align: left; font-weight: var(--font-weight-600, 600); font-size: .75rem; line-height: var(--line-height-125, 1.25); color: var(--color-fg-subtle); text-transform: uppercase; letter-spacing: var(--letter-spacing-030, 0.03em); }
#content-cloud .slick-table td, .template_togglebox .slick-table td { padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--slick-font-body); font-weight: var(--font-weight-400, 400); line-height: var(--line-height-135, 1.35); }
#content-cloud .slick-table tbody tr, .template_togglebox .slick-table tbody tr { border-bottom: 1px solid var(--color-border-subtle); transition: background .15s ease, box-shadow .15s ease; }
#content-cloud .slick-table tbody tr:nth-child(odd), .template_togglebox .slick-table tbody tr:nth-child(odd) { background: var(--color-surface-3, #fafbfc); }
#content-cloud .slick-table tbody tr:nth-child(even), .template_togglebox .slick-table tbody tr:nth-child(even) { background: var(--color-bg, #fff); }
#content-cloud .slick-table tbody tr:hover, .template_togglebox .slick-table tbody tr:hover { background: var(--brand-primary-bg) !important; box-shadow: 0 2px 4px rgba(0,0,0,.05); }

#content-cloud .slick-table thead th.sortable,
#content-cloud .slick-table thead td.sortable,
.template_togglebox .slick-table thead th.sortable,
.template_togglebox .slick-table thead td.sortable { white-space: nowrap; }
#content-cloud .slick-table thead .sort-indicator, .template_togglebox .slick-table thead .sort-indicator { display: inline-block; margin-left: 6px; vertical-align: middle; font-size: var(--slick-font-xs); color: var(--color-fg-muted); }
#content-cloud .slick-table thead .sort-indicator.active,
#content-cloud .slick-table thead .sort-indicator.asc,
#content-cloud .slick-table thead .sort-indicator.desc,
.template_togglebox .slick-table thead .sort-indicator.active,
.template_togglebox .slick-table thead .sort-indicator.asc,
.template_togglebox .slick-table thead .sort-indicator.desc { color: var(--color-fg-subtle); }

/* Table density. The default row is 10px 16px; --compact (6px 12px, header
   8px 12px) is for long operational lists read by scanning, --comfortable
   (14px 20px) for short tables a user reads row by row, such as a
   comparison or a summary. Only padding changes, so stripes, hover, borders
   and dark mode stay with the base .slick-table. The phone stack layout
   (.slick-table--stack, slick-responsive.css) keeps its own cell padding. */
#content-cloud .slick-table--compact :is(thead th, thead td, th, td), .template_togglebox .slick-table--compact :is(thead th, thead td, th, td) { padding: 6px 12px; }
#content-cloud .slick-table--compact :is(thead th, thead td), .template_togglebox .slick-table--compact :is(thead th, thead td) { padding: 8px 12px; }
#content-cloud .slick-table--comfortable :is(thead th, thead td, th, td), .template_togglebox .slick-table--comfortable :is(thead th, thead td, th, td) { padding: 14px 20px; }

/* Sort control inside a <th aria-sort>: a real button that inherits the
   header typography, so the th carries the sort state and the button the
   name and keyboard activation. */
#content-cloud .slick-sort-button, .template_togglebox .slick-sort-button {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
#content-cloud .slick-sort-button:hover, .template_togglebox .slick-sort-button:hover { color: var(--color-fg-strong, var(--color-fg)); }
#content-cloud .slick-sort-button:focus-visible, .template_togglebox .slick-sort-button:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
#content-cloud th[aria-sort="ascending"] .slick-sort-button .sort-indicator,
#content-cloud th[aria-sort="descending"] .slick-sort-button .sort-indicator { color: var(--color-fg-strong, var(--color-fg)); }

/* Table scroll regions. A wrapper that scrolls a wide table is a focusable
   region (tabindex="0" role="region" aria-label) so keyboard users can scroll
   it; the ring shows where focus went. Stacked tables (.slick-table--stack,
   slick-responsive.css) need no scroller on phones. */
#content-cloud .slick-table-scroll:focus-visible,
#content-cloud .opennebula-table-scroll:focus-visible,
.template_togglebox .slick-table-scroll:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Sortable headers (non slick-table tables + generic headers) */
#content-cloud .sortable { cursor: pointer; user-select: none; }
#content-cloud .sort-indicator { margin-left: 5px; color: var(--color-fg-muted); }
#content-cloud .sortable.sort-asc .sort-indicator,
#content-cloud .sortable.sort-desc .sort-indicator { color: var(--color-fg); }

/* Typography utilities (scoped) */
#content-cloud .slick-text-sm,
#oneb-createvm .slick-text-sm,
.template_togglebox .slick-text-sm { font-size: var(--slick-font-sm); line-height: var(--line-height-133, 1.33); color: var(--color-fg-muted); }
#content-cloud .slick-text-xs,
#oneb-createvm .slick-text-xs,
.template_togglebox .slick-text-xs { font-size: var(--slick-font-xs); line-height: var(--line-height-130, 1.3); color: var(--color-fg-muted); }
#content-cloud .slick-fw-600,
#oneb-createvm .slick-fw-600,
.template_togglebox .slick-fw-600 { font-weight: var(--font-weight-600, 600); }
#content-cloud .slick-mono,
#oneb-createvm .slick-mono,
.template_togglebox .slick-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Simple utilities (scoped; avoids touching global Bootstrap utility classes) */
#content-cloud .text-center { text-align: center; }
#content-cloud .text-right { text-align: right; }
#content-cloud .v-middle { vertical-align: middle; }

/* Text color utilities (cloud content + portalized dropdown menus) */
#content-cloud .text-success,
.onb-portal-dropdown .text-success { color: var(--color-success-strong) !important; }
#content-cloud .text-danger,
.onb-portal-dropdown .text-danger { color: var(--color-danger-strong) !important; }
#content-cloud .text-info,
.onb-portal-dropdown .text-info { color: var(--color-info-strong) !important; }
#content-cloud .text-warning,
.onb-portal-dropdown .text-warning { color: var(--color-warning-strong) !important; }
#content-cloud .text-white,
.onb-portal-dropdown .text-white { color: var(--color-fg-inverse, #fff) !important; }
#content-cloud .text-muted,
.onb-portal-dropdown .text-muted { color: var(--color-fg-muted) !important; }

/* Legacy class mapping: approximate slick button styling safely */
#content-cloud .small_control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  line-height: var(--line-height-120, 1.2);
  border: 1px solid transparent;
  cursor: pointer;
}
#content-cloud .small_control .ph { font-size: var(--icon-size-sm, 16px); }

/* Destructive: map to danger variant */
#content-cloud .small_control.small_delete,
#content-cloud .small_delete {
  background: var(--brand-danger, #D9252E) !important;
  color: var(--color-fg-inverse, #fff) !important;
  border-color: var(--brand-danger, #D9252E) !important;
}
#content-cloud .small_control.small_delete:hover,
#content-cloud .small_delete:hover { filter: brightness(0.95); color: var(--color-fg-inverse, #fff); text-decoration: none; }

/* Non-destructive small_control stays neutral to avoid unexpected theme changes */
#content-cloud .small_control:not(.small_delete) {
  background: transparent;
  color: inherit;
}
#content-cloud .small_control:not(.small_delete):hover { text-decoration: none; background: var(--color-surface-3); }

/* Icon size utilities */
#content-cloud .slick-icon-10 { font-size: var(--slick-icon-10) !important; }
#content-cloud .slick-icon-12 { font-size: var(--slick-icon-12) !important; }
#content-cloud .slick-icon-14 { font-size: var(--slick-icon-14) !important; }
#content-cloud .slick-icon-16 { font-size: var(--slick-icon-16) !important; }
#content-cloud .slick-icon-18 { font-size: var(--slick-icon-18) !important; }
#content-cloud .slick-icon-20 { font-size: var(--slick-icon-20) !important; }
#content-cloud .slick-icon-24 { font-size: var(--slick-icon-24) !important; }

/* Map legacy font-size utility classes to normalized sizes */
#content-cloud .fs11, #content-cloud .fs-11 { font-size: var(--slick-font-xs) !important; }
#content-cloud .fs12, #content-cloud .fs-12 { font-size: var(--slick-font-sm) !important; }
#content-cloud .fs13, #content-cloud .fs-13 { font-size: var(--slick-font-body) !important; }
#content-cloud .fs14, #content-cloud .fs-14, #content-cloud .f14 { font-size: var(--slick-font-body) !important; }
#content-cloud .f12, #content-cloud .f13 { font-size: var(--slick-font-body) !important; }

/* Status pills render in the page body (#content-cloud) and in the VM shell
   header above it (.vm-shell-stack: the VM top bar's application verdict). */
:is(#content-cloud, .vm-shell-stack) .slick-status, .template_togglebox .slick-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 4px; font-size: .75rem; font-weight: var(--font-weight-600, 600); text-transform: uppercase; letter-spacing: var(--letter-spacing-030, 0.03em); }
#content-cloud .slick-status-running, .template_togglebox .slick-status-running { position: relative; }
/* Tone colours for every chip family come from the shared tone block
   ("Chips and callouts: one tone model") near the end of this file. */

/* Alert/message boxes - flexbox layout with icon support */
#content-cloud .slick-alert, .template_togglebox .slick-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  border: 1px solid;
  color: var(--tone-fg); /* tone block below */
}
#content-cloud .slick-alert i, .template_togglebox .slick-alert i {
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 1px;
}
#content-cloud .slick-alert-dismissible, .template_togglebox .slick-alert-dismissible { align-items: center; }
#content-cloud .slick-alert-close, .template_togglebox .slick-alert-close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: currentColor;
  opacity: 0.75;
  cursor: pointer;
}
#content-cloud .slick-alert-close:hover, .template_togglebox .slick-alert-close:hover { opacity: 1; }

/* Dropdown layering: ensure menus appear above buttons and table content */
#content-cloud .action-dropdown { overflow: visible !important; position: relative !important; z-index: auto; }
#content-cloud .oneb-dropdown-menu { position: absolute !important; z-index: 10500 !important; font-size: var(--slick-font-body); }
#content-cloud .dropdown-item { position: relative; z-index: 5001; }

/* Right-align helper class for menus */
#content-cloud .dropdown-menu-end { right: 0 !important; left: auto !important; margin-top: 2px !important; }

/* Standardized Action button + column */
#content-cloud .oneb-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* One square size for every row action gear: --oneb-action-btn-size is
     32px with a mouse and --touch-target-min on touch (theme-variables.css). */
  width: var(--oneb-action-btn-size, 32px);
  height: var(--oneb-action-btn-size, 32px);
  min-width: var(--oneb-action-btn-size, 32px);
  min-height: var(--oneb-action-btn-size, 32px);
  max-width: var(--oneb-action-btn-size, 32px);
  max-height: var(--oneb-action-btn-size, 32px);
  padding: 0;
  line-height: var(--line-height-100, 1); /* keep caret aligned */
  font-size: var(--slick-font-body);
  font-weight: var(--font-weight-500, 500);
  white-space: nowrap; /* keep caret on same line */
  box-sizing: border-box;
  border-radius: 8px;
}

/* Enlarge Manage icon inside the button */
#content-cloud .oneb-action-btn i {
  font-size: var(--slick-icon-24) !important; /* 24px */
  line-height: var(--line-height-100, 1);
  margin-right: 0 !important;   /* center icon-only button */
  display: block;               /* remove inline baseline effects */
}

@supports (transform: translateY(0)) {
  /* Optional micro-adjust: some icon weights sit a touch low */
  #content-cloud .oneb-action-btn i { transform: translateY(-0.5px); }
}

/* Ensure action buttons ignore generic responsive .btn widths */
/* size for Manage dropdown is defined exclusively by .oneb-action-btn above */

/* Non-scoped fallback to ensure fixed button width wherever oneb-action-col is used */
/* no context overrides needed for button size */
/* The lock below stays !important so stray table rules cannot widen the
   Manage column. A layout that must reshape the column (e.g. a stacked card
   header) sets these properties on the cell instead of fighting the lock:
   --oneb-action-col-width, --oneb-action-col-min-width,
   --oneb-action-col-max-width, --oneb-action-col-padding-x. */

#content-cloud td.oneb-action-col {
  width: var(--oneb-action-col-width, 76px) !important;  /* 64px button + 6px x2 cell padding */
  min-width: var(--oneb-action-col-min-width, 76px) !important;
  max-width: var(--oneb-action-col-max-width, 76px) !important;
  text-align: center;
  padding-left: var(--oneb-action-col-padding-x, 6px) !important;
  padding-right: var(--oneb-action-col-padding-x, 6px) !important;
  box-sizing: border-box;
}
/* Prevent header text from forcing column expansion */
#content-cloud th.oneb-action-col {
  width: var(--oneb-action-col-width, 76px) !important;
  min-width: var(--oneb-action-col-min-width, 76px) !important;
  max-width: var(--oneb-action-col-max-width, 76px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--oneb-action-col-padding-x, 6px) !important;
  padding-right: var(--oneb-action-col-padding-x, 6px) !important;
  text-align: left !important;
}

/* Hard lock for overview instances table, in case other rules win */
#content-cloud #instances-table th.oneb-action-col,
#content-cloud #instances-table td.oneb-action-col {
  width: var(--oneb-action-col-width, 76px) !important;
  min-width: var(--oneb-action-col-min-width, 76px) !important;
  max-width: var(--oneb-action-col-max-width, 76px) !important;
  padding-left: var(--oneb-action-col-padding-x, 6px) !important;
  padding-right: var(--oneb-action-col-padding-x, 6px) !important;
}
/* instances table inherits .oneb-action-btn sizing */

/* Networking: keep icon button constrained even if cell expands */
/* firewall rules table inherits .oneb-action-btn sizing */

/* Fallback: enforce action column width on any slick-table even without #content-cloud wrapper */
.slick-table th.oneb-action-col,
table.data-table th.oneb-action-col,
table.tonapp th.oneb-action-col {
  width: var(--oneb-action-col-width, 76px) !important;
  min-width: var(--oneb-action-col-min-width, 76px) !important;
  max-width: var(--oneb-action-col-max-width, 76px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: var(--oneb-action-col-padding-x, 6px) !important;
  padding-right: var(--oneb-action-col-padding-x, 6px) !important;
  text-align: left !important;
  box-sizing: border-box;
}

.slick-table td.oneb-action-col,
table.data-table td.oneb-action-col,
table.tonapp td.oneb-action-col {
  width: var(--oneb-action-col-width, 76px) !important;
  min-width: var(--oneb-action-col-min-width, 76px) !important;
  max-width: var(--oneb-action-col-max-width, 76px) !important;
  padding-left: var(--oneb-action-col-padding-x, 6px) !important;
  padding-right: var(--oneb-action-col-padding-x, 6px) !important;
  text-align: center !important;
  box-sizing: border-box;
}

/* Force fixed layout for firewall rules table so Actions column stays fixed width */
#content-cloud .firewall-rules-table { table-layout: fixed !important; }

/* Also relax overflow on legacy table classes to prevent clipping */
#content-cloud table.tonapp,
#content-cloud table.data-table { overflow: visible; }
#content-cloud table.tonapp tr,
#content-cloud table.tonapp td,
#content-cloud table.data-table tr,
#content-cloud table.data-table td { overflow: visible; position: relative; }
#content-cloud #instances-table .oneb-dropdown-menu { z-index: 10001 !important; }

#content-cloud table.tonapp .oneb-dropdown-menu { z-index: 10001 !important; }

/* Ensure table cells don't clip dropdowns */
#content-cloud table td,
#content-cloud table th {
  overflow: visible !important;
  position: static !important;
}

/* Normalize icons in dropdown menu items so labels align */
#content-cloud .oneb-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
#content-cloud .oneb-dropdown-menu .dropdown-item .oneb-menu-icon {
  display: inline-block;
  width: 18px; /* matches ~16px icon with small gutter */
  min-width: 18px;
  text-align: center;
}

/* ============================================
   STATUS LABELS (consolidated from opennebula-ui.css)
   ============================================
   Design system labels with semantic colors.
   Both .slick-label-* (preferred) and .label-* (backward compat) are supported.
*/

/* Danger/Error state */
.slick-label-danger,
#content-cloud .label-danger {
  background: var(--brand-danger, #D9252E) !important;
  color: var(--color-fg-inverse, #fff) !important;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
}

/* Success state */
.slick-label-success,
#content-cloud .label-success {
  /* Darkened for 4.5:1 against the white label text (AA) */
  background: color-mix(in srgb, var(--brand-success, #2DC76B) 60%, #000) !important;
  color: var(--color-fg-inverse, #fff) !important;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
}

/* Warning state */
.slick-label-warning,
#content-cloud .label-warning {
  /* Dark text: white on the warning amber is below 4.5:1 (AA) */
  background: var(--brand-warning, #F6BB42) !important;
  color: var(--color-fg-strong, #111827) !important;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
}

/* Info state */
.slick-label-info,
#content-cloud .label-info {
  /* Darkened for 4.5:1 against the white label text (AA) */
  background: color-mix(in srgb, var(--brand-primary) 70%, #000) !important;
  color: var(--color-fg-inverse, #fff) !important;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
}

/* Default/neutral state */
.slick-label-default,
#content-cloud .label-default {
  /* Darkened for 4.5:1 against the white label text (AA) */
  background: color-mix(in srgb, var(--brand-muted, #9BA0B3) 55%, #000) !important;
  color: var(--color-fg-inverse, #fff) !important;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-block;
}

/* ============================================
   TAG BADGES (extracted from OpenNebula tags.css)
   ============================================
   Hash-assignable color badges for resource tagging.
   Uses --tag-color-1..8 tokens from theme-variables.css.
   Alias-first migration: .slick-tag is canonical; .tag-badge kept for compat.
*/

.slick-tag,
.tag-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  margin: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.3;
  background-color: var(--tag-color-1);
  border: none;
  color: var(--color-fg-inverse, #fff);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
}

/* Hash-based color assignment via data-color attribute */
.slick-tag[data-color="1"], .tag-badge[data-color="1"] { background-color: var(--tag-color-1); }
.slick-tag[data-color="2"], .tag-badge[data-color="2"] { background-color: var(--tag-color-2); }
.slick-tag[data-color="3"], .tag-badge[data-color="3"] { background-color: var(--tag-color-3); }
.slick-tag[data-color="4"], .tag-badge[data-color="4"] { background-color: var(--tag-color-4); }
.slick-tag[data-color="5"], .tag-badge[data-color="5"] { background-color: var(--tag-color-5); }
.slick-tag[data-color="6"], .tag-badge[data-color="6"] { background-color: var(--tag-color-6); }
.slick-tag[data-color="7"], .tag-badge[data-color="7"] { background-color: var(--tag-color-7); }
.slick-tag[data-color="8"], .tag-badge[data-color="8"] { background-color: var(--tag-color-8); }

.slick-tag:hover,
.tag-badge:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Coarse pointers: a tag link clips its own overflow for the ellipsis, so a
   pseudo-element hit area would be cut off. Transparent block borders grow the
   touch box to 44px instead, the background stays on the padding box, and
   matching negative margins keep the row height unchanged; short tags widen
   to 44px (safe center keeps a long name's start visible). The second
   selector outranks the 1px tag margin in slick-responsive.css. Wrapped rows need a row gap of 44 - 14px so a lower
   tag's border does not cover the tag above it; it is !important because
   module containers set the gap shorthand at ID specificity. */
@media (pointer: coarse) {
  .slick-tag.slick-tag--link,
  .opennebula-table-scroll .tags-wrapper .slick-tag.slick-tag--link {
    border-block: 14px solid transparent;
    margin-block: -14px;
    background-clip: padding-box;
    /* Deliberate off-scale value: an elliptical radius keeps the 4px
       corner visible inside the 14px transparent hit-area border. */
    border-radius: 4px / 18px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    justify-content: safe center;
  }

  .tags-container:has(.slick-tag--link) {
    row-gap: calc(var(--touch-target-min) - 14px) !important;
  }
}

/* Tag placeholder for empty state */
.slick-tag-placeholder,
.tag-placeholder {
  display: inline-block;
  color: var(--color-fg-muted, #999);
  font-style: italic;
  font-size: var(--font-size-sm, 12px);
}

/* Tags container */
.slick-tag-wrap,
.tags-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  max-width: 200px;
}
.slick-tag-wrap--header,
.tags-container--header {
  max-width: 320px;
  gap: 4px;
  justify-content: flex-end;
}

/* Tags column in tables */
.slick-tag-col,
.tags-column {
  max-width: 200px;
  overflow: hidden;
}

/* Loading state */
.slick-tag-loading,
.tags-loading {
  opacity: 0.6;
  pointer-events: none;
}
.slick-tag-loading::after,
.tags-loading::after {
  content: "\23F3";
  margin-left: 5px;
}

/* ============================================
   TOOLTIPS (consolidated from responsive.css)
   ============================================
   Hover-activated info overlays using z-index tokens.
*/

/* .slick-tooltip (hover-only, no consumers) was replaced by the keyboard-
   and touch-reachable .slick-help / .slick-tip pair, near the end of this file. */

/* ============================================
   DROPDOWN MENU BASE (consolidated from responsive.css)
   ============================================
   Base dropdown styles for action menus outside #content-cloud scope.
   Scoped versions in #content-cloud are defined above with higher z-index.
*/

/* Base dropdown menu (unscoped fallback) */
.oneb-dropdown-menu {
  position: absolute;
  background: var(--color-bg, #fff);
  border: 1px solid var(--dropdown-border, #ddd);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  z-index: var(--z-dropdown, 1000);
  min-width: 160px;
  padding: 4px 0;
}

/* Dropdown item base */
.dropdown-item {
  display: block;
  padding: 8px 16px;
  color: var(--color-fg-subtle, #333);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.2s;
  cursor: pointer;
}

.dropdown-item:hover {
  background: var(--color-surface, #f8f9fa);
  text-decoration: none;
}

/* Dropdown divider */
.dropdown-divider {
  height: 1px;
  background: var(--color-surface-2, #e9ecef);
  margin: 4px 0;
}

/* ==========================================================================
 * Settings Card Component (Shared Base)
 * Used on: createvm.tpl (SSH Auth, Backup Options), settings pages
 * Provides consistent card styling for configuration sections
 * ========================================================================== */

#content-cloud .slick-settings-card,
#oneb-createvm .slick-settings-card,
.template_togglebox .slick-settings-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-2, 8px);
}

#content-cloud .slick-settings-header,
#oneb-createvm .slick-settings-header,
.template_togglebox .slick-settings-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4, 16px);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Variant: space-between header (for price display on right) */
#content-cloud .slick-settings-header--spread,
#oneb-createvm .slick-settings-header--spread,
.template_togglebox .slick-settings-header--spread {
  justify-content: space-between;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-5, 20px);
}

#content-cloud .slick-settings-icon,
#oneb-createvm .slick-settings-icon,
.template_togglebox .slick-settings-icon {
  color: var(--color-icon-accent);
  display: inline-flex;
  align-items: center;
}

#content-cloud .slick-settings-title,
#oneb-createvm .slick-settings-title,
.template_togglebox .slick-settings-title {
  font-weight: var(--font-weight-600, 600);
  color: var(--color-fg-strong);
  font-size: var(--font-size-18);
  flex: 1;
  min-width: 0;
}

#content-cloud .slick-settings-badge,
#oneb-createvm .slick-settings-badge,
.template_togglebox .slick-settings-badge {
  font-size: var(--font-size-10);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: var(--font-weight-600, 600);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-050px, 0.5px);
}

#content-cloud .slick-settings-badge--danger,
#oneb-createvm .slick-settings-badge--danger,
.template_togglebox .slick-settings-badge--danger {
  background: var(--brand-danger-gradient); /* #fff 4.8:1 or better */
  color: var(--color-fg-inverse, #fff);
}

#content-cloud .slick-settings-card h5,
#oneb-createvm .slick-settings-card h5,
.template_togglebox .slick-settings-card h5 {
  color: var(--color-fg-subtle, #495057);
}

#content-cloud .slick-settings-price,
#oneb-createvm .slick-settings-price,
.template_togglebox .slick-settings-price {
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  background: var(--color-bg, #fff);
  padding: 6px 12px;
  border-radius: var(--radius-md);
}

/* ==========================================================================
 * Backup Options Component
 * Extends: .slick-settings-card--muted
 * Used on: createvm.tpl
 * ========================================================================== */

/* Backup type row - selectable option with toggle */
#content-cloud .slick-settings-row,
#oneb-createvm .slick-settings-row,
.template_togglebox .slick-settings-row {
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--color-surface-subtle);
  margin-bottom: 10px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  border: 1px solid var(--color-border-subtle);
  position: relative;
}

#content-cloud .slick-settings-row:last-child,
#oneb-createvm .slick-settings-row:last-child,
.template_togglebox .slick-settings-row:last-child {
  margin-bottom: 0;
}

#content-cloud .slick-settings-row:hover,
#oneb-createvm .slick-settings-row:hover,
.template_togglebox .slick-settings-row:hover {
  background: var(--color-surface-3);
  box-shadow: var(--shadow-sm);
}

/* Frequency rows share one blue edge (a full 1px border, not a side stripe). */
#content-cloud .slick-settings-row--monthly,
#content-cloud .slick-settings-row--weekly,
#content-cloud .slick-settings-row--daily,
#oneb-createvm .slick-settings-row--monthly,
#oneb-createvm .slick-settings-row--weekly,
#oneb-createvm .slick-settings-row--daily,
.template_togglebox .slick-settings-row--monthly,
.template_togglebox .slick-settings-row--weekly,
.template_togglebox .slick-settings-row--daily {
  border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}
#content-cloud .slick-settings-row--monthly:hover,
#content-cloud .slick-settings-row--weekly:hover,
#content-cloud .slick-settings-row--daily:hover,
#oneb-createvm .slick-settings-row--monthly:hover,
#oneb-createvm .slick-settings-row--weekly:hover,
#oneb-createvm .slick-settings-row--daily:hover,
.template_togglebox .slick-settings-row--monthly:hover,
.template_togglebox .slick-settings-row--weekly:hover,
.template_togglebox .slick-settings-row--daily:hover {
  background: var(--color-primary-bg);
}

/* Active state when backup is enabled */
#content-cloud .slick-settings-row.is-active,
#oneb-createvm .slick-settings-row.is-active,
.template_togglebox .slick-settings-row.is-active {
  background: var(--color-bg, #fff);
  box-shadow: var(--shadow-sm);
}
#content-cloud .slick-settings-row--monthly.is-active,
#content-cloud .slick-settings-row--weekly.is-active,
#content-cloud .slick-settings-row--daily.is-active,
#oneb-createvm .slick-settings-row--monthly.is-active,
#oneb-createvm .slick-settings-row--weekly.is-active,
#oneb-createvm .slick-settings-row--daily.is-active,
.template_togglebox .slick-settings-row--monthly.is-active,
.template_togglebox .slick-settings-row--weekly.is-active,
.template_togglebox .slick-settings-row--daily.is-active {
  background: var(--color-selected-bg);
  border-color: var(--color-selected-border);
}

#content-cloud .slick-settings-row-label,
#oneb-createvm .slick-settings-row-label,
.template_togglebox .slick-settings-row-label {
  font-weight: var(--font-weight-600, 600);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-14);
  display: flex;
  align-items: center;
  gap: 8px;
}

#content-cloud .slick-settings-row-controls,
#oneb-createvm .slick-settings-row-controls,
.template_togglebox .slick-settings-row-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Toggle switch styling */
#content-cloud .slick-settings-row-controls label,
#oneb-createvm .slick-settings-row-controls label,
.template_togglebox .slick-settings-row-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--font-size-14);
  transition: all 0.15s ease;
  color: var(--color-fg-muted);
}
#content-cloud .slick-settings-row-controls label:hover,
#oneb-createvm .slick-settings-row-controls label:hover,
.template_togglebox .slick-settings-row-controls label:hover {
  background: rgba(0,0,0,0.04);
}

#content-cloud .slick-settings-row-count,
#oneb-createvm .slick-settings-row-count,
.template_togglebox .slick-settings-row-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border-subtle);
}

#content-cloud .slick-settings-row-count select,
#oneb-createvm .slick-settings-row-count select,
.template_togglebox .slick-settings-row-count select {
  padding: 5px 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-14);
  background: var(--color-bg, #fff);
  font-weight: var(--font-weight-500, 500);
}

/* ==========================================================================
 * SSH Authentication Card Component
 * Extends: .slick-settings-card
 * Used on: createvm.tpl, keys management
 * Animations: sshFadeIn, sshSlideDown (defined in slick-animations.css)
 * ========================================================================== */

/* SSH Auth card - uses shared .slick-settings-card base, these are SSH-specific */

#content-cloud .ssh-auth-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--color-fg-muted);
  font-weight: var(--font-weight-500, 500);
  font-size: var(--font-size-14);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#content-cloud .ssh-auth-tab:hover {
  color: var(--color-link);
  background: var(--brand-primary-bg, rgba(41, 167, 230, 0.05));
}

#content-cloud .ssh-auth-tab.active {
  background: var(--color-bg, #fff);
  color: var(--color-link);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.1));
}

/* Panel switching */
#content-cloud .ssh-auth-panel {
  display: none;
}

#content-cloud .ssh-auth-panel.active {
  display: block;
  animation: sshFadeIn 0.2s ease;
}

#content-cloud .ssh-key-preview {
  margin-top: 12px;
  padding: 12px;
  background: var(--color-surface-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
}

#content-cloud .ssh-key-preview-label {
  font-size: var(--font-size-11);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-050px, 0.5px);
  color: var(--color-fg-subtle-strong, #556274);
  margin-bottom: 6px;
  font-weight: var(--font-weight-500, 500);
}

#content-cloud .ssh-key-preview code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  word-break: break-all;
  display: block;
  line-height: var(--line-height-150, 1.5);
  white-space: pre-wrap;
}

/* New key panel */
#content-cloud .ssh-key-input-wrapper {
  position: relative;
}

#content-cloud .ssh-key-input {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', monospace !important;
  font-size: var(--font-size-14) !important;
  line-height: var(--line-height-150, 1.5);
  resize: vertical;
  min-height: 100px;
}

#content-cloud .ssh-key-format-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--color-fg-muted, #5f676e);
}

#content-cloud .ssh-key-format-hint svg {
  flex-shrink: 0;
}

/* Save option section */
#content-cloud .ssh-save-option {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px dashed var(--color-border-subtle);
}

#content-cloud .ssh-save-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

#content-cloud .ssh-save-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#content-cloud .ssh-checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-strong);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

#content-cloud .ssh-save-checkbox input[type="checkbox"]:checked + .ssh-checkbox-custom {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

#content-cloud .ssh-save-checkbox input[type="checkbox"]:checked + .ssh-checkbox-custom::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

#content-cloud .ssh-save-checkbox input[type="checkbox"]:focus + .ssh-checkbox-custom {
  box-shadow: 0 0 0 3px var(--brand-primary-bg, rgba(41, 167, 230, 0.2));
}

#content-cloud .ssh-checkbox-label {
  font-size: var(--font-size-14);
  color: var(--color-fg-subtle);
}

#content-cloud .ssh-key-name-field {
  margin-top: 12px;
  padding-left: 30px;
  display: none;
}

#content-cloud .ssh-key-name-field.visible {
  display: block;
  animation: sshSlideDown 0.2s ease;
}

#content-cloud .ssh-key-name-field .form-label {
  font-size: var(--font-size-14);
  margin-bottom: 6px;
}

/* ==========================================================================
 * Simple Card Variant (headerless)
 * Used for: VM Details, Security Group sections on createvm.tpl
 * ========================================================================== */

#content-cloud .slick-settings-card--simple,
#oneb-createvm .slick-settings-card--simple,
.template_togglebox .slick-settings-card--simple {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5, 20px);
  margin-bottom: var(--space-4, 16px);
}

/* When sliders are inside a card, reduce extra top margin on first slider */
#content-cloud .slick-settings-card .slider-container:first-of-type,
#oneb-createvm .slick-settings-card .slider-container:first-of-type,
.template_togglebox .slick-settings-card .slider-container:first-of-type {
  margin-top: 0;
}

/* ==========================================================================
 * Pricing Display Component
 * Used on: createvm.tpl, editvm.tpl (metered pricing hero)
 * Migrated from: createvm-modern.css
 * ========================================================================== */

.pricing-display {
    background: linear-gradient(135deg, var(--color-primary-fill) 0%, var(--color-primary-fill-hover) 100%); /* #fff 5.2:1 or better; the brand blue start was 2.7:1 */
    border-radius: var(--radius-xl);
    padding: 24px;
    color: var(--color-fg-inverse, #fff);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

.price-breakdown {
    margin-top: 20px;
}

.breakdown-toggle {
    color: var(--color-fg-inverse, #fff);
    text-decoration: none;
    opacity: 0.9;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--overlay-white-10, rgba(255,255,255,0.1));
    border-radius: 8px;
    transition: background 0.3s ease;
}

.breakdown-toggle:hover {
    background: var(--overlay-white-20, rgba(255,255,255,0.2));
    color: var(--color-fg-inverse, #fff);
    text-decoration: none;
}

.breakdown-content {
    background: var(--overlay-white-10, rgba(255,255,255,0.1));
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 15px;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.breakdown-content table {
    width: 100%;
    color: var(--color-fg-inverse, #fff);
}

.breakdown-content td {
    padding: 8px;
    border-bottom: 1px solid var(--border-subtle-inverse, rgba(255,255,255,0.1));
}

.breakdown-content tr:last-child td {
    border-bottom: none;
}

.breakdown-content td:last-child {
    text-align: right;
    font-weight: var(--font-weight-700, 700);
}

/* Pricing breakdown row hover */
.pricing-display .breakdown-content tbody tr:hover,
.pricing-display .breakdown-content tbody tr:hover td,
.pricing-display .breakdown-content tbody tr:hover > td {
    background-color: var(--brand-primary-bg, rgba(41, 167, 230, 0.08)) !important;
    background-image: none !important;
    color: inherit !important;
    transition: background-color .15s ease-in-out;
}

.price-updating { animation: none; }

/* ==========================================================================
 * Floating Price Indicator - Bottom bar variant
 * Used on: createvm.tpl (metered pricing)
 * Confined to module viewport via JS positioning
 * ========================================================================== */

.price-float {
  position: fixed;
  bottom: 0;
  z-index: 1050;

  /* Width/position set by JS to match .content-bar */
  /* Fallback: centered with max-width */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;

  /* Bottom bar design */
  background: linear-gradient(135deg, var(--color-primary-fill) 0%, var(--color-primary-fill-hover) 100%); /* #fff 5.2:1 or better; the brand blue start was 2.7:1 */
  padding: 12px 24px;
  color: var(--color-fg-inverse, #fff);
  box-shadow: var(--shadow-sticky);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;

  /* Horizontal layout */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .price-float {
    padding: 10px 16px;
    gap: 12px;
  }
}

/* ==========================================================================
 * Slider System Components
 * Used on: createvm.tpl, editvm.tpl, disks.tpl
 * Migrated from: createvm-modern.css
 * ========================================================================== */

.slider-wrapper,
.resource-slider {
    --track-h: clamp(6px, 0.6vw, 8px);
    --thumb: clamp(16px, 2.2vw, 24px);
    --thumb-offset: calc(var(--thumb) / 2);
}

.slider-container {
    margin: 20px 0;
    position: relative;
}

.slider-container .slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.slider-container .slider-label .label-text {
    font-weight: var(--font-weight-500, 500);
    color: var(--color-fg-subtle, #333);
}

.slider-container .slider-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-container .slider-value input[type="number"] {
    width: clamp(64px, 10vw, 96px);
    padding: 8px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-weight: var(--font-weight-600, 600);
    text-align: center;
    transition: border-color 0.3s ease;
}

.slider-container .slider-value input[type="number"]:focus {
    outline: 2px solid var(--focus-outline);
    outline-offset: -1px;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--shadow-focus-ring, rgba(41, 167, 230, 0.1));
}

/* The compiled `input { background-color: #fff }` has no dark counterpart for
   inputs without .form-control, so the value field stayed white under light
   text and the focus outline. :where keeps page-level rules (Create VM) in
   charge of their own surface. */
/* Kept: removing it changes input.storage-display-input background-color #1e293b -> #0f172a on OpenNebula disks. */
html[data-theme="dark"] :where(.slider-container .slider-value) input[type="number"] {
    background-color: var(--color-surface, #1e293b);
    color: var(--color-fg, #e2e8f0);
}

.slider-container .slider-unit {
    color: var(--color-fg-muted, #64748b);
    font-weight: var(--font-weight-500, 500);
}

.resource-slider {
    --track-h: clamp(6px, 0.6vw, 8px);
    --thumb: clamp(16px, 2.2vw, 24px);
    --thumb-offset: calc(var(--thumb) / 2);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--thumb);
    border-radius: 4px;
    background: transparent !important;
    background-image: none !important;
    background-size: 0 0 !important;
    background-origin: initial !important;
    background-clip: initial !important;
    outline: none;
    padding: 0 max(calc(var(--thumb) / 2), 2%);
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: var(--thumb);
    background: transparent;
    border-radius: 4px;
    margin: 20px 0 12px 0;
    overflow: visible;
    display: flex;
    align-items: center;
}

.slider-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--padL, 0px);
    right: var(--padR, 0px);
    height: var(--track-h, 8px);
    background: var(--color-surface-2, #e2e8f0);
    border-radius: 4px;
    transform: translateY(-50%);
    z-index: 0;
}

.slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--track-h, 8px);
    transform: translateY(-50%);
    background: linear-gradient(90deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
    width: 0;
}

/* WebKit browsers */
.resource-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--track-h);
    cursor: pointer;
    background: transparent !important;
    border-radius: 4px;
}

.resource-slider:hover,
.resource-slider:focus,
.resource-slider:active,
.slider-container .resource-slider:hover,
.slider-container .resource-slider:focus {
    background: transparent !important;
    background-image: none !important;
    background-size: 0 0 !important;
    background-origin: initial !important;
    background-clip: initial !important;
}

.resource-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: var(--thumb);
    width: var(--thumb);
    border-radius: 50%;
    background: var(--color-bg, #fff);
    border: 3px solid var(--brand-primary);
    cursor: pointer;
    box-shadow: var(--shadow-control);
    position: relative;
    z-index: 3;
    margin-top: calc((var(--track-h) - var(--thumb)) / 2);
}

.resource-slider::-webkit-slider-thumb:hover {
    box-shadow: var(--shadow-md);
}

.resource-slider::-webkit-slider-thumb:active {
    transform: scale(0.95);
}

/* Firefox */
.resource-slider::-moz-range-track {
    width: 100%;
    height: var(--track-h);
    cursor: pointer;
    background: transparent;
    border-radius: 4px;
    border: none;
}

.resource-slider::-moz-range-progress {
    height: var(--track-h);
    background: transparent;
    border-radius: 4px;
}

.resource-slider::-moz-range-thumb {
    height: var(--thumb);
    width: var(--thumb);
    border-radius: 50%;
    background: var(--color-bg, #fff);
    border: 3px solid var(--brand-primary);
    cursor: pointer;
    box-shadow: var(--shadow-control);
}

/* IE/Edge fallback */
.resource-slider::-ms-track {
    width: 100%;
    height: var(--track-h);
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.resource-slider::-ms-fill-lower { background: transparent; border-radius: 4px; }
.resource-slider::-ms-fill-upper { background: transparent; border-radius: 4px; }

.resource-slider:focus {
    outline: none;
}

.resource-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--focus-ring-strong, rgba(41, 167, 230, 0.3));
}

.slider-container[data-focused="true"] {
    background: transparent;
    border: none;
}

.slider-container .slider-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Storage value variant */
.slider-container .slider-value--storage { gap: 8px; }
.storage-display-input { width: clamp(72px, 11vw, 108px); }
.storage-display-input--tb { letter-spacing: 0.01em; }

/* Storage unit toggle (GB/TB) */
.storage-unit-toggle {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--color-fg-strong, #0f172a) 18%, transparent);
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-bg-elevated, #fff);
}
.storage-unit-btn {
    min-width: 38px;
    padding: 4px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-fg-muted, #475569);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.storage-unit-btn + .storage-unit-btn {
    border-left: 1px solid color-mix(in srgb, var(--color-fg-strong, #0f172a) 12%, transparent);
}
.storage-unit-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand-primary) 10%, var(--color-bg-elevated, #fff));
    color: var(--color-fg-strong, #1e293b);
}
.storage-unit-btn--active {
    background: var(--brand-primary);
    color: var(--color-fg-inverse, #fff);
}
.storage-unit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Coarse pointers: the buttons widen to 44px so neighbouring hit areas
   (.slick-hit-area recipe above) do not overlap. The group clips its
   children, which would cut the hit areas off; let them escape and keep the
   rounded ends on the buttons themselves. */
@media (pointer: coarse) {
    .storage-unit-btn { min-width: var(--touch-target-min); }
    .storage-unit-toggle { overflow: visible; }
    .storage-unit-btn:first-child { border-radius: calc(var(--radius-md) - 1px) 0 0 calc(var(--radius-md) - 1px); }
    .storage-unit-btn:last-child { border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0; }
}

/* Stepper row: - [slider] + */
.slider-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px 0;
}
.slider-stepper .slider-wrapper {
    flex: 1;
    margin: 0;
}
.slider-step-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-bg-elevated, #fff);
    color: var(--color-fg-strong, #1e293b);
    font-size: var(--font-size-18);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    user-select: none;
    line-height: 1;
    padding: 0;
}
.slider-step-btn:hover {
    background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
    border-color: var(--brand-primary);
}
.slider-step-btn:active {
    background: var(--brand-primary-bg, rgba(41, 167, 230, 0.15));
}
.slider-step-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.slider-step-btn:disabled:hover {
    background: var(--color-bg-elevated, #fff);
    border-color: var(--color-border, #e2e8f0);
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .resource-slider {
        background: transparent;
        border: 2px solid var(--color-fg-strong);
    }

    .resource-slider::-webkit-slider-thumb {
        background: var(--color-bg, #fff);
        border: 3px solid var(--color-fg-strong);
    }
}

/* Responsive slider tweaks */
@media (max-width: 1199px) {
    .resource-slider {
        padding: 0 max(calc(var(--thumb) / 2), 3%);
        --thumb: clamp(16px, 2.6vw, 22px);
    }
}

@media (max-width: 993px) {
    .resource-slider { --track-h: clamp(6px, 1vw, 8px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .resource-slider::-webkit-slider-thumb {
        transition: none;
    }

    .resource-slider::-webkit-slider-thumb:active {
        transform: none;
    }
}

/* ==========================================================================
 * Form Field Components
 * Used on: createvm.tpl, editvm.tpl
 * Migrated from: createvm-modern.css
 * ========================================================================== */

.field-validation {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.field-validation.valid {
    color: var(--color-success-strong);
}

.field-validation.invalid {
    color: var(--color-danger-strong);
}

.field-validation.warning {
    color: var(--color-warning-strong);
}

.field-validation i {
    font-size: 1rem;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: var(--font-weight-500, 500);
    color: var(--color-fg-strong, #1e293b);
}

.form-label.required::after {
    content: ' *';
    color: var(--color-danger-strong);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: 2px solid var(--focus-outline);
    outline-offset: -1px;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--shadow-focus-ring, rgba(41, 167, 230, 0.1));
}

.form-input.valid {
    border-color: var(--brand-success, #2DC76B);
}

.form-input.invalid {
    border-color: var(--brand-danger, #D9252E);
}

.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--color-bg, #fff);
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-select:focus {
    outline: 2px solid var(--focus-outline);
    outline-offset: -1px;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--shadow-focus-ring, rgba(41, 167, 230, 0.1));
}

/* ==========================================================================
 * Submit Button Component
 * Used on: createvm.tpl
 * Migrated from: createvm-modern.css
 * ========================================================================== */

.submit-container {
    margin: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ==========================================================================
 * Creation Status Component
 * Used on: VM creation polling (HtmxStatusEndpointsTrait)
 * Migrated from: createvm-modern.css
 * ========================================================================== */

.creation-status {
    background: var(--color-bg, #fff);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin: 20px 0;
    box-shadow: var(--shadow-sm);
}

.status-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.status-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.status-icon.success {
    background: var(--brand-success, #10b981);
    color: var(--color-fg-inverse, #fff);
    animation: none;
}

.status-icon.error {
    background: var(--brand-danger, #ef4444);
    color: var(--color-fg-inverse, #fff);
    animation: none;
}

.status-text {
    flex: 1;
}

.status-title {
    font-size: 1.25rem;
    font-weight: var(--font-weight-600, 600);
    color: var(--color-fg-strong, #1e293b);
    margin-bottom: 4px;
}

.status-message {
    color: var(--color-fg-muted, #64748b);
}

.status-progress {
    height: 8px;
    background: var(--color-surface-2, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
}

.status-progress-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    border-radius: 4px;
    transform-origin: left center;
    animation: one-progress-fill 2s ease-in-out infinite;
}

/* Scales instead of animating width, so the loop never triggers layout. */
@keyframes one-progress-fill {
    0% { transform: scaleX(0); }
    50% { transform: scaleX(.7); }
    100% { transform: scaleX(1); }
}

/* Responsive Design */
@media (max-width: 767px) {
    .price-main {
        font-size: 2rem;
    }

    .submit-container {
        flex-direction: column;
        gap: 15px;
    }
}

/* ==========================================================================
 * Shared layout components (toolbar, tabs, banners, empty states)
 * ========================================================================== */
#content-cloud .slick-settings-subtitle, .template_togglebox .slick-settings-subtitle {
  margin: 4px 0 14px;
  color: var(--color-fg-muted);
  font-size: var(--font-size-15);
}

#content-cloud .slick-settings-footer, .template_togglebox .slick-settings-footer {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

#content-cloud .slick-page-toolbar, .template_togglebox .slick-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  position: relative;
  z-index: 5;
}
#content-cloud .slick-page-toolbar.is-sticky, .template_togglebox .slick-page-toolbar.is-sticky {
  position: sticky;
  top: var(--sticky-top-offset, 64px);
}
#content-cloud .slick-page-toolbar__left,
#content-cloud .slick-page-toolbar__right,
.template_togglebox .slick-page-toolbar__left,
.template_togglebox .slick-page-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#content-cloud .slick-page-toolbar .search-container, .template_togglebox .slick-page-toolbar .search-container { margin: 0; }
#content-cloud .slick-page-toolbar .search-bar, .template_togglebox .slick-page-toolbar .search-bar { flex-wrap: wrap; }
#content-cloud .slick-page-toolbar .search-input-wrapper, .template_togglebox .slick-page-toolbar .search-input-wrapper { max-width: 420px; }

#content-cloud .slick-filter-tabs, .template_togglebox .slick-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
#content-cloud .slick-filter-tabs li, .template_togglebox .slick-filter-tabs li { margin: 0; }
#content-cloud .slick-filter-tabs--stretch li, .template_togglebox .slick-filter-tabs--stretch li { flex: 1; }
#content-cloud .slick-filter-tab, .template_togglebox .slick-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg, #fff);
  color: var(--color-fg-subtle);
  font-weight: var(--font-weight-600, 600);
  transition: all .15s ease;
  text-decoration: none;
}
/* Tabs rendered as <button> (single-select radiogroups) keep the tab typography. */
#content-cloud button.slick-filter-tab, .template_togglebox button.slick-filter-tab {
  font: inherit;
  font-size: var(--font-size-14, 14px);
  font-weight: var(--font-weight-600, 600);
  cursor: pointer;
}
#content-cloud .slick-filter-tab:hover, .template_togglebox .slick-filter-tab:hover {
  color: var(--color-primary-strong);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
}
#content-cloud .slick-filter-tab:focus-visible, .template_togglebox .slick-filter-tab:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}
#content-cloud .slick-filter-tab--active, .template_togglebox .slick-filter-tab--active {
  background: var(--brand-primary-bg);
  color: var(--color-link);
  border-color: var(--brand-primary);
}
/* An inverted chip: the strongest foreground as the fill, the page colour
   as the text, so it inverts with the theme. */
#content-cloud .slick-filter-tab .tab-count, .template_togglebox .slick-filter-tab .tab-count {
  background: var(--color-fg-strong);
  color: var(--color-bg);
  border-radius: var(--radius-pill);
  padding: 2px 6px;
  font-size: var(--slick-font-xs);
}

@media (max-width: 767px) {
  #content-cloud .slick-filter-tabs--stretch li, .template_togglebox .slick-filter-tabs--stretch li { flex: 1 1 48%; }
  #content-cloud .slick-filter-tab, .template_togglebox .slick-filter-tab { width: 100%; justify-content: space-between; }
}

/* --scroll-narrow: below the desktop layout the tabs stay one row that scrolls
   sideways instead of wrapping or stretching to full width. For long category
   lists (8+ tabs) where stacked tabs would push the content below the fold. */
@media (max-width: 767px) {
  #content-cloud .slick-filter-tabs--scroll-narrow, .template_togglebox .slick-filter-tabs--scroll-narrow {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-1, 4px);
    /* The strip scrolls sideways: fade the trailing edge so a cut-off tab
       reads as "more", and pad the end so the last tab can scroll clear of
       the fade. Only the mask's alpha matters. */
    padding-right: var(--space-6);
    mask-image: linear-gradient(to right, var(--color-fg) calc(100% - var(--space-6)), transparent);
    scrollbar-width: thin;
  }
  #content-cloud .slick-filter-tabs--scroll-narrow > *, .template_togglebox .slick-filter-tabs--scroll-narrow > * { flex: 0 0 auto; }
  #content-cloud .slick-filter-tabs--scroll-narrow .slick-filter-tab, .template_togglebox .slick-filter-tabs--scroll-narrow .slick-filter-tab { width: auto; justify-content: flex-start; }
}

#content-cloud .slick-info-banner, .template_togglebox .slick-info-banner {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  align-items: flex-start;
  border: 1px solid;
}
#content-cloud .slick-info-banner__icon i, .template_togglebox .slick-info-banner__icon i { font-size: 1.25rem; }
#content-cloud .slick-info-banner__title, .template_togglebox .slick-info-banner__title { font-weight: var(--font-weight-700, 700); margin-bottom: 2px; }
#content-cloud .slick-info-banner__message, .template_togglebox .slick-info-banner__message { color: var(--color-fg-subtle); line-height: var(--line-height-145, 1.45); }
#content-cloud .slick-info-banner__actions, .template_togglebox .slick-info-banner__actions { margin-left: auto; display: flex; gap: 8px; align-self: center; }

#content-cloud .slick-empty-state, .template_togglebox .slick-empty-state {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: 26px;
  text-align: center;
  background: var(--color-surface, #f8fafc);
  color: var(--color-fg-subtle);
}
#content-cloud .slick-empty-state--tight, .template_togglebox .slick-empty-state--tight { padding: 16px; }
#content-cloud .slick-empty-state__icon i, .template_togglebox .slick-empty-state__icon i { font-size: var(--font-size-24); color: var(--color-fg-muted); }
#content-cloud .slick-empty-state__title, .template_togglebox .slick-empty-state__title { font-weight: var(--font-weight-700, 700); margin-top: 6px; }
#content-cloud .slick-empty-state__message, .template_togglebox .slick-empty-state__message { margin-top: 4px; color: var(--color-fg-muted); }
#content-cloud .slick-empty-state__cta, .template_togglebox .slick-empty-state__cta { margin-top: 10px; }

#content-cloud .field-validation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--slick-font-sm);
}
/* State text uses the -strong tokens (4.5:1 on the tint in both themes). */
#content-cloud .field-validation--success { background: var(--brand-success-bg); color: var(--color-success-strong); }
#content-cloud .field-validation--warning { background: var(--brand-warning-bg); color: var(--color-warning-strong); }
#content-cloud .field-validation--error { background: var(--brand-danger-bg); color: var(--color-danger-strong); }

#content-cloud .backup-schedule-component.is-disabled {
  opacity: .6;
  pointer-events: none;
}

/* ==========================================================================
 * Cloud Module Shared Primitives (OpenNebula compat)
 * Migrated from OpenNebula module CSS to keep the design system canonical.
 * ========================================================================== */

/* Text helpers (prefer these over inline style="color: ...") */
#content-cloud .slick-text-muted, .template_togglebox .slick-text-muted { color: var(--color-fg-muted, #6c757d) !important; }
#content-cloud .slick-text-subtle, .template_togglebox .slick-text-subtle { color: var(--color-fg-subtle, #495057) !important; }

/* Legacy aliases: OpenNebula templates still use these classnames */
#content-cloud .oneb-text-muted { color: var(--color-fg-muted, #6c757d) !important; }
#content-cloud .oneb-text-muted-soft { color: var(--color-fg-subtle, #495057) !important; }

#content-cloud .oneb-link-like {
  cursor: pointer;
  color: var(--color-link);
  text-decoration: none;
}
#content-cloud .oneb-link-like:hover { text-decoration: underline; }
#content-cloud .oneb-link-like:focus-visible {
  outline: 2px solid var(--focus-outline);
  outline-offset: 2px;
}

/* Basic utilities */
.oneb-hidden,
#content-cloud .oneb-hidden,
#content-cloud .slick-hidden { display: none; }

.oneb-hidden-form,
#content-cloud .oneb-hidden-form { display: none !important; }

#content-cloud .oneb-nowrap,
#content-cloud .slick-nowrap { white-space: nowrap; }

#content-cloud .oneb-inline-form { display: inline; margin: 0; }
#content-cloud .oneb-form-reset { margin: 0; }

#content-cloud .oneb-text-right { text-align: right; }

#content-cloud .oneb-mt-4, .template_togglebox .oneb-mt-4 { margin-top: 4px; }
#content-cloud .oneb-mt-5, .template_togglebox .oneb-mt-5 { margin-top: var(--space-1, 4px); }
#content-cloud .oneb-mt-6, .template_togglebox .oneb-mt-6 { margin-top: 6px; }
#content-cloud .oneb-mt-20, .template_togglebox .oneb-mt-20 { margin-top: 20px; }
#content-cloud .oneb-mt-4.oneb-form-actions, .template_togglebox .oneb-mt-4.oneb-form-actions { margin-top: var(--space-4, 16px); }
#content-cloud .oneb-mb-8, .template_togglebox .oneb-mb-8 { margin-bottom: 8px; }
#content-cloud .oneb-mb-12, .template_togglebox .oneb-mb-12 { margin-bottom: 12px; }
#content-cloud .oneb-mb-16, .template_togglebox .oneb-mb-16 { margin-bottom: 16px; }
#content-cloud .oneb-mb-20, .template_togglebox .oneb-mb-20 { margin-bottom: 20px; }

#content-cloud .oneb-ml-2 { margin-left: var(--space-2, 8px); }
#content-cloud .oneb-ml-8 { margin-left: 8px; }

#content-cloud .oneb-py-2 {
  padding-top: var(--space-2, 8px);
  padding-bottom: var(--space-2, 8px);
}

#content-cloud .oneb-inline-flex {
  display: inline-flex;
  align-items: center;
}

#content-cloud .oneb-flex {
  display: flex;
}

#content-cloud .oneb-flex-wrap {
  flex-wrap: wrap;
}

#content-cloud .oneb-justify-between {
  justify-content: space-between;
}

#content-cloud .oneb-justify-end {
  justify-content: flex-end;
}

#content-cloud .oneb-items-center {
  align-items: center;
}

#content-cloud .oneb-items-start {
  align-items: flex-start;
}

#content-cloud .oneb-gap-8 {
  gap: 8px;
}

#content-cloud .oneb-gap-10 {
  gap: 10px;
}


#content-cloud .oneb-ml-auto {
  margin-left: auto;
}

#content-cloud .oneb-spin {
  animation: one-spin 1s linear infinite;
  display: inline-block;
}

#content-cloud .oneb-dismiss-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-fg-muted, #64748b);
  line-height: var(--line-height-100, 1);
  font-size: 18px;
}

#content-cloud .oneb-context-card {
  border-radius: var(--radius-sm);
  padding: 15px;
  margin-bottom: 20px;
  background: var(--color-primary-bg);
  border: 1px solid color-mix(in srgb, var(--color-primary-border) 35%, transparent);
}

#content-cloud .oneb-context-card--md {
  max-width: 700px;
  width: 100%;
}

#content-cloud .oneb-context-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#content-cloud .oneb-context-card__stack {
  display: flex;
  flex-direction: column;
}

#content-cloud .oneb-context-card__title {
  color: var(--color-link);
  margin-bottom: 5px;
  font-weight: var(--font-weight-700, 700);
}

#content-cloud .oneb-context-card__body {
  margin: 0;
  color: var(--color-fg-muted, #666);
}

#content-cloud .oneb-context-card__cta {
  text-decoration: none;
  white-space: nowrap;
}

#content-cloud .oneb-context-card--warning {
  background: var(--brand-warning-bg, #fff3cd);
  border-color: var(--color-warning, #ffc107);
}

#content-cloud .oneb-context-card--warning .oneb-context-card__title,
#content-cloud .oneb-context-card--warning .oneb-context-card__body {
  color: var(--color-warning-strong, #92400e);
}

#content-cloud .oneb-context-card--soft-info {
  background: var(--color-surface-2, #f1f5f9);
  border-left-color: var(--brand-info, #17a2b8);
}

#content-cloud .oneb-nav-icon-btn {
  margin-left: 4px;
  padding: 0 4px;
  line-height: var(--line-height-100, 1);
  vertical-align: middle;
}

#content-cloud .oneb-nav-warning-btn {
  margin-left: 6px;
  padding: 0 4px;
  line-height: var(--line-height-100, 1);
  vertical-align: middle;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-warning-strong); /* the brand amber icon was 2.2:1 */
}

#content-cloud .oneb-nav-warning-btn i {
  font-size: 24px;
  line-height: var(--line-height-100, 1);
}

#content-cloud .oneb-service-switcher {
  margin-left: 8px;
}

#content-cloud .oneb-overflow-hidden {
  overflow: hidden;
}

#content-cloud .oneb-page-breadcrumb {
  margin-bottom: 16px;
}

#content-cloud .oneb-page-breadcrumb__meta {
  margin-left: 8px;
}

#content-cloud .oneb-sg-tips__header {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

#content-cloud .oneb-inline-tooltip-icon {
  color: var(--color-icon-accent);
  margin-left: 4px;
  vertical-align: middle;
}

@media (max-width: 767px) {
  #content-cloud .oneb-context-card__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Table/layout helpers */
#content-cloud .oneb-col-date { width: 250px; }
#content-cloud .oneb-col-actions { width: 100px; }

#content-cloud .oneb-hidden-panel { display: none; margin-top: 12px; }
#content-cloud .oneb-table-hidden { display: none; }
#content-cloud .oneb-table-spaced { margin: 10px 0; }
#content-cloud .oneb-table-reset { margin-top: 0 !important; }

#content-cloud .oneb-table-row-muted { background: var(--color-surface-3, #fafbfc); }

#content-cloud .oneb-field-spacer { height: 8px; }
#content-cloud .oneb-section-spaced { margin-top: 40px; }

#content-cloud .oneb-alias-row {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

#content-cloud .oneb-inline-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#content-cloud .oneb-vm-link-wrap { margin-bottom: 4px; }
#content-cloud .oneb-vm-link { text-decoration: none; }
#content-cloud .oneb-italic-muted { font-style: italic; }

#content-cloud .oneb-overlay-card--centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  min-width: 400px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}
#content-cloud .oneb-overlay-intro { margin-bottom: 20px; }

#content-cloud .oneb-vm-inline-link {
  text-decoration: none;
  margin-right: 8px;
  display: inline-block;
}
#content-cloud .oneb-vm-inline-link__arrow { margin-right: 3px; }

#content-cloud .oneb-vm-status-shell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 0 0;
  margin: 0;
  background: transparent;
  overflow: visible;
}

#content-cloud .oneb-scroll-y-md { max-height: 400px; overflow-y: auto; }
#content-cloud .oneb-skeleton-sm { height: 24px; }

#content-cloud .oneb-empty-note {
  margin: 0;
  color: var(--color-fg-muted, #6c757d);
  font-style: italic;
}

#content-cloud .oneb-select-wrap, .template_togglebox .oneb-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 520px;
}

#content-cloud .oneb-network-warning {
  display: none;
  margin-left: 10px;
  color: var(--color-warning-strong);
  font-weight: var(--font-weight-600, 600);
}
#content-cloud .oneb-network-warning i { margin-right: 4px; font-size: 18px; vertical-align: middle; }

/* Settings card tone helpers (used by OpenNebula settings_card.tpl) */
#content-cloud .oneb-settings-tone--info { border-color: var(--brand-info, #0EA5E9); }
#content-cloud .oneb-settings-tone--success { border-color: var(--brand-success, #2DC76B); }
#content-cloud .oneb-settings-tone--warning { border-color: var(--brand-warning, #F59E0B); }
#content-cloud .oneb-settings-tone--danger { border-color: var(--brand-danger, #D9252E); }

/* Copy to clipboard helpers (used across OpenNebula tables) */
#content-cloud .ip-address {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease-out;
  white-space: nowrap;
}
#content-cloud .ip-address:hover { background-color: var(--color-surface-2, #e9ecef); }
#content-cloud .copy-icon {
  display: inline !important;
  line-height: var(--line-height-100, 1);
  transition: color 0.2s ease-out;
  vertical-align: middle;
}
#content-cloud .ip-address:hover .copy-icon { color: var(--color-icon-accent) !important; }

/* Form field primitives (module-local markup, theme-owned styling) */
#content-cloud .oneb-field-group, .template_togglebox .oneb-field-group { margin-bottom: var(--space-5, 20px); }

#content-cloud .oneb-field-label, .template_togglebox .oneb-field-label {
  font-weight: var(--font-weight-700, 700);
  display: block;
  margin-bottom: var(--space-1, 4px);
  color: var(--color-fg-strong, #111827);
}

/* Grouped controls (radio and checkbox sets): a fieldset without UA chrome.
   The legend carries the field-label class it uses elsewhere; :where() keeps
   this reset below that class so its font and spacing win. */
#content-cloud .oneb-fieldset, .template_togglebox .oneb-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#content-cloud :where(.oneb-fieldset > legend),
.template_togglebox :where(.oneb-fieldset > legend) {
  display: block;
  float: none;
  width: auto;
  max-width: 100%;
  margin-bottom: var(--space-1, 4px);
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

#content-cloud .oneb-required { color: var(--color-danger-strong); }

#content-cloud .oneb-input,
#content-cloud .oneb-select,
#content-cloud .oneb-textarea,
.template_togglebox .oneb-input,
.template_togglebox .oneb-select,
.template_togglebox .oneb-textarea {
  width: 100%;
  max-width: 400px;
  padding: var(--space-2, 8px);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  background: var(--color-bg, #fff);
  color: var(--color-fg, #212529);
}

#content-cloud .oneb-input:focus,
#content-cloud .oneb-select:focus,
#content-cloud .oneb-textarea:focus,
.template_togglebox .oneb-input:focus,
.template_togglebox .oneb-select:focus,
.template_togglebox .oneb-textarea:focus {
  outline: 2px solid var(--focus-outline);
  outline-offset: -1px;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--shadow-focus-ring, rgba(41, 167, 230, 0.1));
}

#content-cloud .oneb-input--full,
#content-cloud .oneb-select--full,
#content-cloud .oneb-textarea--full,
.template_togglebox .oneb-input--full,
.template_togglebox .oneb-select--full,
.template_togglebox .oneb-textarea--full { max-width: 100%; }

#content-cloud .oneb-input--sm, .template_togglebox .oneb-input--sm { max-width: 360px; }
#content-cloud .oneb-input--lg, .template_togglebox .oneb-input--lg { max-width: 520px; }

/* Helper text */
#content-cloud .oneb-help-text, .template_togglebox .oneb-help-text {
  font-size: var(--font-size-sm, 12px);
  color: var(--color-fg-muted, #6c757d);
}
#content-cloud .oneb-help-text--muted, .template_togglebox .oneb-help-text--muted { color: var(--color-fg-muted, #6c757d); }
/* Tone text uses the -strong tokens (4.5:1 or better in both themes); the
   brand hues measured 2.0-2.1:1 light and 3.5:1 dark red. */
#content-cloud .oneb-help-text--error, .template_togglebox .oneb-help-text--error { color: var(--color-danger-strong); }
#content-cloud .oneb-help-text--success, .template_togglebox .oneb-help-text--success { color: var(--color-success-strong); }
#content-cloud .oneb-help-text--warning, .template_togglebox .oneb-help-text--warning { color: var(--color-warning-strong); }

/* Tooltip trigger (used by portal tooltip JS) */
#content-cloud .oneb-tooltip-wrap { display: inline-block; position: relative; }
#content-cloud .oneb-tooltip-trigger, .template_togglebox .oneb-tooltip-trigger {
  cursor: help;
  color: var(--color-icon-accent);
  vertical-align: super;
}
#content-cloud .oneb-tooltip-inline, .template_togglebox .oneb-tooltip-inline { display: inline-flex; align-items: center; }
#content-cloud .oneb-tooltip-inline-icon, .template_togglebox .oneb-tooltip-inline-icon { color: var(--color-icon-accent); margin-left: 4px; vertical-align: middle; }

/* Semantic volume/image type coloring */
#content-cloud .oneb-type-root { color: var(--color-success-strong); }
#content-cloud .oneb-type-iso { color: var(--color-info-strong); }
#content-cloud .oneb-type-data { color: var(--color-link); }
/* The violet category hue pulled toward the strongest foreground: darker
   in light (about #5C30B2, 8.3:1 on #fff), lighter in dark (about #BFACFB,
   8.9:1 on the page, 5.2:1 on a hovered #334155 row). The plain purple was
   2.7:1 in dark. */
#content-cloud .oneb-type-kernel { color: color-mix(in srgb, var(--cat-4) 70%, var(--color-fg-strong)); }
#content-cloud .oneb-type-ramdisk { color: var(--color-warning-strong); }
#content-cloud .oneb-type-context { color: color-mix(in srgb, var(--color-info-strong) 70%, var(--color-success-strong)); }
#content-cloud .oneb-type-muted { color: var(--color-fg-muted, #6c757d); }

/* Volume type chip: OS, ISO and Data each get their own status tone, so the
   three read apart in tables, cards and body-level modals alike. Class-only
   selectors on purpose: the bulk "Change type" modal renders outside
   #content-cloud. The tone tokens carry their own dark-mode values. */
.oneb-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--color-muted-border);
  border-radius: 4px;
  background: var(--color-muted-bg);
  color: var(--color-muted-strong);
  font-size: .75rem;
  font-weight: var(--font-weight-600, 600);
  line-height: 1.4;
  white-space: nowrap;
}
.oneb-type-chip__icon { font-size: 14px; line-height: 1; }
.oneb-type-chip--root {
  border-color: color-mix(in srgb, var(--color-success-border) 45%, transparent);
  background: var(--color-success-bg);
  color: var(--color-success-strong);
}
.oneb-type-chip--iso {
  border-color: color-mix(in srgb, var(--color-warning-border) 45%, transparent);
  background: var(--color-warning-bg);
  color: var(--color-warning-strong);
}
.oneb-type-chip--data {
  border-color: color-mix(in srgb, var(--color-primary-border) 45%, transparent);
  background: var(--color-primary-bg);
  color: var(--color-primary-strong);
}

/* Dropdown item disabled state */
#content-cloud .oneb-dropdown-item-disabled {
  color: var(--color-fg-muted, #6c757d);
  cursor: not-allowed;
  opacity: 0.65;
}

/* Radio row helper */
#content-cloud .oneb-radio-row, .template_togglebox .oneb-radio-row { display: flex; gap: 20px; margin-bottom: var(--space-2, 8px); }
#content-cloud .oneb-radio-option, .template_togglebox .oneb-radio-option { display: inline-flex; align-items: center; gap: var(--space-1, 4px); }

/* Simple list helper */
#content-cloud .oneb-list { margin: 5px 0 0 20px; padding: 0; }

/* Form actions (used heavily by shared Smarty partials) */
#content-cloud .oneb-form-actions, .template_togglebox .oneb-form-actions {
  display: flex;
  gap: var(--space-2, 8px);
  align-items: center;
  flex-wrap: wrap;
}
#content-cloud .oneb-form-actions--left, .template_togglebox .oneb-form-actions--left { justify-content: flex-start; }
#content-cloud .oneb-form-actions--right, .template_togglebox .oneb-form-actions--right { justify-content: flex-end; }
#content-cloud .oneb-form-actions--between, .template_togglebox .oneb-form-actions--between { justify-content: space-between; }

#content-cloud .oneb-form-actions__primary,
#content-cloud .oneb-form-actions__secondary,
.template_togglebox .oneb-form-actions__primary,
.template_togglebox .oneb-form-actions__secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}

#content-cloud .oneb-form-actions--equal .oneb-form-actions__primary,
#content-cloud .oneb-form-actions--equal .oneb-form-actions__secondary,
.template_togglebox .oneb-form-actions--equal .oneb-form-actions__primary,
.template_togglebox .oneb-form-actions--equal .oneb-form-actions__secondary { flex: 1 1 0; }

#content-cloud .oneb-form-actions--equal .oneb-form-actions__primary .slick-btn,
#content-cloud .oneb-form-actions--equal .oneb-form-actions__secondary .slick-btn,
.template_togglebox .oneb-form-actions--equal .oneb-form-actions__primary .slick-btn,
.template_togglebox .oneb-form-actions--equal .oneb-form-actions__secondary .slick-btn {
  flex: 1 1 0;
  justify-content: center;
}

/* Action row helper */
#content-cloud .oneb-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

#content-cloud .oneb-action-row--equal > * { flex: 1 1 0; }
#content-cloud .oneb-action-row--equal > .slick-btn,
#content-cloud .oneb-action-row--equal > a.slick-btn { text-align: center; justify-content: center; }

/* Panels */
#content-cloud .oneb-info-panel, .template_togglebox .oneb-info-panel {
  padding: var(--space-3, 12px);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-sm);
  margin-top: var(--space-2, 8px);
  background: var(--color-bg, #fff);
}
#content-cloud .oneb-info-panel__title, .template_togglebox .oneb-info-panel__title { font-weight: var(--font-weight-700, 700); margin-bottom: 6px; }
#content-cloud .oneb-info-panel__actions, .template_togglebox .oneb-info-panel__actions { margin-top: var(--space-2, 8px); }
#content-cloud .oneb-info-panel--info, .template_togglebox .oneb-info-panel--info { background: var(--brand-info-bg, rgba(14, 165, 233, 0.08)); border-color: var(--brand-info, #0EA5E9); }
#content-cloud .oneb-info-panel--success, .template_togglebox .oneb-info-panel--success { background: var(--brand-success-bg, rgba(45, 199, 107, 0.08)); border-color: var(--brand-success, #2DC76B); }
#content-cloud .oneb-info-panel--warning, .template_togglebox .oneb-info-panel--warning { background: var(--brand-warning-bg, rgba(245, 158, 11, 0.12)); border-color: var(--brand-warning, #F59E0B); }
#content-cloud .oneb-info-panel--danger, .template_togglebox .oneb-info-panel--danger { background: var(--brand-danger-bg, rgba(217, 37, 46, 0.08)); border-color: var(--brand-danger, #D9252E); }

/* Inline copy */
#content-cloud .oneb-inline-copy, .template_togglebox .oneb-inline-copy { display: inline-flex; align-items: center; gap: var(--space-1, 4px); cursor: pointer; }
#content-cloud .oneb-inline-copy__icon, .template_togglebox .oneb-inline-copy__icon { font-size: 14px; line-height: var(--line-height-100, 1); color: var(--color-fg-muted, #6c757d); }
#content-cloud .oneb-inline-copy--button, .template_togglebox .oneb-inline-copy--button { background: none; border: none; padding: 0; color: var(--color-link); }

/* IP copy (legacy markup used in multiple templates) */
#content-cloud .ip-copy {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: var(--line-height-100, 1);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s;
}
#content-cloud .ip-copy:hover { background-color: var(--color-surface, #f0f0f0); }
#content-cloud .ip-copy .copy-icon {
  display: inline-block;
  margin-left: 5px;
  color: var(--color-fg-muted, #999);
  font-size: var(--slick-font-sm, 12px);
  transition: color 0.2s;
}
#content-cloud .ip-copy:hover .copy-icon { color: var(--color-icon-accent); }

/* Link panel */
#content-cloud .oneb-link-panels, .template_togglebox .oneb-link-panels { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
#content-cloud .oneb-link-panel, .template_togglebox .oneb-link-panel {
  border-radius: var(--radius-sm);
  flex: 1 1 360px;
  min-width: 320px;
  background: var(--color-info-bg);
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--color-info-border) 35%, transparent);
}
#content-cloud .oneb-link-panel__inner, .template_togglebox .oneb-link-panel__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#content-cloud .oneb-link-panel__title, .template_togglebox .oneb-link-panel__title { font-weight: var(--font-weight-700, 700); }
#content-cloud .oneb-link-panel__body, .template_togglebox .oneb-link-panel__body { margin: 5px 0 0; color: var(--color-fg-muted, #6c757d); }
#content-cloud .oneb-link-panel__action, .template_togglebox .oneb-link-panel__action { text-decoration: none; white-space: nowrap; }

#content-cloud .oneb-link-panel--info, .template_togglebox .oneb-link-panel--info { background: var(--brand-info-bg, rgba(14, 165, 233, 0.08)); border-left-color: var(--brand-info, #0EA5E9); }
#content-cloud .oneb-link-panel--info .oneb-link-panel__action, .template_togglebox .oneb-link-panel--info .oneb-link-panel__action { background: var(--brand-info, #0EA5E9); color: var(--color-fg-inverse, #fff); }
#content-cloud .oneb-link-panel--success, .template_togglebox .oneb-link-panel--success { background: var(--brand-success-bg, rgba(45, 199, 107, 0.08)); border-left-color: var(--brand-success, #2DC76B); }
#content-cloud .oneb-link-panel--success .oneb-link-panel__action, .template_togglebox .oneb-link-panel--success .oneb-link-panel__action { background: var(--brand-success, #2DC76B); color: var(--color-fg-inverse, #fff); }
#content-cloud .oneb-link-panel--accent, .template_togglebox .oneb-link-panel--accent {
  background: color-mix(in srgb, var(--brand-accent, #6f42c1) 14%, transparent);
  border-left-color: var(--brand-accent, #6f42c1);
}
#content-cloud .oneb-link-panel--accent .oneb-link-panel__action, .template_togglebox .oneb-link-panel--accent .oneb-link-panel__action { background: var(--brand-accent, #6f42c1); color: var(--color-fg-inverse, #fff); }

/* Page-level form shell sizing (used by volume flows) */
#content-cloud .oneb-page-form-shell__messages, .template_togglebox .oneb-page-form-shell__messages { margin-bottom: var(--space-3, 12px); }
#content-cloud .oneb-page-form-shell__back, .template_togglebox .oneb-page-form-shell__back { margin-bottom: var(--space-3, 12px); }

#content-cloud .oneb-page-form-shell, .template_togglebox .oneb-page-form-shell { max-width: var(--cloud-content-max-md, 760px); }
#content-cloud .oneb-page-form-shell--sm, .template_togglebox .oneb-page-form-shell--sm { max-width: var(--cloud-content-max-sm, 520px); }
#content-cloud .oneb-page-form-shell--lg, .template_togglebox .oneb-page-form-shell--lg { max-width: var(--cloud-content-max-lg, 920px); }
#content-cloud .oneb-page-form-shell--xl, .template_togglebox .oneb-page-form-shell--xl { max-width: var(--cloud-content-max-xl, 1040px); }

#content-cloud .oneb-page-form-shell__title, .template_togglebox .oneb-page-form-shell__title { margin-top: 0; margin-bottom: var(--space-3, 12px); }
#content-cloud .oneb-page-form-shell__subtitle, .template_togglebox .oneb-page-form-shell__subtitle {
  color: var(--color-fg-muted, #6c757d);
  margin-top: calc(var(--space-1, 4px) * -1);
  margin-bottom: var(--space-3, 12px);
}
#content-cloud .oneb-page-form-shell__actions, .template_togglebox .oneb-page-form-shell__actions { margin-top: var(--space-4, 16px); }

/* Button helpers */
#content-cloud .oneb-btn-nowrap { white-space: nowrap; }
#content-cloud .oneb-btn-minw-150 { min-width: 150px; }

/* Refresh button UX (shared across pages) */
#content-cloud .one-refresh-btn:disabled { opacity: 0.7; cursor: not-allowed; }
#content-cloud .one-refresh-btn.spinning { filter: brightness(0.95); }
#content-cloud .one-refresh-btn.spinning .one-refresh-icon { animation: one-spin 1s linear infinite; }
#content-cloud .one-refresh-icon,
#content-cloud .one-refresh-icon i { line-height: var(--line-height-100, 1); }
#content-cloud .one-refresh-icon i {
  display: inline-block;
  font-size: 16px;
  font-weight: var(--font-weight-700, 700);
  line-height: var(--line-height-100, 1);
}

/* Centered modal utilities (legacy root `.modal` markup in OpenNebula templates).
   Horizontal centring uses inset + auto margins, so each size tier sets a real
   width instead of a fit-content box that a left:50% offset caps near 50vw. */
.oneb-modal-centered {
  inset-inline: 0;
  top: 50%;
  bottom: auto;
  margin-block: 0;
  margin-inline: auto;
  height: auto;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  transform: translateY(-50%);
  transform-origin: center center;
  width: fit-content;
  min-width: min(320px, 96vw);
  max-width: 96vw;
}
.oneb-modal-centered--sm { width: min(var(--cloud-modal-content-max-sm, 560px), 96vw); }
.oneb-modal-centered--520 { width: min(520px, 96vw); }
.oneb-modal-centered--640 { width: min(640px, 96vw); }
.oneb-modal-centered--md { width: min(var(--cloud-modal-content-max-md, 720px), 96vw); }
.oneb-modal-centered--lg { width: min(var(--cloud-modal-content-max-lg, 920px), 96vw); }
.oneb-modal-centered--xl { width: min(var(--cloud-modal-content-max-xl, 960px), 96vw); }

/* Preserve centering when Bootstrap fade utilities set transform on `.modal` itself */
.modal.fade.oneb-modal-centered { transform: translateY(-50%) scale(0.97); }
.modal.fade.show.oneb-modal-centered,
.modal.fade.in.oneb-modal-centered { transform: translateY(-50%) scale(1); }

/* Modal details block (used by interfaces.tpl modals) */
#content-cloud .oneb-modal-details {
  display: flex;
  flex-direction: column;
  gap: var(--cloud-modal-detail-gap, var(--space-2, 8px));
  padding: var(--cloud-modal-detail-padding, var(--space-3, 12px));
  background: var(--color-surface, #f8f9fa);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3, 12px);
}
#content-cloud .oneb-modal-details p { margin: 0; }

/* Modal primitives (used by OpenNebula partial modals) */
#content-cloud .oneb-modal-info-card,
.tag-modal .oneb-modal-info-card {
  margin: var(--space-3, 12px) 0;
  padding: var(--space-3, 12px);
  border-radius: var(--radius-sm);
  border: 1px solid var(--oneb-modal-border, var(--color-border, #dee2e6));
  background: var(--color-surface, #f8f9fa);
  color: var(--oneb-modal-fg, var(--color-fg, #212529));
}
#content-cloud .oneb-modal-input,
.tag-modal .oneb-modal-input {
  width: 100%;
  border-color: var(--input-border) !important;
  background: var(--color-bg-modal, var(--color-bg, #fff)) !important;
  color: var(--oneb-modal-fg, var(--color-fg, #212529)) !important;
  caret-color: var(--oneb-modal-fg, var(--color-fg, #212529));
}
#content-cloud .oneb-modal-help,
.tag-modal .oneb-modal-help {
  margin-top: var(--space-2, 8px);
  font-size: var(--font-size-sm, 12px);
  color: var(--oneb-modal-fg-muted, var(--color-fg-muted, #6c757d)) !important;
}

/* Key/value list */
#content-cloud .oneb-kv-list, .template_togglebox .oneb-kv-list {
  margin: var(--space-3, 12px) 0;
  padding: var(--space-3, 12px);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: var(--radius-sm);
  background: var(--color-surface, #f8f9fa);
}
#content-cloud .oneb-kv-list__title, .template_togglebox .oneb-kv-list__title { font-weight: var(--font-weight-700, 700); margin-bottom: var(--space-2, 8px); }
#content-cloud .oneb-kv-list__row, .template_togglebox .oneb-kv-list__row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-top: var(--space-1, 4px); }
#content-cloud .oneb-kv-list__row:first-child, .template_togglebox .oneb-kv-list__row:first-child { margin-top: 0; }
/* Fixed label column so every value starts at the same x; long labels wrap. */
#content-cloud .oneb-kv-list__label, .template_togglebox .oneb-kv-list__label { flex: 0 0 auto; width: 9rem; min-width: 0; overflow-wrap: anywhere; font-weight: var(--font-weight-600, 600); color: var(--color-fg-subtle, #495057); }
#content-cloud .oneb-kv-list__value, .template_togglebox .oneb-kv-list__value { flex: 1 1 auto; min-width: 0; }
#content-cloud .oneb-kv-list__row--success .oneb-kv-list__value, .template_togglebox .oneb-kv-list__row--success .oneb-kv-list__value { color: var(--color-success-strong, #166534); }
#content-cloud .oneb-kv-list__row--warning .oneb-kv-list__value, .template_togglebox .oneb-kv-list__row--warning .oneb-kv-list__value { color: var(--color-warning-strong, #92400e); }
#content-cloud .oneb-kv-list__row--danger .oneb-kv-list__value, .template_togglebox .oneb-kv-list__row--danger .oneb-kv-list__value { color: var(--color-danger-strong, #b91c1c); }

/* Notice panel */
#content-cloud .oneb-notice-panel, .template_togglebox .oneb-notice-panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  margin-top: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  border: 1px solid;
  border-radius: var(--radius-sm);
}
#content-cloud .oneb-notice-panel__icon, .template_togglebox .oneb-notice-panel__icon { margin-top: 1px; }
#content-cloud .oneb-notice-panel__icon i, .template_togglebox .oneb-notice-panel__icon i { font-size: 18px; }
#content-cloud .oneb-notice-panel__title, .template_togglebox .oneb-notice-panel__title { font-weight: var(--font-weight-700, 700); margin-bottom: var(--space-1, 4px); }

/* Alert layout (OpenNebula templates wrap slick-alert with extra structure) */
#content-cloud .oneb-alert, .template_togglebox .oneb-alert { display: flex; align-items: flex-start; gap: 8px; }
#content-cloud .oneb-alert__title, .template_togglebox .oneb-alert__title { margin-right: 4px; }
#content-cloud .oneb-alert__debug, .template_togglebox .oneb-alert__debug { margin-top: 5px; opacity: 0.8; }


/* Status pill (used by components/status_pill.tpl) */
:is(#content-cloud, .vm-shell-stack) .oneb-status-pill, .template_togglebox .oneb-status-pill { display: inline-flex; }

/* Action menu shell (used by components/action_menu.tpl) */
#content-cloud .oneb-action-menu, .template_togglebox .oneb-action-menu {
  display: none;
  position: fixed;
  background: var(--dropdown-bg, var(--color-bg, #fff));
  border: 1px solid var(--dropdown-border, var(--color-border, #dee2e6));
  border-radius: 4px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
  z-index: var(--z-dropdown, 1000);
  min-width: 180px;
  right: auto;
  left: 0;
}
#content-cloud .oneb-action-menu.oneb-action-menu--wide, .template_togglebox .oneb-action-menu.oneb-action-menu--wide { min-width: 200px; }
#content-cloud .oneb-action-menu.oneb-action-menu--absolute, .template_togglebox .oneb-action-menu.oneb-action-menu--absolute { position: absolute; margin-top: 2px; }
#content-cloud .oneb-action-menu .dropdown-item,
#content-cloud .oneb-action-menu .dropdown-item i,
.template_togglebox .oneb-action-menu .dropdown-item,
.template_togglebox .oneb-action-menu .dropdown-item i { color: var(--dropdown-fg, var(--color-fg-subtle, #495057)); }
#content-cloud .oneb-action-menu .dropdown-item:hover, .template_togglebox .oneb-action-menu .dropdown-item:hover { background: var(--dropdown-hover-bg, var(--color-surface, #f8f9fa)); }
#content-cloud .oneb-action-menu .dropdown-item.text-danger,
#content-cloud .oneb-action-menu .dropdown-item.text-danger i,
.template_togglebox .oneb-action-menu .dropdown-item.text-danger,
.template_togglebox .oneb-action-menu .dropdown-item.text-danger i { color: var(--color-danger, #dc3545) !important; }

/* Search component (used by OpenNebula components/search.tpl) */
#content-cloud .search-container { margin: 15px 0; }
#content-cloud .search-bar { display: flex; gap: 10px; align-items: center; }
#content-cloud .search-input-wrapper { position: relative; flex: 1; max-width: 400px; }
#content-cloud .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-fg-muted, #6c757d);
  font-size: 14px;
}
#content-cloud .search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 14px;
  color: var(--color-fg-subtle, #495057);
  background: var(--color-bg, #fff);
  transition: border-color 0.2s;
}
#content-cloud .search-input::placeholder { color: var(--color-fg-muted, #94a3b8); opacity: 1; }
#content-cloud .search-input:focus {
  outline: 2px solid var(--focus-outline);
  outline-offset: -1px;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--shadow-focus-ring, rgba(41, 167, 230, 0.1));
}

#content-cloud .clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-fg-muted, #6c757d);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  transition: color 0.2s;
}
#content-cloud .clear-search:hover { color: var(--color-fg-subtle, #495057); }

#content-cloud .search-btn,
#content-cloud .clear-btn,
#content-cloud .advanced-search-toggle {
  padding: 8px 12px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 4px;
  color: var(--color-fg-subtle, #495057);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
#content-cloud .advanced-search-toggle { padding: 8px 16px; }

#content-cloud .search-btn:hover,
#content-cloud .clear-btn:hover,
#content-cloud .advanced-search-toggle:hover {
  background: var(--color-surface-2, #e9ecef);
  border-color: var(--color-border-strong, #adb5bd);
}
#content-cloud .advanced-search-toggle.active {
  background: var(--brand-primary);
  color: var(--color-fg-inverse, #fff);
  border-color: var(--brand-primary);
}

#content-cloud .advanced-search-panel {
  margin-top: 15px;
  padding: 15px;
  background: var(--color-surface, #f8f9fa);
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 4px;
}
#content-cloud .advanced-search-fields { margin-bottom: 15px; }
#content-cloud .advanced-search-fields label { display: block; font-size: 13px; color: var(--color-fg-subtle, #495057); margin-bottom: 8px; font-weight: var(--font-weight-500, 500); }
#content-cloud .field-checkboxes, .template_togglebox .field-checkboxes { display: flex; flex-wrap: wrap; gap: 15px; }
#content-cloud .field-checkbox,
#content-cloud .search-option,
.template_togglebox .field-checkbox { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-fg-subtle, #495057); margin: 0; }
#content-cloud .field-checkbox input, .template_togglebox .field-checkbox input { margin: 0; }
#content-cloud .search-options { display: flex; gap: 20px; padding-top: 10px; border-top: 1px solid var(--color-border, #dee2e6); }

#content-cloud .search-results-info {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--brand-primary-bg, rgba(41, 167, 230, 0.08));
  border: 1px solid var(--brand-primary-light);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-link);
}
#content-cloud .search-results-info.no-results {
  background: var(--brand-danger-bg, rgba(217, 37, 46, 0.08));
  border-color: var(--brand-danger, #D9252E);
  color: var(--color-danger-strong, #991b1b);
}
#content-cloud .results-count,
#content-cloud .search-term { font-weight: var(--font-weight-500, 500); }
#content-cloud .search-term { font-style: italic; }

#content-cloud .search-highlight {
  background-color: var(--brand-warning, #F59E0B);
  color: var(--color-fg, #343a40);
  padding: 1px 2px;
  border-radius: var(--radius-sm);
}

#content-cloud .search-container.searching .search-icon { animation: one-spin-y 1s linear infinite; }

/* Pagination component (used by OpenNebula components/pagination.tpl) */
#content-cloud .pagination-container { margin: 20px 0; }
#content-cloud .pagination-info { text-align: center; margin-bottom: 15px; color: var(--color-fg-muted, #6c757d); font-size: 14px; }
#content-cloud .per-page-selector { margin-left: 10px; }
#content-cloud .per-page-select {
  padding: 2px 8px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--color-bg-elevated, #fff);
  color: var(--color-fg-subtle, #495057);
  cursor: pointer;
}
#content-cloud .pagination { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
#content-cloud .page-numbers { display: flex; gap: 4px; align-items: center; }
#content-cloud .page-link {
  padding: 6px 12px;
  border: 1px solid var(--color-border, #dee2e6);
  border-radius: 4px;
  color: var(--color-fg-subtle, #495057);
  text-decoration: none;
  font-size: 14px;
  background: var(--color-bg-elevated, #fff);
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 35px;
  justify-content: center;
}
#content-cloud .page-link:hover:not(.disabled):not(.current) {
  background: var(--color-surface-2, #e9ecef);
  border-color: var(--color-border-strong, #adb5bd);
  color: var(--color-fg, #212529);
}
#content-cloud .page-link.current {
  background: var(--color-primary-fill);
  color: var(--color-fg-inverse, #fff);
  border-color: var(--color-primary-fill);
  font-weight: var(--font-weight-500, 500);
}
#content-cloud .page-link.disabled { color: var(--color-border-strong, #adb5bd); cursor: not-allowed; opacity: 0.5; }
#content-cloud .page-link.first,
#content-cloud .page-link.last,
#content-cloud .page-link.prev,
#content-cloud .page-link.next { min-width: auto; padding: 6px 10px; }
#content-cloud .page-ellipsis { padding: 0 8px; color: var(--color-fg-muted, #6c757d); }
#content-cloud .page-link i { font-size: var(--slick-font-sm); }

/* Coarse pointers: links widen to 44px so neighbouring hit areas do not
   overlap, and wrapped rows sit far enough apart for the same reason; the
   .slick-hit-area recipe above covers the height. */
@media (pointer: coarse) {
  #content-cloud .pagination,
  #content-cloud .page-numbers { row-gap: 16px; }
  #content-cloud .page-numbers { flex-wrap: wrap; }
  #content-cloud .pagination .page-link { min-width: var(--touch-target-min); }
}

/* Coarse pointers: the filter tabs (36px) and SSH auth tabs (42px) are flex
   rows that centre their label, so a minimum height reaches 44px without
   moving the text. */
@media (pointer: coarse) {
  #content-cloud .slick-filter-tab,
  #content-cloud .ssh-auth-tab,
  .template_togglebox .slick-filter-tab { min-height: var(--touch-target-min); }
}

@media (max-width: 767px) {
  #content-cloud .search-bar { flex-direction: column; align-items: stretch; }
  #content-cloud .search-input-wrapper { max-width: none; }
  #content-cloud .field-checkboxes, .template_togglebox .field-checkboxes { flex-direction: column; gap: 8px; }

  #content-cloud .oneb-link-panel, .template_togglebox .oneb-link-panel { min-width: 0; }

  #content-cloud .oneb-form-actions--stack-mobile, .template_togglebox .oneb-form-actions--stack-mobile { flex-direction: column; align-items: stretch; }
  #content-cloud .oneb-form-actions--stack-mobile .oneb-form-actions__primary,
  #content-cloud .oneb-form-actions--stack-mobile .oneb-form-actions__secondary,
  .template_togglebox .oneb-form-actions--stack-mobile .oneb-form-actions__primary,
  .template_togglebox .oneb-form-actions--stack-mobile .oneb-form-actions__secondary { width: 100%; justify-content: flex-start; }
  #content-cloud .oneb-form-actions--stack-mobile .oneb-form-actions__primary .slick-btn,
  #content-cloud .oneb-form-actions--stack-mobile .oneb-form-actions__secondary .slick-btn,
  .template_togglebox .oneb-form-actions--stack-mobile .oneb-form-actions__primary .slick-btn,
  .template_togglebox .oneb-form-actions--stack-mobile .oneb-form-actions__secondary .slick-btn { width: 100%; }
  #content-cloud .oneb-form-actions--stack-mobile.oneb-form-actions--primary-first-mobile .oneb-form-actions__primary, .template_togglebox .oneb-form-actions--stack-mobile.oneb-form-actions--primary-first-mobile .oneb-form-actions__primary { order: -1; }

  #content-cloud .oneb-kv-list__row, .template_togglebox .oneb-kv-list__row { flex-direction: column; gap: 2px; }
  #content-cloud .oneb-kv-list__label, .template_togglebox .oneb-kv-list__label { width: auto; }

  #content-cloud .oneb-action-row--equal > * { flex-basis: 100%; }

  #content-cloud .slick-page-toolbar--stack-mobile, .template_togglebox .slick-page-toolbar--stack-mobile { flex-direction: column; align-items: stretch; }
  #content-cloud .slick-page-toolbar--stack-mobile .slick-page-toolbar__left,
  #content-cloud .slick-page-toolbar--stack-mobile .slick-page-toolbar__right,
  .template_togglebox .slick-page-toolbar--stack-mobile .slick-page-toolbar__left,
  .template_togglebox .slick-page-toolbar--stack-mobile .slick-page-toolbar__right { width: 100%; justify-content: flex-start; }

  #content-cloud .pagination { font-size: var(--slick-font-sm); }
  #content-cloud .page-link { padding: 5px 8px; font-size: var(--slick-font-sm); min-width: 30px; }
  #content-cloud .page-link.first,
  #content-cloud .page-link.last { display: none; }
}
/* ===========================================
   SHARED PORTAL COMPONENTS
   Extracted from OpenNebula, rgw and checkmk (2026-11). Opt-in classes that
   work on every portal page: each selector carries a #content-cloud entry
   (module pages, ID weight as before) and a .template_togglebox entry
   (portal pages, order pages, body-level modals). Dark mode comes from tokens
   alone. Markup lives in components/*.tpl.
   =========================================== */

/* ---- Meta text: secondary line under a title or value ---- */
#content-cloud .slick-meta, .template_togglebox .slick-meta {
  font-size: var(--font-size-13, 13px);
  line-height: var(--line-height-145, 1.45);
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}
#content-cloud .slick-meta--xs, .template_togglebox .slick-meta--xs { font-size: var(--font-size-12, 12px); }

/* ---- State dot: a static tone dot beside a text label (never alone) ---- */
#content-cloud .slick-state-dot, .template_togglebox .slick-state-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--color-muted-strong);
}
#content-cloud .slick-state-dot--success, .template_togglebox .slick-state-dot--success { background: var(--color-success-strong); }
#content-cloud .slick-state-dot--info, .template_togglebox .slick-state-dot--info { background: var(--color-info-strong); }
#content-cloud .slick-state-dot--primary, .template_togglebox .slick-state-dot--primary { background: var(--color-primary-strong); }
#content-cloud .slick-state-dot--warning, .template_togglebox .slick-state-dot--warning { background: var(--color-warning-strong); }
#content-cloud .slick-state-dot--danger, .template_togglebox .slick-state-dot--danger { background: var(--color-danger-strong); }
#content-cloud .slick-state-dot--hollow, .template_togglebox .slick-state-dot--hollow { background: transparent; box-shadow: inset 0 0 0 1px currentcolor; }

/* ---- Icon button: a quiet square control for one icon (edit, copy, close) ---- */
#content-cloud .slick-icon-btn, .template_togglebox .slick-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-muted);
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}
#content-cloud .slick-icon-btn:hover, .template_togglebox .slick-icon-btn:hover { background: var(--color-surface-2); color: var(--color-primary-strong); }
#content-cloud .slick-icon-btn:active, .template_togglebox .slick-icon-btn:active { background: var(--color-surface-3, var(--color-surface-2)); }
#content-cloud .slick-icon-btn:focus-visible, .template_togglebox .slick-icon-btn:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 0; }
#content-cloud .slick-icon-btn:disabled, .template_togglebox .slick-icon-btn:disabled,
#content-cloud .slick-icon-btn[aria-disabled="true"],
.template_togglebox .slick-icon-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; background: transparent; color: var(--color-fg-muted); }
#content-cloud .slick-icon-btn :is(.material-icons, .ph, i), .template_togglebox .slick-icon-btn :is(.material-icons, .ph, i) { font-size: 16px; }
#content-cloud .slick-icon-btn--danger:hover, .template_togglebox .slick-icon-btn--danger:hover { background: var(--color-danger-bg); color: var(--color-danger-strong); }
#content-cloud .slick-icon-btn--md, .template_togglebox .slick-icon-btn--md { width: 32px; height: 32px; }
#content-cloud .slick-icon-btn--md :is(.material-icons, .ph, i), .template_togglebox .slick-icon-btn--md :is(.material-icons, .ph, i) { font-size: 18px; }

/* ---- Meter: usage against a limit (quota, storage, upload progress) ---- */
#content-cloud .slick-meter, .template_togglebox .slick-meter {
  display: grid;
  gap: 6px;
  min-width: 0;
}
#content-cloud .slick-meter__labels, .template_togglebox .slick-meter__labels {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--font-size-12, 12px);
  line-height: 1.4;
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
}
#content-cloud .slick-meter__label, .template_togglebox .slick-meter__label { color: var(--color-fg); font-weight: var(--font-weight-600, 600); }
#content-cloud .slick-meter__track, .template_togglebox .slick-meter__track {
  position: relative;
  overflow: hidden;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--meter-track);
}
#content-cloud .slick-meter--sm .slick-meter__track, .template_togglebox .slick-meter--sm .slick-meter__track { height: 6px; }
#content-cloud .slick-meter--lg .slick-meter__track, .template_togglebox .slick-meter--lg .slick-meter__track { height: 10px; }
/* Fill width comes from --slick-meter-value (set by meter.tpl) or an inline width. */
#content-cloud .slick-meter__fill, .template_togglebox .slick-meter__fill {
  display: block;
  width: var(--slick-meter-value, 0%);
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--meter-fill-primary);
  transition: width var(--motion-base) var(--ease-out);
}
#content-cloud .slick-meter__fill--success, .template_togglebox .slick-meter__fill--success { background: var(--meter-fill-success); }
#content-cloud .slick-meter__fill--warning, .template_togglebox .slick-meter__fill--warning { background: var(--meter-fill-warning); }
#content-cloud .slick-meter__fill--danger, .template_togglebox .slick-meter__fill--danger { background: var(--meter-fill-danger); }
#content-cloud .slick-meter__fill--indeterminate, .template_togglebox .slick-meter__fill--indeterminate { width: 40%; animation: slick-meter-indeterminate 1.4s var(--ease-out) infinite; }
@keyframes slick-meter-indeterminate {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  #content-cloud .slick-meter__fill, .template_togglebox .slick-meter__fill { transition: none; }
  #content-cloud .slick-meter__fill--indeterminate, .template_togglebox .slick-meter__fill--indeterminate { animation: none; width: 100%; opacity: .5; }
}

/* ---- Stats: labelled figures in a row (resource totals, billing figures) ---- */
#content-cloud .slick-stats, .template_togglebox .slick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  margin: 0;
}
/* --divided: figures share one surface, separated by hairlines. */
#content-cloud .slick-stats--divided, .template_togglebox .slick-stats--divided { gap: 0; }
#content-cloud .slick-stats--divided > .slick-stat, .template_togglebox .slick-stats--divided > .slick-stat { padding: 2px 14px; border-left: 1px solid var(--color-border); }
#content-cloud .slick-stats--divided > .slick-stat:first-child, .template_togglebox .slick-stats--divided > .slick-stat:first-child { padding-left: 0; border-left: 0; }
#content-cloud .slick-stat, .template_togglebox .slick-stat { min-width: 0; margin: 0; }
#content-cloud .slick-stat__label, .template_togglebox .slick-stat__label {
  margin: 0;
  font-size: var(--font-size-12, 12px);
  font-weight: var(--font-weight-600, 600);
  line-height: 1.35;
  color: var(--color-fg-subtle, var(--color-fg-muted));
}
#content-cloud .slick-stat__value, .template_togglebox .slick-stat__value {
  margin: 2px 0 0;
  font-size: var(--font-size-18, 18px);
  font-weight: var(--font-weight-600, 600);
  line-height: 1.3;
  color: var(--color-fg-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#content-cloud .slick-stat__meta, .template_togglebox .slick-stat__meta {
  margin: 2px 0 0;
  font-size: var(--font-size-12, 12px);
  line-height: 1.4;
  color: var(--color-fg-muted);
}
/* --tile: a standalone figure with its own edge (stat grids on overview pages). */
#content-cloud .slick-stat--tile, .template_togglebox .slick-stat--tile {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
}
@media (max-width: 575.98px) {
  #content-cloud .slick-stats--divided, .template_togglebox .slick-stats--divided { gap: 12px; }
  #content-cloud .slick-stats--divided > .slick-stat, .template_togglebox .slick-stats--divided > .slick-stat { padding: 0; border-left: 0; }
}

/* ---- Toggle: an on/off switch for a setting that applies immediately ---- */
#content-cloud .slick-toggle, .template_togglebox .slick-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
#content-cloud .slick-toggle--inline, .template_togglebox .slick-toggle--inline { display: inline-flex; align-items: center; }
#content-cloud .slick-toggle__control, .template_togglebox .slick-toggle__control { position: relative; flex: none; width: 40px; height: 22px; }
/* The real checkbox covers the switch (and the coarse-pointer target) so
   clicks, keyboard and assistive tech all reach it; it is only see-through. */
#content-cloud .slick-toggle__control input, .template_togglebox .slick-toggle__control input {
  position: absolute;
  z-index: 1;
  inset: -11px -2px;
  width: auto;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
#content-cloud .slick-toggle__track, .template_togglebox .slick-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--color-bg-elevated);
  box-shadow: inset 0 0 0 1.5px var(--toggle-edge);
  transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
#content-cloud .slick-toggle__track::after, .template_togglebox .slick-toggle__track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--toggle-edge);
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) ease;
}
#content-cloud .slick-toggle__control input:checked + .slick-toggle__track, .template_togglebox .slick-toggle__control input:checked + .slick-toggle__track { background: var(--toggle-on); box-shadow: inset 0 0 0 1.5px var(--toggle-on); }
#content-cloud .slick-toggle__control input:checked + .slick-toggle__track::after, .template_togglebox .slick-toggle__control input:checked + .slick-toggle__track::after { transform: translateX(18px); background: var(--color-fg-inverse, #fff); }
#content-cloud .slick-toggle__control input:focus-visible + .slick-toggle__track, .template_togglebox .slick-toggle__control input:focus-visible + .slick-toggle__track { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
#content-cloud .slick-toggle__control input:disabled, .template_togglebox .slick-toggle__control input:disabled { cursor: not-allowed; }
#content-cloud .slick-toggle__control input:disabled + .slick-toggle__track, .template_togglebox .slick-toggle__control input:disabled + .slick-toggle__track { opacity: .55; }
#content-cloud .slick-toggle:has(input:disabled), .template_togglebox .slick-toggle:has(input:disabled) { cursor: not-allowed; }
#content-cloud .slick-toggle:has(input:disabled) .slick-toggle__text, .template_togglebox .slick-toggle:has(input:disabled) .slick-toggle__text { opacity: .7; }
#content-cloud .slick-toggle__text, .template_togglebox .slick-toggle__text { min-width: 0; font-size: var(--font-size-14, 14px); line-height: 1.4; color: var(--color-fg); }
#content-cloud .slick-toggle__text strong, .template_togglebox .slick-toggle__text strong { display: block; font-weight: var(--font-weight-600, 600); }
#content-cloud .slick-toggle__text > span, .template_togglebox .slick-toggle__text > span { display: block; font-size: var(--font-size-13, 13px); color: var(--color-fg-muted); }
/* Stacked toggles get rhythm; inline toggles laid out in a row do not. */
#content-cloud .slick-toggle:not(.slick-toggle--inline) + .slick-toggle:not(.slick-toggle--inline), .template_togglebox .slick-toggle:not(.slick-toggle--inline) + .slick-toggle:not(.slick-toggle--inline) { margin-top: 12px; }
/* --danger: a switch that turns on something destructive (force delete). */
#content-cloud .slick-toggle--danger .slick-toggle__control input:checked + .slick-toggle__track, .template_togglebox .slick-toggle--danger .slick-toggle__control input:checked + .slick-toggle__track { background: var(--color-danger-fill); box-shadow: inset 0 0 0 1.5px var(--color-danger-fill); }
#content-cloud .slick-toggle--danger .slick-toggle__text strong, .template_togglebox .slick-toggle--danger .slick-toggle__text strong { color: var(--color-danger-strong); }
@media (prefers-reduced-motion: reduce) {
  #content-cloud .slick-toggle__track, .template_togglebox .slick-toggle__track,
  #content-cloud .slick-toggle__track::after,
  .template_togglebox .slick-toggle__track::after { transition: none; }
}

/* ---- Bulk bar: actions for the rows selected in a table ---- */
#content-cloud .slick-bulk-bar, .template_togglebox .slick-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface-tint-primary-2);
}
#content-cloud .slick-bulk-bar[hidden], .template_togglebox .slick-bulk-bar[hidden],
#content-cloud .slick-bulk-bar.is-hidden,
.template_togglebox .slick-bulk-bar.is-hidden { display: none; }
#content-cloud .slick-bulk-bar__summary, .template_togglebox .slick-bulk-bar__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--color-fg); }
#content-cloud .slick-bulk-bar__count, .template_togglebox .slick-bulk-bar__count { font-weight: var(--font-weight-700, 700); color: var(--color-primary-strong); font-variant-numeric: tabular-nums; }
#content-cloud .slick-bulk-bar__hint, .template_togglebox .slick-bulk-bar__hint { font-size: var(--font-size-13, 13px); color: var(--color-fg-muted); }
#content-cloud .slick-bulk-bar__actions, .template_togglebox .slick-bulk-bar__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }

/* ---- Code: commands, config and raw output on a dark surface in both themes ---- */
#content-cloud .slick-code-block, .template_togglebox .slick-code-block {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-code-fg) 16%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
}
#content-cloud .slick-code-block__header, .template_togglebox .slick-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 4px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-code-fg) 12%, transparent);
  font-size: var(--font-size-12, 12px);
  color: var(--color-code-muted);
}
#content-cloud .slick-code-block__actions, .template_togglebox .slick-code-block__actions { display: inline-flex; align-items: center; gap: 4px; }
/* Icon buttons anywhere on the code surface (header or beside bare code) use the on-dark colours. */
#content-cloud .slick-code-block .slick-icon-btn, .template_togglebox .slick-code-block .slick-icon-btn { color: var(--color-code-muted); }
#content-cloud .slick-code-block .slick-icon-btn:hover, .template_togglebox .slick-code-block .slick-icon-btn:hover { background: color-mix(in srgb, var(--color-code-fg) 12%, transparent); color: var(--color-code-fg); }
#content-cloud .slick-code, .template_togglebox .slick-code {
  display: block;
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--color-code-fg) 16%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-code-bg);
  color: var(--color-code-fg);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--font-size-13, 13px);
  line-height: 1.5;
  white-space: pre;
  tab-size: 4;
  scrollbar-color: color-mix(in srgb, var(--color-code-fg) 30%, transparent) transparent;
}
#content-cloud .slick-code-block .slick-code, .template_togglebox .slick-code-block .slick-code { border: 0; border-radius: 0; }
#content-cloud .slick-code--wrap, .template_togglebox .slick-code--wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
#content-cloud .slick-code code, .template_togglebox .slick-code code { padding: 0; background: none; color: inherit; font: inherit; }
#content-cloud .slick-code ::selection, .template_togglebox .slick-code ::selection,
#content-cloud .slick-code::selection,
.template_togglebox .slick-code::selection { background: color-mix(in srgb, var(--brand-primary) 45%, transparent); color: var(--color-code-fg); }
#content-cloud .slick-code:focus-visible, .template_togglebox .slick-code:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
#content-cloud .slick-code__placeholder, .template_togglebox .slick-code__placeholder { color: var(--color-code-accent); }

/* ---- Toast: a transient confirmation; errors stay until dismissed ---- */
.slick-toast-host {
  position: fixed;
  right: 20px;
  /* Above the fixed live-chat launcher (bottom right), not over it. */
  bottom: var(--chat-widget-clearance);
  z-index: var(--z-toast, 10600);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.slick-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
  color: var(--color-fg);
  font-size: var(--font-size-14, 14px);
  line-height: 1.4;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}
.slick-toast.is-shown { opacity: 1; transform: translateY(0); }
.slick-toast__icon { flex: none; font-size: var(--font-size-20); line-height: 1; color: var(--color-info-strong); }
.slick-toast--success .slick-toast__icon { color: var(--color-success-strong); }
.slick-toast--warning .slick-toast__icon { color: var(--color-warning-strong); }
.slick-toast--danger .slick-toast__icon,
.slick-toast--error .slick-toast__icon { color: var(--color-danger-strong); }
.slick-toast__msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.slick-toast__close { margin: -6px -6px -6px 0; }
@media (max-width: 575.98px) {
  .slick-toast-host { right: 12px; left: 12px; }
  .slick-toast { min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slick-toast { transform: none; transition: opacity var(--motion-fast) linear; }
}

/* Optional status pill icon (status_pill.tpl icon / icon_class) sits at the label size. */
#content-cloud .slick-status > i,
.template_togglebox .slick-status > i { font-size: 1.15em; line-height: 1; }

/* ===========================================
   SHARED COMPONENTS: modules migrate their own copies to these.
   Every selector pairs #content-cloud with .template_togglebox (Shared Scope
   Rule) unless the element lives at <body> level (dialogs, menus, tips,
   toasts), where a bare class keeps (0,1,0) so module CSS still wins ties.
   Colours are tokens with their own dark values; nothing below needs an
   html[data-theme="dark"] override. Behaviour lives in js/slick-ui.js
   (window.Slick); see DESIGN.md "Shared components".
   =========================================== */

/* ---- Chips and callouts: one tone model ----
   A tone class sets three local properties; each family reads them. This is
   the only place a chip or callout tone is coloured. Legacy class names stay
   as aliases until modules migrate:
     chips:    .slick-status-*, .oneb-status-pill--*, .status-pill-*, .badge-pill-*
     callouts: .slick-alert-*, .oneb-alert--*, .slick-info-banner--*, .oneb-notice-panel--*
   For callouts, "info" on .oneb-alert and .slick-info-banner keeps its
   rendered primary blue; .slick-alert--info and .oneb-notice-panel--info use
   the sky info tone. Defaults come first so a tone class on the same element
   wins at equal (zero) specificity. */
:where(.slick-alert, .slick-info-banner, .oneb-notice-panel) {
  --tone-bg: var(--color-primary-bg);
  --tone-border: var(--color-primary-border);
  --tone-fg: var(--color-primary-strong);
}
:where(.slick-meta-chip--success, .slick-status-success, .oneb-status-pill--success, .status-pill-success, .badge-pill-success,
  .slick-alert--success, .slick-alert-success, .oneb-alert--success, .slick-info-banner--success, .oneb-notice-panel--success) {
  --tone-bg: var(--color-success-bg);
  --tone-border: var(--color-success-border);
  --tone-fg: var(--color-success-strong);
}
:where(.slick-meta-chip--info, .slick-status-info, .oneb-status-pill--info,
  .slick-alert--info, .slick-alert-info, .oneb-notice-panel--info) {
  --tone-bg: var(--color-info-bg);
  --tone-border: var(--color-info-border);
  --tone-fg: var(--color-info-strong);
}
:where(.slick-meta-chip--primary, .slick-status-primary, .slick-status-running, .oneb-status-pill--primary, .oneb-status-pill--running,
  .status-pill-primary, .status-pill-running, .badge-pill-primary, .badge-pill-running,
  .slick-alert--primary, .oneb-alert--info, .slick-info-banner--info) {
  --tone-bg: var(--color-primary-bg);
  --tone-border: var(--color-primary-border);
  --tone-fg: var(--color-primary-strong);
}
:where(.slick-meta-chip--warning, .slick-status-warning, .oneb-status-pill--warning, .status-pill-warning, .badge-pill-warning,
  .slick-alert--warning, .slick-alert-warning, .oneb-alert--warning, .slick-info-banner--warning, .oneb-notice-panel--warning) {
  --tone-bg: var(--color-warning-bg);
  --tone-border: var(--color-warning-border);
  --tone-fg: var(--color-warning-strong);
}
:where(.slick-meta-chip--danger, .slick-status-danger, .oneb-status-pill--danger, .status-pill-danger, .badge-pill-danger,
  .slick-alert--danger, .slick-alert-danger, .oneb-alert--danger, .slick-info-banner--danger, .oneb-notice-panel--danger) {
  --tone-bg: var(--color-danger-bg);
  --tone-border: var(--color-danger-border);
  --tone-fg: var(--color-danger-strong);
}
:where(.slick-meta-chip--muted, .slick-status-muted, .oneb-status-pill--muted, .status-pill-secondary, .badge-pill-secondary) {
  --tone-bg: var(--color-muted-bg);
  --tone-border: var(--color-muted-border);
  --tone-fg: var(--color-muted-strong);
}

/* Toned chips: (1,1,0) and (0,2,0), the weights the per-family rules had. */
:is(#content-cloud, .vm-shell-stack) :is(.slick-meta-chip--success, .slick-meta-chip--info, .slick-meta-chip--primary, .slick-meta-chip--warning, .slick-meta-chip--danger, .slick-meta-chip--muted,
  .slick-status-success, .slick-status-info, .slick-status-primary, .slick-status-running, .slick-status-warning, .slick-status-danger, .slick-status-muted,
  .oneb-status-pill--success, .oneb-status-pill--info, .oneb-status-pill--primary, .oneb-status-pill--running, .oneb-status-pill--warning, .oneb-status-pill--danger, .oneb-status-pill--muted),
.template_togglebox :is(.slick-meta-chip--success, .slick-meta-chip--info, .slick-meta-chip--primary, .slick-meta-chip--warning, .slick-meta-chip--danger, .slick-meta-chip--muted,
  .slick-status-success, .slick-status-info, .slick-status-primary, .slick-status-running, .slick-status-warning, .slick-status-danger, .slick-status-muted,
  .oneb-status-pill--success, .oneb-status-pill--info, .oneb-status-pill--primary, .oneb-status-pill--running, .oneb-status-pill--warning, .oneb-status-pill--danger, .oneb-status-pill--muted,
  .status-pill-primary, .status-pill-success, .status-pill-danger, .status-pill-warning, .status-pill-secondary, .status-pill-running,
  .badge-pill-primary, .badge-pill-success, .badge-pill-danger, .badge-pill-warning, .badge-pill-secondary, .badge-pill-running) {
  background: var(--tone-bg);
  color: var(--tone-fg);
  border: 1px solid var(--tone-border);
}

/* Callouts: tinted surface, a 1px tone edge all round (never a side stripe). */
#content-cloud :is(.slick-alert, .slick-info-banner, .oneb-notice-panel),
.template_togglebox :is(.slick-alert, .slick-info-banner, .oneb-notice-panel) {
  background: var(--tone-bg);
  border-color: color-mix(in srgb, var(--tone-border) 35%, transparent);
}
#content-cloud :is(.slick-info-banner__icon, .oneb-notice-panel__icon),
.template_togglebox :is(.slick-info-banner__icon, .oneb-notice-panel__icon) { color: var(--tone-fg); }
/* Callout with actions (the former .slick-info-banner layout, for any alert). */
#content-cloud :is(.slick-alert--with-actions, .slick-info-banner), .template_togglebox :is(.slick-alert--with-actions, .slick-info-banner) { flex-wrap: wrap; }
#content-cloud .slick-alert__body, .template_togglebox .slick-alert__body { flex: 1 1 16rem; min-width: 0; }
#content-cloud :is(.slick-alert__actions, .slick-info-banner__actions),
.template_togglebox :is(.slick-alert__actions, .slick-info-banner__actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
  align-self: center;
}

/* ---- Meta chip: neutral metadata or type label (region, tier, record type, id) ----
   State goes in .slick-status (status_pill.tpl); this is for facts that are
   not a state. Tone modifiers as above; --cat-1..8 adds a category dot (the
   hue is a mark, the text stays neutral, so it never fails contrast). */
#content-cloud .slick-meta-chip, .template_togglebox .slick-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: 1px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  color: var(--color-fg-subtle);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-500, 500);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
#content-cloud .slick-meta-chip > :is(i, .material-icons, .ph), .template_togglebox .slick-meta-chip > :is(i, .material-icons, .ph) { font-size: 1.1em; line-height: 1; }
#content-cloud .slick-meta-chip--mono, .template_togglebox .slick-meta-chip--mono { font-family: var(--font-mono); font-weight: var(--font-weight-400, 400); }
#content-cloud :is(.slick-meta-chip--pill, .slick-status--pill), .template_togglebox :is(.slick-meta-chip--pill, .slick-status--pill) { border-radius: var(--radius-pill); }
#content-cloud .slick-meta-chip[class*="slick-meta-chip--cat-"]::before,
.template_togglebox .slick-meta-chip[class*="slick-meta-chip--cat-"]::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-cat);
}
:where(.slick-meta-chip--cat-1) { --chip-cat: var(--cat-1); }
:where(.slick-meta-chip--cat-2) { --chip-cat: var(--cat-2); }
:where(.slick-meta-chip--cat-3) { --chip-cat: var(--cat-3); }
:where(.slick-meta-chip--cat-4) { --chip-cat: var(--cat-4); }
:where(.slick-meta-chip--cat-5) { --chip-cat: var(--cat-5); }
:where(.slick-meta-chip--cat-6) { --chip-cat: var(--cat-6); }
:where(.slick-meta-chip--cat-7) { --chip-cat: var(--cat-7); }
:where(.slick-meta-chip--cat-8) { --chip-cat: var(--cat-8); }

/* ---- Static card: a .slick-card that is not clickable does not lift ---- */
#content-cloud .slick-card--static:hover, .template_togglebox .slick-card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-subtle);
}

/* ---- Flush table: a table inside a card body, no outer frame or zebra ---- */
#content-cloud .slick-table--flush, .template_togglebox .slick-table--flush {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#content-cloud .slick-table--flush :is(tbody tr, tbody tr:nth-child(even)), .template_togglebox .slick-table--flush :is(tbody tr, tbody tr:nth-child(even)) { background: transparent; }
#content-cloud .slick-table--flush :is(th, td), .template_togglebox .slick-table--flush :is(th, td) { border-bottom: 1px solid var(--color-border-subtle); }
#content-cloud .slick-table--flush tbody tr:last-child td, .template_togglebox .slick-table--flush tbody tr:last-child td { border-bottom: 0; }
#content-cloud .slick-table--flush tbody tr:hover, .template_togglebox .slick-table--flush tbody tr:hover { background: var(--color-surface-subtle); }

/* ---- Mono data: identifiers, IPs, keys, hostnames ---- */
#content-cloud .slick-mono, .template_togglebox .slick-mono {
  font-family: var(--font-mono);
  font-size: .95em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---- Action rows: wrap, then stack full width on phones ----
   .slick-actions is the opt-in container for a page's or card's actions;
   .page-header-actions and the toolbar's right group follow the same rule.
   .slick-btn--block-sm makes one button full width on phones. */
#content-cloud .slick-actions, .template_togglebox .slick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
@media (max-width: 767px) {
  #content-cloud :is(.slick-actions, .page-header-actions), .template_togglebox .slick-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  #content-cloud :is(.slick-actions, .page-header-actions) > :is(.slick-btn, .btn, a.slick-btn),
  .template_togglebox .slick-actions > :is(.slick-btn, .btn),
  #content-cloud .slick-btn--block-sm, .template_togglebox .slick-btn--block-sm {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Icon-only buttons ----
   Two tiers: the quiet .slick-icon-btn, and a tiered .slick-btn with
   .slick-btn--icononly (alias .slick-btn--icon-only). Both MUST carry an
   aria-label naming the action and object ("Copy access key", not "Copy");
   the icon is aria-hidden. A title is optional and never the only name.
   .slick-btn spaces its children with gap, so an icon alone is centred. */
#content-cloud :is(.slick-btn--icononly, .slick-btn--icon-only), .template_togglebox :is(.slick-btn--icononly, .slick-btn--icon-only) {
  min-width: 2.25em;
  padding-inline: .5rem;
}

/* ---- Sticky action bar: the commit row of a long form or wizard step ----
   Sticks to the bottom of its scroller; the --fixed variant pins to the
   viewport above the live-chat launcher. Content that ends under a fixed bar
   or the launcher reserves room with .slick-chat-clearance. */
#content-cloud .slick-sticky-bar, .template_togglebox .slick-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-sticky);
}
#content-cloud .slick-sticky-bar--fixed, .template_togglebox .slick-sticky-bar--fixed {
  position: fixed;
  right: 0;
  bottom: var(--livechat-safe-bottom);
  left: 0;
  z-index: var(--z-fixed);
}
#content-cloud .slick-sticky-bar__summary, .template_togglebox .slick-sticky-bar__summary { margin-right: auto; min-width: 0; }
#content-cloud .slick-chat-clearance, .template_togglebox .slick-chat-clearance { padding-bottom: var(--chat-widget-clearance); }
@media (max-width: 767px) {
  #content-cloud .slick-sticky-bar, .template_togglebox .slick-sticky-bar { justify-content: stretch; }
  #content-cloud .slick-sticky-bar > :is(.slick-btn, .btn), .template_togglebox .slick-sticky-bar > :is(.slick-btn, .btn) { flex: 1 1 auto; justify-content: center; }
}

/* ---- Wizard step indicator ----
   <ol class="slick-stepper" aria-label="Order progress"> with one
   .slick-stepper__step per step. The current step carries
   aria-current="step"; finished steps carry .is-complete, a check icon in the
   marker and a .slick-sr-only "Completed:" prefix, so state is never colour
   alone. On phones only the current step keeps its label. */
#content-cloud .slick-stepper, .template_togglebox .slick-stepper {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: slick-step;
}
#content-cloud .slick-stepper__step, .template_togglebox .slick-stepper__step {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--color-fg-muted);
  font-size: var(--font-size-14);
  counter-increment: slick-step;
}
#content-cloud .slick-stepper__step:not(:last-child)::after, .template_togglebox .slick-stepper__step:not(:last-child)::after {
  content: "";
  flex: 1 1 var(--space-4);
  min-width: var(--space-3);
  height: 1px;
  background: var(--color-border);
}
#content-cloud .slick-stepper__step.is-complete:not(:last-child)::after, .template_togglebox .slick-stepper__step.is-complete:not(:last-child)::after { background: var(--color-selected-border); }
#content-cloud .slick-stepper__marker, .template_togglebox .slick-stepper__marker {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--input-border);
  border-radius: 50%;
  background: var(--color-bg-elevated);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-600, 600);
  font-variant-numeric: tabular-nums;
}
#content-cloud .slick-stepper__marker:empty::before, .template_togglebox .slick-stepper__marker:empty::before { content: counter(slick-step); }
#content-cloud .slick-stepper__marker :is(i, .material-icons, .ph), .template_togglebox .slick-stepper__marker :is(i, .material-icons, .ph) { font-size: var(--icon-size-sm); line-height: 1; }
#content-cloud .slick-stepper__label, .template_togglebox .slick-stepper__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content-cloud .slick-stepper__step.is-complete, .template_togglebox .slick-stepper__step.is-complete { color: var(--color-fg-subtle); }
#content-cloud .slick-stepper__step.is-complete .slick-stepper__marker, .template_togglebox .slick-stepper__step.is-complete .slick-stepper__marker {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
  color: var(--color-primary-strong);
}
#content-cloud .slick-stepper__step[aria-current="step"], .template_togglebox .slick-stepper__step[aria-current="step"] { color: var(--color-fg-strong); font-weight: var(--font-weight-600, 600); }
#content-cloud .slick-stepper__step[aria-current="step"] .slick-stepper__marker, .template_togglebox .slick-stepper__step[aria-current="step"] .slick-stepper__marker {
  border: 2px solid var(--color-selected-border);
  background: var(--color-primary-fill);
  color: var(--color-fg-inverse);
}
#content-cloud .slick-stepper a, .template_togglebox .slick-stepper a { color: inherit; text-decoration: none; }
#content-cloud .slick-stepper a:hover .slick-stepper__label, .template_togglebox .slick-stepper a:hover .slick-stepper__label { color: var(--color-link-hover); text-decoration: underline; }
@media (max-width: 479px) {
  #content-cloud .slick-stepper__step:not([aria-current="step"]) .slick-stepper__label,
  .template_togglebox .slick-stepper__step:not([aria-current="step"]) .slick-stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #content-cloud .slick-stepper__step, .template_togglebox .slick-stepper__step { flex: 0 1 auto; }
  #content-cloud .slick-stepper__step[aria-current="step"], .template_togglebox .slick-stepper__step[aria-current="step"] { flex: 1 1 auto; }
}

/* ---- Choice card: a radio or checkbox presented as a card ----
   <label class="slick-choice"><input type="radio" class="slick-choice__input" …>
   <span class="slick-choice__body"><span class="slick-choice__title">…</span>
   <span class="slick-choice__meta">…</span></span></label>
   The native control stays visible: it is the selected-state cue that does
   not rely on colour. Selected: 2px --color-selected-border ring over the
   --color-selected-bg tint. Focus: the shared outline on the whole card.
   .is-selected/.is-disabled are kept in sync by js/slick-ui.js for browsers
   without :has(). Group with .slick-choice-group inside a <fieldset>. */
#content-cloud .slick-choice-group, .template_togglebox .slick-choice-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
#content-cloud .slick-choice, .template_togglebox .slick-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  font-weight: var(--font-weight-400, 400);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
#content-cloud .slick-choice:hover, .template_togglebox .slick-choice:hover { border-color: var(--color-selected-border); }
#content-cloud .slick-choice__input, .template_togglebox .slick-choice__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--color-primary-fill);
  cursor: inherit;
}
#content-cloud .slick-choice__input:focus-visible, .template_togglebox .slick-choice__input:focus-visible { outline: none; }
#content-cloud .slick-choice__body, .template_togglebox .slick-choice__body { display: grid; gap: 2px; min-width: 0; }
#content-cloud .slick-choice__title, .template_togglebox .slick-choice__title { color: var(--color-fg-strong); font-weight: var(--font-weight-600, 600); }
#content-cloud .slick-choice__meta, .template_togglebox .slick-choice__meta { color: var(--color-fg-muted); font-size: var(--font-size-13); }
#content-cloud .slick-choice__aside, .template_togglebox .slick-choice__aside { margin-left: auto; color: var(--color-fg-strong); font-weight: var(--font-weight-600, 600); font-variant-numeric: tabular-nums; white-space: nowrap; }
#content-cloud :is(.slick-choice.is-selected, .slick-choice:has(.slick-choice__input:checked)),
.template_togglebox :is(.slick-choice.is-selected, .slick-choice:has(.slick-choice__input:checked)) {
  border-color: var(--color-selected-border);
  background: var(--color-selected-bg);
  box-shadow: inset 0 0 0 1px var(--color-selected-border);
}
#content-cloud .slick-choice:has(.slick-choice__input:focus-visible), .template_togglebox .slick-choice:has(.slick-choice__input:focus-visible),
#content-cloud .slick-choice.is-focus-visible, .template_togglebox .slick-choice.is-focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}
#content-cloud :is(.slick-choice.is-disabled, .slick-choice:has(.slick-choice__input:disabled)),
.template_togglebox :is(.slick-choice.is-disabled, .slick-choice:has(.slick-choice__input:disabled)) {
  border-color: var(--color-border);
  opacity: .55;
  cursor: not-allowed;
}

/* ---- Copy button (Slick.copy): visible and announced feedback ----
   [data-slick-copy] on a .slick-icon-btn or .slick-btn. On success the icon
   becomes a check in the success colour and an optional
   .slick-copy-btn__label reads "Copied" for --motion-feedback; failure uses
   the danger colour and "Copy failed". A polite live region announces both. */
#content-cloud .slick-copy-btn.is-copied,
.template_togglebox .slick-copy-btn.is-copied,
.slick-dialog .slick-copy-btn.is-copied,
.slick-slideover .slick-copy-btn.is-copied { color: var(--color-success-strong); }
#content-cloud .slick-copy-btn.is-failed,
.template_togglebox .slick-copy-btn.is-failed,
.slick-dialog .slick-copy-btn.is-failed,
.slick-slideover .slick-copy-btn.is-failed { color: var(--color-danger-strong); }

/* ---- Credential row: label + mono value + copy (and optional reveal) ---- */
#content-cloud .slick-credential, .template_togglebox .slick-credential {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
#content-cloud .slick-credential:last-child, .template_togglebox .slick-credential:last-child { border-bottom: 0; }
#content-cloud .slick-credential__label, .template_togglebox .slick-credential__label { margin: 0; color: var(--color-fg-subtle); font-weight: var(--font-weight-600, 600); }
#content-cloud .slick-credential__value, .template_togglebox .slick-credential__value {
  min-width: 0;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-fg-strong);
  font-family: var(--font-mono);
  font-size: var(--font-size-13);
  overflow-wrap: anywhere;
}
#content-cloud .slick-credential__actions, .template_togglebox .slick-credential__actions { display: inline-flex; gap: var(--space-1); }
#content-cloud textarea.slick-credential__value, .template_togglebox textarea.slick-credential__value { width: 100%; resize: vertical; }
#content-cloud .slick-credential__value--empty, .template_togglebox .slick-credential__value--empty { font-family: inherit; color: var(--color-fg-muted); }
@media (max-width: 767px) {
  #content-cloud .slick-credential, .template_togglebox .slick-credential { grid-template-columns: minmax(0, 1fr) auto; }
  #content-cloud .slick-credential__label, .template_togglebox .slick-credential__label { grid-column: 1 / -1; }
}

/* ---- Help tip: a focusable trigger plus a role="tooltip" bubble ----
   <button type="button" class="slick-help" aria-describedby="tip-id">
     <i class="material-icons notranslate" aria-hidden="true">help_outline</i>
     <span class="slick-sr-only">About …</span></button>
   <span id="tip-id" class="slick-tip" role="tooltip" hidden>…</span>
   (components/help_tip.tpl renders it). js/slick-ui.js shows the bubble on
   hover, focus or tap, positions it fixed to the viewport so scroll
   containers never clip it, keeps it while the pointer is over it, and
   Escape dismisses it (WCAG 1.4.13). Without JS the text is still the
   trigger's accessible description. */
#content-cloud .slick-help,
.template_togglebox .slick-help,
.slick-dialog .slick-help,
.slick-slideover .slick-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0 0 0 var(--space-1);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-icon-accent);
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}
#content-cloud .slick-help :is(i, .material-icons, .ph),
.template_togglebox .slick-help :is(i, .material-icons, .ph),
.slick-dialog .slick-help :is(i, .material-icons, .ph),
.slick-slideover .slick-help :is(i, .material-icons, .ph) { font-size: var(--icon-size-md); line-height: 1; }
#content-cloud .slick-help:hover,
.template_togglebox .slick-help:hover,
.slick-dialog .slick-help:hover,
.slick-slideover .slick-help:hover { color: var(--color-link-hover); }
#content-cloud .slick-help:focus-visible,
.template_togglebox .slick-help:focus-visible,
.slick-dialog .slick-help:focus-visible,
.slick-slideover .slick-help:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline); outline-offset: var(--focus-outline-offset); }
@media (pointer: coarse) {
  #content-cloud .slick-help::after,
.template_togglebox .slick-help::after,
.slick-dialog .slick-help::after,
.slick-slideover .slick-help::after {
    content: "";
    position: absolute;
    inset: calc((100% - var(--touch-target-min)) / 2);
  }
}
/* Tips and action menus open as manual popovers (top layer) where supported,
   so a transformed ancestor such as a hovered .slick-card cannot offset
   them. inset/margin undo the UA [popover] centring; JS sets top/left. */
.slick-tip {
  position: fixed;
  inset: 0 auto auto 0;
  margin: 0;
  z-index: var(--z-tooltip);
  max-width: min(18rem, calc(100vw - 16px));
  padding: 6px 10px;
  border: 1px solid var(--tooltip-border);
  border-radius: var(--radius-md);
  background: var(--tooltip-bg);
  box-shadow: var(--shadow-lg);
  color: var(--tooltip-fg);
  font-size: var(--font-size-13);
  font-weight: var(--font-weight-400, 400);
  line-height: 1.4;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}
.slick-tip[hidden] { display: none; }

/* ---- Action menu (Slick menu): a row's overflow actions ----
   Trigger: <button type="button" class="slick-icon-btn" data-slick-menu
   aria-controls="menu-id" aria-haspopup="menu" aria-expanded="false"
   aria-label="Actions for web-01">. Menu: <div id="menu-id"
   class="slick-action-menu" role="menu" hidden> with role="menuitem"
   buttons or links. Fixed to the viewport (top layer where supported) so
   table and card overflow or a card's hover transform never clip or offset it; arrow keys, Home/End, Escape and Tab follow the ARIA menu pattern. */
.slick-action-menu {
  position: fixed;
  inset: 0 auto auto 0;
  margin: 0;
  z-index: var(--z-popover);
  min-width: 11rem;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
  color: var(--color-fg);
  font-size: var(--font-size-14);
}
.slick-action-menu[hidden] { display: none; }
.slick-action-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 32px;
  padding: 6px var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg);
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.slick-action-menu__item :is(i, .material-icons, .ph) { flex: none; font-size: var(--icon-size-md); line-height: 1; color: var(--color-fg-muted); }
.slick-action-menu__item:hover,
.slick-action-menu__item:focus-visible { background: var(--color-surface-2); color: var(--color-fg-strong); text-decoration: none; }
.slick-action-menu__item:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline); outline-offset: var(--focus-outline-offset-inset); }
.slick-action-menu__item--danger,
.slick-action-menu__item--danger :is(i, .material-icons, .ph) { color: var(--color-danger-strong); }
.slick-action-menu__item--danger:hover,
.slick-action-menu__item--danger:focus-visible { background: var(--color-danger-bg); color: var(--color-danger-strong); }
.slick-action-menu__item:disabled,
.slick-action-menu__item[aria-disabled="true"] { opacity: .55; cursor: not-allowed; background: transparent; }
.slick-action-menu__sep { height: 1px; margin: var(--space-1) 0; border: 0; background: var(--color-border); }
@media (pointer: coarse) {
  .slick-action-menu__item { min-height: var(--touch-target-min); }
}

/* ---- Dialogs on native <dialog> (top layer: no z-index, no clipping) ----
   .slick-dialog: confirm and small forms (Slick.confirm builds one).
   .slick-slideover: a right-hand panel for create/edit forms (Slick.slideover).
   Both use the one --color-scrim. Entry runs from @starting-style; closing
   adds .is-closing; under prefers-reduced-motion neither moves. */
.slick-dialog,
.slick-slideover {
  padding: 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-xl);
  color: var(--color-fg);
  font-size: var(--font-size-14);
}
.slick-dialog::backdrop,
.slick-slideover::backdrop { background: var(--color-scrim); }
.slick-dialog {
  width: min(30rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-radius: var(--radius-xl);
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), overlay var(--motion-base) allow-discrete, display var(--motion-base) allow-discrete;
}
.slick-dialog.is-closing { opacity: 0; transform: translateY(8px); }
@starting-style {
  .slick-dialog[open] { opacity: 0; transform: translateY(8px); }
}
.slick-dialog__body { padding: var(--space-5); }
.slick-dialog__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.slick-dialog__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-danger-bg);
  color: var(--color-danger-strong);
}
.slick-dialog--safe .slick-dialog__icon { background: var(--color-primary-bg); color: var(--color-primary-strong); }
.slick-dialog__icon :is(i, .material-icons, .ph) { font-size: var(--icon-size-md); line-height: 1; }
.slick-dialog__title { margin: 0; color: var(--color-fg-strong); font-size: var(--font-size-18, 18px); font-weight: var(--font-weight-600, 600); line-height: 1.3; }
.slick-dialog__text { margin: 0 0 var(--space-3); color: var(--color-fg); line-height: 1.5; max-width: var(--measure-prose); }
/* The thing being acted on, in an inset well, so the user confirms the right one. */
.slick-dialog__target {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-fg-strong);
  font-family: var(--font-mono);
  font-size: var(--font-size-13);
  overflow-wrap: anywhere;
}
.slick-dialog__field { margin: var(--space-4) 0 0; }
.slick-dialog__label { display: block; margin: 0 0 var(--space-2); color: var(--color-fg); font-weight: var(--font-weight-400, 400); }
.slick-dialog__label strong { font-family: var(--font-mono); color: var(--color-fg-strong); }
.slick-dialog__input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 var(--space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg, 16px);
}
.slick-dialog__input:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline); outline-offset: var(--focus-outline-offset); }
.slick-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
@media (max-width: 479px) {
  .slick-dialog__foot { flex-direction: column-reverse; align-items: stretch; }
  .slick-dialog__foot > * { width: 100%; justify-content: center; }
}

.slick-slideover {
  width: min(var(--slideover-width), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
  transform: none;
  transition: transform var(--motion-base) var(--ease-out), overlay var(--motion-base) allow-discrete, display var(--motion-base) allow-discrete;
}
.slick-slideover[open] { display: flex; flex-direction: column; }
.slick-slideover.is-closing { transform: translateX(100%); }
@starting-style {
  .slick-slideover[open] { transform: translateX(100%); }
}
.slick-slideover__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.slick-slideover__title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--color-fg-strong); font-size: var(--font-size-18, 18px); font-weight: var(--font-weight-600, 600); }
.slick-slideover__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-5); overscroll-behavior: contain; }
.slick-slideover__foot {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
@media (prefers-reduced-motion: reduce) {
  #content-cloud .slick-card:hover, .template_togglebox .slick-card:hover { transform: none; }
  #content-cloud .slick-choice, .template_togglebox .slick-choice { transition: none; }
  .slick-dialog,
  .slick-slideover { transition: none; }
  .slick-dialog.is-closing,
  .slick-slideover.is-closing { transform: none; }
}

/* Live region the JS layer announces through (visually hidden). */
.slick-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}