/* Custom Styles for Wispik CMS */

/* Tabs Container - reduce gap between tabs */
.fi-tabs {
    gap: 0.25rem !important;
    padding-bottom: 0;
    border-bottom: 2px solid #f59e0b !important;
}

/* INACTIVE TABS */
.fi-tabs-item {
    border: none !important;
    /* Solo el activo tendrá borde / fondo destacado */
    background-color: transparent !important;
    padding: 0.3rem 0.5rem !important;
    /* Padding muy reducido izquierda y derecha */
    box-shadow: none !important;
}

.fi-tabs-item .fi-tabs-item-label {
    color: #4b5563 !important;
    /* Texto gris */
    font-weight: 500 !important;
}

/* ACTIVE TAB (Destacado) */
.fi-tabs-item.fi-active,
.fi-tabs-item[aria-selected="true"] {
    background-color: #f59e0b !important;
    /* Naranja (Amber) destacado */
    border: 1px solid #f59e0b !important;
    border-radius: 0.5rem;
    padding: 0.4rem 1.25rem !important;
    /* Padding normal/mayor para que destaque */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item[aria-selected="true"] .fi-tabs-item-label {
    color: white !important;
    font-weight: 600 !important;
}

/* HIDE TOPBAR IN CMS */
.fi-topbar {
    display: none !important;
}

/* STICKY TABLE HEADER WITH FILTER INPUTS FIRST AND LABELS SECOND */
.fi-ta-content {
    max-height: calc(100vh - 260px);
    overflow-y: auto !important;
    position: relative;
}

.fi-ta-content thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f9fafb !important;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08);
}

/* Ensure the table toolbar (where filters are) renders above the sticky table content */
.fi-ta-header {
    position: relative;
    z-index: 20;
}

.fi-ta-content thead tr.fi-ta-search-header-row {
    background-color: #f9fafb !important;
    border-bottom: 1px solid #e5e7eb;
}

.fi-ta-content thead tr.fi-ta-search-header-row td,
.fi-ta-content thead tr.fi-ta-search-header-row th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background-color: #f9fafb !important;
}

.fi-ta-content thead tr.fi-ta-header-row {
    background-color: #f3f4f6 !important;
    border-bottom: 1px solid #d1d5db;
}

.fi-ta-content thead tr.fi-ta-header-row th {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.8125rem;
    background-color: #f3f4f6 !important;
}

/* SIDEBAR LAYOUT OPTIMIZATION */
.fi-sidebar-nav {
    gap: 0.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.fi-sidebar-nav-groups {
    gap: 0 !important;
    /* Reduce vertical space between sections */
}

.fi-sidebar-group {
    margin-top: 0.25rem !important;
}

/* USER PROFILE IN SIDEBAR HEADER */
.fi-sidebar-header .fi-user-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fi-sidebar-header .fi-user-menu .fi-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 2px solid #f59e0b;
}

/* STICKY PAGE HEADER (TITULAR + BOTONES DE ACCION) */
.fi-page>section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    gap: 1.25rem !important;
}

.fi-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 41 !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04) !important;
}

/* Ensure Modals and their inner z-40 overlays render above sticky header (z-index 41) */
.fi-modal,
.fi-modal-open,
.fi-modal-window,
.fi-modal-window-container,
.fi-modal-close-overlay,
.fi-modal .z-40,
div[x-ref="modal"] {
    z-index: 46 !important;
}

.dark .fi-header {
    background-color: rgba(17, 24, 39, 0.96) !important;
    border-color: #374151 !important;
}

.fi-header .fi-ac {
    gap: 0.5rem !important;
}

/* Traducciones Custom Field Gap */
.translation-list>.fi-fo-component-ctn,
.translation-list .fi-fo-component-ctn {
    gap: 8px !important;
}

div.grid:has(> .toggle-field) {
    padding: 3px 0px;
}

.toggle-field {
    zoom: 1.3;
}

/* Pestañas de idiomas ocultos */
/* Estado normal (inactivo) */
button:has(.hidden-lang) {
    background-color: transparent !important;
    opacity: 0.6;
    border-bottom-color: transparent !important;
}

nav.fi-tabs button:has(.hidden-lang) .hidden-lang {
    color: #6b7280 !important;
    /* Gris claro */
}

/* Estado activo/seleccionado */
nav.fi-tabs button[aria-selected="true"]:has(.hidden-lang) {
    background-color: #4b5563 !important;
    /* Gris oscuro */
    opacity: 1;
}

nav.fi-tabs button[aria-selected="true"]:has(.hidden-lang) .hidden-lang {
    color: #ffffff !important;
}

header.fi-sidebar-header {
    padding-left: 17px !important;
}

