:root {
    --admin-color: #8b1a1a;
    --config-color: #2c8730;
    --table-head-color: linear-gradient(to bottom, #8b1a1a, #a13f3f); 
    --table-head-config-color: linear-gradient(to bottom, #2c8730, #53af67);
    --navbar-user-bg: linear-gradient(135deg, var(--admin-color) 0%, #a13f3f 100%);
    --navbar-user-config-bg: linear-gradient(135deg, var(--config-color) 0%, #53af67 100%);
    --navbar-user-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --navbar-user-item-hover: rgba(255, 255, 255, 0.15);
    --navbar-user-item-active: rgba(255, 255, 255, 0.25);
    --navbar-user-text: #ffffff;
    --navbar-user-text-secondary: rgba(255, 255, 255, 0.85);
    --navbar-user-dropdown-bg: #ffffff;
    --navbar-user-dropdown-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --navbar-user-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.admin-color {
  background: var(--admin-color);
  color: #FFF;
}

.config-color {
  background: var(--config-color);
  color: #FFF;
}

/* Sidebar Styles */
.sidebar {
	background: var(--admin-color);
}

.sidebar .nav-title {
	color: #FFF;
}

.sidebar .sidebar-nav::-webkit-scrollbar-track {
	background-color: #6b1a1a;
	border: none;
}

.sidebar .sidebar-nav::-webkit-scrollbar-thumb {
	background-color: #7a1a1a;
}

.sidebar .sidebar-minimizer::before {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
}

/* Topbar Styles */
.topbar {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
    padding: 0.6rem 1rem;
	margin-bottom: 1.5rem;
	background-color: #8b1a1a;
	border: none;
	border-bottom: 1px solid #D6E0E4;
	align-items: center;
}

.topbar.config {
	background: #2c8730;
}

/* Navbar Styles */
.navbar-brand {
	display: inline-block;
	padding-top: 0.33594rem;
	padding-bottom: 0.33594rem;
	margin-right: 1rem;
	font-size: 1.09375rem;
	line-height: inherit;
	position: relative;
	z-index: 2;
}

.logo {
	transition: transform 0.2s ease;
	filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.4));
}

.logo:hover {
	transform: translateY(-2px);
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

.navbar {
	position: relative;
}

.navbar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	filter: blur(5px);
	z-index: 1;
}

.navbar-brand img {
	max-width: 117%;
	vertical-align: unset;
}

.navbar .sidebar .active.dropdown-toggle,
.sidebar .nav-link.active,
.sidebar .navbar .active.dropdown-toggle {
	background: #6e0f0f;
}

.navbar .sidebar .dropdown-toggle:hover,
.sidebar .nav-link:hover,
.sidebar .navbar .dropdown-toggle:hover {
	background: #a52a2a;
}

.nav-dropdown-items {
	background-color: rgba(154, 55, 55, 0.589);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.nav-dropdown-items .nav-item {
	margin: 5px 0;
}

.nav-dropdown-items .nav-link {
	color: #ffffff;
	text-decoration: none;
	padding: 8px 12px;
	display: block;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	transition: background-color 0.2s ease;
}

li.nav-item.nav-dropdown.open .nav-dropdown-items .nav-link:hover {
	background-color: rgb(149 22 22);
}

.navbar .sidebar .dropdown-toggle i,
.sidebar .nav-link i,
.sidebar .navbar .dropdown-toggle i {
	color: #FFF;
}

.navbar .sidebar .active.dropdown-toggle i,
.sidebar .nav-link.active i,
.sidebar .navbar .active.dropdown-toggle i {
	color: #FFF;
}

@media (min-width:992px) {
	.navbar .sidebar-minimized .sidebar .dropdown-toggle:hover,
	.sidebar-minimized .sidebar .nav-link:hover,
	.sidebar-minimized .sidebar .navbar .dropdown-toggle:hover {
		background: #9b1a1a;
	}

	.navbar .sidebar-minimized .sidebar .nav-item:hover>.dropdown-toggle,
	.sidebar-minimized .sidebar .nav-item:hover>.nav-link,
	.sidebar-minimized .sidebar .navbar .nav-item:hover>.dropdown-toggle {
		background: #9b1a1a;
	}

	.sidebar-minimized .sidebar .nav>.nav-dropdown:hover {
		background: #6e0f0f;
	}

	.sidebar-minimized .sidebar .nav>.nav-dropdown>.nav-dropdown-items {
		background: rgba(255, 255, 255, 0.2);
	}
}

.dashboard-card-body {
    padding: 20px;
}

.dashboard-card {
    border-radius: 12px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    background-color: #fff;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dashboard-card .project-status {
    flex-shrink: 0;
}

.dashboard-card .alert-section {
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
    flex-grow: 1;
}

.dashboard-card .alert {
    display: flex;
    align-items: baseline;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.dashboard-card .alert i {
    margin-right: 10px;
    font-size: 1.2rem;
}

.dashboard-card .alert .btn {
    margin-left: auto;
    font-size: 0.8rem;
}

.dashboard-card .badge {
    font-size: 0.75rem;
    padding: 5px 10px;
}

#toast-container .new-tirocinio-toast{
	background-color: #1a8b2d;
	opacity:0.95;
	color: #ffffff;
	padding: 60px;
	margin-top: 16%;
	border-left: 5px solid #6e0f0f;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	font-family: 'Arial', sans-serif;
	box-shadow: 0 6px 18px rgba(139, 26, 26, 0.5);
	transition: all 0.3s ease;
}

#toast-container .new-tirocinio-toast .toast-title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

#toast-container .toast-info {
	background-color: #2196F3;
	opacity:0.95;
	color: #ffffff;
	padding: 20px 20px 20px 50px;
	margin-top: 4%;
	border-left: 5px solid #005da8;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	font-family: 'Arial', sans-serif;
	box-shadow: 0 6px 18px rgba(33, 150, 243, 0.5);
	transition: all 0.3s ease;
	background-image: url("https://staging2apl.2power.it/__PUBLIC/notification.png") !important;
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 24px 24px;
}

#toast-container .toast-info .btn-warning {
	background-color: #005da8;
}

#toast-container .toast-info {
	animation: fadeIn 0.7s ease-out both;
}

@keyframes fadeIn {
	from {
	  opacity: 0;
	  transform: translateY(-20px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
}

#toast-container .toast-info:hover {
	box-shadow: 0 8px 22px rgba(33, 150, 243, 0.7);
	transform: scale(1.02);
}

/* Link Styles */
a {
	color: #8b1a1a;
}

/* Stile comune per tutti i pulsanti - Versione moderna da incontri */
button {
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

button[class^="trumbowyg"] {
    box-shadow: none;
}

.loading-button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.loading-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.loading-button .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite !important;
    display: none;
    margin-left: 8px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-button.loading .spinner {
    display: inline-block;
}

.loading-button.loading .text {
    display: none;
}

.loading-button.loading .loading-text {
    display: inline-block;
}

.loading-text {
    display: none;
    margin-right: 8px;
}

/* Stato Disabilitato */
button:disabled {
    background-color: #bdbdbd;
    color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Allineamento perfetto delle icone nei pulsanti */
.btn i {
    display: contents;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.btn i:first-child:not(:only-child) {
    margin-right: 8px;
}

.btn i:last-child:not(:only-child) {
    margin-left: 8px;
}

.btn i:not(:first-child):not(:last-child) {
    margin: 0 6px;
}

/* Pulsanti moderni globali - Da incontri_pratica.css con animazioni minimali */
.btn {
    border: 1px solid transparent;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem;
    height: 38px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    line-height: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.5s ease;
    z-index: 0;
}

.btn:hover::before {
    left: 100%;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    filter: brightness(1.05);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn > * {
    position: relative;
    z-index: 1;
}

/* Primary Button - Colori da incontri_pratica.css */
.btn-primary {
	background-color: #4e73df;
	color: #ffffff;
	border-color: #4e73df;
}

.btn-primary:hover {
	background-color: #2e59d9;
	border-color: #2e59d9;
}

.btn-primary:active {
	background-color: #1c44c7;
	transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
	background-color: #858796;
	color: #ffffff;
	border-color: #858796;
}

.btn-secondary:hover {
	background-color: #6c757d;
	border-color: #6c757d;
}

.btn-secondary:active {
	background-color: #565e64;
	transform: translateY(0);
}

/* Success Button */
.btn-success {
	background-color: #28a745;
	color: #ffffff;
	border-color: #28a745;
}

.btn-success:hover {
	background-color: #218838;
	border-color: #218838;
}

.btn-success:active {
	background-color: #1e7e34;
	transform: translateY(0);
}

/* Danger Button - Colori da incontri_pratica.css */
.btn-danger {
	background-color: #e74a3b;
	color: #ffffff;
	border-color: #e74a3b;
}

.btn-danger:hover {
	background-color: #c0392b;
	border-color: #c0392b;
}

.btn-danger:active {
	background-color: #a93226;
	transform: translateY(0);
}

/* Info Button - Colori da incontri_pratica.css */
.btn-info {
	background-color: #36b9cc;
	color: #ffffff;
	border-color: #36b9cc;
}

.btn-info:hover {
	background-color: #2c9faf;
	border-color: #2c9faf;
}

.btn-info:active {
	background-color: #258391;
	transform: translateY(0);
}

/* Warning Button - Colori da incontri_pratica.css */
.btn-warning {
	background-color: #f6c23e;
	color: #1a1a1a;
	border-color: #f6c23e;
}

.btn-warning:hover {
	background-color: #dda20a;
	border-color: #dda20a;
}

.btn-warning:active {
	background-color: #d39e00;
	transform: translateY(0);
}

.btn-sm{
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
}

/* Default Button */
.btn-default {
	background-color: #e0e0e0;
	color: #000000;
	border-color: #e0e0e0;
}

.btn-default:hover {
	background-color: #d4d4d4;
	border-color: #d4d4d4;
}

.btn-default:active {
	background-color: #bdbdbd;
	transform: translateY(0);
}

/* Pulsanti nelle tabelle - Design moderno da incontri */
.showTableClass tbody td .btn,
.showTableClass tbody td a.btn,
table tbody td .btn,
table tbody td a.btn,
#showDataTable tbody td .btn,
#showDataTable tbody td a.btn {
    padding: 6px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    font-weight: 500;
    height: 30px;
    min-width: 32px;
    margin-right: 2px;
}

.showTableClass tbody td .btn:last-child,
.showTableClass tbody td a.btn:last-child,
table tbody td .btn:last-child,
table tbody td a.btn:last-child,
#showDataTable tbody td .btn:last-child,
#showDataTable tbody td a.btn:last-child {
    margin-right: 0;
}

.showTableClass tbody td .btn:hover,
.showTableClass tbody td a.btn:hover,
table tbody td .btn:hover,
table tbody td a.btn:hover,
#showDataTable tbody td .btn:hover,
#showDataTable tbody td a.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    filter: brightness(1.1);
}

/* Badge - Versione moderna da incontri */
.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.badge:hover::before {
    left: 100%;
}

.badge-success {
    background: linear-gradient(135deg, #2c8730, #53af67) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(44, 135, 48, 0.3);
}

.badge-warning {
    background: linear-gradient(135deg, #d39e00, #f0b90b) !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(211, 158, 0, 0.3);
}

.badge-danger {
    background: linear-gradient(135deg, #8b1a1a, #a13f3f) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.3);
}

.badge-info {
	background-color: #36b9cc;
	color: #ffffff;
}

.badge.badge-primary {
	background-color: #8b1a1a;
	color: #ffffff;
    font-weight: 600;
}

.badge-secondary {
	background-color: #6c757d;
	color: #ffffff;
}

.badge-light {
	background-color: #f8f9fa;
	color: #000000;
}

.badge-dark {
	background-color: #424242;
	color: #ffffff;
}

.badge.badge-xs {
    font-size: 0.65rem;
    padding: 0.4rem 0.5rem !important;
    border-radius: 6px;
    margin-bottom: 2px;
}

/* Nav Pills Styles */
.nav-pills .nav-link.active,
.nav-pills .navbar .active.dropdown-toggle,
.nav-pills .navbar .show>.dropdown-toggle,
.nav-pills .show>.nav-link,
.navbar .nav-pills .active.dropdown-toggle,
.navbar .nav-pills .show>.dropdown-toggle {
	background: #1976D2;
	color: #FFF;
}

/* Config Styles */
.sidebar-nav.open.config {
	background: var(--config-color);
}

.sidebar-nav.open.config::-webkit-scrollbar-track {
	background-color: #4caf4fcc;
	border: none;
}

.sidebar-nav.open.config::-webkit-scrollbar-thumb {
	background-color: #2c8730;
}

.navbar .sidebar .dropdown-toggle:hover,
.sidebar-nav.open.config .nav-link:hover,
.sidebar-nav.open.config .dropdown-toggle:hover {
	background: #3cbf3a;
}

.navbar .sidebar .active.dropdown-toggle,
.sidebar-nav.open.config .nav-link.active,
.sidebar-nav.open.config .navbar .active.dropdown-toggle {
	background: #74ad77;
}

.sidebar-nav.open.config .nav-dropdown-items {
	background-color: rgb(79 167 83);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.sidebar-nav.open.config .navbar .nav-dropdown-items .nav-item {
	margin: 5px 0;
}

.sidebar-nav.open.config .navbar .nav-dropdown-items .nav-link {
	color: #ffffff;
	text-decoration: none;
	padding: 8px 12px;
	display: block;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	transition: background-color 0.2s ease;
}

.sidebar-nav.open.config .nav-item.nav-dropdown.open .nav-dropdown-items .nav-link:hover {
	background-color: rgba(35, 143, 33, 0.9);
}

/* Modal Styles - Versione moderna da incontri */
.modal-content {
    border: none;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-header {
    background: #f8f9fc;
    color: #5a5c69;
    border-bottom: 1px solid #e3e6f0;
    padding: 20px 24px;
}

.modal-title {
    font-weight: 600;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-body {
    padding: 24px;
    background: #ffffff;
}

.modal-footer {
    background: #f8f9fc;
    border-top: 1px solid #e3e6f0;
    padding: 16px 24px;
    gap: 12px;
}

.modal-primary .modal-content {
	border-color: #8b1a1a;
}

.modal-primary .modal-header {
	color: #fff;
	background-color: #8b1a1a;
}

.modal-primary.config .modal-content {
	border-color: #2c8730;
}

.modal-primary.config .modal-header {
	color: #fff;
	background-color: #2c8730;
}

/* Pulsanti config */
.btn-primary.config {
	background-color: #2c8730;
	border-color: #2c8730;
}

.btn-primary.config:hover {
	background-color: #3cbf3a;
	border-color: #3cbf3a;
}

.btn-primary.config:active {
	background-color: #238a2b;
	border-color: #238a2b;
}

.btn-primary.config:disabled {
	background-color: #59a66e;
	border-color: #59a66e;
	color: #b3e3c3;
}

.btn-secondary.config {
	background-color: #6c757d;
	border-color: #6c757d;
	color: #fff;
}

.btn-secondary.config:hover {
	background-color: #565e64;
	border-color: #565e64;
}

.btn-secondary.config:active {
	background-color: #3e4448;
	border-color: #3e4448;
}

.btn-secondary.config:disabled {
	background-color: #adb5bd;
	border-color: #adb5bd;
	color: #dee2e6;
}

.btn-danger.config {
	background-color: #d32f2f;
	border-color: #d32f2f;
	color: #fff;
}

.btn-danger.config:hover {
	background-color: #9a0007;
	border-color: #9a0007;
}

.btn-danger.config:active {
	background-color: #7b0005;
	border-color: #7b0005;
}

.btn-danger.config:disabled {
	background-color: #ff6659;
	border-color: #ff6659;
	color: #ffcdd2;
}

.btn-success.config {
	background-color: #2c8730;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.btn-success.config:hover {
	background-color: #2c8730;
}

/* Background Colors */
.bg-primary {
    background-color: #8b1a1a !important;
}
a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
    background-color: #701313 !important;
}

.bg-secondary {
    background-color: #2c8730 !important;
}
a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
    background-color: #256e29 !important;
}

.bg-success {
    background-color: #4caf50 !important;
}
a.bg-success:focus,
a.bg-success:hover,
button.bg-success:focus,
button.bg-success:hover {
    background-color: #388e3c !important;
}

.bg-info {
    background-color: #2196f3 !important;
}
a.bg-info:focus,
a.bg-info:hover,
button.bg-info:focus,
button.bg-info:hover {
    background-color: #1976d2 !important;
}

.bg-warning {
    background-color: #ffeb3b !important;
}
a.bg-warning:focus,
a.bg-warning:hover,
button.bg-warning:focus,
button.bg-warning:hover {
    background-color: #fbc02d !important;
}

.bg-danger {
    background-color: #f44336 !important;
    color: #fff !important;
}
a.bg-danger:focus,
a.bg-danger:hover,
button.bg-danger:focus,
button.bg-danger:hover {
    background-color: #d32f2f !important;
}

.bg-light {
    background-color: #f5f5f5 !important;
}
a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
    background-color: #e0e0e0 !important;
}

.bg-dark {
    background-color: #424242 !important;
	color: #fff !important;
}
a.bg-dark:focus,
a.bg-dark:hover,
button.bg-dark:focus,
button.bg-dark:hover {
    background-color: #303030 !important;
}

/* Custom Colors */
.bg-blue {
    background-color: #3f51b5 !important;
}
a.bg-blue:focus,
a.bg-blue:hover,
button.bg-blue:focus,
button.bg-blue:hover {
    background-color: #303f9f !important;
}

.bg-indigo {
    background-color: #673ab7 !important;
}
a.bg-indigo:focus,
a.bg-indigo:hover,
button.bg-indigo:focus,
button.bg-indigo:hover {
    background-color: #512da8 !important;
}

.bg-purple {
    background-color: #9c27b0 !important;
}
a.bg-purple:focus,
a.bg-purple:hover,
button.bg-purple:focus,
button.bg-purple:hover {
    background-color: #7b1fa2 !important;
}

.bg-pink {
    background-color: #e91e63 !important;
}
a.bg-pink:focus,
a.bg-pink:hover,
button.bg-pink:focus,
button.bg-pink:hover {
    background-color: #c2185b !important;
}

.bg-orange {
    background-color: #ff9800 !important;
}
a.bg-orange:focus,
a.bg-orange:hover,
button.bg-orange:focus,
button.bg-orange:hover {
    background-color: #f57c00 !important;
}

.bg-yellow {
    background-color: #ffeb3b !important;
}
a.bg-yellow:focus,
a.bg-yellow:hover,
button.bg-yellow:focus,
button.bg-yellow:hover {
    background-color: #fbc02d !important;
}

.bg-green {
    background-color: #4caf50 !important;
}
a.bg-green:focus,
a.bg-green:hover,
button.bg-green:focus,
button.bg-green:hover {
    background-color: #388e3c !important;
}

.bg-teal {
    background-color: #009688 !important;
}
a.bg-teal:focus,
a.bg-teal:hover,
button.bg-teal:focus,
button.bg-teal:hover {
    background-color: #00796b !important;
}

.bg-cyan {
    background-color: #00bcd4 !important;
}
a.bg-cyan:focus,
a.bg-cyan:hover,
button.bg-cyan:focus,
button.bg-cyan:hover {
    background-color: #0097a7 !important;
}

/* Grayscale Colors */
.bg-gray-100 {
    background-color: #fafafa !important;
}
a.bg-gray-100:focus,
a.bg-gray-100:hover,
button.bg-gray-100:focus,
button.bg-gray-100:hover {
    background-color: #e0e0e0 !important;
}

.bg-gray-200 {
    background-color: #eeeeee !important;
}
a.bg-gray-200:focus,
a.bg-gray-200:hover,
button.bg-gray-200:focus,
button.bg-gray-200:hover {
    background-color: #bdbdbd !important;
}

.bg-gray-300 {
    background-color: #e0e0e0 !important;
}
a.bg-gray-300:focus,
a.bg-gray-300:hover,
button.bg-gray-300:focus,
button.bg-gray-300:hover {
    background-color: #9e9e9e !important;
}

.bg-gray-400 {
    background-color: #bdbdbd !important;
}
a.bg-gray-400:focus,
a.bg-gray-400:hover,
button.bg-gray-400:focus,
button.bg-gray-400:hover {
    background-color: #757575 !important;
}

.bg-gray-500 {
    background-color: #9e9e9e !important;
}
a.bg-gray-500:focus,
a.bg-gray-500:hover,
button.bg-gray-500:focus,
button.bg-gray-500:hover {
    background-color: #616161 !important;
}

.bg-gray-600 {
    background-color: #757575 !important;
}
a.bg-gray-600:focus,
a.bg-gray-600:hover,
button.bg-gray-600:focus,
button.bg-gray-600:hover {
    background-color: #424242 !important;
}

.bg-gray-700 {
    background-color: #616161 !important;
}
a.bg-gray-700:focus,
a.bg-gray-700:hover,
button.bg-gray-700:focus,
button.bg-gray-700:hover {
    background-color: #303030 !important;
}

.bg-gray-800 {
    background-color: #424242 !important;
}
a.bg-gray-800:focus,
a.bg-gray-800:hover,
button.bg-gray-800:focus,
button.bg-gray-800:hover {
    background-color: #212121 !important;
}

.bg-gray-900 {
    background-color: #212121 !important;
}
a.bg-gray-900:focus,
a.bg-gray-900:hover,
button.bg-gray-900:focus,
button.bg-gray-900:hover {
    background-color: #000000 !important;
}

/* Form Controls - Versione moderna da incontri */
.form-control.is-valid {
    border-color: #28a745;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%2328a745" viewBox="0 0 16 16"%3E%3Cpath d="M16 8A8 8 0 11.002.002a8 8 0 0115.996 0A8 8 0 0116 8zm-3.97-3.03a.75.75 0 10-1.06-1.06L7.477 8.456l-2.469-2.47a.75.75 0 10-1.06 1.06L6.97 9.97a.75.75 0 001.06 0l4.97-4.97z"%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
}

.form-control,
.form-select {
    border: 1px solid #d1d3e2;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: white;
    position: relative;
}

.form-control:focus,
.form-select:focus {
    border-color: #8b1a1a;
    box-shadow: 0 0 0 0.2rem rgba(139, 26, 26, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 26, 26, 0.15);
}

.form-label {
    font-weight: 600;
    color: #5a5c69;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle-switch input {
    display: none;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    cursor: pointer;
    transition: 0.4s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #007bff;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

/* Tables moderne - Design da incontri_pratica */

#showTableContainer{
    margin-bottom: 1rem;
}

.table, #showTable, #showDataTable {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    background: #ffffff;
}

/* Container responsive per showDataTable */
#showDataTableContainer {
    background: #ffffff;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    transition: all 0.2s ease-in-out;
    margin-bottom: 20px;
    overflow: hidden;
}

#showDataTableContainer:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 2rem 0 rgba(58, 59, 69, 0.2);
}

/* Header moderno per tabelle */
.table thead th, #showTable thead th, #showDataTable thead th {
    background: linear-gradient(to bottom, #8b1a1a, #a13f3f);
    color: white;
    border: none;
    padding: 0.75rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-align: left;
    position: relative;
    transition: all 0.3s ease;
}

.table thead th:last-child, #showTable thead th:last-child, #showDataTable thead th:last-child {
    border-right: none;
    text-align: center;
}

.table thead th:first-child, #showTable thead th:first-child, #showDataTable thead th:first-child {
    border-radius: 8px 0 0 0;
}

.table thead th:last-child, #showTable thead th:last-child, #showDataTable thead th:last-child {
    border-radius: 0 8px 0 0;
}

