/**
 * Tutooh Core — WP Admin Global Skin
 * Aplica o Tutooh Design System a todo o WordPress Admin.
 * Carregado em TODAS as páginas admin via admin_enqueue_scripts (sem filtro de tela).
 *
 * Abordagem: override cirúrgico sobre os seletores nativos do WP,
 * usando os tokens do Design System Tutooh. Nunca usa !important
 * exceto onde o WP Admin força inline styles.
 *
 * @package Tutooh\Core
 * @since   1.6.5
 */

/* ==========================================================================
   0. Design Tokens
   ========================================================================== */
:root {
	/* Cores primárias */
	--tt-orange:        #FF7A2E;
	--tt-orange-dark:   #E5661A;
	--tt-orange-light:  #FF9C5E;
	--tt-lilas:         #BF9BDE;
	--tt-lilas-soft:    #D7C4F4;
	--tt-amarelo:       #F2D147;
	--tt-amarelo-soft:  #F8E5B4;
	--tt-azul:          #5E89ED;
	--tt-azul-soft:     #BCDBEB;
	--tt-verde:         #52C470;
	--tt-verde-soft:    #B7EDBB;
	--tt-rosa:          #EF6EA5;
	--tt-rosa-soft:     #F5C2D7;
	--tt-pessego:       #F7D1C3;

	/* Neutros */
	--tt-dark:          #2D2D2D;
	--tt-gray-700:      #4A4A4A;
	--tt-gray-500:      #7A7A7A;
	--tt-gray-300:      #C4C4C4;
	--tt-gray-100:      #F5F5F5;
	--tt-white:         #FFFFFF;
	--tt-bg:            #FAF8FF;

	/* Sombras */
	--tt-shadow-sm:     0 2px 8px rgba(0, 0, 0, .08);
	--tt-shadow-md:     0 4px 20px rgba(0, 0, 0, .12);
	--tt-shadow-lg:     0 8px 40px rgba(0, 0, 0, .16);
	--tt-shadow-orange: 0 4px 20px rgba(255, 122, 46, .35); /* sobrescrito por generate_custom_css() */
	--tt-shadow-lilas:  0 4px 20px rgba(191, 155, 222, .35);
	--tt-shadow-soft:   0 10px 30px rgba(0, 0, 0, .08);
	--tt-shadow-lift:   0 16px 42px rgba(0, 0, 0, .12);

	/* Bordas arredondadas */
	--tt-radius-xs:   4px;
	--tt-radius-sm:   8px;
	--tt-radius-md:   16px;
	--tt-radius-lg:   24px;
	--tt-radius-xl:   40px;
	--tt-radius-pill: 999px;

	/* Espaçamento */
	--tt-xs:  4px;
	--tt-sm:  8px;
	--tt-md:  16px;
	--tt-lg:  24px;
	--tt-xl:  40px;
	--tt-2xl: 64px;

	/* Tipografia */
	--tt-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Motion */
	--tt-ease:  cubic-bezier(.16, 1, .3, 1);
	--tt-dur-1: 120ms;
	--tt-dur-2: 180ms;
	--tt-dur-3: 260ms;
	--tt-ring:  0 0 0 3px rgba(255, 122, 46, .25); /* sobrescrito por generate_custom_css() */
}

/* ==========================================================================
   1. Base — tipografia global do admin
   ========================================================================== */
#wpcontent,
#wpfooter,
#wpbody,
#wpbody-content,
.wrap,
.wp-admin {
	font-family: var(--tt-font);
	color: var(--tt-dark);
}

#wpcontent h1,
#wpcontent h2,
#wpcontent h3,
#wpcontent h4,
#wpcontent h5 {
	font-family: var(--tt-font);
	font-weight: 800;
	color: var(--tt-dark);
}

#wpcontent p,
#wpcontent li,
#wpcontent label,
#wpcontent td,
#wpcontent th {
	font-family: var(--tt-font);
}

.wp-admin body,
body.wp-admin {
	background-color: var(--tt-bg);
}

/* ==========================================================================
   2. Admin Bar (#wpadminbar)
   ========================================================================== */
#wpadminbar {
	background: var(--tt-dark) !important;
	font-family: var(--tt-font) !important;
	border-bottom: 2px solid var(--tt-orange);
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar .ab-label {
	font-family: var(--tt-font) !important;
	font-weight: 600;
	color: rgba(255, 255, 255, .85) !important;
}

#wpadminbar .ab-top-menu > li > .ab-item:hover,
#wpadminbar .ab-top-menu > li.hover > .ab-item {
	background: rgba(var(--tt-primary-rgb), .18) !important;
	color: var(--tt-white) !important;
}

