/* EasyStock Admin — design system alinhado com EasyStok DS oficial. Carregado APÓS tokens.css. As variáveis --es-* abaixo viraram aliases para os tokens do DS, preservando uso atual das classes (.card, .badge-*, etc.). Admin permanece dark-first via no Layout. */ :root { /* Surfaces (em dark, --bg-app/--bg-surface vêm de tokens.css :root[data-theme="dark"]) */ --es-bg: var(--bg-app); --es-surface: var(--bg-surface); --es-surface-2: #202b42; --es-card: var(--bg-elevated); /* Accent — orange do DS */ --es-accent: var(--orange-500); /* #F26B25 */ --es-accent-hover: var(--orange-600); /* #E85814 */ --es-accent-soft: rgba(232, 88, 20, .18); /* Status — alinhados ao DS */ --es-basil: #4fbf9f; /* mantido — verde "basil" do brand */ --es-basil-soft: rgba(79, 191, 159, .15); --es-gold: #f0b84a; /* mantido — alerta */ --es-gold-soft: rgba(240, 184, 74, .14); /* Ink (texto) */ --es-cream: #f1dcc0; --es-ink: var(--text-primary); --es-ink-dim: var(--text-secondary); --es-ink-mute: var(--text-muted); /* Bordas */ --es-border: var(--border-soft); --es-border-strong: var(--border-strong); /* Sombras */ --es-shadow: var(--shadow-lg); --es-glow: var(--shadow-md); --es-transition: .15s ease; } /* ── Ticket row hover (substitui onmouseover inline antigo) ── */ .ticket-row { transition: background .15s ease; } .ticket-row:hover, .ticket-row:focus-visible { background: rgba(32, 43, 66, .5); outline: none; } .ticket-row:focus-visible { box-shadow: inset 3px 0 0 var(--es-accent); } .card { background: var(--es-card); border: 1px solid var(--es-border-strong); border-radius: var(--r-md); padding: 1.5rem; } /* p-0 override: admin.css carrega depois do Tailwind, então .card vence na cascata */ .card.p-0 { padding: 0; } /* ── Status badges ─────────────────────────────────────────── */ .badge-ativa { background: var(--es-basil-soft); color: var(--es-basil); border: 1px solid rgba(79,191,159,.30); } .badge-suspensa { background: var(--es-gold-soft); color: var(--es-gold); border: 1px solid rgba(240,184,74,.30); } .badge-cancelada{ background: rgba(239, 68, 68, .12); color: #f87171; border: 1px solid rgba(239, 68, 68, .25); } .badge-expirada { background: rgba(135,147,167,.10); color: var(--es-ink-mute); border: 1px solid rgba(135,147,167,.22); } .badge-aberto { background: rgba(79,191,159,.10); color: var(--es-basil); border: 1px solid rgba(79,191,159,.22); } .badge-ematendimento { background: var(--es-gold-soft); color: var(--es-gold); border: 1px solid rgba(240,184,74,.30); } .badge-resolvido { background: var(--es-basil-soft); color: var(--es-basil); border: 1px solid rgba(79,191,159,.30); } .badge-fechado { background: rgba(135,147,167,.10); color: var(--es-ink-mute); border: 1px solid rgba(135,147,167,.22); } .badge-normal { background: rgba(135,147,167,.10); color: var(--es-ink-mute); border: 1px solid rgba(135,147,167,.22); } .badge-alta { background: var(--es-gold-soft); color: var(--es-gold); border: 1px solid rgba(240,184,74,.30); } .badge-critica { background: rgba(239, 68, 68, .12); color: #f87171; border: 1px solid rgba(239, 68, 68, .25); } .status-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } /* ── Buttons ───────────────────────────────────────────────── */ .btn-primary { background: var(--orange-600); color: var(--white); padding: 0.5rem 1rem; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 700; transition: background var(--es-transition), transform var(--es-transition); } .btn-primary:hover { background: var(--orange-700); } .btn-primary:active { transform: scale(0.97); } .btn-secondary { background: var(--es-surface-2); color: var(--es-ink-dim); border: 1px solid var(--es-border-strong); padding: 0.5rem 1rem; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 600; transition: background var(--es-transition), transform var(--es-transition); } .btn-secondary:hover { background: var(--es-surface); } .btn-secondary:active { transform: scale(0.97); } .btn-danger { background: rgba(239, 68, 68, .12); color: #f87171; border: 1px solid rgba(239, 68, 68, .25); padding: 0.4rem 0.8rem; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; transition: background var(--es-transition), transform var(--es-transition); } .btn-danger:hover { background: rgba(239, 68, 68, .22); } .btn-danger:active { transform: scale(0.97); } /* Ação reversível (ex: Suspender — pode Reativar depois). */ .btn-warning { background: rgba(240, 184, 74, .12); color: var(--es-gold); border: 1px solid rgba(240, 184, 74, .30); padding: 0.4rem 0.8rem; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 600; transition: background var(--es-transition), transform var(--es-transition); } .btn-warning:hover { background: rgba(240, 184, 74, .22); } .btn-warning:active { transform: scale(0.97); } /* Ação irreversível total (ex: Anonimizar — não tem desfazer). */ .btn-destructive { background: #dc2626; color: #fff; border: 1px solid #b91c1c; padding: 0.4rem 0.8rem; border-radius: var(--r-sm); font-size: 0.8rem; font-weight: 700; transition: background var(--es-transition), transform var(--es-transition); } .btn-destructive:hover { background: #b91c1c; } .btn-destructive:active { transform: scale(0.97); } /* Estado :disabled — feedback visual consistente em todos os botões. */ .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-warning:disabled, .btn-destructive:disabled, .btn-primary[disabled], .btn-secondary[disabled], .btn-danger[disabled], .btn-warning[disabled], .btn-destructive[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none !important; } /* ── Table ─────────────────────────────────────────────────── */ .table-admin { width: 100%; border-collapse: collapse; } .table-admin th { text-align: left; padding: 0.75rem 1rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--es-ink-mute); border-bottom: 1px solid var(--es-border); background: var(--es-bg); } .table-admin td { padding: 0.875rem 1rem; font-size: 0.875rem; color: var(--es-ink-dim); border-bottom: 1px solid var(--es-border); } .table-admin tr:hover td { background: rgba(32, 43, 66, .40); } /* ── Form ──────────────────────────────────────────────────── */ .form-input { width: 100%; background: var(--es-bg); border: 1px solid var(--es-border-strong); border-radius: var(--r-sm); color: var(--es-ink); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit; outline: none; transition: border-color var(--es-transition), box-shadow var(--es-transition); } .form-input:focus { border-color: var(--es-accent); box-shadow: 0 0 0 3px var(--es-accent-soft); } .form-input::placeholder { color: var(--es-ink-mute); } select.form-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238793a7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem; } .form-label { display: block; font-size: 0.7rem; font-weight: 700; color: var(--es-ink-mute); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.375rem; } /* ── Modal ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; z-index: 100; } .modal-box { background: var(--es-card); border: 1px solid var(--es-border-strong); border-radius: var(--r-md); padding: 1.5rem; width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto; } /* Titulo de pagina padrao do Admin: substitui o

inline repetido (~17x). Replica o estilo anterior 1:1 (24px/700) -> ponto unico p/ futura migracao a escala .t-h*. */ .admin-page-title { margin: 6px 0 0; font-size: 24px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; }