/* Fonts come from the Next root layout via the local Geist package. */

/* SmartCloud Painel — tema SmartCloud (claro por omissão; escuro em themes.css).
   O v1 (/dashboard, /admin) também carrega este CSS (ClientLayoutSwitch /
   AdminLayoutSwitch), por isso os tokens dividem-se em dois grupos:
   - nomes que o v1 NÃO usa (--bg-*, --fg-*, --line*, --ok…) ficam também em
     :root, porque componentes partilhados (WordPress, SmartDeploy) usam-nos
     fora do .sc-app;
   - nomes que o v1 TAMBÉM define (--accent, --info, --font-*) ficam só dentro
     do painel v4 — em :root sobrepunham-se aos do v1 e estragavam as cores de
     hover/estado e a fonte mono do v1. */
:root,
.sc-app {
  --bg-0: #f9f9f9;
  --bg-1: #ffffff;
  --bg-2: #f0f0f0;
  --bg-3: #e3e3e3;
  --bg-4: #c0c0c0;
  --line: rgba(116, 114, 114, 0.18);
  --line-2: rgba(116, 114, 114, 0.34);
  --line-3: rgba(116, 114, 114, 0.6);
  --fg-0: #3a3a3a;
  --fg-1: #424242;
  --fg-2: #5b5b5b;
  --fg-3: #737373;
  --accent-2: #9b1300;
  /* Cor do texto/ícone EM CIMA de superfícies de accent (botões primários, avatares). */
  --on-accent: #f0f0f0;
  --accent-dim: rgba(181, 26, 0, 0.1);
  --accent-dim-2: rgba(181, 26, 0, 0.18);
  --ok: #2d7b48;
  --ok-dim: rgba(45, 123, 72, 0.12);
  --warn: #ae6700;
  --warn-dim: rgba(231, 161, 60, 0.2);
  --err: #af3c3a;
  --err-dim: rgba(200, 122, 122, 0.18);
  --info-dim: rgba(56, 110, 153, 0.12);
  --magenta: #5d4037;
  --magenta-dim: #f3eac8;
  --tracking-normal: 0.5px;
}
.sc-app {
  --accent: #b51a00;
  --info: #386e99;
  /* Texto que usa a cor de marca (links, KPI accent, chips). */
  --accent-fg: var(--accent);
  --font-sans: var(--font-lato), Lato, ui-sans-serif, system-ui, sans-serif;
  --font-serif: var(--font-lora), Lora, ui-serif, serif;
  --font-mono: "Courier New", Courier, monospace;
  width: 100%;
  height: 100dvh;           /* console-style: chrome fixo, paineis internos scrollam */
  max-height: 100dvh;
  background: var(--bg-0);
  color: var(--fg-0);
  --nav-active-fg: var(--accent);
  --nav-active-bg: var(--accent-dim);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: var(--tracking-normal, 0);
  overflow: hidden;         /* impede page-scroll global; cada container interno faz auto */
  position: relative;
  display: flex;
  flex-direction: column;
  font-feature-settings: "cv11", "ss01", "tnum";
}
/* Em viewports muito curtos (< 600px alto) permitimos que o .sc-app cresça
   e a página possa fazer scroll — fallback para acessibilidade. */
@media (max-height: 600px) {
  .sc-app {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow: visible;
  }
}
.sc-app * { box-sizing: border-box; }
.sc-app button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.sc-app input, .sc-app select, .sc-app textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.muted { color: var(--fg-2); }
.dim { color: var(--fg-3); }

/* Scrollbar — sempre visível, com bom contraste em todos os temas.
   `-webkit-appearance: none` desliga o overlay-scrollbar do macOS — força a
   scrollbar a reservar espaço e a ser visível como em Linux/Windows. */
.sc-app ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}
.sc-app ::-webkit-scrollbar-track {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}
.sc-app ::-webkit-scrollbar-thumb {
  background: var(--fg-3);
  border: 3px solid var(--bg-2);
  border-radius: 8px;
  min-height: 44px;
  min-width: 44px;
}
.sc-app ::-webkit-scrollbar-thumb:hover { background: var(--fg-2); }
.sc-app ::-webkit-scrollbar-corner { background: var(--bg-2); }
.sc-app { scrollbar-color: var(--fg-3) var(--bg-2); }  /* Firefox */

