/**
 * VETA RH Design System — Components v2
 * Unified component library. All values reference --v-* tokens from tokens.css.
 * Dark mode is automatic — tokens swap values via @media / [data-theme].
 *
 * Table of contents:
 *   0. Reset
 *   1. Card (.v-card)
 *   2. Button (.v-btn)
 *   3. Forms (.v-input, .v-select, .v-textarea)
 *   4. Badge (.v-badge)
 *   5. Alert (.v-alert)
 *   6. Table (.v-table)
 *   7. Modal (.v-modal)
 *   8. Toast (.v-toast)
 *   9. Skeleton (.v-skeleton)
 *  10. Avatar (.v-avatar)
 *  11. Tooltip (.v-tooltip)
 *  12. Progress (.v-progress)
 *  13. Tabs (.v-tabs)
 *  14. Accordion (.v-accordion)
 *  15. Switch (.v-switch)
 *  16. Dropdown (.v-dropdown)
 *  17. Spinner / Loading dots (.v-spinner, .v-loading-dots)
 *  18. Empty state (.v-empty-state)
 *  19. Error state (.v-error-state)
 *  20. KPI card (.v-kpi-card)
 *  21. Back link (.v-back-link)
 *  22. Color dot (.v-color-dot)
 *  23. Page header (.v-page-header)
 *  24. Divider (.v-divider)
 *  25. Focus visible (global)
 *  26. Selection (global)
 *  27. Scrollbar (global)
 *  28. Smooth scroll (global)
 *  29. Keyframes
 */


/* === RESET : minimal === */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--v-font-body);
  font-size: var(--v-text-base);
  line-height: var(--v-leading-normal);
  color: var(--v-text-primary);
  background: var(--v-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}


/* === COMPONENT 1 : .v-card === */

.v-card {
  background: var(--v-bg-elevated);
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-card);
  padding: var(--v-space-6);
  box-shadow: var(--v-shadow-sm);
  transition: box-shadow var(--v-duration-fast) var(--v-ease-default),
              transform var(--v-duration-fast) var(--v-ease-default);
}

.v-card:hover {
  box-shadow: var(--v-shadow-md);
}

.v-card--interactive {
  cursor: pointer;
}

.v-card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--v-shadow-lg);
}

.v-card--interactive:active {
  transform: translateY(0);
  box-shadow: var(--v-shadow-sm);
}

.v-card--glass {
  background: var(--v-glass-bg);
  backdrop-filter: var(--v-glass-blur);
  -webkit-backdrop-filter: var(--v-glass-blur);
  border: 1px solid var(--v-glass-border);
}


/* === COMPONENT 2 : .v-btn === */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-space-2);
  border: 1px solid transparent;
  border-radius: var(--v-radius-button);
  font-family: var(--v-font-body);
  font-weight: var(--v-weight-medium);
  font-size: var(--v-text-sm);
  line-height: var(--v-leading-none);
  padding: var(--v-space-2) var(--v-space-4);
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition: background var(--v-duration-fast) var(--v-ease-default),
              color var(--v-duration-fast) var(--v-ease-default),
              border-color var(--v-duration-fast) var(--v-ease-default),
              box-shadow var(--v-duration-fast) var(--v-ease-default),
              transform var(--v-duration-micro) var(--v-ease-default),
              opacity var(--v-duration-fast) var(--v-ease-default);
}

.v-btn:active {
  transform: scale(0.98);
}

/* Primary */
.v-btn--primary {
  background: var(--v-accent);
  color: var(--v-text-on-accent);
  border-color: var(--v-accent);
}

.v-btn--primary:hover {
  background: var(--v-accent-hover);
  border-color: var(--v-accent-hover);
  box-shadow: var(--v-shadow-accent);
}

.v-btn--primary:active {
  background: var(--v-accent-active);
  border-color: var(--v-accent-active);
}

/* Secondary */
.v-btn--secondary {
  background: var(--v-bg-elevated);
  color: var(--v-text-primary);
  border-color: var(--v-border-default);
}

.v-btn--secondary:hover {
  background: var(--v-bg-subtle);
  border-color: var(--v-border-strong);
}

.v-btn--secondary:active {
  background: var(--v-bg-muted);
}

/* Ghost */
.v-btn--ghost {
  background: transparent;
  color: var(--v-text-secondary);
  border-color: transparent;
}

.v-btn--ghost:hover {
  background: var(--v-bg-subtle);
  color: var(--v-text-primary);
}

.v-btn--ghost:active {
  background: var(--v-bg-muted);
}

/* Danger */
.v-btn--danger {
  background: var(--v-error);
  color: var(--v-text-on-accent);
  border-color: var(--v-error);
}

.v-btn--danger:hover {
  opacity: 0.9;
  box-shadow: var(--v-shadow-error);
}

.v-btn--danger:active {
  opacity: 0.85;
}

