/* ==========================================================================
   Vendimet mbi shitjet (SaleDecision), rezervimi ose shitja e njesise (SaleModal)
   dhe qasjet e agjencive (AgencyGrants). I perdorin paneli i agjencise (zyra e
   shitjes) dhe ai i ndertuesit (vetem lexim). Vetem tokenet e tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------- propozimi */

/* Kutia me kufi per tabelat brenda nje paneli me mbushje. */
.sale-box { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.sale-box .dt-wrap { border-radius: inherit; }

/* Kushtet e propozimit: lista perballe propozimit, edhe ne celular si tabele. */
.sale-terms { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }

.sale-terms thead th {
  padding: 9px var(--s-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.sale-terms tbody th,
.sale-terms tbody td { padding: 10px var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.sale-terms tbody tr:last-child th,
.sale-terms tbody tr:last-child td { border-bottom: 0; }
.sale-terms tbody th { text-align: left; font-weight: 500; color: var(--ink-3); }
.sale-terms tbody td { color: var(--ink-2); white-space: nowrap; }
.sale-terms .text-right { text-align: right; }
.sale-terms-value { font-weight: 700; color: var(--ink) !important; }
.sale-terms-value.is-warn { color: var(--bad) !important; }

.sale-warn { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--bad); }
.sale-warn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sale-proposal .panel-foot { justify-content: flex-end; }

/* Ndertuesi e sheh propozimin pa butona: vetem qe pret vendimin e zyres. */
.sale-proposal-wait {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-right: auto;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--warn-ink);
}

.sale-proposal-wait svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* -------------------------------------------------------------- historiku */

/* Vija kohore e historikut: ikone me ngjyre per cdo lloj veprimi. */
.sale-tl { display: grid; margin: 0; padding: 0; list-style: none; }

.sale-tl-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); padding-bottom: var(--s-4); }
.sale-tl-item:last-child { padding-bottom: 0; }

/* Vija lidhese mes ikonave. */
.sale-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 2px;
  left: 15px;
  width: 2px;
  border-radius: var(--r-full);
  background: var(--line);
}

.sale-tl-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
}

.sale-tl-dot svg { width: 15px; height: 15px; }
.sale-tl-dot.is-green { background: var(--ok-soft); color: var(--ok-ink); }
.sale-tl-dot.is-amber { background: var(--warn-soft); color: var(--warn-ink); }
.sale-tl-dot.is-red { background: var(--bad-soft); color: var(--bad-ink); }
.sale-tl-dot.is-blue { background: var(--info-soft); color: var(--info-ink); }

.sale-tl-body { display: grid; gap: 2px; min-width: 0; padding-top: 5px; }
.sale-tl-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.sale-tl-text { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.sale-tl-meta { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }

/* ------------------------------------------------------------- formularet */

.sale-form > .alert { margin-bottom: var(--s-4); }
/* Brenda .stack hapesiren e jep gap-i; rreshtat e fushave nuk shtojne te tyren. */
.stack.sale-form > .form-row,
.stack.sale-form > .field,
.sale-form .form-section > .field { margin-bottom: 0; }
.sale-form .form-section:first-child,
.sale-form form > .form-section:first-child,
.sale-form form > .alert + .form-section,
.sale-form form > .sale-form-intro + .form-section { margin-top: 0; padding-top: 0; border-top: 0; }
.sale-form .form-section-title { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.sale-form .form-section-title + .form-section-hint { margin-top: calc(-1 * var(--s-2)); }
.sale-form .form-row:last-child { margin-bottom: 0; }
/* Fusha me shenim poshte nuk i shtyn fqinjet e rreshtit: secila nis nga lart. */
.sale-form .form-row .field { align-content: start; }

.sale-form-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--info-soft);
  border-radius: var(--r);
  background: var(--info-soft);
  color: var(--info-ink);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.sale-form-intro svg { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }

/* ------------------------------------------- rezervimi ose shitja e njesise */

.sale-modal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; }
.sale-modal-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-content: start; }
.sale-modal-form > .alert { margin-bottom: 0; }
.sale-modal .field { margin-bottom: 0; }
.sale-modal .form-grid .field { align-content: start; }
.sale-modal .form-row { margin-bottom: 0; }

.sale-modal-section { margin-top: 0; }
.sale-modal-section .form-section-title { font-size: var(--fs-md); margin-bottom: var(--s-3); }
.sale-modal-section .form-section-title + .form-section-hint { margin-top: calc(var(--s-2) * -1); margin-bottom: var(--s-3); }

.sale-modal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sale-modal-contract { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }

/* --------------------------------------------------------------- qasjet */

.grants > .alert { margin-bottom: 0; }

.grants-note,
.grant-form-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
}

.grants-note svg,
.grant-form-hint svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }

.grants-note { max-width: 90ch; }

.grant-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); }
.grant-name .badge { font-weight: 600; }

.grant-email { overflow-wrap: anywhere; }

/* Emri dhe kontakti i agjencise kane nevoje per hapesire; shifrat jo. */
.grants-list .dt td.is-main { min-width: 230px; }
.grants-list .dt-actions { flex-wrap: nowrap; }
.grant-action-gap { width: 36px; height: 36px; flex: 0 0 auto; }
.grant-status { justify-items: start; gap: 4px; }

.grant-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

.grant-proposals { display: inline-flex; border-radius: var(--r-full); }
.grant-proposals:hover .badge { box-shadow: 0 0 0 2px var(--warn-soft); }

/* Qeliza e agjencise nuk e shtyn tabelen jashte ekranit. */
.grants-list .dt td .cell .cell-text { max-width: 300px; }

.grant-form { display: grid; gap: var(--s-4); }
.grant-form .field { margin-bottom: 0; }

.grant-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.grant-target .cell { min-width: 0; }

.grant-form-hint {
  padding: var(--s-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 720px) {
  .sale-terms thead th, .sale-terms tbody th, .sale-terms tbody td { padding-left: var(--s-3); padding-right: var(--s-3); }
  /* Kolona e propozimit thyhet; ajo e listes (shuma te shkurtra) mbetet ne nje rresht. */
  .sale-terms tbody td { white-space: normal; }
  .sale-terms tbody td:first-of-type { white-space: nowrap; }

  .sale-modal-grid { grid-template-columns: minmax(0, 1fr); }
  .sale-modal .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .sale-modal .choice { align-items: center; gap: var(--s-2); padding: var(--s-3); }
  .sale-modal .choice-text { display: none; }

  /* Shifrat ne dy kolona, jo nje shirit i gjate. */
  .grants .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grants .stat-cell { padding: var(--s-3) var(--s-4); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .grants .stat-cell:nth-child(2n) { border-right: 0; }
  .grants .stat-cell:last-child { border-bottom: 0; }
  /* Numri tek: qeliza e fundit zene gjithe rreshtin. */
  .grants .stat-cell:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  .grants .stat-cell-icon { width: 30px; height: 30px; }

  .grants-list .dt td .cell .cell-text { max-width: none; }
  .grants-list .dt td.is-main { min-width: 0; }
  /* Ne karte statusi zene gjysme rreshti: data e qasjes nuk ka vend. */
  .grants-list .dt.is-stacked .grant-status { justify-items: end; }
  .grants-list .dt.is-stacked .grant-status .cell-sub { display: none; }
  .grants-list .dt.is-stacked tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .grants-list .dt.is-stacked td.is-main { grid-column: 1 / -1; }
  .grants-list .dt.is-stacked td:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line-soft) !important; margin-top: 4px; padding-top: 8px !important; }

  .grant-target { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- printimi */

@media print {
  body.print-plan .sale-box { box-shadow: none; }
}