/* Brand & status color tokens moved to vars-colors.css */
/* ══════════════════════════════════════════════════════════════════════
5 — GLOBAL BACKDROP
Full-screen semi-transparent overlay for modals / side panels.
Toggled by JS via .is-visible class.
══════════════════════════════════════════════════════════════════════ */
#backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
will-change: opacity;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 200;
}
#backdrop.is-visible {
display: flex;
opacity: 1;
visibility: visible;
}
/* ══════════════════════════════════════════════════════════════════════
6 — PAGE OVERLAY
Container for page-level loading / status messages.
══════════════════════════════════════════════════════════════════════ */
/**
* status.css
* Status indicator colours, dot/pulse animations, loading overlays.
* All colours reference design tokens from default.css.
* Note: colour tokens are scoped to .app; outside .app the CSS variable
* falls back to the browser initial value for that property.
*/
/* -- Page status overlay -------------------------------------------- */
#page-status-container {
display: none;
}
#page-status-container.visible {
position: fixed;
display: flex;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
opacity: 1;
visibility: visible;
z-index: 999;
pointer-events: auto !important;
}
/* -- Bloqueio em dispositivos móveis (Definições → Infraestrutura) ---
O aviso que ocupa o ecrã e impede o uso do CRM no telemóvel. Não é um modal:
não tem como se fechar, de propósito — quem o vê não devia estar a trabalhar
aqui, e um botão de fechar transformaria o bloqueio numa sugestão.
O #page-status-container já é `position: fixed` a cobrir tudo com o z-index
mais alto da aplicação; aqui só se pinta o que se vê. */
#mobile-message {
display: none;
align-items: center;
justify-content: center;
position: absolute;
inset: 0;
padding: var(--space-6);
/* Sem fundo próprio: quem escurece o ecrã é o #backdrop global (o mesmo dos
menus do header), que a Api.js liga ao mostrar este aviso — translúcido e
com blur, como o resto da aplicação. Um rectângulo opaco só deste aviso era
mais um material a conviver com os outros.
Deixar entrever o CRM por baixo não o torna alcançável: os filhos de
ficam `inert` enquanto isto está no ecrã. */
background-color: transparent;
/* pointer-events: auto é o que intercepta toque e clique — sem isto o aviso
era só uma imagem por cima de uma aplicação a funcionar. */
pointer-events: auto;
}
#mobile-message.is-visible {
display: flex;
}
/* O texto assenta numa superfície própria, como o painel de um menu do header
assenta sobre o mesmo #backdrop. Não é decoração: medido sobre o cartão de
login (claro, escurecido a 45% pelo backdrop), o branco a 16px dava 3,36:1 —
abaixo dos 4,5:1 que a WCAG AA exige a texto normal. Com esta superfície sobe
para lá dos 14:1, e o aviso deixa de depender do que está por baixo dele. */
/* O logo por cima do texto: quem é apanhado por este aviso está a ser posto
fora de uma aplicação, e um ecrã sem marca nenhuma parece uma avaria e não
uma decisão.
Vem por `mask` e não por ![]()
: o ficheiro traz `fill="currentColor"`, que num
![]()
não herda nada e resolve para PRETO — invisível sobre este fundo. A
máscara usa o SVG só como forma e pinta-a com `background-color`, pelo que o
logo fica branco sem ser preciso um segundo ficheiro. O aviso é montado em JS
(Api.js), que não pode embutir o SVG como a view do login faz. */
#mobile-message .message-text::before {
content: '';
display: block;
width: 132px;
height: 19px;
margin: 0 auto var(--space-4);
background-color: #ffffff;
-webkit-mask: url('../svg/logo-autocavado.svg') no-repeat center / contain;
mask: url('../svg/logo-autocavado.svg') no-repeat center / contain;
}
#mobile-message .message-text {
max-width: 28ch;
padding: var(--space-5) var(--space-6);
background-color: rgba(13, 13, 15, 0.82);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--radius);
text-align: center;
}
#mobile-message .message-text p {
margin: 0;
font-size: var(--text-xl);
font-weight: var(--weight-regular);
line-height: var(--line-normal);
/* Branco fixo e não um token: este aviso aparece antes de a aplicação (e o
tema) arrancarem, sobre um fundo que é sempre escuro. */
color: #ffffff;
text-wrap: balance;
}
/* -- Status badge (pill / chip) ------------------------------------- */
/* Solid-fill legacy badge. Novo código usa .status-badge + variante de cor. */
.status {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 3px var(--space-2);
font-size: var(--text-xs);
color: #ffffff;
background-color: var(--color-surface-alt);
white-space: nowrap;
}
.status .ph-icon,
.status .emoji {
margin: 0;
padding: 0;
}
/* -- Status colours — each colour sets its --pulse-color-rgb too ---- */
.status.red-status {
background-color: var(--color-red);
--pulse-color-rgb: 239, 68, 68;
}
.status.orange-status {
background-color: var(--color-orange);
--pulse-color-rgb: 249, 115, 22;
}
.status.yellow-status {
background-color: var(--color-yellow);
--pulse-color-rgb: 241, 194, 27;
}
.status.mustard-status {
background-color: var(--color-mustard);
--pulse-color-rgb: 161, 98, 7;
}
.status.blue-status {
background-color: var(--color-blue);
--pulse-color-rgb: 74, 144, 226;
}
.status.green-status {
background-color: var(--color-green);
--pulse-color-rgb: 22, 152, 76;
}
.status.purple-status {
background-color: var(--color-purple);
--pulse-color-rgb: 139, 92, 246;
}
.status.grey-status {
background-color: var(--color-grey);
--pulse-color-rgb: 51, 51, 51;
}
/* amber — Pending (warm attention, not urgent) */
.status.amber-status {
background-color: var(--color-orange);
--pulse-color-rgb: 217, 119, 6;
}
/* cyan — In progress (active work) */
.status.cyan-status {
background-color: var(--color-cyan);
--pulse-color-rgb: 8, 145, 178;
}
/* violet — Waiting on third party */
.status.violet-status {
background-color: var(--color-indigo);
--pulse-color-rgb: 99, 102, 241;
}
/* slate — Cancelled (cool grey) */
.status.slate-status {
background-color: var(--color-slate);
--pulse-color-rgb: 71, 85, 105;
}
/* teal — Waiting on client */
.status.teal-status {
background-color: var(--color-teal);
--pulse-color-rgb: 15, 118, 110;
}
/* -- Status dot (circle indicator) ---------------------------------- */
.status.dot {
position: relative;
display: inline-block;
min-width: 12px;
width: 12px;
height: 12px;
margin: 0;
padding: 0;
border-radius: 50%;
vertical-align: middle;
}
/* -- Single pulse ---------------------------------------------------- */
.status.dot.pulse::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
animation: pulse-single 2s infinite;
}
/* -- Double pulse (radar overlap) ------------------------------------ */
.status.dot.double-pulse::before,
.status.dot.double-pulse::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
animation: pulse-single 2s infinite;
}
.status.dot.double-pulse::after {
animation-delay: 0.3s;
}
/* -- Pulse keyframes — single animation works for all colours via --pulse-color-rgb */
@keyframes pulse-single {
0% { box-shadow: 0 0 0 0 rgba(var(--pulse-color-rgb), 0.7); }
70% { box-shadow: 0 0 0 12px rgba(var(--pulse-color-rgb), 0); }
100% { box-shadow: 0 0 0 0 rgba(var(--pulse-color-rgb), 0); }
}
/* -- Page / component loading overlay -------------------------------- */
.loading-container {
display: none;
position: absolute;
inset: 0;
z-index: 100;
}
.loading-container.visible {
display: block;
}
/* Themes */
.loading-container.dark { background: rgba(0, 0, 0, 0.80); }
.loading-container.light { background: rgba(255, 255, 255, 0.80); }
.loading-container.visible.light { color: #000000; }
/* Auto: herda o tema da página (dark/light) via tokens — sem JS, dinâmico */
.loading-container.auto {
background: color-mix(in srgb, var(--color-bg, #0f1117) 80%, transparent);
color: var(--color-text, #ffffff);
}
/* Loading info card */
.loading-info-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-5);
border-radius: var(--radius);
z-index: 9999;
}
.loading-container.dark .loading-info-container { color: #ffffff; }
.loading-container.light .loading-info-container { color: #000000; }
.loading-container.auto .loading-info-container { color: var(--color-text); }
/* Semantic background colours for loading messages */
.loading-info-container.success-message { background: var(--color-green, #16a34a); }
.loading-info-container.error-message { background: var(--color-red, #ef4444); }
.loading-info-container.danger-message { background: var(--color-orange, #f97316); }
.loading-info-container.warning-message { background: var(--color-yellow); }
.loading-info-container.info-message { background: var(--color-blue); }
/* -- Loading spinner ----------------------------------------------------- */
#loading-spinner {
width: 40px;
height: 40px;
margin: 0 auto 12px auto;
border-radius: 50%;
/* Pista transparente: só o arco de topo (border-top-color) é visível, e é esse
que roda. A pista completa a 20% desenhava um anel estático permanente por
baixo do arco — lida como um círculo parado em vez de um indicador. */
border: 3px solid transparent;
border-top-color: currentColor;
animation: loading-spin 0.75s linear infinite;
}
/* Layout interno: spinner/ícone centrado em cima, texto em baixo */
.loading-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2, 8px);
padding: 10px 25px;
}
/* Ícone Phosphor renderizado acima do texto — fonte única em startAnimation() */
.loading-info-icon {
display: block;
font-size: 2.5rem;
line-height: 1;
}
/* Texto da mensagem — idêntico em todos os tipos (success, error, warning, normal) */
.loading-info p {
text-align: center;
line-height: var(--line-normal, 1.5);
font-size: var(--text-sm, 0.875rem);
font-weight: var(--weight-medium, 500);
margin: 0;
max-width: 280px;
}
.loading-container.dark #loading-spinner { color: #ffffff; }
.loading-container.light #loading-spinner { color: #000000; }
.loading-container.auto #loading-spinner { color: var(--color-text); }
@keyframes loading-spin {
to { transform: rotate(360deg); }
}
/**
* Pilot Badges — status badges, tags, pills, dot indicators.
* Cores: green, red, amber, orange, blue, purple, cyan, indigo, teal, neutral.
* Depends on: vars-colors.css, vars-dimensions.css
*/
/* ── Base badge (pill shape) ──────────────────────────── */
/* MOBILE-FIRST: o badge nasce compacto e cresce com o ecrã. Estas três medidas
viviam no `tables-responsive.css` — um ficheiro sobre tabelas a decidir o
tamanho de um componente de estado, e a ganhar-lhe só por carregar depois.
Agora estão onde o componente vive. */
.status-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px 6px;
border-radius: var(--radius-full);
font-size: 9px; /* intentional — badge em célula apertada; sobe nos degraus abaixo */
font-weight: var(--weight-semibold);
letter-spacing: .02em;
border: 1px solid transparent;
white-space: nowrap;
line-height: var(--line-normal);
}
/* md (≥641px) */
@media (min-width: 641px) {
.status-badge {
padding: 4px 8px;
font-size: var(--text-2xs);
}
}
/* xl (≥1025px) — a partir daqui há espaço para a medida cheia do componente. */
@media (min-width: 1025px) {
.status-badge {
padding: 2px var(--space-2);
font-size: var(--text-xs);
}
}
/* ── Badge colour variants ────────────────────────────── */
/* bg usa --color-*-subtle (color-mix token de vars-colors.css).
border-color usa color-mix para manter consistência sem rgba hardcoded. */
/* O TEXTO usa o tom de texto do tema (--color-*-text, tokens.css): a cor base
pinta o fundo tingido e a borda, mas escrita sobre o escuro o teal dava
3,4:1, o slate 2,5:1 e o mustard 3,8:1; sobre branco, o ciano 2,9:1 e o
amarelo 2,2:1. Medido a 2026-09-08. */
.status-badge-green { background: var(--color-green-subtle); color: var(--color-green-text); border-color: color-mix(in srgb, var(--color-green), transparent 78%); }
.status-badge-red { background: var(--color-red-subtle); color: var(--color-red-text); border-color: color-mix(in srgb, var(--color-red), transparent 78%); }
.status-badge-amber { background: var(--color-yellow-subtle); color: var(--color-yellow-text); border-color: color-mix(in srgb, var(--color-yellow), transparent 78%); }
.status-badge-orange { background: var(--color-orange-subtle); color: var(--color-orange-text); border-color: color-mix(in srgb, var(--color-orange), transparent 78%); }
.status-badge-blue { background: var(--color-blue-subtle); color: var(--color-blue-text); border-color: color-mix(in srgb, var(--color-blue), transparent 78%); }
.status-badge-purple { background: var(--color-purple-subtle); color: var(--color-purple-text); border-color: color-mix(in srgb, var(--color-purple), transparent 78%); }
.status-badge-cyan { background: var(--color-cyan-subtle); color: var(--color-cyan-text); border-color: color-mix(in srgb, var(--color-cyan), transparent 78%); }
.status-badge-indigo { background: var(--color-indigo-subtle); color: var(--color-indigo-text); border-color: color-mix(in srgb, var(--color-indigo), transparent 78%); }
.status-badge-teal { background: var(--color-teal-subtle); color: var(--color-teal-text); border-color: color-mix(in srgb, var(--color-teal), transparent 78%); }
.status-badge-mustard { background: var(--color-mustard-subtle);color: var(--color-mustard-text); border-color: color-mix(in srgb, var(--color-mustard), transparent 78%); }
.status-badge-neutral { background: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-border-strong); }
/* Variante de PONTO (2026-09-08): fundo neutro e só o ponto leva a cor. Para
colunas com muitos estados (os nove do suporte), onde nove fundos tingidos
viravam a tabela num semáforo. O markup é o mesmo, com `.is-dot` a mais. */
.status-badge.is-dot {
background: var(--color-surface-alt);
color: var(--color-text-secondary);
border-color: var(--color-border-strong);
}
.status-badge.is-dot::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-dot-color, var(--color-text-muted));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-dot-color, var(--color-text-muted)) 18%, transparent);
flex-shrink: 0;
}
.status-badge.is-dot.status-badge-green { --status-dot-color: var(--color-green); }
.status-badge.is-dot.status-badge-red { --status-dot-color: var(--color-red); }
.status-badge.is-dot.status-badge-amber { --status-dot-color: var(--color-yellow); }
.status-badge.is-dot.status-badge-orange { --status-dot-color: var(--color-orange); }
.status-badge.is-dot.status-badge-blue { --status-dot-color: var(--color-blue); }
.status-badge.is-dot.status-badge-purple { --status-dot-color: var(--color-purple); }
.status-badge.is-dot.status-badge-cyan { --status-dot-color: var(--color-cyan); }
.status-badge.is-dot.status-badge-indigo { --status-dot-color: var(--color-indigo); }
.status-badge.is-dot.status-badge-teal { --status-dot-color: var(--color-teal); }
.status-badge.is-dot.status-badge-mustard { --status-dot-color: var(--color-mustard); }
/* ── Dot indicator ────────────────────────────────────── */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.status-dot-green { background: var(--color-green); }
.status-dot-red { background: var(--color-red); }
.status-dot-amber { background: var(--color-yellow); }
.status-dot-orange { background: var(--color-orange); }
.status-dot-blue { background: var(--color-blue); }
.status-dot-purple { background: var(--color-purple); }
.status-dot-cyan { background: var(--color-cyan); }
/* Paridade com as variantes de .status-badge-*: faltavam estas quatro, e um
`.status-dot-indigo` sem regra desenhava um ponto transparente — o estado
ficava sem marcador nenhum na lista. */
.status-dot-indigo { background: var(--color-indigo); }
.status-dot-teal { background: var(--color-teal); }
.status-dot-mustard { background: var(--color-mustard); }
.status-dot-neutral { background: var(--color-text-muted); }
.status-dot-muted { background: var(--color-surface-hover); border: 1px solid var(--color-border); }
/* ── Tag (rectangular) ────────────────────────────────── */
.app-tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
background: var(--color-surface-alt);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
white-space: nowrap;
}
.app-tag-blue { background: var(--color-blue-subtle); border-color: color-mix(in srgb, var(--color-blue), transparent 78%); color: var(--color-blue); }
/* ── Badge system (design system) ────────────────────────────── */
/* Base + tamanhos */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-weight: var(--weight-medium);
white-space: nowrap;
border-radius: var(--radius-full);
border: 1px solid transparent;
}
.badge-sm { font-size: var(--text-2xs); padding: 1px 7px; letter-spacing: 0.02em; }
.badge-md { font-size: var(--text-xs); padding: 3px 9px; }
.badge-lg { font-size: var(--text-sm); padding: 4px 12px; }
@keyframes badge-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } }
/* Variantes de cor */
.badge-default { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
.badge-brand { background: var(--color-indigo-subtle); color: var(--color-indigo); border-color: color-mix(in srgb, var(--color-indigo), transparent 78%); }
.badge-success { background: var(--color-green-subtle); color: var(--color-green); border-color: color-mix(in srgb, var(--color-green), transparent 78%); }
.badge-error { background: var(--color-red-subtle); color: var(--color-red); border-color: color-mix(in srgb, var(--color-red), transparent 78%); }
.badge-warning { background: var(--color-orange-subtle); color: var(--color-orange); border-color: color-mix(in srgb, var(--color-orange), transparent 78%); }
.badge-info { background: var(--color-blue-subtle); color: var(--color-blue); border-color: color-mix(in srgb, var(--color-blue), transparent 78%); }
.badge-violet { background: var(--color-purple-subtle); color: var(--color-purple); border-color: color-mix(in srgb, var(--color-purple), transparent 78%); }
.badge-teal { background: var(--color-teal-subtle); color: var(--color-teal); border-color: color-mix(in srgb, var(--color-teal), transparent 78%); }
.badge-amber { background: var(--color-yellow-subtle); color: var(--color-yellow); border-color: color-mix(in srgb, var(--color-yellow), transparent 78%); }