/* =====================================================================
   Custom Photo Gallery
   Vollständiges Stylesheet – Version 1.6.0
   ================================================================== */

/* ---------- Basis-Farbvariablen (werden via PHP überschrieben) ------ */
:root{
  --cpg-primary-bg:#2271b1;
  --cpg-primary-tx:#ffffff;
  --cpg-tile-min:150px;
  --cpg-tile-gap:10px;
}

/* =====================================================================
   UNIVERSAL / BUTTONS
   ================================================================== */
.cpg-btn,
.cpg-admin-actions .button{
  padding:8px 18px;
  border:0;
  border-radius:6px;
  font-size:14px;
  cursor:pointer;
  background:#e5e5e5;
  color:#1e1e1e;
  transition:background .15s,transform .15s;
}
.cpg-btn:hover,
.cpg-admin-actions .button:hover{
  background:#d4d4d4;
  transform:translateY(-1px);
}
.cpg-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.cpg-btn-primary,
.button.button-primary{
  background:var(--cpg-primary-bg);
  color:var(--cpg-primary-tx);
}
.cpg-btn-primary:hover,
.button.button-primary:hover{
  background:#1a5d8e;
}

/* =====================================================================
   UPLOAD-BEREICH
   ================================================================== */
.cpg-upload-wrapper{
  max-width:840px;
  margin:24px auto;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.cpg-name-label{
  display:block;
  margin-bottom:12px;
  font-weight:600;
}
.cpg-name-label input{
  display:block;
  width:100%;
  max-width:320px;
  padding:8px 14px;
  font-size:15px;
  border:1px solid #ccc;
  border-radius:6px;
  outline:0;
  transition:border-color .15s,box-shadow .15s;
}
.cpg-name-label input:focus{
  border-color:var(--cpg-primary-bg);
  box-shadow:0 0 0 2px rgb(34 113 177 / .25);
}
.cpg-upload-flex{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:center;
}
#cpg-file-input{display:none;}
.cpg-select-col{display:flex;flex-direction:column;align-items:center;}
.cpg-drop-col{
  flex:1 1 260px;
  border:2px dashed #b7b7b7;
  border-radius:10px;
  padding:24px;
  text-align:center;
  background:#fafafa;
  transition:border-color .2s,background .2s;
}
.cpg-drop-col.dragover{
  border-color:var(--cpg-primary-bg);
  background:#f0f8ff;
}
.cpg-drop-text{margin:0;font-size:16px;color:#666;}
.cpg-help{color:#666;font-size:14px;margin-top:8px;}
.cpg-file-list{
  margin-top:16px;
  font-size:14px;
  color:#333;
  border-top:1px solid #ddd;
  padding-top:8px;
}
.cpg-file-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  padding-bottom:6px;
}
.cpg-thumb-mini{
  width:60px;
  height:45px;
  object-fit:cover;
  border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.cpg-file-name{flex:1 1 auto;}
.cpg-file-size{color:#666;}
.cpg-remove{
  cursor:pointer;
  color:#c00;
  font-weight:700;
}
.cpg-remove:hover{color:#900;}
.cpg-bar-wrap{
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px;
  background:#eee;
}
.cpg-filebar{
  height:100%;
  width:0;
  background:var(--cpg-primary-bg);
  transition:width .15s linear;
}

/* =====================================================================
   GALERIE
   ================================================================== */
.cpg-gallery-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.cpg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(var(--cpg-tile-min),1fr));
  gap:var(--cpg-tile-gap);
  margin-top:16px;
}
.cpg-item{
  position:relative;
  aspect-ratio:16 / 9;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  transition:transform .15s,box-shadow .15s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cpg-item:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.cpg-item img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}
@supports not (aspect-ratio: 16/9){
  .cpg-item::before{
    content:'';
    float:left;
    padding-top:56.25%;
  }
  .cpg-item::after{content:'';display:block;clear:both;}
}
.cpg-select{
  position:absolute;
  left:0;bottom:0;width:100%;
  padding:6px 0;
  text-align:center;
  font-size:13px;
  background:rgba(255,255,255,.9);
  border-top:1px solid rgba(0,0,0,.06);
}
.cpg-select input{margin-right:6px;}
.cpg-hide{display:none;}

/* =====================================================================
   ADMIN-TABELLE
   ================================================================== */
#cpg-select-all{cursor:pointer;}

/* =====================================================================
   SNACKBAR
   ================================================================== */
#cpg-snackbar{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  padding:12px 22px;
  border-radius:8px;
  font-size:14px;
  color:#fff;
  display:none;
  z-index:9999;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
#cpg-snackbar.ok {background:#2e7d32;}
#cpg-snackbar.err{background:#c62828;}
#cpg-front-download-all,
#cpg-download-all {
  display: none !important;
  visibility: hidden !important;
}