/* Config version delle tabelle */
.table.config thead th, #showTable.config thead th, #showDataTable.config thead th {
    background: linear-gradient(to bottom, #2c8730, #53af67);
}


/* Corpo tabella - Regole da incontri_pratica */
.table tbody td, #showTable tbody td, #showDataTable tbody td {
    border: none;
    padding: 8px 6px;
    vertical-align: middle;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    border-bottom: 1px solid #f8f9fc;
    position: relative;
}

.table tbody td:last-child, #showTable tbody td:last-child, #showDataTable tbody td:last-child {
    text-align: center;
}

/* Righe con effetti hover moderni */
.table tbody tr, #showTable tbody tr, #showDataTable tbody tr {
    transition: all 0.2s ease;
    position: relative;
}

.table tbody tr:last-child td, #showTable tbody tr:last-child td, #showDataTable tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover, #showTable tbody tr:hover, #showDataTable tbody tr:hover {
    background-color: #fdf2f2;
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.1);
    transform: translateY(-1px);
}

.table.config tbody tr:hover, #showTable.config tbody tr:hover, #showDataTable.config tbody tr:hover {
    background: linear-gradient(90deg, #f0f8f0 0%, #fefefe 50%, #f0f8f0 100%);
    box-shadow: 0 2px 8px rgba(44, 135, 48, 0.1);
}

