/* ============================================================
   GDPR Mapper – style.css
   Design: corporate-clean, blu/azzurro, DM Sans
   ============================================================ */

:root {
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #678bff;
  --blue-900: #1e3a8a;

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --white: #ffffff;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Tab states */
  --tab-todo:      #bfdbfe;
  --tab-partial:   #3b82f6;
  --tab-done:      #1d4ed8;
  --tab-todo-text: #1e40af;
  --tab-partial-text: #fff;
  --tab-done-text: #fff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-900);
  min-height: 100vh;
  line-height: 1.6;
}

.slogan{
	font-weight:100; 
	font-size:70%; 
    padding-left: 40px;
    position: relative;
    top: -10px;
	}
/* ============================================================
   LOGIN PAGE
   ============================================================ */
body{
	  background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-600) 40%, var(--blue-400) 100%);
	
}
.page-login {

  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0rem;
}

.login-wrap {
	
  display: block;
  max-width:100%;
  width:420px;
  margin:0 auto;
}

.login-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  background: var(--blue-50);
  border-radius: 50%;
  margin-bottom: 1.2rem;
  color: var(--blue-600);
}

.login-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: .25rem;
}

.login-sub {
  font-size: .9rem;
  color: var(--blue-600);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.login-desc {
  font-size: .875rem;
  color: var(--gray-500);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

.login-form { text-align: left; }

.field-wrap {
  margin-bottom: 1rem;
}

.field-wrap label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-600);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.login-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--gray-900);
  background: var(--gray-50);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.login-input:focus {
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  background: var(--white);
}

.login-error {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .5rem .75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: #dc2626;
  font-size: .83rem;
  font-weight: 500;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  padding: .85rem 1.5rem;
  background: var(--blue-600);
  color: var(--white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  margin-top: 1rem;
}

.login-btn:hover {
  background: var(--blue-700);
  box-shadow: 0 4px 16px rgba(37,99,235,.35);
  transform: translateY(-1px);
}

.login-btn:active { transform: translateY(0); }

.login-footer {
  margin-top: 1.5rem;
  font-size: .78rem;
  color: var(--gray-400);
  line-height: 1.5;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.page-app { background: #eeeeee; }

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Footer ---- */
footer a,footer {
	xxxbackground:#ddddddee;
	color:#ddddddee
}
footer{
	position:fixed;
	text-align:center;
	bottom:0;
	width:100%;
	font-size:80%;
	min-height:15px;
	font-style:italic;
}
/* ---- Header ---- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 58px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 1rem;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue-700);
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.user-info {
  display: flex;
  flex-direction: column;
  text-align: right;
  line-height: 1.25;
}

.user-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-900);
}

.user-role {
  font-size: .75rem;
  color: var(--gray-400);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.btn-icon:hover {
  background: var(--gray-100);
  color: var(--blue-600);
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  background: var(--blue-600);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .83rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.btn-submit:hover { background: var(--blue-700); }

.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  color: var(--gray-400);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.btn-logout:hover {
  background: #fef2f2;
  color: #dc2626;
}

/* ---- Progress bar ---- */
.progress-bar-wrap {
  position: fixed;
  display:block;
  width:100%;
  top:58px;
  left:0px;
  height: 6px;
  background: var(--gray-100);
  overflow: visible;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-400), var(--blue-600));
  transition: width .4s ease;
  width: 0%;
}

.progress-label {
  position: absolute;
  right: .5rem;
  top: 80px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--gray-400);
  font-family: var(--font-mono);
}

/* ---- Tab navigation ---- */
.tab-nav {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-nav::-webkit-scrollbar { display: none; }

.tab-list {
  display: flex;
  list-style: none;
  gap: .25rem;
  padding: .5rem .75rem 0;
  min-width: max-content;
}

.tab-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem .65rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  position: relative;
  transition: background .15s, color .15s;
  user-select: none;
}

.tab-item {
  background: var(--tab-todo);
  color: var(--tab-todo-text);
}

.tab-item.partial {
  background: var(--tab-partial);
  color: var(--tab-partial-text);
}

.tab-item.done {
  background: var(--tab-done);
  color: var(--tab-done-text);
}

.tab-item.active {
  border-color: var(--gray-200);
  border-bottom-color: var(--white);
  box-shadow: 0 -2px 0 var(--blue-500) inset;
  z-index: 1;
}

.tab-item:not(.active):hover {
  filter: brightness(.96);
}

.tab-num {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  opacity: .7;
  min-width: 1em;
}

.tab-label {
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 700;
  background: rgba(0,0,0,.15);
  color: inherit;
  transition: background .2s;
}

.tab-item.done .tab-badge { background: rgba(255,255,255,.25); }

/* ---- Tab panels ---- */
.tab-panels {
  flex: 1;
  padding: 1.5rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-content-header {
  margin-bottom: 1.25rem;
}

.section-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
}

.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: var(--blue-600);
  color: var(--white);
  border-radius: 50%;
  font-size: .85rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ---- Question cards ---- */
.questions-list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.question-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}

.question-card:focus-within {
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1), var(--shadow-sm);
}

.question-card.answered {
  border-left: 3px solid var(--blue-500);
}

.q-header {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .5rem;
}

.q-index {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue-500);
  background: var(--blue-50);
  padding: .1rem .4rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.q-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue-700);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.q-text {
  font-size: .9rem;
  color: black;
  line-height: 1.65;
  margin-bottom: .85rem;
}

/* ---- Checkboxes ---- */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin-bottom: .85rem;
}

.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  padding: .35rem .65rem .35rem .4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  transition: background .15s, border-color .15s;
  user-select: none;
  font-size: .83rem;
  color: black;
}

.checkbox-item:hover {
  background: var(--blue-50);
  border-color: var(--blue-300);
}