#wpadminbar #wp-admin-bar-root-default > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
	background: var(--tt-orange) !important;
	color: var(--tt-white) !important;
}

#wpadminbar .menupop .ab-sub-wrapper {
	background: var(--tt-dark) !important;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 0 0 var(--tt-radius-sm) var(--tt-radius-sm);
	box-shadow: var(--tt-shadow-lg) !important;
}

#wpadminbar .menupop .ab-sub-wrapper .ab-item,
#wpadminbar .menupop .ab-sub-wrapper a {
	color: rgba(255, 255, 255, .8) !important;
	font-family: var(--tt-font) !important;
	font-weight: 500;
}

#wpadminbar .menupop .ab-sub-wrapper a:hover {
	background: rgba(var(--tt-primary-rgb), .15) !important;
	color: var(--tt-white) !important;
}

/* Howdy / nome do usuário */
#wpadminbar #wp-admin-bar-my-account .ab-item {
	color: rgba(255, 255, 255, .7) !important;
}

/* Barra de progresso de upload */
#wpadminbar #upload-status .ab-item {
	color: var(--tt-orange) !important;
}

/* Logo WP na admin bar */
#wpadminbar #wp-admin-bar-wp-logo > .ab-item {
	padding: 0 8px;
}

#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
	color: rgba(255, 255, 255, .5) !important;
	transition: color var(--tt-dur-2) var(--tt-ease);
}

#wpadminbar #wp-admin-bar-wp-logo:hover > .ab-item .ab-icon:before {
	color: var(--tt-orange) !important;
}

/* ==========================================================================
   3. Menu lateral (#adminmenu)
   ========================================================================== */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
	background: var(--tt-dark) !important;
}

/* Borda decorativa laranja na lateral */
#adminmenuwrap {
	border-right: none;
	box-shadow: 2px 0 20px rgba(0, 0, 0, .15);
}

/* Links do menu */
#adminmenu li a,
#adminmenu li .wp-menu-name {
	font-family: var(--tt-font) !important;
	font-weight: 600;
	color: rgba(255, 255, 255, .72) !important;
	transition: color var(--tt-dur-2) var(--tt-ease),
	            background var(--tt-dur-2) var(--tt-ease);
}

/* Ícones do menu */
#adminmenu .wp-menu-image:before {
	color: rgba(255, 255, 255, .5) !important;
	transition: color var(--tt-dur-2) var(--tt-ease);
}

/* Hover nos itens */
#adminmenu li:hover > a,
#adminmenu li a:hover {
	background: rgba(var(--tt-primary-rgb), .15) !important;
	color: var(--tt-white) !important;
}

#adminmenu li:hover .wp-menu-image:before,
#adminmenu li a:hover .wp-menu-image:before {
	color: var(--tt-orange-light) !important;
}

/* Item ativo */
#adminmenu li.wp-has-current-submenu > a,
#adminmenu li.current > a,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow div {
	background: var(--tt-orange) !important;
	color: var(--tt-white) !important;
}

#adminmenu li.wp-has-current-submenu .wp-menu-image:before,
#adminmenu li.current .wp-menu-image:before {
	color: var(--tt-white) !important;
}

/* Separadores */
#adminmenu li.wp-menu-separator {
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, .06);
}

#adminmenu li.wp-menu-separator div {
	background: transparent !important;
}

/* Submenus */
#adminmenu .wp-submenu {
	background: rgba(0, 0, 0, .25) !important;
	border-top: 1px solid rgba(255, 255, 255, .04);
}

#adminmenu .wp-submenu a {
	color: rgba(255, 255, 255, .65) !important;
	font-family: var(--tt-font) !important;
	font-size: 12.5px;
	font-weight: 500;
	padding: 7px 7px 7px 30px !important;
}

#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu li.current > a {
	background: rgba(var(--tt-primary-rgb), .18) !important;
	color: var(--tt-white) !important;
	box-shadow: none !important;
}

#adminmenu .wp-submenu li.current > a {
	color: var(--tt-orange-light) !important;
	font-weight: 700;
}

/* Submenu flyout */
#adminmenu li.wp-has-current-submenu ul.wp-submenu,
#adminmenu li.wp-not-current-submenu ul.wp-submenu {
	background: #1E1E28 !important;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0;
	box-shadow: var(--tt-shadow-md) !important;
}

/* Badge de contagem (ex: Comentários 3) */
#adminmenu .update-plugins,
#adminmenu .awaiting-mod,
#adminmenu .comments-awaiting-mod-count,
#adminmenu .plugin-count {
	background: var(--tt-orange) !important;
	color: var(--tt-white) !important;
	border-radius: var(--tt-radius-pill) !important;
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	font-size: 10px !important;
}