/* Bordi eleganti */
.table tbody tr::after, #showTable tbody tr::after, #showDataTable tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e3e6f0 20%, #e3e6f0 80%, transparent 100%);
    opacity: 0.5;
}

.table tbody tr:last-child::after, #showTable tbody tr:last-child::after, #showDataTable tbody tr:last-child::after {
    display: none;
}

/* Stili per showTableClass - mantenendo compatibilità */
.showTableClass {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.showTableClass:hover {
    box-shadow: 0 0.25rem 2rem 0 rgba(58, 59, 69, 0.2);
}

.showTableClass thead {
    background: var(--table-head-color);
    color: #FFF;
}

.showTableClass.config thead {
    background: var(--table-head-config-color);
}

.showTableClass th {
    background: var(--table-head-color);
    color: #fff;
    font-weight: 600;
    text-align: left;
    border: none;
    padding: 12px 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.showTableClass th:hover {
    background: linear-gradient(to bottom, #a13f3f, #8b1a1a);
}

.showTableClass th:last-child {
    border-right: none;
    text-align: center;
}

.showTableClass th:first-child {
    border-radius: 8px 0 0 0;
}

.showTableClass th:last-child {
    border-radius: 0 8px 0 0;
}

.showTableClass.config th {
    background: var(--table-head-config-color);
}

.showTableClass.config th:hover {
    background: linear-gradient(to bottom, #53af67, #2c8730);
}

.showTableClass td {
    padding: 8px 6px;
    text-align: left;
    border: none;
    vertical-align: middle;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    border-bottom: 1px solid #f8f9fc;
    position: relative;
}

.showTableClass td:last-child {
    text-align: center;
}

.showTableClass tbody tr {
    transition: all 0.2s ease;
    position: relative;
}

.showTableClass tbody tr:last-child td {
    border-bottom: none;
}

.showTableClass tbody tr:hover {
    background-color: #fdf2f2 !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.1);
    transform: translateY(-1px);
}

.showTableClass.config tbody tr:hover {
    background: linear-gradient(90deg, #f0f8f0 0%, #fefefe 50%, #f0f8f0 100%) !important;
    box-shadow: 0 2px 8px rgba(44, 135, 48, 0.1);
}

.showTableClass tbody tr.selected {
    background-color: #d1e7dd !important;
    color: #0f5132;
    pointer-events: none;
    box-shadow: inset 3px 0 0 #28a745;
}

.showTableClass.config tbody tr.selected {
    background-color: #c1e1c1 !important;
    color: #0f5132;
    pointer-events: none;
    box-shadow: inset 3px 0 0 #2c8730;
}

.showTableClass tbody tr:focus {
    outline: 2px solid #007bff;
    background-color: #e0f3ff !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.showTableClass.config tbody tr:focus {
    outline: 2px solid #1e5f24;
    background-color: #d4f0d4 !important;
    box-shadow: 0 0 0 3px rgba(44, 135, 48, 0.25);
}

/* Bordi eleganti per showTableClass */
.showTableClass tbody tr::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e3e6f0 20%, #e3e6f0 80%, transparent 100%);
    opacity: 0.5;
}

.showTableClass tbody tr:last-child::after {
    display: none;
}

/* Loading state per tabelle */
.table.loading, #showTable.loading, #showDataTable.loading, .showTableClass.loading {
    position: relative;
    overflow: hidden;
}

.table.loading::before, #showTable.loading::before, #showDataTable.loading::before, .showTableClass.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #8b1a1a, transparent);
    animation: tableLoadingAnimation 2s infinite;
    z-index: 10;
}

@keyframes tableLoadingAnimation {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Cards moderne - Da incontri_pratica */
.card {
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    transition: all 0.2s ease-in-out;
    background: #ffffff;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header.config{
    background: linear-gradient(to bottom, #2c8730, #53af67);
    color: #ffffff;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 2rem 0 rgba(58, 59, 69, 0.2);
}

.card-header {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    color: #5a5c69;
    padding: 15px 20px;
    font-weight: 600;
}

.card-header .card-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5a5c69;
}

.card.card-table {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    transition: 0.3s;
}

.card.card-table:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.card-header.card-table-header {
    background: white;
    color: #333;
    font-weight: bold;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header.card-table-header button {
    background: #007bff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: bold;
    transition: 0.3s;
}

.card-header.card-table-header button:hover {
    background: #0056b3;
}

.card-block.card-table-body {
    padding-left: 0;
    padding-right: 0;
}

/* Alert - Design da incontri_pratica */
.alert {
    border: none;
    border-radius: 6px;
    padding: 16px 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-left: 4px solid #dc3545;
}

/* Loading states */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #28a745;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Table styles specifici */
.selectedPracticesList {
    background-color: #fffbe6;
    border: 1px solid #ffd700;
    border-radius: 8px;
    margin-top: 20px;
    overflow: hidden;
}

.selectedPracticesList th {
    background-color: #ffeeba;
    color: #856404;
    font-weight: bold;
}

.selectedPracticesList tbody tr:hover {
    background-color: #ffecb3;
}

#tabellaPratiche tbody tr:focus,
.selectedPracticesList tbody tr:focus {
    outline: 2px solid #007bff;
    background-color: #e0f3ff;
}

#tabellaPratiche {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#tabellaPratiche th {
    background-color: #e9ecef;
    color: #495057;
    font-weight: bold;
    text-align: start;
}

#tabellaPratiche td {
	text-align: start;
}

#tabellaPratiche tr.selected {
    background-color: #d1e7dd;
    color: #0f5132;
    pointer-events: none;
}

#tabellaPratiche input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.contabilitaReferentiTable {
	border: 1px solid #dee2e6;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow: hidden;
}

/* Category grid e altri elementi */
.category-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.category-grid .col-md-4 {
	flex: 0 0 calc(25% - 2px);
	max-width: calc(25% - 2px);
}

.category-btn {
	display: block;
	background-color: #ffffff;
	border: 2px solid #558b2f;
	border-radius: 10px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	color: #558b2f;
	text-decoration: none;
	transition: background-color 0.3s, box-shadow 0.3s;
}

.category-btn:hover {
	background-color: #2c8730;
	color: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	text-decoration: none;
}

.categoria-contabilita {
	background-color: #f8f9fa;
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #dee2e6;
	margin-bottom: 15px;
}

.standard-referente {
	background-color: #fff3cd;
	padding: 15px;
	border-radius: 10px;
	border: 1px solid #ffeeba;
}

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

.collapsible-content {
    display: none;
}

.collapsible-content.active {
    display: block;
}