.checkbox-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}

.cb-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 2px solid var(--gray-300);
  border-radius: 3px;
  background: var(--white);
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}

.checkbox-item input:checked + .cb-box {
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.checkbox-item input:checked + .cb-box::after {
  content: '';
  display: block;
  width: 8px; height: 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

.checkbox-item:has(input:checked) {
  background: var(--blue-50);
  border-color: var(--blue-400);
  color: var(--blue-800);
  font-weight: 500;
}

.cb-text { font-size: .83rem; }

/* ---- Textarea ---- */
.textarea-wrap {
  position: relative;
}

.q-textarea {
  width: 100%;
  min-height: 52px;
  padding: .6rem .8rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--gray-50);
  font-family: var(--font);
  font-size: .85rem;
  color: black;
  resize: vertical;
  transition: border-color .15s, background .15s;
  outline: none;
  line-height: 1.55;
}

.q-textarea:focus {
  border-color: var(--blue-400);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}

.q-textarea::placeholder { color: var(--gray-300); }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: var(--gray-900);
  color: var(--white);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  z-index: 9999;
  pointer-events: none;
  max-width: 320px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.success { background: #16a34a; }
.toast.error   { background: #dc2626; }

/* ============================================================
   PRINT – output compatto A4
   ============================================================ */
@media print {

  @page {
    size: A4 portrait;
    margin: 10mm 12mm 10mm 12mm;
  }

  body {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8pt !important;
    background: white !important;
    color: #111 !important;
  }

  /* Nascondi tutto ciò che non serve */
  .app-header,
  .progress-bar-wrap,
  .tab-nav,
  .toast,
  #import-file { display: none !important; }

  /* Mostra tutte le sezioni, non solo quella attiva */
  .tab-content { display: block !important; }

  .app-container { padding: 0 !important; }

  .tab-panels {
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Separatore tra sezioni */
  .tab-content + .tab-content {
    margin-top: 8pt !important;
    padding-top: 4pt !important;
    border-top: 1pt solid #888 !important;
  }

  /* Intestazione sezione */
  .tab-content-header {
    margin-bottom: 3pt !important;
    break-after: avoid !important;
  }

  .section-title {
    font-size: 9pt !important;
    font-weight: bold !important;
    color: #000 !important;
    gap: 4pt !important;
    margin-bottom: 2pt !important;
  }

  .section-num {
    width: 16pt !important;
    height: 16pt !important;
    font-size: 7pt !important;
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Lista domande: nessun gap */
  .questions-list { gap: 0 !important; }

  /* Card compatta con griglia a due colonne */
  .question-card {
    display: grid !important;
    grid-template-columns: 22pt 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 4pt !important;
    row-gap: 0 !important;
    padding: 3pt 2pt !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 0.4pt dotted #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    break-inside: avoid !important;
  }

  /* Bordo sinistro solo per le risposte date */
  .question-card.answered {
    border-left: 2pt solid #444 !important;
    padding-left: 4pt !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Numero + label: colonna sinistra */
  .q-header {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 1pt !important;
    gap: 2pt !important;
    margin: 0 !important;
  }

  .q-index {
    font-size: 7pt !important;
    font-weight: bold !important;
    color: #444 !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    line-height: 1 !important;
  }

  .q-label {
    font-size: 5.5pt !important;
    color: #555 !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
  }

  /* Testo domanda: colonna destra, riga 1 */
  .q-text {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 7.5pt !important;
    line-height: 1.3 !important;
    color: #111 !important;
    margin: 0 0 1pt !important;
  }

  /* Checkbox: colonna destra, riga 2 */
  .checkbox-group {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0pt 10pt !important;
    margin: 1pt 0 !important;
    padding: 0 !important;
  }

  .checkbox-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2pt !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 7pt !important;
    color: #222 !important;
    line-height: 1.2 !important;
  }

  /* Usa il checkbox nativo del browser per la stampa */
  .checkbox-item input[type="checkbox"] {
    position: static !important;
    opacity: 1 !important;
    width: 7pt !important;
    height: 7pt !important;
    margin: 0 !important;
    pointer-events: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Nasconde il cb-box custom, usa input nativo */
  .cb-box { display: none !important; }

  .cb-text { font-size: 7pt !important; }

  /* Textarea: colonna destra, riga 3 */
  .textarea-wrap {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin: 1pt 0 0 !important;
  }

  .q-textarea {
    font-size: 7pt !important;
    line-height: 1.3 !important;
    border: none !important;
    border-bottom: 0.5pt solid #bbb !important;
    padding: 0 !important;
    background: transparent !important;
    resize: none !important;
    width: 100% !important;
    min-height: 8pt !important;
    height: auto !important;
    overflow: visible !important;
    box-shadow: none !important;
    color: #111 !important;
  }

  /* Textarea vuota: linea più leggera */
  .q-textarea:placeholder-shown {
    border-bottom: 0.3pt dotted #ddd !important;
  }
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .user-info { display: none; }
  .app-header { padding: 0 .75rem; }
  .tab-panels { padding: 1rem .75rem; }
  .question-card { padding: 1rem; }
  .tab-label { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
}

.help{
	margin:20px;
	padding:20px;
	font-size:90%;
	width:100%;
	display:block;
	background-color:#9991;
	bottom:100px;
	
}

nav{
	width:100%;display:block;
	padding:5px 10px;
	xxxbackground-color:#ffffff;
	color:#ffffff; 
	font-weight:700;
	}
nav a{
	text-decoration:none;
	padding: 5px 10px;
		color:#ffffff; 
	border-radius:5px;
}
nav a:hover{
	background-color:#55557722;
	}

nav#mainmenu span {
	font-size:80%;
}

#navright {
	padding-top:3px;
	float:right;
	display:inline-block;
}