/* Collapse button */
#collapse-button {
	color: rgba(255, 255, 255, .4) !important;
	transition: color var(--tt-dur-2) var(--tt-ease);
}

#collapse-button:hover {
	color: var(--tt-orange) !important;
}

/* ==========================================================================
   4. Área de conteúdo principal (#wpcontent)
   ========================================================================== */
#wpcontent {
	background-color: var(--tt-bg);
}

#wpbody-content .wrap {
	max-width: 1400px;
}

/* Título de página h1 */
.wp-heading-inline {
	font-family: var(--tt-font) !important;
	font-weight: 800;
	color: var(--tt-dark);
}

/* Breadcrumbs / subtítulos */
.subtitle {
	font-family: var(--tt-font) !important;
	color: var(--tt-gray-500);
}

/* ==========================================================================
   5. Botões nativos do WordPress
   Design System Tutooh: todos os botões admin seguem os tokens do DS.

   Hierarquia de estilos:
     .button / .button-secondary  →  ghost (fundo branco, borda cinza)
     .button-primary / #publish   →  primário (laranja, texto dinâmico)
     .page-title-action           →  outline (borda laranja, preenche no hover)
     .button.button-hero          →  lg (padding maior, destaque)
     .button.delete / .submitdelete → danger (texto rosa/vermelho)
   ========================================================================== */

/* ---- Base compartilhada -------------------------------------------------- */
.button,
.button-secondary,
.button-primary,
input[type="submit"].button-primary,
.page-title-action,
.wp-media-buttons .button,
.wp-editor-tabs .wp-switch-editor {
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	line-height: 1 !important;
	height: auto !important;
	white-space: nowrap;
	transition:
		background var(--tt-dur-2) var(--tt-ease),
		border-color var(--tt-dur-2) var(--tt-ease),
		color var(--tt-dur-2) var(--tt-ease),
		box-shadow var(--tt-dur-2) var(--tt-ease),
		transform var(--tt-dur-2) var(--tt-ease) !important;
}

/* ---- Botão secundário / ghost (padrão WP) -------------------------------- */
.button,
.button-secondary {
	font-size: 13px !important;
	border-radius: var(--tt-radius-sm) !important;
	border: 1.5px solid var(--tt-gray-300) !important;
	background: var(--tt-white) !important;
	color: var(--tt-gray-700) !important;
	padding: 7px 14px !important;
	box-shadow: none !important;
}

.button:hover,
.button-secondary:hover {
	background: var(--tt-gray-100) !important;
	border-color: var(--tt-gray-500) !important;
	color: var(--tt-dark) !important;
	box-shadow: var(--tt-shadow-sm) !important;
	transform: translateY(-1px);
}

.button:focus,
.button-secondary:focus {
	outline: none !important;
	box-shadow: var(--tt-ring) !important;
}

.button:active,
.button-secondary:active {
	transform: translateY(0) !important;
	box-shadow: none !important;
}

/* ---- Botão primário ------------------------------------------------------ */
.button-primary,
input[type="submit"].button-primary,
#publish,
#save-post {
	font-size: 13px !important;
	border-radius: var(--tt-radius-sm) !important;
	background: var(--tt-orange) !important;
	border: 1.5px solid var(--tt-orange) !important;
	/*
	 * Cor do texto calculada por luminância via generate_custom_css().
	 * Branco em fundos escuros, escuro (#2D2D2D) em fundos claros.
	 * Fallback: branco para o caso padrão laranja.
	 */
	color: var(--tutooh-on-primary, var(--tt-white)) !important;
	padding: 8px 20px !important;
	box-shadow: var(--tt-shadow-orange) !important;
	text-shadow: none !important;
}

.button-primary:hover,
input[type="submit"].button-primary:hover,
#publish:hover,
#save-post:hover {
	background: var(--tt-orange-dark) !important;
	border-color: var(--tt-orange-dark) !important;
	color: var(--tutooh-on-primary, var(--tt-white)) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 24px rgba(var(--tt-primary-rgb), .45) !important;
}

.button-primary:focus,
input[type="submit"].button-primary:focus {
	outline: none !important;
	box-shadow: var(--tt-ring), var(--tt-shadow-orange) !important;
}

.button-primary:active,
input[type="submit"].button-primary:active {
	transform: translateY(0) !important;
}

/* ---- "Adicionar Novo X" — page-title-action ------------------------------ */
/*
 * Na screenshot aparece como outline azul WP nativo.
 * Aqui vira outline laranja, que preenche no hover — igual ao .btn-outline do DS.
 */
