/* /css/components/cropper.css */
@layer components {
  /* Overlay schließt den Viewport */
  #picCropOverlay{
    position: fixed;
    inset: 0;
    display: none;                 /* wird über aria toggled */
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,.65);
    z-index: 11000;                /* über Chat-FAB etc. */
  }
  #picCropOverlay[aria-hidden="false"]{ display: flex; }

  /* Dialog */
  .picCrop-container{
    width: min(92vw, 760px);
    max-height: 86vh;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    display: grid;
    grid-template-rows: auto 1fr auto;
    z-index: 11001;
  }

  .picCrop-header{ padding: 14px 18px; border-bottom: 1px solid #eee; font-weight: 600; }
  .picCrop-body{ padding: 14px 18px; display: grid; grid-template-rows: 1fr auto auto; gap: 10px; }
  .picCrop-stage{
    position: relative;
    min-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    cursor: grab;
  }
  .picCrop-stage.grabbing{ cursor: grabbing; }
  .picCrop-canvas{ position: absolute; inset: 0; }
  .picCrop-helpbar{
    justify-self: center; width: 35%; min-width: 240px; max-width: 420px;
    text-align: center; color: #fff;
    background: rgba(20,20,20,.55);
    border: 1px solid rgba(255,255,255,.25);
    padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.3;
    backdrop-filter: saturate(120%) blur(2px);
    pointer-events: none; margin-top: 6px;
  }
  .picCrop-controls{ display: flex; align-items: center; gap: 12px; }
  .picCrop-controls label{ font-size: 14px; color: #444; min-width: 42px; }
  .picCrop-controls input[type=range]{ flex: 1; }
  .picCrop-footer{ padding: 12px 18px; border-top: 1px solid #eee; display: flex; gap: 10px; justify-content: flex-end; }

  /* kleiner Screen */
  @media (max-width: 740px){
    .picCrop-stage{ min-height: 360px; }
    .picCrop-helpbar{ width: 80%; min-width: 0; max-width: 520px; }
  }
#picCropOverlay[aria-hidden="false"]{
    display: flex !important;      /* stellt sicher, dass das Overlay wirklich erscheint */
  }

  /* Fehler-Toast (wird von showError() genutzt – sichtbar auch OHNE offenes Overlay) */
  .picCrop-toast{
    position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
    background:rgba(20,20,20,.9); color:#fff; padding:10px 14px; border-radius:10px;
    border:1px solid rgba(255,255,255,.2); font-size:14px; line-height:1.35;
    box-shadow:0 10px 28px rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
    z-index:11002;
  }
  .picCrop-toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

  /* Optionales Inline-Fehlerfeld unter dem Avatar (falls im Markup vorhanden) */
  #imageErrorMsg{
    margin-top: 8px;
    font-size: 13px;
    color: #b91c1c;                 /* rot */
  }

  /* Nativen File-Input unsichtbar, aber zugänglich (Kamera-Button triggert ihn) */
  #profileImageInput,
  .pv-avatar-wrap input[type="file"]{
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}