/*
 * Theme-neutrale Komponenten (§7 Spec).
 * Nur Spec-Tokens aus css/tokens.css — theme-neutral, keine theme-gescopten Farbregeln.
 */

/*
 * Accent-fill link chrome — kill Dore `a:hover/focus { color: var(--link-hover) !important }`
 * cascade on primary CTAs / pills / tile buttons that are also <a>.
 * Module KPI variants (success/warning subtle) override in dashboard.css with higher specificity.
 */
a.btn.btn-primary:not(.btn-link):link,
a.btn.btn-primary:not(.btn-link):visited,
a.btn.btn-primary:not(.btn-link):hover,
a.btn.btn-primary:not(.btn-link):focus,
a.btn.btn-primary:not(.btn-link):focus-visible,
a.btn.btn-primary:not(.btn-link):active,
a.dashboard-kpi-card__cta:link,
a.dashboard-kpi-card__cta:visited,
a.dashboard-kpi-card__cta:hover,
a.dashboard-kpi-card__cta:focus,
a.dashboard-kpi-card__cta:focus-visible,
a.dashboard-kpi-card__cta:active,
a.vserver-tile__btn--details:link,
a.vserver-tile__btn--details:visited,
a.vserver-tile__btn--details:hover,
a.vserver-tile__btn--details:focus,
a.vserver-tile__btn--details:focus-visible,
a.vserver-tile__btn--details:active,
a.vserver-tile__btn--create:link,
a.vserver-tile__btn--create:visited,
a.vserver-tile__btn--create:hover,
a.vserver-tile__btn--create:focus,
a.vserver-tile__btn--create:focus-visible,
a.vserver-tile__btn--create:active,
a.admin-dash-hero__btn--primary:link,
a.admin-dash-hero__btn--primary:visited,
a.admin-dash-hero__btn--primary:hover,
a.admin-dash-hero__btn--primary:focus,
a.admin-dash-hero__btn--primary:focus-visible,
a.admin-dash-hero__btn--primary:active,
a[class*="__pill"].is-active:link,
a[class*="__pill"].is-active:visited,
a[class*="__pill"].is-active:hover,
a[class*="__pill"].is-active:focus,
a[class*="__pill"].is-active:focus-visible,
a[class*="__pill"].is-active:active {
  color: var(--on-accent) !important;
  text-decoration: none !important;
}

a[class*="__pill"]:not(.is-active):hover,
a[class*="__pill"]:not(.is-active):focus,
a[class*="__pill"]:not(.is-active):focus-visible {
  text-decoration: none !important;
}

a[class*="__cta"],
a[class*="__pill"],
a.btn {
  text-decoration: none !important;
}

/* ─── Primary ─── */
.btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled) {
  color: var(--on-accent) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-1);
  filter: none;
}

.btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled):hover,
.btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled):focus {
  color: var(--on-accent) !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: var(--shadow-1);
  filter: none;
}

.btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled):active,
.btn.btn-primary:not(.btn-arrow):not(.btn-link):not(.check-button):not(:disabled):not(.disabled).active,
.show > .btn.btn-primary.dropdown-toggle:not(.btn-arrow):not(.btn-link) {
  color: var(--on-accent) !important;
  background: var(--accent-active) !important;
  border-color: var(--accent-active) !important;
  box-shadow: var(--shadow-1);
  filter: none;
}

.dashboard-hero__btn--primary,
.vserver-firewall-btn--primary {
  color: var(--on-accent) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-1);
}

.dashboard-hero__btn--primary:hover,
.vserver-firewall-btn--primary:hover:not(:disabled),
.vserver-firewall-btn--primary:focus:not(:disabled) {
  color: var(--on-accent) !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  box-shadow: var(--shadow-1);
}

/* ─── Secondary ─── */
.btn.btn-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
  color: var(--heading) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none;
}

.btn.btn-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
.btn.btn-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
  color: var(--heading) !important;
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
}

.vserver-firewall-btn--secondary {
  color: var(--heading) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-strong) !important;
  box-shadow: none;
}

.vserver-firewall-btn--secondary:hover:not(:disabled),
.vserver-firewall-btn--secondary:focus:not(:disabled) {
  color: var(--heading) !important;
  background: var(--surface-3) !important;
  border-color: var(--border-strong) !important;
}

/* ─── Outline ─── */
.btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled),
.btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled),
.vserver-firewall-btn--outline {
  color: var(--heading) !important;
  background: transparent !important;
  border-color: var(--border-control) !important;
  box-shadow: none;
}

.btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
.btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus,
.btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
.btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus,
.vserver-firewall-btn--outline:hover:not(:disabled),
.vserver-firewall-btn--outline:focus:not(:disabled) {
  color: var(--heading) !important;
  background: var(--surface-2) !important;
  border-color: var(--border-control) !important;
  box-shadow: none;
  filter: none;
}

.modal-footer .btn.btn-outline-primary,
.modal-footer .btn.btn-outline-secondary,
.vcp-account-modal__footer .btn.btn-outline-primary,
.vcp-account-modal__footer .btn.btn-outline-secondary,
.vserver-edit-reinstall-modal__footer .btn.btn-outline-primary,
.vserver-edit-reinstall-modal__footer .btn.btn-outline-secondary {
  color: var(--heading) !important;
  background: transparent !important;
  border-color: var(--border-control) !important;
}

/* ─── Ghost ─── */
.btn.btn-ghost:not(:disabled):not(.disabled),
.dashboard-hero__btn--ghost {
  color: var(--text-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

.btn.btn-ghost:not(:disabled):not(.disabled):hover,
.btn.btn-ghost:not(:disabled):not(.disabled):focus,
.dashboard-hero__btn--ghost:hover,
.dashboard-hero__btn--ghost:focus {
  color: var(--text) !important;
  background: var(--surface-2) !important;
  border-color: transparent !important;
}

/* ─── Delete ─── */
.btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
  color: var(--danger) !important;
  background: var(--danger-subtle) !important;
  border-color: var(--danger-border) !important;
  box-shadow: none;
  filter: none;
}

.btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
.btn.btn-danger:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
  color: var(--danger) !important;
  background: var(--danger-subtle-hover) !important;
  border-color: var(--danger-border) !important;
  box-shadow: none;
  filter: none;
}

/* ─── Success / Warning (Spec §7 Status: *-subtle Fill + Status-Text) ─── */
.btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
  color: var(--success) !important;
  background: var(--success-subtle) !important;
  border-color: var(--success-border) !important;
  box-shadow: none;
  filter: none;
}

.btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
.btn.btn-success:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
  color: var(--success) !important;
  background: var(--success-subtle) !important;
  border-color: var(--success-border) !important;
  filter: none;
}

.btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled) {
  color: var(--warning) !important;
  background: var(--warning-subtle) !important;
  border-color: var(--warning-border) !important;
  box-shadow: none;
  filter: none;
}

.btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):hover,
.btn.btn-warning:not(.btn-arrow):not(.btn-link):not(:disabled):not(.disabled):focus {
  color: var(--warning) !important;
  background: var(--warning-subtle) !important;
  border-color: var(--warning-border) !important;
  filter: none;
}

/* ─── Disabled (no opacity) ─── */
.btn:disabled,
.btn.disabled,
.btn.btn-primary:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-primary:not(.btn-arrow):not(.btn-link).disabled,
.btn.btn-outline-primary:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-outline-primary:not(.btn-arrow):not(.btn-link).disabled,
.btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-outline-secondary:not(.btn-arrow):not(.btn-link).disabled,
.btn.btn-secondary:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-secondary:not(.btn-arrow):not(.btn-link).disabled,
.btn.btn-danger:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-danger:not(.btn-arrow):not(.btn-link).disabled,
.btn.btn-success:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-success:not(.btn-arrow):not(.btn-link).disabled,
.btn.btn-warning:not(.btn-arrow):not(.btn-link):disabled,
.btn.btn-warning:not(.btn-arrow):not(.btn-link).disabled {
  color: var(--text-disabled) !important;
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none;
}

/* ─── Input ─── */
.form-control,
.custom-select,
.form-control-plaintext,
textarea.form-control,
select.form-control {
  color: var(--text);
  background-color: var(--input-bg);
  border-color: var(--border-control);
}

.form-control:hover:not(:disabled):not([readonly]),
.custom-select:hover:not(:disabled) {
  border-color: var(--text-muted);
}

