/* KERVIQO MOBILE REAL COMPACT V5 */
@media (max-width: 820px){

  *{
    box-sizing:border-box!important;
  }

  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    font-size:14px!important;
    -webkit-text-size-adjust:100%!important;
    background:#fafafa!important;
  }

  body{
    margin:0!important;
  }

  .app{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .content{
    width:100%!important;
    max-width:100%!important;
    padding:8px 10px 22px!important;
    overflow-x:hidden!important;
  }

  .topbar{
    margin:0 -10px 14px!important;
    padding:8px 10px 12px!important;
    border-radius:0 0 18px 18px!important;
    background:#fff!important;
    box-shadow:0 5px 18px rgba(15,23,42,.06)!important;
  }

  .mobile-topbar-row{
    height:50px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:42px 1fr 42px!important;
    gap:8px!important;
    align-items:center!important;
  }

  .mobile-menu-btn,
  .mobile-bell{
    width:40px!important;
    height:40px!important;
    min-height:40px!important;
    border-radius:13px!important;
    font-size:22px!important;
  }

  .mobile-topbar-brand{
    justify-content:center!important;
    gap:8px!important;
    min-width:0!important;
  }

  .mobile-topbar-logo,
  .mobile-topbar-logo img{
    width:36px!important;
    height:36px!important;
  }

  .mobile-topbar-brand strong{
    font-size:20px!important;
    letter-spacing:4px!important;
    line-height:1!important;
  }

  .topbar h2{
    font-size:26px!important;
    line-height:1.05!important;
    margin:12px 0 0!important;
    text-align:left!important;
  }

  #pageSubtitle{
    display:none!important;
  }

  .section{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .panel{
    width:100%!important;
    max-width:100%!important;
    padding:12px!important;
    border-radius:18px!important;
    margin-bottom:12px!important;
    overflow:hidden!important;
  }

  .panel-head{
    gap:8px!important;
    margin-bottom:10px!important;
  }

  .panel h3,
  .panel-head h3,
  .section h3{
    font-size:22px!important;
    line-height:1.1!important;
    margin:0!important;
  }

  .section-actionbar,
  .actions{
    gap:8px!important;
  }

  .btn,
  button.btn,
  .section-actionbar .btn,
  .btn-primary,
  .btn-soft,
  .btn-danger,
  .btn-success,
  .btn-info{
    min-height:42px!important;
    height:auto!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-weight:850!important;
    white-space:normal!important;
  }

  .btn-primary{
    color:#fff!important;
    background:linear-gradient(135deg,#d6a000,#a97800)!important;
    border-color:#c9961b!important;
  }

  #loginScreen .btn-primary{
    width:100%!important;
    min-height:48px!important;
    color:transparent!important;
    position:relative!important;
  }

  #loginScreen .btn-primary::before{
    content:"Entrer dans l’application";
    color:#fff!important;
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:15px!important;
    font-weight:900!important;
  }

  #section-backup .btn-primary{
    color:transparent!important;
    position:relative!important;
  }

  #section-backup .btn-primary::before{
    content:"Exporter Excel";
    color:#fff!important;
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:14px!important;
    font-weight:900!important;
  }

  input,select,textarea{
    width:100%!important;
    max-width:100%!important;
    min-height:42px!important;
    height:auto!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

  .toolbar,
  .grid-2,
  .grid-3,
  .grid-4{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .metric-grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .metric-card{
    min-height:88px!important;
    padding:12px!important;
    border-radius:16px!important;
  }

  .metric-card small{
    font-size:12px!important;
  }

  .metric-card strong{
    font-size:22px!important;
    line-height:1.05!important;
  }

  .metric-card .icon{
    width:38px!important;
    height:38px!important;
    font-size:18px!important;
    border-radius:13px!important;
  }

  .table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }

  table,
  thead,
  tbody{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    white-space:normal!important;
    background:transparent!important;
  }

  thead{
    display:none!important;
  }

  tbody tr{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    padding:12px!important;
    border:1px solid #ece2cc!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(15,23,42,.055)!important;
    overflow:hidden!important;
  }

  tbody td{
    border:0!important;
    background:transparent!important;
    padding:0!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.25!important;
    color:#111827!important;
    white-space:normal!important;
    word-break:break-word!important;
  }

  tr:hover td{
    background:transparent!important;
  }

  .badge{
    padding:5px 9px!important;
    border-radius:999px!important;
    font-size:11px!important;
    line-height:1!important;
  }

  .thumb-small,
  .car-photo-cell img,
  .table-entity img{
    object-fit:cover!important;
    border-radius:13px!important;
    border:1px solid #eee4cb!important;
  }

  .actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:100%!important;
  }

  .actions .btn-danger:last-child:nth-child(odd),
  .actions .btn-danger{
    grid-column:auto!important;
  }

  /* VEHICULES */
  #carsTable tr{
    display:grid!important;
    grid-template-columns:86px 1fr!important;
    gap:8px 10px!important;
    align-items:start!important;
  }

  #carsTable td:nth-child(2){
    grid-column:1!important;
    grid-row:1 / span 3!important;
  }

  #carsTable .thumb-small,
  #carsTable .car-photo-cell img{
    width:86px!important;
    height:66px!important;
  }

  #carsTable td:nth-child(1){
    grid-column:2!important;
    font-size:19px!important;
    font-weight:900!important;
  }

  #carsTable td:nth-child(3){
    grid-column:2!important;
    color:#667085!important;
    font-size:15px!important;
  }

  #carsTable td:nth-child(4){
    grid-column:2!important;
  }

  #carsTable td:nth-child(5),
  #carsTable td:nth-child(6),
  #carsTable td:nth-child(7){
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:110px 1fr!important;
    gap:8px!important;
    padding-top:8px!important;
    border-top:1px solid #f0eadc!important;
  }

  #carsTable td:nth-child(5)::before{content:"Prix / jour";color:#667085;font-weight:800;}
  #carsTable td:nth-child(6)::before{content:"Kilométrage";color:#667085;font-weight:800;}
  #carsTable td:nth-child(7)::before{content:"Notes";color:#667085;font-weight:800;}

  #carsTable td:nth-child(8){
    grid-column:1 / -1!important;
    padding-top:10px!important;
  }

  /* CLIENTS */
  #clientsTable tr{
    display:grid!important;
    grid-template-columns:54px 1fr!important;
    gap:6px 10px!important;
  }

  #clientsTable td:nth-child(1){
    grid-column:2!important;
    font-size:18px!important;
    font-weight:900!important;
    position:relative!important;
  }

  #clientsTable td:nth-child(1)::before{
    content:"👤";
    position:absolute!important;
    left:-64px!important;
    top:0!important;
    width:48px!important;
    height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    background:#fff8e7!important;
    border:1px solid #f0e4c5!important;
    color:#b98a00!important;
    font-size:24px!important;
  }

  #clientsTable td:nth-child(2),
  #clientsTable td:nth-child(3),
  #clientsTable td:nth-child(4),
  #clientsTable td:nth-child(7){
    grid-column:2!important;
    font-size:14px!important;
    color:#344054!important;
  }

  #clientsTable td:nth-child(2)::before{content:"Téléphone : ";color:#667085;font-weight:800;}
  #clientsTable td:nth-child(3)::before{content:"CIN : ";color:#667085;font-weight:800;}
  #clientsTable td:nth-child(4)::before{content:"Permis : ";color:#667085;font-weight:800;}
  #clientsTable td:nth-child(7)::before{content:"Adresse : ";color:#667085;font-weight:800;}

  #clientsTable td:nth-child(5){
    grid-column:1 / -1!important;
    padding-top:8px!important;
    border-top:1px solid #f0eadc!important;
  }

  #clientsTable .doc-links{
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:6px!important;
  }

  #clientsTable .doc-icon-btn{
    width:100%!important;
    min-height:40px!important;
    border-radius:12px!important;
    font-size:17px!important;
  }

  #clientsTable td:nth-child(6){
    display:none!important;
  }

  #clientsTable td:nth-child(8){
    grid-column:1 / -1!important;
    justify-self:start!important;
    margin-top:4px!important;
  }

  #clientsTable td:nth-child(9){
    grid-column:1 / -1!important;
    padding-top:8px!important;
  }

  /* LOCATIONS */
  #rentalsTable tr{
    display:grid!important;
    grid-template-columns:86px 1fr!important;
    gap:7px 10px!important;
  }

  #rentalsTable td:nth-child(2){
    grid-column:1!important;
    grid-row:1 / span 3!important;
  }

  #rentalsTable .table-entity{
    display:block!important;
  }

  #rentalsTable .table-entity img,
  #rentalsTable .entity-placeholder{
    width:86px!important;
    height:66px!important;
  }

  #rentalsTable .table-entity strong,
  #rentalsTable .table-entity small{
    display:none!important;
  }

  #rentalsTable td:nth-child(1){
    grid-column:2!important;
    font-size:18px!important;
    font-weight:900!important;
  }

  #rentalsTable td:nth-child(3){
    grid-column:2!important;
    font-size:14px!important;
    color:#667085!important;
  }

  #rentalsTable td:nth-child(3)::before{content:"Immatriculation : ";font-weight:800;color:#667085;}

  #rentalsTable td:nth-child(4),
  #rentalsTable td:nth-child(5),
  #rentalsTable td:nth-child(6),
  #rentalsTable td:nth-child(7),
  #rentalsTable td:nth-child(8){
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:110px 1fr!important;
    gap:8px!important;
    padding-top:7px!important;
    border-top:1px solid #f0eadc!important;
  }

  #rentalsTable td:nth-child(4)::before{content:"Début";color:#667085;font-weight:800;}
  #rentalsTable td:nth-child(5)::before{content:"Retour";color:#667085;font-weight:800;}
  #rentalsTable td:nth-child(6)::before{content:"État";color:#667085;font-weight:800;}
  #rentalsTable td:nth-child(7)::before{content:"Montant";color:#667085;font-weight:800;}
  #rentalsTable td:nth-child(8)::before{content:"Reste";color:#667085;font-weight:800;}

  #rentalsTable td:nth-child(9){
    grid-column:1 / -1!important;
    padding-top:9px!important;
  }

  #rentalsTable td:nth-child(9) .actions{
    grid-template-columns:1fr 1fr!important;
  }

  /* MAINTENANCE */
  #maintenanceTable tr{
    display:grid!important;
    grid-template-columns:86px 1fr!important;
    gap:7px 10px!important;
  }

  #maintenanceTable td:nth-child(1){
    grid-column:1!important;
    grid-row:1 / span 3!important;
  }

  #maintenanceTable .table-entity{
    display:block!important;
  }

  #maintenanceTable .table-entity img,
  #maintenanceTable .entity-placeholder{
    width:86px!important;
    height:66px!important;
  }

  #maintenanceTable .table-entity strong{
    display:block!important;
    grid-column:2!important;
  }

  #maintenanceTable td:nth-child(2){
    grid-column:2!important;
    color:#667085!important;
  }

  #maintenanceTable td:nth-child(3),
  #maintenanceTable td:nth-child(4),
  #maintenanceTable td:nth-child(5),
  #maintenanceTable td:nth-child(6),
  #maintenanceTable td:nth-child(7),
  #maintenanceTable td:nth-child(8){
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:110px 1fr!important;
    gap:8px!important;
    padding-top:7px!important;
    border-top:1px solid #f0eadc!important;
  }

  #maintenanceTable td:nth-child(3)::before{content:"Type";color:#667085;font-weight:800;}
  #maintenanceTable td:nth-child(4)::before{content:"Date / KM";color:#667085;font-weight:800;}
  #maintenanceTable td:nth-child(5)::before{content:"Priorité";color:#667085;font-weight:800;}
  #maintenanceTable td:nth-child(6)::before{content:"Notes";color:#667085;font-weight:800;}
  #maintenanceTable td:nth-child(7)::before{content:"Montant";color:#667085;font-weight:800;}
  #maintenanceTable td:nth-child(8)::before{content:"État";color:#667085;font-weight:800;}

  #maintenanceTable td:nth-child(9){
    grid-column:1 / -1!important;
    padding-top:9px!important;
  }

  /* CHARGES */
  #expensesTable tr{
    display:block!important;
  }

  #expensesTable td:nth-child(1),
  #expensesTable td:nth-child(2),
  #expensesTable td:nth-child(3),
  #expensesTable td:nth-child(4),
  #expensesTable td:nth-child(5){
    display:grid!important;
    grid-template-columns:110px 1fr!important;
    gap:8px!important;
    min-height:28px!important;
    padding:4px 0!important;
  }

  #expensesTable td:nth-child(1)::before{content:"Date";color:#667085;font-weight:800;}
  #expensesTable td:nth-child(2)::before{content:"Titre";color:#667085;font-weight:800;}
  #expensesTable td:nth-child(3)::before{content:"Catégorie";color:#667085;font-weight:800;}
  #expensesTable td:nth-child(4)::before{content:"Montant";color:#667085;font-weight:800;}
  #expensesTable td:nth-child(5)::before{content:"Notes";color:#667085;font-weight:800;}

  #expensesTable td:nth-child(6){
    padding-top:9px!important;
  }

  /* INFRACTIONS */
  .penalty-vehicle-card,
  .penalty-detail-hero{
    grid-template-columns:82px 1fr!important;
    gap:10px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  .penalty-vehicle-card img,
  .penalty-vehicle-photo,
  .penalty-detail-photo{
    width:82px!important;
    height:66px!important;
    max-width:82px!important;
    border-radius:13px!important;
  }

  .penalty-vehicle-card h3,
  .penalty-detail-summary h3{
    font-size:18px!important;
  }

  .penalty-filter-grid,
  .penalty-form-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  #penaltiesTable tr{
    display:block!important;
  }

  #penaltiesTable td{
    display:grid!important;
    grid-template-columns:110px 1fr!important;
    gap:8px!important;
    padding:4px 0!important;
  }

  #penaltiesTable td:nth-child(1)::before{content:"Date";color:#667085;font-weight:800;}
  #penaltiesTable td:nth-child(2)::before{content:"Référence";color:#667085;font-weight:800;}
  #penaltiesTable td:nth-child(3)::before{content:"Détails";color:#667085;font-weight:800;}
  #penaltiesTable td:nth-child(4)::before{content:"Image";color:#667085;font-weight:800;}

  #penaltiesTable td:last-child{
    display:block!important;
    padding-top:9px!important;
  }

  #penaltiesTable td:last-child .actions{
    grid-template-columns:1fr 1fr!important;
  }

  /* HISTORIQUE / SAUVEGARDE / PARAMETRES */
  #historyList .log-card,
  .log-card,
  #section-backup .panel,
  #section-settings .panel{
    padding:12px!important;
    border-radius:18px!important;
  }

  #section-backup > .panel:first-child{
    display:none!important;
  }

  #section-backup .actions{
    grid-template-columns:1fr 1fr!important;
  }

  .contract-toolbar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .contract-toolbar .btn{
    width:100%!important;
  }

  .contract-setup-preview{
    max-width:100%!important;
    overflow:auto!important;
  }
}