.page-title-action,
.add-new-h2 {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-radius: var(--tt-radius-sm) !important;
	background: transparent !important;
	border: 1.5px solid var(--tt-orange) !important;
	color: var(--tt-orange) !important;
	padding: 7px 14px !important;
	box-shadow: none !important;
	transition: all var(--tt-dur-2) var(--tt-ease) !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.page-title-action:hover,
.add-new-h2:hover {
	background: var(--tt-orange) !important;
	color: var(--tt-white) !important;
	border-color: var(--tt-orange) !important;
	box-shadow: var(--tt-shadow-orange) !important;
	transform: translateY(-1px) !important;
}

.page-title-action:focus,
.add-new-h2:focus {
	outline: none !important;
	box-shadow: var(--tt-ring) !important;
}

/* ---- Botão hero (tamanho grande, ex: na tela de plugins) ----------------- */
.button.button-hero {
	padding: 12px 24px !important;
	font-size: 15px !important;
	border-radius: var(--tt-radius-md) !important;
}

/* ---- Danger / Delete ----------------------------------------------------- */
.button.delete,
.button.submitdelete,
a.delete,
a.submitdelete,
#delete-action a,
.row-actions .trash a,
.row-actions .delete a {
	color: #A8204D !important;
}

.button.delete:hover,
.button.submitdelete:hover,
a.delete:hover,
a.submitdelete:hover {
	color: var(--tt-rosa) !important;
}

/* ---- "Opções de tela" / "Ajuda" (screen-meta-toggle) -------------------- */
.screen-meta-toggle .show-settings,
#screen-meta-links .show-settings,
#screen-options-link-wrap a,
#contextual-help-link-wrap a {
	font-family: var(--tt-font) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--tt-gray-500) !important;
	border: 1.5px solid var(--tt-gray-300) !important;
	background: var(--tt-white) !important;
	border-radius: var(--tt-radius-sm) !important;
	padding: 5px 12px !important;
	transition: all var(--tt-dur-2) var(--tt-ease) !important;
}

.screen-meta-toggle .show-settings:hover,
#screen-options-link-wrap a:hover,
#contextual-help-link-wrap a:hover {
	border-color: var(--tt-gray-500) !important;
	color: var(--tt-dark) !important;
	background: var(--tt-gray-100) !important;
}

/* ==========================================================================
   6. Inputs, selects e textareas
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea,
.regular-text,
.large-text {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 500;
	border: 1.5px solid var(--tt-gray-300) !important;
	border-radius: var(--tt-radius-sm) !important;
	padding: 8px 12px !important;
	color: var(--tt-dark) !important;
	background: var(--tt-white) !important;
	box-shadow: none !important;
	transition: border-color var(--tt-dur-2), box-shadow var(--tt-dur-2) !important;
	line-height: 1.5 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
	border-color: var(--tt-orange) !important;
	box-shadow: var(--tt-ring) !important;
	outline: none !important;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
	color: var(--tt-gray-300) !important;
}

/* Search box no topo das listagens */
.search-box input[type="search"] {
	border-radius: var(--tt-radius-sm) !important;
}

/* ==========================================================================
   7. Notices (admin-notices)
   ========================================================================== */
.notice,
div.updated,
div.error,
div.notice-warning,
div.notice-success,
div.notice-info,
div.notice-error {
	border-radius: var(--tt-radius-sm) !important;
	border-left-width: 4px !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 600;
	padding: 12px 16px !important;
	margin: 8px 20px 8px 2px !important;
	box-shadow: var(--tt-shadow-sm);
}

.notice-success,
div.updated {
	background: rgba(82, 196, 112, .1) !important;
	border-left-color: var(--tt-verde) !important;
	color: #1E7A3C !important;
}

.notice-warning {
	background: rgba(242, 209, 71, .15) !important;
	border-left-color: var(--tt-amarelo) !important;
	color: #6B5800 !important;
}

.notice-error,
div.error {
	background: rgba(239, 110, 165, .1) !important;
	border-left-color: var(--tt-rosa) !important;
	color: #A8204D !important;
}

.notice-info {
	background: rgba(94, 137, 237, .1) !important;
	border-left-color: var(--tt-azul) !important;
	color: #2B50B5 !important;
}

.notice p,
div.updated p,
div.error p {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
}

/* Botão dismiss (×) do notice */
.notice-dismiss {
	color: var(--tt-gray-500) !important;
	transition: color var(--tt-dur-2) var(--tt-ease);
}

.notice-dismiss:hover {
	color: var(--tt-rosa) !important;
}

.notice-dismiss::before {
	color: inherit !important;
}

/* ==========================================================================
   8. Tabelas WP List Table
   ========================================================================== */
