/*
  Palette and type sourced from Mobidea_Guidelines_2017.pdf (brand book):
  - Orange #EC602B, dark blue #2B313D, mid blue #4F5A70, light blue #7283A3,
    light gray #F1F2F6, green #45B822 (positive actions, per the "Platform"
    section of the guidelines).
  - Headings: Tungsten Semibold in the official guidelines — that font is
    paid/licensed (Hoefler&Co) and not available for web use here, so we
    substitute Oswald (free, Google Fonts), a condensed sans with a similar
    sporty/compact feel. Swap the font-family below if a Tungsten web
    license is obtained later.
  - Body text: Roboto, exactly as specified in the guidelines.
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  --bg: #f1f2f6;
  --panel: #ffffff;
  --border: #e1e4e8;
  --text: #2b313d;
  --muted: #7283a3;

  --brand-orange: #ec602b;
  --brand-orange-hover: #d1531f;
  --brand-dark: #2b313d;
  --brand-blue-mid: #4f5a70;
  --brand-blue-light: #7283a3;
  --brand-green: #45b822;
  --brand-green-hover: #379a1b;

  --accent: var(--brand-orange);
  --accent-hover: var(--brand-orange-hover);

  --col-new: var(--brand-blue-light);
  --col-review: var(--brand-orange);
  --col-dev: var(--brand-blue-mid);
  --col-live: var(--brand-green);

  --font-heading: 'Oswald', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing scale — every margin/padding in the site should be one of these
     values. Keeps rhythm consistent across pages and is the main fix for
     pages feeling like they scroll more than they need to. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type scale — shared across Board, Catalogue, Resources, How it works. */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 17px;
  --text-2xl: 19px;
}

* { box-sizing: border-box; }

/* Visible keyboard focus everywhere — required baseline, not optional polish. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Shared page container — replaces the slightly different ad-hoc wrappers
   each page used to define on its own (.catalogue-wrap, .res-wrap, .hiw-wrap). */
.page-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
}

.page-wrap.narrow {
  max-width: 760px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, .column-header, .status-badge {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--brand-dark);
  border-bottom: 3px solid var(--brand-orange);
}

header.topbar h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #fff;
}

nav.main-nav a {
  margin-left: 20px;
  color: #c3c9d6;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

nav.main-nav a.active,
nav.main-nav a:hover {
  color: #fff;
  border-bottom-color: var(--brand-orange);
}

/* Hero band — the one bold gesture on the Board. The funnel strip on the
   right isn't decoration: it's the same New → Under Review → In Development
   → Live pipeline used everywhere else on the site, just shown as live
   counts up front. That's the subject (a pipeline of ideas turning into
   shipped automations) doing the visual work, instead of a generic banner. */
.hero {
  background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-dark) 70%);
  color: #fff;
  padding: var(--space-6) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero-text h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 var(--space-2);
}

.hero-text p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.85);
  max-width: 420px;
  line-height: 1.5;
}

.btn-hero {
  background: #fff;
  color: var(--brand-dark);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-hero:hover { transform: translateY(-1px); }

.hero-funnel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hero-funnel .stage {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: var(--space-2) var(--space-3);
  min-width: 84px;
  text-align: center;
}

.hero-funnel .stage.stage-live {
  background: rgba(69, 184, 34, 0.25);
  border-color: rgba(69, 184, 34, 0.6);
}

.hero-funnel .stage .count {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
}

.hero-funnel .stage .label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
}

.hero-funnel .arrow {
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .hero { padding: var(--space-5); }
  .hero-funnel { width: 100%; justify-content: space-between; }
}

/* Compact hero variant for Catalogue/Resources — same gradient band and
   type treatment as the Board hero, but with a single live stat instead of
   the 4-stage funnel (which only makes sense for the Board's own pipeline). */
.hero.hero-compact { padding: var(--space-5); }
.hero.hero-compact .hero-text h2 { font-size: 26px; }
.hero.hero-compact .hero-text p { margin-bottom: 0; }

