@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");

:root{
  --font-ui: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Titillium Web", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html, body { font-family: var(--font-ui); line-height: 1.45; }
h1,h2,h3,h4,.kpi,.metric { font-family: var(--font-head); letter-spacing: .2px; }
.table, .kpi, .metric { font-variant-numeric: tabular-nums; }


:root {
  /* Brand */
  --brand: #0b63e5;
  --brand-600: #0a58cc;
  --brand-100: #e9f2ff;

  /* UI tokens */
  --card-radius: 14px;
  --card-shadow: 0 10px 26px rgba(0,0,0,.06);
  --gap: 14px;
  --muted: #667085;

  /* Charts */
  --chart-size: 200px;
}

body.path-frontpage .layout-container main{
	
	/* background-image: url("../img/bgng-001.png");*/
background-repeat: no-repeat;
  background-size: 440px;
  background-position: right bottom;
  min-height: 900px;
	/*
  background-color: #F0F0F0;
  background-attachment: fixed;
	*/
}

/* Bottoni coerenti */
.button,
.button--primary { border-radius: 6px !important; }
.button--primary {
  background: var(--brand);
  border-color: var(--brand);
}
.button--primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}


.ngway-container, .ngwa-customer-page{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Layout dashboard */

.ngway-dashboard-charts,
.assessment-summary-charts,
.assessment-maturity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
}

/* Card generiche */
.ng-card {
  background: #fff;
  border: 1px solid #eef2ff;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 14px;
}

/* Canvas/Chart size 
.donut-chart,
.summary-chart-canvas {
  width: var(--chart-size) !important;
  height: var(--chart-size) !important;
  display: block;
  margin-inline: auto;
}
*/
/* Accordion Gin “cardizzato” */
.gin-accordion .gin-accordion-item {
  border: 1px solid #e8eefc;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
  overflow: hidden;
}
.gin-accordion .gin-accordion-item > summary {
	/*
  font-weight: 700;
  padding: 12px 14px;
  background: #f8fbff;
  color: #1f2937;
	*/
}
.gin-accordion .gin-accordion-item[open] > summary {
  background: var(--brand-100);
}
.gin-accordion .gin-accordion-item > *:not(summary) {
  padding: 12px 14px 14px;
}

/* Tabella dettagli leggibile */
.assessment-results-table {
  --row-stripe: #fafbff;
  border: 1px solid #e8eefc;
  border-radius: 10px;
  overflow: clip;
}
.assessment-results-table thead th {
  position: sticky;
  top: 0;
  background: #f5f8ff;
  z-index: 1;
}
.assessment-results-table tbody tr:nth-child(odd) { background: var(--row-stripe); }
.assessment-results-table td,
.assessment-results-table th { padding: 10px 12px; }

