/* =========================================================================
   BeeMenu — Design System do Painel Administrativo
   -------------------------------------------------------------------------
   Identidade própria do BeeMenu (verde + branco + cinzas), inspirado em
   UX/UI de dashboards SaaS modernos (sidebar colapsável, cards com dados,
   tabelas com ações em dropdown, toasts, skeletons etc.) - sem reaproveitar
   código/componentes de nenhum template de terceiros.
   ========================================================================= */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
	/* Marca BeeMenu */
	--bee-50:  #EAF7F1;
	--bee-100: #D2F0E2;
	--bee-200: #A6E1C6;
	--bee-300: #6FCBA6;
	--bee-400: #3AAF83;
	--bee-500: #0E9166;   /* verde principal (ações, links, foco) */
	--bee-600: #03764D;   /* verde BeeMenu "de marca" (usado no logo/topbar) */
	--bee-700: #045E3E;
	--bee-800: #094B33;
	--bee-900: #0A3D2B;

	/* Neutros (cinzas) */
	--gray-0:   #FFFFFF;
	--gray-25:  #FAFBFA;
	--gray-50:  #F5F7F6;
	--gray-100: #EEF1F0;
	--gray-200: #E3E8E6;
	--gray-300: #D2D9D6;
	--gray-400: #A9B3AF;
	--gray-500: #808C87;
	--gray-600: #5E6864;
	--gray-700: #454E4B;
	--gray-800: #2D3432;
	--gray-900: #1B211F;

	/* Semânticas */
	--color-success:      #0E9166;
	--color-success-bg:   #E7F5EF;
	--color-warning:      #B7791F;
	--color-warning-bg:   #FEF3E1;
	--color-danger:       #D64545;
	--color-danger-bg:    #FCEBEB;
	--color-info:         #2563EB;
	--color-info-bg:      #E7F0FD;
	--color-violet:       #6D28D9;
	--color-violet-bg:    #EDE7FD;

	/* Superfícies */
	--surface: #FFFFFF;
	--surface-canvas: #F4F6F5;
	--border-color: var(--gray-200);

	/* Tipografia */
	--font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fs-xs:   .75rem;    /* 12px */
	--fs-sm:   .8125rem;  /* 13px */
	--fs-base: .875rem;   /* 14px */
	--fs-md:   .9375rem;  /* 15px */
	--fs-lg:   1.0625rem; /* 17px */
	--fs-xl:   1.25rem;   /* 20px */
	--fs-2xl:  1.5rem;    /* 24px */
	--fs-3xl:  1.875rem;  /* 30px */

	/* Espaçamento (escala 4px) */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

	/* Bordas / raios */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 20px;
	--radius-full: 999px;

	/* Sombras (bem suaves, "flat SaaS") */
	--shadow-xs: 0 1px 2px rgba(16, 24, 21, .04);
	--shadow-sm: 0 1px 3px rgba(16, 24, 21, .06), 0 1px 2px rgba(16, 24, 21, .04);
	--shadow-md: 0 4px 12px rgba(16, 24, 21, .07);
	--shadow-lg: 0 12px 32px rgba(16, 24, 21, .10);
	--shadow-focus: 0 0 0 3px rgba(14, 145, 102, .18);

	/* Transições */
	--ease: cubic-bezier(.4, 0, .2, 1);
	--t-fast: .15s;
	--t-base: .2s;
	--t-slow: .35s;

	/* Layout */
	--sidebar-w: 264px;
	--sidebar-w-collapsed: 76px;
	--topbar-h: 68px;

	/* Compat com nomes antigos usados em páginas ainda não migradas */
	--admin-primary: var(--bee-600);
	--admin-primary-light: var(--bee-50);
	--admin-dark: var(--gray-900);
	--admin-bg: var(--surface-canvas);
	--admin-border: var(--border-color);
	--admin-danger: var(--color-danger);
	--admin-warning: var(--color-warning);
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
body.admin-body {
	background: var(--surface-canvas);
	font-family: var(--font-sans);
	color: var(--gray-800);
	font-size: var(--fs-base);
	-webkit-font-smoothing: antialiased;
}