.wp-list-table {
	background: var(--tt-white) !important;
	border: 1px solid rgba(0, 0, 0, .06) !important;
	border-radius: var(--tt-radius-sm) !important;
	box-shadow: var(--tt-shadow-sm) !important;
	overflow: hidden;
	font-family: var(--tt-font) !important;
}

.wp-list-table thead th,
.wp-list-table tfoot th {
	background: var(--tt-gray-100) !important;
	font-family: var(--tt-font) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--tt-gray-500) !important;
	border-bottom: 2px solid rgba(0, 0, 0, .06) !important;
	padding: 12px 16px !important;
}

.wp-list-table thead th.sorted,
.wp-list-table thead th.asc,
.wp-list-table thead th.desc {
	background: rgba(var(--tt-primary-rgb), .06) !important;
	color: var(--tt-orange-dark) !important;
}

.wp-list-table thead th a,
.wp-list-table tfoot th a {
	color: inherit !important;
	font-weight: inherit !important;
}

.wp-list-table thead th a:hover,
.wp-list-table tfoot th a:hover {
	color: var(--tt-orange) !important;
}

/* Linhas */
.wp-list-table tbody tr {
	border-bottom: 1px solid var(--tt-gray-100) !important;
	transition: background var(--tt-dur-1) !important;
}

.wp-list-table tbody tr:hover,
.wp-list-table tbody tr.alternate:hover {
	background: rgba(var(--tt-primary-rgb), .025) !important;
}

.wp-list-table tbody tr.alternate {
	background: rgba(0, 0, 0, .018) !important;
}

.wp-list-table td,
.wp-list-table th.check-column {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	padding: 12px 16px !important;
	vertical-align: middle !important;
}

/* Row actions (Editar | Lixeira | ...) */
.wp-list-table .row-actions {
	font-size: 12px !important;
	color: var(--tt-gray-500) !important;
}

.wp-list-table .row-actions a {
	color: var(--tt-azul) !important;
	font-weight: 600;
}

.wp-list-table .row-actions .trash a,
.wp-list-table .row-actions .delete a {
	color: #A8204D !important;
}

/* Coluna title */
.wp-list-table .column-title strong a,
.wp-list-table td strong a {
	font-weight: 700 !important;
	color: var(--tt-dark) !important;
}

.wp-list-table .column-title strong a:hover,
.wp-list-table td strong a:hover {
	color: var(--tt-orange) !important;
}

/* Status badges nas colunas */
.wp-list-table .post-state {
	font-family: var(--tt-font) !important;
	font-size: 11px !important;
	font-weight: 700;
	color: var(--tt-gray-500);
}

/* ==========================================================================
   9. Postbox / Meta boxes
   ========================================================================== */
.postbox,
.postbox-container .postbox {
	background: var(--tt-white) !important;
	border: 1px solid rgba(0, 0, 0, .06) !important;
	border-radius: var(--tt-radius-sm) !important;
	box-shadow: var(--tt-shadow-sm) !important;
}

.postbox .postbox-header {
	border-bottom: 1px solid var(--tt-gray-100) !important;
	padding: 12px 16px !important;
	background: transparent !important;
	border-radius: var(--tt-radius-sm) var(--tt-radius-sm) 0 0 !important;
}

.postbox .postbox-header h2,
.postbox .hndle,
.postbox .postbox-header .hndle {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--tt-dark) !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 0 !important;
}

.postbox .inside {
	padding: var(--tt-md) !important;
}

/* Toggle handle */
.postbox .postbox-header .handle-order-higher,
.postbox .postbox-header .handle-order-lower,
.postbox .postbox-header .toggle-indicator {
	color: var(--tt-gray-300) !important;
	transition: color var(--tt-dur-2) var(--tt-ease);
}

.postbox .postbox-header:hover .handle-order-higher,
.postbox .postbox-header:hover .handle-order-lower,
.postbox .postbox-header:hover .toggle-indicator {
	color: var(--tt-orange) !important;
}

/* ==========================================================================
   10. Abas nativas do WP (nav-tab-wrapper)
   ========================================================================== */
.nav-tab-wrapper,
.nav-tab-wrapper-vertical {
	border-bottom: 2px solid var(--tt-lilas-soft) !important;
	margin-bottom: var(--tt-lg) !important;
}

.nav-tab {
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	color: var(--tt-gray-500) !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	background: transparent !important;
	margin-bottom: -2px !important;
	padding: 8px 16px !important;
	border-radius: var(--tt-radius-sm) var(--tt-radius-sm) 0 0 !important;
	transition: color var(--tt-dur-2) var(--tt-ease), background var(--tt-dur-2) var(--tt-ease) !important;
}

.nav-tab:hover {
	color: var(--tt-orange) !important;
	background: rgba(var(--tt-primary-rgb), .05) !important;
}

