/* ============================================================
   override-vuetify.css
   CSS injetado via container nos iframes Vue.js (Vuetify 1.x | 2.x)
   Aplicar: via inject.js no evento load do iframe

   Tokens extraídos da referência real (portal-dev.nstech.com.br):
     --primary:          #ff3d03  (oklch 65.36% .2346 33.87)
     --foreground:       #0f172a  (oklch 20.77% .0398 265.75)
     --muted:            #f1f5f9  (oklch 96.83% .0069 247.9)
     --muted-foreground: #64748b  (oklch 55.44% .0407 257.42)
     --border:           #e2e8f0  (oklch 92.88% .0126 255.51)
     --radius:           .625rem  = 10px base
   ============================================================ */

/* ---- Fonte base e background ---- */
body,
.application {
    font-family:
        "Inter", "Open Sans", Roboto, "Segoe UI", sans-serif !important;
    background-color: #f1f5f9 !important;
}
.v-content__wrap,
.application--wrap {
    background-color: #f1f5f9 !important;
}

/* ---- Título das páginas Vue ---- */
.v-card__title.container__card__title,
.v-card__title[class*="title"] {
    color: #0f172a !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    font-family: "Inter", "Open Sans", Roboto, sans-serif !important;
    letter-spacing: -0.3px !important;
}