.admin-body h1, .admin-body h2, .admin-body h3,
.admin-body h4, .admin-body h5, .admin-body h6 {
	color: var(--gray-900);
	font-weight: 600;
	letter-spacing: -.01em;
}

.admin-body a { color: var(--bee-600); text-decoration: none; }
.admin-body ::selection { background: var(--bee-200); }

.admin-body *:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Scrollbar discreta */
.admin-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.admin-body ::-webkit-scrollbar-track { background: transparent; }
.admin-body ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
.admin-body ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Animações utilitárias (sem exageros) */
@keyframes bee-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bee-slide-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bee-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bee-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
@keyframes bee-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.bee-fade-in { animation: bee-fade-in var(--t-slow) var(--ease) both; }
.bee-slide-up { animation: bee-slide-up var(--t-slow) var(--ease) both; }
.bee-stagger > * { animation: bee-slide-up var(--t-slow) var(--ease) both; }
.bee-stagger > *:nth-child(1) { animation-delay: .02s; }
.bee-stagger > *:nth-child(2) { animation-delay: .06s; }
.bee-stagger > *:nth-child(3) { animation-delay: .10s; }
.bee-stagger > *:nth-child(4) { animation-delay: .14s; }
.bee-stagger > *:nth-child(5) { animation-delay: .18s; }
.bee-stagger > *:nth-child(6) { animation-delay: .22s; }

/* ---------------------------------------------------------------------
   3. LAYOUT (wrapper / sidebar / topbar / content)
   --------------------------------------------------------------------- */
.admin-wrapper { display: flex; min-height: 100vh; }