/* No html/body (página fora do .sc-app — caso o demo renderize em modo natural) */
html, body { scrollbar-color: #58658a #0a1020; }
html::-webkit-scrollbar, body::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track {
  background: #0a1020;
  border-left: 1px solid rgba(120,145,200,0.22);
}
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
  background: #58658a;
  border: 3px solid #0a1020;
  border-radius: 8px;
  min-height: 44px;
}
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover {
  background: #7a87ac;
}

/* Tables: garantir scroll horizontal quando colunas excedem o container.
   `.card:has(table.tbl)` apanha todos os cards do app que contêm uma tabela. */
.sc-app .tbl-wrap, .sc-app .tbl-scroll {
  width: 100%;
  overflow: auto;
}
/* Força scrollbar horizontal SEMPRE visível em qualquer container que envolva
   directamente uma tabela `.tbl` — funciona com `.card`, `div` flex wrapper,
   ou qualquer outro pai. `scroll` em vez de `auto` ignora o overlay-scroll do
   macOS — assim o thumb aparece sempre que a tabela for mais larga que o pai. */
/* Container que envolve uma tabela tem scroll horizontal + bottom border
   sempre visível a indicar a track da scrollbar (o macOS Chrome esconde a
   scrollbar real em overlay-mode, esta border garante que se vê o trilho). */
.sc-app *:has(> table.tbl) {
  overflow-x: scroll !important;
  scrollbar-gutter: stable;
  border-bottom: 4px solid var(--bg-3);
}
.sc-app *:has(> table.tbl)::-webkit-scrollbar {
  -webkit-appearance: none !important;
  height: 12px !important;
  background: var(--bg-2) !important;
}
.sc-app *:has(> table.tbl)::-webkit-scrollbar-thumb {
  background: var(--fg-3) !important;
  border: 2px solid var(--bg-2) !important;
  border-radius: 6px !important;
  min-width: 60px;
}
.sc-app *:has(> table.tbl)::-webkit-scrollbar-thumb:hover {
  background: var(--fg-2) !important;
}
.sc-app table.tbl {
  min-width: 720px;
}
.sc-app .tbl-scroll, .sc-app .tbl-wrap {
  overflow-x: scroll;
  scrollbar-gutter: stable;
}

/* Status dot */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-dim); }
.dot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-dim); }
.dot.info { background: var(--info); box-shadow: 0 0 0 3px var(--info-dim); }
.dot.muted { background: var(--fg-3); }

/* Chip / pill */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-1);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.chip.ok    { background: var(--ok-dim);    color: var(--ok);    border-color: transparent; }
.chip.warn  { background: var(--warn-dim);  color: var(--warn);  border-color: transparent; }
.chip.err   { background: var(--err-dim);   color: var(--err);   border-color: transparent; }
.chip.info  { background: var(--info-dim);  color: var(--info);  border-color: transparent; }
.chip.accent{ background: var(--accent-dim);color: var(--accent-fg, var(--accent));border-color: transparent; }
.chip.mag   { background: var(--magenta-dim);color: var(--magenta);border-color: transparent; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  font-size: 12px;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-3); }
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--bg-2); }
.btn.danger { color: var(--err); border-color: rgba(248,113,113,0.3); }
.btn.danger:hover { background: var(--err-dim); border-color: var(--err); }
.btn.sm { padding: 3px 8px; font-size: 11px; }

/* Card — sobrepõe Tailwind globals (.text-card-foreground ≈ preto) */
.sc-app .card {
  color: var(--fg-0);
  background: var(--bg-1);
  border-color: var(--line);
}
.card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.card-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-head h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.card-body { padding: 14px; }

/* Table */
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th, .tbl td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl th {
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 1;
}
.tbl tr:hover td { background: var(--bg-2); }
.tbl tr.selected td { background: var(--accent-dim); }

/* ── Cliente 360 · tabela de serviços (moderna) ── */
.v3-svc-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-1);
  overflow: hidden;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--fg-0) 4%, transparent);
}
.v3-svc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.v3-svc-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-0);
}
.v3-svc-panel-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--fg-2);
}

