/* DARKO v13.11.2b — probni izgled: kompaktni poslovi + profilne kartice ekipe.
 * Samo dizajn oglasa. Bez novih polja, promjena ovlasti ili baze.
 * Kategorije koriste izvorne emoji simbole; navigacijske ikone su lokalni SVG.
 */

/* Base */
.listing-card-v2{
  padding:0!important;
  overflow:hidden;
  min-width:0;
  height:fit-content;
  border-radius:18px;
  border:1px solid #d5e4d9;
  box-shadow:0 5px 18px rgba(23,55,47,.045);
  transition:box-shadow .16s ease;
}
.listing-card-v2:hover{box-shadow:0 11px 26px rgba(23,55,47,.08)}
.darko-icon{
  display:inline-block;
  flex:none;
  width:18px;
  height:18px;
  vertical-align:-.2em;
  color:inherit;
}
.listing-typebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:39px;
  padding:8px 14px;
}
.listing-type-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.88rem;
  letter-spacing:.012em;
  font-weight:900;
  line-height:1.2;
}
.listing-type-label .darko-icon{width:19px;height:19px}
.listing-age{
  font-size:.75rem;
  font-weight:650;
  line-height:1.25;
  text-align:right;
  opacity:.93;
  white-space:nowrap;
}
.listing-card-v2 .listing-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-end;
  align-items:center;
  margin:0;
}
.listing-card-v2 .listing-actions button{
  min-height:44px;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid #c2dccb;
  background:#eaf5ec;
  color:#145b40;
  font-size:.9rem;
  line-height:1.3;
  font-weight:800;
}
.listing-card-v2 .listing-actions .listing-delete{
  background:#fff;
  border-color:#dec9c5;
  color:#754d47;
}
.listing-card-v2 .listing-actions button:focus-visible{
  outline:3px solid #176e51;
  outline-offset:2px;
}