/* --- Sidebar --- */
.admin-sidebar {
	width: var(--sidebar-w);
	background: var(--surface);
	border-right: 1px solid var(--border-color);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left: 0; bottom: 0;
	z-index: 1040;
	transition: width var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.admin-sidebar .brand {
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0 var(--sp-5);
	border-bottom: 1px solid var(--border-color);
	flex-shrink: 0;
}
.admin-sidebar .brand-logo {
	width: 36px; height: 36px; border-radius: var(--radius-md);
	background: var(--bee-50);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden; flex-shrink: 0;
}
.admin-sidebar .brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.admin-sidebar .brand-name { font-weight: 700; font-size: var(--fs-lg); color: var(--gray-900); white-space: nowrap; }
.admin-sidebar .brand-tag { font-size: 10px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .06em; margin-top: -2px; }

/* Bloco de loja (nome + status) dentro da sidebar */
.admin-sidebar .store-block {
	margin: var(--sp-4) var(--sp-4) var(--sp-2);
	padding: var(--sp-3);
	border-radius: var(--radius-md);
	background: var(--gray-50);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	overflow: hidden;
}
.admin-sidebar .store-block .store-avatar {
	width: 34px; height: 34px; border-radius: var(--radius-sm);
	background: var(--bee-100); color: var(--bee-700);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: var(--fs-sm); flex-shrink: 0;
	overflow: hidden;
}
.admin-sidebar .store-block .store-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-sidebar .store-block .store-name {
	font-size: var(--fs-sm); font-weight: 600; color: var(--gray-900);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-sidebar .store-status {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 600; color: var(--color-success);
}
.admin-sidebar .store-status::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: var(--color-success); animation: bee-pulse-dot 2s ease-in-out infinite;
}
.admin-sidebar .store-status.fechada { color: var(--color-danger); }
.admin-sidebar .store-status.fechada::before { background: var(--color-danger); }

.admin-sidebar nav.nav { flex: 1; overflow-y: auto; overflow-x: hidden; flex-wrap: nowrap; padding: var(--sp-2) var(--sp-3) var(--sp-4); }

.admin-sidebar .nav-section-title {
	padding: var(--sp-4) var(--sp-3) var(--sp-1);
	font-size: 10.5px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .07em;
	color: var(--gray-400);
	white-space: nowrap;
}

.admin-sidebar .nav-link {
	position: relative;
	color: var(--gray-600);
	padding: 9px var(--sp-3);
	margin: 1px 0;
	border-radius: var(--radius-sm);
	display: flex; align-items: center; gap: var(--sp-3);
	font-size: var(--fs-base); font-weight: 500;
	white-space: nowrap;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.admin-sidebar .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2px; }
.admin-sidebar .nav-link .nav-label { transition: opacity var(--t-fast) var(--ease); }
.admin-sidebar .nav-link:hover { background: var(--gray-50); color: var(--gray-900); }
.admin-sidebar .nav-link.active {
	background: var(--bee-50);
	color: var(--bee-700);
	font-weight: 600;
}
.admin-sidebar .nav-link.active svg { stroke: var(--bee-600); }
.admin-sidebar .nav-link.active::before {
	content: '';
	position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
	width: 3px; height: 18px; border-radius: var(--radius-full);
	background: var(--bee-600);
}
.admin-sidebar .nav-link .nav-badge {
	margin-left: auto;
	font-size: 10.5px; font-weight: 700;
	background: var(--bee-100); color: var(--bee-700);
	padding: 1px 7px; border-radius: var(--radius-full);
}

.admin-sidebar .sidebar-footer {
	padding: var(--sp-3);
	border-top: 1px solid var(--border-color);
}
.admin-sidebar .nav-link.logout-link:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.admin-sidebar .nav-link.logout-link:hover svg { stroke: var(--color-danger); }

/* Botão de colapsar (desktop) */
.sidebar-collapse-btn {
	width: 26px; height: 26px; border-radius: 50%;
	border: 1px solid var(--border-color); background: var(--surface);
	display: flex; align-items: center; justify-content: center;
	color: var(--gray-500);
	position: absolute; top: 21px; right: -13px;
	box-shadow: var(--shadow-sm);
	transition: transform var(--t-base) var(--ease), color var(--t-fast);
	cursor: pointer;
}
.sidebar-collapse-btn:hover { color: var(--bee-600); }
.sidebar-collapse-btn svg { width: 14px; height: 14px; }

/* Estado colapsado (desktop) */
@media (min-width: 992px) {
	.admin-sidebar.collapsed { width: var(--sidebar-w-collapsed); }
	.admin-sidebar.collapsed .brand-name,
	.admin-sidebar.collapsed .brand-tag,
	.admin-sidebar.collapsed .store-name,
	.admin-sidebar.collapsed .store-status,
	.admin-sidebar.collapsed .nav-label,
	.admin-sidebar.collapsed .nav-badge,
	.admin-sidebar.collapsed .nav-section-title { display: none; }
	.admin-sidebar.collapsed .store-block { justify-content: center; padding: var(--sp-3) 0; background: transparent; }
	.admin-sidebar.collapsed .nav-link { justify-content: center; }
	.admin-sidebar.collapsed .sidebar-collapse-btn svg { transform: rotate(180deg); }
	.admin-main.sidebar-collapsed { margin-left: var(--sidebar-w-collapsed); }
	.admin-topbar.sidebar-collapsed { left: var(--sidebar-w-collapsed); }
}

/* --- Topbar / Header --- */
.admin-main { margin-left: var(--sidebar-w); flex: 1; min-width: 0; transition: margin-left var(--t-base) var(--ease); }

.admin-topbar {
	height: var(--topbar-h);
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-color);
	padding: 0 var(--sp-6);
	display: flex; align-items: center; gap: var(--sp-4);
	position: sticky; top: 0; z-index: 1020;
}

