/* =============================================================================
   Anotai Pro — Public Design System
   SaaS Dark · Mobile-First · Vibrante
   Autor: Roi Máximo | roimaximo.top
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────────────────────── */
:root {
	--an-bg:          #060b14;
	--an-surface:     #0d1520;
	--an-surface2:    #111d2e;
	--an-surface3:    #162036;
	--an-border:      rgba(255,255,255,.07);
	--an-border2:     rgba(255,255,255,.12);

	--an-primary:     #3b82f6;
	--an-primary-d:   #2563eb;
	--an-primary-glow:rgba(59,130,246,.25);
	--an-accent:      #06d6a0;
	--an-accent-d:    #05b888;
	--an-purple:      #a78bfa;
	--an-pink:        #f472b6;
	--an-orange:      #fb923c;
	--an-yellow:      #fbbf24;
	--an-red:         #f43f5e;
	--an-green:       #22c55e;

	--an-text:        #e8edf5;
	--an-text2:       #94a3b8;
	--an-text3:       #64748b;

	--an-sidebar-w:   260px;
	--an-topbar-h:    60px;
	--an-radius:      12px;
	--an-radius-sm:   8px;
	--an-radius-lg:   18px;
	--an-shadow:      0 4px 24px rgba(0,0,0,.45);
	--an-shadow-lg:   0 12px 48px rgba(0,0,0,.6);

	--an-font-head:   'Syne', sans-serif;
	--an-font-body:   'DM Sans', sans-serif;

	--an-transition:  .2s cubic-bezier(.4,0,.2,1);
}

/* ── RESET / BASE ────────────────────────────────────────────────────────────── */
.an-app *, .an-login-wrap * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.an-app, .an-login-wrap {
	font-family: var(--an-font-body);
	font-size: 14px;
	color: var(--an-text);
	background: var(--an-bg);
	-webkit-font-smoothing: antialiased;
}

/* ── LOGIN ───────────────────────────────────────────────────────────────────── */
.an-login-wrap {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59,130,246,.18) 0%, transparent 70%),
		var(--an-bg);
	padding: 24px 16px;
}

.an-login-card {
	width: 100%;
	max-width: 420px;
	background: var(--an-surface);
	border: 1px solid var(--an-border2);
	border-radius: var(--an-radius-lg);
	padding: 40px 36px;
	box-shadow: var(--an-shadow-lg);
	animation: anFadeUp .4s ease both;
}

.an-login-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}
.an-logo-icon { font-size: 2rem; }
.an-logo-text { font-family: var(--an-font-head); font-size: 1.5rem; color: var(--an-text); letter-spacing: -.02em; }
.an-logo-text strong { color: var(--an-primary); }

.an-login-title { font-family: var(--an-font-head); font-size: 1.35rem; font-weight: 700; margin-bottom: 6px; }
.an-login-sub   { color: var(--an-text2); font-size: .9rem; margin-bottom: 28px; }

/* Espaço entre último campo e botão de login */
.an-login-card .an-login-submit,
.an-login-card .an-btn-block {
	margin-top: 10px;
}

/* ── LAYOUT APP ──────────────────────────────────────────────────────────────── */
.an-app {
	min-height: 100vh;
	display: flex;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────────── */
.an-sidebar {
	width: var(--an-sidebar-w);
	min-height: 100vh;
	background: var(--an-surface);
	border-right: 1px solid var(--an-border);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0; left: 0; bottom: 0;
	z-index: 200;
	transform: translateX(0);
	transition: transform var(--an-transition);
}

.an-sidebar-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 20px 20px 16px;
	border-bottom: 1px solid var(--an-border);
}
.an-sidebar-close {
	display: none;
	margin-left: auto;
	background: none;
	border: none;
	color: var(--an-text2);
	font-size: 1.1rem;
	cursor: pointer;
}

.an-nav {
	flex: 1;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
}