.form-control:focus,
.custom-select:focus {
  color: var(--text);
  background-color: var(--input-bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.custom-select.is-invalid,
.was-validated .custom-select:invalid {
  border-color: var(--danger);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.custom-select.is-invalid:focus,
.was-validated .custom-select:invalid:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-subtle-hover);
}

.form-control:disabled,
.form-control[readonly],
.custom-select:disabled {
  color: var(--text-disabled);
  background-color: var(--surface-2);
  border-color: var(--border);
  opacity: 1;
}

.form-control::placeholder,
.custom-select::placeholder {
  color: var(--text-faint);
}

select.form-control,
.custom-select {
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
}

/* ─── focus-visible ─── */
.btn:focus-visible,
a:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible,
.nav-link:focus-visible,
.custom-control-input:focus-visible ~ .custom-control-label::before,
.custom-switch-input:focus-visible + .custom-switch-btn {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Selected row ─── */
.table .table-active,
.table tr.table-active,
.table tr.selected,
.table tr.is-selected,
.list-group-item.active,
.list-group-item.selected {
  color: var(--text);
  background-color: var(--accent-subtle);
  border-color: var(--accent-border);
}

.table tbody tr:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

/* ─── Tabs / Nav ─── */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--text-muted);
  background-color: transparent;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--heading);
  background-color: transparent;
  border-color: transparent transparent var(--accent);
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--heading);
  background-color: var(--accent-subtle);
  border-color: var(--accent-border);
}

.menu .main-menu ul li a:hover,
.menu .main-menu ul li a:focus,
.menu .main-menu ul li button.vcp-logout-link:hover,
.menu .main-menu ul li button.vcp-logout-link:focus {
  color: var(--text);
  background: var(--surface-2);
}

.menu .main-menu ul li.active a {
  color: var(--heading);
  background: var(--accent-subtle);
}

/* ─── checkbox / radio / range ─── */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--accent);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--accent);
  border-color: var(--accent);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ─── Switch ─── */
.custom-switch .custom-switch-input + .custom-switch-btn {
  background: var(--surface-3);
  border-color: var(--border-control);
}

.custom-switch .custom-switch-input + .custom-switch-btn:after {
  background: var(--knob);
  box-shadow: var(--shadow-1);
}

.custom-switch .custom-switch-input:checked + .custom-switch-btn,
.custom-switch.custom-switch-primary .custom-switch-input:checked + .custom-switch-btn,
.custom-switch.custom-switch-secondary .custom-switch-input:checked + .custom-switch-btn,
.custom-switch.custom-switch-primary-inverse .custom-switch-input:checked + .custom-switch-btn,
.custom-switch.custom-switch-secondary-inverse .custom-switch-input:checked + .custom-switch-btn {
  background: var(--accent);
  border-color: var(--accent);
}

.custom-switch .custom-switch-input:checked + .custom-switch-btn:after,
.custom-switch.custom-switch-primary-inverse .custom-switch-input:checked + .custom-switch-btn:after,
.custom-switch.custom-switch-secondary-inverse .custom-switch-input:checked + .custom-switch-btn:after {
  background: var(--on-accent);
  box-shadow: var(--shadow-1);
}

/* ─── Tooltip ─── */
.tooltip .tooltip-inner {
  color: var(--tooltip-text);
  background-color: var(--tooltip-bg);
  border-color: transparent;
  box-shadow: var(--shadow-2);
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: var(--tooltip-bg);
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: var(--tooltip-bg);
}

.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: var(--tooltip-bg);
}

.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: var(--tooltip-bg);
}

/* ─── Popover / raised surfaces ─── */
.popover {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--border-raised);
  box-shadow: var(--shadow-2);
}

.popover .popover-body,
.popover .popover-header {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--border-raised);
}

.dropdown-menu {
  color: var(--text);
  background-color: var(--surface-raised);
  border-color: var(--border-raised);
  box-shadow: var(--shadow-2);
}

.dropdown-item {
  color: var(--text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--text);
  background-color: var(--surface-raised-hover);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--on-accent);
  background-color: var(--accent);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
  color: var(--danger);
  background-color: var(--danger-subtle);
}

/* ─── kbd / mark ─── */
kbd {
  color: var(--text);
  background-color: var(--surface-raised);
  border: 1px solid var(--border-strong);
}

mark {
  color: var(--text);
  background-color: var(--highlight);
}

/* ─── Skeleton ─── */
.skeleton,
.vcp-skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 0%,
    var(--skeleton-shine) 50%,
    var(--skeleton-base) 100%
  );
}

/* ─── Code ─── */
pre,
.code-block,
.vcp-code {
  color: var(--code-text);
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
}

code {
  color: var(--code-text);
  background-color: var(--code-bg);
  border: 1px solid var(--code-border);
}

/* ─── Footer (app footer shell) ─── */
.vcp-app-footer,
footer.vcp-footer {
  color: var(--footer-text);
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.vcp-app-footer a,
footer.vcp-footer a {
  color: var(--footer-link);
}

.vcp-app-footer a:hover,
footer.vcp-footer a:hover {
  color: var(--footer-link-hover);
}

.vcp-app-footer a:focus-visible,
footer.vcp-footer a:focus-visible {
  outline: 2px solid var(--footer-link);
  outline-offset: 2px;
}