/* Componentes: marca, navegação, botões, badges, cards, KPIs, formulários, tabela, diálogo, toast. */

/* ---------- Marca ---------- */

.aura-brand {
	align-items: center;
	color: var(--aura-gray-900);
	display: inline-flex;
	font-weight: 700;
	gap: var(--aura-space-3);
}

.aura-brand:hover {
	text-decoration: none;
}

.aura-brand--light,
.aura-brand--light:hover {
	color: #fff;
}

.aura-brand__name {
	font-size: var(--aura-text-lg);
	letter-spacing: -0.01em;
}

.aura-logo {
	border-radius: 9px;
	height: 32px;
	width: 32px;
}

.aura-logo--custom {
	border-radius: 0;
	height: auto;
	max-height: 40px;
	width: auto;
}

/* ---------- Navegação ---------- */

.aura-nav__group {
	color: var(--aura-primary-200);
	font-size: var(--aura-text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: var(--aura-space-2);
	padding: 0 var(--aura-space-3);
	text-transform: uppercase;
}

.aura-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aura-nav__link {
	align-items: center;
	border-radius: var(--aura-radius-sm);
	color: var(--aura-primary-100);
	display: flex;
	font-weight: 500;
	gap: var(--aura-space-3);
	padding: 10px var(--aura-space-3);
	transition: background-color 0.15s ease;
}

.aura-nav__link:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	text-decoration: none;
}

.aura-nav__link.is-active {
	background: var(--aura-primary-600);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* ---------- Card de planos e usuário (sidebar) ---------- */

.aura-plan-card {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--aura-radius-md);
	margin-top: auto;
	padding: var(--aura-space-4);
}

.aura-plan-card__title {
	color: #fff;
	font-weight: 600;
	margin-bottom: var(--aura-space-3);
}

.aura-plan-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aura-plan-card__list li {
	display: flex;
	font-size: var(--aura-text-sm);
	justify-content: space-between;
}

.aura-plan-card__list strong {
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.aura-plan-card__list .is-muted {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-top: var(--aura-space-2);
}

.aura-user {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	gap: var(--aura-space-3);
	padding-top: var(--aura-space-4);
}

.aura-plan-card + .aura-user {
	margin-top: 0;
}

.aura-nav + .aura-user {
	margin-top: auto;
}

.aura-user__meta {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.aura-user__meta strong {
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aura-user__meta span {
	font-size: var(--aura-text-xs);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aura-avatar {
	align-items: center;
	background: var(--aura-primary-100);
	border-radius: 50%;
	color: var(--aura-primary-800);
	display: inline-flex;
	flex-shrink: 0;
	font-size: var(--aura-text-sm);
	font-weight: 700;
	height: 36px;
	justify-content: center;
	width: 36px;
}

/* ---------- Botões ---------- */

.aura-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--aura-radius-sm);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--aura-text-base);
	font-weight: 600;
	gap: var(--aura-space-2);
	justify-content: center;
	line-height: 1.2;
	padding: 10px var(--aura-space-4);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.aura-btn:hover {
	text-decoration: none;
}

.aura-btn:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.aura-btn--primary {
	background: var(--aura-primary-600);
	color: #fff;
}

.aura-btn--primary:hover {
	background: var(--aura-primary-700);
	color: #fff;
}

.aura-btn--secondary {
	background: var(--aura-primary-50);
	border-color: var(--aura-primary-200);
	color: var(--aura-primary-800);
}

.aura-btn--secondary:hover {
	background: var(--aura-primary-100);
	color: var(--aura-primary-900);
}

.aura-btn--ghost {
	background: var(--aura-surface);
	border-color: var(--aura-border);
	color: var(--aura-gray-800);
}

.aura-btn--ghost:hover {
	background: var(--aura-gray-50);
	color: var(--aura-gray-900);
}

.aura-btn--danger {
	background: var(--aura-danger);
	color: #fff;
}

.aura-btn--light {
	background: #fff;
	color: var(--aura-primary-800);
}

.aura-btn--light:hover {
	background: var(--aura-primary-50);
	color: var(--aura-primary-900);
}

.aura-btn--sm {
	font-size: var(--aura-text-sm);
	padding: 6px var(--aura-space-3);
}

.aura-btn--sm .aura-icon {
	height: 16px;
	width: 16px;
}

.aura-btn--lg {
	font-size: var(--aura-text-md);
	padding: 12px var(--aura-space-5);
}

.aura-btn--block {
	width: 100%;
}

.aura-icon-btn {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--aura-radius-sm);
	color: var(--aura-gray-700);
	cursor: pointer;
	display: inline-flex;
	height: 36px;
	justify-content: center;
	padding: 0;
	width: 36px;
}

.aura-icon-btn:hover {
	background: var(--aura-gray-100);
	color: var(--aura-gray-900);
}

.aura-icon-btn--light {
	color: var(--aura-primary-100);
}

.aura-icon-btn--light:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.aura-link {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: var(--aura-space-1);
}

.aura-link .aura-icon {
	height: 16px;
	width: 16px;
}

/* ---------- Badges e chips ---------- */

.aura-badge {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: var(--aura-text-xs);
	font-weight: 600;
	gap: var(--aura-space-1);
	padding: 3px 10px;
	white-space: nowrap;
}

.aura-badge--success {
	background: var(--aura-success-bg);
	color: var(--aura-success-text);
}

.aura-badge--info,
.aura-badge--primary {
	background: var(--aura-info-bg);
	color: var(--aura-info-text);
}

.aura-badge--warning {
	background: var(--aura-warning-bg);
	color: var(--aura-warning-text);
}

.aura-badge--danger {
	background: var(--aura-danger-bg);
	color: var(--aura-danger-text);
}

.aura-badge--neutral {
	background: var(--aura-gray-100);
	color: var(--aura-gray-700);
}

.aura-chip {
	align-items: center;
	background: var(--aura-gray-50);
	border: 1px solid var(--aura-border);
	border-radius: 999px;
	display: inline-flex;
	font-size: var(--aura-text-sm);
	font-weight: 600;
	gap: var(--aura-space-2);
	padding: 6px var(--aura-space-3);
}

.aura-chip__muted {
	color: var(--aura-text-muted);
	font-weight: 500;
}

/* ---------- Cards ---------- */

.aura-card {
	background: var(--aura-surface);
	border: 1px solid var(--aura-border);
	border-radius: var(--aura-radius-md);
	box-shadow: var(--aura-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-5);
	padding: var(--aura-space-6);
}

.aura-card--flush {
	gap: 0;
	padding: 0;
}

.aura-card--flush .aura-card__header {
	border-bottom: 1px solid var(--aura-border);
	padding: var(--aura-space-5) var(--aura-space-6);
}

.aura-card__header {
	align-items: flex-start;
	display: flex;
	gap: var(--aura-space-4);
	justify-content: space-between;
}

.aura-card__title {
	font-size: var(--aura-text-lg);
	font-weight: 600;
}

.aura-card__subtitle {
	color: var(--aura-text-muted);
	font-size: var(--aura-text-sm);
	margin-top: 2px;
}

.aura-notice-card {
	align-items: center;
	margin: var(--aura-space-8) auto;
	max-width: 560px;
	text-align: center;
}

.aura-notice-card__icon {
	color: var(--aura-primary-600);
	height: 32px;
	width: 32px;
}

.aura-notice-card p {
	color: var(--aura-text-muted);
}

/* ---------- KPIs ---------- */

.aura-kpis {
	display: grid;
	gap: var(--aura-space-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.aura-kpi {
	background: var(--aura-surface);
	border: 1px solid var(--aura-border);
	border-radius: var(--aura-radius-md);
	box-shadow: var(--aura-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-1);
	padding: var(--aura-space-5);
}

.aura-kpi__icon {
	align-items: center;
	background: var(--aura-primary-50);
	border-radius: var(--aura-radius-sm);
	color: var(--aura-primary-600);
	display: inline-flex;
	height: 40px;
	justify-content: center;
	margin-bottom: var(--aura-space-3);
	width: 40px;
}

.aura-kpi--teal .aura-kpi__icon {
	background: var(--aura-teal-bg);
	color: var(--aura-teal);
}

.aura-kpi--warning .aura-kpi__icon {
	background: var(--aura-warning-bg);
	color: var(--aura-warning);
}

.aura-kpi--violet .aura-kpi__icon {
	background: var(--aura-violet-bg);
	color: var(--aura-violet);
}

.aura-kpi__value {
	color: var(--aura-gray-900);
	font-size: var(--aura-text-3xl);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.aura-kpi__label {
	font-size: var(--aura-text-base);
	font-weight: 600;
}

.aura-kpi__hint {
	color: var(--aura-text-muted);
	font-size: var(--aura-text-xs);
}

/* ---------- Alertas ---------- */

.aura-alert {
	align-items: flex-start;
	border: 1px solid transparent;
	border-radius: var(--aura-radius-sm);
	display: flex;
	font-size: var(--aura-text-sm);
	gap: var(--aura-space-2);
	padding: var(--aura-space-3) var(--aura-space-4);
}

.aura-alert--danger {
	background: var(--aura-danger-bg);
	border-color: #fecaca;
	color: var(--aura-danger-text);
}

.aura-alert--warning {
	background: var(--aura-warning-bg);
	border-color: #fed7aa;
	color: var(--aura-warning-text);
}

.aura-alert--info {
	background: var(--aura-info-bg);
	border-color: var(--aura-primary-100);
	color: var(--aura-info-text);
}

.aura-alert-list {
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.aura-alert-list__item {
	align-items: center;
	border: 1px solid var(--aura-border);
	border-radius: var(--aura-radius-sm);
	display: flex;
	gap: var(--aura-space-3);
	padding: var(--aura-space-3) var(--aura-space-4);
}

.aura-alert-list__icon {
	color: var(--aura-danger);
}

.aura-alert-list__body {
	align-items: center;
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: var(--aura-space-2);
	justify-content: space-between;
}

/* ---------- Formulários ---------- */

.aura-form {
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-4);
}

.aura-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aura-field__label {
	font-weight: 600;
}

.aura-field__hint {
	color: var(--aura-text-muted);
	font-size: var(--aura-text-xs);
}

.aura-input {
	background: var(--aura-surface);
	border: 1px solid var(--aura-gray-300);
	border-radius: var(--aura-radius-sm);
	color: var(--aura-text);
	font-family: inherit;
	font-size: var(--aura-text-base);
	padding: 10px var(--aura-space-3);
	width: 100%;
}

.aura-input:focus {
	border-color: var(--aura-primary-500);
	box-shadow: 0 0 0 3px var(--aura-primary-100);
	outline: none;
}

.aura-check {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: var(--aura-space-2);
}

.aura-check input {
	accent-color: var(--aura-primary-600);
	height: 16px;
	width: 16px;
}

/* ---------- Tabela ---------- */

.aura-table-wrap {
	overflow-x: auto;
}

.aura-table {
	border-collapse: collapse;
	width: 100%;
}

.aura-table th {
	background: var(--aura-gray-50);
	color: var(--aura-text-muted);
	font-size: var(--aura-text-xs);
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: var(--aura-space-3) var(--aura-space-6);
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.aura-table td {
	border-top: 1px solid var(--aura-border);
	padding: var(--aura-space-4) var(--aura-space-6);
	vertical-align: middle;
}

.aura-table tbody tr:hover td {
	background: var(--aura-primary-50);
}

.aura-table__primary {
	display: block;
	font-weight: 600;
}

.aura-table__secondary {
	align-items: center;
	color: var(--aura-text-muted);
	display: inline-flex;
	font-size: var(--aura-text-sm);
	gap: var(--aura-space-1);
}

.aura-table__secondary .aura-icon {
	height: 14px;
	width: 14px;
}

.aura-table__actions {
	text-align: right;
	white-space: nowrap;
}

.aura-table__actions .aura-btn + .aura-btn {
	margin-left: var(--aura-space-2);
}

/* Abaixo de 640 px, as linhas viram cards. */
@media (max-width: 639px) {

	.aura-table--responsive thead {
		display: none;
	}

	.aura-table--responsive tr {
		border-top: 1px solid var(--aura-border);
		display: block;
		padding: var(--aura-space-3) var(--aura-space-4);
	}

	.aura-table--responsive td {
		border: 0;
		display: flex;
		gap: var(--aura-space-3);
		justify-content: space-between;
		padding: var(--aura-space-2) 0;
		text-align: right;
	}

	.aura-table--responsive td::before {
		color: var(--aura-text-muted);
		content: attr(data-label);
		font-size: var(--aura-text-xs);
		font-weight: 600;
		text-align: left;
		text-transform: uppercase;
	}

	.aura-table--responsive td:first-child {
		display: block;
		text-align: left;
	}

	.aura-table--responsive td:first-child::before,
	.aura-table--responsive .aura-table__actions::before {
		content: none;
	}

	.aura-table--responsive .aura-table__actions {
		justify-content: flex-start;
		white-space: normal;
	}
}

.aura-pagination {
	border-top: 1px solid var(--aura-border);
	display: flex;
	gap: var(--aura-space-2);
	justify-content: flex-end;
	padding: var(--aura-space-4) var(--aura-space-6);
}

.aura-pagination .page-numbers {
	border: 1px solid var(--aura-border);
	border-radius: var(--aura-radius-sm);
	color: var(--aura-gray-700);
	padding: 6px 12px;
}

.aura-pagination .page-numbers.current {
	background: var(--aura-primary-600);
	border-color: var(--aura-primary-600);
	color: #fff;
}

/* ---------- Estado vazio ---------- */

.aura-empty {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-2);
	padding: var(--aura-space-8) var(--aura-space-6);
	text-align: center;
}

.aura-empty__icon {
	align-items: center;
	background: var(--aura-primary-50);
	border-radius: 50%;
	color: var(--aura-primary-600);
	display: inline-flex;
	height: 48px;
	justify-content: center;
	margin-bottom: var(--aura-space-2);
	width: 48px;
}

.aura-empty__title {
	font-size: var(--aura-text-md);
	font-weight: 600;
}

.aura-empty__text {
	color: var(--aura-text-muted);
	margin-bottom: var(--aura-space-3);
	max-width: 420px;
}

/* ---------- Diálogo ---------- */

.aura-dialog {
	background: transparent;
	border: 0;
	max-width: 560px;
	padding: 0;
	width: calc(100% - 32px);
}

.aura-dialog::backdrop {
	background: rgba(15, 23, 42, 0.5);
}

.aura-dialog__panel {
	background: var(--aura-surface);
	border-radius: var(--aura-radius-lg);
	box-shadow: var(--aura-shadow-lg);
	display: flex;
	flex-direction: column;
}

.aura-dialog__header {
	align-items: flex-start;
	border-bottom: 1px solid var(--aura-border);
	display: flex;
	gap: var(--aura-space-4);
	justify-content: space-between;
	padding: var(--aura-space-5) var(--aura-space-6);
}

.aura-dialog__title {
	font-size: var(--aura-text-lg);
	font-weight: 700;
}

.aura-dialog__subtitle {
	color: var(--aura-text-muted);
	font-size: var(--aura-text-sm);
}

.aura-dialog__body {
	display: flex;
	flex-direction: column;
	gap: var(--aura-space-4);
	padding: var(--aura-space-6);
}

.aura-dialog__footer {
	border-top: 1px solid var(--aura-border);
	display: flex;
	gap: var(--aura-space-3);
	justify-content: flex-end;
	padding: var(--aura-space-4) var(--aura-space-6);
}

/* ---------- Toast ---------- */

.aura-toast {
	background: var(--aura-gray-900);
	border-radius: var(--aura-radius-sm);
	box-shadow: var(--aura-shadow-lg);
	color: #fff;
	font-weight: 500;
	max-width: 360px;
	padding: var(--aura-space-3) var(--aura-space-4);
}

.aura-toast--success {
	background: var(--aura-success-text);
}

.aura-toast--danger {
	background: var(--aura-danger-text);
}

/* ---------- Grids ---------- */

.aura-grid {
	display: grid;
	gap: var(--aura-space-5);
}

.aura-grid--main-side {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

@media (max-width: 1199px) {

	.aura-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aura-grid--main-side {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 559px) {

	.aura-kpis {
		grid-template-columns: minmax(0, 1fr);
	}
}

.aura-badge--violet {
	background: var(--aura-violet-bg);
	color: var(--aura-violet);
}

button.aura-chip {
	color: var(--aura-text);
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}

button.aura-chip:hover,
button.aura-chip:focus-visible {
	border-color: var(--aura-primary-300);
}

.aura-details {
	margin: var(--aura-space-3) 0 0;
}

.aura-details summary {
	cursor: pointer;
	font-size: var(--aura-text-sm);
	font-weight: 600;
}

.aura-details p {
	color: var(--aura-text-muted);
	font-size: var(--aura-text-sm);
}

.aura-card__pad {
	padding: var(--aura-space-4) var(--aura-space-5);
}