.nav-tab-active,
.nav-tab.nav-tab-active {
	color: var(--tt-orange) !important;
	border-bottom-color: var(--tt-orange) !important;
	background: rgba(var(--tt-primary-rgb), .06) !important;
}

/* ==========================================================================
   11. Formulários de configurações (settings)
   ========================================================================== */
.form-table th {
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	color: var(--tt-dark) !important;
	padding: 20px 10px 20px 0 !important;
	width: 220px;
}

.form-table td {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	padding: 15px 10px !important;
}

.form-table td .description,
.form-table p.description {
	font-family: var(--tt-font) !important;
	font-size: 12px !important;
	color: var(--tt-gray-500) !important;
	margin-top: 6px !important;
}

/* ==========================================================================
   12. Checkboxes e radios
   ========================================================================== */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--tt-orange);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

/* ==========================================================================
   13. Screen options e Help tab
   ========================================================================== */
#screen-options-wrap,
#contextual-help-wrap {
	font-family: var(--tt-font) !important;
	background: var(--tt-white) !important;
	border: 1px solid rgba(0, 0, 0, .08) !important;
	border-radius: 0 0 var(--tt-radius-sm) var(--tt-radius-sm) !important;
	box-shadow: var(--tt-shadow-md) !important;
}

#screen-options-wrap label,
#contextual-help-wrap label {
	font-family: var(--tt-font) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}

.show-settings {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	color: var(--tt-gray-500) !important;
}

.show-settings:hover {
	color: var(--tt-orange) !important;
}

/* ==========================================================================
   14. Media Uploader / File upload area
   ========================================================================== */
.upload-ui .upload-drop-zone {
	border: 2.5px dashed var(--tt-lilas) !important;
	border-radius: var(--tt-radius-md) !important;
	background: rgba(191, 155, 222, .04) !important;
	transition: all var(--tt-dur-2) var(--tt-ease) !important;
}

.upload-ui .upload-drop-zone:hover,
.upload-ui .upload-drop-zone.drop {
	border-color: var(--tt-orange) !important;
	background: rgba(var(--tt-primary-rgb), .04) !important;
}

.upload-ui .upload-drop-zone .upload-instructions {
	font-family: var(--tt-font) !important;
	color: var(--tt-gray-500) !important;
}

/* ==========================================================================
   15. Tablenav — paginação, bulk actions e barra de ações
   ========================================================================== */

/* ---- Bulk actions: select "Ações em massa" ------------------------------- */
.tablenav .actions select {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: var(--tt-radius-sm) !important;
	border: 1.5px solid var(--tt-gray-300) !important;
	background: var(--tt-white) !important;
	color: var(--tt-dark) !important;
	padding: 6px 12px !important;
	height: auto !important;
	box-shadow: none !important;
	cursor: pointer;
}

.tablenav .actions select:focus {
	border-color: var(--tt-orange) !important;
	box-shadow: var(--tt-ring) !important;
	outline: none !important;
}

/* ---- Botão "Aplicar" (bulk) ---------------------------------------------- */
/*
 * Na screenshot o botão "Aplicar" aparece com estilo genérico WP.
 * Segue o ghost do DS: branco + borda cinza.
 */
.tablenav .actions .button#doaction,
.tablenav .actions .button#doaction2 {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}

/* ---- Filtros: "Todas as datas", "Filtrar", selects de taxonomia ---------- */
.tablenav select {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	border-radius: var(--tt-radius-sm) !important;
	border: 1.5px solid var(--tt-gray-300) !important;
	background: var(--tt-white) !important;
	color: var(--tt-dark) !important;
	padding: 6px 12px !important;
	height: auto !important;
	box-shadow: none !important;
}

.tablenav select:focus {
	border-color: var(--tt-orange) !important;
	box-shadow: var(--tt-ring) !important;
	outline: none !important;
}

/* ---- Botão "Filtrar" ----------------------------------------------------- */
.tablenav .button.submit-filter,
.tablenav input[type="submit"][id*="filter"] {
	background: var(--tt-white) !important;
	border: 1.5px solid var(--tt-gray-300) !important;
	color: var(--tt-gray-700) !important;
}

/* ---- Search box: campo + botão "Buscar X" -------------------------------- */
/*
 * Na screenshot "Buscar Pets" aparece como botão cinza/ghost.
 * No DS seria um botão primário — fazemos ele laranja já que
 * é a ação principal do formulário de busca.
 */