/* Badge (INFO/WARNING/CRITICAL) */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-weight: 700; font-size: 12px;
}
.badge--info     { background:#e5f6ff; color:#075985; }
.badge--warn     { background:#fff7ed; color:#9a3412; }
.badge--critical { background:#fef2f2; color:#991b1b; }

/* Micro-sprint “simpatico”: empty state */
.empty-state {
  text-align:center; padding: 28px; border:1px dashed #d7e3ff; border-radius:14px; color: var(--muted);
}
.empty-state .emoji { font-size: 28px; display:block; margin-bottom:8px; }

/* Popover filtro framework (già usato) */
.framework-filter-wrap { display:flex; justify-content:flex-end; position:relative; }
.ff-popover { position: fixed; z-index: 1000; min-width: 280px; background: #fff;
  border: 1px solid #d7e3ff; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  padding: 12px 12px 8px 12px; }
.ff-popover.is-hidden { display: none; }
.ff-title { font-weight:700; font-size:16px; margin: 4px 4px 10px; }
.ff-list { list-style:none; padding:0; margin:0; }
.ff-list li { margin: 8px 0; }
.ff-item { display:flex; align-items:center; gap:10px; text-decoration:none; border:2px solid var(--brand);
  padding:10px 12px; border-radius:6px; font-weight:600; }
.ff-item:hover { background:#f3f8ff; }
.ff-item.is-active { background: var(--brand-100); }
.ff-item::before { content:"B"; font-weight:800; font-size:12px; color:#fff; background: var(--brand);
  width:22px; height:22px; border-radius:6px; display:inline-grid; place-items:center; }
.ff-item::after { content:"›"; margin-left:auto; color: var(--brand); font-weight:800; }



/* === Card del controllo =================================================== */
.qn-control-card {
  background: #fff;
  border: 1px solid #e8eefc;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.qn-control-card + .qn-control-card { margin-top: 8px; }

.qn-control-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 8px;
}
.qn-control-subtle {
  color: #667085;
  font-size: 12px;
}

/* Divider puntinato tra i controlli */
.qn-divider {
  border: 0;
  border-top: 1px dashed #d7e3ff;
  margin: 16px 0 8px;
}

/* === Radio a "pillole" (Si / No / Parziale / N/A) ======================== */
/* struttura default Drupal: input + label nello stesso wrapper */
.form-radios .form-type--radio input.form-radio {
  /* position: absolute; */
  opacity: 0.0;
  pointer-events: none;
}

/*
.form-radios .form-type--radio input.form-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


.form-radios .form-type--radio input.form-radio:focus + label {
  outline: 2px solid var(--gin-color-primary, #0b63e5);
  outline-offset: 2px;
}
*/







.form-radios .form-type--radio label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 4px 6px 4px 0;
  border: 2px solid #cfe0ff;
  border-radius: 999px;
  background: #f8fbff;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
  margin-left: -24px;
}
.form-radios .form-type--radio input.form-radio:checked + label {
  border-color: #0b63e5;
  background: #e9f2ff;
  color: #0b63e5;
  transform: translateY(-1px);
}

/* colorazione rapida per valori noti (match basato sul testo del label) */
.form-radios .form-type--radio label::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: #94a3b8;
}
.form-radios .form-type--radio label:has(+ input[checked])::before { background: currentColor; } /* fallback non necessario */
.form-radios .form-type--radio label { color: #334155; }
.form-radios .form-type--radio label:contains("Si")     { border-color:#86efac; background:#f0fdf4; color:#166534; }
.form-radios .form-type--radio label:contains("Parziale"){ border-color:#fde68a; background:#fffbeb; color:#92400e; }
.form-radios .form-type--radio label:contains("No")     { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.form-radios .form-type--radio label:contains("N/A")    { border-color:#e2e8f0; background:#f8fafc; color:#475569; }

/* Nota: :contains() non è standard. Se vuoi mappare per ID, metti classi via JS (vedi sotto). */

/* === Textarea note più ariosa ============================================ */
.form-textarea {
  border-radius: 10px;
  border-color: #e5e7eb;
}
.form-item textarea.form-textarea::placeholder { color: #94a3b8; }

/* === File upload “nativo” ma più gradevole =============================== */
.form-managed-file .form-file {
  border: 2px dashed #d7e3ff;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fbff;
}
.form-managed-file .form-submit {
  border-radius: 10px;
}

/* === Barra di progresso sticky ========================================== */
.qn-progress {
  position: sticky;
  top: 64px; /* sotto la toolbar di Gin */
  z-index: 5;
  background: #f8fbff;
  border: 1px solid #e8eefc;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.qn-progress .bar {
  flex: 1;
  height: 8px;
  background: #eef2ff;
  border-radius: 999px;
  overflow: hidden;
}
.qn-progress .bar > span {
  display: block; height: 100%;
  background: #0b63e5;
  width: 0%;
  transition: width .2s ease;
}
.qn-progress .val { font-weight: 700; min-width: 48px; text-align: right; }


/* Grid 8/12 + 4/12 */
/* Layout desktop */
.ng-dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 8/12 + 4/12 */
  gap: 16px;
  align-items: start;
}

/* Tablet (e mobile): colonne una sotto l’altra */
@media (max-width: 1024px) {
  .ng-dashboard-grid {
    grid-template-columns: 1fr;   /* singola colonna */
  }
  /* se usi una sidebar sticky, disattivala su tablet */
  .ng-sticky-sidebar {
    position: static;
  }
  /* opzionale: distanzia la seconda "colonna" impilata */
  .ng-col-right {
    margin-top: 12px;
  }
}


/* Colonne */
.ng-col-left  { min-width: 0; }
.ng-col-right { min-width: 0; }


body.path-frontpage .dashboard-grid{
	 display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: start;
}

body.path-frontpage .dashboard-grid, body.path-frontpage .dashboard-item{
	min-width: 0;
}



/* Box/card sidebar (già espanso) */
.ng-card {
  background: #fff;
  border: 1px solid #e8eefc;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 14px;
}
.ng-box-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 700;
}

.dashboard-grid{
	margin-top: 0.9rem
}

/* Sidebar sticky (facoltativo) */
.ng-sticky-sidebar { position: sticky; top: 72px; }

/* Griglia dei grafici dentro il box */
.ngway-dashboard-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}


body.path-frontpage .ngway-dashboard-charts canvas {
	width: 45%;
}



/* wrapper <details> */
.gin-accordion-item-info-box {
  position: relative;
  overflow: hidden;           /* fa rispettare i bordi */
  border-radius: 14px;        /* opzionale: coerente con Gin */
}

/* <video> full-cover dietro al contenuto */
.gin-accordion-item-info-box .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* filter: brightness(.75); */   /* migliora il contrasto */
}

/* contenuto sopra al video */
.gin-accordion-item-info-box .content {
  position: relative;
  z-index: 1;
  color: #fff;                /* testo chiaro sul video */
}

#active-framework-title{
	font-size: 120%;
  padding: 1.3rem 2rem;
  font-weight: 600;
  border-radius: 4px;
  border: 0px solid #dcdcdc;
  margin-right: 2rem;
}



/* rispetto per utenti “riduci animazioni” */
@media (prefers-reduced-motion: reduce) {
  .gin-accordion-item-info-box .bg-video { display: none; }
}

.gin-accordion-item-info-box .content {
  color: #000;
  background-color: rgba(255,255,255,0.4);
  padding: 2em 2em 3em;
  border-radius: 0.5rem;
  width: 80%;
  height: auto;
  min-height: auto;
	opacity: 0.01;
}


body.path-user{
    background-image: url("../img/home05.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

body.path-user #block-gin-ngway-primary-local-tasks, body.path-user #block-gin-ngway-page-title, body.path-user header{
    display: none !important;
}

body.path-user #openid-connect-login-form{
    background-color: transparent !important;
    border: none !important;
    
}


#ngway-oidc-client-generic-link{
   background-image: url("../img/microsoft-authenticator-750.png") !important;
  background-repeat: no-repeat !important;
  background-position: 6px center !important;
  background-size: 88px !important;
  background-color: #fff !important;
  padding: 3rem 3rem 3rem 100px !important;
  font-size: 30px !important;
  box-shadow: 20px 12px 12px rgba(0,0,0,0.1) !important;
    position: fixed;
    bottom: 3rem;
}


#ngway-oidc-client-generic-link:hover{
     box-shadow: 10px 6px 12px rgba(0,0,0,0.1) !important;
}

#user-login-form{
    opacity: 0.05;
}

:where(*) .gin-sticky-form-actions--preprocessed ~ .layout-container form.gin--has-sticky-form-actions .gin-sticky-form-actions, :is(#extra-specificity-hack, [data-drupal-admin-styles]) .gin-sticky-form-actions--preprocessed ~ .layout-container form.gin--has-sticky-form-actions .gin-sticky-form-actions{
        /* position: absolute !important; */
    /* clip: rect(1px, 1px, 1px, 1px); */
    /* overflow: hidden; */
    /* height: 1px; */
    /* width: 1px; */
    /* word-wrap: normal; */
    position: relative !important;
        height: auto;
    width: auto;

    
}