/*   THEME / RESET  */
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --secondary:#64748b;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --bg-dark:#0f172a;
  --bg-card:#1e293b;
  --bg-hover:#334155;
  --text-primary:#f1f5f9;
  --text-secondary:#94a3b8;
  --border:#334155;
  --shadow:rgba(0,0,0,.3);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  background:var(--bg-dark);
  color:var(--text-primary);
  line-height:1.6;
}

/*   LOGIN  */
#loginScreen{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:linear-gradient(135deg,var(--bg-dark) 0%,#1e3a8a 100%);
}

.login-box{
  background:var(--bg-card);
  padding:3rem;
  border-radius:1rem;
  box-shadow:0 20px 60px var(--shadow);
  width:100%;
  max-width:400px;
  margin:1rem;
}

.login-box h1{
  margin-bottom:2rem;
  text-align:center;
  color:var(--primary);
}

/*    FORMS / INPUTS    */
.form-group{margin-bottom:1.5rem;}

label{
  display:block;
  margin-bottom:.5rem;
  color:var(--text-secondary);
  font-size:.9rem;
}

input,select,textarea{
  width:100%;
  padding:.75rem;
  background:var(--bg-dark);
  border:1px solid var(--border);
  border-radius:.5rem;
  color:var(--text-primary);
  font-size:1rem;
  transition:all .3s;
}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

button{
  width:100%;
  padding:.75rem;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:.5rem;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:all .3s;
}

button:hover{
  background:var(--primary-dark);
  /*transform:translateY(-2px);*/
  box-shadow:0 4px 12px rgba(37,99,235,.4);
}

/*   APP / HEADER  */
#app{display:none;}

header{
  background:var(--bg-card);
  padding:1rem 2rem;
  box-shadow:0 2px 10px var(--shadow);
  position:sticky;
  top:0;
  z-index:100;
}

.header-content{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
}

.logo{
  font-size:1.5rem;
  font-weight:700;
  color:var(--primary);
}

.header-actions{
  display:flex;
  gap:1rem;
  align-items:center;
}

/* Buttons (App) */
.btn{
  padding:.5rem 1rem;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:.5rem;
  cursor:pointer;
  font-size:.9rem;
  transition:all .3s;
  white-space:nowrap;
}
.btn:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--secondary);}
.btn-secondary:hover{background:#475569;}
.btn-success{background:var(--success);}
.btn-success:hover{background:#059669;}

/*   CONTROLS / FILTERS   */
.controls{
  max-width:1400px;
  margin:2rem auto;
  padding:0 2rem;
}

.search-bar{
  position:relative;
  margin-bottom:1.5rem;
}
.search-bar input{padding-left:2.5rem;}

.search-icon{
  position:absolute;
  left:.75rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--text-secondary);
}

.filters{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.filter-group{
  flex:1;
  min-width:200px;
}

/* Mobile Filter Button */
#toggleFiltersBtn{display:none;}
@media (max-width:768px){
  #toggleFiltersBtn{display:block;}
  #filtersPanel{display:none;}
  #filtersPanel.open{display:flex;}
}

/*    STATS   */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.5rem;
  max-width:1400px;
  margin:0 auto 2rem;
  padding:0 2rem;
}

.stat-card{
  background:var(--bg-card);
  padding:1.5rem;
  border-radius:.75rem;
  border-left:4px solid var(--primary);
}

.stat-card h3{
  font-size:.9rem;
  color:var(--text-secondary);
  margin-bottom:.5rem;
}

.stat-card .value{
  font-size:2rem;
  font-weight:700;
  color:var(--text-primary);
}

/*    EQUIPMENT GRID / CARDS    */
.equipment-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem 2rem;
}

.equipment-card{
  background:var(--bg-card);
  border-radius:.75rem;
  overflow:hidden;
  transition:all .3s;
  cursor:pointer;
  border:2px solid transparent;
}

.equipment-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px var(--shadow);
  border-color:var(--primary);
}

.card-image{
  width:100%;
  height:200px;
  object-fit:cover;
  background:var(--bg-dark);
}

.card-content{padding:1.5rem;}

.card-header{
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:1rem;
}

.card-title{
  font-size:1.25rem;
  font-weight:600;
  color:var(--text-primary);
}

.card-brand{
  font-size:.9rem;
  color:var(--text-secondary);
  margin-bottom:.5rem;
}

