/* ==========================================================================
   IPDS — Info Plus Design System
   File:    ipds.tab.css
   Version: 1.0.0
   --------------------------------------------------------------------------
   CSS dedicado ao componente Tab próprio do IPDS.

   ESTRATÉGIA:
     • Mantém os mesmos NOMES de classe do jQuery UI Tabs no DOM
       (.ui-tabs, .ui-tabs-nav, .ui-tabs-panel, etc) para preservar
       compatibilidade com seletores existentes.
     • Sobrescreve regras conflitantes que estavam fazendo as abas
       virarem verticais no layout horizontal padrão.
     • Aplica identidade visual IPDS (navy + gold) com transições suaves.

   DEPENDE DE: ipds.tokens.css

   ORDEM NO JSP (carregar APÓS o theme do jQuery UI):
     <link rel="stylesheet" href="css/jquery/theme/cupertino/jquery-ui.min.css">
     <link rel="stylesheet" href="css/ipds.tokens.css">
     ...
     <link rel="stylesheet" href="css/ipds.tab.css">  ← AQUI
     ...
   ========================================================================== */


/* ==========================================================================
   1. CONTAINER DAS TABS (.ui-tabs)
   ========================================================================== */
.ui-tabs {
	position: relative;
	padding: 0;
	background: transparent;
	border: none;
	box-sizing: border-box;
}


/* ==========================================================================
   2. BARRA DE NAVEGAÇÃO HORIZONTAL (.ui-tabs-nav) — caso DEFAULT
   --------------------------------------------------------------------------
   Forçamos display:flex com flex-direction:row para vencer qualquer regra
   residual que estivesse fazendo os <li> ficarem empilhados verticalmente.
   ========================================================================== */
.ui-tabs > .ui-tabs-nav {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0 0 0 4px;
	list-style: none;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--ipds-border-subtle);
	box-sizing: border-box;
}

.ui-tabs > .ui-tabs-nav > li {
	display: inline-flex !important;
	float: none !important;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ipds-bg-subtle);
	border: 1px solid var(--ipds-border-subtle);
	border-bottom: none;
	border-radius: var(--ipds-radius-sm) var(--ipds-radius-sm) 0 0;
	cursor: pointer;
	transition: var(--ipds-transition-fast);
	position: relative;
	bottom: -1px;
}

.ui-tabs > .ui-tabs-nav > li > a.ui-tabs-anchor {
	display: inline-block;
	padding: 8px 16px;
	color: var(--ipds-text-secondary);
	font-size: var(--ipds-font-size-sm);
	font-weight: var(--ipds-font-weight-medium);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--ipds-transition-fast);
	box-sizing: border-box;
	min-height: 32px;
	line-height: 1.4;
}

/* Hover */
.ui-tabs > .ui-tabs-nav > li:hover {
	background: var(--ipds-state-hover-bg);
}

.ui-tabs > .ui-tabs-nav > li:hover > a.ui-tabs-anchor {
	color: var(--ipds-text-primary);
}

/* Aba ativa */
.ui-tabs > .ui-tabs-nav > li.ui-tabs-active,
.ui-tabs > .ui-tabs-nav > li.ui-state-active {
	background: var(--ipds-bg-surface);
	border-color: var(--ipds-border-subtle);
	border-bottom: 1px solid var(--ipds-bg-surface);
}

.ui-tabs > .ui-tabs-nav > li.ui-tabs-active > a.ui-tabs-anchor,
.ui-tabs > .ui-tabs-nav > li.ui-state-active > a.ui-tabs-anchor {
	color: var(--ipds-text-primary);
	font-weight: var(--ipds-font-weight-semibold);
}

/* Indicador gold na aba ativa */
.ui-tabs > .ui-tabs-nav > li.ui-tabs-active::before,
.ui-tabs > .ui-tabs-nav > li.ui-state-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ipds-color-gold-500);
	border-radius: var(--ipds-radius-sm) var(--ipds-radius-sm) 0 0;
}

/* Aba desabilitada */
.ui-tabs > .ui-tabs-nav > li.ui-state-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}