/* Sizes */
.v-btn--sm {
  font-size: var(--v-text-xs);
  padding: var(--v-space-1) var(--v-space-3);
  min-height: 2rem;
  gap: var(--v-space-1);
}

.v-btn--lg {
  font-size: var(--v-text-md);
  padding: var(--v-space-3) var(--v-space-6);
  min-height: 3rem;
  gap: var(--v-space-2);
}

/* Disabled */
.v-btn:disabled,
.v-btn[disabled],
.v-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Loading */
.v-btn--loading {
  color: transparent;
  pointer-events: none;
}

.v-btn--loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--v-radius-full);
  animation: v-spin var(--v-duration-slower) linear infinite;
  /* Reset color to text for visibility */
  color: var(--v-text-on-accent);
}

.v-btn--secondary.v-btn--loading::after,
.v-btn--ghost.v-btn--loading::after {
  color: var(--v-text-primary);
}

/* Button icon only */
.v-btn--icon {
  padding: var(--v-space-2);
  min-height: auto;
  aspect-ratio: 1;
}

.v-btn svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}


/* === COMPONENT 3 : .v-input / .v-select / .v-textarea === */

.v-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--v-space-1-5);
}

.v-label {
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  font-weight: var(--v-weight-medium);
  color: var(--v-text-primary);
  line-height: var(--v-leading-tight);
}

.v-label--required::after {
  content: ' *';
  color: var(--v-error);
}

.v-input,
.v-select,
.v-textarea {
  display: block;
  width: 100%;
  padding: var(--v-space-2) var(--v-space-3);
  font-family: var(--v-font-body);
  font-size: var(--v-text-base);
  line-height: var(--v-leading-normal);
  color: var(--v-text-primary);
  background: var(--v-bg-elevated);
  border: 1px solid var(--v-border-default);
  border-radius: var(--v-radius-input);
  transition: border-color var(--v-duration-fast) var(--v-ease-default),
              box-shadow var(--v-duration-fast) var(--v-ease-default);
}

.v-input:hover,
.v-select:hover,
.v-textarea:hover {
  border-color: var(--v-border-strong);
}

.v-input:focus,
.v-select:focus,
.v-textarea:focus {
  outline: none;
  border-color: var(--v-border-focus);
  box-shadow: var(--v-ring);
}

.v-input::placeholder,
.v-textarea::placeholder {
  color: var(--v-text-muted);
}

/* Error */
.v-input--error,
.v-select--error,
.v-textarea--error {
  border-color: var(--v-error);
}

.v-input--error:focus,
.v-select--error:focus,
.v-textarea--error:focus {
  box-shadow: 0 0 0 var(--v-ring-offset) var(--v-bg-base),
              0 0 0 calc(var(--v-ring-offset) + var(--v-ring-width)) var(--v-error);
}

.v-form-error {
  font-size: var(--v-text-xs);
  color: var(--v-error);
  line-height: var(--v-leading-normal);
}

.v-form-hint {
  font-size: var(--v-text-xs);
  color: var(--v-text-muted);
  line-height: var(--v-leading-normal);
}

/* Disabled */
.v-input:disabled,
.v-select:disabled,
.v-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--v-bg-muted);
}

/* Select custom arrow */
.v-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--v-space-3) center;
  padding-right: var(--v-space-8);
}

/* Textarea */
.v-textarea {
  min-height: calc(var(--v-space-6) * 4);
  resize: vertical;
}


/* === COMPONENT 4 : .v-badge === */

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-1);
  padding: var(--v-space-0-5) var(--v-space-2);
  font-family: var(--v-font-body);
  font-size: var(--v-text-xs);
  font-weight: var(--v-weight-medium);
  line-height: var(--v-leading-tight);
  border-radius: var(--v-radius-badge);
  white-space: nowrap;
  /* Neutral by default */
  background: var(--v-bg-muted);
  color: var(--v-text-secondary);
}

.v-badge--success {
  background: var(--v-success-subtle);
  color: var(--v-success);
}

.v-badge--warning {
  background: var(--v-warning-subtle);
  color: var(--v-warning);
}

.v-badge--error {
  background: var(--v-error-subtle);
  color: var(--v-error);
}

.v-badge--info {
  background: var(--v-info-subtle);
  color: var(--v-info);
}

.v-badge--accent {
  background: var(--v-accent-subtle);
  color: var(--v-accent);
}

/* Dot indicator */
.v-badge__dot {
  width: var(--v-space-1-5);
  height: var(--v-space-1-5);
  border-radius: var(--v-radius-full);
  background: currentColor;
  flex-shrink: 0;
}


/* === COMPONENT 5 : .v-alert === */

.v-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--v-space-3);
  padding: var(--v-space-4);
  border-radius: var(--v-radius-md);
  border: 1px solid var(--v-border-subtle);
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  line-height: var(--v-leading-normal);
  /* Neutral by default */
  background: var(--v-bg-subtle);
  color: var(--v-text-primary);
}

