/* Reporting Do It On — Fase 6: "Do It On Design System" aplicado
   (https://claude.ai/design/p/019dd35d-a090-7886-93fb-1db8a94e1932).
   Cores e tipografia extraídas do ficheiro real colors_and_type.css desse
   projeto; alguns valores intermédios (escala neutra completa, sombras
   exatas) não estavam acessíveis a partir daqui e foram calculados por
   progressão a partir dos valores confirmados — ajustar se algum dia
   voltarmos a abrir o ficheiro fonte. */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Marca (extraída do logo, valores exatos confirmados) ---- */
  --pink-50:  #fce9f5;
  --pink-100: #f7c2e6;
  --pink-200: #f09ad5;
  --pink-300: #e66ebc;
  --pink-400: #d44aa6;
  --pink-500: #b03090; /* logo exato */
  --pink-600: #8f2275;
  --pink-700: #6e175a;
  --pink-800: #4e0e40;
  --pink-900: #2f0526;

  --cyan-50:  #e3f4fc;
  --cyan-100: #b8e2f7;
  --cyan-200: #85ccf0;
  --cyan-300: #4eb4e8;
  --cyan-400: #219edd;
  --cyan-500: #1090d0; /* logo exato */
  --cyan-600: #0c73a8;
  --cyan-700: #095680;
  --cyan-800: #063a58;
  --cyan-900: #031d2c;

  --mint-50:  #e6f9f2;
  --mint-100: #bdefdc;
  --mint-200: #8fe4c3;
  --mint-300: #5fd8aa;
  --mint-400: #3ecf98;
  --mint-500: #30c090; /* logo exato */
  --mint-600: #269973;
  --mint-700: #1d7357;
  --mint-800: #144c3a;
  --mint-900: #0a261d;

  /* Neutros — o passo 900 é o valor exato confirmado do Design System
     (navy-purple); os restantes passos são interpolados. */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7fa;
  --neutral-100: #eeeef3;
  --neutral-200: #dcdce6;
  --neutral-300: #b8b8cc;
  --neutral-400: #8f8fab;
  --neutral-500: #6b6b87;
  --neutral-600: #4f4f68;
  --neutral-700: #383850;
  --neutral-800: #232338;
  --neutral-900: #131426; /* confirmado no Design System */

  /* ---- Tokens semânticos ---- */
  --color-primary: var(--pink-500);
  --color-primary-hover: var(--pink-600);
  --color-secondary: var(--cyan-500);
  --color-accent: var(--mint-500);
  --color-ok: var(--mint-600);
  --color-error: #c0392b;
  --color-error-bg: #fdecea;
  --color-text: var(--neutral-900);
  --color-muted: var(--neutral-500);
  --color-border: var(--neutral-200);
  --color-surface: var(--neutral-0);
  --color-bg: var(--neutral-50);

  /* nomes legados mantidos de propósito: apontam para os novos tokens
     para que as regras abaixo herdem a marca nova sem reescrita a mais */
  --brand: var(--color-text);
  --accent: var(--color-primary);
  --bg: var(--color-bg);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --ok: var(--color-ok);
  --error: var(--color-error);

  /* ---- Espaçamento (grid base 4px, 4px a 96px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Raios ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;    /* inputs */
  --radius-xl: 16px;    /* cards / painéis */
  --radius-2xl: 24px;   /* modais */
  --radius-full: 999px; /* botões, badges (pill) */

  /* ---- Sombras (3 níveis + glow de marca) ---- */
  --shadow-sm: 0 1px 2px rgba(19, 20, 38, .06), 0 1px 1px rgba(19, 20, 38, .04);
  --shadow-md: 0 4px 12px rgba(19, 20, 38, .08), 0 2px 4px rgba(19, 20, 38, .06);
  --shadow-lg: 0 12px 32px rgba(19, 20, 38, .12), 0 4px 8px rgba(19, 20, 38, .08);
  --shadow-glow-primary: 0 0 0 4px rgba(176, 48, 144, .15);

  /* ---- Animação ---- */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

* { box-sizing: border-box; }

/* O atributo nativo [hidden] tem de ganhar às regras de display abaixo
   (ex. "form label { display: block }") — sem isto, um <label hidden>
   aparece na mesma porque a folha de estilo do autor sobrepõe-se à
   folha de estilo do user-agent, independentemente da especificidade. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Comfortaa', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

.icon { display: inline-block; vertical-align: middle; stroke: currentColor; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--neutral-900);
  color: #fff;
  padding: var(--space-4) var(--space-6);
}
.topbar .brand { font-weight: 700; font-size: 1.15rem; }
.topbar .brand span { color: var(--pink-300); }
.topbar nav a { color: #fff; text-decoration: none; margin-left: var(--space-5); opacity: .85; transition: opacity var(--duration-fast) var(--ease-standard); }
.topbar nav a:hover, .topbar nav a.active { opacity: 1; }

.container { max-width: 1160px; margin: 0 auto; padding: var(--space-8) var(--space-6); }

h1 { margin-top: 0; }
h1 span, h2 span { color: var(--accent); }

.subtitle { color: var(--muted); }

.login-box {
  max-width: 380px;
  margin: 10vh auto;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  text-align: center;
}
form label { display: block; margin-bottom: var(--space-4); text-align: left; font-size: .9rem; color: var(--muted); }
form input, form select, form textarea {
  width: 100%;
  padding: 9px 12px;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
form input:focus, form select:focus, form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-primary);
}
form textarea { resize: vertical; }
.checkbox-label { display: flex !important; align-items: center; gap: 6px; }
.checkbox-label input { width: auto !important; margin-top: 0 !important; }
button, .btn-danger {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: .95rem;
  font-family: inherit;
  font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
button:hover { opacity: .92; transform: scale(1.02); box-shadow: var(--shadow-sm); }
button:active { transform: scale(.97); }
.btn-danger { background: var(--error); margin-top: 6px; }
.btn-inline { padding: 2px 8px; font-size: .8rem; margin-top: 0; }
.pre-wrap { white-space: pre-wrap; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2) var(--space-4); align-items: end; background: var(--color-surface); padding: var(--space-5); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }

.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table th, .data-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.data-table th { background: var(--neutral-50); color: var(--muted); font-weight: 600; }

.badge { padding: 2px 10px; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; }
.badge-equipa { background: var(--cyan-50); color: var(--cyan-700); }
.badge-cliente { background: var(--pink-50); color: var(--pink-700); }
.badge-ok { background: var(--mint-50); color: var(--mint-700); }
.badge-off { background: var(--neutral-100); color: var(--muted); }

/* Acessos por cliente (users.html): fieldset a ocupar toda a largura da
   grid do formulário em que está inserido, sem o aspeto default do browser. */