.topbar-search {
	position: relative;
	flex: 1; max-width: 380px;
}
.topbar-search svg {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; color: var(--gray-400); pointer-events: none;
}
.topbar-search input {
	width: 100%;
	border: 1px solid var(--border-color);
	background: var(--gray-50);
	border-radius: var(--radius-md);
	padding: 9px 12px 9px 38px;
	font-size: var(--fs-sm);
	transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.topbar-search input:focus {
	outline: none; background: var(--surface);
	border-color: var(--bee-400); box-shadow: var(--shadow-focus);
}
.topbar-search kbd {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	font-size: 10.5px; color: var(--gray-400);
	border: 1px solid var(--gray-200); border-radius: 5px; padding: 1px 6px;
	background: var(--surface);
}

.topbar-btn {
	width: 38px; height: 38px; border-radius: var(--radius-md);
	border: 1px solid transparent; background: transparent;
	display: flex; align-items: center; justify-content: center;
	color: var(--gray-600); position: relative;
	transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.topbar-btn:hover { background: var(--gray-50); border-color: var(--border-color); color: var(--gray-900); }
.topbar-btn svg { width: 19px; height: 19px; stroke-width: 2px; }
.topbar-btn .notif-dot {
	position: absolute; top: 8px; right: 8px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--color-danger); border: 2px solid var(--surface);
}

.topbar-divider { width: 1px; height: 26px; background: var(--border-color); }

.topbar-store-status {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--fs-xs); font-weight: 600;
	padding: 6px 12px; border-radius: var(--radius-full);
	background: var(--color-success-bg); color: var(--color-success);
	white-space: nowrap;
}
.topbar-store-status::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
	animation: bee-pulse-dot 2s ease-in-out infinite;
}
.topbar-store-status.fechada { background: var(--color-danger-bg); color: var(--color-danger); }

.topbar-plan-badge {
	font-size: var(--fs-xs); font-weight: 600;
	padding: 6px 12px; border-radius: var(--radius-full);
	background: var(--bee-50); color: var(--bee-700);
	white-space: nowrap;
}

.topbar-user {
	display: flex; align-items: center; gap: var(--sp-2);
	padding: 6px 8px 6px 6px; border-radius: var(--radius-md);
	cursor: pointer; transition: background var(--t-fast);
}
.topbar-user:hover { background: var(--gray-50); }
.topbar-user .avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--bee-600); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; font-size: var(--fs-sm); flex-shrink: 0;
}
.topbar-user .user-info { line-height: 1.25; }
.topbar-user .user-name { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-900); }
.topbar-user .user-role { font-size: 11px; color: var(--gray-500); }
.topbar-user svg.chevron { width: 15px; height: 15px; color: var(--gray-400); }

.sidebar-mobile-toggle {
	width: 38px; height: 38px; border-radius: var(--radius-md);
	border: 1px solid var(--border-color); background: var(--surface);
	display: flex; align-items: center; justify-content: center; color: var(--gray-700);
}
.sidebar-mobile-toggle svg { width: 19px; height: 19px; }

.admin-content { padding: var(--sp-6); max-width: 1440px; }

/* Overlay do drawer mobile */
.sidebar-overlay {
	position: fixed; inset: 0; background: rgba(20, 26, 24, .4);
	z-index: 1030; opacity: 0; pointer-events: none;
	transition: opacity var(--t-base) var(--ease);
}
.sidebar-overlay.show { opacity: 1; pointer-events: auto; }

@media (max-width: 991px) {
	.admin-sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
	.admin-sidebar.open { transform: translateX(0); }
	.admin-main { margin-left: 0; }
	.admin-content { padding: var(--sp-4); }
	.topbar-search { display: none; }
}

/* ---------------------------------------------------------------------
   4. PAGE HEADER (título da página + ações)
   --------------------------------------------------------------------- */
.page-header {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.page-header h4 { font-size: var(--fs-2xl); margin: 0; }
.page-header .page-subtitle { color: var(--gray-500); font-size: var(--fs-sm); margin-top: 2px; }
.page-header .page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   5. CARDS
   --------------------------------------------------------------------- */
.admin-card {
	background: var(--surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color);
	padding: var(--sp-5);
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.admin-card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.admin-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-3); }
.admin-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--gray-900); margin: 0; }
.admin-card-desc { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 2px; }

