/*
 * Vristo component bridge for the Tailwind 4 + daisyUI 5 portal.
 *
 * Values mirror the purchased Vristo HTML sources (tailwind.config.js,
 * assets/css/tailwind.css and the elements-* examples) without loading the
 * original Tailwind 3 bundle, which would collide with daisyUI selectors.
 */

html[data-portal-ui="vristo"] {
  --color-primary: #4361ee;
  --color-primary-content: #fff;
  --color-secondary: #805dca;
  --color-secondary-content: #fff;
  --color-success: #00ab55;
  --color-success-content: #fff;
  --color-warning: #e2a03f;
  --color-warning-content: #fff;
  --color-error: #e7515a;
  --color-error-content: #fff;
  --color-info: #2196f3;
  --color-info-content: #fff;
  --radius-box: 0.375rem;
  --radius-field: 0.375rem;
  --radius-selector: 0.25rem;
  --vristo-secondary-soft: #ebe4f7;
  --vristo-success-soft: #ddf5f0;
  --vristo-warning-soft: #fff9ed;
  --vristo-danger-soft: #fff5f5;
  --vristo-info-soft: #e7f7ff;
  --vristo-dark: #3b3f5c;
  --vristo-dark-soft: #eaeaec;
  --vristo-subtle: #506690;
  --vristo-panel-gap: 1.5rem;
}

html[data-portal-ui="vristo"] #portal-main-container {
  color: var(--vristo-ink);
  font-size: 0.875rem;
  line-height: 1.5;
}

html[data-portal-ui="vristo"] #portal-main-container :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  line-height: 1.4;
}

html[data-portal-ui="vristo"] #portal-main-container :where(.panel, .card, .modal-box) {
  border-color: transparent;
  border-radius: 0.375rem;
  background: var(--vristo-panel);
  box-shadow: var(--vristo-panel-shadow);
}

html[data-portal-ui="vristo"] #portal-main-container .panel {
  position: relative;
  padding: 1.25rem;
}

html[data-portal-ui="vristo"] #portal-main-container .card > .card-body {
  gap: 1.25rem;
  padding: 1.25rem;
}

html[data-portal-ui="vristo"] #portal-main-container .card-title {
  min-height: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

html[data-portal-ui="vristo"] #portal-main-container .btn {
  min-height: 2.5rem;
  height: auto;
  border-width: 1px;
  border-radius: 0.375rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, currentColor 60%, transparent);
  transition-duration: 300ms;
}

html[data-portal-ui="vristo"] #portal-main-container .btn:hover,
html[data-portal-ui="vristo"] #portal-main-container .btn:focus-visible {
  box-shadow: none;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-sm {
  min-height: 2rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-xs {
  min-height: 1.625rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  line-height: 1rem;
}

html[data-portal-ui="vristo"] #portal-main-container :where(.btn-square, .btn-circle) {
  width: var(--size, 2.5rem);
  padding: 0;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-sm:is(.btn-square, .btn-circle) {
  --size: 2rem;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-xs:is(.btn-square, .btn-circle) {
  --size: 1.625rem;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-ghost {
  border-color: transparent;
  box-shadow: none;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-primary {
  border-color: var(--vristo-primary);
  background: var(--vristo-primary);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgb(67 97 238 / 0.6);
}

html[data-portal-ui="vristo"] #portal-main-container .btn-secondary {
  border-color: var(--vristo-secondary);
  background: var(--vristo-secondary);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgb(128 93 202 / 0.6);
}

html[data-portal-ui="vristo"] #portal-main-container .btn-success {
  border-color: var(--vristo-success);
  background: var(--vristo-success);
  color: #fff;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-error {
  border-color: var(--vristo-danger);
  background: var(--vristo-danger);
  color: #fff;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-warning {
  border-color: var(--vristo-warning);
  background: var(--vristo-warning);
  color: #fff;
}

html[data-portal-ui="vristo"] #portal-main-container .btn-info {
  border-color: var(--vristo-info);
  background: var(--vristo-info);
  color: #fff;
}

html[data-portal-ui="vristo"] #portal-main-container .badge {
  min-height: 0;
  height: auto;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
}

html[data-portal-ui="vristo"] #portal-main-container .badge-ghost {
  border-color: transparent;
  background: #f1f2f3;
  color: var(--vristo-subtle);
}

html[data-portal-ui="vristo"] #portal-main-container :where(.input, .select, .textarea, .file-input) {
  min-height: 2.5rem;
  border: 1px solid var(--vristo-line);
  border-radius: 0.375rem;
  background: var(--vristo-panel);
  color: var(--vristo-ink);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
}

html[data-portal-ui="vristo"] #portal-main-container :where(.input, .select, .textarea, .file-input):focus,
html[data-portal-ui="vristo"] #portal-main-container :where(.input, .select, .textarea, .file-input):focus-within {
  border-color: var(--vristo-primary);
  outline: 0;
  box-shadow: none;
}