.v3-data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v3-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.v3-data-table th,
.v3-data-table td {
  padding: 12px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.v3-data-table thead th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  background: var(--bg-0);
  white-space: nowrap;
}
.v3-data-table tbody tr {
  transition: background 0.12s ease;
}
.v3-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-1));
}
.v3-data-table tbody tr:last-child td {
  border-bottom: none;
}
.v3-data-table-num {
  text-align: right !important;
  white-space: nowrap;
}
.v3-data-table-name {
  min-width: 200px;
  max-width: 360px;
}

.v3-svc-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.v3-svc-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.v3-svc-icon--hosting {
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  color: var(--accent-fg, var(--accent));
}
.v3-svc-icon--email {
  background: color-mix(in srgb, var(--info) 14%, var(--bg-2));
  color: var(--info);
}
.v3-svc-icon--domain {
  background: color-mix(in srgb, var(--ok) 14%, var(--bg-2));
  color: var(--ok);
}
.v3-svc-icon--ssl {
  background: color-mix(in srgb, var(--magenta) 12%, var(--bg-2));
  color: var(--magenta);
}
.v3-svc-icon--vps {
  background: color-mix(in srgb, var(--warn) 14%, var(--bg-2));
  color: var(--warn);
}
.v3-svc-icon--default {
  background: var(--bg-2);
  color: var(--fg-2);
}
.v3-svc-name-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.v3-svc-name-primary {
  font-weight: 500;
  color: var(--fg-0);
  line-height: 1.35;
}
.v3-svc-name-sub {
  font-size: 11px;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-svc-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.v3-svc-type--hosting {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-fg, var(--accent));
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.v3-svc-type--email {
  background: color-mix(in srgb, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}
.v3-svc-type--domain {
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 22%, transparent);
}
.v3-svc-type--ssl {
  background: color-mix(in srgb, var(--magenta) 10%, transparent);
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 20%, transparent);
}
.v3-svc-type--vps {
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 22%, transparent);
}
.v3-svc-type--default {
  background: var(--bg-2);
  color: var(--fg-2);
  border-color: var(--line);
}

.v3-svc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}
.v3-svc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.v3-svc-status--ok { color: var(--ok); }
.v3-svc-status--ok .v3-svc-status-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.v3-svc-status--warn { color: var(--warn); }
.v3-svc-status--warn .v3-svc-status-dot { background: var(--warn); }
.v3-svc-status--info { color: var(--info); }
.v3-svc-status--info .v3-svc-status-dot { background: var(--info); }
.v3-svc-status--err { color: var(--err); }
.v3-svc-status--err .v3-svc-status-dot { background: var(--err); }
.v3-svc-status--default { color: var(--fg-2); }
.v3-svc-status--default .v3-svc-status-dot { background: var(--fg-3); }

.v3-svc-price {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-0);
}
.v3-svc-cycle {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  text-transform: lowercase;
}

.v3-data-table tfoot td {
  background: var(--bg-0);
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding: 14px 18px;
}
.v3-svc-foot-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
}
.v3-svc-foot-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-fg, var(--accent));
}