.filter-input {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.modal-dialog-centered {
	display: flex;
	align-items: center;
	min-height: calc(100% - 1rem);
}

.modal-fullscreen {
	max-width: 100%;
	margin: 0;
}

.modal-fullscreen .modal-content {
	height: 100vh;
	overflow-y: auto;
}

.modal-md {
	max-width: 35%;
	margin-top: 10%;
}

@media (max-width: 768px) {
	.modal-md {
		max-width: 100%;
		margin: auto;
	}
	.modal-md .modal-content {
		height: 100vh;
		overflow-y: auto;
	}
}

.form-group.livello {
    max-width: 350px;
}

.form-group.livello .btn-link {
    padding: 0;
    font-size: 1.2rem;
}

/* Stili per KPI Cards */
.kpi-cards .kpi-card {
    border-radius: 10px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    min-height: 120px;
}

.kpi-cards .kpi-card:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.kpi-cards .kpi-card .card-title {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.kpi-cards .kpi-card .card-text {
    font-size: 1.25rem;
    font-weight: bold;
}

.kpi-cards .kpi-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Sfumature */
.kpi-cards .bg-gradient-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
}
.kpi-cards .bg-gradient-primary-2 {
    background: linear-gradient(135deg, #a72828, #870c0c);
}
.kpi-cards .bg-gradient-success {
    background: linear-gradient(135deg, #28a745, #1c7430);
}
.kpi-cards .bg-gradient-info {
    background: linear-gradient(135deg, #17a2b8, #0d6efd);
}
.kpi-cards .bg-gradient-secondary {
    background: linear-gradient(135deg, #6c757d, #343a40);
}
.kpi-cards .bg-gradient-warning {
	background: linear-gradient(135deg, #ffc107, #d39e00);
}

/* Tabs Style */
.nav.nav-tabs {
    position: relative;
    z-index: 1;
    will-change: background-color;
}

.nav.nav-tabs .nav-link {
    color: #adb5bd;
    font-weight: bold;
    font-size: 14px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    background-color: #e9ecef;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transform: translateY(5px);
    position: relative;
    z-index: 1;
}

.nav.nav-tabs .nav-link:hover {
    transform: translateY(0);
    z-index: 3;
}

.nav.nav-tabs .nav-link.active {
    background-color: #8b1a1a;
    color: #fff !important;
    border: 1px solid #8b1a1a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    z-index: 4;
    transition: none !important;
}

.nav.nav-tabs .nav-link.config {
    background-color: #f8f9fa;
    color: #6c757d;
}

.nav.nav-tabs .nav-link.config.active {
    background-color: #2c8730 !important;
    color: #fff !important;
    border: 1px solid #2c8730;
    border-bottom-color: transparent;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tab-content {
    border-top: 4px solid #8b1a1a;
    border-left: none;
    border-right: none;
    padding: 8px;
    background-color: #fff;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.tab-content.config {
    border-top: 4px solid #2c8730;
}

.tab-content .tab-pane {
    animation: fadeIn 0.4s ease-in-out;
}

.nav-link i {
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
    color: inherit;
}

@media (max-width: 768px) {
    .nav-tabs .nav-link {
        font-size: 1rem;
        padding: 12px 16px;
    }
    .nav-link i {
        font-size: 1.1rem;
    }
}

.pagination-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    color: #333;
    padding: 10px 0;
}

.pagination-info span {
    margin: 0 5px;
}

.pagination-info strong {
    color: #007bff;
    font-weight: 600;
}

/* Container layouts - Design compatto e discreto per informazioni progetto */
.utente-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(139, 26, 26, 0.08);
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.04);
}

.info-utente {
    flex: 1;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    transition: none;
    position: relative;
    overflow: visible;
}

.info-utente::before {
    display: none;
}

.info-utente:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.info-utente-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--admin-color);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid rgba(139, 26, 26, 0.1);
    padding-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-utente-title i {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-color);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
}

.progetto-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid rgba(139, 26, 26, 0.08);
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.04);
}

.info-progetto, .contabilita-progetto {
    flex: 1;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    transition: none;
    position: relative;
    overflow: visible;
}

.info-progetto::before, .contabilita-progetto::before {
    display: none;
}

.info-progetto:hover, .contabilita-progetto:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.info-progetto-title, .contabilita-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--admin-color);
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid rgba(139, 26, 26, 0.1);
    padding-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.info-progetto-title i, .contabilita-title i {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--admin-color);
    color: white;
    border-radius: 4px;
    font-size: 0.7rem;
}

.info-grid, .contabilita-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 0;
}

.info-item, .contabilita-item {
    background: #f8f9fa;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(139, 26, 26, 0.06);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 55px;
    justify-content: center;
}

.info-item::before, .contabilita-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--admin-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.info-item:hover, .contabilita-item:hover {
    background: #ffffff;
    border-color: rgba(139, 26, 26, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(139, 26, 26, 0.08);
}

.info-item:hover::before, .contabilita-item:hover::before {
    opacity: 1;
}

.info-item i, .contabilita-item i {
    color: var(--admin-color);
    font-size: 0.9rem;
    position: absolute;
    top: 8px;
    right: 10px;
    opacity: 0.7;
}

.info-item strong, .contabilita-item strong {
    color: #495057;
    font-weight: 600;
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    opacity: 0.8;
    line-height: 1.2;
}

.info-item span, .contabilita-item span {
    color: var(--admin-color);
    font-weight: 700;
    font-size: 0.85rem;
    background: none;
    padding: 0;
    border: none;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* INFORMAZIONI REFERENTE - Stile moderno */
.info-box-referente {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    margin: 24px 0;
    padding: 24px;
    border: 1px solid rgba(139, 26, 26, 0.12);
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 
        0 8px 32px rgba(139, 26, 26, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.info-box-referente::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--admin-color), #a13f3f, var(--admin-color));
    border-radius: 16px 16px 0 0;
}

.box-referente-header {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--admin-color);
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(139, 26, 26, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.box-referente-header::before {
    content: '👤';
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--admin-color), #a13f3f);
    border-radius: 8px;
    font-size: 1rem;
}

.box-referente-item {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 10px;
    border: 1px solid rgba(139, 26, 26, 0.06);
    transition: all 0.2s ease;
}

.box-referente-item:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-color: rgba(139, 26, 26, 0.12);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(139, 26, 26, 0.08);
}

.box-referente-label {
    font-weight: 600;
    color: #2c3e50;
    flex: 1;
    font-size: 0.9rem;
}

.box-referente-value {
    color: var(--admin-color);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(139, 26, 26, 0.08), rgba(139, 26, 26, 0.04));
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid rgba(139, 26, 26, 0.1);
    font-size: 0.9rem;
}

.border-left-danger {
    border-left: 5px solid #e74a3b !important;
    background: linear-gradient(135deg, rgba(231, 74, 59, 0.05), rgba(231, 74, 59, 0.02)) !important;
}

.border-left-warning {
    border-left: 5px solid #f39c12 !important;
    background: linear-gradient(135deg, rgba(243, 156, 18, 0.05), rgba(243, 156, 18, 0.02)) !important;
}

/* Responsive design per container moderni - versione compatta */
@media (max-width: 992px) {
    .progetto-container {
        flex-direction: column;
        gap: 12px;
    }
    
    .info-grid, .contabilita-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .info-utente, .info-progetto, .contabilita-progetto {
        padding: 0;
    }
    
    .info-box-referente {
        padding: 16px;
        margin: 12px 0;
    }
    
    .info-item, .contabilita-item {
        min-height: 50px;
        padding: 8px 10px;
    }
}

