.grid-container {
    @apply grid grid-cols-1;
}
  
div.componenteCaixa {
    border: 1px solid #9CA3AF;
    background-color: var(--color-background, #FFFFFF);
    border-radius: 10px;
}

html.dark div.componenteCaixa,
html.dark-mode div.componenteCaixa,
html[data-theme="dark"] div.componenteCaixa {
    background-color: var(--color-background-dark, #0A0D14);
}

div#divEdicao {
    border-radius: 10px;
    background-color: var(--color-background, #FFFFFF);
    /* Alinhamento à esquerda conforme Figma - não centralizar */
    text-align: left;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
}

html.dark div#divEdicao,
html.dark-mode div#divEdicao,
html[data-theme="dark"] div#divEdicao {
    background-color: var(--color-background-dark, #0A0D14);
}

/* Override específico para inserir/alterar - usar a mesma cor do inserir (#0A0D14) no dark mode */
html.dark .inserir-alterar-workarea #divEdicao,
html.dark-mode .inserir-alterar-workarea #divEdicao,
html[data-theme="dark"] .inserir-alterar-workarea #divEdicao {
    background-color: var(--color-background-dark, #0A0D14) !important;
}

div.componenteCaixa>div#caixa-cabecalho {
    @apply h-5;
}

div.componenteCaixa>div#caixa-cabecalho>div.iconeCaixa {
    @apply float-right pr-2;
}

div.componenteCaixa>div#caixa-cabecalho>div#titulo-caixa {
    @apply float-left text-center align-middle w-8/12 text-xs font-bold pt-1 pr-[0.2rem] pb-1 pl-2;
}