/* Stat cards do dashboard */
.stat-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-card .stat-icon {
	width: 40px; height: 40px; border-radius: var(--radius-md);
	display: flex; align-items: center; justify-content: center;
	background: var(--bee-50); color: var(--bee-600);
}
.stat-card .stat-icon svg { width: 20px; height: 20px; }
.stat-card .stat-value { font-size: var(--fs-2xl); font-weight: 700; color: var(--gray-900); line-height: 1.1; }
.stat-card .stat-label { font-size: var(--fs-xs); color: var(--gray-500); margin-top: 2px; }
.stat-card .stat-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; }
.stat-card .stat-trend.up { color: var(--color-success); }
.stat-card .stat-trend.down { color: var(--color-danger); }
.stat-card .stat-trend svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------------
   6. BOTÕES
   --------------------------------------------------------------------- */
.admin-body .btn {
	font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-sm);
	padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px;
	transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
	            color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast);
	border-width: 1px;
}
.admin-body .btn:active { transform: scale(.98); }
.admin-body .btn svg { width: 16px; height: 16px; }
.admin-body .btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.admin-body .btn-lg { padding: 11px 20px; font-size: var(--fs-base); }

.btn-admin-primary, .admin-body .btn-primary {
	background: var(--bee-600); border-color: var(--bee-600); color: #fff;
}
.btn-admin-primary:hover, .admin-body .btn-primary:hover {
	background: var(--bee-700); border-color: var(--bee-700); color: #fff;
	box-shadow: var(--shadow-sm);
}
.admin-body .btn-outline-secondary {
	border-color: var(--border-color); color: var(--gray-700); background: var(--surface);
}
.admin-body .btn-outline-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); color: var(--gray-900); }
.admin-body .btn-light { background: var(--gray-50); border-color: var(--gray-100); color: var(--gray-700); }
.admin-body .btn-light:hover { background: var(--gray-100); color: var(--gray-900); }
.admin-body .btn-outline-danger { color: var(--color-danger); border-color: #F3D2D2; background: var(--surface); }
.admin-body .btn-outline-danger:hover { background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); }
.admin-body .btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.admin-body .btn-link { color: var(--bee-600); font-weight: 600; }

.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* ---------------------------------------------------------------------
   7. BADGES
   --------------------------------------------------------------------- */
.badge-status {
	font-size: 11.5px; padding: 4px 11px; border-radius: var(--radius-full);
	font-weight: 600; display: inline-flex; align-items: center; gap: 5px;
	letter-spacing: .01em;
}
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-recebido    { background: var(--color-info-bg);    color: var(--color-info); }
.badge-em_preparo  { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-pronto      { background: var(--bee-50);           color: var(--bee-700); }
.badge-aguardando_entrega { background: var(--bee-50);    color: var(--bee-700); }
.badge-saiu_entrega{ background: var(--color-violet-bg);  color: var(--color-violet); }
.badge-entregue    { background: var(--color-success-bg); color: var(--color-success); }
.badge-cancelado   { background: var(--color-danger-bg);  color: var(--color-danger); }

.badge-soft { font-size: 11.5px; padding: 3px 10px; border-radius: var(--radius-full); font-weight: 600; background: var(--gray-100); color: var(--gray-600); }

/* ---------------------------------------------------------------------
   8. FORMULÁRIOS
   --------------------------------------------------------------------- */
.admin-body .form-label { font-size: var(--fs-sm); font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }
.admin-body .form-text, .admin-body small.text-muted { font-size: var(--fs-xs); }
.admin-body .form-control, .admin-body .form-select {
	border: 1px solid var(--border-color); border-radius: var(--radius-sm);
	padding: 9px 12px; font-size: var(--fs-sm); background: var(--surface); color: var(--gray-900);
	transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.admin-body .form-control:focus, .admin-body .form-select:focus {
	border-color: var(--bee-400); box-shadow: var(--shadow-focus); outline: none;
}
.admin-body .form-control.is-invalid, .admin-body .form-select.is-invalid { border-color: var(--color-danger); }
.admin-body .invalid-feedback { font-size: var(--fs-xs); color: var(--color-danger); }
.admin-body .form-control::placeholder { color: var(--gray-400); }

.form-section { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); background: var(--surface); }
.form-section-title { font-size: var(--fs-md); font-weight: 600; color: var(--gray-900); margin-bottom: 2px; }
.form-section-desc { font-size: var(--fs-xs); color: var(--gray-500); margin-bottom: var(--sp-4); }

.admin-body .form-check-input:checked { background-color: var(--bee-600); border-color: var(--bee-600); }
.admin-body .form-switch .form-check-input:checked { background-color: var(--bee-600); border-color: var(--bee-600); }
.admin-body .form-control:disabled, .admin-body .form-select:disabled { background: var(--gray-50); color: var(--gray-400); }

/* ---------------------------------------------------------------------
   9. TABELAS
   --------------------------------------------------------------------- */
.table-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.table-toolbar .table-search { position: relative; min-width: 240px; flex: 1; max-width: 320px; }
.table-toolbar .table-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--gray-400); }
.table-toolbar .table-search input { padding-left: 34px; }
.table-toolbar .table-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.admin-table-wrap { border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.admin-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.admin-table th {
	font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
	color: var(--gray-500); font-weight: 600; background: var(--gray-25);
	border-bottom: 1px solid var(--border-color); padding: 12px 16px; white-space: nowrap;
}
.admin-table th.sortable { cursor: pointer; user-select: none; }
.admin-table th.sortable:hover { color: var(--gray-800); }
.admin-table th .sort-icon { width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; opacity: .5; }
.admin-table td { vertical-align: middle; font-size: var(--fs-sm); padding: 13px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-700); }
.admin-table tbody tr { transition: background var(--t-fast); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--gray-25); }
.admin-table td.cell-strong { font-weight: 600; color: var(--gray-900); }