.hero-stat {
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: var(--space-3) var(--space-5);
}

.hero-stat .num {
  display: block;
  font-family: var(--font-heading);
  font-size: 34px;
  line-height: 1;
}

.hero-stat .label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
  margin-top: var(--space-1);
}

/* Shared card lift, used by both .card (Board) and .info-card (Catalogue/Resources)
   so hover feedback feels the same everywhere in the site. */
.info-card:hover {
  box-shadow: 0 6px 16px rgba(43, 49, 61, 0.1);
  transform: translateY(-2px);
}

/* Pill-style filters — same underlying <select>, styled to look like the
   colorful filter chips in the reference instead of a plain dropdown. */
.pill-select {
  border-radius: 999px !important;
  border: 2px solid var(--brand-blue-light) !important;
  font-weight: 600;
  transition: border-color 0.15s ease;
}

.pill-select:hover { border-color: var(--brand-orange) !important; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) var(--space-5);
}

/* Normaliza a aparência dos <select> para bater certo com os <input> —
   por defeito, cada sistema operativo desenha os selects de forma diferente
   dos campos de texto (altura, seta, padding); isto remove esse estilo nativo. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234f5a70' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.toolbar select {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background-color: var(--panel);
  font-size: 14px;
  height: 38px;
  color: var(--text);
}

.toolbar select:focus, .modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none;
  border-color: var(--brand-blue-mid);
  box-shadow: 0 0 0 3px rgba(79, 90, 112, 0.15);
}

/* Positive actions (Submit, Vote, Post comment) — green, per the brand's
   "Platform" guideline for one-move positive actions. */
.btn-primary {
  margin-left: auto;
  background: var(--brand-green);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-primary:hover { background: var(--brand-green-hover); }

.board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-6);
}

.column {
  background: var(--panel);
  border-radius: 8px;
  border: 1px solid var(--border);
  min-height: 60vh;
}

.column-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  border-radius: 8px 8px 0 0;
}

.column-header .count-badge {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.column[data-column="col-review"] .column-header { background: var(--col-review); }
.column[data-column="col-in-development"] .column-header { background: var(--col-dev); }

.column-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.column[data-column="col-review"] .card { border-left-color: var(--col-review); }
.column[data-column="col-in-development"] .card { border-left-color: var(--col-dev); }

.card .card-desc {
  color: var(--brand-dark);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card:hover {
  border-color: var(--brand-orange);
  border-left-color: var(--brand-orange);
  box-shadow: 0 6px 16px rgba(43, 49, 61, 0.1);
  transform: translateY(-2px);
}

.card h3 {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 6px;
}

.card .meta {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.card .stats,
.info-card .stats {
  display: flex;
  gap: 12px;
  color: var(--brand-blue-mid);
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.empty-hint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  padding: 24px 12px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43, 49, 61, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--panel);
  border-radius: 10px;
  border-top: 4px solid var(--brand-orange);
  width: 480px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px;
}

.modal h2 {
  margin-top: 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--brand-dark);
}

/* Detail modal: colored header band matches the status column the idea
   came from, so opening a card feels continuous with the board rather than
   like a separate, disconnected popup. */
.modal.modal-detail {
  padding: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.detail-header {
  padding: var(--space-5);
  color: #fff;
  flex: 0 0 auto;
}

.detail-header h2 {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 22px;
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
}

.detail-header .chip {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff;
}

.detail-header .status-badge {
  background: rgba(255, 255, 255, 0.25);
}

.detail-header.header-New { background: linear-gradient(135deg, var(--col-new), var(--brand-dark)); }
.detail-header.header-Under-Review { background: linear-gradient(135deg, var(--col-review), var(--brand-dark)); }
.detail-header.header-In-Development { background: linear-gradient(135deg, var(--col-dev), var(--brand-dark)); }
.detail-header.header-Live { background: linear-gradient(135deg, var(--col-live), var(--brand-dark)); }

.detail-body {
  padding: var(--space-5);
  overflow-y: auto;
}

.modal label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-blue-mid);
  margin: 16px 0 6px;
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--panel);
}

