/* CloudIFF — identidade visual IFFluminense / Campus Bom Jesus do Itabapoana.
 * Marca e paleta conforme materiais oficiais do IFFluminense.
 * A marca não é recolorida, deformada ou recomposta.
 */
:root {
  --iff-green: #2F9E41;
  --iff-green-dark: #1D4940;
  --iff-green-deep: #14312B;
  --iff-red: #CD191E;
  --iff-bg-soft: #F4F8F4;
  --iff-border: #DDE8DF;

  --tlp-main-color: var(--iff-green);
  --tlp-main-color-transparent-15: rgba(47, 158, 65, .85);
  --tlp-main-color-transparent-20: rgba(47, 158, 65, .80);
  --tlp-main-color-transparent-30: rgba(47, 158, 65, .70);
  --tlp-main-color-transparent-50: rgba(47, 158, 65, .50);
  --tlp-main-color-transparent-70: rgba(47, 158, 65, .30);
  --tlp-main-color-transparent-80: rgba(47, 158, 65, .20);
  --tlp-main-color-transparent-85: rgba(47, 158, 65, .15);
  --tlp-main-color-transparent-90: rgba(47, 158, 65, .10);
  --tlp-shadow-focus: 0 0 0 2px rgba(47, 158, 65, .35);
}

html,
body {
  font-family: "Open Sans", "Public Sans Variable", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Barra institucional */
header.full-width {
  background: #fff;
  border-bottom: 3px solid var(--iff-green);
  box-shadow: 0 4px 20px rgba(20, 49, 43, .08);
}

header .header-container {
  min-height: 64px;
}

/* Logo nativa customizada pelo Tuleap. */
#logo {
  width: 250px;
  min-width: 250px;
  height: 58px;
  margin-right: 18px;
  background: url("/images/organization_logo.png") left center / contain no-repeat;
}

/* Home */
body.homepage {
  background: linear-gradient(180deg, #ffffff 0%, var(--iff-bg-soft) 72%, #eef5ef 100%);
}

.homepage-content {
  position: relative;
}

.homepage-welcome-custom-logo {
  width: min(520px, 88vw);
  max-height: 150px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 28px;
}

.homepage-welcome-title {
  max-width: 760px;
  color: var(--iff-green-deep);
  font-weight: 700;
  letter-spacing: -.02em;
}

.homepage-welcome-title::after {
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin-top: 18px;
  border-radius: 999px;
  background: var(--iff-red);
}

.homepage-welcome-text {
  max-width: 760px;
  color: #314942;
  font-size: 16px;
  line-height: 1.65;
}

.homepage-statistics {
  gap: 18px;
}

.homepage-statistic {
  background: #fff;
  color: var(--iff-green-deep);
  border: 1px solid var(--iff-border);
  border-top: 4px solid var(--iff-green);
  box-shadow: 0 12px 30px rgba(20, 49, 43, .08);
}

.homepage-statistic:nth-child(2) {
  border-top-color: var(--iff-red);
}

.homepage-statistic-total,
.homepage-statistic-label {
  color: var(--iff-green-deep);
}

.homepage-statistic-growth {
  color: #557168;
}

.homepage-background-illustration {
  opacity: .22;
  filter: hue-rotate(70deg) saturate(.65);
}

/* Componentes gerais */
.tlp-button-primary,
.tlp-button-primary:visited {
  background: var(--iff-green);
  border-color: var(--iff-green);
}

.tlp-button-primary:hover,
.tlp-button-primary:focus {
  background: #268536;
  border-color: #268536;
}

.tlp-button-primary.tlp-button-outline {
  background: transparent;
  color: var(--iff-green);
}

.tlp-button-primary.tlp-button-outline:hover,
.tlp-button-primary.tlp-button-outline:focus {
  background: rgba(47, 158, 65, .08);
  color: #247b31;
}

a:not(.tlp-button-primary) {
  text-decoration-color: rgba(47, 158, 65, .35);
}

.tlp-pane,
.card,
.project-admin-background {
  border-color: var(--iff-border);
}

/* Navegação lateral/projeto: acento institucional sem comprometer estados semânticos. */
.sidebar-nav-item-active,
.project-sidebar-nav-item.active,
.tlp-tab-active {
  border-color: var(--iff-green) !important;
}

/* Dark mode: mantém a identidade sem forçar fundo claro. */
@media (prefers-color-scheme: dark) {
  body.homepage {
    background: linear-gradient(180deg, #0d1512 0%, #101b17 100%);
  }
  .homepage-welcome-title,
  .homepage-welcome-text {
    color: #e9f4eb;
  }
  .homepage-statistic {
    background: #15211d;
    border-color: #294338;
  }
  .homepage-statistic-total,
  .homepage-statistic-label {
    color: #e9f4eb;
  }
}

@media (max-width: 760px) {
  #logo {
    width: 190px;
    min-width: 190px;
    height: 50px;
  }
  .homepage-welcome-custom-logo {
    width: min(390px, 92vw);
    max-height: 118px;
  }
  .homepage-welcome-title {
    font-size: 30px;
  }
}