@media (min-width:768px) {
  .app-sidebar-minified:not(.app-without-sidebar) .app-content {
    margin-left:auto;
  }
}

@media (max-width: 768px) {
  .mobile-ui .card-header h5 {
    font-size: 1.4rem !important;
  }

  .mobile-ui .form-control,
  .mobile-ui .form-select {
    font-size: 1.25rem;
    padding: 0.8rem 1rem;
  }

  .mobile-ui .btn {
    font-size: 1.15rem;
    padding: 0.8rem 1.2rem;
  }

  .mobile-ui .small {
    font-size: 1rem !important;
  }

  .mobile-ui .fw-bold {
    font-size: 1rem !important;
	}

}

  .card-compact .card-header{padding:.30rem .55rem;font-size:.8rem}
  .card-compact .card-body{padding:.5rem .55rem}
  .section-title{font-weight:600;margin:.55rem 0 .35rem;font-size:.8rem;border-bottom:1px solid #eee}

  .kv-inline{font-size:.75rem; line-height:1.5; margin-bottom:.3rem;}
  .kv-inline .badge{font-size:.6rem; font-weight:600; margin-right:.45rem;}
  .kv-miss{color:#dc3545; font-style:italic;}

  /* Card post-it compatta */
  .note-card {
    background-color:#fff9c4;
    border:1px solid #f0e68c;
    border-radius:10px;
    padding:.5rem .6rem;
  }
  .note-card + .note-card { margin-top:.65rem; }

  /* Tipografia compatta */
  .note-head { font-weight:700; font-size:.85rem; line-height:1.2; }
  .note-sub  { font-size:.8rem; color:#6c757d; }
  .note-body { font-size:.8rem; margin-top:.35rem; white-space:pre-wrap; font-style:italic; }

  /* Toolbar icone compatta e sempre su una riga */
  .note-actions {
    display:flex; align-items:center; gap:.25rem; flex-wrap:nowrap;
  }

	.btn-icon {
		--size: 32px;                 /* ⬅️ regola qui la dimensione del cerchio */
		width: var(--size);
		height: var(--size);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border-radius: 50%;
		border: 1px solid rgba(0,0,0,.15);
		background: #000;
		color: #fff;
	}
	.btn-icon i {
		font-size: 0.9rem;
	}
  .btn-icon:hover { filter:brightness(0.97); }

/* Non applicare uppercase ai placeholder */
#modalAnagraficaT3 ::placeholder {
  text-transform: none !important;
}

.clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.offcanvas-wide{ width: 480px; }
.note-item{ font-size:.95rem; }
.note-meta{ font-size:.75rem; opacity:.75; }


.timelineTicket {
  position: relative;
  padding-left: 1.2rem;
  margin-top: 0.5rem;
  border-left: 2px solid #dee2e6;
  max-height: 400px;       /* 🔹 Altezza max */
  overflow-y: auto;        /* 🔹 Scroll verticale */
}

.timelineTicket-item {
  position: relative;
  padding-left: 0.8rem;
  margin-bottom: 1rem;
}

.timelineTicket-item > span {
  position: absolute;
  left: -0.5rem;
  top: 0.3rem;
  width: 0.7rem;
  height: 0.7rem;
  background-color: #0dcaf0; 
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #dee2e6;
}

/* 🔹 Risposta Backoffice */
.timelineTicket-item.risposta-backoffice > span {
  background-color: #0d6efd; /* Blu */
}

.timelineTicket-item strong {
  font-size: 0.9rem;
}

.timelineTicket-item .badge {
  font-size: 0.7rem;
}

.timelineTicket-item .small.text-muted {
  font-size: 0.7rem;
}

.timelineTicket-item .badge.bg-light {
  font-size: 0.7rem;
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da;
}

.timelineTicket-item .fst-italic {
  font-size: 0.75rem;
  color: #6c757d;
  border-left: 2px solid #dee2e6;
  padding-left: 0.4rem;
  margin-top: 0.2rem;
}



/* Animazione Slide Down */
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter-from, .slide-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Link Password */
.password-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.password-link:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Gradiente più acceso per Accedi */
.box-accedi {
  background-image: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


/* Link Password dimenticata */
.password-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.password-link:hover {
  opacity: 1;
  text-decoration: underline;
}


/* Rende la tabella più compatta */
#excelDataTable {
  font-size: 12px;
  white-space: nowrap;
}

/* Riduce l'altezza del thead */
#excelDataTable thead th {
  padding-top: 4px;
  padding-bottom: 4px;
  vertical-align: middle;
}

/* Rende scrollabile orizzontalmente tutta la tabella in modale */
#excelDataTable_wrapper .table-responsive {
  max-height: 65vh;
  overflow-x: auto;
}

