/*
 * VNP presentation layer for dm_support.
 * Kept in Athena so vendor module updates do not overwrite it.
 */

.dmsup-wrap {
  --dmsup-primary: var(--vnp-color-link) !important;
  --dmsup-primary-light: var(--vnp-color-accent-soft) !important;
  --dmsup-primary-mid: var(--vnp-color-accent) !important;
  --dmsup-primary-dark: var(--vnp-color-accent-dark) !important;
  --dmsup-surface: var(--vnp-color-surface) !important;
  --dmsup-surface-alt: var(--vnp-color-surface-soft) !important;
  --dmsup-border: var(--vnp-color-border) !important;
  --dmsup-text: var(--vnp-color-text) !important;
  --dmsup-text-muted: var(--vnp-color-text-secondary) !important;
  --dmsup-bg: var(--vnp-color-surface-soft) !important;
  color: var(--vnp-color-text);
  font: var(--vnp-font-weight-regular) var(--vnp-font-size-body)/var(--vnp-line-height-body) var(--vnp-font-family);
}

.dmsup-wrap h1,
.dmsup-wrap h2,
.dmsup-wrap h3,
.dmsup-wrap h4,
.dmsup-wrap h5,
.dmsup-wrap h6,
.dmsup-sidebar-title,
.dmsup-type-name,
.dmsup-product-name,
.dmsup-card-title {
  color: var(--vnp-color-ink);
  font-family: var(--vnp-font-family);
  font-weight: var(--vnp-font-weight-semibold);
}

.dmsup-card,
.dmsup-sidebar-card,
.dmsup-section,
.dmsup-modal {
  border-color: var(--vnp-color-border);
  border-radius: var(--vnp-radius-card);
  background: var(--vnp-color-surface);
  box-shadow: var(--vnp-shadow-card);
}

.dmsup-sidebar-desc,
.dmsup-benefit-text span,
.dmsup-section-head p,
.dmsup-input-hint,
.dmsup-product-meta,
.dmsup-req-date,
.dmsup-detail-header-info p,
.dmsup-timeline-date,
.dmsup-attachment-meta,
.dmsup-file-size {
  color: var(--vnp-color-text-secondary);
}

.dmsup-benefit-icon,
.dmsup-help-box,
.dmsup-type-icon-wrap,
.dmsup-type-arrow,
.dmsup-req-count {
  color: var(--vnp-color-link);
  background: var(--vnp-color-accent-soft);
}

.dmsup-benefit-icon svg,
.dmsup-help-contact svg,
.dmsup-type-icon-wrap svg,
.dmsup-type-arrow svg {
  color: var(--vnp-color-link);
  stroke: currentColor;
}

.dmsup-help-box {
  border-color: var(--vnp-color-accent);
  border-radius: var(--vnp-radius-control);
}

.dmsup-help-box-title,
.dmsup-help-box a,
.dmsup-help-contact a,
.dmsup-req-ref,
.dmsup-req-action,
.dmsup-pdf-link,
#dmsup-desc-toggle,
.dmsup-dropzone-sub span {
  color: var(--vnp-color-link);
}

.dmsup-help-box a:hover,
.dmsup-help-box a:focus-visible,
.dmsup-help-contact a:hover,
.dmsup-help-contact a:focus-visible,
.dmsup-req-action:hover,
.dmsup-pdf-link:hover,
#dmsup-desc-toggle:hover {
  color: var(--vnp-color-accent-dark);
}

.dmsup-step:not(:last-child)::after {
  background: var(--vnp-color-border);
}

.dmsup-step.is-done:not(:last-child)::after,
.dmsup-step.is-active:not(:last-child)::after {
  background: var(--vnp-color-accent);
}

.dmsup-step-circle {
  border-color: var(--vnp-color-border-strong);
  color: var(--vnp-color-text-secondary);
  background: var(--vnp-color-surface);
}

.dmsup-step.is-done .dmsup-step-circle {
  border-color: var(--vnp-color-accent);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent);
}

.dmsup-step.is-active .dmsup-step-circle {
  border-color: var(--vnp-color-ink);
  color: var(--vnp-color-on-dark);
  background: var(--vnp-color-ink);
  box-shadow: var(--vnp-focus-ring);
}