/* Need help — short, purposeful cards. Two columns, like the agreed reference. */
.cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}
.job-card.listing-card-v2{background:#fff}
.job-card .listing-typebar.is-job{
  background:#106949;
  color:#fff;
}
.job-main{padding:12px 15px 12px}
.job-title-row{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  align-items:center;
  column-gap:12px;
  row-gap:6px;
}
.job-title-row .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:9px;
  border-radius:12px;
  background:#e9f6e7;
  color:#176946;
}
/* Iste kategorijske ikone kao u odjeljku "Što možeš pronaći". */
.category-emoji{display:inline-block;flex:none;font-size:1.35rem;line-height:1;vertical-align:-.08em}
.job-title-row .icon .category-emoji{font-size:1.55rem}
.worker-skills .category-emoji{font-size:1.2rem}
.job-heading{min-width:0}
.job-title-row h3{
  font-size:1.2rem;
  line-height:1.22;
  font-weight:830;
  margin:0 0 4px;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.job-card .listing-publisher.is-compact{
  margin:0;
  font-size:.87rem;
  line-height:1.32;
  color:#536c5b;
}
.job-card .listing-publisher strong{color:#174d38}
.job-price{
  min-width:70px;
  padding:6px 8px;
  border-radius:9px;
  background:#eaf7e5;
  text-align:right;
  line-height:1.1;
  color:#163f32;
}
.job-price strong{display:block;font-size:1.35rem;font-weight:900;white-space:nowrap}
.job-price small{display:block;margin-top:3px;color:#506c5d;font-size:.76rem;font-weight:700;white-space:nowrap}
.job-details-row{
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.job-card .meta{
  display:flex;
  flex:1 1 220px;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 14px;
  margin:0;
  font-size:.89rem;
  color:#385947;
}
.job-card .meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  line-height:1.38;
  overflow-wrap:anywhere;
}
.job-card .meta .darko-icon{width:17px;height:17px;color:#1a704f}
.job-card .listing-actions{margin-left:auto;flex:0 1 auto}

/* Offer help — profile cards: visually distinct, gentle green. */
.worker-cards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
.worker-card.listing-card-v2{
  min-height:0;
  border-color:#c9e4c3;
  background:linear-gradient(155deg,#fff 0%,#fbfff9 62%,#f3faef 100%);
}
.worker-card .listing-typebar.is-worker{
  color:#155b36;
  background:linear-gradient(100deg,#daf6ca 0%,#ecf9dd 100%);
  border-bottom:1px solid #d3e8ca;
}
.worker-profile-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px 0;
}
.worker-avatar{
  display:grid;
  place-items:center;
  flex:0 0 52px;
  width:52px;
  height:52px;
  border:1px solid #d2e6cd;
  border-radius:50%;
  background:#e4f5df;
  color:#146d49;
}
.darko-avatar{width:36px;height:36px;display:block}
.worker-heading{min-width:0}
.worker-profile-head h3{
  margin:0;
  font-size:1.35rem;
  line-height:1.23;
  font-weight:850;
  overflow-wrap:anywhere;
}
.worker-profile-head .badge{
  display:inline-block;
  margin-top:4px;
  font-size:.73rem;
}
.worker-profile-head .publisher-reference{font-size:.58em;vertical-align:middle;margin-left:4px}
.worker-summary{
  margin:7px 16px 8px!important;
  color:#345545!important;
  font-size:.94rem!important;
  line-height:1.45!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.worker-skills{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 16px 8px;
}
.worker-skills > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:29px;
  padding:5px 10px;
  border:1px solid #dbeed6;
  border-radius:999px;
  background:#edf8e9;
  color:#255e42;
  font-size:.84rem;
  font-weight:750;
  line-height:1.3;
}
.worker-skills .category-emoji{line-height:1.1}
.worker-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 13px;
  margin:0 16px;
  color:#365b47;
}
.worker-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0;
  line-height:1.35;
  font-size:.9rem;
  overflow-wrap:anywhere;
}
/* Nacin dolaska je informacija o mobilnosti, ne ponuda prijevoza. */
.worker-meta .worker-transport{flex:1 1 100%;align-items:flex-start}
.worker-meta .worker-transport .darko-icon{margin-top:2px}
.worker-meta .transport-copy{min-width:0}
.worker-meta .transport-copy strong{font-weight:800}
.worker-meta .darko-icon{width:17px;height:17px;color:#1d7651}
.worker-card .listing-actions{
  justify-content:flex-end;
  margin:8px 16px 12px;
  padding-top:8px;
  border-top:1px solid #e4eee0;
}

/* Phone: dense but readable, with >=44px tap targets. */
@media(max-width:850px){
  .cards,.worker-cards{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
  .listing-card-v2{border-radius:16px}
  .listing-typebar{min-height:37px;padding:8px 12px;gap:8px}
  .listing-type-label{font-size:.9rem;font-weight:900;gap:6px}
  .listing-type-label .darko-icon{width:17px;height:17px}
  .listing-age{font-size:.73rem;white-space:normal;max-width:55%}
  .job-main{padding:11px 12px 12px}
  .job-title-row{grid-template-columns:40px minmax(0,1fr) auto;gap:9px;align-items:center}
  .job-title-row .icon{width:40px;height:40px;border-radius:11px;padding:7px}
  .job-title-row .icon .category-emoji{font-size:1.45rem}
  .job-title-row h3{font-size:1.14rem;line-height:1.24;margin:0 0 3px}
  .job-card .listing-publisher.is-compact{font-size:.93rem;line-height:1.34}
  .job-price{min-width:56px}
  .job-price strong{font-size:1.2rem}
  .job-price small{font-size:.72rem}
  .job-details-row{gap:9px;margin-top:9px}
  .job-card .meta{flex:1 1 190px;gap:6px 11px;font-size:.97rem}
  .job-card .meta span{line-height:1.36}
  .job-card .meta .darko-icon{width:16px;height:16px}
  .job-card .listing-actions{margin-left:auto}
  .listing-card-v2 .listing-actions button{min-height:44px;font-size:.93rem;padding:9px 11px}
  .worker-profile-head{padding:10px 13px 0;gap:10px}
  .worker-avatar{width:48px;height:48px;flex-basis:48px}
  .darko-avatar{width:33px;height:33px}
  .worker-profile-head h3{font-size:1.3rem}
  .worker-summary{margin:6px 13px 8px!important;font-size:1rem!important;line-height:1.4!important}
  .worker-skills{margin:0 13px 8px}
  .worker-skills > span{font-size:.93rem;min-height:30px}
  .worker-meta{margin:0 13px;gap:6px 12px}
  .worker-meta span{font-size:.97rem}
  .worker-card .listing-actions{margin:8px 13px 12px;padding-top:8px}
}
@media(max-width:360px){
  .job-title-row{grid-template-columns:36px minmax(0,1fr);gap:8px}
  .job-title-row .icon{width:36px;height:36px}
  .job-price{grid-column:2;justify-self:start;text-align:left;display:flex;gap:6px;align-items:baseline}
  .job-price strong{font-size:1.2rem}
  .job-price small{font-size:.75rem}
  .listing-age{font-size:.69rem}
}
@media(prefers-reduced-motion:reduce){.listing-card-v2{transition:none}}

/* v13.11.3 — kategorije i pokrivenost Zagreba u obrascu za Darkovu ekipu. */
.multi-select-field{min-width:0;margin:0;padding:14px;border:1px solid #cddfd2;border-radius:14px;background:#f8fcf8}
.multi-select-field legend{padding:0 5px;font-weight:850;color:#194d39;font-size:1rem}
.multi-select-field p{margin:0 0 10px;color:#52675a;font-size:.92rem;line-height:1.45}
.multi-select-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.multi-select-grid label,.worker-area-choice label{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:9px 10px;border:1px solid #d9e6d8;border-radius:10px;background:#fff;color:#254b3d;font-size:.94rem;font-weight:700;cursor:pointer}
.multi-select-grid label span,.worker-area-choice label span{flex:1;min-width:0;overflow-wrap:anywhere}
.multi-select-field input[type="checkbox"],.multi-select-field input[type="radio"]{flex:0 0 auto;inline-size:20px;block-size:20px;accent-color:#176a4a}
.multi-select-field label:has(input:checked){border-color:#7ebd99;background:#e6f5e8}
.multi-select-field label:focus-within{outline:2px solid #176a4a;outline-offset:2px}
.worker-area-choice{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#workerDistrictChoices{padding-top:8px}
#workerDistrictChoices[hidden],#workerAreaBox[hidden]{display:none!important}
.worker-skills .worker-more-cats{background:#e7f1df;color:#23563c;letter-spacing:.02em}
@media(max-width:620px){.multi-select-grid{grid-template-columns:1fr}.worker-area-choice{flex-direction:column}}