.v-alert--success {
  background: var(--v-success-subtle);
  border-color: var(--v-success);
  color: var(--v-success);
}

.v-alert--warning {
  background: var(--v-warning-subtle);
  border-color: var(--v-warning);
  color: var(--v-warning);
}

.v-alert--error {
  background: var(--v-error-subtle);
  border-color: var(--v-error);
  color: var(--v-error);
}

.v-alert--info {
  background: var(--v-info-subtle);
  border-color: var(--v-info);
  color: var(--v-info);
}

.v-alert__icon {
  flex-shrink: 0;
  width: var(--v-space-5);
  height: var(--v-space-5);
}

.v-alert__content {
  flex: 1;
  min-width: 0;
}

.v-alert__title {
  font-weight: var(--v-weight-semibold);
  margin-bottom: var(--v-space-1);
}

.v-alert__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: var(--v-space-1);
  cursor: pointer;
  color: currentColor;
  opacity: 0.6;
  border-radius: var(--v-radius-sm);
  transition: opacity var(--v-duration-fast) var(--v-ease-default);
}

.v-alert__dismiss:hover {
  opacity: 1;
}


/* === COMPONENT 6 : .v-table === */

.v-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-md);
}

.v-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  line-height: var(--v-leading-normal);
}

.v-table th {
  position: sticky;
  top: 0;
  z-index: var(--v-z-sticky);
  background: var(--v-bg-subtle);
  color: var(--v-text-secondary);
  font-weight: var(--v-weight-semibold);
  font-size: var(--v-text-xs);
  text-align: left;
  padding: var(--v-space-3) var(--v-space-4);
  border-bottom: 1px solid var(--v-border-default);
  text-transform: uppercase;
  letter-spacing: var(--v-tracking-wide);
  white-space: nowrap;
}

.v-table td {
  padding: var(--v-space-3) var(--v-space-4);
  border-bottom: 1px solid var(--v-border-subtle);
  color: var(--v-text-primary);
}

.v-table tbody tr {
  transition: background var(--v-duration-fast) var(--v-ease-default);
}

.v-table tbody tr:hover {
  background: var(--v-bg-subtle);
}

.v-table--striped tbody tr:nth-child(even) {
  background: var(--v-bg-subtle);
}

.v-table--striped tbody tr:nth-child(even):hover {
  background: var(--v-bg-muted);
}

.v-table tbody tr:last-child td {
  border-bottom: none;
}


/* === COMPONENT 7 : .v-modal === */

.v-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--v-z-modal-backdrop);
  background: var(--v-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v-space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v-duration-normal) var(--v-ease-default),
              visibility var(--v-duration-normal) var(--v-ease-default);
}

.v-modal-backdrop--open {
  opacity: 1;
  visibility: visible;
}

.v-modal {
  background: var(--v-bg-elevated);
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-modal);
  box-shadow: var(--v-shadow-xl);
  width: 100%;
  max-height: calc(100vh - var(--v-space-8));
  max-height: calc(100dvh - var(--v-space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: v-scale-in var(--v-duration-normal) var(--v-ease-spring);
}

/* Sizes */
.v-modal--sm { max-width: 24rem; }
.v-modal--md { max-width: 32rem; }
.v-modal--lg { max-width: 42rem; }
.v-modal--xl { max-width: 56rem; }
.v-modal--full {
  max-width: none;
  max-height: none;
  height: 100%;
  border-radius: var(--v-radius-none);
}

.v-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v-space-4) var(--v-space-6);
  border-bottom: 1px solid var(--v-border-subtle);
  flex-shrink: 0;
}

.v-modal__title {
  font-family: var(--v-font-display);
  font-size: var(--v-text-lg);
  font-weight: var(--v-weight-semibold);
  color: var(--v-text-primary);
  line-height: var(--v-leading-tight);
}

.v-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  border-radius: var(--v-radius-sm);
  color: var(--v-text-muted);
  cursor: pointer;
  transition: background var(--v-duration-fast) var(--v-ease-default),
              color var(--v-duration-fast) var(--v-ease-default);
}

.v-modal__close:hover {
  background: var(--v-bg-subtle);
  color: var(--v-text-primary);
}

.v-modal__body {
  padding: var(--v-space-6);
  overflow-y: auto;
  flex: 1;
}

.v-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--v-space-3);
  padding: var(--v-space-4) var(--v-space-6);
  border-top: 1px solid var(--v-border-subtle);
  flex-shrink: 0;
}


/* === COMPONENT 8 : .v-toast === */

.v-toast-container {
  position: fixed;
  z-index: var(--v-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--v-space-2);
  pointer-events: none;
  max-width: 24rem;
  width: 100%;
}

.v-toast-container--top-right {
  top: var(--v-space-4);
  right: var(--v-space-4);
}

.v-toast-container--top-left {
  top: var(--v-space-4);
  left: var(--v-space-4);
}

.v-toast-container--bottom-right {
  bottom: var(--v-space-4);
  right: var(--v-space-4);
}

