/* ============================================================
   NESTFETCH — popups.css
   All overlay, popup and side-panel display components.
   Rebuilt from extra-display.css with NestFetch design tokens.

   Covers:
     LargePopUp   → .nf-overlay  /  #display-large
     SidePopUp    → .nf-side-panel
     SmallSidePopUp → .nf-corner-panel
     Report card  → .nf-report-card
     Upload form  → .nf-upload-card
   ============================================================ */

/* ── Z-INDEX STACK ──────────────────────────────────────────── */
/* Nav:          100  (defined in style.css)                      */
/* LargePopUp:   200  — full-screen, sits above everything        */
/* LargePopUp-2: 201  — second screen stacked on top of first     */
/* SidePopUp:    150  — bottom-right panel                        */
/* SmallSidePopUp: 150                                             */


/* ============================================================
   LARGE POPUP OVERLAY
   Created by: largePopUp class in core/ui.js
   Selector used by JS: id="display-large"  class="other-screen"
   ============================================================ */

/* Full-screen backdrop */
#display-large,
.other-screen {
  position:   fixed;
  inset:      0;                 /* top/right/bottom/left: 0 */
  width:      100%;
  height:     100dvh;
  z-index:    200;
  background: rgba(6, 14, 24, 0.90);
  backdrop-filter:          blur(6px);
  -webkit-backdrop-filter:  blur(6px);

  /* Centre the inner card */
  display:         flex;
  align-items:     center;
  justify-content: center;

  overflow-y:      auto;
  overflow-x:      hidden;       /* no horizontal scroll */
  scrollbar-width: none;
  padding:         var(--space-6) var(--space-4);

  /* Entrance animation */
  animation: overlay-in 0.22s var(--ease) both;
}

#display-large-2,
.display-large-2 {
  z-index: 201;                  /* stacks above the first overlay */
}

#display-large::-webkit-scrollbar,
.other-screen::-webkit-scrollbar { display: none; }

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Close button (fixed top-right of the overlay) ── */
.other-screen-close-btn,
#close-large-display,
#close-large-display-2 {
  position:      fixed;
  top:           var(--space-4);
  right:         var(--space-4);
  z-index:       202;

  display:       flex;
  align-items:   center;
  justify-content: center;

  width:         40px;
  height:        40px;
  border-radius: var(--r-full);
  border:        1.5px solid var(--clr-slate);
  background:    var(--clr-card);
  color:         var(--clr-muted);
  font-size:     1.1rem;
  cursor:        pointer;
  transition:    color var(--transition), background var(--transition),
                 border-color var(--transition), transform 0.15s var(--ease);
}

.other-screen-close-btn:hover,
#close-large-display:hover,
#close-large-display-2:hover {
  color:        var(--clr-text);
  background:   var(--clr-slate);
  border-color: var(--clr-teal);
  transform:    rotate(90deg);
}

/* ── Items holder — wrapper inside the overlay ── */
#display-large-item-holder,
#display-large-item-holder-2,
.other-screen .other-screen-items-holder {
  width:       100%;
  max-width:   860px;          /* constrain content width */
  height:      auto;
  max-height:  90dvh;
  overflow-y:  auto;
  overflow-x:  hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-slate) transparent;

  /* Centre self within the overlay flex container */
  display:     flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
}

/* ============================================================
   REPORT / ALERT POPUP CARD
   The inner card rendered by displayReport()
   ============================================================ */

.nf-report-card,
.popScreenHolder {
  width:         min(560px, 92vw);
  max-height:    80dvh;
  padding:       var(--space-8) var(--space-8);
  overflow-y:    auto;
  scrollbar-width: thin;

  background:    var(--clr-card);
  border:        1px solid var(--clr-slate);
  border-radius: var(--r-xl);
  box-shadow:    var(--shadow-lg), 0 0 40px rgba(0,201,167,0.06);

  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);

  /* Entrance animation */
  animation: card-pop 0.28s var(--ease) both;
}

@keyframes card-pop {
  from { opacity: 0; transform: scale(0.88) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Heading inside report card */
.popScreenHolder h2,
.nf-report-card h2 {
  font-family:  var(--font-head);
  font-size:    var(--text-xl);
  font-weight:  700;
  color:        var(--clr-text);
  text-align:   center;
  padding-bottom: var(--space-3);
  border-bottom:  1px solid var(--clr-slate);
  width:          100%;
}

/* Body paragraph */
.popParagraph,
.nf-report-card p {
  font-size:   var(--text-base);
  color:       var(--clr-muted);
  text-align:  center;
  line-height: 1.7;
  width:       100%;
}

/* Action button inside report */
#report-action-btn {
  margin-top: var(--space-2);
  font-size: large;
  font-weight: bold;
  padding: var(--space-2);
  border-radius: 10px;
  border: none;
  outline: none;
  box-shadow: 0 0 5px var(--clr-teal);
  color: var(--clr-slate);
  background-color: var(--clr-text);
  padding: var(--space-2) var(--space-4);
}

#report-action-btn:hover {
  box-shadow: 0 0 7px var(--clr-teal);
}