.table-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-color); background: var(--gray-25); }
.table-pagination .page-info { font-size: var(--fs-xs); color: var(--gray-500); }
.table-pagination .page-btns { display: flex; gap: 4px; }
.table-pagination .page-btn {
	min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-sm);
	border: 1px solid var(--border-color); background: var(--surface); color: var(--gray-600);
	font-size: var(--fs-xs); font-weight: 600; display: flex; align-items: center; justify-content: center;
	transition: all var(--t-fast);
}
.table-pagination .page-btn:hover:not(:disabled) { background: var(--gray-50); }
.table-pagination .page-btn.active { background: var(--bee-600); border-color: var(--bee-600); color: #fff; }
.table-pagination .page-btn:disabled { opacity: .4; cursor: not-allowed; }

.row-actions { position: relative; display: inline-flex; }
.row-actions-btn {
	width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid transparent;
	background: transparent; color: var(--gray-500); display: flex; align-items: center; justify-content: center;
}
.row-actions-btn:hover { background: var(--gray-100); color: var(--gray-800); }
.row-actions-btn svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------
   10. DROPDOWNS / TOOLTIPS / POPOVERS (override Bootstrap)
   --------------------------------------------------------------------- */
.admin-body .dropdown-menu {
	border: 1px solid var(--border-color); border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg); padding: 6px; font-size: var(--fs-sm);
	animation: bee-slide-up .12s var(--ease) both;
}
.admin-body .dropdown-item { border-radius: var(--radius-sm); padding: 8px 10px; display: flex; align-items: center; gap: 8px; color: var(--gray-700); }
.admin-body .dropdown-item svg { width: 15px; height: 15px; color: var(--gray-500); }
.admin-body .dropdown-item:hover { background: var(--gray-50); color: var(--gray-900); }
.admin-body .dropdown-item.text-danger:hover { background: var(--color-danger-bg); }
.admin-body .dropdown-divider { margin: 6px 0; border-color: var(--gray-100); }

.admin-body .tooltip-inner { background: var(--gray-900); font-size: var(--fs-xs); border-radius: var(--radius-sm); padding: 6px 10px; }

/* ---------------------------------------------------------------------
   11. MODAIS
   --------------------------------------------------------------------- */
.admin-body .modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.admin-body .modal-header { border-bottom: 1px solid var(--border-color); padding: var(--sp-5); }
.admin-body .modal-header .modal-title { font-size: var(--fs-lg); font-weight: 600; }
.admin-body .modal-body { padding: var(--sp-5); }
.admin-body .modal-footer { border-top: 1px solid var(--border-color); padding: var(--sp-4) var(--sp-5); }
.admin-body .modal.fade .modal-dialog { transform: translateY(16px) scale(.98); transition: transform var(--t-base) var(--ease); }
.admin-body .modal.show .modal-dialog { transform: translateY(0) scale(1); }