.v-toast-container--bottom-left {
  bottom: var(--v-space-4);
  left: var(--v-space-4);
}

.v-toast-container--top-center {
  top: var(--v-space-4);
  left: 50%;
  transform: translateX(-50%);
}

.v-toast-container--bottom-center {
  bottom: var(--v-space-4);
  left: 50%;
  transform: translateX(-50%);
}

.v-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--v-space-3);
  padding: var(--v-space-3) var(--v-space-4);
  background: var(--v-bg-elevated);
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-md);
  box-shadow: var(--v-shadow-lg);
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  color: var(--v-text-primary);
  pointer-events: auto;
  animation: v-slide-in-down var(--v-duration-normal) var(--v-ease-spring);
}

.v-toast--success { border-left: 3px solid var(--v-success); }
.v-toast--warning { border-left: 3px solid var(--v-warning); }
.v-toast--error   { border-left: 3px solid var(--v-error); }
.v-toast--info    { border-left: 3px solid var(--v-info); }

.v-toast__icon {
  flex-shrink: 0;
  width: var(--v-space-5);
  height: var(--v-space-5);
}

.v-toast__content {
  flex: 1;
  min-width: 0;
}

.v-toast__title {
  font-weight: var(--v-weight-semibold);
  margin-bottom: var(--v-space-0-5);
}

.v-toast__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: var(--v-space-1);
  cursor: pointer;
  color: var(--v-text-muted);
  border-radius: var(--v-radius-sm);
  transition: color var(--v-duration-fast) var(--v-ease-default);
}

.v-toast__dismiss:hover {
  color: var(--v-text-primary);
}


/* === COMPONENT 9 : .v-skeleton === */

.v-skeleton {
  background: var(--v-bg-muted);
  border-radius: var(--v-radius-sm);
  position: relative;
  overflow: hidden;
}

.v-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--v-bg-elevated) 50%,
    transparent 100%
  );
  animation: v-shimmer var(--v-duration-slower) infinite;
  animation-duration: 1.5s;
}

/* Variants */
.v-skeleton--text {
  height: var(--v-space-4);
  width: 100%;
}

.v-skeleton--text-sm {
  height: var(--v-space-3);
  width: 75%;
}

.v-skeleton--avatar {
  width: var(--v-space-10);
  height: var(--v-space-10);
  border-radius: var(--v-radius-full);
}

.v-skeleton--card {
  height: 10rem;
  border-radius: var(--v-radius-card);
}

.v-skeleton--button {
  height: 2.75rem;
  width: 8rem;
  border-radius: var(--v-radius-button);
}

.v-skeleton--table-row {
  height: var(--v-space-12);
  width: 100%;
  border-radius: var(--v-radius-xs);
}


/* === COMPONENT 10 : .v-avatar === */

.v-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--v-radius-full);
  overflow: hidden;
  background: var(--v-accent-subtle);
  color: var(--v-accent);
  font-family: var(--v-font-display);
  font-weight: var(--v-weight-semibold);
  flex-shrink: 0;
  /* Default size: md */
  width: var(--v-space-10);
  height: var(--v-space-10);
  font-size: var(--v-text-sm);
}

.v-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sizes */
.v-avatar--xs {
  width: var(--v-space-5);
  height: var(--v-space-5);
  font-size: var(--v-text-xs);
}

.v-avatar--sm {
  width: var(--v-space-8);
  height: var(--v-space-8);
  font-size: var(--v-text-xs);
}

.v-avatar--md {
  width: var(--v-space-10);
  height: var(--v-space-10);
  font-size: var(--v-text-sm);
}

.v-avatar--lg {
  width: var(--v-space-12);
  height: var(--v-space-12);
  font-size: var(--v-text-md);
}

.v-avatar--xl {
  width: var(--v-space-16);
  height: var(--v-space-16);
  font-size: var(--v-text-xl);
}

/* Avatar group */
.v-avatar-group {
  display: flex;
  flex-direction: row-reverse;
}

.v-avatar-group .v-avatar {
  border: 2px solid var(--v-bg-elevated);
  margin-left: calc(var(--v-space-2) * -1);
}

.v-avatar-group .v-avatar:last-child {
  margin-left: 0;
}


/* === COMPONENT 11 : .v-tooltip === */

.v-tooltip {
  position: relative;
  display: inline-flex;
}

.v-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--v-z-tooltip);
  padding: var(--v-space-1) var(--v-space-2);
  font-family: var(--v-font-body);
  font-size: var(--v-text-xs);
  font-weight: var(--v-weight-medium);
  line-height: var(--v-leading-tight);
  color: var(--v-text-inverse);
  background: var(--v-text-primary);
  border-radius: var(--v-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--v-space-1));
  transition: opacity var(--v-duration-fast) var(--v-ease-default),
              transform var(--v-duration-fast) var(--v-ease-default);
}

.v-tooltip:hover::after,
.v-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Top (default) */
.v-tooltip--top::after,
.v-tooltip:not([class*="v-tooltip--"])::after {
  bottom: calc(100% + var(--v-space-1-5));
  left: 50%;
  transform: translateX(-50%) translateY(var(--v-space-1));
}

.v-tooltip--top:hover::after,
.v-tooltip:not([class*="v-tooltip--"]):hover::after,
.v-tooltip--top:focus-visible::after,
.v-tooltip:not([class*="v-tooltip--"]):focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Bottom */
.v-tooltip--bottom::after {
  top: calc(100% + var(--v-space-1-5));
  left: 50%;
  transform: translateX(-50%) translateY(calc(var(--v-space-1) * -1));
}

.v-tooltip--bottom:hover::after,
.v-tooltip--bottom:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Left */
.v-tooltip--left::after {
  right: calc(100% + var(--v-space-1-5));
  top: 50%;
  transform: translateY(-50%) translateX(var(--v-space-1));
}

.v-tooltip--left:hover::after,
.v-tooltip--left:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}

/* Right */
.v-tooltip--right::after {
  left: calc(100% + var(--v-space-1-5));
  top: 50%;
  transform: translateY(-50%) translateX(calc(var(--v-space-1) * -1));
}

.v-tooltip--right:hover::after,
.v-tooltip--right:focus-visible::after {
  transform: translateY(-50%) translateX(0);
}


/* === COMPONENT 12 : .v-progress === */

.v-progress {
  width: 100%;
  height: var(--v-space-2);
  background: var(--v-bg-muted);
  border-radius: var(--v-radius-full);
  overflow: hidden;
}

.v-progress__bar {
  height: 100%;
  border-radius: var(--v-radius-full);
  background: var(--v-accent);
  transition: width var(--v-duration-slow) var(--v-ease-default);
}

.v-progress--success .v-progress__bar { background: var(--v-success); }
.v-progress--warning .v-progress__bar { background: var(--v-warning); }
.v-progress--error .v-progress__bar   { background: var(--v-error); }
.v-progress--info .v-progress__bar    { background: var(--v-info); }

/* Animated stripe */
.v-progress--striped .v-progress__bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: var(--v-space-4) var(--v-space-4);
  animation: v-progress-stripe var(--v-duration-slower) linear infinite;
}

@keyframes v-progress-stripe {
  from { background-position: var(--v-space-4) 0; }
  to { background-position: 0 0; }
}


/* === COMPONENT 13 : .v-tabs === */

.v-tabs {
  display: flex;
  gap: var(--v-space-0);
  font-family: var(--v-font-body);
  position: relative;
}

.v-tabs__item {
  padding: var(--v-space-2) var(--v-space-4);
  font-size: var(--v-text-sm);
  font-weight: var(--v-weight-medium);
  color: var(--v-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color var(--v-duration-fast) var(--v-ease-default);
  white-space: nowrap;
}

.v-tabs__item:hover {
  color: var(--v-text-primary);
}

.v-tabs__item--active {
  color: var(--v-accent);
}

/* Underline variant (default) */
.v-tabs--underline {
  border-bottom: 1px solid var(--v-border-subtle);
}

.v-tabs--underline .v-tabs__item::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--v-accent);
  border-radius: var(--v-radius-full) var(--v-radius-full) 0 0;
  transform: scaleX(0);
  transition: transform var(--v-duration-fast) var(--v-ease-default);
}

.v-tabs--underline .v-tabs__item--active::after {
  transform: scaleX(1);
}

/* Pill variant */
.v-tabs--pill {
  gap: var(--v-space-1);
  background: var(--v-bg-subtle);
  padding: var(--v-space-1);
  border-radius: var(--v-radius-md);
}

.v-tabs--pill .v-tabs__item {
  border-radius: var(--v-radius-sm);
  padding: var(--v-space-1-5) var(--v-space-3);
}

.v-tabs--pill .v-tabs__item--active {
  background: var(--v-bg-elevated);
  color: var(--v-text-primary);
  box-shadow: var(--v-shadow-xs);
}

/* Bordered variant */
.v-tabs--bordered .v-tabs__item {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--v-radius-sm) var(--v-radius-sm) 0 0;
  margin-bottom: -1px;
}

.v-tabs--bordered .v-tabs__item--active {
  background: var(--v-bg-elevated);
  border-color: var(--v-border-subtle);
  color: var(--v-text-primary);
}

.v-tabs--bordered {
  border-bottom: 1px solid var(--v-border-subtle);
}


/* === COMPONENT 14 : .v-accordion === */

.v-accordion {
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-md);
  overflow: hidden;
}

.v-accordion__item {
  border-bottom: 1px solid var(--v-border-subtle);
}

.v-accordion__item:last-child {
  border-bottom: none;
}

.v-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--v-space-4) var(--v-space-5);
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  font-weight: var(--v-weight-medium);
  color: var(--v-text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--v-duration-fast) var(--v-ease-default);
}

