/* ==========================================================
   FIXFLEET AUDIT TRAIL
========================================================== */

.ff-audit-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:18px;
}

.ff-audit-head h1{
  margin:4px 0 6px;
}

.ff-audit-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ff-audit-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.ff-audit-stat{
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.03);
}

.ff-audit-stat-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.62;
}

.ff-audit-stat-value{
  margin-top:5px;
  font-size:24px;
  font-weight:950;
}

.ff-audit-filters{
  display:grid;
  grid-template-columns:
    minmax(180px,1.5fr)
    repeat(3,minmax(150px,1fr))
    minmax(135px,.8fr)
    minmax(135px,.8fr);
  gap:9px;
  padding:12px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}

.ff-audit-field{
  display:grid;
  gap:5px;
}

.ff-audit-field label{
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.6;
}

.ff-audit-field input,
.ff-audit-field select{
  width:100%;
  box-sizing:border-box;
  padding:9px 10px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:inherit;
}

.ff-audit-filter-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.ff-audit-panel{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:14px;
}

.ff-audit-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:13px;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.ff-audit-table-wrap{
  overflow-x:auto;
}

.ff-audit-table{
  min-width:1000px;
}

.ff-audit-row{
  display:grid;
  grid-template-columns:
    175px
    minmax(150px,1fr)
    145px
    minmax(190px,1.3fr)
    minmax(170px,1fr)
    90px;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.ff-audit-row:last-child{
  border-bottom:0;
}

.ff-audit-row.head{
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.58;
  background:rgba(255,255,255,.018);
}

.ff-audit-time{
  font-size:11px;
}

.ff-audit-user{
  font-weight:850;
}

.ff-audit-small{
  margin-top:2px;
  font-size:10px;
  opacity:.58;
}

.ff-audit-badge{
  display:inline-block;
  padding:4px 7px;
  border-radius:7px;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  background:rgba(84,200,255,.12);
}

.ff-audit-action{
  font-weight:850;
  font-size:12px;
}

.ff-audit-entity{
  font-size:11px;
}

.ff-audit-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 13px;
  border-top:1px solid rgba(255,255,255,.06);
}

.ff-audit-page-actions{
  display:flex;
  gap:7px;
}

.ff-audit-empty{
  padding:30px 15px;
  text-align:center;
  opacity:.58;
}

.ff-audit-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:10120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.68);
}

.ff-audit-modal{
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  box-sizing:border-box;
  padding:20px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:#10151d;
  box-shadow:0 24px 90px rgba(0,0,0,.5);
}

.ff-audit-modal h2{
  margin:0 0 5px;
}

.ff-audit-modal-sub{
  opacity:.65;
  margin-bottom:16px;
}

.ff-audit-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.ff-audit-detail{
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
}

.ff-audit-detail span{
  display:block;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.55;
}

.ff-audit-detail strong{
  display:block;
  margin-top:3px;
  word-break:break-word;
}

.ff-audit-json{
  margin-top:14px;
  padding:12px;
  overflow:auto;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(0,0,0,.16);
  font-size:11px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.ff-audit-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

@media(max-width:1100px){

  .ff-audit-filters{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .ff-audit-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

}

@media(max-width:700px){

  .ff-audit-head{
    display:block;
  }

  .ff-audit-actions{
    margin-top:12px;
  }

  .ff-audit-filters,
  .ff-audit-summary,
  .ff-audit-detail-grid{
    grid-template-columns:1fr;
  }

}


/* FIXFLEET AUDIT MOBILE CARD POLISH */

.ff-audit-modal{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@supports (height:100dvh){

  .ff-audit-modal{
    max-height:
      calc(
        100dvh
        - 24px
        - env(safe-area-inset-top)
        - env(safe-area-inset-bottom)
      );
  }

}

@media(max-width:700px){

  .ff-audit-modal-backdrop{
    align-items:flex-start;

    padding:
      max(12px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
  }

  .ff-audit-modal{
    width:100%;
    padding:16px;
    border-radius:16px;
  }


  /* Convert wide desktop audit table into phone cards */

  .ff-audit-table-wrap{
    overflow-x:visible;
  }

  .ff-audit-table{
    min-width:0;
    width:100%;
    padding:8px;
  }

  .ff-audit-row.head{
    display:none;
  }

  .ff-audit-row:not(.head){
    display:block;
    margin:8px 0;
    padding:14px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:14px;
    background:rgba(255,255,255,.025);
  }

  .ff-audit-row:not(.head) > div{
    position:relative;
    min-height:24px;
    padding:5px 0 5px 92px;
    word-break:break-word;
  }

  .ff-audit-row:not(.head) > div::before{
    position:absolute;
    left:0;
    top:5px;
    width:80px;
    font-size:9px;
    line-height:1.35;
    font-weight:900;
    letter-spacing:.35px;
    text-transform:uppercase;
    opacity:.52;
  }

  .ff-audit-row:not(.head) > div:nth-child(1)::before{
    content:"Date";
  }

  .ff-audit-row:not(.head) > div:nth-child(2)::before{
    content:"User";
  }

  .ff-audit-row:not(.head) > div:nth-child(3)::before{
    content:"Area";
  }

  .ff-audit-row:not(.head) > div:nth-child(4)::before{
    content:"Action";
  }

  .ff-audit-row:not(.head) > div:nth-child(5)::before{
    content:"Record";
  }

  .ff-audit-row:not(.head) > div:nth-child(6){
    padding:10px 0 0;
  }

  .ff-audit-row:not(.head) > div:nth-child(6)::before{
    display:none;
  }

  .ff-audit-row:not(.head) > div:nth-child(6) .button{
    width:100%;
  }

  .ff-audit-user{
    font-size:13px;
  }

  .ff-audit-small{
    overflow-wrap:anywhere;
  }

  .ff-audit-pagination{
    align-items:stretch;
  }

  .ff-audit-page-actions{
    width:100%;
  }

  .ff-audit-page-actions .button{
    flex:1;
  }

}