/* 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; } .es-card, .es-stat-card, .card { box-shadow: 0 14px 32px rgba(0, 0, 0, .16); } .es-stat-card { background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 110px), var(--es-card); border-color: rgba(247, 242, 232, .10); } .es-stat-card.is-link:hover { border-color: rgba(232, 88, 20, .38); transform: translateY(-1px); } .admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 22px; border: 1px solid rgba(247, 242, 232, .10); border-radius: 18px; background: linear-gradient(135deg, rgba(232, 88, 20, .15), rgba(14, 42, 110, .10) 54%, rgba(255,255,255,.025)), var(--es-card); box-shadow: 0 18px 42px rgba(0, 0, 0, .18); } .admin-hero-main { min-width: 0; } .admin-hero-main p { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; } .admin-eyebrow { margin-bottom: 7px; color: var(--orange-300); font: 800 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .admin-hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .admin-live-pill { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; background: rgba(24, 135, 78, .12); border: 1px solid rgba(24, 135, 78, .28); color: var(--ok-300); font-size: 12px; font-weight: 700; white-space: nowrap; } .admin-live-pill span:first-child { width: 8px; height: 8px; display: inline-block; border-radius: 999px; background: var(--ok-500); animation: dash-pulse 2s infinite; } .admin-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; } .admin-metric-grid-secondary { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 32px; } .admin-dashboard-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; } @media (max-width: 760px) { .admin-hero { align-items: stretch; flex-direction: column; padding: 18px; } .admin-hero-actions { justify-content: flex-start; } .admin-dashboard-panels { grid-template-columns: 1fr; } } /* 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); } /* Tema claro (F1, coord. #376): no claro, btn-secondary nao deve herdar o navy de --es-surface-2 (que nao e theme-aware). Override SO no claro, com tokens theme-aware; o dark fica identico. Dormente enquanto o toggle esta off. */ :root:not([data-theme="dark"]) .btn-secondary { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border-soft); } :root:not([data-theme="dark"]) .btn-secondary:hover { background: var(--surface-sunken); } .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; /* D3 (#376): escala responsiva alinhada a .t-h2 (clamp 24->36px) em vez de 24px fixo. */ font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; line-height: 1.15; color: var(--text-primary); letter-spacing: -0.015em; text-wrap: balance; }