.an-nav-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--an-radius-sm);
	color: var(--an-text2);
	text-decoration: none;
	font-weight: 500;
	font-size: .9rem;
	transition: all var(--an-transition);
	position: relative;
}
.an-nav-item:hover {
	background: var(--an-surface3);
	color: var(--an-text);
}
.an-nav-item--active {
	background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(6,214,160,.1));
	color: var(--an-primary);
	border: 1px solid rgba(59,130,246,.25);
}
.an-nav-item--active .an-nav-icon { filter: drop-shadow(0 0 6px var(--an-primary)); }
.an-nav-icon  { font-size: 1.1rem; flex-shrink: 0; }
.an-nav-label { flex: 1; }

.an-badge {
	background: var(--an-red);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

.an-sidebar-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	border-top: 1px solid var(--an-border);
}
.an-sidebar-logout {
	padding: 0 12px 16px;
}
.an-user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}
.an-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--an-primary), var(--an-accent));
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	font-family: var(--an-font-head);
}
.an-avatar-lg { width: 80px; height: 80px; font-size: 1.8rem; border-radius: 50%; }
.an-user-info  { overflow: hidden; }
.an-user-name  { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-user-role  { font-size: .75rem; color: var(--an-text3); }

/* ── TOPBAR ──────────────────────────────────────────────────────────────────── */
.an-topbar {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--an-topbar-h);
	background: var(--an-surface);
	border-bottom: 1px solid var(--an-border);
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	z-index: 150;
}
.an-topbar-title { font-family: var(--an-font-head); font-weight: 700; font-size: 1rem; }

.an-menu-toggle {
	background: none;
	border: none;
	color: var(--an-text);
	font-size: 1.3rem;
	cursor: pointer;
	padding: 4px;
}

.an-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 190;
	backdrop-filter: blur(2px);
}
.an-sidebar-overlay.an-visible { display: block; }

/* ── MAIN CONTENT ────────────────────────────────────────────────────────────── */
.an-content {
	flex: 1;
	margin-left: var(--an-sidebar-w);
	padding: 32px 28px;
	min-height: 100vh;
	background:
		radial-gradient(ellipse 60% 40% at 80% 10%, rgba(59,130,246,.06) 0%, transparent 60%),
		var(--an-bg);
}

/* ── SECTION HEADER ──────────────────────────────────────────────────────────── */
.an-section-header {
	margin-bottom: 28px;
}
.an-section-title {
	font-family: var(--an-font-head);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--an-text);
	margin-bottom: 4px;
}
.an-section-sub { color: var(--an-text2); font-size: .9rem; }

/* ── CARDS ───────────────────────────────────────────────────────────────────── */
.an-card {
	background: var(--an-surface);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius);
	padding: 24px;
	margin-bottom: 20px;
}
.an-card-title {
	font-family: var(--an-font-head);
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 20px;
	color: var(--an-text);
}

/* ── STATS GRID ──────────────────────────────────────────────────────────────── */
.an-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.an-stat-card {
	background: var(--an-surface);
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius);
	padding: 20px;
	position: relative;
	overflow: hidden;
	transition: transform var(--an-transition), box-shadow var(--an-transition);
}
.an-stat-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	border-radius: var(--an-radius) var(--an-radius) 0 0;
}
.an-stat-card:hover { transform: translateY(-3px); box-shadow: var(--an-shadow); }

.an-stat-blue::before   { background: linear-gradient(90deg, var(--an-primary), var(--an-accent)); }
.an-stat-purple::before { background: linear-gradient(90deg, var(--an-purple), var(--an-pink)); }
.an-stat-green::before  { background: linear-gradient(90deg, var(--an-green), var(--an-accent)); }
.an-stat-orange::before { background: linear-gradient(90deg, var(--an-orange), var(--an-yellow)); }

.an-stat-top   { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.an-stat-icon  { font-size: 1.6rem; }
.an-stat-num   { font-family: var(--an-font-head); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.an-stat-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--an-text2); }
.an-stat-meta  { font-size: .75rem; color: var(--an-text3); margin-top: 4px; }

.an-progress-bar {
	height: 4px;
	background: var(--an-border2);
	border-radius: 2px;
	margin-top: 10px;
	overflow: hidden;
}
.an-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--an-primary), var(--an-accent));
	border-radius: 2px;
	transition: width .5s ease;
}