@media (max-width: 640px) {
  .v3-data-table th,
  .v3-data-table td {
    padding: 10px 12px;
  }
  .v3-svc-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .v3-svc-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Inputs */
.input {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
}
.input input { width: 100%; }
.input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

.v4-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.v4-toggle {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.v4-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg-1);
  transition: transform 0.15s;
}
.v4-toggle[data-on="1"] {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.v4-toggle[data-on="1"]::after {
  transform: translateX(18px);
  background: var(--accent);
}
.v4-toggle:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* Modal */
/* O véu fica preso ao ECRÃ (fixed), não à área da página: com a página
   rolada, um véu `absolute` ficava preso ao topo e o popup aparecia fora de
   vista. O padding dá margem ao popup em ecrãs pequenos. */
.modal-back {
  position: fixed; inset: 0;
  padding: 16px;
  background: rgba(5, 8, 18, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fadeIn .14s ease-out;
}
/* Nunca mais largo nem mais alto do que o ecrã: os 420 px mínimos saíam do
   ecrã num telemóvel, e sem altura máxima os botões do fundo ficavam fora
   de alcance. Quem usa `display: flex; flex-direction: column` deve dar
   `min-height: 0` ao corpo que rola. */
.modal {
  background: var(--bg-1);
  border: 1px solid var(--line-3);
  border-radius: 10px;
  min-width: min(420px, 100%);
  max-width: min(640px, 100%);
  max-height: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: pop .14s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Sparkline */
.spark { display: block; }

/* Generic flex utilities */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.between { justify-content: space-between; }

/* Bar */
.bar {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-3);
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.bar.warn > i { background: var(--warn); }
.bar.err > i { background: var(--err); }
.bar.ok > i { background: var(--ok); }

/* Section heading inside variant */
.sec-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-3);
  padding: 0 8px;
  margin: 14px 0 6px;
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ───────────────────────── Mobile responsive ─────────────────────────
   Em viewports < 900px (tablet vertical e telemóvel):
   - SubSidebar e ActivityRail viram drawer slide-in (escondidos por defeito).
   - TopBar esconde breadcrumb verbose e o search compacta.
   - Tabs ganham scroll horizontal.
   - AppShell aplica `.mobile-side-open` quando o hamburger é clicado.
*/
.sc-app .mobile-only { display: none; }

@media (max-width: 900px) {
  .sc-app .mobile-only { display: inline-flex; }
  .sc-app .desktop-only { display: none; }
  .sc-app .v3-tabbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .sc-app .v3-tabbar::-webkit-scrollbar { height: 4px; }
  .sc-app .v3-tab { flex: none; white-space: nowrap; }

  /* SubSidebar fica fixa fora do ecrã — slide-in quando .mobile-side-open */
  .sc-app aside.v3-sub-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    z-index: 80;
    transform: translateX(-100%);
    transition: transform .2s ease-out;
    box-shadow: var(--shadow-lg);
  }
  .sc-app.mobile-side-open aside.v3-sub-side { transform: translateX(0); }

  /* ActivityRail escondida no mobile */
  .sc-app aside.v3-act-rail { display: none; }

  /* TopBar: esconder breadcrumb e compactar search */
  .sc-app .topbar-breadcrumb { display: none; }
  .sc-app header .topbar-search-input {
    min-width: 44px !important;
    width: 44px;
    padding: 5px 8px !important;
  }
  .sc-app header .topbar-search-text,
  .sc-app header .topbar-search-kbd { display: none; }
}

/* Drawer + rail: em tablet esconde rail; em desktop largo mostra os dois */
@media (min-width: 901px) and (max-width: 1279px) {
  .sc-app.has-detail-drawer aside.v3-act-rail { display: none !important; }
}

@media (min-width: 1280px) {
  .sc-app.has-detail-drawer aside.v3-act-rail { display: flex !important; }
}

@media (max-width: 540px) {
  .sc-app .v3-tab { padding: 8px 10px; font-size: 11.5px; }
  .sc-app header { padding: 0 10px !important; gap: 6px !important; }
  /* Esconder também o tenant switcher em telemóvel — fica no Tweaks panel */
  .sc-app .topbar-tenant { display: none; }
}

/* Backdrop quando sub-sidebar aberto em mobile */
.sc-app .mobile-side-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 79;
  animation: v3fadeUp .15s ease-out;
}
.sc-app.mobile-side-open .mobile-side-backdrop { display: block; }