/* === KERVIQO SAUVEGARDE INFRACTION CLEAN V9 === */
@media (max-width: 820px){

  /* Do NOT force all sections display. Let app.js handle navigation. */

  /* One red logout */
  .menu .mobile-deconnexion-btn{
    display:none!important;
  }

  .menu #btn-logout,
  .menu .mobile-menu-logout{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    width:100%!important;
    min-height:48px!important;
    padding:12px 18px!important;
    margin-top:12px!important;
    border-radius:16px!important;
    background:#fff5f5!important;
    border:1px solid #f3b5b5!important;
    color:#d92d20!important;
    font-weight:900!important;
    font-size:16px!important;
  }

  .menu #btn-logout::before,
  .menu .mobile-menu-logout::before{
    content:"⏻"!important;
    font-size:15px!important;
  }

  /* Sauvegarde */
  #section-backup .kq-backup-card{
    display:block!important;
    padding:14px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #eee4cb!important;
    box-shadow:0 6px 18px rgba(15,23,42,.06)!important;
  }

  #section-backup .kq-backup-card h3{
    font-size:21px!important;
    line-height:1.1!important;
    margin:0!important;
  }

  #section-backup .muted{
    font-size:13px!important;
    color:#667085!important;
    margin-top:5px!important;
  }

  #section-backup .kq-backup-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:12px!important;
  }

  #section-backup label{
    display:block!important;
    font-size:13px!important;
    font-weight:850!important;
    color:#667085!important;
    margin-bottom:6px!important;
  }

  #section-backup input{
    width:100%!important;
    min-height:44px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

  #section-backup .kq-backup-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin-top:12px!important;
  }

  #section-backup #kqExportExcelBtn,
  #section-backup #kqImportExcelBtn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:44px!important;
    padding:10px!important;
    border-radius:13px!important;
    font-size:14px!important;
    font-weight:900!important;
    color:#fff!important;
  }

  #section-backup #kqExportExcelBtn{
    background:linear-gradient(135deg,#d6a000,#a97800)!important;
    border-color:#c9961b!important;
  }

  #section-backup #kqImportExcelBtn{
    background:#12b76a!important;
    border-color:#12b76a!important;
  }

  #section-backup .kq-backup-note{
    margin-top:12px!important;
    padding:12px!important;
    border-radius:14px!important;
    background:#f8fbff!important;
    border:1px solid #d8e4f2!important;
    color:#8a6500!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  /* Infractions: compact like phone cards */
  #section-penalties .panel{
    padding:12px!important;
    border-radius:18px!important;
  }

  .penalty-vehicle-card,
  .penalty-detail-hero{
    display:grid!important;
    grid-template-columns:78px 1fr!important;
    gap:10px!important;
    align-items:center!important;
    padding:12px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #eee4cb!important;
    box-shadow:0 6px 18px rgba(15,23,42,.06)!important;
  }

  .penalty-vehicle-card img,
  .penalty-vehicle-photo,
  .penalty-detail-photo,
  .penalty-detail-hero img{
    width:78px!important;
    height:70px!important;
    max-width:78px!important;
    border-radius:14px!important;
    object-fit:cover!important;
    border:1px solid #eee4cb!important;
  }

  .penalty-vehicle-card h3,
  .penalty-vehicle-card h4,
  .penalty-detail-summary h3{
    margin:0 0 3px!important;
    font-size:19px!important;
    line-height:1.05!important;
    color:#101828!important;
    font-weight:950!important;
  }

  .penalty-vehicle-card p,
  .penalty-detail-summary p{
    margin:2px 0!important;
    font-size:12.5px!important;
    line-height:1.25!important;
    color:#667085!important;
  }

  .penalty-vehicle-meta,
  .penalty-detail-badges{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    margin-top:7px!important;
  }

  .penalty-mini-badge,
  .penalty-detail-badges .badge{
    padding:5px 8px!important;
    border-radius:999px!important;
    background:#fff8e7!important;
    border:1px solid #eadfbe!important;
    color:#a97800!important;
    font-size:11px!important;
    font-weight:850!important;
  }

  .penalty-filter-grid,
  .penalty-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  #penaltyVehicleDetailTable,
  #penaltyVehicleDetailTable tbody,
  #penaltiesTable,
  #penaltiesTable tbody{
    display:block!important;
    width:100%!important;
  }

  #penaltyVehicleDetailTable thead,
  #penaltiesTable thead{
    display:none!important;
  }

  #penaltyVehicleDetailTable tr,
  #penaltiesTable tr{
    display:block!important;
    width:100%!important;
    padding:12px!important;
    margin:0 0 10px!important;
    border-radius:18px!important;
    border:1px solid #eee4cb!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(15,23,42,.055)!important;
  }

  #penaltyVehicleDetailTable td,
  #penaltiesTable td{
    display:grid!important;
    grid-template-columns:96px 1fr!important;
    gap:8px!important;
    align-items:center!important;
    padding:5px 0!important;
    border:0!important;
    font-size:13.5px!important;
    line-height:1.25!important;
    color:#101828!important;
    word-break:break-word!important;
  }

  #penaltyVehicleDetailTable td:nth-child(1)::before,
  #penaltiesTable td:nth-child(1)::before{content:"Date";color:#667085;font-weight:850;}

  #penaltyVehicleDetailTable td:nth-child(2)::before,
  #penaltiesTable td:nth-child(2)::before{content:"Référence";color:#667085;font-weight:850;}

  #penaltyVehicleDetailTable td:nth-child(3)::before,
  #penaltiesTable td:nth-child(3)::before{content:"Détails";color:#667085;font-weight:850;}

  #penaltyVehicleDetailTable td:nth-child(4)::before,
  #penaltiesTable td:nth-child(4)::before{content:"Image";color:#667085;font-weight:850;}

  #penaltyVehicleDetailTable td:last-child,
  #penaltiesTable td:last-child{
    display:block!important;
    padding-top:10px!important;
    border-top:1px solid #f0eadc!important;
  }

  #penaltyVehicleDetailTable td:last-child::before,
  #penaltiesTable td:last-child::before{
    content:none!important;
    display:none!important;
  }

  #penaltyVehicleDetailTable td:last-child .actions,
  #penaltiesTable td:last-child .actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  #penaltyVehicleDetailTable .btn,
  #penaltiesTable .btn{
    min-height:38px!important;
    padding:8px 9px!important;
    font-size:12.5px!important;
    border-radius:12px!important;
  }
}

