/* ==========================================
   Hub Tasks — Design System
   Tokens: var(--hub-*) como fonte da verdade
   Retrocompatibilidade: var(--beto-*) mantido via aliases em :root
   ========================================== */

/* --- Overlay & Sidebar --- */
.beto-tasks-overlay {
	position: fixed; top: 0; left: 0; right: 0; bottom: 0;
	background: var(--hub-overlay-bg); z-index: 9998;
	backdrop-filter: blur(4px);
}
.beto-tasks-sidebar {
	position: fixed; top: 0; right: 0; width: clamp(720px, 54vw, 880px); height: calc(100vh - 32px);
	background: var(--hub-surface); z-index: 9999; overflow: hidden;
	margin: var(--space-s);
	border: 1px solid var(--hub-border);
	border-radius: var(--hub-radius);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.64);
	display: flex;
	flex-direction: column;
	animation: betoDrawerIn 180ms ease-out;
	box-sizing: border-box; font-family: var(--beto-font);
}
.beto-tasks-sidebar-content {
	flex: 1;
	overflow-y: auto;
	padding: 8px 0 16px 0;
}

/* --- Header --- */
.beto-tasks-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 16px 20px; border-bottom: 1px solid var(--hub-border);
	position: sticky; top: 0; background: var(--hub-surface); z-index: 1;
}
.beto-tasks-header h2 {
	margin: 0; font-size: var(--hub-text-card-title); font-weight: var(--hub-weight-semibold); letter-spacing: 0.03em; color: var(--hub-text);
}
.beto-tasks-close {
	background: none; border: none; color: var(--hub-text-muted);
	font-size: 1.1em; cursor: pointer; padding: 4px 8px; border-radius: var(--hub-radius);
	transition: color 0.15s, background 0.15s;
}
.beto-tasks-close:hover { color: var(--hub-text); background: var(--hub-surface-raised); }

/* --- Botão + Nova Tarefa --- */
.beto-tasks-add-btn {
	display: inline-block;
	width: auto;
	margin: 16px;
}

/* --- Botão "Nova Tarefa" dentro do drawer da unidade --- */
.beto-tasks-drawer-add-btn {
	margin: 0 0 12px 0;
}

/* --- Blocos de status --- */
.beto-tasks-block {
	margin: 0 16px 12px 16px; padding: 10px 0 4px 0;
	border-radius: var(--hub-radius);
}
.beto-tasks-block--drawer {
	margin: 0; border-radius: 0;
}
.beto-tasks-block-title {
	margin: 0 0 4px 0; padding: 0 8px;
	font-size: var(--hub-text-eyebrow); font-weight: var(--hub-weight-semibold);
	text-transform: uppercase; letter-spacing: 0.8px;
	color: var(--hub-text-muted);
}

/* --- Tabela de tarefas --- */
.beto-tasks-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.beto-tasks-table tbody tr {
	cursor: pointer;
	transition: background-color 0.15s;
}
.beto-tasks-table tbody tr:focus {
	outline: 2px solid var(--hub-primary);
	outline-offset: -2px;
}
.beto-tasks-table td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--hub-border);
	font-size: var(--hub-text-table);
	line-height: var(--hub-leading-snug);
	vertical-align: middle;
	color: var(--hub-text);
}
.beto-tasks-table tr:last-child td {
	border-bottom: none;
}
.beto-tasks-table tr:hover td {
	background: rgba(203, 123, 55, 0.055) !important;
}

/* Coluna indicador de status (bolinha + border-left) */
.beto-tasks-table__status {
	width: 44px; min-width: 44px; max-width: 44px;
	text-align: center; padding: 5px 0 5px 4px !important;
	font-size: var(--hub-text-card-title); line-height: 1;
}
.beto-tasks-table tr.is-progress td:first-child {
	box-shadow: inset 3px 0 0 var(--hub-primary);
}
.beto-tasks-table tr.is-parked td:first-child {
	box-shadow: inset 3px 0 0 var(--hub-border-strong);
}
.beto-tasks-table tr.is-completed td:first-child {
	box-shadow: inset 3px 0 0 var(--hub-success);
}
.beto-tasks-table__status--progress { color: var(--hub-primary); }
.beto-tasks-table__status--parked   { color: var(--hub-text-muted); }
.beto-tasks-table__status--completed { color: var(--hub-success); }

/* Coluna título */
.beto-tasks-table__title {
	width: 160px; min-width: 160px; max-width: 160px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-weight: var(--hub-weight-semibold); color: var(--hub-text);
}

/* Coluna unidade (badge) */
.beto-tasks-table__unit {
	width: 110px; min-width: 110px; max-width: 110px;
	text-align: center; padding: 5px 4px !important;
}
.beto-tasks-table__unit-dash {
	color: var(--hub-text-muted);
}

/* Coluna ações */
.beto-tasks-table__actions {
	width: 145px; min-width: 145px; max-width: 145px;
	text-align: right; padding: 5px 4px 5px 8px !important;
	white-space: nowrap;
}

/* Select compacto de status na tabela */
.beto-tasks-status-select {
	font-size: var(--hub-text-label); padding: 2px 4px;
	background: var(--hub-input-bg); color: var(--hub-text);
	border: 1px solid var(--hub-border-strong); border-radius: var(--hub-radius);
	height: 24px; line-height: 24px; cursor: pointer;
	max-width: 100px;
}

/* --- Badge de unidade na tabela --- */
.beto-tasks-table .beto-badge {
	font-size: var(--hub-text-eyebrow); padding: 2px 6px; margin: 0;
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* Botão de ação compacto na tabela de tarefas */
.beto-tasks-table .beto-button--compact {
	min-height: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: var(--hub-text-eyebrow);
	line-height: 1;
}

/* --- Estado vazio no bloco --- */
.beto-tasks-block-empty {
	margin: 0 16px 12px 16px; padding: 8px;
	color: var(--hub-text-muted); font-size: var(--hub-text-table);
	text-align: center;
}

/* --- Loading: sidebar --- */
.beto-tasks-loading--sidebar {
	padding: 24px;
	text-align: center;
}
.beto-tasks-loading-skeleton {
	display: inline-block;
	width: 180px;
	height: 16px;
}
.beto-tasks-loading-skeleton--sm {
	display: inline-block;
	width: 160px;
	height: 14px;
}

/* --- Loading no container do drawer --- */
.beto-tasks-drawer-loading {
	padding: 16px;
	text-align: center;
}
.beto-tasks-drawer-loading .beto-skeleton {
	display: inline-block;
	width: 160px;
	height: 14px;
}

/* --- Descrição da tarefa na tabela --- */
.beto-tasks-table__desc {
	color: var(--hub-text-muted);
	font-size: var(--hub-text-label);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Erro --- */
.beto-tasks-error {
	padding: 12px 16px; color: var(--hub-danger); font-size: var(--hub-text-table);
}

/* ==========================================
   DRAWER DE CRIAÇÃO / EDIÇÃO (padrão Reservas)
   ========================================== */
/* ==========================================
   DRAWER DE CRIAÇÃO / EDIÇÃO (padrão Reservas)
   ========================================== */
.hub-drawer--tasks {
	z-index: 100200 !important;
}
.hub-drawer--tasks .hub-drawer__panel {
	width: clamp(320px, 30vw, 420px);
}
.hub-drawer--tasks .hub-drawer__body {
	align-content: start;
	grid-auto-rows: max-content;
}
.hub-drawer--tasks .hub-form-grid {
	align-content: start;
	grid-auto-rows: max-content;
}
.hub-drawer--tasks .hub-drawer__footer .hub-danger-action {
	margin-right: auto;
}

/* --- Barra de Ações e Filtros de Tarefas --- */
.beto-tasks-actions-bar {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 12px 20px;
	border-bottom: 1px solid var(--hub-border);
	background: var(--hub-surface);
	gap: var(--space-s);
	flex-shrink: 0;
}
.beto-tasks-actions-bar .beto-tasks-add-btn {
	margin: 0 !important;
}
.beto-tasks-filters-row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}
.beto-tasks-filters-row .hub-field {
    width: 180px;
}

/* ==========================================
   SCROLLBAR (paridade com .beto-app)
   ========================================== */
.beto-tasks-sidebar-content::-webkit-scrollbar {
	width: 6px;
}
.beto-tasks-sidebar-content::-webkit-scrollbar-track {
	background: transparent;
}
.beto-tasks-sidebar-content::-webkit-scrollbar-thumb {
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.15);
}
.beto-tasks-sidebar-content::-webkit-scrollbar-thumb:hover {
	background: rgba(203, 123, 55, 0.42);
}