/* Portal cliente — polish (emil/layout): focus, hover, legibilidade */
.portal-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.portal-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.portal-input:focus-visible {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.portal-card:hover {
  border-color: var(--line-2, var(--line));
}
a[style*="var(--accent)"] {
  color: var(--accent-fg, var(--accent)) !important;
}

/* themes.css — temas do painel v4 (admin e portal do cliente).
   Um só tema, em duas variantes: SmartCloud Claro (base, definida em
   styles.css › .sc-app) e SmartCloud Escuro. O claro/escuro é o modo global
   do next-themes (o mesmo do v1): o escuro aplica-se com a classe
   .theme-smartcloud-escuro E com html.dark — assim as cores já estão certas
   no primeiro frame, antes de o React saber o modo.
   Os temas Angola estão arquivados em themes-arquivo/angola.css (não importado). */

/* ── SmartCloud · Claro (base — os tokens estão em styles.css › .sc-app) ─── */
.sc-app.theme-smartcloud-claro { /* já é o default — sem sobreposições */ }
.sc-app.theme-smartcloud-claro ::-webkit-scrollbar-thumb { background: rgba(116, 114, 114, 0.28); }
.sc-app.theme-smartcloud-claro ::-webkit-scrollbar-thumb:hover { background: rgba(116, 114, 114, 0.45); }

/* ── SmartCloud · Escuro (monocromático, como o .dark do tema) ───────────── */
/* Tokens com nomes que o v1 não usa: também em html.dark, para os
   componentes partilhados do v1 seguirem o modo escuro (ver styles.css). */
html.dark,
.sc-app.theme-smartcloud-escuro,
html.dark .sc-app {
  --bg-0: #2b2b2b;
  --bg-1: #333333;
  --bg-2: #3c3c3c;
  --bg-3: #454545;
  --bg-4: #4f4f4f;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);
  --fg-0: #dcdcdc;
  --fg-1: #c0c0c0;
  --fg-2: #a0a0a0;
  --fg-3: #8a8a8a;
  --accent-2: #c0c0c0;
  --on-accent: #2b2b2b;
  --accent-dim: rgba(176, 176, 176, 0.12);
  --accent-dim-2: rgba(176, 176, 176, 0.2);
  --ok: #6cc185;
  --ok-dim: rgba(108, 193, 133, 0.16);
  --warn: #e8b45e;
  --warn-dim: rgba(232, 180, 94, 0.16);
  --err: #d9afaf;
  --err-dim: rgba(217, 175, 175, 0.16);
  --info-dim: rgba(123, 178, 217, 0.16);
  --magenta: #d3c398;
  --magenta-dim: rgba(211, 195, 152, 0.14);
}
/* Nomes que o v1 também define: só dentro do painel v4. */
.sc-app.theme-smartcloud-escuro,
html.dark .sc-app {
  --accent: #b0b0b0;
  --info: #7bb2d9;
  --accent-fg: #cfcfcf;
  --font-mono: "Fira Code", "Courier New", Courier, monospace;
}
.sc-app.theme-smartcloud-escuro ::-webkit-scrollbar-thumb,
html.dark .sc-app ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }
.sc-app.theme-smartcloud-escuro ::-webkit-scrollbar-thumb:hover,
html.dark .sc-app ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }

/* ── Modern chrome refinements (used by v3) ──────────────────────────── */
.v3-app {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.18);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.22);
  --shadow-lg: 0 14px 40px rgba(0,0,0,0.35);
}
.v3-app.theme-smartcloud-claro,
.v3-app.theme-smartcloud-escuro {
  /* Sombras quase invisíveis, como no tema; a de sobreposição (menus,
     modais) fica mais marcada, senão perdia-se a separação do fundo. */
  --shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
  --shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
  --shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.07), 0 12px 32px -8px hsl(0 0% 0% / 0.18);
}
.v3-app .card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.v3-app .card:hover { border-color: var(--line-2); }
.v3-app .btn {
  border-radius: 8px;
  transition: background .14s, border-color .14s, transform .08s;
}
.v3-app .btn:active { transform: translateY(1px); }
.v3-app .btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: var(--on-accent);
}
.v3-app .input { border-radius: 8px; transition: border-color .14s, box-shadow .14s; }
.v3-app .chip { border-radius: 999px; padding: 3px 9px; }
.v3-app .modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.v3-app .tbl th { font-size: 10.5px; }
.v3-app .tbl tr:hover td { background: var(--bg-2); transition: background .1s; }

/* Pill-style segmented control */
.v3-pill {
  display: inline-flex;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 3px;
  border: 1px solid var(--line);
  gap: 1px;
}
.v3-pill > button {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--fg-2);
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.v3-pill > button.active {
  background: var(--bg-1);
  color: var(--fg-0);
  box-shadow: var(--shadow-sm);
}
.v3-app.theme-smartcloud-claro .v3-pill > button.active { background: var(--bg-1); }

/* Soft KPI card with subtle gradient accent stripe */
.v3-kpi {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.v3-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 60%);
  opacity: 0.5;
}

/* Active tab indicator (sliding) */
.v3-tabbar {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
  position: relative;
}
.v3-tab {
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--fg-2);
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color .14s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.v3-tab:hover { color: var(--fg-1); }
.v3-tab.active { color: var(--fg-0); font-weight: 500; }
.v3-tab.active::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* Glass overlay for modals & palettes */
.v3-app .modal-back { backdrop-filter: blur(8px); background: rgba(0,0,0,0.45); }
.v3-app.theme-smartcloud-claro .modal-back { background: rgba(58, 58, 58, 0.22); }