.v-accordion__trigger:hover {
  background: var(--v-bg-subtle);
}

.v-accordion__icon {
  width: var(--v-space-4);
  height: var(--v-space-4);
  flex-shrink: 0;
  color: var(--v-text-muted);
  transition: transform var(--v-duration-fast) var(--v-ease-default);
}

.v-accordion__item--open .v-accordion__icon {
  transform: rotate(180deg);
}

.v-accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--v-duration-normal) var(--v-ease-default);
}

.v-accordion__item--open .v-accordion__content {
  grid-template-rows: 1fr;
}

.v-accordion__inner {
  overflow: hidden;
}

.v-accordion__body {
  padding: var(--v-space-0) var(--v-space-5) var(--v-space-4);
  font-size: var(--v-text-sm);
  color: var(--v-text-secondary);
  line-height: var(--v-leading-relaxed);
}


/* === COMPONENT 15 : .v-switch === */

.v-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-2);
  cursor: pointer;
  user-select: none;
}

.v-switch__track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  background: var(--v-border-default);
  border-radius: var(--v-radius-full);
  transition: background var(--v-duration-fast) var(--v-ease-default);
  flex-shrink: 0;
}

.v-switch__thumb {
  position: absolute;
  top: var(--v-space-0-5);
  left: var(--v-space-0-5);
  width: calc(1.5rem - var(--v-space-1));
  height: calc(1.5rem - var(--v-space-1));
  background: var(--v-bg-elevated);
  border-radius: var(--v-radius-full);
  box-shadow: var(--v-shadow-xs);
  transition: transform var(--v-duration-fast) var(--v-ease-spring);
}

.v-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.v-switch__input:checked + .v-switch__track {
  background: var(--v-accent);
}

.v-switch__input:checked + .v-switch__track .v-switch__thumb {
  transform: translateX(calc(2.75rem - 1.5rem));
}

.v-switch__input:focus-visible + .v-switch__track {
  box-shadow: var(--v-ring);
}

.v-switch__input:disabled + .v-switch__track {
  opacity: 0.5;
  cursor: not-allowed;
}

.v-switch__label {
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  color: var(--v-text-primary);
}

/* Sizes */
.v-switch--sm .v-switch__track {
  width: 2rem;
  height: 1.125rem;
}

.v-switch--sm .v-switch__thumb {
  width: calc(1.125rem - var(--v-space-1));
  height: calc(1.125rem - var(--v-space-1));
}

.v-switch--sm .v-switch__input:checked + .v-switch__track .v-switch__thumb {
  transform: translateX(calc(2rem - 1.125rem));
}

.v-switch--lg .v-switch__track {
  width: 3.5rem;
  height: 2rem;
}

.v-switch--lg .v-switch__thumb {
  width: calc(2rem - var(--v-space-1));
  height: calc(2rem - var(--v-space-1));
}

.v-switch--lg .v-switch__input:checked + .v-switch__track .v-switch__thumb {
  transform: translateX(calc(3.5rem - 2rem));
}


/* === COMPONENT 16 : .v-dropdown === */

.v-dropdown {
  position: relative;
  display: inline-flex;
}

.v-dropdown__menu {
  position: absolute;
  z-index: var(--v-z-dropdown);
  top: calc(100% + var(--v-space-1));
  left: 0;
  min-width: 12rem;
  background: var(--v-bg-elevated);
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-dropdown);
  box-shadow: var(--v-shadow-lg);
  padding: var(--v-space-1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--v-space-1) * -1));
  transition: opacity var(--v-duration-fast) var(--v-ease-default),
              transform var(--v-duration-fast) var(--v-ease-default),
              visibility var(--v-duration-fast) var(--v-ease-default);
}

.v-dropdown--open .v-dropdown__menu,
.v-dropdown__menu--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Right-aligned */
.v-dropdown--right .v-dropdown__menu {
  left: auto;
  right: 0;
}

.v-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--v-space-2);
  width: 100%;
  padding: var(--v-space-2) var(--v-space-3);
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  color: var(--v-text-primary);
  background: none;
  border: none;
  border-radius: var(--v-radius-xs);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--v-duration-fast) var(--v-ease-default);
}

.v-dropdown__item:hover {
  background: var(--v-bg-subtle);
}

.v-dropdown__item--danger {
  color: var(--v-error);
}

.v-dropdown__item--danger:hover {
  background: var(--v-error-subtle);
}

.v-dropdown__item--disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.v-dropdown__item-icon {
  width: var(--v-space-4);
  height: var(--v-space-4);
  flex-shrink: 0;
  color: var(--v-text-muted);
}

.v-dropdown__divider {
  height: 1px;
  background: var(--v-border-subtle);
  margin: var(--v-space-1) 0;
}