/* Riduce margini esterni */
#excelModal .modal-body {
  padding: 0.75rem;
}

/* Allinea meglio la ricerca e il "mostra n elementi" */
#excelDataTable_wrapper .dataTables_length select {
  height: 28px;
  font-size: 12px;
  padding: 0 4px;
}


.dropzone {
	background: #f3f9f9 !important
}

.modal .card {
	transition: transform 0.2s ease-in-out;
}

.modal .card:hover {
	transform: scale(1.05);
}

.card-body-mobile-narrow {
	padding-left: 0.75rem !important;
	padding-right: 0.75rem !important;
}
@media (min-width: 768px) {
	.card-body-mobile-narrow {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}
}

.bg-blu {
	background-color: #02276c;
}

#excelModal table {
  width: 100% !important;
  font-size: 0.85rem;
}
#excelModal th, #excelModal td {
  padding: 0.3rem 0.5rem;
  white-space: normal;
  vertical-align: middle;
}
#excelModal th {
  background-color: #f5f5f5;
  position: sticky;
  top: 0;
  z-index: 2;
}

.sticky-nav {
	backdrop-filter: blur(10px);
	background-color: transparent;
}

#bsSpyContent {
  max-width: 1140px;  
  margin: 0 auto;  
	position: relative; 
	overflow-y: auto; 
	height: 100vh; 
	margin-top: 20px;
	padding-top: 20px;
	scrollbar-width: thin; /* Firefox */
  scrollbar-color: #000 #f1f1f1; /* Firefox */
}

/* Chrome, Edge, Safari */
#bsSpyContent::-webkit-scrollbar {
  width: 12px;
}

#bsSpyContent::-webkit-scrollbar-track {
  background: #f1f1f1;
}

#bsSpyContent::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #f1f1f1;
}

#bsSpyContent::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}


.fw-ts-hours {
	font-size: 0.70rem;
  font-weight: 900; 
}

.btn-round-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 1.2rem;
}

.app-content .app-content-padding {
  padding:10px 15px;
}

/* Icone DataTable default ordinate (discendente/ascendente) */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting_desc::after {
  color: white !important;
  opacity: 1 !important;
}

ul.dtr-details {
  width: 100% !important;
}

#scrollNav .nav-link.active {
  font-weight: bold;
  position: relative;
}
#scrollNav .nav-link.active::before {
  content: '|';
  color: #0d6efd;
  position: absolute;
  left: -10px;
}


#suggestions-list {
  z-index: 9999;
  max-height: 200px;
  overflow-y: auto;
  width: 100%;
}

.card-uniform {
  min-height: 360px; /* o qualsiasi valore adatto al contenuto */
}

.uniform-height {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px; /* uguale alla btn-sm Bootstrap */
  min-width: 100%;
  padding: 0.25rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

.oblique-badge {
  transform: skew(-10deg);
  display: inline-block;
  padding: 0.5em 1em;
}
.oblique-badge span {
  display: inline-block;
  transform: skew(10deg); /* per compensare il testo */
}

.ribbon-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 85px;
  height: 85px;
  z-index: 10;
}

.ribbon {
  position: absolute;
  top: 14px;
  left: -55px; /* <-- più negativo per centrare meglio */
  width: 160px;
  transform: rotate(-45deg);
  background-color: #dc3545;
  color: white;
  text-align: center;
  font-size: 0.60rem;
  font-weight: 600;
  padding: 5px 0;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.pulsante-apri-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 0.9rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease-in-out;
}

.pulsante-apri-icon:hover:not(.disabled) {
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.pulsante-apri-icon:active:not(.disabled) {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}


/* Variante modale extra-large */
.modal-xxl {
  max-width: 85% !important; /* quasi full width */
}

/* Timeline scrollabile nella modale ticket */
.modal .timeline {
  max-height: 300px;   /* Altezza massima visibile */
  overflow-y: auto;    /* Abilita scroll verticale */
  padding-right: 10px; /* Spazio per evitare che la scrollbar copra il testo */
}

/* Migliora la visualizzazione della scrollbar */
.modal .timeline::-webkit-scrollbar {
  width: 6px;
}
.modal .timeline::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 3px;
}

/* Badge nella timeline: permetti il testo multilinea */
.timelineTicket .badge {
  white-space: normal !important; /* consente a capo */
  line-height: 1.2;
  max-width: 100%; /* evita che esca dal container */
  word-break: break-word; /* forza a capo parole lunghe */
}


.input-group.has-validation .btn-outline-secondary {
  height: 38px; /* Altezza standard di un input di Bootstrap */
  align-self: center;
}

html, body {
    overflow-x: hidden; /* Nasconde la barra di scorrimento orizzontale */
    margin: 0;
    padding: 0;
    width: 100%;
}

.cookie-banner {
    width: 100%;
    z-index: 1050;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
}

.border-dashed {
  border: 2px dashed #ccc !important;
  border-radius: 8px;
}