/* Hover lift for clickable rows / cards */
.v3-hover {
  transition: background .12s, border-color .12s, transform .12s;
  cursor: pointer;
}
.v3-hover:hover { background: var(--bg-2); }

/* Sidebar nav modern style */
.v3-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  margin: 1px 6px;
  font-size: 12.5px;
  color: var(--fg-1);
  cursor: pointer;
  border: none;
  background: transparent;
  width: calc(100% - 12px);
  text-align: left;
  transition: background .12s, color .12s;
}
.v3-side-item:hover { background: var(--bg-2); color: var(--fg-0); }
.v3-side-item.active {
  background: var(--nav-active-bg, var(--accent-dim));
  color: var(--nav-active-fg, var(--accent));
  font-weight: 500;
}
.v3-side-item.active > .v3-side-icon { color: var(--nav-active-fg, var(--accent)); }
.v3-side-icon { color: var(--fg-3); flex: none; display: inline-flex; }

/* Soft separator label */
.v3-sec-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  padding: 14px 16px 6px;
  font-weight: 500;
}

/* Animated entrance */
@keyframes v3fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.v3-fade-up { animation: v3fadeUp .2s ease-out; }

/* Dot-grid bg for hero / empty states */
.v3-grid-bg {
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Density modes ────────────────────────────────────────────────────── */
.sc-app.density-comfortable .tbl th,
.sc-app.density-comfortable .tbl td { padding: 12px 16px; font-size: 13px; }
.sc-app.density-comfortable .card-head { padding: 14px 18px; }
.sc-app.density-comfortable .card-body { padding: 18px; }
.sc-app.density-comfortable .btn { padding: 8px 13px; }
.sc-app.density-comfortable .btn.sm { padding: 5px 10px; }

.sc-app.density-compact .tbl th,
.sc-app.density-compact .tbl td { padding: 8px 12px; font-size: 12px; }

.sc-app.density-dense .tbl th,
.sc-app.density-dense .tbl td { padding: 4px 10px; font-size: 11px; }
.sc-app.density-dense .card-head { padding: 6px 12px; }
.sc-app.density-dense .card-body { padding: 10px; }
.sc-app.density-dense .btn { padding: 4px 9px; font-size: 11px; }
.sc-app.density-dense .btn.sm { padding: 2px 6px; font-size: 10px; }
.sc-app.density-dense .chip { padding: 1px 6px; }

/* No-animation mode */
.sc-app.no-anim *,
.sc-app.no-anim *::before,
.sc-app.no-anim *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ── v4 shell: topbar + page headers responsivos ───────────────────────── */
.v4-topbar {
  flex-wrap: wrap;
  height: auto !important;
  min-height: 60px;
  padding: 8px 12px !important;
  gap: 10px !important;
  row-gap: 8px;
}
.v4-topbar-search {
  flex: 1 1 180px;
  min-width: 0 !important;
  max-width: 100%;
}
@media (min-width: 900px) {
  .v4-topbar-search { max-width: 420px; }
}
.v4-topbar-grow { flex: 1 1 24px; min-width: 8px; }
.v4-topbar-user-text { display: block; }
.v4-topbar-search-hint { flex: 1; }
.v4-topbar-search-kbd { display: inline-flex; }
@media (max-width: 768px) {
  .v4-topbar-user-text { display: none; }
  .v4-topbar-search-hint { display: none; }
  .v4-topbar-search-kbd { display: none; }
}
.v4-breadcrumb-bar {
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  height: auto !important;
}
.v4-breadcrumb-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.v4-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.v4-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.v4-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  padding: 0 16px 12px;
}
.v4-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.v4-deploy-apps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.v4-deploy-app-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 148px;
  padding: 14px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.v4-deploy-app-card:hover {
  border-color: var(--line-2);
  background: var(--bg-2);
}
.v4-template-card {
  padding: 14px;
  cursor: pointer;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.v4-template-card:hover {
  border-color: var(--line-2);
  background: var(--bg-2);
}
@media (max-width: 900px) {
  .v3-act-rail { display: none !important; }
}

/* Modo claro / escuro — contraste legível em todo o chrome v4 */
.sc-app.theme-mode-light {
  color-scheme: light;
  color: var(--fg-0);
}
.sc-app.theme-mode-dark {
  color-scheme: dark;
  color: var(--fg-0);
}
.sc-app.theme-mode-light h1,
.sc-app.theme-mode-light h2,
.sc-app.theme-mode-light h3,
.sc-app.theme-mode-light .card-head h3 {
  color: var(--fg-0);
}
.sc-app.theme-mode-dark h1,
.sc-app.theme-mode-dark h2,
.sc-app.theme-mode-dark h3,
.sc-app.theme-mode-dark .card-head h3 {
  color: var(--fg-0);
}
.sc-app.theme-mode-light .input {
  background: var(--bg-1);
  color: var(--fg-0);
  border-color: var(--line-2);
}
.sc-app.theme-mode-dark .input {
  background: var(--bg-2);
  color: var(--fg-0);
  border-color: var(--line-2);
}
.sc-app.theme-mode-light .input input,
.sc-app.theme-mode-dark .input input,
.sc-app.theme-mode-light select.btn,
.sc-app.theme-mode-dark select.btn {
  color: var(--fg-0);
}
.sc-app.theme-mode-light .dim {
  color: var(--fg-3);
}
.sc-app.theme-mode-dark .dim {
  color: var(--fg-3);
}
.sc-app.theme-mode-light .chip:not(.ok):not(.warn):not(.err):not(.info):not(.accent):not(.mag) {
  color: var(--fg-1);
  background: var(--bg-2);
}
.sc-app.theme-mode-dark .chip:not(.ok):not(.warn):not(.err):not(.info):not(.accent):not(.mag) {
  color: var(--fg-1);
  background: var(--bg-2);
}

/* v4 layouts responsivos (Definições, Deploy, cards…) */
@media (max-width: 768px) {
  .v4-form-grid {
    grid-template-columns: 1fr !important;
  }
  .v4-card-grid {
    grid-template-columns: 1fr;
  }
  .v4-deploy-apps-grid {
    grid-template-columns: 1fr;
  }
  .v4-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .v4-page-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .v4-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px 12px;
  }
  .sc-app .card-body:has(.tbl),
  .sc-app .card-body .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sc-app .tbl {
    min-width: 520px;
  }
}
@media (max-width: 480px) {
  .v4-kpi-grid {
    grid-template-columns: 1fr;
  }
  .sc-app.density-dense .v4-page-header {
    padding: 10px 12px;
  }
}