/* ---------------------------------------------------------------------
   12. TOASTS (sistema leve próprio - AdminUI.toast())
   --------------------------------------------------------------------- */
.bee-toast-stack {
	position: fixed; top: 20px; right: 20px; z-index: 1080;
	display: flex; flex-direction: column; gap: 10px; width: 320px; max-width: calc(100vw - 32px);
}
.bee-toast {
	background: var(--gray-900); color: #fff; border-radius: var(--radius-md);
	padding: 13px 14px; display: flex; align-items: flex-start; gap: 10px;
	box-shadow: var(--shadow-lg); font-size: var(--fs-sm);
	animation: bee-slide-in-right var(--t-base) var(--ease) both;
}
.bee-toast.leaving { animation: bee-fade-in var(--t-fast) var(--ease) reverse both; }
.bee-toast .toast-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.bee-toast .toast-icon svg { width: 20px; height: 20px; }
.bee-toast.success .toast-icon { color: var(--bee-400); }
.bee-toast.error .toast-icon { color: #F17A7A; }
.bee-toast.info .toast-icon { color: #7FB3F5; }
.bee-toast .toast-msg { flex: 1; line-height: 1.4; }
.bee-toast .toast-close { color: rgba(255,255,255,.5); flex-shrink: 0; }
.bee-toast .toast-close svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------
   13. SKELETON LOADING
   --------------------------------------------------------------------- */
.skeleton {
	background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 37%, var(--gray-100) 63%);
	background-size: 400px 100%;
	animation: bee-shimmer 1.4s ease infinite;
	border-radius: var(--radius-sm);
}
.skeleton-text { height: 12px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 40%; margin-bottom: 14px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 96px; border-radius: var(--radius-lg); }
.skeleton-row td { padding: 13px 16px; }

/* ---------------------------------------------------------------------
   14. ESTADOS VAZIOS / ERRO
   --------------------------------------------------------------------- */
.empty-state, .error-state {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--gray-500);
}
.empty-state .empty-icon, .error-state .error-icon {
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--gray-50); color: var(--gray-400);
	display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4);
}
.error-state .error-icon { background: var(--color-danger-bg); color: var(--color-danger); }
.empty-state .empty-icon svg, .error-state .error-icon svg { width: 26px; height: 26px; }
.empty-state .empty-title, .error-state .error-title { font-size: var(--fs-md); font-weight: 600; color: var(--gray-800); margin-bottom: 4px; }
.empty-state .empty-desc, .error-state .error-desc { font-size: var(--fs-sm); max-width: 320px; margin-bottom: var(--sp-4); }

/* ---------------------------------------------------------------------
   15. UTILITÁRIOS
   --------------------------------------------------------------------- */