/* === KERVIQO FINAL SAUVEGARDE + CONTRACT V10 === */
@media (max-width: 820px){

  /* SAUVEGARDE: force the real existing backup panel to appear */
  body #section-backup,
  body #section-backup.section,
  body #section-backup.section.active{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
  }

  body #section-backup > .panel,
  body #section-backup > .panel:first-child,
  body #section-backup .panel,
  body #section-backup .kq-backup-card,
  body #section-backup .kerviqo-backup-excel-panel{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 14px!important;
    padding:16px!important;
    border-radius:20px!important;
    background:#ffffff!important;
    border:1px solid #efe2c8!important;
    box-shadow:0 10px 28px rgba(15,23,42,.07)!important;
    overflow:hidden!important;
  }

  body #section-backup h3,
  body #section-backup .panel-head h3{
    display:block!important;
    margin:0 0 14px!important;
    font-size:24px!important;
    line-height:1.1!important;
    font-weight:950!important;
    color:#0f172a!important;
  }

  body #section-backup .panel-head{
    display:block!important;
    margin:0!important;
  }

  body #section-backup .muted{
    display:block!important;
    margin-top:-8px!important;
    margin-bottom:12px!important;
    font-size:13px!important;
    line-height:1.35!important;
    color:#667085!important;
  }

  body #section-backup .grid-2,
  body #section-backup .grid,
  body #section-backup form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }

  body #section-backup .field{
    display:block!important;
    width:100%!important;
    margin:0!important;
  }

  body #section-backup label{
    display:block!important;
    margin:0 0 7px!important;
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:900!important;
    color:#566176!important;
  }

  body #section-backup input[type="text"],
  body #section-backup input:not([type]),
  body #section-backup input[type="file"]{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:46px!important;
    padding:11px 13px!important;
    border-radius:14px!important;
    border:1px solid #d9e2ef!important;
    background:#fff!important;
    color:#101828!important;
    font-size:14px!important;
    box-shadow:none!important;
  }

  body #section-backup input[type="file"]{
    padding:9px 10px!important;
  }

  body #section-backup .actions,
  body #section-backup .kq-backup-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-top:14px!important;
  }

  body #section-backup .btn,
  body #section-backup button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:46px!important;
    padding:11px 10px!important;
    border-radius:14px!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-weight:950!important;
    text-align:center!important;
    white-space:normal!important;
    text-indent:0!important;
    position:relative!important;
  }

  body #section-backup button::before,
  body #section-backup button::after{
    content:none!important;
    display:none!important;
  }

  body #section-backup button[onclick*="exportBackup"],
  body #section-backup #kqExportExcelBtn,
  body #section-backup .btn-primary{
    background:linear-gradient(135deg,#d6a000,#a97800)!important;
    border:1px solid #c9961b!important;
    color:#fff!important;
  }

  body #section-backup button[onclick*="importBackup"],
  body #section-backup #kqImportExcelBtn,
  body #section-backup .btn-success{
    background:#12b76a!important;
    border:1px solid #12b76a!important;
    color:#fff!important;
  }

  body #section-backup .note,
  body #section-backup .kq-backup-note{
    display:block!important;
    margin-top:14px!important;
    padding:13px!important;
    border-radius:15px!important;
    background:#f8fbff!important;
    border:1px solid #d8e4f2!important;
    color:#8a6500!important;
    font-size:13px!important;
    line-height:1.45!important;
  }

  /* Hide only server restore buttons, not Excel buttons */
  body #section-backup button[onclick*="restoreLatestServerSnapshot"],
  body #section-backup button[onclick*="syncLocalToServer"],
  body #section-backup #serverSyncStatus{
    display:none!important;
  }

  /* CONTRACT DESIGNER: make placed fields small like real writing */
  .contract-zone-marker,
  #contractDesignerPage .contract-zone-marker,
  .contract-designer .contract-zone-marker,
  .contract-preview .contract-zone-marker,
  .contract-template-preview .contract-zone-marker,
  .contract-field-marker,
  .contract-field,
  .field-marker,
  [data-contract-field],
  [data-zone-key]{
    font-size:6.5px!important;
    line-height:1!important;
    padding:1px 2px!important;
    border-radius:3px!important;
    min-width:0!important;
    max-width:70px!important;
    min-height:0!important;
    height:auto!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .contract-print-text,
  .contract-zone-text,
  .contract-output-field{
    font-size:10px!important;
    line-height:1.05!important;
    font-weight:600!important;
  }

  .contract-field-btn,
  .contract-fields button,
  .contract-toolbar button{
    min-height:32px!important;
    padding:6px 8px!important;
    font-size:11.5px!important;
    border-radius:9px!important;
  }
}