.search-box input[type="submit"],
p.search-box input[type="submit"] {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-radius: var(--tt-radius-sm) !important;
	background: var(--tt-orange) !important;
	border: 1.5px solid var(--tt-orange) !important;
	color: var(--tutooh-on-primary, var(--tt-white)) !important;
	padding: 7px 16px !important;
	height: auto !important;
	box-shadow: var(--tt-shadow-orange) !important;
	transition: all var(--tt-dur-2) var(--tt-ease) !important;
	cursor: pointer !important;
}

.search-box input[type="submit"]:hover,
p.search-box input[type="submit"]:hover {
	background: var(--tt-orange-dark) !important;
	border-color: var(--tt-orange-dark) !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 24px rgba(var(--tt-primary-rgb), .4) !important;
}

/* ---- Paginação ----------------------------------------------------------- */
.tablenav .tablenav-pages a,
.tablenav .tablenav-pages .current-page {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-radius: var(--tt-radius-xs) !important;
	padding: 5px 10px !important;
	transition: background var(--tt-dur-2) var(--tt-ease) !important;
}

.tablenav .tablenav-pages a:hover {
	background: var(--tt-orange) !important;
	color: var(--tt-white) !important;
	border-color: var(--tt-orange) !important;
}

/* ---- Campo input de "ir para página" ------------------------------------- */
.tablenav .tablenav-pages input.current-page {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-radius: var(--tt-radius-xs) !important;
	padding: 4px 8px !important;
	width: 50px !important;
	text-align: center;
}

/* ==========================================================================
   16. Dashboard Widgets
   ========================================================================== */
.postbox-container .meta-box-sortables .postbox .inside p {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	color: var(--tt-gray-700);
}

/* Activity feed */
#dashboard_activity .activity-block {
	border-bottom: 1px solid var(--tt-gray-100) !important;
}

#dashboard_activity h3 {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	color: var(--tt-dark) !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-bottom: 2px solid var(--tt-orange) !important;
	padding-bottom: 8px;
}

/* At a glance */
#dashboard_right_now .main {
	background: linear-gradient(135deg, var(--tt-orange) 0%, var(--tt-orange-light) 100%) !important;
	border-radius: var(--tt-radius-sm) !important;
}

#dashboard_right_now .main h2 {
	color: var(--tt-white) !important;
	font-family: var(--tt-font) !important;
	font-size: 24px !important;
	font-weight: 800 !important;
}

#dashboard_right_now .sub {
	background: rgba(var(--tt-primary-rgb), .06) !important;
}

/* Quick draft */
#dashboard_quick_press .input-text-wrap input,
#dashboard_quick_press .wp-editor-area {
	border-radius: var(--tt-radius-sm) !important;
}

#dashboard_quick_press #publish {
	margin-top: var(--tt-sm) !important;
}

/* ==========================================================================
   17. Editor Clássico (TinyMCE area)
   ========================================================================== */
#wp-content-editor-tools,
.wp-editor-tools {
	background: var(--tt-gray-100) !important;
	border: 1px solid rgba(0, 0, 0, .06) !important;
	border-bottom: none !important;
	border-radius: var(--tt-radius-sm) var(--tt-radius-sm) 0 0 !important;
}

.wp-media-buttons .button,
.wp-editor-tabs .wp-switch-editor {
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
}

.wp-editor-tabs .wp-switch-editor.switch-tmce.active,
.wp-editor-tabs .wp-switch-editor.switch-html.active {
	background: var(--tt-orange) !important;
	border-color: var(--tt-orange) !important;
	color: var(--tt-white) !important;
}

/* ==========================================================================
   18. Block Editor — ajustes da toolbar principal
   ========================================================================== */
.block-editor-page #wpadminbar {
	background: var(--tt-dark) !important;
}

.edit-post-header,
.editor-header {
	font-family: var(--tt-font) !important;
	border-bottom: 1px solid var(--tt-gray-100) !important;
}

.editor-header__toolbar .components-button,
.edit-post-header__toolbar .components-button {
	font-family: var(--tt-font) !important;
}

/* ==========================================================================
   19. Scrollbar personalizada
   ========================================================================== */
::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-track {
	background: var(--tt-gray-100);
}

::-webkit-scrollbar-thumb {
	background: var(--tt-lilas-soft);
	border-radius: var(--tt-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--tt-lilas);
}

/* ==========================================================================
   20. Login page (#login)
   ========================================================================== */
body.login {
	background: var(--tt-bg) !important;
	font-family: var(--tt-font) !important;
}

body.login #login h1 a {
	background-image: url('https://veronikas.com.br/tutoohimage/logotutooh_cor.svg') !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	width: 200px !important;
	height: 60px !important;
}

body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
	background: var(--tt-white) !important;
	border: 1px solid rgba(0, 0, 0, .08) !important;
	border-radius: var(--tt-radius-md) !important;
	box-shadow: var(--tt-shadow-md) !important;
	padding: var(--tt-xl) !important;
}