.dmsup-step.is-active .dmsup-step-label,
.dmsup-step.is-done .dmsup-step-label {
  color: var(--vnp-color-ink);
}

.dmsup-step-back-link:hover .dmsup-step-circle,
.dmsup-step-back-link:focus-visible .dmsup-step-circle {
  border-color: var(--vnp-color-accent);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent-soft);
}

.dmsup-krok-badge {
  color: var(--vnp-color-link);
  background: var(--vnp-color-accent-soft);
}

.dmsup-type-card {
  border-color: var(--vnp-color-border);
  border-radius: var(--vnp-radius-card);
  color: var(--vnp-color-text);
  background: var(--vnp-color-surface);
  box-shadow: none;
  transition: color var(--vnp-transition), background-color var(--vnp-transition), border-color var(--vnp-transition), box-shadow var(--vnp-transition), transform var(--vnp-transition);
}

.dmsup-type-card:hover,
.dmsup-type-card:focus,
.dmsup-type-card:focus-visible {
  border-color: var(--vnp-color-accent);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent-soft);
  box-shadow: var(--vnp-shadow-float);
  transform: translateY(-2px);
}

.dmsup-type-card:hover .dmsup-type-icon-wrap,
.dmsup-type-card:focus .dmsup-type-icon-wrap,
.dmsup-type-card:focus-visible .dmsup-type-icon-wrap,
.dmsup-type-card:hover .dmsup-type-arrow,
.dmsup-type-card:focus .dmsup-type-arrow,
.dmsup-type-card:focus-visible .dmsup-type-arrow {
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent);
}

.dmsup-section-strip,
.dmsup-req-table thead th,
.dmsup-order-table th,
.dmsup-products-table th {
  border-color: var(--vnp-color-border);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-surface-soft);
}

.dmsup-req-table tbody tr,
.dmsup-order-table td,
.dmsup-products-table td,
.dmsup-info-row,
.dmsup-divider {
  border-color: var(--vnp-color-border);
}

.dmsup-req-table tbody tr:hover,
.dmsup-order-table tr:hover td,
.dmsup-products-table tbody tr:hover td,
.dmsup-req-mobile-item:hover {
  background: var(--vnp-color-accent-soft);
}

.dmsup-label,
.dmsup-sub-label,
.dmsup-info-label {
  color: var(--vnp-color-ink);
  font-weight: var(--vnp-font-weight-semibold);
}

.dmsup-required {
  color: var(--vnp-color-danger);
}

.dmsup-input,
.dmsup-select,
.dmsup-textarea,
.dmsup-qty-select {
  min-height: var(--vnp-control-height);
  border-color: var(--vnp-color-border-strong);
  border-radius: var(--vnp-radius-control);
  color: var(--vnp-color-text);
  background-color: var(--vnp-color-surface);
  font-family: var(--vnp-font-family);
  font-size: 16px;
  transition: border-color var(--vnp-transition), box-shadow var(--vnp-transition), background-color var(--vnp-transition);
}

.dmsup-input:focus,
.dmsup-select:focus,
.dmsup-textarea:focus,
.dmsup-qty-select:focus {
  border-color: var(--vnp-color-accent);
  outline: 0;
  box-shadow: var(--vnp-focus-ring);
}

.dmsup-checkbox,
.dmsup-check-all input[type="checkbox"] {
  accent-color: var(--vnp-color-accent);
}

.dmsup-btn {
  min-height: var(--vnp-control-height);
  border-radius: var(--vnp-radius-control);
  font-family: var(--vnp-font-family);
  font-size: 14px;
  font-weight: var(--vnp-font-weight-semibold);
  text-transform: none;
  transition: color var(--vnp-transition), background-color var(--vnp-transition), border-color var(--vnp-transition), box-shadow var(--vnp-transition);
}

.dmsup-btn-primary {
  border-color: var(--vnp-color-ink);
  color: var(--vnp-color-on-dark);
  background: var(--vnp-color-ink);
}