/* ── FORMS ───────────────────────────────────────────────────────────────────── */
.an-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.an-col-full { grid-column: 1 / -1; }

.an-form-group { display: flex; flex-direction: column; gap: 6px; }
.an-form-group label {
	font-size: .83rem;
	font-weight: 600;
	color: var(--an-text2);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.an-input {
	width: 100%;
	background: var(--an-surface2);
	border: 1px solid var(--an-border2);
	border-radius: var(--an-radius-sm);
	color: var(--an-text);
	font-family: var(--an-font-body);
	font-size: .9rem;
	padding: 10px 14px;
	outline: none;
	transition: border-color var(--an-transition), box-shadow var(--an-transition);
}
.an-input:focus {
	border-color: var(--an-primary);
	box-shadow: 0 0 0 3px var(--an-primary-glow);
}
.an-input::placeholder { color: var(--an-text3); }
.an-input-sm { max-width: 220px; }

.an-textarea { resize: vertical; min-height: 90px; }

select.an-input { appearance: none; cursor: pointer; }

.an-input-eye { position: relative; }
.an-input-eye .an-input { padding-right: 44px; }
.an-eye-btn {
	position: absolute;
	right: 12px; top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	cursor: pointer;
	font-size: .9rem;
	color: var(--an-text3);
	transition: color var(--an-transition);
}
.an-eye-btn:hover { color: var(--an-text); }

.an-required { color: var(--an-red); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────────── */
.an-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--an-radius-sm);
	font-family: var(--an-font-body);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: all var(--an-transition);
	white-space: nowrap;
}
.an-btn:disabled { opacity: .5; cursor: not-allowed; }

.an-btn-primary {
	background: linear-gradient(135deg, var(--an-primary), var(--an-primary-d));
	color: #fff;
	box-shadow: 0 2px 12px rgba(59,130,246,.35);
}
.an-btn-primary:hover { box-shadow: 0 4px 20px rgba(59,130,246,.55); transform: translateY(-1px); }

.an-btn-secondary {
	background: var(--an-surface3);
	color: var(--an-text);
	border: 1px solid var(--an-border2);
}
.an-btn-secondary:hover { background: var(--an-border2); }

.an-btn-outline {
	background: transparent;
	color: var(--an-primary);
	border: 1px solid var(--an-primary);
}
.an-btn-outline:hover { background: rgba(59,130,246,.1); }

.an-btn-success {
	background: linear-gradient(135deg, var(--an-green), var(--an-accent));
	color: #fff;
}
.an-btn-success:hover { box-shadow: 0 4px 16px rgba(34,197,94,.4); }

.an-btn-danger {
	background: linear-gradient(135deg, var(--an-red), #e11d48);
	color: #fff;
}
.an-btn-danger:hover { box-shadow: 0 4px 16px rgba(244,63,94,.4); }

.an-btn-warning {
	background: linear-gradient(135deg, var(--an-orange), var(--an-yellow));
	color: #000;
}

.an-btn-sm { padding: 6px 14px; font-size: .8rem; }
.an-btn-block { width: 100%; justify-content: center; }

.an-form-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── TABLES ──────────────────────────────────────────────────────────────────── */
.an-table-wrap { overflow-x: auto; border-radius: var(--an-radius-sm); }

.an-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .88rem;
}
.an-table thead th {
	background: var(--an-surface2);
	color: var(--an-text2);
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--an-border2);
	white-space: nowrap;
}
.an-table tbody tr {
	border-bottom: 1px solid var(--an-border);
	transition: background var(--an-transition);
}
.an-table tbody tr:hover { background: var(--an-surface2); }
.an-table tbody td {
	padding: 12px 14px;
	color: var(--an-text);
	vertical-align: middle;
}
.an-empty { text-align: center; color: var(--an-text3); padding: 32px !important; }
.an-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── ALERTS ──────────────────────────────────────────────────────────────────── */
.an-alert {
	padding: 12px 16px;
	border-radius: var(--an-radius-sm);
	font-size: .88rem;
	font-weight: 500;
	border: 1px solid transparent;
	margin-bottom: 16px;
}
.an-alert-success { background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.3);  color: #4ade80; }
.an-alert-error   { background: rgba(244,63,94,.12);  border-color: rgba(244,63,94,.3);  color: #fb7185; }
.an-alert-warning { background: rgba(251,146,60,.12); border-color: rgba(251,146,60,.3); color: #fb923c; }
.an-alert-info    { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #60a5fa; }

/* ── MODALS ──────────────────────────────────────────────────────────────────── */
.an-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.7);
	z-index: 500;
	align-items: center;
	justify-content: center;
	padding: 16px;
	backdrop-filter: blur(4px);
	animation: anFadeIn .2s ease;
}
.an-modal.an-open { display: flex; }

.an-modal-box {
	background: var(--an-surface);
	border: 1px solid var(--an-border2);
	border-radius: var(--an-radius-lg);
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--an-shadow-lg);
	animation: anSlideUp .3s ease;
}
.an-modal-lg { max-width: 720px; }