body.login #loginform label,
body.login #lostpasswordform label,
body.login #registerform label {
	font-family: var(--tt-font) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	color: var(--tt-dark) !important;
}

body.login input[type="text"],
body.login input[type="password"] {
	font-family: var(--tt-font) !important;
	border: 1.5px solid var(--tt-gray-300) !important;
	border-radius: var(--tt-radius-sm) !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	height: auto !important;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
	border-color: var(--tt-orange) !important;
	box-shadow: var(--tt-ring) !important;
}

body.login .button-primary {
	width: 100% !important;
	padding: 12px !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	letter-spacing: .2px;
	border-radius: var(--tt-radius-sm) !important;
	background: var(--tt-orange) !important;
	border-color: var(--tt-orange) !important;
	box-shadow: var(--tt-shadow-orange) !important;
	height: auto !important;
}

body.login .button-primary:hover {
	background: var(--tt-orange-dark) !important;
	border-color: var(--tt-orange-dark) !important;
	transform: translateY(-1px);
}

body.login #nav,
body.login #backtoblog {
	text-align: center !important;
}

body.login #nav a,
body.login #backtoblog a {
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	color: var(--tt-gray-500) !important;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--tt-orange) !important;
}

body.login #login_error,
body.login .message,
body.login .success {
	border-radius: var(--tt-radius-sm) !important;
	border-left-width: 4px !important;
	font-family: var(--tt-font) !important;
	font-size: 13px !important;
	font-weight: 600;
}

body.login #login_error {
	background: rgba(239, 110, 165, .1) !important;
	border-left-color: var(--tt-rosa) !important;
	color: #A8204D !important;
}

body.login .message {
	background: rgba(94, 137, 237, .1) !important;
	border-left-color: var(--tt-azul) !important;
	color: #2B50B5 !important;
}

/* ==========================================================================
   21. Footer do Admin
   ========================================================================== */
#wpfooter {
	font-family: var(--tt-font) !important;
	font-size: 12px !important;
	color: var(--tt-gray-500) !important;
	border-top: 1px solid var(--tt-gray-100) !important;
}

#wpfooter a {
	color: var(--tt-orange) !important;
	font-weight: 600;
}

#wpfooter a:hover {
	color: var(--tt-orange-dark) !important;
}

/* ==========================================================================
   22. Color scheme override — força o tema Tutooh independente do
       esquema de cores escolhido pelo usuário
   ========================================================================== */
html[dir] body #adminmenu,
html[dir] body #adminmenuback,
html[dir] body #adminmenuwrap {
	background: var(--tt-dark) !important;
}

html[dir] body #wpadminbar {
	background: var(--tt-dark) !important;
}

/* ==========================================================================
   23. Spinner nativo do WP
   ========================================================================== */
.spinner {
	background-image: none !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	border: 2.5px solid rgba(0, 0, 0, .1) !important;
	border-top-color: var(--tt-orange) !important;
	animation: tt-spin-native 700ms linear infinite !important;
	float: none !important;
	vertical-align: middle !important;
	margin: 0 6px !important;
}

@keyframes tt-spin-native {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   24. Tag cloud / chips nativos
   ========================================================================== */
.tagcloud a,
.tag-cloud a {
	font-family: var(--tt-font) !important;
	border-radius: var(--tt-radius-pill) !important;
	padding: 4px 12px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	background: rgba(191, 155, 222, .15) !important;
	color: #6B3FA0 !important;
	border: 1.5px solid rgba(191, 155, 222, .3) !important;
	transition: all var(--tt-dur-2) var(--tt-ease) !important;
	text-decoration: none !important;
}

.tagcloud a:hover,
.tag-cloud a:hover {
	background: var(--tt-lilas) !important;
	color: var(--tt-white) !important;
	border-color: var(--tt-lilas) !important;
}

/* ==========================================================================
   25. Links gerais no admin
   ========================================================================== */
#wpcontent a,
#wpbody-content a {
	color: var(--tt-azul);
	transition: color var(--tt-dur-2) var(--tt-ease);
}

#wpcontent a:hover,
#wpbody-content a:hover {
	color: var(--tt-orange);
}

/* Links de edição inline */
.row-actions a {
	text-decoration: none !important;
}

/* ==========================================================================
   26. Breakpoints
   ========================================================================== */
@media screen and (max-width: 960px) {
	.nav-tab {
		font-size: 12px !important;
		padding: 6px 10px !important;
	}

	.wp-list-table td,
	.wp-list-table th {
		padding: 10px 12px !important;
	}
}

@media screen and (max-width: 600px) {
	.button-primary,
	.button {
		padding: 8px 14px !important;
	}
}