/* ==========================================================================
   3. PAINÉIS DE CONTEÚDO (.ui-tabs-panel)
   ========================================================================== */
.ui-tabs > .ui-tabs-panel {
	background: var(--ipds-bg-surface);
	border: 1px solid var(--ipds-border-subtle);
	border-top: none;
	border-radius: 0 0 var(--ipds-radius-sm) var(--ipds-radius-sm);
	padding: 12px;
	box-sizing: border-box;
}


/* ==========================================================================
   4. MODO VERTICAL (.ui-tabs-vertical)
   --------------------------------------------------------------------------
   Quando o usuário passa { vertical: true } no constructor, a classe
   .ui-tabs-vertical é adicionada ao container e o layout muda:
   - <ul> fica à esquerda
   - <div.ui-tabs-panel> fica à direita
   ========================================================================== */
.ui-tabs.ui-tabs-vertical {
	display: flex;
	flex-direction: row;
	gap: 0;
}

.ui-tabs.ui-tabs-vertical > .ui-tabs-nav {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap;
	align-items: stretch;
	width: auto;
	min-width: 160px;
	padding: 8px 0;
	border-bottom: none;
	border-right: 1px solid var(--ipds-border-subtle);
	gap: 4px;
	box-sizing: border-box;
}

.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li {
	display: flex !important;
	float: none !important;
	width: 100%;
	margin: 0;
	border-radius: var(--ipds-radius-sm) 0 0 var(--ipds-radius-sm);
	border-right: none;
	bottom: 0;
	right: -1px;
	background: var(--ipds-bg-subtle);
}

.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li > a.ui-tabs-anchor {
	flex: 1;
	padding: 10px 14px;
}

/* Aba ativa no modo vertical */
.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active,
.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li.ui-state-active {
	background: var(--ipds-bg-surface);
	border-right: 1px solid var(--ipds-bg-surface);
}

/* Indicador gold lateral (em vez de no topo) no modo vertical */
.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active::before,
.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li.ui-state-active::before {
	top: 0;
	bottom: 0;
	left: 0;
	right: auto;
	width: 2px;
	height: auto;
	border-radius: 0;
}

/* Painel no modo vertical fica à direita do menu */
.ui-tabs.ui-tabs-vertical > .ui-tabs-panel {
	flex: 1;
	border: 1px solid var(--ipds-border-subtle);
	border-left: none;
	border-radius: 0 var(--ipds-radius-sm) var(--ipds-radius-sm) 0;
}


/* ==========================================================================
   5. SORTABLE — visual de drag-and-drop
   ========================================================================== */
.ui-tabs > .ui-tabs-nav > li.lisortable {
	cursor: grab;
}

.ui-tabs > .ui-tabs-nav > li.lisortable:active,
.ui-tabs > .ui-tabs-nav > li.ui-sortable-helper {
	cursor: grabbing;
	opacity: 0.7;
	box-shadow: var(--ipds-shadow-sm);
}

.ui-tabs > .ui-tabs-nav > li.ui-sortable-placeholder {
	visibility: visible !important;
	background: var(--ipds-state-hover-bg);
	border: 1px dashed var(--ipds-border-default);
}


/* ==========================================================================
   6. RESPONSIVO (mobile)
   ========================================================================== */
@media (max-width: 768px) {
	.ui-tabs > .ui-tabs-nav > li > a.ui-tabs-anchor {
		padding: 6px 10px;
		font-size: var(--ipds-font-size-xs);
	}

	/* Modo vertical em mobile vira horizontal scrollável */
	.ui-tabs.ui-tabs-vertical {
		flex-direction: column;
	}

	.ui-tabs.ui-tabs-vertical > .ui-tabs-nav {
		flex-direction: row !important;
		flex-wrap: wrap;
		min-width: 0;
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--ipds-border-subtle);
		padding: 0 0 0 4px;
	}

	.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li {
		width: auto;
		border-radius: var(--ipds-radius-sm) var(--ipds-radius-sm) 0 0;
		border-right: 1px solid var(--ipds-border-subtle);
		right: 0;
		bottom: -1px;
	}
}