.dmsup-btn-primary:hover,
.dmsup-btn-primary:active,
.dmsup-btn-primary:focus-visible {
  border-color: var(--vnp-color-accent);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent);
}

.dmsup-btn-secondary {
  border-color: var(--vnp-color-border-strong);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-surface);
}

.dmsup-btn-secondary:hover,
.dmsup-btn-secondary:active,
.dmsup-btn-secondary:focus-visible {
  border-color: var(--vnp-color-accent);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent-soft);
}

.dmsup-btn-danger {
  border-color: var(--vnp-color-danger);
  color: var(--vnp-color-danger);
  background: var(--vnp-color-surface);
}

.dmsup-btn-danger:hover,
.dmsup-btn-danger:focus-visible {
  color: var(--vnp-color-on-dark);
  background: var(--vnp-color-danger);
}

.dmsup-btn:focus-visible,
.dmsup-type-card:focus-visible,
.dmsup-attachment-item:focus-visible,
.dmsup-step-back-link:focus-visible,
.dmsup-modal-close:focus-visible,
.dmsup-file-remove:focus-visible {
  outline: 2px solid var(--vnp-color-accent);
  outline-offset: 2px;
  box-shadow: var(--vnp-focus-ring);
}

.dmsup-info-alert {
  border-radius: var(--vnp-radius-card);
}

.dmsup-info-alert.is-info {
  border-color: var(--vnp-color-link);
  color: var(--vnp-color-link);
  background: color-mix(in srgb, var(--vnp-color-link) 7%, var(--vnp-color-surface));
}

.dmsup-info-alert.is-success {
  border-color: var(--vnp-color-success);
  color: var(--vnp-color-success);
  background: var(--vnp-color-success-soft);
}

.dmsup-info-alert.is-danger,
.dmsup-error-item {
  border-color: var(--vnp-color-danger);
  color: var(--vnp-color-danger);
  background: var(--vnp-color-danger-soft);
}

.dmsup-info-alert.is-warning,
.dmsup-type-warning {
  border-color: var(--vnp-color-accent-dark);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent-soft);
}

.dmsup-dropzone {
  border-color: var(--vnp-color-border-strong);
  border-radius: var(--vnp-radius-card);
  background: var(--vnp-color-surface-soft);
}

.dmsup-dropzone:hover,
.dmsup-dropzone.drag-over,
.dmsup-dropzone:focus-within {
  border-color: var(--vnp-color-accent);
  background: var(--vnp-color-accent-soft);
  box-shadow: var(--vnp-focus-ring);
}

.dmsup-file-row,
.dmsup-attachment-item,
.dmsup-description-box,
.dmsup-details-summary {
  border-color: var(--vnp-color-border);
  border-radius: var(--vnp-radius-control);
  background: var(--vnp-color-surface-soft);
}

.dmsup-attachment-item:hover,
.dmsup-attachment-item:focus-visible,
.dmsup-details-summary:hover {
  border-color: var(--vnp-color-accent);
  background: var(--vnp-color-accent-soft);
}

.dmsup-timeline-item {
  border-color: var(--vnp-color-border);
}

.dmsup-chat-msg.is-eshop .dmsup-chat-bubble {
  border-color: var(--vnp-color-accent);
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent-soft);
}

.dmsup-chat-msg.is-customer .dmsup-chat-bubble {
  border-color: var(--vnp-color-border);
  color: var(--vnp-color-text);
  background: var(--vnp-color-surface-soft);
}

.dmsup-modal-overlay {
  background: rgb(41 39 34 / 58%);
}

.dmsup-modal-header {
  border-color: var(--vnp-color-border);
  background: var(--vnp-color-surface-soft);
}

.dmsup-modal-close:hover {
  color: var(--vnp-color-ink);
  background: var(--vnp-color-accent-soft);
}

@media (max-width: 700px) {
  .dmsup-wrap {
    padding-top: 12px;
  }

  .dmsup-card,
  .dmsup-sidebar-card,
  .dmsup-section-body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .dmsup-type-card:hover,
  .dmsup-type-card:focus,
  .dmsup-type-card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dmsup-wrap *,
  .dmsup-wrap *::before,
  .dmsup-wrap *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}