/* ===================================================================
   Admin Unfold — overrides de estilo
   Carregado via UNFOLD["STYLES"] em settings.py
   =================================================================== */

/* --- 1. BORDAS DE INPUTS, TEXTAREAS E SELECTS ---
   Unfold aplica border-base-200 (rgb(229,231,235)) nos campos. Em fundo
   branco esse tom é quase invisível. Usamos seletores sem dependência de
   .form-row para cobrir fieldsets normais e inline forms.
   Cor: #9ca3af (gray-400 Tailwind) — claramente visível em light mode.
*/
#content input[type="text"],
#content input[type="url"],
#content input[type="email"],
#content input[type="password"],
#content input[type="number"],
#content input[type="tel"],
#content input[type="date"],
#content input[type="time"],
#content input[type="datetime-local"],
#content input[type="week"],
#content input[type="month"],
#content input[type="search"],
#content textarea {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9ca3af !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
}

:where(.dark) #content input[type="text"],
:where(.dark) #content input[type="url"],
:where(.dark) #content input[type="email"],
:where(.dark) #content input[type="password"],
:where(.dark) #content input[type="number"],
:where(.dark) #content input[type="tel"],
:where(.dark) #content input[type="date"],
:where(.dark) #content input[type="time"],
:where(.dark) #content input[type="datetime-local"],
:where(.dark) #content input[type="week"],
:where(.dark) #content input[type="month"],
:where(.dark) #content input[type="search"],
:where(.dark) #content textarea {
    border-color: #4b5563 !important;
}

/* --- 2. WRAPPER DO FILE INPUT ---
   Container do file upload também usa border-base-200.
*/
#content .flex.border.grow.overflow-hidden,
#content .flex.border.items-center.overflow-hidden {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9ca3af !important;
}

:where(.dark) #content .flex.border.grow.overflow-hidden,
:where(.dark) #content .flex.border.items-center.overflow-hidden {
    border-color: #4b5563 !important;
}

/* --- 3. SELECT NATIVO DE FORMULÁRIO ---
   Select dentro de formulários admin (exceto o select do action bar).
*/
#content select:not([multiple]):not([size]) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #9ca3af !important;
    min-width: 300px;
}

:where(.dark) #content select:not([multiple]):not([size]) {
    border-color: #4b5563 !important;
}

/* --- 3b. AUTOCOMPLETE (Select2) — largura mínima ---
   Em related-widget-wrapper o campo FK encolhe no flex; o dropdown
   do Select2 herda essa largura e o texto quebra ilegível.
*/
#content .select2-container.select2-container--admin-autocomplete {
    min-width: 300px;
}

.related-widget-wrapper .select2-container.select2-container--admin-autocomplete {
    flex: 1 1 300px;
}

.select2-container.select2-container--open .select2-dropdown {
    min-width: 300px !important;
}

#changelist-filter .select2-container.select2-container--admin-autocomplete {
    min-width: 300px;
}

/* --- 4. SELECT DO ACTION BAR (changelist) ---
   BASE_CLASSES inclui group-[.primary]:border-transparent que zera a
   borda quando o select está dentro da barra de ações (#changelist-actions).
   Restauramos uma borda sutil sobre o fundo primary.
*/
#changelist-actions select {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-style: solid !important;
    border-width: 1px !important;
}

/* --- 5. BOTÃO "EXECUTAR" DO ACTION BAR ---
   Unfold usa x-show="action" (Alpine.js) mas nunca vincula x-model ao
   select; o dado "action" fica '' para sempre e o botão nunca aparece.
   O template actions.html (sobrescrito em templates/admin/) injeta o
   listener via x-init. Esta regra garante visibilidade caso o JS falhe.
*/
#changelist-actions button[name="index"] {
    display: flex !important;
}

/* --- 6. BOTÕES FK (add/edit) — LAYOUT EM LINHA ---
   O wrapper externo do related_widget_wrapper usa flex-col que no
   Tailwind v4 ativa display:flex em coluna. Forçamos a linha aqui.
*/
.related-widget-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.25rem;
}

/* O container externo (gerado pelo template unfold) deve ser row também */
div:has(> .related-widget-wrapper) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* --- 7. LOGO SIDEBAR (SITE_LOGO) ---
   Altura via template sobrescrito: templates/unfold/helpers/site_logo.html (h-10).
*/
img[src*="logo-lockup"] {
    max-width:380px;
    min-width:260px;
    width: auto;
    height: auto;
    max-height: 100px;
    object-fit: contain;
}

img[src*="logo-lockup"].logo-header {
    max-height: 50px;
    height: auto;
    object-fit: contain;
    width: auto;
    min-width: 120px;
    max-width: 160px;
}

/* --- 8. TELA DE LOGIN (layout 50/50) ---
   Overrides de fundo no mobile ficam em templates/admin/login.html (extrastyle),
   pois o styles.css do Unfold carrega depois deste arquivo.
*/
@media (max-width: 1023px) {
    .login #page.login-page {
        min-height: 100dvh;
        justify-content: center;
        align-items: center;
    }

    .login .login-form-container {
        max-width: 24rem;
    }
}

@media (min-width: 1024px) {
    .login #page.login-page {
        margin: 0;
        padding: 0;
        height: 100%;
        align-items: stretch;
    }

    .login .login-brand-panel,
    .login .login-form-panel {
        min-height: 100%;
        height: 100%;
        align-self: stretch;
    }

    .login .login-brand-panel {
        background-color: color-mix(in srgb, var(--color-primary-500) 10%, white);
    }
}

.login .login-form-panel {
    background-color: #ffffff;
}

/* Logo na tela de login — proporção original, sem esticar */
.login img[src*="logo-lockup"],
.login .login-brand-logo {
    width: auto !important;
    height: auto !important;
    max-width: min(380px, 90vw) !important;
    max-height: 120px !important;
    object-fit: contain !important;
    aspect-ratio: 369.716 / 101.784;
}

.login .login-form-container {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.login .login-form-container #login-form {
    width: 100%;
}

/* Inputs do login: pill, fundo primary-50, sem borda (referência visual do design) */
.login #login-form .max-w-2xl {
    max-width: 100%;
}

.login #login-form .login-field-input,
.login #login-form input.login-field-input {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 12px !important;
    background-color: var(--color-primary-50) !important;
    box-shadow: none !important;
    padding: 8px 14px !important;
    min-height: 40px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.login #login-form .login-field-input:focus,
.login #login-form input.login-field-input:focus {
    outline: 1px solid var(--color-primary-500) !important;
    outline-offset: 0 !important;
}