.modal textarea { height: auto; min-height: 70px; resize: vertical; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
}

/* Neutral actions (Cancel, Close, Filter, Clear) — outlined, dark text,
   per the brand's "Platform" guideline for neutral/holding actions. */
.btn-secondary {
  background: none;
  border: 1px solid var(--brand-blue-light);
  color: var(--brand-blue-mid);
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-secondary:hover {
  border-color: var(--brand-blue-mid);
  background: #f6f7fa;
}

@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; }
}

/* Idea detail modal */
.detail-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.detail-section:first-of-type {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

.detail-section h3 {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--brand-blue-mid);
  margin: 0 0 10px;
}

.status-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font-body);
  white-space: nowrap;
}

.chip-company {
  background: rgba(236, 96, 43, 0.1);
  color: var(--brand-orange-hover);
  border: 1px solid rgba(236, 96, 43, 0.3);
}

.chip-department {
  background: rgba(79, 90, 112, 0.1);
  color: var(--brand-blue-mid);
  border: 1px solid rgba(79, 90, 112, 0.3);
}

.chip-owner {
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Evident manager/team-report vs individual-AM-report distinction, shown on
   Board cards and Catalogue cards alike (driven off skill.department — see
   SCOPE_CHIP in each page's script). Deliberately bolder than the other
   chips since Tatiana specifically asked this to stand out, not blend in. */
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--brand-green);
  color: #fff;
  margin-bottom: 6px;
}

.status-badge.status-New { background: var(--col-new); }
.status-badge.status-Under-Review { background: var(--col-review); }
.status-badge.status-In-Development { background: var(--col-dev); }
.status-badge.status-Live { background: var(--col-live); }

/* Signature element of the site: a small pulsing dot on "Live" badges only.
   Everything else stays quiet — this is the one place motion signals "this
   is real, running, active right now", which fits an ad-tech/performance
   company better than decorating every badge equally. */
.status-badge.status-Live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-badge.status-Live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* Shared grouped-listing pattern (used by Catalogue and Resources): a
   heading with an orange underline, followed by a responsive card grid.
   Having one definition instead of two nearly-identical ones per page is
   what keeps the spacing consistent between them. */
.group-section {
  margin-bottom: var(--space-6);
}

.group-section h2 {
  font-size: var(--text-lg);
  color: var(--brand-dark);
  border-bottom: 2px solid var(--brand-orange);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

.group-subsection {
  margin-bottom: var(--space-4);
}

.group-subsection h3 {
  font-size: var(--text-xs);
  color: var(--brand-blue-mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-4);
}

.info-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue-mid);
  border-radius: 6px;
  padding: var(--space-4);
  font-size: var(--text-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.15s ease;
}

.info-card:hover { border-color: var(--brand-orange); }

.info-card .code {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 600;
}

.info-card h3, .info-card h4 {
  font-size: var(--text-md);
  margin: 0;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--brand-dark);
}

.info-card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.info-card .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.info-card a.card-link {
  align-self: flex-start;
  font-size: var(--text-sm);
  font-weight: 500;
  color: #fff;
  background: var(--brand-blue-mid);
  padding: 6px var(--space-3);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.info-card a.card-link:hover { background: var(--brand-dark); }

.comment-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.comment-item:last-child { border-bottom: none; }

.comment-item .meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.comment-item .body {
  font-size: 13px;
  line-height: 1.45;
}

/* Small bold headers above each field in the idea detail view (Problem,
   Time wasted, Expected impact) — same visual language as the form labels,
   so people scanning the detail modal immediately know what each line means. */
.field-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-blue-mid);
  margin: 0 0 4px;
}

#detail-problem {
  margin-top: 0;
  margin-bottom: 14px;
}