html[data-portal-ui="vristo"] #portal-main-container .fieldset-legend,
html[data-portal-ui="vristo"] #portal-main-container label:not(.btn) {
  color: var(--vristo-subtle);
  font-weight: 600;
}

html[data-portal-ui="vristo"] #portal-main-container .alert {
  border-width: 0;
  border-radius: 0.25rem;
  padding: 0.875rem;
  box-shadow: none;
}

html[data-portal-ui="vristo"] #portal-main-container .alert-info {
  background: var(--vristo-info-soft);
  color: var(--vristo-info);
}

html[data-portal-ui="vristo"] #portal-main-container .alert-success {
  background: var(--vristo-success-soft);
  color: var(--vristo-success);
}

html[data-portal-ui="vristo"] #portal-main-container .alert-warning {
  background: var(--vristo-warning-soft);
  color: #b7791f;
}

html[data-portal-ui="vristo"] #portal-main-container .alert-error {
  background: var(--vristo-danger-soft);
  color: var(--vristo-danger);
}

html[data-portal-ui="vristo"] #portal-main-container .avatar > div {
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--vristo-panel);
}

html[data-portal-ui="vristo"] #portal-main-container .breadcrumbs {
  color: var(--vristo-subtle);
  font-size: 0.875rem;
}

html[data-portal-ui="vristo"] #portal-main-container .breadcrumbs a {
  color: var(--vristo-primary);
  transition: opacity 160ms ease;
}

html[data-portal-ui="vristo"] #portal-main-container .breadcrumbs a:hover {
  opacity: 0.72;
}

html[data-portal-ui="vristo"] #portal-main-container .dropdown-content {
  border: 0;
  border-radius: 0.25rem;
  background: var(--vristo-panel);
  color: var(--vristo-ink);
  box-shadow: var(--vristo-panel-shadow);
}

html[data-portal-ui="vristo"] #portal-main-container .dropdown-content.menu :where(li > a, li > button) {
  border-radius: 0;
  padding: 0.5rem 1rem;
}

html[data-portal-ui="vristo"] #portal-main-container .dropdown-content.menu :where(li > a, li > button):hover {
  background: rgb(67 97 238 / 0.1);
  color: var(--vristo-primary);
}

html[data-portal-ui="vristo"] #portal-main-container .progress {
  height: 0.625rem;
  border-radius: 9999px;
  background: #ebedf2;
}

html[data-portal-ui="vristo"] #portal-main-container .loading {
  color: var(--vristo-primary);
}

html[data-portal-ui="vristo"] #portal-main-container .tooltip::before {
  border-radius: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: var(--vristo-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

html[data-portal-ui="vristo"] #portal-main-container .join .join-item {
  border-color: var(--vristo-line);
}

html[data-portal-ui="vristo"] #portal-main-container :where(.pagination, [aria-label*="strán"] .join) .btn {
  min-width: 2.25rem;
  background: #e0e6ed;
  color: var(--vristo-dark);
  box-shadow: none;
}

html[data-portal-ui="vristo"] #portal-main-container :where(.pagination, [aria-label*="strán"] .join) .btn:is(:hover, :focus-visible, .btn-active) {
  border-color: var(--vristo-primary);
  background: var(--vristo-primary);
  color: #fff;
}

html[data-portal-ui="vristo"] #portal-main-container .menu :where(li > a, li > button, li > details > summary) {
  border-radius: 0.375rem;
}

html[data-portal-ui="vristo"] #portal-main-container .menu :where(li > a, li > button, li > details > summary):hover {
  background: rgb(67 97 238 / 0.1);
  color: var(--vristo-primary);
}

html[data-portal-ui="vristo"] #portal-main-container .table :where(th) {
  border-color: var(--vristo-line);
  background: #f6f8fa;
  color: var(--vristo-dark);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

html[data-portal-ui="vristo"] #portal-main-container .table :where(td) {
  border-color: var(--vristo-line);
}

html[data-portal-ui="vristo"] #portal-main-container .link-primary {
  color: var(--vristo-primary);
  text-decoration-color: color-mix(in srgb, var(--vristo-primary) 45%, transparent);
}

html[data-portal-ui="vristo"][data-theme="graphite"] {
  --vristo-subtle: #888ea8;
}

html[data-portal-ui="vristo"][data-theme="graphite"] #portal-main-container .badge-ghost,
html[data-portal-ui="vristo"][data-theme="graphite"] #portal-main-container :where(.pagination, [aria-label*="strán"] .join) .btn,
html[data-portal-ui="vristo"][data-theme="graphite"] #portal-main-container .table :where(th) {
  background: #191e3a;
  color: #e0e6ed;
}

html[data-portal-ui="vristo"][data-theme="graphite"] #portal-main-container :where(.input, .select, .textarea, .file-input) {
  border-color: #17263c;
  background: #121e32;
  color: #888ea8;
}