@media (max-width: 768px) {
    .utente-container, .progetto-container {
        padding: 10px;
        margin-bottom: 12px;
    }
    
    .info-grid, .contabilita-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    
    .info-item, .contabilita-item {
        padding: 8px 10px;
        font-size: 0.75rem;
        min-height: 45px;
    }
    
    .info-item span, .contabilita-item span {
        font-size: 0.8rem;
    }
    
    .info-utente-title {
        font-size: 0.85rem;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    
    .info-progetto-title, .contabilita-title {
        font-size: 0.8rem;
        margin-bottom: 8px;
        padding-bottom: 5px;
    }
    
    .info-utente-title i {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    .info-progetto-title i, .contabilita-title i {
        width: 16px;
        height: 16px;
        font-size: 0.65rem;
    }
    
    .box-referente-header {
        font-size: 1.1rem;
        margin-bottom: 14px;
    }
    
    .box-referente-header::before {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }
    
    .box-referente-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 10px;
    }
    
    .box-referente-value {
        align-self: flex-end;
        padding: 3px 6px;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .utente-container, .progetto-container {
        padding: 8px;
        margin-bottom: 10px;
    }
    
    .info-utente, .info-progetto, .contabilita-progetto {
        padding: 0;
    }
    
    .info-box-referente {
        padding: 12px;
    }
    
    .info-item, .contabilita-item {
        padding: 6px 8px;
        min-height: 40px;
    }
    
    .info-item:hover, .contabilita-item:hover {
        transform: none;
    }
    
    .info-item:hover::before, .contabilita-item:hover::before {
        opacity: 0.5;
    }
    
    .info-item i, .contabilita-item i {
        font-size: 0.8rem;
        top: 6px;
        right: 8px;
    }
    
    .info-utente-title {
        font-size: 0.8rem;
        padding-bottom: 5px;
        margin-bottom: 8px;
    }
    
    .info-progetto-title, .contabilita-title {
        font-size: 0.75rem;
        padding-bottom: 4px;
        margin-bottom: 6px;
    }
    
    .info-item strong, .contabilita-item strong {
        font-size: 0.65rem;
        margin-bottom: 1px;
    }
    
    .info-item span, .contabilita-item span {
        font-size: 0.75rem;
    }
}

/* ==========================================
 * NAVBAR
 * ==========================================
 * Stili personalizzati per migliorare l'aspetto della navbar utente
 * Compatibile con il tema esistente admin/config
 */

/* Variabili aggiuntive per la navbar moderna */
:root {
    --navbar-user-bg: linear-gradient(135deg, var(--admin-color) 0%, #a13f3f 100%);
    --navbar-user-config-bg: linear-gradient(135deg, var(--config-color) 0%, #53af67 100%);
    --navbar-user-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --navbar-user-item-hover: rgba(255, 255, 255, 0.15);
    --navbar-user-item-active: rgba(255, 255, 255, 0.25);
    --navbar-user-text: #ffffff;
    --navbar-user-text-secondary: rgba(255, 255, 255, 0.85);
    --navbar-user-dropdown-bg: #ffffff;
    --navbar-user-dropdown-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --navbar-user-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Navbar utente principale */
.navbar-nav.navbar-user,
.nav.navbar-nav.ml-auto.navbar-user {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0 15px 0 0;
    margin-left: auto;
    position: relative;
    z-index: 1000;
}

/* Versione config della navbar */
.topbar.config ~ * .navbar-nav.navbar-user,
.topbar.config ~ * .nav.navbar-nav.ml-auto.navbar-user,
.navbar-nav.navbar-user.config,
.nav.navbar-nav.ml-auto.navbar-user.config {
    background: var(--navbar-user-config-bg);
}

/* Elementi della navbar */
.navbar-user .nav-item {
    margin: 0 3px;
    position: relative;
}

.navbar-user .nav-link {
    color: var(--navbar-user-text) !important;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: var(--navbar-user-transition);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    border: 1px solid transparent;
    min-width: 40px;
    min-height: 40px;
}

/* Effetti hover e active per i link */
.navbar-user .nav-link:hover {
    background: var(--navbar-user-item-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: var(--navbar-user-text) !important;
    border-color: rgba(255, 255, 255, 0.2);
}

.navbar-user .nav-link:active,
.navbar-user .nav-link.active {
    background: var(--navbar-user-item-active);
    color: var(--navbar-user-text) !important;
}

/* Icone nella navbar */
.navbar-user .nav-link i {
    font-size: 18px;
    transition: var(--navbar-user-transition);
    color: inherit;
}

.navbar-user .nav-link:hover i {
    transform: scale(1.1);
}

/* Badge personalizzati e moderni */
.navbar-user .badge {
    position: absolute;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 12px;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: badgePulse 2s infinite;
    z-index: 1;
}

/* Posizionamento specifico e ottimizzato per ogni icona */
.navbar-user .nav-link i.icon-bell + .badge {
    top: -2px;
    right: -4px;
}

.navbar-user .nav-link i.fas.fa-tasks + .badge {
    top: -2px;
    right: -2px;
}

/* Badge più vicini solo per le icone specifiche */
.navbar-user .nav-link:has(i.icon-bell) .badge,
.navbar-user .nav-link:has(i.fas.fa-tasks) .badge {
    transform: translate(2px, 2px);
}

.navbar-user .badge-danger {
    background: linear-gradient(135deg, #ff4757, #ff3742);
    color: white;
}

.navbar-user .badge-success {
    background: linear-gradient(135deg, #2ed573, #1dd1a1);
    color: white;
}

.navbar-user .badge-pill {
    border-radius: 12px;
}

/* Animazione pulse per i badge */
@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
}

/* Dropdown menu migliorato */
.navbar-user .dropdown-menu {
    background: var(--navbar-user-dropdown-bg);
    border: none;
    border-radius: 15px;
    box-shadow: var(--navbar-user-dropdown-shadow);
    padding: 15px 0;
    margin-top: 12px;
    min-width: 320px;
    max-width: 400px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    animation: dropdownFadeIn 0.3s ease-out;
    overflow: hidden;
}

.navbar-user .dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    right: 25px;
    width: 16px;
    height: 16px;
    background: var(--navbar-user-dropdown-bg);
    transform: rotate(45deg);
    border-radius: 3px;
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.1);
}

/* Animazione per il dropdown */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header del dropdown */
.navbar-user .dropdown-header {
    font-weight: 700;
    font-size: 15px;
    color: #2c3e50;
    padding: 15px 25px 15px;
    border-bottom: 2px solid #f1f3f4;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #f8f9fa, #ffffff);
    position: relative;
}

.navbar-user .dropdown-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25px;
    width: 30px;
    height: 2px;
    background: var(--admin-color);
    border-radius: 1px;
}

.navbar-user .dropdown-header strong {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-user .dropdown-header strong::before {
    content: '📋';
    font-size: 16px;
}

/* Item del dropdown */
.navbar-user .dropdown-item {
    padding: 15px 25px;
    font-size: 14px;
    color: #495057;
    border-radius: 0;
    transition: var(--navbar-user-transition);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 3px solid transparent;
    margin: 2px 0;
    position: relative;
    min-height: 60px;
}

.navbar-user .dropdown-item:hover {
    background: linear-gradient(90deg, #f8f9fc, #ffffff);
    color: #2c3e50;
    transform: translateX(5px);
    border-left-color: var(--admin-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.navbar-user .dropdown-item p {
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
}

.navbar-user .dropdown-item::before {
    content: '📌';
    font-size: 14px;
    opacity: 0.7;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Toggler del menu aside */
.navbar-user .aside-menu-toggler {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--navbar-user-transition);
    padding: 0;
    margin-right: 8px;
}

.navbar-user .aside-menu-toggler:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-user .aside-menu-toggler i {
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    align-content: center;
}

/* Animazione speciale per il toggler che simula apertura sidebar */
.navbar-user .aside-menu-toggler.animated {
    animation: sidebarToggleAnimation 0.8s ease-in-out;
}

@keyframes sidebarToggleAnimation {
    0% { 
        transform: translateX(0) scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
    25% { 
        transform: translateX(-3px) scale(1.1);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: translateX(-6px) scale(1.15);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
    }
    75% { 
        transform: translateX(-3px) scale(1.1);
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
    }
    100% { 
        transform: translateX(0) scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);
    }
}

/* Pulsante logout speciale */
.navbar-user #logOutBtn {
    background: rgba(255, 77, 87, 0.15);
    border: 1px solid rgba(255, 77, 87, 0.3);
    color: var(--navbar-user-text) !important;
    font-weight: 600;
}

.navbar-user #logOutBtn:hover {
    background: rgba(255, 77, 87, 0.25);
    border-color: rgba(255, 77, 87, 0.5);
    color: #fff !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 77, 87, 0.3);
}

.navbar-user #logOutBtn i {
    margin-right: 6px;
}

/* Link notifiche e task speciali */
.navbar-user .nav-item.d-md-down-none .nav-link,
.navbar-user .nav-item.dropdown .nav-link {
    position: relative;
}

.navbar-user .nav-item.d-md-down-none .nav-link[data-toggle="tooltip"],
.navbar-user .nav-item.dropdown .nav-link[data-toggle="dropdown"] {
    background: rgba(33, 150, 243, 0.15);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.navbar-user .nav-item.d-md-down-none .nav-link[data-toggle="tooltip"]:hover,
.navbar-user .nav-item.dropdown .nav-link[data-toggle="dropdown"]:hover {
    background: rgba(33, 150, 243, 0.25);
    border-color: rgba(33, 150, 243, 0.5);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
    .navbar-nav.navbar-user,
    .nav.navbar-nav.ml-auto.navbar-user {
        padding: 0;
        margin: 0;
    }
    
    .navbar-user .nav-item {
        margin: 0 2px;
    }
    
    .navbar-user .nav-link {
        padding: 8px 10px;
        font-size: 14px;
        border-radius: 6px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .navbar-user .dropdown-menu {
        min-width: 280px;
        margin-top: 8px;
        border-radius: 12px;
    }
    
    .navbar-user .dropdown-item {
        padding: 12px 20px;
        min-height: 50px;
    }
    
    .navbar-user .aside-menu-toggler {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .navbar-user .nav-link {
        padding: 8px 10px;
        gap: 4px;
    }
    
    .navbar-user .nav-link i {
        font-size: 16px;
    }
    
    .navbar-user .dropdown-menu {
        min-width: 250px;
        left: -100px !important;
    }
}

/* Miglioramenti per i modal dei promemoria */
.modal.fade .modal-dialog {
    transition: var(--navbar-user-transition);
    transform: translate(0, -50px) scale(0.95);
}

.modal.show .modal-dialog {
    transform: translate(0, 0) scale(1);
}

.modal-primary .modal-content {
    border: none;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modal-primary .modal-header {
    background: var(--table-head-color);
    color: white;
    border-radius: 15px 15px 0 0;
    border-bottom: none;
    padding: 20px 25px;
}

.modal-primary.config .modal-header {
    background: var(--table-head-config-color);
}

.modal-primary .modal-header .modal-title {
    font-weight: 600;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-primary .modal-header .modal-title::before {
    content: '📝';
    font-size: 1.2rem;
}

.modal-primary .modal-body {
    padding: 30px 25px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
}

.modal-primary .modal-body h3 {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 15px;
}

.modal-primary .modal-body .lead {
    color: #495057;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.modal-primary .btn-primary {
    background: var(--table-head-color);
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    transition: var(--navbar-user-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.modal-primary.config .btn-primary {
    background: var(--table-head-config-color);
}

.modal-primary .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 26, 26, 0.4);
}

.modal-primary.config .btn-primary:hover {
    box-shadow: 0 8px 25px rgba(44, 135, 48, 0.4);
}

/* Tooltip personalizzati */
.tooltip-inner {
    background: #2c3e50;
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
}

.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #2c3e50;
}

/* Animazioni di entrata */
@keyframes navbarFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.navbar-nav.navbar-user,
.nav.navbar-nav.ml-auto.navbar-user {
    animation: navbarFadeInDown 0.8s ease-out;
}

/* Scrollbar personalizzata per dropdown lunghi */
.navbar-user .dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

.navbar-user .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.navbar-user .dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.navbar-user .dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.navbar-user .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Effetti di focus per accessibilità */
.navbar-user .nav-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.navbar-user .dropdown-item:focus {
    outline: 2px solid var(--admin-color);
    outline-offset: -2px;
}

/* Stati loading per la navbar */
.navbar-user.loading {
    position: relative;
    overflow: hidden;
}

.navbar-user.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #8b1a1a, transparent);
    animation: navbarLoading 2s infinite;
}

@keyframes navbarLoading {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Miglioramenti per gli script modal */
.modal-backdrop.show {
    opacity: 0.6;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Accessibilità migliorata */
@media (prefers-reduced-motion: reduce) {
    .navbar-user .nav-link,
    .navbar-user .dropdown-item,
    .navbar-user .badge,
    .modal.fade .modal-dialog {
        transition: none !important;
        animation: none !important;
    }
}

/* Classi aggiuntive per effetti JavaScript */
.navbar-user .badge-hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.navbar-user .badge-clicked {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

.navbar-user .nav-link-focused {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.navbar-user .aside-menu-toggler.sidebar-open {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Miglioramento responsive per toggler */
@media (max-width: 480px) {
    .navbar-user .aside-menu-toggler {
        margin-right: 4px;
        width: 36px;
        height: 36px;
    }
    
    .navbar-user .aside-menu-toggler i {
        font-size: 14px;
    }
}

/* Totali card - Da incontri_pratica */
.totali-incontri {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.totale-card {
    width: 100%;
    background: white;
    border: 1px solid #e3e6f0;
    border-radius: 6px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 0.05rem 0.5rem 0 rgba(58, 59, 69, 0.08);
    transition: all 0.15s ease;
    position: relative;
}

.totale-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.15rem 0.8rem 0 rgba(58, 59, 69, 0.15);
}

.totale-card.durata {
    border-left: 3px solid #2c8730;
}

.totale-card.costo {
    border-left: 3px solid #8b1a1a;
}

.totale-card .icona {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.totale-card.durata .icona {
    background: linear-gradient(135deg, #2c8730, #53af67);
}

.totale-card.costo .icona {
    background: linear-gradient(135deg, #8b1a1a, #a13f3f);
}

.totale-card .content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.totale-card .label {
    font-size: 0.85rem;
    color: #5a5c69;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
}

.totale-card .valore {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    text-align: right;
    white-space: nowrap;
}

.totale-card .valore .unita {
    font-size: 0.85rem;
    font-weight: 500;
    color: #858796;
    margin-left: 4px;
}

/* ==========================================
 * STILI ORARIO SETTIMANALE TIROCINI - SISTEMA MODERNIZZATO
 * ==========================================
 * Stili per la gestione moderna degli orari settimanali
 * dei tirocini con tabella Bootstrap e input time HTML5
 */

/* Container principale orario */
.orario-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.orario-container h5 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.orario-container h5 i {
    color: #2c8730;
}

/* Tabella orario moderna */
.orario-table {
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    margin-bottom: 15px;
}

.orario-table thead th {
    background: linear-gradient(to bottom, #e3f2fd, #bbdefb) !important;
    color: #1565c0 !important;
    font-weight: 700;
    font-size: 0.875rem;
    text-align: center;
    padding: 12px 8px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.orario-table tbody td {
    padding: 10px 8px;
    border: 1px solid #e9ecef;
    text-align: center;
    vertical-align: middle;
    background: white;
}

.orario-table tbody tr:nth-child(even) td {
    background-color: #f8f9fa;
}

.orario-table tbody tr:hover td {
    background-color: #e3f2fd;
    transition: background-color 0.15s ease;
}

/* Input time moderni */
.orario-input {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 0.875rem;
    text-align: center;
    transition: all 0.15s ease-in-out;
    background: white;
}

.orario-input:focus {
    border-color: #2c8730;
    box-shadow: 0 0 0 0.2rem rgba(44, 135, 48, 0.25);
    outline: none;
}

.orario-input:invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.orario-input:valid {
    border-color: #28a745;
}

/* Pulsanti azione orario */
.orario-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 15px;
}

.orario-buttons .btn {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.orario-buttons .btn-outline-primary {
    color: #2c8730;
    border-color: #2c8730;
}

.orario-buttons .btn-outline-primary:hover {
    background-color: #2c8730;
    border-color: #2c8730;
    color: white;
}

.orario-buttons .btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

.orario-buttons .btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Tooltip per pulsanti orario */
.orario-buttons .btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 1000;
    animation: tooltipFadeIn 0.3s ease;
}

/* Validazione visuale */
.orario-container.has-errors {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

.orario-container.has-success {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.15);
}

/* Indicatori di stato */
.orario-status {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 12px;
    font-weight: 500;
}

.orario-status.valid {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.orario-status.invalid {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Loading state */
.orario-container.loading {
    opacity: 0.7;
    pointer-events: none;
}

.orario-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #28a745;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Calcolo totale ore */
.orario-totali {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orario-totali .totale-label {
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
}

.orario-totali .totale-valore {
    font-weight: 700;
    color: #2c8730;
    font-size: 1.1rem;
}

/* Pulsanti di azzeramento slot orario */
.orario-clear-btn {
    opacity: 0.7;
    margin-left: 5px;
    transition: all 0.2s ease-in-out;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
}

.orario-clear-btn:hover {
    opacity: 1;
    background-color: #dc3545;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.orario-clear-btn:focus {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
    opacity: 1;
}

.orario-clear-btn:active {
    transform: scale(0.95);
}

.orario-clear-btn .fa-times {
    font-size: 10px;
}

/* Animazione pulse per indicare che il pulsante è cliccabile */
.orario-clear-btn:hover .fa-times {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Nasconde i pulsanti quando non ci sono valori */
.orario-table td .row:not(:has(input[value]:not([value=""]))) .orario-clear-btn {
    visibility: hidden;
    opacity: 0;
}

/* Mostra i pulsanti solo quando almeno un input ha valore */
.orario-table td .row:has(input[type="time"]:not([value=""])) .orario-clear-btn {
    visibility: visible;
    opacity: 0.7;
}

/* Responsività per i pulsanti di azzeramento */
@media (max-width: 768px) {
    .orario-clear-btn {
        width: 20px;
        height: 20px;
    }
    
    .orario-clear-btn .fa-times {
        font-size: 8px;
    }
}

@media (max-width: 576px) {
    .orario-clear-btn {
        width: 18px;
        height: 18px;
        border-width: 1px;
    }
    
    .orario-clear-btn .fa-times {
        font-size: 7px;
    }
}

/* Stili specifici per il titolo progetto migliorato */
.info-progetto-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    line-height: 1.3;
}

.info-progetto-title .progetto-numero {
    font-weight: 800;
    color: var(--admin-color);
    font-size: 1em;
}

.info-progetto-title .progetto-categoria {
    font-weight: 500;
    color: #6c757d;
    font-size: 0.85em;
    background: rgba(139, 26, 26, 0.08);
    padding: 4px 10px;
    border-radius: 15px;
    border: 1px solid rgba(139, 26, 26, 0.15);
    margin-left: auto;
}

/* Responsive per il titolo progetto */
@media (max-width: 768px) {
    .info-progetto-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .info-progetto-title .progetto-categoria {
        margin-left: 0;
        font-size: 0.75em;
        padding: 3px 8px;
    }
    
    .info-progetto-title .progetto-numero {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .info-progetto-title .progetto-numero {
        font-size: 0.85em;
    }
    
    .info-progetto-title .progetto-categoria {
        font-size: 0.7em;
        padding: 2px 6px;
    }
}

/* Stili per modelli commissioni */
#anteprimaCommissioni #hierarchyContainer {
    background-color: #f8f9fa;
    padding: 20px 0 0 20px;
}

#anteprimaCommissioni .main-graphic {
    width: fit-content;
    height: auto;
}

#anteprimaCommissioni .hierarchy-header h3 {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin-bottom: 5px;
}

#anteprimaCommissioni .hierarchy-header p {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #666;
}

#anteprimaCommissioni .level-band {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    position: relative;
}

#anteprimaCommissioni .level-band:nth-child(even) {
    background-color: #f8f9fa;
}

#anteprimaCommissioni .level-band:nth-child(odd) {
    background-color: #e9ecef;
}

#anteprimaCommissioni .level-graphic {
    width: 50%;
    height: 300px;
    position: relative;
    border: 1px solid #ccc;
}

#anteprimaCommissioni .level-text {
    width: auto;
    padding-left: 20px;
    font-family: Arial, sans-serif;
}

#anteprimaCommissioni .level-text h5 {
    margin-bottom: 10px;
    color: #333;
}

#anteprimaCommissioni .level-text ul {
    list-style-type: none;
    padding: 0;
}

#anteprimaCommissioni .level-text ul li {
    background: #f8f9fa;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#anteprimaCommissioni .level-mark {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 50px;
    font-weight: bold;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-text-stroke: 1px #fff;
}

#anteprimaCommissioni .level-band:nth-child(even) .level-mark {
    color: #e9ecef;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-text-stroke: 1px #dddddd;
}

#anteprimaCommissioni .level-band:nth-child(odd) .level-mark {
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-text-stroke: 1px #dddddd;
}

#anteprimaCommissioni .chart-svg {
    width: 100%;
    height: 100%;
}

#anteprimaCommissioni .node circle {
    fill: #3498db;
}

#anteprimaCommissioni .node text {
    font-size: 12px;
    text-anchor: middle;
}

#anteprimaCommissioni .link {
    fill: none;
    stroke: #a1a1a1;
    stroke-width: 1px;
    marker-end: url(#arrow);
}

#anteprimaCommissioni .hierarchy-band {
    background-color: #d1ecf1;
    padding: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}







.summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}

.summary-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
}

.summary-title i {
    color: #6c757d;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-complete {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-incomplete {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    border: 1px solid #ffeaa7;
}

.summary-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.metric-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
}