.text-bee { color: var(--bee-600) !important; }
.bg-bee-soft { background: var(--bee-50) !important; }
.hover-lift { transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

@media (max-width: 575px) {
	.page-header { flex-direction: column; align-items: stretch; }
	.page-header .page-actions { width: 100%; }
	.page-header .page-actions .btn { flex: 1; }
}

/* ---------------------------------------------------------------------
   16. TELAS DE AUTENTICAÇÃO (login / cadastro)
   --------------------------------------------------------------------- */
body.auth-body {
	background: var(--surface-canvas);
	font-family: var(--font-sans);
	min-height: 100vh;
	display: flex; align-items: center; justify-content: center;
	padding: var(--sp-5);
	position: relative;
	overflow-x: hidden;
}
body.auth-body::before {
	content: '';
	position: absolute; top: -180px; right: -160px;
	width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, var(--bee-100) 0%, transparent 70%);
}
body.auth-body::after {
	content: '';
	position: absolute; bottom: -200px; left: -160px;
	width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, var(--bee-50) 0%, transparent 70%);
}
.auth-card { position: relative; z-index: 1; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--sp-7) var(--sp-6); animation: bee-slide-up var(--t-slow) var(--ease) both; }
.auth-card.auth-card-wide { max-width: 500px; }
.auth-card .auth-logo { width: 64px; margin: 0 auto var(--sp-4); display: block; }
.auth-card h3 { font-size: var(--fs-xl); text-align: center; margin-bottom: 4px; }
.auth-card .auth-subtitle { text-align: center; color: var(--gray-500); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.auth-card .input-icon { position: relative; }
.auth-card .input-icon svg {
	position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; color: var(--gray-400); pointer-events: none;
}
.auth-card .input-icon .form-control { padding-left: 38px; }
.auth-card .input-icon .toggle-pass {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	color: var(--gray-400); cursor: pointer; background: none; border: none; padding: 0; display: flex;
}
.auth-card .input-icon .toggle-pass svg { position: static; }
.auth-card .btn-admin-primary { padding: 11px; font-size: var(--fs-base); }
.auth-card .auth-footer { text-align: center; font-size: var(--fs-sm); color: var(--gray-500); margin-top: var(--sp-5); }
.auth-card .auth-footer a { font-weight: 600; }
.btn-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: bee-spin .6s linear infinite; display: inline-block; }
@keyframes bee-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   17. REFINAMENTO VISUAL 2026
   Mantém seletores, IDs e fluxos existentes; somente eleva a camada visual.
   --------------------------------------------------------------------- */
:root {
	--surface-canvas: #F7F8F7;
	--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--radius-md: 11px;
	--radius-lg: 14px;
	--radius-xl: 18px;
	--shadow-md: 0 6px 18px rgba(16, 24, 21, .075);
	--shadow-lg: 0 18px 42px rgba(16, 24, 21, .13);
}

body.admin-body { text-rendering: optimizeLegibility; }
.admin-body h1, .admin-body h2, .admin-body h3, .admin-body h4, .admin-body h5, .admin-body h6 { font-weight: 700; letter-spacing: -.025em; }
.admin-sidebar { background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); }
.admin-sidebar .brand-logo { background: linear-gradient(145deg, var(--bee-50), #F8FFFB); }
.admin-sidebar .brand-logo i { color: var(--bee-700); font-size: 20px; }
.admin-sidebar .brand-name { font-weight: 800; letter-spacing: -.03em; }
.admin-sidebar .brand-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; }
.admin-sidebar .store-block { border: 1px solid var(--gray-100); background: linear-gradient(135deg, var(--gray-25), var(--bee-50)); }
.admin-sidebar .store-name { font-weight: 700; }
.admin-sidebar .nav-link { padding-top: 10px; padding-bottom: 10px; font-weight: 600; }
.admin-sidebar .nav-link.active { background: linear-gradient(90deg, var(--bee-50), #F5FCF8); }
.admin-topbar { background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); }
.admin-content { padding: var(--sp-7); }
.page-header h4 { font-weight: 800; letter-spacing: -.04em; }
.admin-card { box-shadow: var(--shadow-xs); }
.admin-card-title, .admin-body .form-label { font-weight: 700; }
.admin-body .btn { min-height: 38px; font-weight: 700; }
.btn-admin-primary, .admin-body .btn-primary { box-shadow: 0 5px 12px rgba(3, 118, 77, .14); }
.admin-body .form-control, .admin-body .form-select { padding-top: 10px; padding-bottom: 10px; }
.admin-body .form-text { color: var(--gray-500); line-height: 1.45; }
.admin-body .input-group-text { border-color: var(--border-color); background: var(--gray-50); color: var(--gray-500); font-size: var(--fs-xs); }
.admin-table-wrap { box-shadow: var(--shadow-xs); }
.admin-table th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; }
.admin-table td { padding-top: 14px; padding-bottom: 14px; }
.admin-body .modal-content { border: 1px solid rgba(227, 232, 230, .8); }
.admin-body .modal-backdrop.show { opacity: .42; }
.admin-body .alert { border-radius: var(--radius-md); border-width: 1px; font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .admin-body *, .admin-body *::before, .admin-body *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }