/* ============================================================
   Mindup — Vuetify 2 override layer
   The single place where Vuetify CDN components are mapped to
   the Mindup design system (mindup-tokens.css must load first).
   Never add Vuetify overrides in feature CSS files.
   ============================================================ */

/* ---------------------------------------------------------
   Application root — Montserrat everywhere, light surfaces.
   --------------------------------------------------------- */
.v-application {
    font-family: var(--mu-font-sans) !important;
    color: var(--mu-ink);
    background: var(--mu-lilac-mist) !important;
}

.v-application .text-h1, .v-application .text-h2, .v-application .text-h3,
.v-application .text-h4, .v-application .text-h5, .v-application .text-h6,
.v-application .text-subtitle-1, .v-application .text-subtitle-2,
.v-application .text-body-1, .v-application .text-body-2,
.v-application .text-button, .v-application .text-caption,
.v-application .text-overline {
    font-family: var(--mu-font-sans) !important;
}

.v-application .text-h1, .v-application .text-h2 {
    font-weight: 800;
    letter-spacing: var(--mu-ls-display);
}

.v-application .text-h3, .v-application .text-h4,
.v-application .text-h5, .v-application .text-h6 {
    font-weight: 700;
    letter-spacing: var(--mu-ls-heading);
}

/* Text emphasis mapped to the ink ramp */
.v-application .text--primary {
    color: var(--mu-ink) !important;
}

.v-application .text--secondary {
    color: var(--mu-ink-60) !important;
}

.v-application .text--disabled {
    color: var(--mu-ink-30) !important;
}

/* Never force ink inside dark surfaces (purple app bars, dark tooltips) */
.v-application .theme--dark .text--primary {
    color: rgba(255, 255, 255, 0.95) !important;
}

.v-application .theme--dark .text--secondary {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Lilac (secondary) surfaces always carry purple-ink content —
   white-on-lilac fails contrast and lilac is never used as text. */
.v-application .v-btn.secondary,
.v-application .v-avatar.secondary,
.v-application .v-sheet.secondary {
    color: var(--mu-purple-ink) !important;
}

/* Numerals — Montserrat 800, aligned digits. Replaces mono fonts. */
.mu-numeral {
    font-family: var(--mu-font-sans);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mu-ls-display);
}

/* ---------------------------------------------------------
   Buttons — pill, sentence case, weight 600.
   --------------------------------------------------------- */