.badge{
  padding:.25rem .75rem;
  border-radius:1rem;
  font-size:.75rem;
  font-weight:600;
}

.badge-success{background:rgba(16,185,129,.2);color:var(--success);}
.badge-warning{background:rgba(245,158,11,.2);color:var(--warning);}
.badge-danger{background:rgba(239,68,68,.2);color:var(--danger);}
.badge-info{background:rgba(37,99,235,.2);color:var(--primary);}

.card-info{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}

/* shared rows */
.info-row{
  display:flex;
  justify-content:space-between;
  font-size:.9rem;
}
.info-label{color:var(--text-secondary);}
.info-value{color:var(--text-primary);font-weight:500;}

/*    COMPACT CARD MODE   */
.equipment-grid.compact{
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1rem;
}
.equipment-grid.compact .equipment-card:hover{transform:translateY(-2px);}
.equipment-grid.compact .card-image{height:110px;}
.equipment-grid.compact .card-content{padding:.75rem;}
.equipment-grid.compact .card-title{font-size:.95rem;line-height:1.2;}
.equipment-grid.compact .card-brand,
.equipment-grid.compact .card-info{display:none;}
.equipment-grid.compact .card-header{margin-bottom:0;align-items:center;}
.equipment-grid.compact .badge{padding:.2rem .5rem;font-size:.7rem;}

@media (max-width:768px){
  .equipment-grid.compact{grid-template-columns:repeat(2,minmax(140px,1fr));}
}

/*   MODALS (single source of truth)   - centered   - fade only (no drop-down)  */
.modal{
  display:none !important;
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(0,0,0,.8);

  align-items:center !important;
  justify-content:center !important;
  padding:1rem;

  opacity:0;
  transition:opacity 180ms ease;
}

.modal.is-open{
  display:flex !important;
  opacity:1;
}

.modal .modal-content{
  background:var(--bg-card);
  width:100%;
  max-width:800px;
  margin:0 !important;
  border-radius:1rem;
  position:relative;

  /* no translate animation */
  transform:none !important;
  transition:none !important;
}

.modal-header{
  padding:1.5rem 2rem;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.modal-header h2{color:var(--text-primary);}

.close-btn{
  background:none;
  border:none;
  font-size:2rem;
  color:var(--text-secondary);
  cursor:pointer;
  width:auto;
  padding:0;
  line-height:1;
}
.close-btn:hover{color:var(--text-primary);transform:none;}

.modal-body{
  padding:2rem;
  max-height:70vh;
  overflow-y:auto;
}

.modal.is-dimmed .modal-content{
  filter:brightness(.85);
}

@media (max-width:768px){
  header{padding:.75rem 1rem;}
  .header-content{flex-direction:column;gap:.75rem;}
  .header-actions{width:100%;justify-content:space-between;}
  .header-actions .btn{flex:1;padding:.6rem .75rem;font-size:.85rem;}

  .equipment-grid{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:1fr;}
  .filters{flex-direction:column;}

  .modal{padding:.75rem;}
  .modal-header{padding:1rem;}
  .modal-body{padding:1rem;}
}

/*    MODAL FORMS / IMAGE PREVIEW  */
.form-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
  margin-bottom:1rem;
}

.image-preview-container{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}

.image-preview{
  position:relative;
  width:150px;
  height:150px;
}

.image-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:.5rem;
}

.remove-image{
  position:absolute;
  top:-8px;
  right:-8px;
  background:var(--danger);
  color:#fff;
  border:none;
  border-radius:50%;
  width:24px;
  height:24px;
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}

/*   DETAIL VIEW    */
.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

.detail-images{
  display:grid;
  gap:1rem;
}

.detail-image{
  width:100%;
  border-radius:.5rem;
}

