/* ============================================
   RESPONSIVE STYLES
   Styles pour rendre le système responsive
   ============================================ */

/* Tables responsive */
@media only screen and (max-width: 767px) {
	.table-responsive {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	table {
		min-width: 100%;
		display: table;
	}
	
	table thead {
		display: none;
	}
	
	table tbody tr {
		display: block;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 10px;
		background: #fff;
	}
	
	table tbody td {
		display: block;
		text-align: right;
		padding: 8px 10px;
		border: none;
		border-bottom: 1px solid #eee;
	}
	
	table tbody td:before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		color: #333;
	}
	
	table tbody td:last-child {
		border-bottom: none;
	}
}

/* Modals et Panels responsive */
@media only screen and (max-width: 767px) {
	.panel {
		width: 95% !important;
		max-width: 95% !important;
		margin: 10px auto !important;
		left: 2.5% !important;
		right: 2.5% !important;
	}
	
	.contentpanel {
		width: 100% !important;
		max-width: 100% !important;
		padding: 15px !important;
	}
	
	.w-600, .w-700, .w-800 {
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Formulaires responsive */
@media only screen and (max-width: 767px) {
	.fmg {
		margin-bottom: 15px;
	}
	
	.fmg input, .fmg select, .fmg textarea {
		width: 100% !important;
		font-size: 16px; /* Évite le zoom sur iOS */
	}
	
	.form-input {
		width: 100% !important;
	}
	
	.search-enhanced {
		flex-direction: column;
		gap: 10px;
	}
	
	.search-enhanced input {
		width: 100% !important;
	}
}

/* Navigation et Header responsive */
@media only screen and (max-width: 767px) {
	.hed {
		padding: 10px !important;
	}
	
	.hed .row {
		flex-direction: column;
	}
	
	.hed .sm-6, .hed .sm-4, .hed .sm-8 {
		width: 100% !important;
		margin-bottom: 10px;
	}
}

/* Boxes et Cards responsive */
@media only screen and (max-width: 767px) {
	.box {
		padding: 15px !important;
		margin-bottom: 15px;
	}
	
	.stats-cards {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		padding: 0 10px !important;
	}
	
	.stat-card {
		padding: 15px !important;
	}
	
	.stat-card .value {
		font-size: 1.5em !important;
	}
}

/* Boutons responsive */
@media only screen and (max-width: 767px) {
	.btn {
		width: 100%;
		margin-bottom: 10px;
		text-align: center;
		padding: 12px 20px;
		font-size: 14px;
	}
	
	.btn.large {
		padding: 15px 25px;
		font-size: 16px;
	}
	
	.right {
		text-align: center !important;
		width: 100% !important;
	}
	
	.right .btn {
		display: block;
		margin: 5px 0;
	}
}

/* DBM Cards responsive */
@media only screen and (max-width: 767px) {
	.dbm-card {
		margin-bottom: 15px;
		padding: 15px !important;
	}
	
	.dbm-card-header {
		flex-direction: column;
		gap: 10px;
	}
	
	.dbm-card-body {
		flex-direction: column;
	}
	
	.dbm-section {
		margin-bottom: 15px;
	}
	
	.dbm-item {
		flex-direction: column;
		gap: 5px;
	}
}

/* Compte header responsive */
@media only screen and (max-width: 767px) {
	.compte-header .row {
		flex-direction: column;
	}
	
	.compte-header .sm-6 {
		width: 100% !important;
		margin-bottom: 15px;
	}
	
	.compte-info {
		margin-bottom: 15px;
	}
	
	.financial-summary {
		width: 100% !important;
	}
	
	.sources-list {
		flex-direction: column;
	}
}

/* Tabs responsive */
@media only screen and (max-width: 767px) {
	.tabs {
		flex-direction: column;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.tab {
		min-width: auto;
		width: 100%;
		margin-bottom: 5px;
	}
}

/* Autocomplete responsive */
@media only screen and (max-width: 767px) {
	.autocomplete {
		position: relative !important;
		width: 100% !important;
		max-height: 200px;
		overflow-y: auto;
	}
	
	.autocomplete li {
		padding: 12px 15px;
		font-size: 14px;
	}
}

/* File engagement boxes responsive */
@media only screen and (max-width: 767px) {
	.fileEngagement {
		width: 100% !important;
		margin-bottom: 10px;
		padding: 15px !important;
	}
	
	.fileEngagement.large {
		padding: 20px !important;
	}
}

/* Tables dans les vues responsive */
@media only screen and (max-width: 767px) {
	.table1, .table, .table0Head, .table0Body {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.table0Head table, .table0Body table {
		width: 100%;
		min-width: 600px; /* Largeur minimale pour le scroll horizontal */
	}
	
	.table1 thead, .table thead, .table0Head thead {
		display: none;
	}
	
	.table1 tbody tr, .table tbody tr, .table0Body tbody tr {
		display: block;
		margin-bottom: 15px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 10px;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}
	
	.table1 tbody td, .table tbody td, .table0Body tbody td {
		display: block;
		text-align: right;
		padding: 8px 10px;
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}
	
	.table1 tbody td:before, .table tbody td:before, .table0Body tbody td:before {
		content: attr(data-label);
		position: absolute;
		left: 10px;
		width: 45%;
		text-align: left;
		font-weight: bold;
		color: #333;
		white-space: nowrap;
	}
	
	.table1 tbody td:last-child, .table tbody td:last-child, .table0Body tbody td:last-child {
		border-bottom: none;
	}
	
	/* Pour les tables avec scroll horizontal */
	.table-responsive-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}
}

/* Grid responsive pour les listes */
@media only screen and (max-width: 767px) {
	.grid-2, .grid-3, .grid-4 {
		grid-template-columns: 1fr !important;
	}
}

/* Espacements responsive */
@media only screen and (max-width: 767px) {
	.mt-15, .mt-10 {
		margin-top: 10px !important;
	}
	
	.mb-15, .mb-10 {
		margin-bottom: 10px !important;
	}
	
	.pl-15, .pr-15 {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* Container responsive */
@media only screen and (max-width: 767px) {
	.container {
		width: 100% !important;
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Text alignment responsive */
@media only screen and (max-width: 767px) {
	.tar, .right {
		text-align: center !important;
	}
}

/* Flexbox utilities responsive */
@media only screen and (max-width: 767px) {
	.d-flex {
		flex-direction: column;
	}
	
	.d-flex.row {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Dashboard responsive */
@media only screen and (max-width: 767px) {
	.dashboard-tabs-header {
		flex-direction: column;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.dashboard-tab {
		padding: 12px 20px;
		font-size: 12px;
		white-space: nowrap;
		min-width: auto;
		flex: 1;
		text-align: center;
	}
	
	.topdashboard {
		margin-left: -5px;
		margin-right: -5px;
	}
	
	.topdashboard .sm-12, .topdashboard .md-6, .topdashboard .lg-4, .topdashboard .xl-3 {
		padding-left: 5px;
		padding-right: 5px;
		margin-bottom: 10px;
	}
	
	.box.bgray, .box.bblue, .box.bgreen {
		margin-bottom: 15px;
		padding: 15px !important;
	}
	
	.service-stats {
		grid-template-columns: 1fr !important;
		gap: 15px !important;
		padding: 0 10px !important;
	}
	
	.service-stat-card {
		padding: 20px !important;
	}
	
	.service-stat-card .value {
		font-size: 24px !important;
	}
	
	.service-stat-card .icon {
		font-size: 30px !important;
	}
	
	.stats-summary {
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		padding: 0 10px !important;
	}
	
	.stat-summary-card {
		padding: 15px !important;
	}
	
	.stat-summary-card .value {
		font-size: 20px !important;
	}
	
	.chart-container {
		padding: 15px !important;
		margin-bottom: 15px;
	}
	
	.chart-wrapper, .chart-wrapper-large {
		height: 250px !important;
	}
	
	.chart-title {
		font-size: 14px !important;
		margin-bottom: 10px !important;
	}
}

/* Print styles */
@media print {
	.panel, .btn, .autocomplete, .tabs {
		display: none !important;
	}
	
	table {
		page-break-inside: avoid;
	}
}