.v-dropdown__label {
  padding: var(--v-space-2) var(--v-space-3) var(--v-space-1);
  font-size: var(--v-text-xs);
  font-weight: var(--v-weight-semibold);
  color: var(--v-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--v-tracking-wide);
}


/* === COMPONENT 17 : .v-spinner / .v-loading-dots === */

.v-spinner {
  display: inline-block;
  border: 2px solid var(--v-border-subtle);
  border-top-color: var(--v-accent);
  border-radius: var(--v-radius-full);
  animation: v-spin var(--v-duration-slower) linear infinite;
  animation-duration: 0.6s;
  /* Default size: md */
  width: var(--v-space-5);
  height: var(--v-space-5);
}

.v-spinner--sm {
  width: var(--v-space-4);
  height: var(--v-space-4);
  border-width: 1.5px;
}

.v-spinner--lg {
  width: var(--v-space-8);
  height: var(--v-space-8);
  border-width: 3px;
}

.v-spinner--xl {
  width: var(--v-space-12);
  height: var(--v-space-12);
  border-width: 3px;
}

/* Loading dots */
.v-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-1);
}

.v-loading-dots__dot {
  width: var(--v-space-1-5);
  height: var(--v-space-1-5);
  border-radius: var(--v-radius-full);
  background: var(--v-accent);
  animation: v-pulse 1.4s infinite ease-in-out both;
}

.v-loading-dots__dot:nth-child(1) { animation-delay: -0.32s; }
.v-loading-dots__dot:nth-child(2) { animation-delay: -0.16s; }
.v-loading-dots__dot:nth-child(3) { animation-delay: 0s; }

.v-loading-dots--sm .v-loading-dots__dot {
  width: var(--v-space-1);
  height: var(--v-space-1);
}

.v-loading-dots--lg .v-loading-dots__dot {
  width: var(--v-space-2);
  height: var(--v-space-2);
}


/* === COMPONENT 18 : .v-empty-state === */

.v-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--v-space-12) var(--v-space-6);
  gap: var(--v-space-4);
}

.v-empty-state__icon {
  width: var(--v-space-16);
  height: var(--v-space-16);
  color: var(--v-text-muted);
  opacity: 0.5;
}

.v-empty-state__title {
  font-family: var(--v-font-display);
  font-size: var(--v-text-lg);
  font-weight: var(--v-weight-semibold);
  color: var(--v-text-primary);
  line-height: var(--v-leading-tight);
}

.v-empty-state__description {
  font-size: var(--v-text-sm);
  color: var(--v-text-secondary);
  max-width: 24rem;
  line-height: var(--v-leading-relaxed);
}

.v-empty-state__action {
  margin-top: var(--v-space-2);
}


/* === COMPONENT 19 : .v-error-state === */

.v-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--v-space-12) var(--v-space-6);
  gap: var(--v-space-4);
}

.v-error-state__icon {
  width: var(--v-space-16);
  height: var(--v-space-16);
  color: var(--v-error);
  opacity: 0.6;
}

.v-error-state__title {
  font-family: var(--v-font-display);
  font-size: var(--v-text-lg);
  font-weight: var(--v-weight-semibold);
  color: var(--v-text-primary);
  line-height: var(--v-leading-tight);
}

.v-error-state__message {
  font-size: var(--v-text-sm);
  color: var(--v-text-secondary);
  max-width: 24rem;
  line-height: var(--v-leading-relaxed);
}

.v-error-state__action {
  margin-top: var(--v-space-2);
}


/* === COMPONENT 20 : .v-kpi-card === */

.v-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--v-space-1);
  padding: var(--v-space-5);
  background: var(--v-bg-elevated);
  border: 1px solid var(--v-border-subtle);
  border-radius: var(--v-radius-card);
  box-shadow: var(--v-shadow-sm);
}

.v-kpi-card__label {
  font-family: var(--v-font-body);
  font-size: var(--v-text-xs);
  font-weight: var(--v-weight-medium);
  color: var(--v-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--v-tracking-wide);
  line-height: var(--v-leading-tight);
}

.v-kpi-card__value {
  font-family: var(--v-font-display);
  font-size: var(--v-text-3xl);
  font-weight: var(--v-weight-bold);
  color: var(--v-text-primary);
  line-height: var(--v-leading-none);
  letter-spacing: var(--v-tracking-tight);
}

.v-kpi-card__footer {
  display: flex;
  align-items: center;
  gap: var(--v-space-2);
  margin-top: var(--v-space-1);
}

.v-kpi-card__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-0-5);
  font-size: var(--v-text-xs);
  font-weight: var(--v-weight-semibold);
  line-height: var(--v-leading-tight);
}

.v-kpi-card__delta--up {
  color: var(--v-success);
}

.v-kpi-card__delta--down {
  color: var(--v-error);
}

.v-kpi-card__trend {
  font-size: var(--v-text-xs);
  color: var(--v-text-muted);
}

/* Compact variant */
.v-kpi-card--compact {
  padding: var(--v-space-3) var(--v-space-4);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-3);
}