.sidebar-expand-btn {
    padding-right: 4px !important;
    margin-right: -15px !important;
    margin-left: -2px !important;
}

/* Acciones de tabla (Editar / Borrar) */
.fi-ta-actions {
    gap: 16px !important;
}

.fi-ta-actions .table-action-edit,
.fi-ta-actions .table-action-delete {
    border-radius: 0.5rem !important;
    /* Cuadrado con bordes redondeados */
    color: #ffffff !important;
    /* Icono blanco */
    background-color: #f97316 !important;
    /* Por defecto naranja (edit) */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.fi-ta-actions .table-action-edit {
    background-color: #f97316 !important;
    /* Naranja */
}

.fi-ta-actions .table-action-edit:hover {
    background-color: #ea580c !important;
    /* Naranja hover */
}

.fi-ta-actions .table-action-delete {
    background-color: #ef4444 !important;
    /* Rojo */
}

.fi-ta-actions .table-action-delete:hover {
    background-color: #dc2626 !important;
    /* Rojo hover */
}

/* Si es un icon-btn en Filament, asegurarnos de sobreescribir el hover default del bg gris */
.fi-ta-actions .table-action-edit.fi-icon-btn,
.fi-ta-actions .table-action-delete.fi-icon-btn {
    background-color: #f97316 !important;
}

.fi-ta-actions .table-action-delete.fi-icon-btn {
    background-color: #ef4444 !important;
}

/* Z-index fix for dropdowns falling behind relation managers */
form.fi-form {
    position: relative;
    z-index: 40;
}

/* Inline flow for multiple selects */
.inline-select-flow .choices__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-bottom: 4px;
    /* Counteract wrap gap if needed */
}

.inline-select-flow .choices__list--multiple {
    display: contents;
    /* Allows badges and input to flow inline perfectly together */
}

.inline-select-flow .choices__input {
    margin-bottom: 0 !important;
}

/* User Roles Select Customization */
.roles-select-custom .fi-badge:only-child button {
    display: none !important;
    /* Filament v3 Alpine Select */
}

.roles-select-custom .choices__list--multiple>.choices__item:first-child:nth-last-child(2) .choices__button {
    display: none !important;
    /* Choices.js fallback */
}

/* Compact Repeater Hack to simulate simple() layout with multiple fields */
.compact-repeater ul {
    gap: 0.5rem !important;
}

.compact-repeater .fi-rep-item {
    display: flex;
    flex-direction: row-reverse;
    /* Puts the header (actions) on the right, fields on the left */
    align-items: center;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

div.fi-section-content.p-6:has(.compact-repeater) {
    padding: 15px 10px;
}

.compact-repeater .fi-fo-repeater-item-content {
    padding: 0 46px;
}

.compact-repeater>ul>div>li {
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
}

.compact-repeater .fi-fo-repeater-item-header {
    position: relative;
    height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
}

.compact-repeater .grid {
    gap: 8px;
}

.compact-repeater .divide-gray-100>:not([hidden])~:not([hidden]) {
    border: 0;
}

.compact-repeater .fi-fo-repeater-item-header button {
    position: absolute;
    left: 8px;
    top: 9px;
}

.compact-repeater .fi-fo-repeater-item-header button[title="Delete"] {
    left: auto;
    right: 8px;
}

.compact-repeater .fi-rep-item-header {
    border: none !important;
    background: transparent !important;
    padding: 0 0 0 0.5rem !important;
    flex-shrink: 0;
    min-height: auto !important;
}

.compact-repeater .fi-rep-item-header h4,
.compact-repeater .fi-rep-item-header .fi-rep-item-header-title {
    display: none !important;
}

.compact-repeater .fi-rep-item-content {
    flex-grow: 1;
    padding: 0 !important;
    border: none !important;
}

/* SUPPORT CONVERSATIONS PENDING ROW HIGHLIGHT */
tr.support-pending-row,
tr.support-pending-row td {
    background-color: #fff7ed !important;
    /* Soft orange/amber tint */
}

tr.support-pending-row td:first-child {
    border-left: 4px solid #f97316 !important;
    /* Vivid orange accent bar */
}

.dark tr.support-pending-row,
.dark tr.support-pending-row td {
    background-color: #7c2d1240 !important;
}

.dark tr.support-pending-row td:first-child {
    border-left: 4px solid #f97316 !important;
}

/* SUPPORT CHAT SCREEN FIXES */
.support-chat-container {
    height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.support-chat-messages {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
}

.support-chat-footer {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20 !important;
}

/* FAQ Questions List */
.questions-list {
    ul>div {
        gap: 6px;
    }

}

/* Section Edit QA */
.section-edit-qa>div {
    gap: 8px;
}