/* v50 - Mobiele ticketweergave verbeteren */

@media(max-width:900px){

  /* Pagina zelf compact */
  .page-shell{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* Ticket filterkaart onder elkaar */
  .filter-card{
    padding:14px!important;
    border-radius:14px!important;
  }

  .filter-card form,
  .filter-card .filters,
  .ticket-filters,
  .ticket-filter-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .filter-card input,
  .filter-card select,
  .filter-card button,
  .filter-card .btn{
    width:100%!important;
    max-width:none!important;
  }

  /* Checkbox knoppen niet te hoog */
  .filter-card label,
  .filter-card .check-pill,
  .filter-card .checkbox-pill{
    font-size:13px!important;
  }

  /* Bulk acties mobiel onder elkaar */
  .bulk-card{
    padding:12px!important;
    overflow:hidden!important;
  }

  .bulk-card form,
  .bulk-card .bulk-actions,
  .bulk-card .bulk-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .bulk-card select,
  .bulk-card button,
  .bulk-card .btn{
    width:100%!important;
    max-width:none!important;
  }

  /* Ticketlijst mag niet horizontaal de pagina kapot trekken */
  .ticket-list-card{
    overflow:hidden!important;
    border-radius:14px!important;
  }

  /* Desktop tabelkop op mobiel verbergen */
  .ticket-list-card thead,
  .ticket-list-card .table-header,
  .ticket-list-card .ticket-header-row{
    display:none!important;
  }

  /* Tabelstructuur omzetten naar mobiele kaarten */
  .ticket-list-card table,
  .ticket-list-card tbody,
  .ticket-list-card tr,
  .ticket-list-card td{
    display:block!important;
    width:100%!important;
    box-sizing:border-box!important;
  }

  .ticket-list-card tr{
    border-bottom:1px solid #dce9f6!important;
    padding:12px!important;
    background:#fff!important;
  }

  .ticket-list-card td{
    border:0!important;
    padding:4px 0!important;
    font-size:13px!important;
    line-height:1.35!important;
  }

  /* Groepsregel goed leesbaar */
  .company-group-header,
  .ticket-company-group,
  .group-header{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    min-height:42px!important;
    padding:10px 14px!important;
    font-size:15px!important;
    font-weight:800!important;
    background:#f8fbff!important;
    border-top:1px solid #dce9f6!important;
    border-bottom:1px solid #dce9f6!important;
  }

  /* Ticketnummer/titel duidelijker */
  .ticket-list-card a,
  .ticket-title,
  .ticket-number{
    overflow-wrap:anywhere!important;
    word-break:break-word!important;
  }

  /* Status badge compact */
  .ticket-list-card .badge,
  .ticket-list-card .status-badge{
    display:inline-flex!important;
    width:auto!important;
    min-width:70px!important;
    justify-content:center!important;
    margin-top:4px!important;
  }

  /* Laatste actie niet te breed */
  .ticket-list-card .last-action,
  .ticket-list-card .latest-action{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  /* Open-knoppen rechts onderaan kaart */
  .ticket-list-card .btn,
  .ticket-list-card button{
    width:auto!important;
    min-height:34px!important;
    padding:0 12px!important;
    font-size:12px!important;
  }

  /* Checkboxes kleiner en netjes */
  .ticket-list-card input[type="checkbox"]{
    width:18px!important;
    height:18px!important;
    min-height:18px!important;
  }
}

@media(max-width:520px){

  .top .title,
  h1{
    font-size:30px!important;
  }

  .top .sub{
    font-size:13px!important;
  }

  .top .btn-primary,
  .top a.btn-primary{
    width:100%!important;
  }

  .ticket-list-card tr{
    padding:11px 12px!important;
  }

  .ticket-list-card td{
    font-size:12px!important;
  }
}