.metric-total {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1976d2;
}

.metric-uploaded {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
    color: #388e3c;
}

.metric-required {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #d32f2f;
}

.metric-progress {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    color: #7b1fa2;
}

.metric-content {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

.metric-label {
    font-size: 0.8rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.summary-progress {
    margin-bottom: 15px;
}

.progress-container {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4caf50 0%, #66bb6a 100%);
    border-radius: 4px;
    transition: width 0.6s ease;
    position: relative;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text {
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
}

.summary-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    margin-top: 15px;
}

.alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #ffc107;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    color: #856404;
    margin-bottom: 2px;
}

.alert-text {
    font-size: 0.875rem;
    color: #856404;
    opacity: 0.8;
}

.alert-action {
    flex-shrink: 0;
}

.btn-alert-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #856404;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-alert-action:hover {
    background: #6c5214;
    transform: scale(1.1);
}

/* File Info Card per modal file viewer */
.file-info-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.file-info-card:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.file-info-card .file-icon {
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.file-info-card .file-icon i {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.file-info-card:hover .file-icon i {
    transform: scale(1.05);
}

.file-info-card h4 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 20px;
}

.file-info-card .file-details {
    background: rgba(108, 117, 125, 0.05);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.file-info-card .file-details p {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.file-info-card .file-details strong {
    color: #495057;
    font-weight: 600;
}

.file-info-card .btn-group-vertical .btn {
    margin-bottom: 8px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.file-info-card .btn-group-vertical .btn:last-child {
    margin-bottom: 0;
}

.file-info-card .btn-group-vertical .btn:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Responsive design */
@media (max-width: 768px) {
    .summary-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .summary-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .metric-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .summary-alert {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .file-info-card {
        padding: 20px;
        margin: 15px 0;
    }
}

@media (max-width: 480px) {
    .summary-metrics {
        grid-template-columns: 1fr;
    }
}

/* Importante: quando c'è un dropdown aperto, la tabella non deve nasconderlo */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
}





/* Styling del nome allegato */
.allegato-icon {
    width: 32px;
    height: 32px;
    background: #28a745;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-right: 10px;
    font-size: 14px;
}

.allegato-nome {
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.2;
}

.allegato-visibile .allegato-nome {
    color: #155724;
}

/* Switch moderni e funzionali */
.custom-control-switch {
    padding-left: 2.5rem;
}

.custom-control-switch .custom-control-label::before {
    width: 2rem;
    height: 1.2rem;
    border-radius: 0.6rem;
    background-color: #dee2e6;
    border: 1px solid #adb5bd;
    transition: all 0.3s ease;
}

.custom-control-switch .custom-control-label::after {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: white;
    transition: all 0.3s ease;
    top: 0.1rem;
    left: -2.35rem;
}

.custom-control-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
    border-color: #28a745;
}

.custom-control-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(0.8rem);
}

.custom-control-switch .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: #e9ecef;
    border-color: #e9ecef;
}






/* Stati obbligatori - Display con dropdown integrato */
.stati-obbligatori-display {
    min-height: 24px;
    position: relative;
}

.stati-obbligatori-selection-container {
    width: 100%;
    position: relative;
}

.stati-obbligatori-selection-container .input-group {
    width: 100%;
}

.stati-obbligatori-selection-container .dropdown-menu {
    max-width: 350px;
    max-height: 350px;
    overflow-y: auto;
    border: 2px solid #28a745;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 9999 !important;
    background: white;
    margin-top: 2px;
    position: absolute !important;
    transform: none !important;
}

/* Dropdown menu per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .dropdown-menu {
    max-width: 350px;
    max-height: 350px;
    overflow-y: auto;
    border: 2px solid #28a745;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    z-index: 9999 !important;
    background: white;
    margin-top: 2px;
    position: absolute !important;
    transform: none !important;
}

.stati-obbligatori-selection-container .dropdown-menu.show {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    will-change: auto;
    transform: none !important;
}



.stati-obbligatori-selection-container .dropdown-header {
    background-color: #28a745;
    border-bottom: 1px solid #20c997;
    font-weight: 600;
    color: white;
    padding: 8px 16px;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Dropdown header per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .dropdown-header {
    background-color: #28a745;
    border-bottom: 1px solid #20c997;
    font-weight: 600;
    color: white;
    padding: 8px 16px;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.stati-obbligatori-selection-container .dropdown-item-text {
    padding: 6px 16px;
    background: white;
    border-bottom: 1px solid #f8f9fa;
}

/* Dropdown item text per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .dropdown-item-text {
    padding: 6px 16px;
    background: white;
    border-bottom: 1px solid #f8f9fa;
}

.stati-obbligatori-selection-container .dropdown-item-text:hover {
    background-color: #f8f9fa;
}

/* Dropdown item hover per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .dropdown-item-text:hover {
    background-color: #f8f9fa;
}

.stati-obbligatori-selection-container .custom-control {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

/* Custom control per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .custom-control {
    padding-left: 1.5rem;
    margin-bottom: 0;
}

.stati-obbligatori-selection-container .custom-control-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    padding: 4px 0;
    display: block;
    width: 100%;
}

/* Custom control label per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .custom-control-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    padding: 4px 0;
    display: block;
    width: 100%;
}

.stati-obbligatori-selection-container .custom-control-label:hover {
    color: #28a745;
}

/* Custom control label hover per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .custom-control-label:hover {
    color: #28a745;
}

.stati-display-input {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: default;
    font-size: 0.85rem;
}

.stati-display-input:focus {
    background-color: #f8f9fa;
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Regole di visibilità corrette */
.allegato-row:not(.allegato-obbligatorio) .stati-obbligatori-selection-container {
    display: none !important;
}

.allegato-row.allegato-obbligatorio .stati-obbligatori-selection-container {
    display: block !important;
}

.allegato-row.allegato-obbligatorio .non-obbligatorio-message {
    display: none !important;
}

.allegato-row:not(.allegato-obbligatorio) .non-obbligatorio-message {
    display: block !important;
}

.stati-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.stati-badges-container .badge {
    background-color: #ffc107;
    color: #212529;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    border: 1px solid #e0a800;
    display: flex;
    align-items: center;
}

.stati-badges-container .badge .close {
    margin-left: 4px;
    font-size: 0.7rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
}

.stati-badges-container .badge .close:hover {
    opacity: 1;
    color: #721c24;
}

.stati-badges-container .badge-secondary {
    background-color: #6c757d;
    color: white;
    border: 1px solid #5a6268;
}

/* Badge container per stati visibili - identico agli obbligatori */
.stati-visibili-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

/* Badge per stati visibili - colore diverso per distinguerli */
.stati-visibili-badges-container .badge {
    background-color: #17a2b8;
    color: white;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 500;
    border: 1px solid #138496;
    display: flex;
    align-items: center;
}

/* Badge close per stati visibili - identico agli obbligatori */
.stati-visibili-badges-container .badge .close {
    margin-left: 4px;
    font-size: 0.7rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
}

/* Badge close hover per stati visibili - identico agli obbligatori */
.stati-visibili-badges-container .badge .close:hover {
    opacity: 1;
}



/* Stati visibili - stili per input display */
.stati-visibili-display-input {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    cursor: default;
    font-size: 0.85rem;
}

.stati-visibili-display-input:focus {
    background-color: #f8f9fa;
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Previeni la chiusura accidentale del dropdown per stati visibili */
.stati-visibili-selection-container .dropdown-menu .dropdown-item-text {
    cursor: default;
}

.stati-visibili-selection-container .dropdown-menu .dropdown-item-text:active {
    background-color: inherit;
}

/* Stati visibili show/hide - replicano il comportamento degli stati obbligatori */
.stati-visibili-selection-container .dropdown-menu.show {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    will-change: auto;
    transform: none !important;
}

/* Dropdown toggle personalizzato per stati obbligatori */
.stati-obbligatori-selection-container .btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
    transition: all 0.2s ease;
}

.stati-obbligatori-selection-container .btn-outline-secondary:hover,
.stati-obbligatori-selection-container .btn-outline-secondary:focus,
.stati-obbligatori-selection-container .btn-outline-secondary.show {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.stati-obbligatori-selection-container .btn-outline-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

/* Dropdown toggle personalizzato per stati visibili - identico agli obbligatori */
.stati-visibili-selection-container .btn-outline-secondary {
    border-color: #dee2e6;
    color: #6c757d;
    transition: all 0.2s ease;
}

.stati-visibili-selection-container .btn-outline-secondary:hover,
.stati-visibili-selection-container .btn-outline-secondary:focus,
.stati-visibili-selection-container .btn-outline-secondary.show {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.stati-visibili-selection-container .btn-outline-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

/* Previeni la chiusura accidentale del dropdown */
.stati-obbligatori-selection-container .dropdown-menu .dropdown-item-text {
    cursor: default;
}

.stati-obbligatori-selection-container .dropdown-menu .dropdown-item-text:active {
    background-color: inherit;
}

/* Migliora la visibilità delle checkbox */
.stati-obbligatori-selection-container .custom-control-input:checked ~ .custom-control-label {
    color: #28a745;
    font-weight: 600;
}

.stati-obbligatori-selection-container .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #28a745;
    border-color: #28a745;
}

/* Nasconde il container stati quando non obbligatorio */
.allegato-row:not(.allegato-obbligatorio) .stati-obbligatori-selection-container {
    display: none !important;
}

/* Mostra solo il messaggio quando non obbligatorio */
.allegato-row:not(.allegato-obbligatorio) .stati-obbligatori-display small.text-muted {
    display: block !important;
}

/* Configurazione inline degli stati */
.stati-checkboxes-inline {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px;
    margin-top: 5px;
}

.stati-checkboxes-inline .custom-control-inline {
    margin-right: 12px;
    margin-bottom: 4px;
}

.stati-checkboxes-inline .custom-control-label {
    font-size: 0.8rem;
    color: #495057;
}

.stati-checkboxes-inline .badge-light {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
    font-size: 0.65rem;
}

/* Pulsanti azioni semplici ed efficaci */
.btn-group-sm .btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 3px;
    margin: 0 1px;
}

.btn-outline-warning {
    color: #856404;
    border-color: #ffc107;
    background-color: transparent;
}

.btn-outline-warning:hover {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-info {
    color: #0c5460;
    border-color: #17a2b8;
    background-color: transparent;
}

.btn-outline-info:hover {
    color: white;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pannello configurazione avanzata semplice */
.advanced-config-row {
    background-color: #f8f9fa;
}

.advanced-configuration-panel {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    margin: 8px;
    padding: 16px;
    border-left: 4px solid #17a2b8;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.advanced-configuration-panel h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dee2e6;
}

.advanced-configuration-panel .form-group {
    margin-bottom: 16px;
}

.advanced-configuration-panel .form-label {
    color: #495057;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

.advanced-configuration-panel .form-control {
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.85rem;
    padding: 6px 8px;
}

.advanced-configuration-panel .form-control:focus {
    border-color: #17a2b8;
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
}

.advanced-configuration-panel small.text-muted {
    color: #6c757d;
    font-size: 0.75rem;
}

.advanced-configuration-panel .config-section {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #f0f0f0;
}
.advanced-configuration-panel .section-icon {
    flex-shrink: 0;
}

/* Messaggi di stato */
.text-warning {
    color: #856404 !important;
}

.info-text {
    color: #6c757d !important;
}

.info-text::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; 
    content: "\f05a";
    display: inline-block;
    color: #17a2b8; 
    font-size: 14px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Responsive design */
@media (max-width: 768px) {
    .stati-badges-container .badge {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
}

@media (max-width: 576px) {
    .advanced-configuration-panel {
        margin: 4px;
        padding: 12px;
    }
}

/* COMPATIBILITÀ CROSS-BROWSER PER ALTRI BROWSER (Firefox, Safari, Edge Legacy) */

/* Firefox: il selettore :has() non è supportato, aggiungiamo regole alternative */
@-moz-document url-prefix() {
    /* Fallback per Firefox: disabilita hover quando dropdown è aperto tramite classe */

    }
    
    /* Assicura che il dropdown sia sempre sopra il contenuto */
    .stati-obbligatori-selection-container .dropdown-menu {
        z-index: 9999 !important;
        position: fixed !important;
    }

/* Safari compatibility */
@supports (-webkit-appearance: none) and (not (contain: paint)) {
    .stati-obbligatori-selection-container .dropdown-menu {
        -webkit-transform: none !important;
        transform: none !important;
    }
}

/* Edge Legacy compatibility */
@supports (-ms-ime-align: auto) {
    
    .stati-obbligatori-selection-container .dropdown-menu {
        position: absolute !important;
        z-index: 9999 !important;
    }
}

/* Fallback generale per browser che non supportano :has() */
@supports not (selector(:has(*))) {
    /* Classe JavaScript per browser senza :has() support */
    
    .table-responsive.js-dropdown-open {
        overflow: visible !important;
    }
}

/* =================================================
   PERMISSIONS MANAGEMENT FORM - Modern UI/UX Styles
   ================================================= */

/* Permissions Form Container */
#permissions-form {
    position: relative;
    width: 100%;
}

.permissions-management-form {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    padding: 0;
    margin-top: 0; /* Remove any top margin that might interfere with sticky */
}

/* Permissions Card */
.permissions-card {
    border: none !important;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.permissions-card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Permissions Header */
.permissions-header {
    background: linear-gradient(135deg, var(--admin-color) 0%, #a13f3f 100%);
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.permissions-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    pointer-events: none;
}

.card-title.permissions-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

/* Sticky Save Bar */
.permissions-sticky-save-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-bottom: 2px solid #e9ecef;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* backdrop-filter: blur(10px);  <-- TEMPORANEAMENTE COMMENTATO PER TEST */
    border-radius: 0 0 12px 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    left: 0;
    right: 0;
    /* -webkit-transform: translateZ(0); <-- RIMOSSO */
    /* transform: translateZ(0);           <-- RIMOSSO */
}

.permissions-sticky-save-bar:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

.sticky-bar-title {
    font-weight: 600;
    color: var(--admin-color);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sticky-bar-title i {
    font-size: 1.2rem;
}

.permissions-sticky-btn-back,
.permissions-sticky-btn-save {
    font-weight: 500;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 2px solid transparent;
}

.permissions-sticky-btn-back {
    background: #f8f9fa;
    color: #495057;
    border-color: #dee2e6;
}

.permissions-sticky-btn-back:hover {
    background: #e9ecef;
    color: #343a40;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.permissions-sticky-btn-save {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-color: #007bff;
}

.permissions-sticky-btn-save:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    color: white;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3);
}

.permissions-sticky-btn-save:focus,
.permissions-sticky-btn-back:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Animation when sticky bar becomes visible */
@keyframes stickyBarSlideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.permissions-sticky-save-bar.show {
    animation: stickyBarSlideIn 0.3s ease-out;
}

/* Sticky Bar States */
.permissions-sticky-save-bar.has-changes {
    border-bottom-color: #ffc107;
    background: linear-gradient(135deg, #fff3cd 0%, #fef9e7 100%);
}

.permissions-sticky-save-bar.has-changes .sticky-bar-title::after {
    content: '• Modifiche non salvate';
    font-size: 0.8rem;
    color: #856404;
    margin-left: 0.5rem;
    font-weight: 500;
}

/* Pulse animation for save button */
@keyframes pulse {
    0% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 4px 16px rgba(0, 123, 255, 0.4);
        transform: translateY(-1px) scale(1.02);
    }
    100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.permissions-sticky-btn-save.pulse {
    animation: pulse 2s infinite;
}

/* Saving state */
.permissions-sticky-btn-save.saving {
    pointer-events: none;
    opacity: 0.7;
}

.permissions-sticky-btn-save.saving .icon-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments for sticky bar */
@media (max-width: 768px) {
    .permissions-sticky-save-bar {
        padding: 0.75rem 0;
    }
    
    .sticky-bar-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .permissions-sticky-save-bar .row > div {
        text-align: center !important;
    }
    
    .permissions-sticky-save-bar .col-md-4 {
        margin-top: 0.5rem;
    }
    
    .permissions-sticky-btn-back,
    .permissions-sticky-btn-save {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
}

/* Permissions Body */
.permissions-body {
    padding: 2rem;
    background: #ffffff;
}

/* Permission Section */
.permission-section {
    margin-bottom: 2.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 2rem;
}

.permission-section:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.permissions-separator {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--admin-color) 50%, transparent 100%);
    margin: 2rem 0;
    border-radius: 2px;
}

/* Two Column Layout */
.permission-row-layout {
    align-items: flex-start;
    min-height: 120px;
}

.permission-name-section {
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    padding-right: 2rem;
    display: flex;
    align-items: center;
    min-height: 100%;
}

.permission-controls-section {
    padding-left: 2rem;
}

/* Permission Header - Updated for column layout */
.permission-title-container {
    width: 100%;
}

.permission-menu-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
}

.menu-name {
    color: #2c3e50;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-size: 1.1rem;
}

.permission-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-top: 0.5rem;
}

/* Master Switch */
.permission-master-switch {
    position: relative;
    scale: 1.2;
}

.master-toggle {
    transition: all 0.3s ease;
}

.master-toggle:checked + .switch-label {
    background: linear-gradient(135deg, var(--config-color) 0%, #53af67 100%);
    box-shadow: 0 4px 12px rgba(44, 135, 48, 0.3);
}

/* Permission Controls - Updated for column layout */
.permission-controls-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Permissions Tables - Optimized for column layout */
.permissions-table-container,
.submenu-table-container,
.tabs-table-container,
.actions-table-container {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 1rem;
    background: white;
    width: 100%;
}

.permissions-table,
.submenu-permissions-table,
.tabs-permissions-table,
.actions-permissions-table {
    display: table;
    margin: 0;
    border: none;
    background: white;
    font-size: 0.9rem;
}

/* Table Headers - Compact for column layout */
.permissions-table-header,
.submenu-table-header,
.tabs-table-header,
.actions-table-header {
    background: linear-gradient(135deg, var(--admin-color) 0%, #a13f3f 100%);
}

.permissions-table-header th,
.submenu-table-header th,
.tabs-table-header th,
.actions-table-header th {
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.75rem;
    padding: 0.75rem 0.5rem;
    border: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}

/* Table Bodies */
.permissions-table-body,
.submenu-table-body,
.tabs-table-body,
.actions-table-body {
    background: white;
}

/* Table Rows */
.permission-row,
.submenu-row,
.tabs-row,
.actions-row {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.permission-row:hover,
.submenu-row:hover,
.tabs-row:hover,
.actions-row:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Table Cells - Compact for column layout */
.permission-cell-view,
.permission-cell-insert,
.permission-cell-edit,
.permission-cell-delete,
.submenu-cell-view,
.submenu-cell-insert,
.submenu-cell-edit,
.submenu-cell-delete,
.tabs-cell-view,
.tabs-cell-insert,
.tabs-cell-edit,
.tabs-cell-delete,
.actions-cell-view,
.actions-cell-insert,
.actions-cell-edit,
.actions-cell-delete {
    text-align: center;
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
}

.submenu-cell-name,
.submenu-cell-url,
.tabs-cell-name,
.tabs-cell-target,
.actions-cell-name,
.actions-cell-target {
    padding: 0.75rem 0.5rem;
    vertical-align: middle;
    color: #495057;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Permission Switches */
.permission-switch,
.submenu-switch,
.tabs-switch,
.actions-switch {
    transform: scale(1.1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.permission-switch:hover,
.submenu-switch:hover,
.tabs-switch:hover,
.actions-switch:hover {
    transform: scale(1.15);
}

/* Switch Input States */
.permission-input-view:checked + .switch-label,
.submenu-input-view:checked + .switch-label,
.tabs-input-view:checked + .switch-label,
.actions-input-view:checked + .switch-label {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.permission-input-insert:checked + .switch-label,
.submenu-input-insert:checked + .switch-label,
.tabs-input-insert:checked + .switch-label,
.actions-input-insert:checked + .switch-label {
    background: linear-gradient(135deg, #007bff 0%, #17a2b8 100%);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.permission-input-edit:checked + .switch-label,
.submenu-input-edit:checked + .switch-label,
.tabs-input-edit:checked + .switch-label,
.actions-input-edit:checked + .switch-label {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.permission-input-delete:checked + .switch-label,
.submenu-input-delete:checked + .switch-label,
.tabs-input-delete:checked + .switch-label,
.actions-input-delete:checked + .switch-label {
    background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Section Titles - Updated for column layout */
.tabs-section-title,
.actions-section-title {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    color: white;
    padding: 0.75rem 1rem;
    margin: 0 0 0.5rem 0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.2);
}

.tabs-section,
.actions-section {
    margin-top: 1rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Permissions Footer */
.permissions-footer {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 12px 12px;
}

.permissions-btn-back {
    background: white;
    border: 2px solid #6c757d;
    color: #6c757d;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.permissions-btn-back:hover {
    background: #6c757d;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.permissions-btn-save {
    background: linear-gradient(135deg, var(--admin-color) 0%, #a13f3f 100%);
    border: none;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(139, 26, 26, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permissions-btn-save:hover {
    background: linear-gradient(135deg, #a13f3f 0%, var(--admin-color) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 26, 26, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .permissions-body {
        padding: 1rem;
    }
    
    .permission-section {
        padding: 1rem;
    }
    
    .permission-row-layout {
        flex-direction: column;
    }
    
    .permission-name-section {
        border-right: none;
        border-bottom: 2px solid rgba(0, 0, 0, 0.05);
        padding-right: 0;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
    
    .permission-controls-section {
        padding-left: 0;
    }
    
    .permissions-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
    }
    
    .permissions-btn-back,
    .permissions-btn-save {
        width: 100%;
        text-align: center;
    }
    
    .permission-menu-title {
        font-size: 1.1rem;
        align-items: center;
        text-align: center;
    }
    
    .tabs-section-title,
    .actions-section-title {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    /* Mobile table adjustments */
    .permissions-table,
    .submenu-permissions-table,
    .tabs-permissions-table,
    .actions-permissions-table {
        font-size: 0.8rem;
    }
    
    .permissions-table-header th,
    .submenu-table-header th,
    .tabs-table-header th,
    .actions-table-header th {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
    }
    
    .permission-cell-view,
    .permission-cell-insert,
    .permission-cell-edit,
    .permission-cell-delete,
    .submenu-cell-view,
    .submenu-cell-insert,
    .submenu-cell-edit,
    .submenu-cell-delete,
    .tabs-cell-view,
    .tabs-cell-insert,
    .tabs-cell-edit,
    .tabs-cell-delete,
    .actions-cell-view,
    .actions-cell-insert,
    .actions-cell-edit,
    .actions-cell-delete {
        padding: 0.5rem 0.25rem;
    }
    
    .submenu-cell-name,
    .submenu-cell-url,
    .tabs-cell-name,
    .tabs-cell-target,
    .actions-cell-name,
    .actions-cell-target {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }
}

/* Animation for loading states */
@keyframes permissionPulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.permission-section.loading {
    animation: permissionPulse 1.5s ease-in-out infinite;
}

/* Focus states for accessibility */
.permission-switch input:focus + .switch-label,
.submenu-switch input:focus + .switch-label,
.tabs-switch input:focus + .switch-label,
.actions-switch input:focus + .switch-label {
    outline: 3px solid rgba(0, 123, 255, 0.3);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .permissions-card {
        border: 2px solid #000;
    }
    
    .permissions-header {
        background: #000;
        color: #fff;
    }
    
    .permission-section {
        border: 1px solid #000;
    }
}