div.componenteCaixa>div.caixaConteudo {
    padding: 0.75rem;
    background-color: var(--color-background, #FFFFFF);
}

html.dark div.componenteCaixa>div.caixaConteudo,
html.dark-mode div.componenteCaixa>div.caixaConteudo,
html[data-theme="dark"] div.componenteCaixa>div.caixaConteudo {
    background-color: var(--color-background-dark, #0A0D14);
}

div.componenteCaixa>div#caixa-cabecalho {
    @apply mt-1;
}


@utility icone-adicionar {
    @apply text-primary dark:text-complement;
}
  
@utility mainModulo {
    @apply bg-[#F6F6F9] dark:bg-black-background mt-3 p-2;
}
  
@utility borderRadius {
    @apply rounded-lg;
}
  
@utility bt_limpar {
  @apply inline-block
    w-[180px] h-[44px]
    rounded-lg                /* Radius de 8px */
    border border-neutral-400 /* Borda de 1px com #CED3E2 */
    bg-black-100              /* Fundo claro (modo claro) */
    dark:bg-white-400         /* Fundo claro (modo escuro) */
    px-[10px]        /* Padding: 10px horizontal, 8px vertical */
    text-[0.7rem]
    font-medium 
    leading-normal
    text-neutral-800
    dark:text-white-900
    transition duration-150 ease-in-out
    hover:bg-secondary
    focus:bg-secondary focus:outline-none focus:ring-0
    active:bg-secondary;
}
  
.divEdicao div {
    border-radius: 0.625rem;
    background-color: var(--color-background, #FFFFFF);
}

html.dark .divEdicao div,
html.dark-mode .divEdicao div,
html[data-theme="dark"] .divEdicao div {
    background-color: var(--color-background-dark, #0A0D14);
}

.componente-caixa {
    border-radius: 0.625rem;
    background-color: var(--color-background, #FFFFFF);
}

html.dark .componente-caixa,
html.dark-mode .componente-caixa,
html[data-theme="dark"] .componente-caixa {
    background-color: var(--color-background-dark, #0A0D14);
}   

@utility w-operacao {
    @apply w-[10rem];
}

@utility operacao-button {
    @apply inline-flex justify-center items-center align-middle focus:ring-2 focus:ring-gray focus:ring-offset-2 focus:ring-offset-gray;
  }
  
@utility operacao-input {
    @apply hidden;
  
    & :checked ~ .operacao-items {
      @apply block transition-transform;
    }
}
.div_cancelado {
    @apply z-1 absolute h-[900px]
}
.editorChamado{
    @apply dark:bg-black-800 h-[22rem];
}

.ui-button{
    @apply dark:bg-black-background 
}
.ui-button-text{
    @apply  dark:text-complement
}

.ui-widget-header{
    @apply border-0;
}
.active-result{
    @apply dark:text-white;
}
.ui-dialog-content, .ui-dialog-buttonpane{
    @apply dark:bg-black-900 bg-no-repeat
}
.ui-corner-all{
    @apply dark:text-white;
}
.inputErro{
    @apply text-red-600;
}

/* ============================================================
   LAYOUT INSERIR/ALTERAR - Design System (Figma)
   Container que aproveita toda a página com botões fixos
   no canto inferior direito e área de trabalho delimitada
   ============================================================ */

/* Container principal - ocupa toda a altura disponível */
.inserir-alterar-container {
    @apply flex flex-col;
    /* Altura dinâmica baseada na viewport menos header e breadcrumb */
    min-height: calc(100vh - 180px);
    height: auto;
    /* Garantir background branco no light mode para toda a área */
    background-color: #FFFFFF !important;
}

html.dark .inserir-alterar-container,
html.dark-mode .inserir-alterar-container,
html[data-theme="dark"] .inserir-alterar-container {
    background-color: var(--color-bg-primary, #0A0D14) !important;
}

/* Garantir que #caixaEdicao tenha background branco (light mode) */
#caixaEdicao,
#caixaEdicao.inserir-alterar-container {
    background-color: #FFFFFF !important;
}

/* Dark mode - usar cor escura */
html.dark #caixaEdicao,
html.dark-mode #caixaEdicao,
html[data-theme="dark"] #caixaEdicao,
html.dark #caixaEdicao.inserir-alterar-container,
html.dark-mode #caixaEdicao.inserir-alterar-container,
html[data-theme="dark"] #caixaEdicao.inserir-alterar-container {
    background-color: var(--color-bg-primary, #0A0D14) !important;
}

/* Área de trabalho - ocupa o espaço disponível */
/* Aplicar apenas quando estiver dentro do container inserir-alterar */
.inserir-alterar-container .inserir-alterar-workarea {
    @apply flex-1 overflow-y-auto overflow-x-hidden;
    @apply px-4 py-4;
    /* Garantir que a área de trabalho tenha altura mínima */
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Background branco no light mode */
    background-color: #FFFFFF !important;
}

html.dark .inserir-alterar-container .inserir-alterar-workarea,
html.dark-mode .inserir-alterar-container .inserir-alterar-workarea,
html[data-theme="dark"] .inserir-alterar-container .inserir-alterar-workarea {
    background-color: var(--color-bg-primary, #0A0D14) !important;
}

/* Conteúdo dentro da área de trabalho */
/* Aplicar apenas quando estiver dentro do container inserir-alterar */
.inserir-alterar-container .inserir-alterar-content {
    @apply w-full;
    /* Ocupar toda a altura disponível */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    /* Alinhamento à esquerda conforme Figma */
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    /* Background branco no light mode */
    background-color: #FFFFFF !important;
}

html.dark .inserir-alterar-container .inserir-alterar-content,
html.dark-mode .inserir-alterar-container .inserir-alterar-content,
html[data-theme="dark"] .inserir-alterar-container .inserir-alterar-content {
    background-color: var(--color-bg-primary, #0A0D14) !important;
}

/* Área de ações - botões dentro do fluxo normal, dentro da divEdicao */
/* Aplicar apenas quando estiver dentro do container inserir-alterar E tiver a classe inserir-alterar-actions */
.inserir-alterar-container > .inserir-alterar-actions,
#caixaEdicao.inserir-alterar-container > .inserir-alterar-actions {
    @apply flex items-center justify-end gap-3;
    @apply px-6 py-4;
    @apply mt-4;
    position: relative;
    width: 100%;
    /* Remover bordas, sombras e z-index para parecer estar dentro da divEdicao */
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
    z-index: auto !important;
    /* Background branco no light mode */
    background-color: #FFFFFF !important;
}

html.dark .inserir-alterar-container > .inserir-alterar-actions,
html.dark-mode .inserir-alterar-container > .inserir-alterar-actions,
html[data-theme="dark"] .inserir-alterar-container > .inserir-alterar-actions,
html.dark #caixaEdicao.inserir-alterar-container > .inserir-alterar-actions,
html.dark-mode #caixaEdicao.inserir-alterar-container > .inserir-alterar-actions,
html[data-theme="dark"] #caixaEdicao.inserir-alterar-container > .inserir-alterar-actions {
    background-color: var(--color-bg-primary, #0A0D14) !important;
}

/* Garantir que elementos sem a classe inserir-alterar-actions não sejam afetados */
.inserir-alterar-container > *:not(.inserir-alterar-actions) {
    position: static;
}

/* Garantir que listagens não sejam afetadas */
#caixaListar .inserir-alterar-workarea,
#caixaListar .inserir-alterar-content,
#caixaListar .inserir-alterar-actions,
#caixaListar .inserir-alterar-container {
    padding-bottom: 0 !important;
}

/* Garantir que elementos dentro de #caixaListar não tenham position fixed (exceto elementos que já têm position fixed por outros motivos) */
#caixaListar .inserir-alterar-actions,
#caixaListar .inserir-alterar-workarea,
#caixaListar .inserir-alterar-content {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* Para outras telas que não usam o novo layout, manter comportamento original */
/* Aplicar apenas quando NÃO estiver dentro do container inserir-alterar */
#caixaSalvar:not(.inserir-alterar-actions) {
    @apply pt-2 pb-2 flex justify-end;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* Garantir que #caixaSalvar fora do container não seja afetado */
body:not(:has(.inserir-alterar-container)) #caixaSalvar,
#caixaEdicao:not(.inserir-alterar-container) #caixaSalvar {
    @apply pt-2 pb-2 flex justify-end;
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* Dark mode - ajustes de cor para área de ações */
html.dark .inserir-alterar-container .inserir-alterar-actions,
html.dark-mode .inserir-alterar-container .inserir-alterar-actions,
html[data-theme="dark"] .inserir-alterar-container .inserir-alterar-actions {
    background-color: var(--color-bg-primary, #0A0D14) !important;
    border: none !important;
    border-top: none !important;
}

/* Responsividade - ajustar margem em mobile */
@media (max-width: 640px) {
    .inserir-alterar-container .inserir-alterar-actions {
        @apply px-4;
    }
    
    .inserir-alterar-workarea {
        @apply px-2;
    }
}

/* Remover padding-bottom já que os botões não são mais fixos */
.inserir-alterar-container .inserir-alterar-workarea {
    padding-bottom: 0 !important;
}

/* Ajustes para o conteúdo dentro da divEdicao - ocupar toda a altura disponível */
.inserir-alterar-content #divEdicao,
.inserir-alterar-content > #divEdicao,
.inserir-alterar-workarea #divEdicao {
    @apply bg-background dark:bg-background-dark;
    border-radius: 0;
    /* Ocupar toda a altura disponível */
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Alinhamento à esquerda conforme Figma */
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
}

/* Alinhamento à esquerda para formulários dentro de divEdicao */
#divEdicao .row,
#divEdicao .ds-form-container {
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Dark mode - usar a mesma cor do inserir (#0A0D14) */
html.dark .inserir-alterar-content #divEdicao,
html.dark-mode .inserir-alterar-content #divEdicao,
html[data-theme="dark"] .inserir-alterar-content #divEdicao,
html.dark .inserir-alterar-content > #divEdicao,
html.dark-mode .inserir-alterar-content > #divEdicao,
html[data-theme="dark"] .inserir-alterar-content > #divEdicao,
html.dark .inserir-alterar-workarea #divEdicao,
html.dark-mode .inserir-alterar-workarea #divEdicao,
html[data-theme="dark"] .inserir-alterar-workarea #divEdicao {
    background-color: var(--color-background-dark, #0A0D14);
}

/* Light mode - manter cor de fundo padrão */
.inserir-alterar-content #divEdicao,
.inserir-alterar-content > #divEdicao,
.inserir-alterar-workarea #divEdicao {
    background-color: var(--color-background, #FFFFFF);
}

/* Manter compatibilidade com divEdicao existente */
#divEdicao.inserir-alterar-content {
    @apply bg-background dark:bg-background-dark;
    min-height: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

html.dark #divEdicao.inserir-alterar-content,
html.dark-mode #divEdicao.inserir-alterar-content,
html[data-theme="dark"] #divEdicao.inserir-alterar-content {
    background-color: var(--color-background-dark, #0A0D14);
}

/* Garantir que o conteúdo dentro de divEdicao ocupe o espaço disponível */
.inserir-alterar-workarea #divEdicao > * {
    flex: 0 1 auto;
}

/* Garantir que formulários dentro de divEdicao também ocupem o espaço */
.inserir-alterar-workarea #divEdicao form,
.inserir-alterar-workarea #divEdicao > form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* ============================================================
   BOTÕES DE LISTAGEM - Design System (Figma)
   ============================================================ */

/* Botões de ação da listagem - Conforme especificação Figma */
.icone-listagem,
.botao-listagem,
button.icone-listagem,
a.icone-listagem {
    box-sizing: border-box !important;
    display: inline-flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px !important;
    gap: 10px !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #CED3E2 !important;
    border-radius: 8px !important;
    background-color: transparent !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    text-decoration: none !important;
}

/* Hover state conforme Figma */
.icone-listagem:hover,
.botao-listagem:hover,
button.icone-listagem:hover,
a.icone-listagem:hover {
    background-color: #F6F6F9 !important;
    border-color: #7A839F !important;
}

/* Ícones dentro dos botões - 18x18px, cor #12151F */
.icone-listagem .icone-ipe,
.icone-listagem i,
.botao-listagem .icone-ipe,
.botao-listagem i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 18px !important;
    color: #12151F !important;
    flex: none !important;
    order: 0 !important;
    flex-grow: 0 !important;
}

/* Dark mode para botões de listagem */
html.dark .icone-listagem,
html.dark .botao-listagem,
html.dark-mode .icone-listagem,
html.dark-mode .botao-listagem,
html[data-theme="dark"] .icone-listagem,
html[data-theme="dark"] .botao-listagem {
    border-color: #394360 !important;
}

html.dark .icone-listagem:hover,
html.dark .botao-listagem:hover,
html.dark-mode .icone-listagem:hover,
html.dark-mode .botao-listagem:hover,
html[data-theme="dark"] .icone-listagem:hover,
html[data-theme="dark"] .botao-listagem:hover {
    background-color: #262B3B !important;
    border-color: #7A839F !important;
}

html.dark .icone-listagem .icone-ipe,
html.dark .icone-listagem i,
html.dark .botao-listagem .icone-ipe,
html.dark .botao-listagem i,
html.dark-mode .icone-listagem .icone-ipe,
html.dark-mode .icone-listagem i,
html.dark-mode .botao-listagem .icone-ipe,
html.dark-mode .botao-listagem i,
html[data-theme="dark"] .icone-listagem .icone-ipe,
html[data-theme="dark"] .icone-listagem i,
html[data-theme="dark"] .botao-listagem .icone-ipe,
html[data-theme="dark"] .botao-listagem i {
    color: #E0E2EB !important;
}

/* ============================================================
   DROPDOWN OPERAÇÕES - Fix para listagem
   ============================================================ */

/* Garantir que o dropdown apareça acima de outros elementos */
/* Figma specs: dropdown_menu_light.css / dropdown_menu_dark.css */
/* NOTA: Estilos detalhados em design-system/components/dropdown-operacoes.css */
.operacao-items {
    position: absolute;
    z-index: 9999;
    background: #F6F6F9 !important;
    border: 1px solid #CED3E2 !important;
    border-radius: 6px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.09) !important;
    /* CORREÇÃO v2: width max-content força expansão ao tamanho do maior item */
    width: max-content !important;
    min-width: 200px !important;
    max-width: 400px !important;
    padding: 5px !important;
    margin-top: 4px;
}

/* Esconder por padrão - Flowbite vai remover esta classe ao abrir */
.operacao-items.hidden {
    display: none !important;
}

/* Mostrar dropdown quando tem a classe 'show' (fallback JavaScript) */
.operacao-items.show {
    display: block !important;
}

/* Dark mode para dropdown - Figma specs */
html.dark .operacao-items,
html.dark-mode .operacao-items,
html[data-theme="dark"] .operacao-items {
    background: #141926 !important;
    border: 1px solid #2A2F41 !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Container do dropdown */
.operacao-items-container {
    width: 100%;
}

.operacao-items-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fix: Sobrescrever estilos problemáticos do mdl.css */
.operacao-items .mdl-list {
    width: 100% !important;
    min-width: 200px !important;
}

/* Itens do menu - Figma specs */
.operacao-items .mdl-menu__item,
.operacao-items .mdl-list__item {
    padding: 8px 12px !important;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-radius 0.15s ease;
    display: flex !important;
    align-items: center;
    background: #F6F6F9 !important;
    color: #394360 !important;
    /* CORREÇÃO: width 100% e white-space nowrap para não cortar texto */
    width: 100% !important;
    min-height: 40px !important;
    height: auto !important;
    white-space: nowrap !important;
    float: none !important;
    line-height: normal !important;
    opacity: 1 !important;
    overflow: visible !important;
    border: none !important;
    margin: 0 !important;
}

/* Forçar visibilidade do conteúdo dos itens */
.operacao-items .mdl-list__item-primary-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: inherit !important;
}

.operacao-items .mdl-list__item-primary-content p {
    margin: 0 !important;
    /* Figma Tipografia/P3 */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px !important;
    line-height: 24px;
    color: #394360 !important;
}

.operacao-items .icone-ipe,
.operacao-items .mdi,
.operacao-items .material-icons {
    width: 18px;
    height: 18px;
    font-size: 18px !important;
    line-height: 18px;
    color: #394360 !important;
    flex-shrink: 0;
}

.operacao-items .mdl-menu__item:hover,
.operacao-items .mdl-list__item:hover {
    background: #ECEDF2 !important;
    border-radius: 6px !important;
}

/* Dark mode para itens - Figma specs */
html.dark .operacao-items .mdl-menu__item,
html.dark .operacao-items .mdl-list__item,
html.dark-mode .operacao-items .mdl-menu__item,
html.dark-mode .operacao-items .mdl-list__item,
html[data-theme="dark"] .operacao-items .mdl-menu__item,
html[data-theme="dark"] .operacao-items .mdl-list__item {
    background: #141926 !important;
    color: #BFC3CF !important;
}

html.dark .operacao-items .mdl-menu__item:hover,
html.dark .operacao-items .mdl-list__item:hover,
html.dark-mode .operacao-items .mdl-menu__item:hover,
html.dark-mode .operacao-items .mdl-list__item:hover,
html[data-theme="dark"] .operacao-items .mdl-menu__item:hover,
html[data-theme="dark"] .operacao-items .mdl-list__item:hover {
    background: #212533 !important;
}

/* Dark mode - icons */
html.dark .operacao-items .icone-ipe,
html.dark .operacao-items .mdi,
html.dark .operacao-items .material-icons,
html.dark-mode .operacao-items .icone-ipe,
html.dark-mode .operacao-items .mdi,
html.dark-mode .operacao-items .material-icons,
html[data-theme="dark"] .operacao-items .icone-ipe,
html[data-theme="dark"] .operacao-items .mdi,
html[data-theme="dark"] .operacao-items .material-icons {
    color: #A2A8B9 !important;
}

/* Dark mode - text */
html.dark .operacao-items .mdl-list__item-primary-content p,
html.dark-mode .operacao-items .mdl-list__item-primary-content p,
html[data-theme="dark"] .operacao-items .mdl-list__item-primary-content p {
    color: #BFC3CF !important;
}

/* ============================================================
   LINHAS DIVISÓRIAS DA TABELA - Design System (Figma)
   Linhas com margem lateral alinhadas com o conteúdo (padding)
   ============================================================ */

/* Remover TODAS as bordas padrão das células e linhas */
.mdl-data-table tbody tr,
.mdl-data-table tbody tr td,
.mdl-data-table tbody td,
table tbody tr,
table tbody tr td,
table tbody td,
.table-row-divider,
.listagem-divider,
tr.divider,
tr.divider td {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-top-style: none !important;
    border-bottom-style: none !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Posicionar as linhas para receberem o pseudo-elemento */
.mdl-data-table tbody tr:not(:last-child),
table tbody tr:not(:last-child),
.listagem-row,
.table-row {
    position: relative;
}

/* Criar linha divisória com margem lateral alinhada com padding do td (1rem) */
.mdl-data-table tbody tr:not(:last-child)::after,
table tbody tr:not(:last-child)::after,
.listagem-row::after,
.table-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;    /* Alinhado com padding do td */
    right: 1rem;   /* Alinhado com padding do td */
    height: 1px;
    background-color: #CED3E2;
    z-index: 1;
}

/* Dark mode para linhas divisórias */
html.dark .mdl-data-table tbody tr:not(:last-child)::after,
html.dark table tbody tr:not(:last-child)::after,
html.dark .listagem-row::after,
html.dark .table-row::after,
html.dark-mode .mdl-data-table tbody tr:not(:last-child)::after,
html.dark-mode table tbody tr:not(:last-child)::after,
html.dark-mode .listagem-row::after,
html.dark-mode .table-row::after,
html[data-theme="dark"] .mdl-data-table tbody tr:not(:last-child)::after,
html[data-theme="dark"] table tbody tr:not(:last-child)::after,
html[data-theme="dark"] .listagem-row::after,
html[data-theme="dark"] .table-row::after {
    background-color: #394360;
}

/* ============================================================
   SELECT input-default — compatibilidade com FormRenderer legado
   O FormRenderer gera class="input-default" mas o CSS original
   foi movido para backup. Estas regras garantem visibilidade.
   ============================================================ */
select.input-default {
    width: 100%;
    height: 44px;
    padding: 10px 16px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary, #12151F);
    background-color: #FFFFFF;
    border: 1px solid var(--color-neutral-400, #CED3E2);
    border-radius: var(--radius-md, 8px);
    outline: none;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: auto;
}

select.input-default:focus {
    border-color: var(--color-primary, #3E68FB);
    box-shadow: 0 0 0 2px rgba(62, 104, 251, 0.15);
}

html.dark select.input-default,
html.dark-mode select.input-default,
html[data-theme="dark"] select.input-default {
    color: #E5E7EB;
    background-color: #1E1E2E;
    border-color: #3A3A50;
}

html.dark select.input-default:focus,
html.dark-mode select.input-default:focus,
html[data-theme="dark"] select.input-default:focus {
    border-color: #8B9CF7;
    box-shadow: 0 0 0 2px rgba(139, 156, 247, 0.2);
}