/* ── v4 footer (StatusBar) responsivo ─────────────────────────────────── */
.v4-status-bar {
  border-top: 1px solid var(--line);
  background: var(--bg-0);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-height: 24px;
  height: auto;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  flex: none;
  color: var(--fg-0);
}
.v4-status-bar-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  flex: 1 1 200px;
  min-width: 0;
}
.v4-status-bar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  flex: 1 1 140px;
  min-width: 0;
}
.v4-status-item {
  white-space: nowrap;
}
.v4-status-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.v4-status-sep {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.55;
}
@media (max-width: 768px) {
  .v4-status-bar {
    padding: 8px 10px;
    gap: 8px;
  }
  .v4-status-bar-meta {
    flex: 1 1 100%;
    justify-content: flex-start;
    border-top: 1px dashed var(--line);
    padding-top: 6px;
    margin-top: 2px;
  }
  .v4-status-meta {
    white-space: normal;
    word-break: break-word;
    font-size: 10px;
  }
  .v4-status-hide-sm {
    display: none !important;
  }
}
@media (max-width: 540px) {
  .v4-status-bar-primary {
    flex: 1 1 100%;
    gap: 4px 8px;
  }
  .v4-status-sep {
    display: none;
  }
  .v4-status-hide-xs {
    display: none !important;
  }
  .v4-status-item {
    font-size: 10px;
  }
}
.sc-app.density-dense .v4-status-bar {
  padding: 4px 10px;
  min-height: 22px;
  font-size: 10px;
  gap: 4px 8px;
}
.sc-app.density-comfortable .v4-status-bar {
  padding: 8px 14px;
  min-height: 28px;
  font-size: 12px;
}