/* === KERVIQO FINAL SECTION + REFRESH FIX V11 === */
@media (max-width: 820px){

  /* Important: Sauvegarde must NOT appear inside other pages */
  body #section-backup:not(.active),
  body #section-backup.section:not(.active){
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
  }

  /* Sauvegarde visible only when active */
  body #section-backup.active,
  body #section-backup.section.active{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    height:auto!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  /* Keep Sauvegarde card nice only on its page */
  body #section-backup.active > .panel,
  body #section-backup.active > .panel:first-child,
  body #section-backup.active .panel,
  body #section-backup.active .kq-backup-card,
  body #section-backup.active .kerviqo-backup-excel-panel{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 14px!important;
    padding:16px!important;
    border-radius:20px!important;
    background:#ffffff!important;
    border:1px solid #efe2c8!important;
    box-shadow:0 10px 28px rgba(15,23,42,.07)!important;
    overflow:hidden!important;
  }

  body #section-backup.active h3,
  body #section-backup.active .panel-head h3{
    display:block!important;
    margin:0 0 14px!important;
    font-size:24px!important;
    line-height:1.1!important;
    font-weight:950!important;
    color:#0f172a!important;
  }

  body #section-backup.active .grid-2,
  body #section-backup.active .grid,
  body #section-backup.active form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    width:100%!important;
  }

  body #section-backup.active .actions,
  body #section-backup.active .kq-backup-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    margin-top:14px!important;
  }

  body #section-backup.active input[type="text"],
  body #section-backup.active input:not([type]),
  body #section-backup.active input[type="file"]{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:46px!important;
    padding:11px 13px!important;
    border-radius:14px!important;
    border:1px solid #d9e2ef!important;
    background:#fff!important;
    color:#101828!important;
    font-size:14px!important;
    box-shadow:none!important;
  }

  body #section-backup.active button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:46px!important;
    padding:11px 10px!important;
    border-radius:14px!important;
    font-size:14px!important;
    font-weight:950!important;
  }

  body #section-backup.active button[onclick*="exportBackup"],
  body #section-backup.active #kqExportExcelBtn,
  body #section-backup.active .btn-primary{
    background:linear-gradient(135deg,#d6a000,#a97800)!important;
    border:1px solid #c9961b!important;
    color:#fff!important;
  }

  body #section-backup.active button[onclick*="importBackup"],
  body #section-backup.active #kqImportExcelBtn,
  body #section-backup.active .btn-success{
    background:#12b76a!important;
    border:1px solid #12b76a!important;
    color:#fff!important;
  }

  body #section-backup.active button[onclick*="restoreLatestServerSnapshot"],
  body #section-backup.active button[onclick*="syncLocalToServer"],
  body #section-backup.active #serverSyncStatus{
    display:none!important;
  }

  /* Contract champs stay small */
  .contract-zone-marker,
  #contractDesignerPage .contract-zone-marker,
  .contract-designer .contract-zone-marker,
  .contract-preview .contract-zone-marker,
  .contract-template-preview .contract-zone-marker,
  .contract-field-marker,
  .contract-field,
  .field-marker,
  [data-contract-field],
  [data-zone-key]{
    font-size:6.5px!important;
    line-height:1!important;
    padding:1px 2px!important;
    border-radius:3px!important;
    min-width:0!important;
    max-width:70px!important;
    min-height:0!important;
    height:auto!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}


/* === KERVIQO FINAL PRINT ONE PAGE A4 === */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .contract-print-page,
  .contract-print-page-image,
  .kerviqo-print-page,
  .kerviqo-a4-print-page,
  .print-page,
  .document-print-page {
    width: 210mm !important;
    height: 297mm !important;
    max-width: 210mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    background: #fff !important;
  }

  .contract-print-page img,
  .contract-print-page-image img,
  .kerviqo-print-page img,
  .kerviqo-a4-print-page img,
  .print-page img,
  .document-print-page img {
    width: 210mm !important;
    height: 297mm !important;
    max-width: 210mm !important;
    max-height: 297mm !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    page-break-after: avoid !important;
  }

  * {
    box-sizing: border-box !important;
  }
}