/* ============================================================
   UPLOAD FORM CARD
   Appears inside a LargePopUp when processUpload() is called
   ============================================================ */

#upload-main-holder,
.nf-upload-wrapper {
  width:           100%;
  display:         flex;
  justify-content: center;
  padding:         var(--space-4);
}

#upload-items-holder,
.nf-upload-card,
.popUpForm-holder {
  width:         min(520px, 94vw);
  background:    var(--clr-card);
  border:        1px solid var(--clr-slate);
  border-radius: var(--r-xl);
  padding:       var(--space-8);
  box-shadow:    var(--shadow-lg);
  animation:     card-pop 0.28s var(--ease) both;
}

#upload-items-holder fieldset,
.nf-upload-card fieldset,
.popUpForm-holder fieldset {
  border:        1.5px solid var(--clr-slate);
  border-radius: var(--r-lg);
  padding:       var(--space-6);
}

#upload-items-holder fieldset legend,
.popUpForm legend {
  font-family:    var(--font-head);
  font-size:      var(--text-md);
  font-weight:    700;
  color:          var(--clr-teal);
  padding:        0 var(--space-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#upload-items-holder label {
  display:       flex;
  flex-direction: column;
  gap:           var(--space-2);
  font-size:     var(--text-sm);
  font-weight:   600;
  color:         var(--clr-text);
  margin-bottom: var(--space-4);
}

#upload-items-holder input[type="file"],
#upload-items-holder input:not([type="file"]),
#upload-items-holder textarea,
.nf-upload-card input,
.nf-upload-card textarea {
  width:         100%;
  background:    var(--clr-slate);
  color:         var(--clr-text);
  border:        1.5px solid transparent;
  border-radius: var(--r-md);
  padding:       0.65rem 1rem;
  font-size:     var(--text-sm);
  transition:    border-color var(--transition), box-shadow var(--transition);
  outline:       none;
}

#upload-items-holder input:focus,
#upload-items-holder textarea:focus {
  border-color: var(--clr-teal);
  box-shadow:   0 0 0 3px var(--clr-teal-glow);
}

#upload-items-holder textarea,
.upload-input-desc {
  height:          80px;
  resize:          vertical;
  scrollbar-width: none;
  text-transform:  none;
}

#upload-items-holder input[type="file"] {
  padding:    var(--space-3);
  cursor:     pointer;
  color:      var(--clr-muted);
  font-size:  var(--text-sm);
}

#upload-validator-msg {
  font-size:  var(--text-xs);
  color:      var(--clr-red);
  margin-top: var(--space-1);
  min-height: 1em;
}


/* ============================================================
   SIDE POPUP PANEL
   Created by: sidePopUp class — id="display-side"
   ============================================================ */

#display-side,
.side-screen {
  position:      fixed;
  bottom:        0;
  right:         0;
  z-index:       150;

  width:         400px;
  height:        560px;
  max-height:    75dvh;

  background:    var(--clr-card);
  border:        1px solid var(--clr-slate);
  border-top-left-radius: var(--r-xl);
  box-shadow:    var(--shadow-lg), var(--shadow-teal);

  display:       grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  overflow:      hidden;

  animation: side-in 0.3s var(--ease) both;
}

@keyframes side-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Close button — top-left corner of the panel */
#close-side-display,
.side-screen-close-btn {
  position:      absolute;
  top:           var(--space-3);
  left:          var(--space-3);
  z-index:       2;

  display:       flex;
  align-items:   center;
  justify-content: center;

  width:         32px;
  height:        32px;
  border-radius: var(--r-full);
  border:        1.5px solid var(--clr-slate);
  background:    var(--clr-slate);
  color:         var(--clr-muted);
  font-size:     0.9rem;
  cursor:        pointer;
  transition:    color var(--transition), background var(--transition),
                 border-color var(--transition), transform 0.15s var(--ease);
}

#close-side-display:hover,
.side-screen-close-btn:hover {
  color:        var(--clr-text);
  background:   var(--clr-slate-lt);
  border-color: var(--clr-teal);
  transform:    rotate(90deg);
}

/* Content area inside the side panel */
#display-side-item-holder,
.side-screen-items-holder {
  grid-row:       1 / 2;
  grid-column:    1 / 2;
  width:          100%;
  height:         100%;
  overflow-y:     auto;
  overflow-x:     hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-slate) transparent;
  padding:        var(--space-10) var(--space-5) var(--space-5);
}


/* ============================================================
   SMALL CORNER PANEL
   Created by: smallSidePopUp class — class="other-screen-small"
   ============================================================ */

.other-screen-small {
  position:      fixed;
  bottom:        var(--space-4);
  right:         var(--space-4);
  z-index:       150;

  width:         320px;
  height:        auto;
  max-height:    44dvh;

  background:    var(--clr-card);
  border:        1px solid var(--clr-slate);
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-md);
  overflow:      hidden;

  display:       grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;

  animation: side-in 0.25s var(--ease) both;
}