/* ---- Cards (v-card) ---- */
.v-card.theme--light {
    border-radius: 13px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* ====================================================
   INPUTS E SELECTS
   ==================================================== */

/* ---- Vuetify 1.x — slot wrapper ---- */
.v-text-field--solo .v-input__slot {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    max-height: 40px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    background-color: #fff !important;
}
.v-text-field--solo .v-input__slot:focus-within {
    border-color: #ff3d03 !important;
    box-shadow: 0 0 0 3px rgba(255, 61, 3, 0.1) !important;
}

/* ---- Vuetify 2.x — outlined/enclosed slot wrapper ---- */
.v-text-field--outlined .v-input__slot,
.v-text-field--filled .v-input__slot {
    border-radius: 8px !important;
    min-height: 40px !important;
    height: 40px !important;
    max-height: 40px !important;
    background-color: #fff !important;
    align-items: center !important;
    padding-bottom: 0 !important;
}
/* Borda do outline (Vuetify 2.x usa fieldset/legend para o outline) */
.v-text-field--outlined fieldset {
    border-color: #e2e8f0 !important;
    border-width: 1px !important;
    border-radius: 8px !important;
}
.v-text-field--outlined.v-input--is-focused fieldset {
    border-color: #ff3d03 !important;
    box-shadow: 0 0 0 3px rgba(255, 61, 3, 0.1) !important;
}

/* ---- Vuetify 2.x — Label não-ativo centrado no slot de 40px ---- */
.v-text-field--outlined .v-label:not(.v-label--active),
.v-text-field--filled .v-label:not(.v-label--active) {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ---- Vuetify 2.x — Label ativo: efeito "notch" — senta na borda superior ---- */
/* top:-1px posiciona na borda; translateY(-100%) move para cima; background cobre a linha */
.v-text-field--outlined .v-label--active,
.v-text-field--filled .v-label--active {
    top: -1px !important;
    transform: translateY(-100%) scale(0.75) !important;
    transform-origin: left center !important;
    background: #fff !important;
    padding: 0 4px !important;
}

/* ---- Vuetify 2.x — input text vertical alignment ---- */
.v-text-field--outlined input,
.v-text-field--filled input {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}
.v-text-field--outlined .v-select__selection,
.v-text-field--filled .v-select__selection {
    margin-top: 0 !important;
    align-self: center !important;
}

/* ---- Texto dentro de inputs e selects (ambas versões) ---- */
.v-text-field input,
.v-select input,
.v-select__selection {
    font-size: 13px !important;
    color: #0f172a !important;
    margin-top: 0 !important;
}

/* ---- Labels (placeholder flutuante do Vuetify) ---- */
.v-label.theme--light {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 400 !important;
}

/* ---- Ícones dentro dos selects ---- */
.v-input__append-inner .v-icon,
.v-select__slot .v-icon {
    color: #64748b !important;
    font-size: 18px !important;
}

/* ---- Vuetify 2.x — ícone prepend/append centrado no slot de 40px ---- */
.v-text-field--outlined .v-input__prepend-inner,
.v-text-field--outlined .v-input__append-inner,
.v-text-field--filled .v-input__prepend-inner,
.v-text-field--filled .v-input__append-inner {
    margin-top: 0 !important;
    align-self: center !important;
}

/* ====================================================
   BOTÕES
   ==================================================== */

/* ---- Vuetify 1.x — botão primário ---- */
.v-btn.theme--light.v-btn--depressed:not(.v-btn--outline):not(.v-btn--flat):not(
        .v-btn--icon
    ):not(.v-btn--disabled),
.v-btn.btn-text.theme--light {
    background-color: #ff3d03 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    height: 36px !important;
    padding: 0 16px !important;
}

/* ---- Vuetify 2.x — botão primário (elevado / has-bg, não-outline, não-text) ---- */
.v-btn.v-btn--has-bg:not(.v-btn--outlined):not(.v-btn--text):not(
        .v-btn--icon
    ):not(.v-btn--disabled).theme--light {
    background-color: #ff3d03 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    height: 36px !important;
    padding: 0 16px !important;
}

/* ---- Vuetify 1.x — botão ghost / secundário ---- */
.v-btn.v-btn--outline.theme--light,
.v-btn.v-btn--flat.theme--light:not(.v-btn--icon):not(.v-btn--disabled) {
    border-radius: 8px !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 36px !important;
    padding: 0 16px !important;
}

/* ---- Vuetify 2.x — botão outlined / text ---- */
.v-btn.v-btn--outlined.theme--light:not(.v-btn--disabled),
.v-btn.v-btn--text.theme--light:not(.v-btn--icon):not(.v-btn--disabled) {
    border-radius: 8px !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 36px !important;
    padding: 0 16px !important;
}

/* ---- Botão desabilitado (ambas versões) ---- */
.v-btn.v-btn--disabled.theme--light {
    border-radius: 8px !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    height: 36px !important;
}

/* ---- Tabela de dados ---- */
.v-datatable.theme--light {
    border-radius: 13px !important;
    overflow: hidden;
    border: 1px solid #e2e8f0 !important;
}
.v-datatable.theme--light thead th {
    color: #ff3d03 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background-color: #f8fafc !important;
}
.v-datatable.theme--light tbody tr:hover {
    background-color: #fff5f3 !important;
}

/* ---- Paginação ---- */
.v-datatable__actions {
    border-top: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    color: #64748b !important;
}
.v-datatable__actions .v-btn.v-btn--icon {
    color: #ff3d03 !important;
}

/* ---- Switch — alinhamento horizontal com os inputs da row ---- */
/* A .row pai tem margin-left:-12px (Vuetify grid); switch sem col não herda o padding-left da col */
.v-input--switch {
    margin-left: 12px !important;
}

/* ---- Switch — thumb contido dentro do track (Vuetify 2.x) ---- */
.v-input--switch .v-input--switch__track {
    left: 0 !important;
    width: 40px !important;
    height: 20px !important;
    border-radius: 10px !important;
    top: 2px !important;
    opacity: 0.38 !important;
}
.v-input--switch .v-input--selection-controls__input {
    width: 40px !important;
}
.v-input--switch .v-input--switch__thumb {
    top: 2px !important;
    left: 0 !important;
}

/* ====================================================
   DROPDOWN MENU
   Vuetify 1.x: .v-select-list.v-card
   Vuetify 2.x: .v-menu__content
   ==================================================== */

/* ---- Container (ambas versões) ---- */
.v-menu__content,
.v-select-list.v-card.theme--light {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        0 1px 4px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

/* ---- Lista interna (Vuetify 2.x) ---- */
.v-menu__content .v-list {
    padding: 4px 0 !important;
    background: #ffffff !important;
}

/* ---- Itens (Vuetify 2.x) ---- */
.v-menu__content .v-list-item {
    min-height: 40px !important;
    font-size: 13px !important;
    font-family: "Inter", "Open Sans", Roboto, sans-serif !important;
    color: #0f172a !important;
    padding: 0 16px !important;
}
.v-menu__content .v-list-item:hover {
    background-color: #f1f5f9 !important;
}
.v-menu__content .v-list-item:hover::before,
.v-menu__content .v-list-item--active::before {
    opacity: 0 !important;
}
.v-menu__content .v-list-item--active,
.v-menu__content .v-list-item--active .v-list-item__title {
    color: #ff3d03 !important;
    background-color: #fff5f3 !important;
    font-weight: 500 !important;
}
.v-menu__content .v-list-item__title {
    font-size: 13px !important;
    font-family: "Inter", "Open Sans", Roboto, sans-serif !important;
    line-height: 1.4 !important;
}

/* ---- Vuetify 1.x ---- */
.v-list__tile--active,
.v-list__tile--active .v-list__tile__title {
    color: #ff3d03 !important;
}
.v-select-list .v-list__tile {
    font-size: 13px !important;
    min-height: 40px !important;
    color: #0f172a !important;
}

/* ====================================================
   OVERRIDES DE ESTILO INLINE (primária azul via JS)
   Alguns apps Vue definem cor primária inline via JS
   (background-color, border-color, color no style="").
   !important sobrepõe inline styles.
   ==================================================== */

/* ---- Título de página (h1 com cor inline) ---- */
h1 {
    color: #0f172a !important;
}

/* ---- Botão primário com theme--dark (cor inline via Vuetify theme) ---- */
/* Cobre v-btn--has-bg, v-btn--elevated, v-btn--rounded com theme--dark */
.v-btn.theme--dark:not(.v-btn--outlined):not(.v-btn--text):not(.v-btn--icon):not(.v-btn--disabled) {
    background-color: #ff3d03 !important;
    border-color: #ff3d03 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    height: 36px !important;
    padding: 0 16px !important;
}