.v-kpi-card--compact .v-kpi-card__value {
  font-size: var(--v-text-xl);
}

.v-kpi-card--compact .v-kpi-card__footer {
  margin-top: var(--v-space-0);
}

/* Expanded variant (with trend chart slot) */
.v-kpi-card--expanded {
  gap: var(--v-space-3);
}

.v-kpi-card__chart {
  height: var(--v-space-16);
  width: 100%;
  border-radius: var(--v-radius-sm);
  overflow: hidden;
}


/* === COMPONENT 21 : .v-back-link === */

.v-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-1);
  color: var(--v-text-secondary);
  text-decoration: none;
  font-family: var(--v-font-body);
  font-size: var(--v-text-sm);
  padding: var(--v-space-2) 0;
  transition: color var(--v-duration-fast) var(--v-ease-default);
}

.v-back-link:hover {
  color: var(--v-text-primary);
}

.v-back-link svg {
  width: var(--v-space-4);
  height: var(--v-space-4);
  flex-shrink: 0;
  transition: transform var(--v-duration-fast) var(--v-ease-default);
}

.v-back-link:hover svg {
  transform: translateX(-2px);
}


/* === COMPONENT 22 : .v-color-dot === */

.v-color-dot {
  display: inline-block;
  width: var(--v-space-2);
  height: var(--v-space-2);
  border-radius: var(--v-radius-full);
  flex-shrink: 0;
  /* Default: accent color, override with inline style or modifier */
  background: var(--v-accent);
}

.v-color-dot--sm {
  width: var(--v-space-1-5);
  height: var(--v-space-1-5);
}

.v-color-dot--lg {
  width: var(--v-space-3);
  height: var(--v-space-3);
}

.v-color-dot--success { background: var(--v-success); }
.v-color-dot--warning { background: var(--v-warning); }
.v-color-dot--error   { background: var(--v-error); }
.v-color-dot--info    { background: var(--v-info); }
.v-color-dot--gold    { background: var(--v-gold); }


/* === COMPONENT 23 : .v-page-header === */

.v-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v-space-4);
  padding-bottom: var(--v-space-6);
  border-bottom: 1px solid var(--v-border-subtle);
  margin-bottom: var(--v-space-6);
}

.v-page-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--v-space-1);
  min-width: 0;
}

.v-page-header__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--v-space-1);
  font-family: var(--v-font-body);
  font-size: var(--v-text-xs);
  color: var(--v-text-muted);
}

.v-page-header__breadcrumb a {
  color: var(--v-text-secondary);
  text-decoration: none;
  transition: color var(--v-duration-fast) var(--v-ease-default);
}

.v-page-header__breadcrumb a:hover {
  color: var(--v-accent);
}

.v-page-header__breadcrumb-separator {
  color: var(--v-text-muted);
}

.v-page-header__title {
  font-family: var(--v-font-display);
  font-size: var(--v-fluid-xl);
  font-weight: var(--v-weight-bold);
  color: var(--v-text-primary);
  line-height: var(--v-leading-tight);
  letter-spacing: var(--v-tracking-tight);
}

.v-page-header__subtitle {
  font-size: var(--v-text-sm);
  color: var(--v-text-secondary);
  line-height: var(--v-leading-normal);
}

.v-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--v-space-2);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .v-page-header {
    flex-direction: column;
  }
  .v-page-header__actions {
    width: 100%;
  }
}


/* === COMPONENT 24 : .v-divider === */

.v-divider {
  border: none;
  background: var(--v-border-subtle);
  flex-shrink: 0;
}

.v-divider--horizontal,
.v-divider:not([class*="v-divider--vertical"]) {
  width: 100%;
  height: 1px;
  margin: var(--v-space-4) 0;
}

.v-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--v-space-4);
}

.v-divider--subtle {
  background: var(--v-border-subtle);
}

.v-divider--strong {
  background: var(--v-border-strong);
}


/* === GLOBAL 25 : :focus-visible === */

:focus-visible {
  outline: none;
  box-shadow: var(--v-ring);
}


/* === GLOBAL 26 : ::selection === */

::selection {
  background: var(--v-accent-subtle);
  color: var(--v-text-primary);
}


/* === GLOBAL 27 : Custom scrollbar === */

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: var(--v-space-2);
  height: var(--v-space-2);
}

::-webkit-scrollbar-track {
  background: var(--v-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: var(--v-border-default);
  border-radius: var(--v-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--v-border-strong);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--v-border-default) var(--v-bg-subtle);
}


/* === GLOBAL 28 : Smooth scroll === */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* === KEYFRAMES 29 === */

@keyframes v-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes v-fade-in-up {
  from { opacity: 0; transform: translateY(var(--v-space-2)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes v-slide-in-right {
  from { opacity: 0; transform: translateX(var(--v-space-4)); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes v-slide-in-down {
  from { opacity: 0; transform: translateY(calc(var(--v-space-4) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes v-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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