fieldset.full { grid-column: 1 / -1; border: none; padding: 0; margin: 0; }
fieldset.full legend { font-size: .9rem; color: var(--muted); margin-bottom: 8px; padding: 0; }

.client-list { list-style: none; padding: 0; }
.client-list li { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); box-shadow: var(--shadow-sm); }

.empty-state { color: var(--muted); font-style: italic; }

.flash-list { margin-bottom: var(--space-5); }
.flash { padding: 10px 14px; border-radius: var(--radius-lg); margin-bottom: 8px; font-size: .9rem; }
.flash-error { background: var(--color-error-bg); color: var(--error); }
.flash-success { background: var(--mint-50); color: var(--ok); }

.footer { text-align: center; color: var(--muted); font-size: .8rem; padding: var(--space-6); }

details summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
details form { margin-top: 6px; display: flex; gap: 6px; }
details input { width: auto; flex: 1; }

/* Ficha de Cliente (Fase 2): uma secção por bloco dinâmico. */
.section-card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
.section-card h2 { margin-top: 0; font-size: 1.1rem; }
.section-card .data-table { margin-bottom: 12px; }

.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: .9rem; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }

/* Itens de âmbito aninhados dentro de um Serviço Contratado. */
.service-block { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
.service-block:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.service-block h3 { margin-bottom: 4px; font-size: 1rem; }

.masked-password { letter-spacing: 2px; color: var(--muted); }
.revealed-password { font-family: 'Courier New', monospace; background: var(--pink-50); color: var(--pink-700); padding: 2px 6px; border-radius: var(--radius-sm); }

/* Projetos e Atividades (Fase 3) */
.subtitle-inline { color: var(--muted); font-weight: 400; font-size: .7em; margin-left: 6px; }

.badge-estado-planeamento, .badge-estado-a_fazer { background: var(--neutral-100); color: var(--muted); }
.badge-estado-em_curso { background: var(--cyan-50); color: var(--cyan-700); }
.badge-estado-em_revisao { background: var(--pink-50); color: var(--pink-700); }
.badge-estado-concluido, .badge-estado-concluida { background: var(--mint-50); color: var(--mint-700); }
.badge-estado-pausado, .badge-estado-em_espera { background: var(--neutral-100); color: var(--muted); }
.badge-estado-cancelado, .badge-estado-cancelada { background: var(--color-error-bg); color: var(--error); }

.progress-bar { display: inline-block; width: 100px; height: 8px; background: var(--neutral-100); border-radius: var(--radius-full); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.progress-bar-fill { height: 100%; background: var(--ok); }

.filter-form { margin-bottom: 20px; }

.kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-items: start; }
.kanban-column { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.kanban-column h2 { font-size: .9rem; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }
.kanban-count { background: var(--neutral-100); color: var(--muted); border-radius: var(--radius-full); padding: 1px 8px; font-size: .75rem; }
.kanban-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; margin-bottom: 8px; font-size: .85rem; }
.kanban-card a { font-weight: 600; }
.kanban-card-meta { color: var(--muted); font-size: .78rem; margin-top: 4px; }
.kanban-card form { margin-top: 6px; display: flex; gap: 4px; }
.kanban-card select { width: auto; flex: 1; font-size: .78rem; padding: 4px 6px; }

.deadline-atrasada { color: var(--error); }

.scorecard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
.score-big { font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
.stars-row { display: flex; justify-content: space-between; font-size: .85rem; padding: 2px 0; border-bottom: 1px solid var(--border); }
.stars-count { color: var(--muted); }

/* Dashboard por Cliente e Relatórios (Fase 6) */
.dashboard-hero { display: flex; align-items: center; gap: var(--space-8); background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-6); margin-bottom: var(--space-6); flex-wrap: wrap; }
.dashboard-gauge-label { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.area-bar-row { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: .88rem; }
.area-bar-track { background: var(--neutral-100); border-radius: var(--radius-full); height: 10px; overflow: hidden; }
.area-bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary); transition: width var(--duration-slow) var(--ease-standard); }
.kpi-card { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.kpi-value { font-size: 1.8rem; font-weight: 700; }
.kpi-delta-up { color: var(--mint-700); font-size: .85rem; font-weight: 600; }
.kpi-delta-down { color: var(--error); font-size: .85rem; font-weight: 600; }
.kpi-label { color: var(--muted); font-size: .8rem; }

.report-doc { background: var(--color-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8); max-width: 800px; margin: 0 auto; }
.report-doc h1, .report-doc h2 { color: var(--color-text); }
.report-actions { display: flex; gap: var(--space-3); margin: var(--space-5) 0; }