/* =========
   ParisiennApp UI — Modern / Clean / AAA (Responsive)
   ✅ Même style (cards, typo, shadows)
   ✅ Drawer mobile fiable (AdminLTE OK)
   ✅ Pas de doublons / patchs propres
   ✅ Tables/DataTables scroll mobile
   ========= */

:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:rgba(15,23,42,.08);
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow2:0 6px 18px rgba(15,23,42,.08);
  --radius:16px;
  --radius2:12px;
}

/* -----------------------
   Base
----------------------- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

a{ text-decoration:none; }
.text-muted{ color:var(--muted)!important; }

.content-wrapper{
  background:transparent!important;
}

/* Content spacing */
.content-wrapper.p-3{
  padding:22px!important;
}
@media (max-width:768px){
  .content-wrapper.p-3{ padding:14px!important; }
}

/* -----------------------
   Navbar polish
----------------------- */
.main-header.navbar{
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
  z-index:1035;
}

@media (max-width:560px){
  .navbar-brand small{ display:none!important; }
  .navbar-brand span{ width:30px!important; height:30px!important; border-radius:10px!important; }
}

/* -----------------------
   Sidebar (desktop)
----------------------- */
.main-sidebar{
  border-right:1px solid var(--border);
  z-index:1030;
}

.brand-link{
  border-bottom:1px solid var(--border)!important;
}

.nav-sidebar .nav-link{
  border-radius:12px;
  margin:4px 10px;
  padding:10px 12px;
}
.nav-sidebar .nav-link.active{
  background:rgba(0,0,0,.06)!important;
  color:#111827!important;
  font-weight:700;
}

/* -----------------------
   MOBILE DRAWER (AdminLTE SAFE)
   Le JS ajoute: body.sidebar-open
   IMPORTANT: on neutralise sidebar-mini sur mobile
----------------------- */
@media (max-width: 992px){

  /* content/footer jamais poussés */
  .content-wrapper,
  .main-footer{
    margin-left:0!important;
  }

  /* Force largeur et overlay safe */
  .main-sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;

    width:280px!important;
    height:100vh!important;
    overflow-y:auto!important;

    display:block!important;
    visibility:visible!important;
    opacity:1!important;

    transform:translateX(-110%)!important;
    transition:transform .25s ease!important;

    z-index:99999!important;
  }

  body.sidebar-open .main-sidebar{
    transform:translateX(0)!important;
  }

  /* Overlay */
  body.sidebar-open::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    backdrop-filter:blur(2px);
    z-index:99998;
  }

  /* Neutraliser les effets AdminLTE mini/collapse sur mobile */
  body.sidebar-mini .main-sidebar,
  body.sidebar-collapse .main-sidebar{
    width:280px!important;
    margin-left:0!important;
    left:0!important;
  }
}

/* -----------------------
   Cards
----------------------- */
.card{
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow)!important;
  background:var(--card)!important;
}
.card-header{
  background:transparent!important;
  border-bottom:1px solid var(--border)!important;
  padding:16px 18px!important;
}
.card-body{
  padding:18px!important;
}
@media (max-width:560px){
  .card-header{ padding:12px 14px!important; }
  .card-body{ padding:14px!important; }
}

/* Section titles */
.h-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 12px 0;
}
.h-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:-6px;
}

/* -----------------------
   KPI grid
----------------------- */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
@media (max-width:1100px){
  .kpi-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .kpi-grid{ grid-template-columns:1fr; }
}

.kpi-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow2);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:108px;
}
.kpi-label{ font-size:12.5px; color:var(--muted); font-weight:600; }
.kpi-value{ font-size:26px; font-weight:900; letter-spacing:.2px; line-height:1.1; }
.kpi-meta{ font-size:12px; color:var(--muted); }

/* -----------------------
   Filters
----------------------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.filters .btn,
.filters .form-control{
  border-radius:12px!important;
}
.filters .form-control{
  border:1px solid var(--border)!important;
  box-shadow:none!important;
}
@media (max-width:560px){
  .filters{ flex-direction:column; align-items:stretch; }
  .filters .btn, .filters .form-control{ width:100%; }
}

/* Buttons */
.btn{
  border-radius:12px!important;
  padding:10px 12px!important;
  font-weight:700!important;
}
.btn-outline-dark{
  border-color:var(--border)!important;
}

/* -----------------------
   DataTables / Tables responsive
----------------------- */
.table-responsive,
.dataTables_wrapper{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

table.dataTable{
  width:100%!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;
  overflow:hidden;
  box-shadow:var(--shadow);
}

table.dataTable thead th{
  border-bottom:1px solid var(--border)!important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--muted);
}

table.dataTable tbody td{
  border-bottom:1px solid rgba(15,23,42,.06)!important;
  padding-top:14px!important;
  padding-bottom:14px!important;
  white-space:nowrap; /* mobile safe */
}

table.dataTable tbody tr:hover{
  background:rgba(0,0,0,.02)!important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  padding:8px 10px!important;
  outline:none!important;
  box-shadow:none!important;
}

/* -----------------------
   Charts
----------------------- */
.chart-box{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
  padding:14px;
}
.chart-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.chart-title b{ font-size:14px; letter-spacing:.2px; }
.chart-title small{ color:var(--muted); }

/* Utilities */
.mt-14{ margin-top:14px; }
.gap-14{ gap:14px; }