.dropzone-like {
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.dropzone-like:hover {
  background-color: #f8f9fa;
}


.card img {
  max-width: 100%;
  height: auto;
}

.card-title {
  font-size: 14px;
  font-weight: bold;
}

.text-danger {
  color: #dc3545 !important;
}


/* Altezza coerente per badge */
.badge-organizzazione {
	font-size: 0.75rem;
	padding: 0.25rem 0.5rem;
	line-height: 1.2;
	height: 32px;
	display: flex;
	align-items: center;
	border-radius: 0.25rem;
}


.ticket-buttons-container {
  position: fixed;
  top: 40%; /* << Cambiato da 50% a 40% per alzarlo */
  right: 0.5rem;
  transform: translateY(-50%);
  z-index: 1055;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline {
			display: flex;
			flex-direction: column;
			gap: 2rem;
			position: relative;
			padding-left: 0;
			border-left: 4px solid #dee2e6;
			margin-left: 1.5rem;
		}

		.timeline .timeline-time .time {
			display:block;
			font-weight:600;
			line-height:24px;
			font-size:1.0rem;
			color:rgba(var(--bs-component-color-rgb),.85)
		}

		.timeline-item {
			display: flex;
			align-items: flex-start;
			gap: 1rem;
			position: relative;
		}

		.timeline-time {
			width: 200px;
			flex-shrink: 0;
			text-align: right;
			font-size: 0.95rem;
			color: #444;
		}

		.timeline-time .date,
		.timeline-time .time {
			display: block;
			font-weight: 600;
			font-size: 1rem;
			color: #333;
			line-height: 1.4;
		}

		.timeline-icon {
			width: 16px;
			height: 16px;
			position: relative;
			top: 6px;
		}

		.timeline-content {
			background: #fff;
			border-radius: 6px;
			padding: 1rem;
			box-shadow: 0 0 0 1px #e0e0e0;
			flex-grow: 1;
		}

		.timeline-content .form-check-label {
			font-weight: 600;
			font-size: 1rem;
			color: #333;
		}

		.timeline-content p {
			font-size: 0.9rem;
			margin-top: 0.25rem;
			color: #555;
			text-align: justify;
		}

		button.active {
			background-color: #0d6efd;
			color: white;
			border-color: #0d6efd;
		}

		@media (max-width: 768px) {
			.timeline {
				border-left: none;
				padding-left: 0;
				margin-left: 0;
			}
		 .timeline .timeline-content {
				margin-top:150px;
				margin-left:0
			}		
			.timeline-item {
				flex-direction: column;
				padding-left: 0;
			}
			.timeline-time {
				display: block;
				width: 100%;
				text-align: left;
				margin-bottom: 0.5rem;
				font-size: 0.95rem;
				color: #333;
			}
			.timeline-content {
				width: 100%;
			}
		}
		
  .timeline-content button {
    transition: all 0.2s ease-in-out;
  }
  .timeline-content button.btn-success:hover {
    background-color: #198754;
    border-color: #198754;
  }	
/* Select2 compatta con icona integrata */
.select2-container--default .select2-selection--single {
	background-color: #fff;
	border: 1px solid #0d6efd;
	border-radius: 0.25rem;
	height: 32px;
	font-size: 0.75rem;
	padding-left: 1.8rem;
	display: flex;
	align-items: center;
	position: relative;
}

.select2-container--default .select2-selection--single::before {
	content: "\f002"; /* fa-search */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #0d6efd;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #212529;
	font-size: 0.75rem;
	line-height: 1.2;
	padding-left: 0;
}

.select2-container.select-organizzazione-custom {
	margin-right: 1rem; /* oppure 8px, 12px, ecc. */
}


/* Font più piccolo nei risultati dropdown */
.select2-container--bootstrap-5 .select2-results__option {
	font-size: 0.75rem !important;
	line-height: 1.4 !important;
}

/* Font più piccolo nell’input di ricerca */
.select2-container--bootstrap-5 .select2-search__field {
	font-size: 0.75rem !important;
}

.input-group > .select2-container--bootstrap-5 {
	flex: 1 1 auto; /* per farla espandere */
}

.input-group > .select2-container--bootstrap-5 .select2-selection {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.select2-container--bootstrap-5 .select2-selection {
	height: calc(2.5rem + 2px) !important;
	line-height: 2.5rem !important;
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem !important;
}

.input-group > .btn {
	height: calc(2.5rem + 2px);
	padding: 0 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* 🔹 Rimuove il bordo evidenziato sulla select "principale" */
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
	box-shadow: none !important;
	border-color: #ced4da !important;
}

/* 🔹 Rimuove il bordo evidenziato dal campo input interno */
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
	box-shadow: none !important;
	border-color: #ced4da !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
	font-size: 0.75rem;
}

.input-group.input-group-sm > .select2-container--bootstrap-5 {
	flex: 1 1 auto;
}

.input-group.input-group-sm > .select2-container--bootstrap-5 .select2-selection {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group.input-group-sm > .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	font-size: 0.875rem;
	height: calc(1.8125rem + 2px);
	padding: 0.25rem 0.5rem;
}

.select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option {
  color:var(--bs-component-color);
  font-weight: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px
}
.result-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	
	& .result-item {
		background: var(--#{$prefix}component-bg);
		overflow: hidden;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		border-radius: $border-radius-lg;
		
		@include clearfix();
		@include media-breakpoint-down(xl) {
			padding-top: rem(160px);
		}
		@include media-breakpoint-down(md) {
			display: block;
		}
		
		& + .result-item {
			margin-top: $spacer * .5;
		}
		& .result-image {
			width: rem(240px);
			padding: 0;
			overflow: hidden;
			background: $dark;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			
			@include media-breakpoint-down(xl) {
				width: auto;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: rem(160px);
			}
			
			& a {
				display: block;
			}
			&:hover,
			&:focus {
				opacity: 0.8;
			}
		}
		& .result-info {
			padding: $spacer * 1.25;
			position: relative;
			flex: 1;
			
			& .title {
				margin: 0 0 $spacer * .25;
				font-size: $h4-font-size;
				line-height: $headings-line-height;
			
				& a {
					color: var(--#{$prefix}component-color);
					text-decoration: none;
				}
			}
			& .location {
				color: rgba(var(--#{$prefix}component-color-rgb), .5);
				margin-bottom: $spacer * .5;
			}
			& .desc {
				margin-bottom: $spacer * 2;
			}
			& .btn-row {
				display: flex;
				flex-wrap: wrap;
			
				& a {
					color: var(--#{$prefix}component-color);
					background: rgba(var(--#{$prefix}component-color-rgb), .15);
					font-size: $font-size-lg;
					padding: $spacer * .333 $spacer * .5;
					border-radius: $border-radius;
				
					& + a {
						@if $enable-rtl {
							margin-right: $spacer * .333;
						} @else {
							margin-left: $spacer * .333;
						}
					}
					&:hover,
					&:focus {
						background: rgba(var(--#{$prefix}component-color-rgb), .3);
					}
				}
			}
		}
		& .result-price {
			width: rem(240px);
			font-size: rem(28px);
			text-align: center;
			background: var(--#{$prefix}light);
			color: var(--#{$prefix}component-color);
			padding: $spacer * 1.25;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			@include media-breakpoint-down(lg) {
				width: rem(180px);
			}
			@include media-breakpoint-down(md) {
				width: auto;
				padding: $spacer;
			}
			
			& small {
				display: block;
				font-size: $font-size-sm;
				font-weight: $font-weight-bold;
				color: rgba(var(--#{$prefix}component-color-rgb), .5);
			}
			& .btn {
				margin-top: $spacer * 2;
				
				@include media-breakpoint-down(xl) {
					margin-top: $spacer;
				}
			}
		}
	}
}

.icon-tab {
  transition: transform 0.25s ease, box-shadow 0.25s, background-color 0.3s;
}
.icon-tab:hover {
  transform: scale(1.15);
  background-color: #ffe066 !important; /* giallo chiaro, override se serve */
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}
 

.datatable-light thead {
  background-color: #2c81ba; 
  color: white;
}

.datatable-light thead th {
  font-size: 0.75rem;
  border-bottom: 2px solid #0bbbe3;
  vertical-align: middle;
	color: #fff
}

.datatable-light tbody td {
  vertical-align: middle;
  font-size: 0.75rem;
  padding: 0.65rem;
}

.datatable-light .btn {
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  line-height: 1;
}

.datatable-light .btn i {
  font-size: 0.9rem;
}

.datatable-light .btn-info {
  background-color: #2c81ba;
  border-color: #2c81ba;
  color: white;
}

.datatable-light .btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

/* Rounded icon buttons */
.datatable-light .btn.rounded-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Tooltip fix for small buttons */
.datatable-light [data-bs-toggle="tooltip"] {
  cursor: pointer;
}

.modal-overlay .modal-content {
  background-color: #f8f9fa; /* più chiaro del bianco puro */
  border: 2px solid #0d6efd;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  z-index: 1060;
}
.modal-backdrop.show {
  opacity: 0.3 !important;
}
.modal-overlay {
	z-index: 1085; /* maggiore della modale normale (default 1055) */
}

.modal-overlay .modal-dialog {
	z-index: 1090;
}

.modal-overlay .modal-content {
	border: 2px solid #0d6efd;
	box-shadow: 0 0 30px rgba(13, 110, 253, 0.6);
}

.modal-overlay .modal-header {
	background-color: #0d6efd !important;
	color: #fff;
}

/* Contesto sicuro */
.rapportini-wrapper .input-group-sm .btn,
.rapportini-wrapper input.form-control {
  height: 38px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Il gruppo input deve permettere overflow per il badge */
.rapportini-wrapper .input-group {
  position: relative;
  overflow: visible;
}

/* Badge ✔ posizionato elegantemente */
.rapportini-wrapper .intervallo-badge {
  top: -0.5rem;
  right: -0.5rem;
  font-size: 0.65rem;
  padding: 0.35em 0.45em;
  z-index: 10;
}

/* Evidenzia i weekend */
.rapportini-wrapper .bg-light.bg-weekend {
  background-color: #f8f9fa !important;
  border-left: 3px solid #ffc107;
}

/* Responsive fix (mobile) */
@media (max-width: 576px) {
  .rapportini-wrapper .intervallo-badge {
    top: -0.25rem;
    right: -0.25rem;
    transform: scale(1.2);
  }
}
.json-tree {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
}
.json-tree ul { list-style: none; margin: 0; padding-left: 1.1rem; }
.json-tree li { margin: .1rem 0; }
.json-tree .kv { display: flex; align-items: baseline; gap: .25rem; }
.json-tree .jt-caret { cursor: pointer; user-select: none; width: 1rem; text-align: center; display: inline-block; }
.json-tree .jt-caret::before { content: "▸"; }
.json-tree li.node.open > .kv > .jt-caret::before { content: "▾"; }

.json-tree li.node > ul { display: none; }
.json-tree li.node.open > ul { display: block; }

.json-tree .key { color: #0d6efd; }
.json-tree .brace, .json-tree .bracket { color: #6c757d; }
.json-tree .summary { color: #6c757d; font-style: italic; }

.json-tree .value-string { color: #198754; }
.json-tree .value-number { color: #d63384; }
.json-tree .value-bool   { color: #fd7e14; }
.json-tree .value-null   { color: #6c757d; }