.detail-info{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.detail-section{
  padding:1rem;
  background:var(--bg-dark);
  border-radius:.5rem;
}

.detail-section h3{
  margin-bottom:1rem;
  color:var(--primary);
}

.accessories-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.accessory-item{
  padding:.75rem;
  background:var(--bg-card);
  border-radius:.5rem;
  cursor:pointer;
  transition:all .3s;
}
.accessory-item:hover{background:var(--bg-hover);}

/*   LOADING / EMPTY   */
.spinner{
  border:3px solid var(--border);
  border-top:3px solid var(--primary);
  border-radius:50%;
  width:40px;
  height:40px;
  animation:spin 1s linear infinite;
  margin:2rem auto;
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

.empty-state{
  text-align:center;
  padding:4rem 2rem;
  color:var(--text-secondary);
}
.empty-state h3{
  font-size:1.5rem;
  margin-bottom:1rem;
}

/*    (Legacy) QR SECTION (kept)   */
#qrSection{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height 220ms ease, opacity 180ms ease;
}
#qrSection.open{
  max-height:520px;
  opacity:1;
}

/*  DETAIL IMAGE CAROUSEL (FINAL)    */
.detail-carousel{
  position:relative;
  background:#0b1220;
  border-radius:.75rem;
  overflow:hidden;
  border:1px solid var(--border);
}

.carousel-track{
  display:flex;
  transform:translateX(0);
  transition:transform 220ms ease;
  will-change:transform;
  touch-action:pan-y;
}

.carousel-slide{min-width:100%;user-select:none;}

/* Preview in detail box: fill nicely (cover) */
.carousel-slide img{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#0b1220;
}
@media (max-width:768px){
  .carousel-slide img{height:320px;}
}

.carousel-nav{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.carousel-btn{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;

  border:1px solid var(--border);
  background:rgba(15,23,42,.72);
  color:var(--text-primary);
  font-size:22px;
  line-height:1;
  padding:0;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background 160ms ease, border-color 160ms ease;
}
.carousel-btn:hover{
  background:rgba(15,23,42,.88);
  border-color:rgba(148,163,184,.5);
}
.carousel-btn:active{background:rgba(15,23,42,.95);}
.carousel-btn.prev{left:.75rem;}
.carousel-btn.next{right:.75rem;}

.carousel-dots{
  position:absolute;
  left:0;right:0;
  bottom:.65rem;
  display:flex;
  justify-content:center;
  gap:.45rem;
  pointer-events:none;
}
.carousel-dot{
  width:8px;height:8px;
  border-radius:999px;
  background:rgba(148,163,184,.55);
  border:1px solid rgba(51,65,85,.85);
}
.carousel-dot.active{
  background:rgba(241,245,249,.92);
  border-color:rgba(241,245,249,.5);
}

@media (max-width:768px){
  .carousel-btn{width:42px;height:42px;}
  .carousel-btn.prev{left:.5rem;}
  .carousel-btn.next{right:.5rem;}
}

/*    FULLSCREEN IMAGE MODAL (FINAL)   */
#imageModal .modal-content{
  max-width:1000px !important;
  margin:0 !important;
  width:100%;
}

.image-modal-body{padding:0 !important;}

.fullscreen-view{
  position:relative;
  border-radius:1rem;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 50% 25%, rgba(255,255,255,.08), transparent 60%),
    #000;
}

.fullscreen-img{
  width:100%;
  height:min(80vh,720px);
  object-fit:contain;
  object-position:center;
  display:block;
  background:
    radial-gradient(1000px 400px at 50% 20%, rgba(255,255,255,.08), transparent 60%),
    #000;
}

.fullscreen-controls{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.fullscreen-controls .carousel-btn{
  pointer-events:auto;
  background:rgba(0,0,0,.55);
  border-color:rgba(255,255,255,.18);
}
.fullscreen-controls .carousel-btn:hover{background:rgba(0,0,0,.7);}

/*    QR MODAL (FINAL, centered + no jump)   */
#qrModal .modal-content{
  max-width:420px !important;
  width:100%;
}

#qrModal .qr-container{
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center;
  gap:12px;
  text-align:center;
  padding:0; /* padding kommt über modal-body */
}

/* QR holder: fixed size, always centered */
#qrModalCode{
  width:320px !important;
  height:320px !important;
  display:grid !important;
  place-items:center !important;
  margin:0 auto !important;
}

#qrModalCode canvas,
#qrModalCode img{
  width:280px !important;
  height:280px !important;
  display:block !important;

  background:#fff !important;
  padding:14px !important;
  border-radius:14px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.25) !important;

  box-sizing:border-box !important;
  margin:0 !important;
}

/* prevent height jump during render */
#qrModal .modal-body{
  min-height:440px;
}

/* neutralize old helper if it exists */
#qrModal #qrCode{
  width:auto !important;
  display:block !important;
}