.v-application .v-btn {
    border-radius: var(--mu-r-pill);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.v-application .v-btn--fab,
.v-application .v-btn--icon {
    border-radius: 50%;
}

.v-application .v-btn.primary:hover {
    background-color: var(--mu-purple-hover) !important;
    box-shadow: var(--mu-sh-glow);
}

.v-application .v-btn.primary:active {
    background-color: var(--mu-purple-ink) !important;
    transform: translateY(1px);
}

/* Secondary (outlined): ink border at rest, purple on hover */
.v-application .v-btn--outlined {
    border-color: var(--mu-ink-20);
    color: var(--mu-ink);
}

.v-application .v-btn--outlined:hover {
    border-color: var(--mu-purple);
    color: var(--mu-purple);
    background: var(--mu-paper);
}

/* Ghost helper — lilac-mist fill */
.v-application .v-btn.mu-btn-ghost {
    background: var(--mu-lilac-mist);
    color: var(--mu-purple-ink);
}

.v-application .v-btn.mu-btn-ghost:hover {
    background: var(--mu-lilac-soft);
}

.v-application .v-btn--disabled {
    opacity: 0.5;
}

/* ---------------------------------------------------------
   Cards & sheets — 20px radius, purple-tinted shadows, paper.
   --------------------------------------------------------- */
.v-application .v-card {
    border-radius: var(--mu-r-lg);
    background: var(--mu-paper);
    color: var(--mu-ink);
}

.v-application .v-card.v-sheet--outlined {
    border-color: var(--mu-border);
}

.v-application .v-card:not(.v-sheet--outlined):not(.v-card--flat) {
    box-shadow: var(--mu-sh-2);
}

/* Elevation scale remapped to DS shadows */
.v-application .elevation-1, .v-application .elevation-2 { box-shadow: var(--mu-sh-1) !important; }
.v-application .elevation-3, .v-application .elevation-4,
.v-application .elevation-5, .v-application .elevation-6 { box-shadow: var(--mu-sh-2) !important; }
.v-application .elevation-7, .v-application .elevation-8,
.v-application .elevation-9, .v-application .elevation-10,
.v-application .elevation-11, .v-application .elevation-12 { box-shadow: var(--mu-sh-3) !important; }
.v-application .elevation-13, .v-application .elevation-14, .v-application .elevation-15,
.v-application .elevation-16, .v-application .elevation-17, .v-application .elevation-18,
.v-application .elevation-19, .v-application .elevation-20, .v-application .elevation-21,
.v-application .elevation-22, .v-application .elevation-23, .v-application .elevation-24 { box-shadow: var(--mu-sh-4) !important; }

/* ---------------------------------------------------------
   Dialogs — 28px radius, deepest shadow.
   --------------------------------------------------------- */
.v-dialog {
    border-radius: var(--mu-r-xl) !important;
    box-shadow: var(--mu-sh-4) !important;
}

.v-dialog > .v-card {
    border-radius: var(--mu-r-xl) !important;
}

/* ---------------------------------------------------------
   Inputs — 12px radius, ink borders, purple focus ring.
   --------------------------------------------------------- */
.v-application .v-text-field--outlined fieldset {
    border-color: var(--mu-ink-20);
}

.v-application .v-text-field--outlined.v-input--is-focused fieldset {
    border-color: var(--mu-purple);
    border-width: 1px;
}

.v-application .v-text-field--outlined.v-input--is-focused .v-input__slot {
    box-shadow: var(--mu-focus);
}

.v-application .v-text-field--outlined.error--text .v-input__slot {
    box-shadow: 0 0 0 3px var(--mu-danger-soft);
}

.v-application .v-text-field--outlined > .v-input__control > .v-input__slot,
.v-application .v-text-field--rounded > .v-input__control > .v-input__slot {
    border-radius: var(--mu-r-md);
}

.v-application .v-input input::placeholder,
.v-application .v-input textarea::placeholder {
    color: var(--mu-ink-30);
}

.v-application .v-label {
    color: var(--mu-ink-60);
}

/* ---------------------------------------------------------
   Chips & badges — pills; semantic = soft bg + dark text.
   --------------------------------------------------------- */
.v-application .v-chip {
    border-radius: var(--mu-r-pill);
    font-weight: 600;
}

.v-application .v-chip.success:not(.v-chip--outlined) {
    background: var(--mu-success-soft) !important;
    color: var(--mu-success) !important;
}

.v-application .v-chip.warning:not(.v-chip--outlined) {
    background: var(--mu-warning-soft) !important;
    color: var(--mu-warning) !important;
}

.v-application .v-chip.error:not(.v-chip--outlined) {
    background: var(--mu-danger-soft) !important;
    color: var(--mu-danger) !important;
}

.v-application .v-chip.info:not(.v-chip--outlined) {
    background: var(--mu-info-soft) !important;
    color: var(--mu-info) !important;
}

.v-application .v-chip.secondary:not(.v-chip--outlined) {
    background: var(--mu-lilac) !important;
    color: var(--mu-purple-ink) !important;
}

/* Status pills — uppercase micro labels on soft fills (mockup spec) */
.v-application .v-chip.mu-status-pill {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.v-application .v-chip.mu-status-pill.grey:not(.v-chip--outlined) {
    background: var(--mu-ink-05) !important;
    color: var(--mu-ink-60) !important;
}

.v-application .v-chip.mu-status-pill.primary:not(.v-chip--outlined) {
    background: var(--mu-lilac-soft) !important;
    color: var(--mu-purple-ink) !important;
}

/* ---------------------------------------------------------
   Alerts — DS banner: 3px left accent + soft background.
   --------------------------------------------------------- */
.v-application .v-alert {
    border-radius: var(--mu-r-md);
}

.v-application .v-alert:not(.v-alert--outlined).success {
    background: var(--mu-success-soft) !important;
    border-left: 3px solid var(--mu-success) !important;
    color: var(--mu-ink) !important;
}

.v-application .v-alert:not(.v-alert--outlined).warning {
    background: var(--mu-warning-soft) !important;
    border-left: 3px solid var(--mu-warning) !important;
    color: var(--mu-ink) !important;
}

.v-application .v-alert:not(.v-alert--outlined).error {
    background: var(--mu-danger-soft) !important;
    border-left: 3px solid var(--mu-danger) !important;
    color: var(--mu-ink) !important;
}

.v-application .v-alert:not(.v-alert--outlined).info {
    background: var(--mu-info-soft) !important;
    border-left: 3px solid var(--mu-info) !important;
    color: var(--mu-ink) !important;
}

.v-application .v-alert:not(.v-alert--outlined).success .v-icon { color: var(--mu-success); }
.v-application .v-alert:not(.v-alert--outlined).warning .v-icon { color: var(--mu-warning); }
.v-application .v-alert:not(.v-alert--outlined).error .v-icon { color: var(--mu-danger); }
.v-application .v-alert:not(.v-alert--outlined).info .v-icon { color: var(--mu-info); }

/* ---------------------------------------------------------
   Data tables — paper, soft dividers, lilac hover.
   --------------------------------------------------------- */
.v-application .v-data-table {
    background: var(--mu-paper);
    border-radius: var(--mu-r-lg);
    color: var(--mu-ink);
}

.v-application .v-data-table > .v-data-table__wrapper > table > thead > tr > th {
    color: var(--mu-ink-60);
    font-weight: 700;
    border-bottom: 1px solid var(--mu-ink-10) !important;
}

.v-application .v-data-table > .v-data-table__wrapper > table > tbody > tr > td {
    border-bottom: 1px solid var(--mu-ink-10) !important;
}

.v-application .v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
    background: var(--mu-lilac-mist);
}

/* ---------------------------------------------------------
   Progress — 8px pill track, purple fill.
   --------------------------------------------------------- */
.v-application .v-progress-linear {
    border-radius: var(--mu-r-pill);
}

.v-application .v-progress-linear .v-progress-linear__background {
    background-color: var(--mu-ink-10) !important;
    border-color: var(--mu-ink-10) !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   Navigation — paper drawer, purple pill active item.
   --------------------------------------------------------- */
.v-application .v-navigation-drawer {
    background: var(--mu-paper);
}

.v-application .v-navigation-drawer .v-list-item,
.v-application .mu-nav-menu .v-list-item {
    border-radius: var(--mu-r-md);
}

.v-application .v-list-item--active {
    color: var(--mu-purple);
}

/* Active items — soft lilac pill, purple-ink text (Docs-style hierarchy) */
.v-application .v-navigation-drawer .v-list-item--active,
.v-application .mu-nav-menu .v-list-item--active {
    background: var(--mu-lilac-soft);
    color: var(--mu-purple-ink);
}

.v-application .v-navigation-drawer .v-list-item--active .v-icon,
.v-application .v-navigation-drawer .v-list-item--active .v-list-item__title,
.v-application .mu-nav-menu .v-list-item--active .v-icon,
.v-application .mu-nav-menu .v-list-item--active .v-list-item__title {
    color: var(--mu-purple-ink);
}

.v-application .v-navigation-drawer .v-list-item--active .v-list-item__title,
.v-application .mu-nav-menu .v-list-item--active .v-list-item__title {
    font-weight: 600;
}

.v-application .v-navigation-drawer .v-list-item--active::before,
.v-application .mu-nav-menu .v-list-item--active::before {
    opacity: 0;
}

/* Active CHILD inside a group — no pill: purple text + small left indicator bar */
.v-application .v-navigation-drawer .v-list-group__items .v-list-item--active,
.v-application .mu-nav-menu .v-list-group__items .v-list-item--active {
    background: transparent;
    position: relative;
}

.v-application .v-navigation-drawer .v-list-group__items .v-list-item--active .v-list-item__title,
.v-application .mu-nav-menu .v-list-group__items .v-list-item--active .v-list-item__title {
    color: var(--mu-purple);
}

.v-application .v-navigation-drawer .v-list-group__items .v-list-item--active::after,
.v-application .mu-nav-menu .v-list-group__items .v-list-item--active::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: var(--mu-r-pill);
    background: var(--mu-purple);
}

/* ---------------------------------------------------------
   Menus, popovers, snackbars, panels, tabs.
   --------------------------------------------------------- */
.v-menu__content {
    border-radius: var(--mu-r-md) !important;
    box-shadow: var(--mu-sh-3) !important;
}

.v-application .v-snackbar__wrapper {
    border-radius: var(--mu-r-md);
    box-shadow: var(--mu-sh-3);
}

.v-application .v-expansion-panel {
    border-radius: var(--mu-r-md);
}

.v-application .v-expansion-panels {
    border-radius: var(--mu-r-lg);
}

.v-application .v-tabs-bar {
    background: transparent !important;
}

.v-application .v-tab {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* ---------------------------------------------------------
   Misc surfaces.
   --------------------------------------------------------- */
.v-application .v-divider {
    border-color: var(--mu-ink-10);
}

.v-application .v-overlay__scrim {
    background-color: #0f0a1f !important;
}

/* ---------------------------------------------------------
   Motion — gate decorative transitions on reduced motion.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .v-application .v-btn {
        transition: background-color var(--mu-dur-1) var(--mu-ease-smooth),
                    box-shadow var(--mu-dur-2) var(--mu-ease-smooth),
                    transform var(--mu-dur-1) var(--mu-ease-smooth);
    }
}

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