#close-small-display,
.other-screen-close-btn-small {
  position:        absolute;
  top:             var(--space-2);
  left:            var(--space-2);
  z-index:         2;

  display:         flex;
  align-items:     center;
  justify-content: center;

  width:           28px;
  height:          28px;
  border-radius:   var(--r-full);
  border:          1px solid var(--clr-slate);
  background:      var(--clr-slate);
  color:           var(--clr-muted);
  font-size:       0.8rem;
  cursor:          pointer;
  padding:         0;
  transition:      color var(--transition), background var(--transition),
                   transform 0.15s var(--ease);
}

.other-screen-close-btn-small:hover {
  color:      var(--clr-teal);
  background: var(--clr-slate-lt);
  transform:  rotate(90deg);
}

#display-small-item-holder,
.other-screen-items-holder-small {
  grid-row:        1 / 2;
  grid-column:     1 / 2;
  width:           100%;
  height:          100%;
  overflow-y:      auto;
  scrollbar-width: thin;
  padding:         var(--space-8) var(--space-4) var(--space-4);
}


/* ============================================================
   SHARED INNER CONTENT — works inside any popup type
   ============================================================ */

/* Selected photo — full view inside large popup */
.selected-photo-holder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  max-height:      85dvh;
  padding:         var(--space-4);
}

.selected-photo {
  max-width:     100%;
  max-height:    85dvh;
  object-fit:    contain;
  border-radius: var(--r-lg);
  box-shadow:    var(--shadow-lg);
}

/* Comment / chat inner layout */
.comment-main-holder {
  display:        flex;
  flex-direction: column;
  height:         100%;
  width:          100%;
  max-width:      600px;
}

.all-comments-holder {
  flex:            1;
  overflow-y:      auto;
  padding:         var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--clr-slate) transparent;
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-4);
}

.make-comment-holder {
  display:       flex;
  align-items:   flex-end;
  gap:           var(--space-3);
  padding:       var(--space-4);
  border-top:    1px solid var(--clr-slate);
  background:    var(--clr-card);
}

.make-comment-holder textarea {
  flex:            1;
  background:      var(--clr-slate);
  color:           var(--clr-text);
  border:          1.5px solid transparent;
  border-radius:   var(--r-md);
  padding:         0.6rem 0.9rem;
  resize:          none;
  min-height:      40px;
  max-height:      120px;
  font-size:       var(--text-sm);
  transition:      border-color var(--transition);
  scrollbar-width: none;
  outline:         none;
}

.make-comment-holder textarea:focus { border-color: var(--clr-teal); }

.make-comment-holder button {
  width:         40px;
  height:        40px;
  border-radius: var(--r-full);
  border:        none;
  background:    var(--clr-teal);
  color:         #04342C;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1rem;
  flex-shrink:   0;
  transition:    background var(--transition), transform 0.15s;
}

.make-comment-holder button:hover { background: var(--clr-teal-dim); transform: scale(1.05); }


/* ============================================================
   ANIMATIONS (shared)
   ============================================================ */

@keyframes zoom-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes zoom-out {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(0.7); opacity: 0; }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 890px) {
  .popScreenHolder,
  .nf-report-card {
    width:   min(500px, 90vw);
    padding: var(--space-6);
  }

  .popParagraph { font-size: var(--text-md); }

  #display-side,
  .side-screen {
    width:      360px;
    max-height: 70dvh;
  }
}

/* Phone */
@media (max-width: 480px) {

  /* Full-screen overlay — give card more room */
  #display-large,
  .other-screen {
    padding: var(--space-3) var(--space-2);
    align-items: flex-end;   /* sheet-style — slides from bottom */
  }

  .popScreenHolder,
  .nf-report-card {
    width:           100%;
    /* border-radius:   var(--r-xl) var(--r-xl) 0 0; */
    padding:         var(--space-6) var(--space-4) var(--space-8);
    max-height:      85dvh;
    animation:       sheet-in 0.3s var(--ease) both;
  }

  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }

  /* Close btn moves to top-left on small screens */
  .other-screen-close-btn,
  #close-large-display {
    top:   var(--space-3);
    left:  var(--space-3);
    right: auto;
    width:  34px;
    height: 34px;
    font-size: 0.95rem;
  }

  /* Side panel becomes full-screen on phone */
  #display-side,
  .side-screen {
    inset:           0;
    width:           100%;
    height:          100dvh;
    max-height:      100dvh;
    border-radius:   0;
  }

  /* Small corner panel stretches to full width */
  .other-screen-small {
    right:         0;
    left:          0;
    bottom:        0;
    width:         100%;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height:    50dvh;
  }

  /* Upload card */
  #upload-items-holder,
  .nf-upload-card,
  .popUpForm-holder {
    padding: var(--space-5) var(--space-4);
  }

  #upload-items-holder fieldset,
  .popUpForm-holder fieldset {
    padding: var(--space-4);
  }
}

/* Mini phone */
@media (max-width: 360px) {
  .popScreenHolder,
  .nf-report-card { padding: var(--space-5) var(--space-3) var(--space-6); }
}