.an-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--an-border);
}
.an-modal-header h3 { font-family: var(--an-font-head); font-size: 1rem; font-weight: 700; }
.an-modal-close {
	background: none; border: none;
	color: var(--an-text2); font-size: 1.1rem; cursor: pointer;
	transition: color var(--an-transition);
}
.an-modal-close:hover { color: var(--an-red); }
.an-modal-body   { padding: 24px; }
.an-modal-footer { padding: 16px 24px; border-top: 1px solid var(--an-border); display: flex; gap: 10px; justify-content: flex-end; }

/* ── MULTISELECT / CHECKBOXES ────────────────────────────────────────────────── */
.an-multiselect {
	background: var(--an-surface2);
	border: 1px solid var(--an-border2);
	border-radius: var(--an-radius-sm);
	padding: 10px 12px;
	max-height: 180px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.an-checkbox-item {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	color: var(--an-text);
	font-size: .88rem;
	padding: 4px;
	border-radius: 4px;
	transition: background var(--an-transition);
}
.an-checkbox-item:hover { background: var(--an-surface3); }
.an-checkbox-item input[type="checkbox"] { accent-color: var(--an-primary); width: 14px; height: 14px; }

/* ── TOOLBAR / FILTER / EXPORT ───────────────────────────────────────────────── */
.an-toolbar     { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.an-filter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.an-export-bar  { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── CALENDAR ────────────────────────────────────────────────────────────────── */
.an-calendar {
	background: var(--an-surface2);
	border: 1px solid var(--an-border2);
	border-radius: var(--an-radius);
	padding: 16px;
	user-select: none;
}
.an-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.an-cal-title   { font-family: var(--an-font-head); font-weight: 700; font-size: .95rem; }
.an-cal-nav-btn {
	background: none; border: none;
	color: var(--an-text2); font-size: 1.2rem; cursor: pointer;
	padding: 4px 8px; border-radius: 6px; transition: all var(--an-transition);
}
.an-cal-nav-btn:hover { background: var(--an-surface3); color: var(--an-text); }

.an-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.an-cal-day-label {
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	color: var(--an-text3);
	text-transform: uppercase;
	padding-bottom: 6px;
}
.an-cal-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
	font-size: .84rem;
	transition: all var(--an-transition);
	color: var(--an-text2);
}
.an-cal-day:hover:not(.an-cal-empty):not(.an-cal-past) {
	background: var(--an-surface3);
	color: var(--an-text);
}
.an-cal-day.an-cal-selected {
	background: linear-gradient(135deg, var(--an-primary), var(--an-accent));
	color: #fff;
	font-weight: 700;
	box-shadow: 0 2px 8px var(--an-primary-glow);
}
.an-cal-day.an-cal-today { border: 1px solid var(--an-primary); color: var(--an-primary); }
.an-cal-day.an-cal-empty { cursor: default; }
.an-cal-day.an-cal-past  { opacity: .3; cursor: default; }

.an-selected-dates-wrap { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.an-selected-dates      { display: flex; flex-wrap: wrap; gap: 6px; }
.an-date-chip {
	background: rgba(59,130,246,.2);
	border: 1px solid rgba(59,130,246,.4);
	color: var(--an-primary);
	font-size: .78rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
}

/* ── TICKETS / SUPPORT ───────────────────────────────────────────────────────── */
.an-ticket-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 400px;
	overflow-y: auto;
	padding: 4px;
}
.an-ticket-msg {
	max-width: 75%;
	border-radius: var(--an-radius);
	padding: 12px 16px;
}
.an-ticket-mine {
	align-self: flex-end;
	background: rgba(59,130,246,.15);
	border: 1px solid rgba(59,130,246,.25);
	border-bottom-right-radius: 4px;
}
.an-ticket-other {
	align-self: flex-start;
	background: var(--an-surface2);
	border: 1px solid var(--an-border);
	border-bottom-left-radius: 4px;
}
.an-ticket-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.an-ticket-meta strong { font-size: .82rem; color: var(--an-text); }
.an-ticket-time        { font-size: .72rem; color: var(--an-text3); }
.an-ticket-body        { font-size: .9rem; color: var(--an-text); line-height: 1.5; }
.an-ticket-compose     { border-top: 1px solid var(--an-border); padding-top: 16px; }

/* ── PHOTO UPLOAD ────────────────────────────────────────────────────────────── */
.an-photo-upload-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.an-photo-slot {
	aspect-ratio: 1;
	border: 2px dashed var(--an-border2);
	border-radius: var(--an-radius);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all var(--an-transition);
	overflow: hidden;
	position: relative;
}
.an-photo-slot:hover { border-color: var(--an-primary); background: rgba(59,130,246,.05); }
.an-photo-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--an-text3);
	font-size: .8rem;
}
.an-photo-icon { font-size: 1.6rem; }
.an-photo-preview { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ── PROFILE ─────────────────────────────────────────────────────────────────── */
.an-profile-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 20px;
	align-items: start;
}
.an-profile-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.an-profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.an-profile-avatar { border-radius: 50%; object-fit: cover; border: 3px solid var(--an-primary); }
.an-profile-name  { font-family: var(--an-font-head); font-size: 1.1rem; font-weight: 700; }
.an-profile-role  { font-size: .8rem; color: var(--an-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.an-profile-email { font-size: .85rem; color: var(--an-text2); }
.an-profile-code  { font-size: .82rem; color: var(--an-text2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.an-profile-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── BADGES / CODES ──────────────────────────────────────────────────────────── */
.an-code-badge {
	background: rgba(6,214,160,.12);
	border: 1px solid rgba(6,214,160,.3);
	color: var(--an-accent);
	font-size: .75rem;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 20px;
	letter-spacing: .04em;
}

.an-status-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.an-status-pending  { background: rgba(251,191,36,.12); color: var(--an-yellow); border: 1px solid rgba(251,191,36,.3); }
.an-status-accepted { background: rgba(34,197,94,.12);  color: var(--an-green);  border: 1px solid rgba(34,197,94,.3); }
.an-status-rejected { background: rgba(244,63,94,.12);  color: var(--an-red);    border: 1px solid rgba(244,63,94,.3); }

/* ── NOTE VIEW ───────────────────────────────────────────────────────────────── */
.an-note-detail { display: grid; gap: 16px; }
.an-note-field  { border-bottom: 1px solid var(--an-border); padding-bottom: 14px; }
.an-note-field:last-child { border-bottom: none; }
.an-note-field-label {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--an-text3);
	margin-bottom: 6px;
}
.an-note-field-value { font-size: .92rem; line-height: 1.6; color: var(--an-text); white-space: pre-wrap; }
.an-note-photos { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.an-note-photos img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--an-radius-sm); border: 1px solid var(--an-border); }

/* ── SPINNER ─────────────────────────────────────────────────────────────────── */
.an-spinner {
	width: 32px; height: 32px;
	border: 3px solid var(--an-border2);
	border-top-color: var(--an-primary);
	border-radius: 50%;
	animation: anSpin .7s linear infinite;
	margin: 24px auto;
}

/* ── FOOTER CREDITS ──────────────────────────────────────────────────────────── */
.anotai-footer-credits {
	text-align: center;
	font-size: .75rem;
	color: var(--an-text3);
	padding: 20px;
	border-top: 1px solid var(--an-border);
	margin-top: 8px;
}
.anotai-footer-credits a { color: var(--an-primary); text-decoration: none; }
.anotai-footer-credits a:hover { color: var(--an-accent); }

/* ── UTILITIES ───────────────────────────────────────────────────────────────── */
.an-mt-10  { margin-top: 10px; }
.an-mt-20  { margin-top: 20px; }
.an-ml-10  { margin-left: 10px; }
.an-muted  { color: var(--an-text3); font-size: .85rem; }

/* ── ANIMATIONS ──────────────────────────────────────────────────────────────── */
@keyframes anFadeUp  { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
@keyframes anFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes anSlideUp { from { opacity:0; transform: translateY(30px) scale(.97); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes anSpin    { to { transform: rotate(360deg); } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
	.an-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.an-sidebar {
		transform: translateX(-100%);
		box-shadow: var(--an-shadow-lg);
	}
	.an-sidebar.an-open { transform: translateX(0); }
	.an-sidebar-close   { display: block; }

	.an-topbar { display: flex; }
	.an-content { margin-left: 0; padding: 80px 16px 24px; }

	.an-form-grid { grid-template-columns: 1fr; }
	.an-stats-grid { grid-template-columns: 1fr 1fr; }
	.an-photo-upload-grid { grid-template-columns: 1fr 1fr 1fr; }
	.an-ticket-msg { max-width: 90%; }
}

@media (max-width: 480px) {
	.an-login-card { padding: 28px 20px; }
	.an-stats-grid { grid-template-columns: 1fr; }
	.an-content    { padding: 74px 12px 20px; }
	.an-card       { padding: 16px; }
	.an-modal-box  { border-radius: var(--an-radius); }
	.an-photo-upload-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ── SPINNER INLINE (botões) ─────────────────────────────────────────────────── */
.an-spinner-inline {
	display: inline-block;
	width: 14px; height: 14px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: anSpin .6s linear infinite;
	vertical-align: middle;
}

/* ── ESCALAS POR PROFISSIONAL ─────────────────────────────────────────────── */
.an-prof-schedule-block {
	border: 1px solid var(--an-border);
	border-radius: var(--an-radius);
	margin-bottom: 16px;
	overflow: hidden;
	transition: border-color var(--an-transition);
}
.an-prof-schedule-block:hover { border-color: var(--an-border2); }

.an-prof-schedule-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--an-surface2);
	flex-wrap: wrap;
	gap: 10px;
}
.an-prof-schedule-name {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
}
.an-prof-avatar-mini {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--an-primary), var(--an-accent));
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--an-font-head);
	flex-shrink: 0;
}
.an-badge-count {
	background: rgba(59,130,246,.15);
	border: 1px solid rgba(59,130,246,.25);
	color: var(--an-primary);
	font-size: .72rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 12px;
	letter-spacing: .03em;
}

.an-prof-schedule-dates {
	padding: 14px 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.an-date-chip-green {
	background: rgba(6,214,160,.1);
	border: 1px solid rgba(6,214,160,.25);
	color: var(--an-accent);
	font-size: .78rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.an-chip-sub {
	color: var(--an-text3);
	font-weight: 400;
	font-size: .72rem;
}

/* ── INPUT MONTH ─────────────────────────────────────────────────────────── */
input[type="month"].an-input {
	color-scheme: dark;
}

/* ── FILTRO ATIVO — indicador de filtros aplicados ───────────────────────── */
.an-filter-active-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	padding: 10px 14px;
	background: rgba(59,130,246,.07);
	border: 1px solid rgba(59,130,246,.18);
	border-radius: var(--an-radius-sm);
}
.an-filter-tag {
	background: rgba(59,130,246,.15);
	border: 1px solid rgba(59,130,246,.3);
	color: var(--an-primary);
	font-size: .78rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
}
.an-filter-count {
	font-size: .78rem;
	color: var(--an-text3);
	margin-left: auto;
}