/* ==========================================================================
   Lady Semijoias — Dashboard & Charts
   Mobile-first. Para dashboards de Administrador, Consultora e Supervisora.
   ========================================================================== */

/* ----- Dashboard Header ----- */
.lady-dash__header {
	display: flex;
	flex-direction: column;
	gap: var(--lady-space-3);
	align-items: flex-start;
	margin-bottom: var(--lady-space-5);
}
@media (min-width: 768px) {
	.lady-dash__header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}
.lady-dash__title {
	font-family: var(--lady-font-display, var(--lady-font-body));
	font-size: 1.5rem;
	font-weight: var(--lady-fw-semibold);
	color: var(--lady-text);
	margin: 0;
	line-height: 1.2;
}
.lady-dash__subtitle {
	font-size: var(--lady-fs-sm);
	color: var(--lady-text-muted);
	margin: 4px 0 0 0;
}
.lady-dash__period {
	display: inline-flex;
	gap: var(--lady-space-2);
	align-items: center;
	background: var(--lady-surface);
	border: 1px solid var(--lady-border);
	padding: var(--lady-space-2) var(--lady-space-3);
	border-radius: var(--lady-radius-md);
	font-size: var(--lady-fs-sm);
}
.lady-dash__period label { margin: 0; color: var(--lady-text-muted); font-weight: var(--lady-fw-medium); }
.lady-dash__period input[type="month"] {
	border: 1px solid var(--lady-border);
	border-radius: var(--lady-radius-sm);
	padding: 6px 10px;
	font-size: var(--lady-fs-sm);
	background: #fff;
	color: var(--lady-text);
	min-height: 36px;
}
.lady-dash__period button {
	background: var(--lady-gold-500, #C8A957);
	color: #fff;
	border: 0;
	padding: 6px 12px;
	border-radius: var(--lady-radius-sm);
	cursor: pointer;
	font-size: var(--lady-fs-sm);
	font-weight: var(--lady-fw-medium);
	min-height: 36px;
}
.lady-dash__period button:hover { background: var(--lady-gold-600, #b89844); }

/* ----- Quick Access Bar ----- */
.lady-dash__quick {
	background: var(--lady-surface, #fff);
	border: 1px solid var(--lady-border, #e8e2d4);
	border-top: 3px solid var(--lady-gold-500, #C8A957);
	border-radius: var(--lady-radius-lg);
	padding: var(--lady-space-4);
	margin-bottom: var(--lady-space-5);
	color: var(--lady-text, #2A3F54);
}
.lady-dash__quick-title {
	font-size: var(--lady-fs-md);
	font-weight: var(--lady-fw-semibold);
	margin: 0 0 var(--lady-space-3) 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--lady-gold-600, #b89844);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
}
.lady-dash__quick-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lady-space-3);
}
@media (min-width: 768px) {
	.lady-dash__quick-grid { grid-template-columns: repeat(4, 1fr); }
}
.lady-dash__quick-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--lady-ivory-100, #FAF6EE);
	color: var(--lady-text);
	padding: var(--lady-space-3);
	border-radius: var(--lady-radius-md);
	border: 1px solid var(--lady-border, #e8e2d4);
	text-decoration: none;
	transition: transform var(--lady-transition-fast), box-shadow var(--lady-transition-fast), border-color var(--lady-transition-fast), background var(--lady-transition-fast);
	min-height: 110px;
	justify-content: center;
	text-align: center;
}
.lady-dash__quick-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(200, 169, 87, 0.18);
	border-color: var(--lady-gold-500, #C8A957);
	background: #fff;
	text-decoration: none;
	color: var(--lady-text);
}
.lady-dash__quick-item__icon {
	font-size: 28px;
	line-height: 1;
	color: var(--lady-gold-600, #b89844) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(200, 169, 87, 0.10);
	margin-bottom: 4px;
}
.lady-dash__quick-item__icon svg {
	width: 28px;
	height: 28px;
	stroke-width: 2;
}
.lady-dash__quick-item__label {
	font-size: var(--lady-fs-sm);
	font-weight: var(--lady-fw-semibold);
	line-height: 1.2;
}
.lady-dash__quick-item__meta {
	font-size: 0.65rem;
	color: var(--lady-text-muted);
	margin-top: 2px;
}

/* ----- Indicators Grid ----- */
.lady-dash__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lady-space-3);
	margin-bottom: var(--lady-space-5);
}
@media (min-width: 480px) {
	.lady-dash__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.lady-dash__grid--3 { grid-template-columns: repeat(3, 1fr); }
	.lady-dash__grid--4 { grid-template-columns: repeat(4, 1fr); }
	.lady-dash__grid--5 { grid-template-columns: repeat(2, 1fr); }
	.lady-dash__grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.lady-dash__grid--3 { grid-template-columns: repeat(3, 1fr); }
	.lady-dash__grid--4 { grid-template-columns: repeat(4, 1fr); }
	.lady-dash__grid--5 { grid-template-columns: repeat(5, 1fr); }
	.lady-dash__grid--6 { grid-template-columns: repeat(6, 1fr); }
}

/* ----- KPI Card ----- */
.lady-kpi {
	background: var(--lady-surface);
	border: 1px solid var(--lady-border);
	border-radius: var(--lady-radius-md);
	padding: var(--lady-space-4) var(--lady-space-3);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--lady-space-1, 4px);
	transition: box-shadow var(--lady-transition-fast), transform var(--lady-transition-fast), border-color var(--lady-transition-fast);
	min-height: 130px;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.lady-kpi::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent 0%, var(--lady-kpi-accent, var(--lady-gold-500, #C8A957)) 30%, var(--lady-kpi-accent, var(--lady-gold-500, #C8A957)) 70%, transparent 100%);
	opacity: 0.6;
}
.lady-kpi:hover {
	box-shadow: var(--lady-shadow-sm);
	transform: translateY(-2px);
	border-color: var(--lady-border-strong);
}
.lady-kpi__icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var(--lady-kpi-bg, rgba(200, 169, 87, 0.08));
	color: var(--lady-kpi-accent, var(--lady-gold-500, #C8A957));
	margin-bottom: 4px;
}
.lady-kpi__icon svg, .lady-kpi__icon .fa {
	width: 22px !important;
	height: 22px !important;
	min-width: 22px;
	min-height: 22px;
	font-size: 22px;
	line-height: 22px;
	display: block;
}
.lady-dash__quick-item__icon .fa,
.lady-dash__quick-item__icon svg {
	font-size: 28px;
	line-height: 1;
}
.lady-kpi__label {
	font-size: 0.72rem;
	color: var(--lady-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: var(--lady-fw-semibold);
	margin: 0;
	line-height: 1.2;
}
.lady-kpi__value {
	font-size: 1.25rem;
	font-weight: var(--lady-fw-bold, 700);
	color: var(--lady-text);
	line-height: 1.1;
	word-break: break-word;
}
@media (min-width: 768px) {
	.lady-kpi__value { font-size: 1.4rem; }
}
.lady-kpi__value--sm { font-size: 1rem; }
.lady-kpi__value .loading {
	color: var(--lady-text-muted);
	font-size: 1rem;
}

/* Paleta Lady — 4 acentos semânticos sutis em harmonia com dourado */
/* Default (sem modifier): dourado boutique */
/* Os legados (info/purple/teal/dark/orange) mapeiam para o tom dourado neutro */
.lady-kpi--success { --lady-kpi-accent: #6B8E5A; --lady-kpi-bg: rgba(107, 142, 90, 0.08); }
.lady-kpi--warning { --lady-kpi-accent: #B8860B; --lady-kpi-bg: rgba(184, 134, 11, 0.08); }
.lady-kpi--danger  { --lady-kpi-accent: #8B2331; --lady-kpi-bg: rgba(139, 35, 49, 0.08); }
.lady-kpi--info,
.lady-kpi--purple,
.lady-kpi--teal,
.lady-kpi--dark,
.lady-kpi--orange { --lady-kpi-accent: #C8A957; --lady-kpi-bg: rgba(200, 169, 87, 0.08); }

/* ----- Chart Panel ----- */
.lady-chart-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lady-space-4);
	margin-bottom: var(--lady-space-5);
}
@media (min-width: 1024px) {
	.lady-chart-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.lady-chart {
	background: var(--lady-surface);
	border: 1px solid var(--lady-border);
	border-radius: var(--lady-radius-md);
	padding: var(--lady-space-4);
	overflow: hidden;
}
.lady-chart__title {
	font-size: var(--lady-fs-md);
	font-weight: var(--lady-fw-semibold);
	color: var(--lady-text);
	margin: 0 0 var(--lady-space-3) 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.lady-chart__title .lady-icon {
	width: 18px; height: 18px;
	color: var(--lady-gold-500, #C8A957);
}
.lady-chart__body {
	position: relative;
	width: 100%;
	height: clamp(300px, 38vw, 360px);
}
@media (max-width: 767px) {
	/* Mobile precisa de altura confortável para gráficos com legenda dupla */
	.lady-chart__body { height: 320px; }
}
.lady-chart__body canvas {
	max-width: 100%;
	height: 100% !important;
}
.lady-chart__body--with-legend {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lady-space-3);
	height: auto;
}
@media (min-width: 768px) {
	.lady-chart__body--with-legend {
		grid-template-columns: 1fr 220px;
		height: clamp(280px, 38vw, 360px);
	}
}
.lady-chart__legend {
	overflow-y: auto;
	max-height: 360px;
	font-size: var(--lady-fs-xs);
}
.lady-chart__legend table { width: 100%; border-collapse: collapse; }
.lady-chart__legend th {
	font-weight: var(--lady-fw-semibold);
	color: var(--lady-text-muted);
	background: var(--lady-ivory-100, #faf6ee);
	padding: 6px 8px;
	text-align: left;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.lady-chart__legend td {
	padding: 6px 8px;
	border-top: 1px solid var(--lady-border);
	vertical-align: middle;
}
.lady-chart__legend .legend-color-box {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 6px;
	vertical-align: middle;
}

/* ----- Empty state (chart without data) ----- */
.lady-chart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--lady-space-2);
	padding: var(--lady-space-4);
	color: var(--lady-text-muted);
}
.lady-chart__empty-icon {
	width: 40px;
	height: 40px;
	color: var(--lady-gold, #C8A957);
	opacity: 0.7;
}
.lady-chart__empty-title {
	margin: 0;
	font-weight: var(--lady-fw-semibold);
	color: var(--lady-text);
	font-size: var(--lady-fs-sm);
}
.lady-chart__empty-hint {
	margin: 0;
	font-size: var(--lady-fs-xs);
	max-width: 320px;
	line-height: 1.4;
}

/* ----- Ranking Table inside chart panel ----- */
.lady-rank {
	overflow-y: auto;
}
.lady-rank table { width: 100%; border-collapse: collapse; font-size: var(--lady-fs-sm); }
.lady-rank th {
	position: sticky;
	top: 0;
	background: var(--lady-ivory-100, #faf6ee);
	color: var(--lady-text-muted);
	font-weight: var(--lady-fw-semibold);
	padding: 6px 10px;
	text-align: left;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--lady-border);
}
.lady-rank td {
	padding: 5px 10px;
	border-top: 1px solid var(--lady-border);
	vertical-align: middle;
	line-height: 1.3;
}
.lady-rank tr:nth-child(even) { background: var(--lady-ivory-100, #faf6ee); }
.lady-rank__pos {
	display: inline-flex;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lady-gold-500, #C8A957);
	color: #fff;
	font-weight: var(--lady-fw-semibold);
	font-size: 0.7rem;
	align-items: center;
	justify-content: center;
}
.lady-rank__pos--1 { background: #FFD700; color: #5a4a00; }
.lady-rank__pos--2 { background: #C0C0C0; color: #3a3a3a; }
.lady-rank__pos--3 { background: #CD7F32; color: #fff; }

/* ----- Standalone Auth Page (login, selecionar empresa) ----- */
.lady-auth {
	min-height: 100vh;
	background: linear-gradient(135deg, var(--lady-ivory-100, #FAF6EE) 0%, var(--lady-ivory-200, #f3ecdc) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--lady-space-4);
	position: relative;
	overflow-x: hidden;
}
.lady-auth::before, .lady-auth::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 169, 87, 0.18) 0%, rgba(200, 169, 87, 0) 70%);
	pointer-events: none;
}
.lady-auth::before {
	width: 480px; height: 480px;
	top: -160px; right: -160px;
}
.lady-auth::after {
	width: 380px; height: 380px;
	bottom: -120px; left: -120px;
}
.lady-auth__card {
	width: 100%;
	max-width: 420px;
	background: var(--lady-surface);
	border-radius: var(--lady-radius-lg);
	box-shadow: 0 16px 48px rgba(0,0,0,0.12);
	padding: var(--lady-space-6, 32px);
	position: relative;
	z-index: 1;
}
.lady-auth__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lady-space-2);
	margin-bottom: var(--lady-space-5);
	text-align: center;
}
.lady-auth__brand-mark {
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.lady-auth__brand-name {
	font-family: var(--lady-font-display, var(--lady-font-body));
	font-size: 2rem;
	font-weight: var(--lady-fw-semibold);
	color: var(--lady-gold-600, #b89844);
	letter-spacing: 0.16em;
	line-height: 1;
}
.lady-auth__brand-sub {
	font-size: var(--lady-fs-xs);
	color: var(--lady-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.lady-auth__title {
	font-size: 1.25rem;
	font-weight: var(--lady-fw-semibold);
	color: var(--lady-text);
	margin: 0 0 var(--lady-space-4) 0;
	text-align: center;
}
.lady-auth__field {
	margin-bottom: var(--lady-space-3);
}
.lady-auth__field label {
	display: block;
	font-size: var(--lady-fs-xs);
	color: var(--lady-text-muted);
	font-weight: var(--lady-fw-semibold);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.lady-auth__input-wrap {
	position: relative;
}
.lady-auth__input-wrap .lady-auth__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--lady-text-muted);
	pointer-events: none;
}
.lady-auth__input-wrap .lady-auth__icon svg { width: 18px; height: 18px; }
.lady-auth__input {
	width: 100%;
	padding: 12px 14px 12px 44px;
	border: 1px solid var(--lady-border);
	border-radius: var(--lady-radius-md);
	background: #fff;
	font-size: var(--lady-fs-sm);
	color: var(--lady-text);
	min-height: 48px;
	transition: border-color var(--lady-transition-fast), box-shadow var(--lady-transition-fast);
	font-family: inherit;
}
.lady-auth__input:focus {
	outline: 0;
	border-color: var(--lady-gold-500, #C8A957);
	box-shadow: 0 0 0 3px rgba(200, 169, 87, 0.18);
}
/* Modifier: reserva espaço à direita para botão de ação (ex: mostrar/ocultar senha) */
.lady-auth__input--with-action { padding-right: 44px; }
.lady-auth__toggle-pwd {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: var(--lady-radius-sm);
	color: var(--lady-text-muted);
	cursor: pointer;
	transition: color var(--lady-transition-fast), background var(--lady-transition-fast);
	padding: 0;
}
.lady-auth__toggle-pwd:hover,
.lady-auth__toggle-pwd:focus-visible {
	color: var(--lady-gold-500, #C8A957);
	background: var(--lady-ivory-200, #f5ecd9);
	outline: 0;
}
.lady-auth__toggle-pwd .lady-auth__toggle-pwd__icon { width: 18px; height: 18px; }
.lady-auth__select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--lady-border);
	border-radius: var(--lady-radius-md);
	background: #fff;
	font-size: var(--lady-fs-sm);
	color: var(--lady-text);
	min-height: 48px;
	font-family: inherit;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}
.lady-auth__select:focus {
	outline: 0;
	border-color: var(--lady-gold-500, #C8A957);
	box-shadow: 0 0 0 3px rgba(200, 169, 87, 0.18);
}
.lady-auth__remember {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: var(--lady-space-3) 0;
	font-size: var(--lady-fs-sm);
	color: var(--lady-text);
	cursor: pointer;
}
.lady-auth__remember input { width: 16px; height: 16px; cursor: pointer; }
.lady-auth__submit {
	width: 100%;
	min-height: 48px;
	background: var(--lady-gold-500, #C8A957);
	color: #fff;
	border: 0;
	border-radius: var(--lady-radius-md);
	font-size: var(--lady-fs-md);
	font-weight: var(--lady-fw-semibold);
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--lady-transition-fast), transform var(--lady-transition-fast);
	margin-top: var(--lady-space-2);
}
.lady-auth__submit:hover { background: var(--lady-gold-600, #b89844); }
.lady-auth__submit:active { transform: translateY(1px); }
.lady-auth__secondary {
	width: 100%;
	min-height: 44px;
	background: transparent;
	color: var(--lady-text-muted);
	border: 1px solid var(--lady-border);
	border-radius: var(--lady-radius-md);
	font-size: var(--lady-fs-sm);
	font-weight: var(--lady-fw-medium);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--lady-space-2);
	transition: background var(--lady-transition-fast);
}
.lady-auth__secondary:hover { background: var(--lady-ivory-200); text-decoration: none; color: var(--lady-text); }
.lady-auth__link {
	display: block;
	text-align: center;
	margin-top: var(--lady-space-3);
	font-size: var(--lady-fs-sm);
	color: var(--lady-gold-600, #b89844);
	text-decoration: none;
	font-weight: var(--lady-fw-medium);
}
.lady-auth__link:hover { text-decoration: underline; color: var(--lady-gold-700, #a07d2c); }
.lady-auth__footer {
	margin-top: var(--lady-space-5);
	padding-top: var(--lady-space-4);
	border-top: 1px solid var(--lady-border);
	text-align: center;
	font-size: 0.72rem;
	color: var(--lady-text-muted);
}
.lady-auth__alert {
	padding: 12px 14px;
	border-radius: var(--lady-radius-md);
	font-size: var(--lady-fs-sm);
	margin-bottom: var(--lady-space-3);
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.4;
}
.lady-auth__alert--error { background: rgba(231, 76, 60, 0.08); color: #c0392b; border: 1px solid rgba(231, 76, 60, 0.25); }
.lady-auth__alert--warning { background: rgba(243, 156, 18, 0.08); color: #b67309; border: 1px solid rgba(243, 156, 18, 0.25); }
.lady-auth__alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }