/* ==========================================================================
   1. CORE WRAPPER & LAYOUT
   ========================================================================== */
.complaint-wrapper {
  font-family: 'Roboto', sans-serif;
  padding: 0 !important;
  display: block;
    /* margin-top: 0 !important; */

  /* margin-top: 55px !important; */
  min-height: calc(100vh - 65px);
}

/* ==========================================================================
   2. STICKY HEADER SECTION
   ========================================================================== */
.top-header {
  width: 100%;
  height: 65px;
  margin-top: -16px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #F3F4F6;
  position: sticky;
  top: 0;
  /* z-index: 1000; */
    z-index: 100;
  box-sizing: border-box;
}

.header-left   { display: flex; align-items: center; gap: 12px; }

.back-btn {
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.back-btn:hover { background: #f3f4f6; }

.divider { width: 1px; height: 24px; background: #E5E7EB; }

.title-box { display: flex; align-items: center; gap: 10px; }

.title-icon {
  width: 32px; height: 32px;
  background: #1A58F0; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}

.title-box h4 { font-size: 14px; font-weight: 700; margin: 0; color: #111827; }
.title-box p  { font-size: 12px; color: #9CA3AF; margin: 0; }

.header-actions { display: flex; align-items: center; gap: 12px; }

.btn-cancel {
  padding: 8px 16px;
  border: 1px solid #E5E7EB; background: #fff;
  border-radius: 8px; font-size: 12px; font-weight: 600;
  color: #374151; cursor: pointer;
}

.btn-save {
  padding: 8px 16px; background: #E5E7EB;
  border: none; border-radius: 8px; color: #9CA3AF;
  display: flex; align-items: center; gap: 8px;
  cursor: not-allowed; font-weight: 700; font-size: 12px;
  transition: all 0.2s ease;
}
.btn-save.btn-active { background: #1A58F0; color: #ffffff; cursor: pointer; }
.save-icon { width: 12px; height: 12px; }

/* ==========================================================================
   3. COMPLAINT CARD & FORM
   ========================================================================== */
.complaint-card {
  max-width: 896px; margin: 24px auto;
  border: 1px solid #E5E7EB; border-radius: 12px;
  background: #ffffff; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.section-title {
  width: 100%; height: 56px; background: #E9F0FF;
  padding: 0 24px; display: flex; align-items: center; gap: 12px;
}

.item-icon {
  width: 32px; height: 32px;
  background: rgba(26,88,240,0.1); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}

.header-text  { font-size: 14px; font-weight: 700; color: #111827; }
.required-group { margin-left: auto; }

.badge-required {
  background: #ffffff; color: #374151;
  padding: 4px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  border: 1px solid #D1D5DB;
}

.form-padding-wrap { padding: 24px; }

.form-group {
  display: flex; flex-direction: column; margin-bottom: 16px;
}

.form-group label {
  font-size: 13px; font-weight: 500; color: #374151;
  margin-bottom: 6px; display: flex; align-items: center; gap: 4px;
}

.required-icon   { width: 8px; height: 8px; margin-bottom: 2px; }
.upload-main-label { font-weight: 600 !important; }
.sub-label { color: #9CA3AF; font-weight: 400; font-size: 11px; }

/* ==========================================================================
   4. FIELD ICON SYSTEM
   ========================================================================== */

.field-wrap {
  position: relative;
  width: 100%;
  display: block;
  /* isolation: isolate — NAHI lagana, dropdown panel tod deta hai */
}

/* Left icon — ::before */
.field-wrap::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: var(--field-icon);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
  opacity: 0.6;
  z-index: 3; /* ng-select-container (z-index:1) ke upar */
}

/* ── Native Input ───────────────────────────────────────────────── */
.field-wrap .form-controler {
  width: 100% !important;
  height: 42px !important;
  padding: 0 16px 0 40px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background-color: #F9FAFB !important;
  font-size: 13px !important;
  font-family: 'Roboto', sans-serif !important;
  color: #374151 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}
.field-wrap .form-controler:focus {
  border-color: #1A58F0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(26,88,240,0.08) !important;
}

/* Textarea */
.field-wrap:has(textarea.form-controler)::before { top: 14px !important; transform: none !important; }
.field-wrap textarea.form-controler {
  height: auto !important; min-height: 90px !important;
  padding: 12px 16px 12px 40px !important; resize: vertical !important;
}

/* Disabled */
.field-wrap .form-controler:disabled {
  background-color: #F3F4F6 !important;
  color: #9CA3AF !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ==========================================================================
   5. NG-SELECT STYLING  ([searchable]="false" use ho raha hai)
   ========================================================================== */

/* -- Container ------------------------------------------------------------ */
.field-wrap .ng-select .ng-select-container {
  height: 42px !important;
  min-height: 42px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  background-color: #F9FAFB !important;
  font-size: 13px !important;
  font-family: 'Roboto', sans-serif !important;
  color: #374151 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1 !important;          /* ::before (z-index:3) ke neeche rahega */
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s !important;
}

/* Icon space — left padding */
.field-wrap .ng-select .ng-select-container .ng-value-container {
  padding-left: 40px !important;
  align-items: center !important;
}

/* Placeholder */
.field-wrap .ng-select .ng-placeholder {
  color: #9CA3AF !important;
  font-size: 13px !important;
  font-family: 'Roboto', sans-serif !important;
}

/* Selected value */
.field-wrap .ng-select .ng-value {
  color: #374151 !important;
  font-size: 13px !important;
}

/* Focus */
.field-wrap .ng-select.ng-select-focused .ng-select-container {
  border-color: #1A58F0 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(26,88,240,0.08) !important;
}

/* Arrow — right side */
.field-wrap .ng-select .ng-arrow-wrapper {
  padding-right: 12px !important;
  padding-left: 8px !important;
}
.field-wrap .ng-select .ng-arrow {
  border-color: #9CA3AF transparent transparent !important;
}
.field-wrap .ng-select.ng-select-opened .ng-arrow {
  border-color: transparent transparent #1A58F0 !important;
}

/* ── NG-SELECT Search Input — icon ke baad se text start ho ── */
.field-wrap .ng-select .ng-input > input {
  /* padding-left: 40px !important;   */
    padding-left: 30px !important;         /* ng-input ka padding already set ho gaya upar */
padding-top: 5px !important;

  font-size: 13px !important;
  font-family: 'Roboto', sans-serif !important;
  color: #374151 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Disabled */
.field-wrap .ng-select.ng-select-disabled .ng-select-container {
  background-color: #F3F4F6 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* -- Dropdown Panel (appendTo="body" — body level pe render hota hai) ----- */
/* Dono selectors: field-wrap ke andar + body level dono cover karne ke liye */

.field-wrap .ng-select .ng-dropdown-panel,
.ng-dropdown-panel {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  z-index: 99999 !important;
}

.field-wrap .ng-select .ng-dropdown-panel .ng-dropdown-panel-items,
.ng-dropdown-panel .ng-dropdown-panel-items {
  max-height: 220px !important;
}

/* Options — guaranteed LEFT aligned */
.field-wrap .ng-select .ng-option,
.ng-dropdown-panel .ng-option {
  text-align: left !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-family: 'Roboto', sans-serif !important;
  color: #374151 !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
}

.field-wrap .ng-select .ng-option:hover,
.field-wrap .ng-select .ng-option.ng-option-marked,
.ng-dropdown-panel .ng-option:hover,
.ng-dropdown-panel .ng-option.ng-option-marked {
  background-color: #E9F0FF !important;
  color: #1A58F0 !important;
}

.field-wrap .ng-select .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-option.ng-option-selected {
  background-color: #E9F0FF !important;
  font-weight: 600 !important;
  color: #1A58F0 !important;
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
@media (max-width: 920px) {
  .complaint-card { margin: 16px; }
}
@media (max-width: 768px) {
  .top-header { height: auto; padding: 16px; flex-wrap: wrap; gap: 16px; }
  .header-actions { width: 100%; justify-content: space-between; }
  .header-actions button { flex: 1; justify-content: center; }
  .form-padding-wrap { padding: 16px; }
    .form-padding-wrap-image {
      padding: 0 16px 16px;
    }
}
@media (max-width: 480px) {
  .divider { display: none; }
  .title-box p { display: none; }
  .badge-required { padding: 2px 8px; }
}


/* ==========================================================================
   DETAIL VIEW ADDITIONS — activity-line & login-details
   Yeh styles forms.css ke saath use ho (import karein ya usi file mein add karein)
   ========================================================================== */

/* Readonly input — complaint-type form-controler jaisi styling,
   but slightly tinted to signal non-editable */
.form-controler[readonly] {
  background-color: #F9FAFB !important;
  color: #374151 !important;
  cursor: default !important;
  user-select: text !important; /* user copy kar sake */
}

/* Textarea readonly — word-break for long user-agent strings */
.field-wrap textarea.form-controler[readonly] {
  word-break: break-all;
  resize: none !important;
}

/* Loading state inside card */
.status-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  gap: 12px;
  color: #9CA3AF;
  font-size: 13px;
}

.status-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid #E5E7EB;
  border-top-color: #1A58F0;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* end sessions and activity user deatils login logout */
/* ==========================================================
   VIEW MODE IMAGE PREVIEW ONLY
   ========================================================== */

.attachment-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 8px;
  width: 100%;
}

button.attachment-link,
.attachment-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 110px;
  flex: 0 0 110px;
  padding: 4px;
  margin: 0;
  border: 1px solid #dbe4ff;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s ease;
}

button.attachment-link:hover,
.attachment-link:hover {
  border-color: #1A58F0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: scale(1.03);
}

.attachment-thumbnail-small {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: none;
  border-radius: 6px;
  background: transparent;
}

/* ================= IMAGE MODAL ================= */

.image-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .7);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  z-index: 10000;
}

.image-modal-content {
  position: relative;
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

.image-preview-large,
.image-modal-img {
  display: block;
  max-width: 80vw;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 8px;
}

.image-close-btn,
.image-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #111827;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}

.image-close-btn:hover,
.image-modal-close:hover {
  background: #ef4444;
}

/* ==========================================================
   IMAGE UPLOADER — COMPONENT-SPECIFIC (forms.css ke saath use hogi)
   Note 1: attachment-wrapper / attachment-link / attachment-thumbnail-small /
   image-modal-* classes yahan repeat NAHI ki — wo forms.css me
   already hain (View Mode Image Preview block).
   Note 2: lib-image-uploader-lib ki internal styling (.upload-container,
   .upload-box, .upload-content) ko yahan se override NAHI kiya —
   library apni khud ki styling leke aati hai, usko chhedne se uska
   layout toot raha tha. Sirf wrapper positioning aur upload-overlay
   (jo library ke UPAR overlay hota hai, andar nahi) yahan rakhi hai.
   ========================================================== */

.field-error-text {
  font-size: 11px;
}

.no-images-text {
  font-size: 12px;
  color: #6b7280;
}

.uploading-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
}

.status-spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid #E5E7EB;
  border-top-color: #1A58F0;
  border-radius: 50%;
  animation: spin-small .7s linear infinite;
  flex-shrink: 0;
}

/* ---- Wrapper: sirf positioning ke liye, library ke andar kuch force nahi kar raha ---- */
.modern-uploader-wrapper {
  position: relative;
  margin-top: 16px;
}

/* ---- Per-slot upload overlay — sirf usi tile ke exact size/position ke barabar
   render hota hai jiski upload chal rahi hai (top/left/width/height JS se set hote
   hain, component.ts ki getSlotRect() se, live measure karke). Baaki tiles is
   overlay se untouched rehte hain — user unme normal drag/click/delete kar sakta
   hai jabki koi doosri image upload ho rahi ho. ---- */
.upload-slot-overlay {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(3px);
  border-radius: 10px;
  pointer-events: none;
  z-index: 999;
  transition: top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}

.upload-slot-percent {
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
}
.form-padding-wrap-image {
  padding: 0 24px 24px;
}
.form-padding-wrap:has(+ .form-padding-wrap-image) {
  padding-bottom: 0;
}
@keyframes spin-small {
  to {
    transform: rotate(360deg);
  }
}
/* event ke form me icon dene ke liye */
.field-wrap{
  --field-icon: url('/assets/img/category-sub.svg');
}
/* end icons */