/**
 * BAARALOG UI - Design SaaS moderne
 * Inspiration: Linear, Supabase, Stripe
 * Palette: Primary #1E293B | Secondary #334155 | Background #F1F5F9 | Cards #FFFFFF
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========== 1. TYPOGRAPHIE ========== */
body,
.content-wrapper,
.box,
.table,
.btn,
.form-control,
input,
select,
textarea {
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

body { color: #0F172A !important; }

/* ========== 2. BACKGROUND GLOBAL ========== */
body,
.content-wrapper,
.right-side,
.wrapper {
  background-color: #F1F5F9 !important;
}

/* ========== 3. SIDEBAR ========== */
/* 1. Background comme le gris des pages (#F1F5F9) */
.skin-blue .main-sidebar,
.skin-blue .left-side {
  background-color: #F1F5F9 !important;
  border-right: 1px solid #E2E8F0 !important;
}

/* 2. Textes et icônes = couleur de l'ancien background (#1E293B) */
.skin-blue .sidebar-menu > li.header {
  color: #64748b !important;
  background: rgba(30, 41, 59, 0.06) !important;
  padding: 12px 16px !important;
}

.skin-blue .sidebar-menu > li > a,
.skin-blue .treeview-menu > li > a {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  border-left: none !important;
  color: #1E293B !important;
  transition: all 0.2s ease !important;
  margin: 2px 8px !important;
}

/* 3. Survol dynamique = affiche la couleur #1E293B avec texte blanc */
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .treeview-menu > li > a:hover {
  background: #1E293B !important;
  color: #fff !important;
}

/* 3. Élément sélectionné = même effet dynamique */
.skin-blue .sidebar-menu > li.active > a {
  background: #1E293B !important;
  color: #fff !important;
}

.skin-blue .sidebar-menu > li > .treeview-menu {
  background: transparent !important;
  margin: 0 8px 8px !important;
}

.skin-blue .treeview-menu > li.active > a {
  background: #1E293B !important;
  color: #fff !important;
}

/* User panel adapté au fond clair */
.skin-blue .user-panel > .info,
.skin-blue .user-panel > .info > a {
  color: #1E293B !important;
}

/* Icônes = couleur de l'ancien background (#1E293B) */
.sidebar .fa,
.sidebar .ion,
.sidebar .text-aqua,
.sidebar .text-light-blue {
  color: #1E293B !important;
}

/* Icônes au survol / sélectionné = blanc */
.skin-blue .sidebar-menu > li:hover > a .fa,
.skin-blue .sidebar-menu > li:hover > a .ion,
.skin-blue .sidebar-menu > li.active > a .fa,
.skin-blue .sidebar-menu > li.active > a .ion,
.skin-blue .treeview-menu > li > a:hover .fa,
.skin-blue .treeview-menu > li > a:hover .ion,
.skin-blue .treeview-menu > li.active > a .fa,
.skin-blue .treeview-menu > li.active > a .ion {
  color: #fff !important;
}

/* ========== 4. NAVBAR ========== */
.skin-blue .main-header .navbar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

.skin-blue .main-header .navbar .nav > li > a {
  color: #0F172A !important;
}

.skin-blue .main-header .navbar .nav > li > a:hover,
.skin-blue .main-header .navbar .nav > li > a:active,
.skin-blue .main-header .navbar .nav > li > a:focus,
.skin-blue .main-header .navbar .nav .open > a,
.skin-blue .main-header .navbar .nav .open > a:hover,
.skin-blue .main-header .navbar .nav .open > a:focus,
.skin-blue .main-header .navbar .nav > .active > a {
  background: #F1F5F9 !important;
  color: #0F172A !important;
}

.skin-blue .main-header .navbar .sidebar-toggle {
  color: #0F172A !important;
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

/* Logo / partie titre : garde la couleur sombre (#1E293B) */
.skin-blue .main-header .logo {
  background-color: #1E293B !important;
  color: #fff !important;
  border-bottom: none !important;
}

.skin-blue .main-header .logo:hover {
  background-color: #334155 !important;
  color: #fff !important;
}

.skin-blue .main-header li.user-header {
  background-color: #1E293B !important;
}

@media (max-width: 767px) {
  .skin-blue .main-header .navbar .dropdown-menu li a:hover {
    background: #F1F5F9 !important;
  }
}

/* ========== 5. CARDS (Boxes) ========== */
.box {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

.box .box-header {
  padding: 20px 20px 0 !important;
  border-bottom: 1px solid #E2E8F0 !important;
  margin-bottom: 0 !important;
}

.box .box-header .box-title {
  color: #0F172A !important;
  font-weight: 600 !important;
}

.box .box-body {
  padding: 20px !important;
  color: #0F172A !important;
}

.box .box-footer {
  padding: 16px 20px !important;
  border-top: 1px solid #E2E8F0 !important;
  background: #F8FAFC !important;
}

/* ========== 6. DASHBOARD STAT CARDS (Small-box) ========== */
.small-box {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #0F172A !important;
  min-height: 100px !important;
}

.small-box .inner {
  flex: 1 !important;
}

.small-box h3 {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  margin: 0 0 4px 0 !important;
}

.small-box p {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
}

.small-box .icon {
  font-size: 36px !important;
  color: #334155 !important;
  opacity: 0.5 !important;
}

.small-box.bg-1 .icon,
.small-box.bg-2 .icon,
.small-box.bg-3 .icon,
.small-box.bg-4 .icon {
  color: #334155 !important;
  opacity: 0.6 !important;
}

/* Remove old gradient backgrounds */
.small-box.bg-1,
.small-box.bg-2,
.small-box.bg-3,
.small-box.bg-4 {
  border-left: 4px solid #1E293B !important;
}

.small-box.bg-1 { border-left-color: #1E293B !important; }
.small-box.bg-2 { border-left-color: #334155 !important; }
.small-box.bg-3 { border-left-color: #475569 !important; }
.small-box.bg-4 { border-left-color: #64748b !important; }

/* ========== 7. INFO BOXES ========== */
.info-box {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  border-left: 4px solid #1E293B !important;
}

.info-box-icon {
  border-radius: 8px !important;
}

.info-box-icon.bg-5 {
  background: #F8FAFC !important;
  color: #334155 !important;
}

.info-box-icon.bg-5 i {
  color: #334155 !important;
}

.info-box-content {
  padding: 16px 20px !important;
}

.info-box-text,
.info-box-number {
  color: #0F172A !important;
}

/* ========== 8. TABLES ========== */
.content .table {
  background: #FFFFFF !important;
}

.box .table {
  margin: 0 !important;
}

.box .table-responsive {
  border-radius: 0 0 12px 12px !important;
}

.table thead th {
  background: #F8FAFC !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  border-color: #E2E8F0 !important;
  padding: 12px 16px !important;
}

.table tbody td {
  color: #0F172A !important;
  padding: 12px 16px !important;
  border-color: #E2E8F0 !important;
}

.table tbody tr:hover {
  background: #F8FAFC !important;
}

.table-bordered {
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 8px 12px !important;
}

/* ========== 9. BOUTONS ========== */
/* Enregistrer, Valider - même style que "Nouveau Client" (accent indigo) */
.btn-success,
.bg-green {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.bg-green:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}

.btn-primary {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #fff !important;
}

/* Fermer, Annuler - reste identique (gris foncé #334155) */
.btn-warning,
.btn-warning.close_btn {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.close_btn:hover {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #fff !important;
}

.btn-info,
.btn-default {
  background: #fff !important;
  border: 1px solid #E2E8F0 !important;
  color: #0F172A !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}

.btn-info:hover,
.btn-default:hover {
  background: #F8FAFC !important;
  border-color: #334155 !important;
  color: #0F172A !important;
}

.btn-group .get_tab_records,
.btn-group .get_tab_records.active {
  border-radius: 8px !important;
}

/* Boutons d'action (Nouveau X, Ajouter...) dans les en-têtes de box */
.box-header .box-tools .btn,
.box-header.with-border .box-tools .btn,
.content-header .box-tools .btn {
  min-width: 200px !important;
  width: auto !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.35 !important;
  padding: 10px 16px !important;
  overflow: visible !important;
}
.box-header .box-tools,
.box-header.with-border .box-tools {
  min-width: 200px !important;
  overflow: visible !important;
}
/* Colonnes restrictives : assurer largeur min pour éviter le débordement */
.box-header .col-md-2.pull-right {
  min-width: 220px !important;
}
.box-header,
.box-header .row {
  overflow: visible !important;
}

/* Couleur moderne pour boutons d'action (Nouveau, Ajouter) */
.box-header .box-tools .btn-info,
.box-header.with-border .box-tools .btn-info,
.box-header .box-tools a.btn.btn-info {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
.box-header .box-tools .btn-info:hover,
.box-header .box-tools .btn-info:focus,
.box-header .box-tools a.btn.btn-info:hover,
.box-header .box-tools a.btn.btn-info:focus {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}
.box-header .box-tools .btn-info i,
.box-header .box-tools .btn-info .fa,
.box-header .box-tools a.btn.btn-info i,
.box-header .box-tools a.btn.btn-info .fa {
  color: #fff !important;
}

@media (max-width: 767px) {
  .box-header .box-tools .btn,
  .box-header.with-border .box-tools .btn {
    min-width: 160px !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .box-header .col-md-2.pull-right {
    min-width: 100% !important;
  }
}

/* ========== 10. FORMULAIRES ========== */
.form-control,
select.form-control,
textarea.form-control {
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 10px 12px !important;
  line-height: 1.5 !important;
  transition: all 0.2s ease !important;
}

/* Input et select : éviter la coupure du texte en bas */
input.form-control,
select.form-control {
  min-height: 40px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: #334155 !important;
  box-shadow: 0 0 0 2px rgba(51, 65, 85, 0.1) !important;
  outline: none !important;
}

.form-control:hover {
  border-color: #94a3b8 !important;
}

.select2-container--default .select2-selection--single {
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 10px 12px !important;
  min-height: 40px !important;
  line-height: 1.5 !important;
}

/* Texte du Select2 : éviter la coupure en bas (corrige margin-top négatif d'AdminLTE) */
.select2-container .select2-selection--single .select2-selection__rendered {
  margin-top: 0 !important;
  line-height: 1.5 !important;
  padding: 2px 0 !important;
  height: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #334155 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #334155 !important;
}

/* ========== 11. ESPACEMENT ========== */
.content-header {
  margin-bottom: 24px !important;
}

.content-header h1 {
  color: #0F172A !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

.content {
  padding: 24px 15px !important;
}

.row {
  margin-bottom: 24px !important;
}

.row:last-child {
  margin-bottom: 0 !important;
}

/* ========== 12. PAGINATION ========== */
.pagination > li > a,
.pagination > li > span {
  border-radius: 8px !important;
  border-color: #E2E8F0 !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: #334155 !important;
  border-color: #334155 !important;
}

.pagination > li > a:hover {
  background: #F1F5F9 !important;
  border-color: #334155 !important;
  color: #334155 !important;
}

/* ========== 13. LIENS ========== */
a {
  color: #334155 !important;
}

a:hover,
a:focus {
  color: #475569 !important;
}

.breadcrumb > li > a {
  color: #334155 !important;
}

/* ========== 14. LABELS & BADGES ========== */
.label-primary,
.label-success {
  background: #334155 !important;
  border-radius: 6px !important;
}

.label-info,
.label-warning {
  background: #475569 !important;
  border-radius: 6px !important;
}

/* ========== 15. NOTIFICATIONS TOASTR (neutre, gris #334155) ========== */
#toast-container > .toast,
#toast-container > .toast-success,
#toast-container > .toast-info,
#toast-container > .toast-warning,
#toast-container > .toast-error {
  background-color: #334155 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ========== 16. ALERTS (neutre gris #334155, comme bouton Fermer) ========== */
.alert {
  border-radius: 8px !important;
  border: 1px solid #E2E8F0 !important;
}

.alert-success,
.alert.alert-success {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #fff !important;
}

.alert-success .close,
.alert-success strong,
.alert-success a,
.alert.alert-success .close,
.alert.alert-success strong,
.alert.alert-success a {
  color: #fff !important;
}

.alert-info,
.alert.alert-info {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #fff !important;
}

.alert-info .close,
.alert-info strong,
.alert-info a,
.alert.alert-info .close,
.alert.alert-info strong,
.alert.alert-info a {
  color: #fff !important;
}

.alert-warning,
.alert.alert-warning {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #fff !important;
}

.alert-warning .close,
.alert-warning strong,
.alert-warning a,
.alert.alert-warning .close,
.alert.alert-warning strong,
.alert.alert-warning a {
  color: #fff !important;
}

.alert-danger,
.alert.alert-danger {
  background: #e74c3c !important;
  border-color: #e74c3c !important;
  color: #fff !important;
}

.alert-danger .close,
.alert-danger strong,
.alert-danger a,
.alert.alert-danger .close,
.alert.alert-danger strong,
.alert.alert-danger a {
  color: #fff !important;
}

/* ========== 17. SCROLL TO TOP ========== */
.scroll-to-top {
  background: #334155 !important;
  border-radius: 8px !important;
}

.scroll-to-top:hover {
  background: #475569 !important;
}

/* ========== RÉGLAGES ========== */

/* 1. Boutons rouges (btn-danger) - texte et icônes blancs */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
a.btn-danger {
  color: #fff !important;
}

.btn-danger i,
.btn-danger .fa,
a.btn-danger i,
a.btn-danger .fa {
  color: #fff !important;
}

/* 2. Sidebar - texte long : autoriser le retour à la ligne */
.skin-blue .sidebar-menu > li > a,
.skin-blue .treeview-menu > li > a {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.skin-blue .sidebar-menu > li > a > span,
.skin-blue .treeview-menu > li > a > span {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* Largeur sidebar réduite */
@media (min-width: 768px) {
  .main-sidebar,
  .left-side {
    width: 220px !important;
  }
  .main-header .navbar {
    margin-left: 220px !important;
  }
  .main-header .logo {
    width: 220px !important;
  }
  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 220px !important;
  }
  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .right-side,
  .sidebar-collapse .main-footer {
    margin-left: 0 !important;
  }
  .sidebar-collapse .main-header .navbar {
    margin-left: 50px !important;
  }
  .sidebar-collapse .main-header .logo {
    width: 50px !important;
  }
}

/* 3. Tableaux - dropdown Action (fix positionné via dropdown-action-fix.js) */
.table-responsive .dropdown-menu,
.dropdown-menu {
  z-index: 9999 !important;
  min-width: 220px !important;
}

/* Menu Action fixe - responsif (desktop + mobile) */
.dropdown-action-fixed {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 767px) {
  .dropdown-action-fixed {
    max-width: calc(100vw - 24px) !important;
    min-width: 180px !important;
  }
}

/* ========== 17. MAIN FOOTER ========== */
.main-footer {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #64748b !important;
}

/* ========== 18. RESPONSIVE ========== */
@media (max-width: 991px) {
  .small-box {
    margin-bottom: 16px !important;
  }
}

@media (max-width: 767px) {
  .content-header,
  .section.content {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .box .box-body,
  .box .box-header {
    padding: 16px !important;
  }
}

/* ========== 19. DATATABLES RESPONSIVE - Mobile UX ========== */
/* S'applique à tous les DataTables avec responsive: true (actuels et à venir) */
/* Masquer le + car le clic sur la ligne entière a la même fonction */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before,
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
  display: none !important;
}
/* Espacement ligne en mode mobile */
@media (max-width: 767px) {
  table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child,
  table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
    padding-left: 12px !important;
    min-height: 44px !important;
  }
}
/* Ligne entière cliquable - curseur pointer sur toute la ligne en mode mobile */
@media (max-width: 767px) {
  .dataTables_wrapper table.dataTable.collapsed tbody tr[role="row"] {
    cursor: pointer !important;
  }
  .dataTables_wrapper table.dataTable.collapsed tbody tr[role="row"] td {
    cursor: pointer !important;
  }
  /* La checkbox garde son curseur pour ne pas confondre */
  .dataTables_wrapper table.dataTable.collapsed .column_checkbox,
  .dataTables_wrapper table.dataTable.collapsed input[type="checkbox"],
  .dataTables_wrapper table.dataTable.collapsed .icheckbox_square-orange {
    cursor: pointer !important;
  }
}

/* ========== 20. PAGE LOGIN ========== */
/* Dégradé radial avec les couleurs BAARALOG (blanc → gris → #334155) */
.login-page,
.register-page {
  background: radial-gradient(circle, #CBD5E1 0%, #94A3B8 50%, #64748B 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 20px 0 !important;
}

.login-page .login-box,
.register-page .login-box,
.login-page .register-box,
.register-page .register-box {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

.login-logo,
.register-logo {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 15px !important;
}

.login-logo a,
.login-logo b,
.register-logo a,
.register-logo b {
  display: block !important;
  text-align: center !important;
}

.login-logo img,
.register-logo img {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  max-height: 100px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.login-box-body,
.register-box-body {
  padding: 16px 20px !important;
}

.login-box-msg,
.register-box-msg {
  padding: 0 20px 12px 20px !important;
}

/* Sur très petit écran, autoriser le scroll si nécessaire */
@media (max-height: 600px) {
  .login-page,
  .register-page {
    overflow-y: auto !important;
    justify-content: flex-start !important;
    padding: 15px 0 !important;
  }
}