/* ==========================================================================
   Mojegazdinstvo — Profile Mobile + Tablet Redesign (≤991px)
   --------------------------------------------------------------------------
   Kompaktan, moderan profile layout za mobile + tablet:
   - Cover manji (uštedi vertical space)
   - Avatar overlap cover, kompaktna grid identity sekcija
   - Action dugmad inline (Uredi + Aktivnosti split 50/50)
   - Tabs strip pun width sa fade indicator-om umesto "<" cut-off-a
   - Publisher card tighter
   - Sidebar widgets prebačeni na vrh feed-a (vidljiviji na mobile)

   Target: stranice profila fizickog lica (.agro-profile-shell)
   Ne dira: desktop ≥992px, entity profile (gazdinstvo/firma/zadruga)
   ========================================================================== */

/* Desktop default: "Detalji profila" button sakriven (vidljiv samo mobile/tablet). */
.agro-profile-shell .agro-profile-action__details {
  display: none;
}

@media (max-width: 991px) {

  /* ----- 1. Cover slika — manja, uštedi vertical space ----- */
  .agro-profile-shell .card.hovercard .agro-profile-cover,
  .agro-profile-shell .card.hovercard {
    border-radius: 0 0 18px 18px;
  }
  .agro-profile-shell .agro-profile-cover {
    height: 140px !important;
  }

  /* ----- 2. Identity sekcija — avatar + info side-by-side, dugmad full-width ispod ----- */
  .agro-profile-shell .pic-info-cont {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    padding: 0 14px 14px !important;
    gap: 12px;
  }

  .agro-profile-shell .pic-info-cont .user-avatar {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
    margin: -38px 0 0 !important;
    align-self: flex-start;
  }
  .agro-profile-shell .pic-info-cont .user-avatar img.agro-profile-avatar {
    width: 76px !important;
    height: 76px !important;
    border-width: 3px !important;
  }

  /* Info blok desno od avatara — kolona sa imenom + dugmadima ispod */
  .agro-profile-shell .pic-info-cont .info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 6px;
    padding: 4px 0 0 !important;
    margin: 0 !important;
  }

  /* Name — compactan font, no excess margin */
  .agro-profile-shell .pic-info-cont .info .agro-profile-name,
  .agro-profile-shell .pic-info-cont .info h1.title {
    font-size: 22px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Username chip ispod imena */
  .agro-profile-shell .pic-info-cont .info .page_username,
  .agro-profile-shell .pic-info-cont .info .page_username--inline {
    font-size: 13px !important;
    color: var(--agro-text-muted) !important;
    margin: 2px 0 0 !important;
  }

  /* Mobile/tablet: sakrij "Aktivnosti" button (premesten u "Vise sekcija" sheet),
     prikazi "Detalji profila" umesto njega (otvara AgroSheet sa widgets).
     Visoka specifičnost (5 klasa) jer outline rule nize koristi 4 klase + element
     i postavlja `display: inline-flex !important` na sve a/button u .options-buttons. */
  .agro-profile-shell .pic-info-cont .info .options-buttons .agro-profile-action__activities,
  .agro-profile-shell .pic-info-cont .info .options-buttons span.agro-profile-action__activities {
    display: none !important;
  }
  .agro-profile-shell .pic-info-cont .info .options-buttons .agro-profile-action__details,
  .agro-profile-shell .pic-info-cont .info .options-buttons span.agro-profile-action__details {
    display: inline-flex !important;
    /* Detalji profila ima najduzi label (14 char) — garantuje min-width da text stane.
       Uredi (5 char) shrink-uje na ono sto preostane (uvek dovoljno za 5 char). */
    flex: 1 1 auto !important;
    min-width: 138px !important;
  }

  /* ============================================================================
     VISITOR PROFILE HEADER — Modern outline action bar (PRD: 2026-05-13 redizajn)
     --------------------------------------------------------------------------
     Adaptivan flex layout:
     - Owner (2 dugmeta: Uredi + Detalji): jednako sirina (flex: 1 1 0)
     - Visitor (3 elementa: Prati/Dodaj + Poruka + ⋮Vise dropdown):
       primarna 2 dele sirinu, More dropdown je kompaktan 40x40 kvadrat na kraju.

     Stil: outline + sage zelena ikona/tekst + svetla pozadina.
     Override-uje legacy WoWonder pink/coral wo_follow_btn (#cc1e47 → #d35400 gradijent)
     i .btn-glossy stylove iz stylesheet/style.css.
     ============================================================================ */
  .agro-profile-shell .pic-info-cont .info .options-buttons,
  .agro-profile-shell .pic-info-cont .info .options-buttons.agro-profile-identity__actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
  }
  /* Primarni elementi — flex: 1 1 auto distribuira proporcionalno sadrzaju
     (Uredi 5 char dobija manje, Detalji profila 14 char vise — sav tekst staje). */
  .agro-profile-shell .pic-info-cont .info .options-buttons > span,
  .agro-profile-shell .pic-info-cont .info .options-buttons > a,
  .agro-profile-shell .pic-info-cont .info .options-buttons > button,
  .agro-profile-shell .pic-info-cont .info .options-buttons > .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    height: auto !important;
    margin: 0 !important;
  }
  /* "Vise" dropdown (3 tackice) — fiksan kvadrat 38x38 na desnom kraju */
  .agro-profile-shell .pic-info-cont .info .options-buttons > .dropdown.btn-glossy {
    flex: 0 0 38px !important;
    min-width: 38px !important;
    width: 38px !important;
    display: block !important;
    margin: 0 !important;
  }
  /* ===== OUTLINE STIL — primarna dugmad (Prati/Dodaj prijatelja, Poruka) =====
     NAPOMENA: koristimo `descendant` selektore (space) umesto `>` jer
     buttons/follow.phtml renderuje wrapper <span id="Follow-X"> oko <button>,
     pa direktan child selector ne hvata strukturu:
       .options-buttons > span.user-follow-button > span#Follow-X > button.wo_follow_btn
     Override-ujemo i `.wo_follow_btn` direktno (visoka specificnost) jer legacy
     stylesheet/style.css:3230 koristi background: linear-gradient(coral) !important. */
  .agro-profile-shell .pic-info-cont .info .options-buttons a,
  .agro-profile-shell .pic-info-cont .info .options-buttons button,
  .agro-profile-shell .pic-info-cont .info .options-buttons .btn,
  .agro-profile-shell .pic-info-cont .info .options-buttons .wo_follow_btn,
  .agro-profile-shell .pic-info-cont .info .options-buttons .wo_following_btn,
  .agro-profile-shell .pic-info-cont .info .options-buttons #wo_useract_btn {
    width: 100% !important;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: var(--agro-primary-dark, #1b5e20) !important;
    border: 1px solid var(--agro-primary, #2e7d32) !important;
    box-shadow: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
    margin: 0 !important;
  }
  /* Inner span#Follow-X wrapper — neka button bude full width unutar njega */
  .agro-profile-shell .pic-info-cont .info .options-buttons span[id^="Follow-"],
  .agro-profile-shell .pic-info-cont .info .options-buttons .user-follow-button > span,
  .agro-profile-shell .pic-info-cont .info .options-buttons .profile-message-btn > span {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  /* Active state (touch feedback) */
  .agro-profile-shell .pic-info-cont .info .options-buttons a:active,
  .agro-profile-shell .pic-info-cont .info .options-buttons button:active,
  .agro-profile-shell .pic-info-cont .info .options-buttons .wo_follow_btn:active,
  .agro-profile-shell .pic-info-cont .info .options-buttons .wo_following_btn:active {
    background: var(--agro-primary, #2e7d32) !important;
    background-color: var(--agro-primary, #2e7d32) !important;
    color: #ffffff !important;
    transform: scale(0.98) !important;
  }
  /* Following/friend state — sekundaran outline (vec povezan) */
  .agro-profile-shell .pic-info-cont .info .options-buttons .wo_following_btn,
  .agro-profile-shell .pic-info-cont .info .options-buttons .btn-active.wo_following_btn {
    background: var(--agro-surface, #fafaf8) !important;
    background-color: var(--agro-surface, #fafaf8) !important;
    color: var(--agro-text-muted, #4a5e55) !important;
    border-color: var(--agro-border, #e0d8c8) !important;
  }

  /* ===== "Vise" dropdown trigger (⋮) — neutralan kvadrat 38x38 ===== */
  .agro-profile-shell .pic-info-cont .info .options-buttons > .dropdown > button {
    padding: 0 !important;
    min-width: 38px !important;
    width: 38px !important;
    height: 38px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: var(--agro-text-muted, #4a5e55) !important;
    border: 1px solid var(--agro-border, #e0d8c8) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 160ms ease, border-color 160ms ease !important;
  }
  .agro-profile-shell .pic-info-cont .info .options-buttons > .dropdown > button:active,
  .agro-profile-shell .pic-info-cont .info .options-buttons > .dropdown.open > button {
    background: var(--agro-primary-bg, #f0f7f0) !important;
    border-color: var(--agro-primary, #2e7d32) !important;
    color: var(--agro-primary-dark, #1b5e20) !important;
  }
  /* SVG ikone — kompaktnije (14px za primarna, 16px za ⋮) za bolje uklapanje teksta */
  .agro-profile-shell .pic-info-cont .info .options-buttons a svg,
  .agro-profile-shell .pic-info-cont .info .options-buttons button svg,
  .agro-profile-shell .pic-info-cont .info .options-buttons .btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  .agro-profile-shell .pic-info-cont .info .options-buttons > .dropdown > button svg {
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    fill: none !important;
  }
  /* Tekst dugmeta — truncate ako ne staje */
  .agro-profile-shell .pic-info-cont .info .options-buttons .button-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    color: inherit !important;
  }
  /* ===== Owner ekstra dugmad (Uredi, Detalji profila) — koriste ikonu sa fill ===== */
  .agro-profile-shell .pic-info-cont .info .options-buttons > span.btn-glossy > a svg.feather-edit-2,
  .agro-profile-shell .pic-info-cont .info .options-buttons > span.btn-glossy > a svg[class*="feather"] {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* ----- 3. Tabs row — full width, kompaktan, sticky-feel ----- */
  .agro-profile-shell .row.user-bottom-nav-row,
  .agro-profile-shell .card.hovercard + .row,
  .agro-profile-shell .card.hovercard ~ .row {
    margin: 0 0 12px !important;
    padding: 0 !important;
  }
  .agro-profile-shell .row.user-bottom-nav-row .col-md-1,
  .agro-profile-shell .card.hovercard + .row .col-md-1 {
    display: none !important;
  }
  .agro-profile-shell .row.user-bottom-nav-row .user-bottom-nav,
  .agro-profile-shell .row.user-bottom-nav-row .col-md-10 {
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .agro-profile-shell .agro-profile-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-padding-right: 16px;
    scroll-snap-type: x proximity;
    gap: 2px;
    padding: 4px 10px !important;
    margin: 0 !important;
    background: var(--agro-surface-card, #fefcf9);
    border-bottom: 1px solid var(--agro-border, #e0d8c8);
    /* NEMA mask-image — fade je "jeo" tekst poslednje tab-a. Cisti scroll. */
  }
  .agro-profile-shell .agro-profile-tabs::-webkit-scrollbar {
    display: none;
  }
  .agro-profile-shell .agro-profile-tabs > li {
    flex: 0 0 auto;
    scroll-snap-align: end;
  }
  .agro-profile-shell .agro-profile-tabs > li > a {
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    position: relative !important;
  }
  .agro-profile-shell .agro-profile-tabs > li > a svg,
  .agro-profile-shell .agro-profile-tabs > li > a .feather {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
  }

  /* Pre-hide tabs 4+ pre JS init-a da spreci FOUC (user 2026-05-13).
     JS u agro-profile-tabs-more.js postavlja data-tabs-more-init="1" odmah
     po DOM ready, tada ovaj selektor vise ne vazi i JS sam odlucuje sta
     je vidljivo (adaptive: ako sve stane, sve vidljivo; inace overflow
     sakriven preko data-tabs-more-hidden + dodato "Vise" dugme). */
  .agro-profile-shell .agro-profile-tabs:not([data-tabs-more-init]) > li:nth-child(n+4) {
    display: none !important;
  }
  /* Placeholder "Vise" via pseudo-element dok JS ne istrci — bez click
     handler-a, ali rezervira prostor i spreci flash. */
  .agro-profile-shell .agro-profile-tabs:not([data-tabs-more-init])::after {
    content: "··· Više";
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1;
    color: var(--agro-text-muted, #4a5e55);
    background: var(--agro-surface, #fafaf8);
    border: 1px dashed var(--agro-border, #e0d8c8);
    border-radius: 8px;
    flex: 0 0 auto;
    pointer-events: none;
  }

  /* "Više" trigger — kompaktan dropdown button za overflow tab-ove */
  .agro-profile-shell .agro-profile-tabs__more-trigger {
    flex: 0 0 auto;
    margin-left: auto;  /* push to right edge */
  }
  .agro-profile-shell .agro-profile-tabs__more-btn {
    color: var(--agro-text-muted, #4a5e55) !important;
    background: var(--agro-surface, #fafaf8);
    border: 1px dashed var(--agro-border, #e0d8c8);
  }
  .agro-profile-shell .agro-profile-tabs__more-btn:hover {
    background: var(--agro-primary-bg, #f0f7f0);
    color: var(--agro-primary-dark, #1b5e20) !important;
    border-color: var(--agro-primary, #2e7d32);
  }
  .agro-profile-shell .agro-profile-tabs__more-btn svg {
    color: currentColor;
  }

  /* Badge — gornji desni ugao tab linka, ne preko ikone/teksta.
     Desktop CSS pozicionira badge na .split-link (samo ikona), sto na mobile-u
     horizontal layout-u stavi badge preko teksta. Resetujemo na tab link kao
     containing block i pomeramo na top-right. */
  .agro-profile-shell .agro-profile-tabs > li > a .split-link {
    position: static !important;
  }
  .agro-profile-shell .agro-profile-tabs__count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 9px !important;
    line-height: 16px !important;
    border-radius: 8px !important;
    background: var(--agro-primary, #2e7d32) !important;
    color: #fff !important;
    border: 1.5px solid var(--agro-surface-card, #fefcf9) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 2;
  }

  /* ----- 4. Publisher card — tighter ----- */
  .wo_user_profile .publisher-box,
  .wo_user_profile .sun_post_pub {
    padding: 12px 14px !important;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .wo_user_profile .publisher-box textarea,
  .wo_user_profile .sun_post_pub textarea {
    font-size: 14px;
    padding: 6px 0 !important;
  }
  .wo_user_profile .sun_pub_mid_foot,
  .wo_user_profile .publisher-box .sun_pub_mid_foot {
    padding: 10px 0 0 !important;
    gap: 4px;
    flex-wrap: wrap;
  }
  .wo_user_profile .sun_pub_mid_foot > * {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 4px;
  }

  /* ----- 5. Sidebar widgets — bolja pozicija na mobile ----- */
  /* Bootstrap col-md-4 sidebar pada ispod col-md-8 main na mobile. Pomeri ga
     ISPRED main feed-a (na vrh) preko CSS order. .wo_user_profile JE sam .row
     (compound class), pa selector mora biti .wo_user_profile.row a NE
     .wo_user_profile .row (descendant). */
  .wo_user_profile.row,
  .row.wo_user_profile {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  .wo_user_profile.row > .col-md-8,
  .row.wo_user_profile > .col-md-8 {
    order: 2 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .wo_user_profile.row > .col-md-4,
  .row.wo_user_profile > .col-md-4 {
    order: 1 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
  }

  /* Widget kartice kompaktnije */
  .wo_user_profile .col-md-4 .wo_widget,
  .wo_user_profile .col-md-4 .panel,
  .wo_user_profile .col-md-4 [class*="widget"] {
    margin-bottom: 12px;
    border-radius: 12px;
  }

  /* MOJA GAZDINSTVA + MOJE ZADRUGE widgets — sakri na mobile/tablet.
     Korisnik ima pristup preko bottom-nav "Gazdinstva" taba i Tajmlajn/posts
     (user zahtev 2026-05-13: "nema smisla da bude na dnu profila"). */
  .wo_user_profile .agro-widget--my-entities,
  .wo_user_profile .agro-widget--my-coops {
    display: none !important;
  }

  /* TUDJI PROFIL (user_other) — sakri Brze informacije + Statistika + Savet dana
     na mobile/tablet. Razlog: na tudjem profilu ova 3 widgeta zauzimaju puno vertical
     space-a iznad feed-a a posetilac primarno zeli da vidi sadrzaj (objave). Ime/region
     i broj objava su vec dostupni u top header sekciji profila.
     User zahtev 2026-05-13. Atribut data-profile-context dolazi iz timeline/content.phtml. */
  .wo_user_profile .col-md-4[data-profile-context="user_other"] .agro-widget--quick-info,
  .wo_user_profile .col-md-4[data-profile-context="user_other"] .agro-widget--entity-stats,
  .wo_user_profile .col-md-4[data-profile-context="user_other"] .agro-widget--tip {
    display: none !important;
  }
  /* Carousel wrapper (kad je tip-of-day jedini carousel widget za user_other,
     on bude prazan ovde — sakri ga da ne ostavlja prazan div sa border-om) */
  .wo_user_profile .col-md-4[data-profile-context="user_other"] .agro-widget-carousel:empty,
  .wo_user_profile .col-md-4[data-profile-context="user_other"] .agro-widget-carousel:has(> .agro-widget--tip:only-child) {
    display: none !important;
  }

  /* Sidebar footer (copyright) — sakri na mobile/tablet, glavni footer
     postoji ispod feed-a i bottom-nav-a. Smanjuje veliki gap. */
  .wo_user_profile .agro-sidebar-footer-outer {
    display: none !important;
  }

  /* Smanji vertical gap izmedju col-md-4 (Sezonski) i col-md-8 (Publisher).
     Aggressive margin reset svih widget-a u sidebar-u + zatvori spacing
     izmedju col-md-4 i col-md-8. */
  .wo_user_profile.row > .col-md-4,
  .row.wo_user_profile > .col-md-4 {
    margin: 0 !important;
    padding-bottom: 0 !important;
  }
  .wo_user_profile.row > .col-md-8,
  .row.wo_user_profile > .col-md-8 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Carousel i widgets unutar col-md-4 — kompaktno spacing 6px izmedju */
  .wo_user_profile .col-md-4 > .agro-widget-carousel,
  .wo_user_profile .col-md-4 > .agro-widget,
  .wo_user_profile .col-md-4 > section.agro-widget {
    margin-bottom: 6px !important;
  }
  .wo_user_profile .col-md-4 > .agro-widget-carousel:last-child,
  .wo_user_profile .col-md-4 > .agro-widget:last-child {
    margin-bottom: 0 !important;
  }

  /* col-md-8 sadrzaj: reorder + flex column za pouzdan order kontrol.
     Publisher je SADA prvi vidljivi (iznad Profile completion banner-a)
     da smanji razmak Sezonski → Publisher. */
  .wo_user_profile.row > .col-md-8,
  .row.wo_user_profile > .col-md-8 {
    display: flex !important;
    flex-direction: column !important;
  }
  .wo_user_profile .col-md-8 .publisher-box,
  .wo_user_profile .col-md-8 form.publisher-box,
  .wo_user_profile .col-md-8 .sun_post_pub {
    order: 1 !important;
    margin: 0 0 8px !important;
  }
  .wo_user_profile .col-md-8 .agro-profile-completion {
    order: 2 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
  }
  .wo_user_profile .col-md-8 .posts_load,
  .wo_user_profile .col-md-8 #posts {
    order: 3 !important;
  }
  .wo_user_profile .col-md-8 #load-more-filter,
  .wo_user_profile .col-md-8 .load-more-container {
    order: 99 !important;
  }

  /* Sezonski podsetnik + Savet dana carousel — neka bude prvi u sidebar
     order-u (vec je col-md-4 iznad col-md-8, ovde forsiramo da je carousel
     gornji widget odmah iznad publisher box-a). */
  .wo_user_profile .col-md-4 {
    display: flex;
    flex-direction: column;
  }
  .wo_user_profile .col-md-4 .agro-widget-carousel {
    order: 1;
  }
  .wo_user_profile .col-md-4 .agro-widget--premium-cta {
    order: 2;
  }
  .wo_user_profile .col-md-4 .agro-sidebar-footer-outer,
  .wo_user_profile .col-md-4 .page-margin {
    order: 99;  /* footer uvek na dno sidebar-a */
  }

  /* ----- 6. Post card — manji padding ----- */
  .wo_user_profile #posts .post,
  .wo_user_profile #posts .agro-post-card {
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .wo_user_profile #posts .post .post-heading {
    padding: 12px 14px !important;
  }
  .wo_user_profile #posts .post .description,
  .wo_user_profile #posts .post .post-text {
    padding: 0 14px 12px !important;
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ===== Manje refinements za telefone ≤479px (Galaxy S/iPhone SE) ===== */
@media (max-width: 479px) {
  .agro-profile-shell .agro-profile-cover {
    height: 120px !important;
  }
  .agro-profile-shell .pic-info-cont .user-avatar,
  .agro-profile-shell .pic-info-cont .user-avatar img.agro-profile-avatar {
    width: 68px !important;
    height: 68px !important;
  }
  .agro-profile-shell .pic-info-cont .user-avatar {
    margin-top: -34px !important;
  }
  .agro-profile-shell .pic-info-cont .info .agro-profile-name {
    font-size: 20px !important;
  }
  .agro-profile-shell .agro-profile-tabs > li > a {
    padding: 7px 8px !important;
    font-size: 11.5px !important;
    gap: 4px;
  }
  .agro-profile-shell .agro-profile-tabs > li > a svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ==========================================================================
   ENTITY PROFILE — Mobile + Tablet Redesign (≤991px)
   --------------------------------------------------------------------------
   Identicna optimizacija kao za fizicka lica, adaptirana na entity elemente:
   - .wo_page_profile  (umesto .wo_user_profile)
   - .page-info-cont   (umesto .pic-info-cont)
   - .agro-entity-sidebar  (col-md-4 sa entity widgets)
   - data-profile-type="gazdinstvo|firma"

   Cilj: kompaktan layout, sidebar widgets iznad feed-a, "Detalji profila"
   sheet za sekundarne info widgets (Lokacija + Kontakt).
   ========================================================================== */

/* Napomena: entity profil (gazdinstvo/firma) NEMA "Detalji profila" dugme —
   sve info (BPG/Opština/Površina/Lokacija/Kontakt) su vec dostupne u
   "O gazdinstvu"/"O firmi" tab-u, button bi bio duplikat. */

@media (max-width: 991px) {

  /* ----- 1. Cover — manja na entity profilu ----- */
  .agro-profile-shell[data-profile-type="gazdinstvo"] .agro-profile-cover,
  .agro-profile-shell[data-profile-type="firma"]      .agro-profile-cover {
    height: 140px !important;
  }
  .agro-profile-shell[data-profile-type="gazdinstvo"] .card.hovercard,
  .agro-profile-shell[data-profile-type="firma"]      .card.hovercard {
    border-radius: 0 0 18px 18px;
  }
  .agro-profile-shell[data-profile-type="gazdinstvo"] .agro-profile-cover__entity-badge,
  .agro-profile-shell[data-profile-type="firma"]      .agro-profile-cover__entity-badge {
    top: 10px;
    right: 10px;
    font-size: 10px;
    padding: 3px 7px;
  }

  /* ----- 2. Identity sekcija — page-info-cont kao flex (avatar + info + akcije) ----- */
  .wo_page_profile .page-info-cont {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 14px 12px !important;
  }
  /* first_row (avatar + info) preuzima ceo red */
  .wo_page_profile .page-info-cont .first_row {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 12px;
  }
  /* Avatar overlap cover */
  .wo_page_profile .page-info-cont .first_row .user-avatar {
    flex: 0 0 76px !important;
    width: 76px !important;
    height: 76px !important;
    margin: -38px 0 0 !important;
    align-self: flex-start;
  }
  .wo_page_profile .page-info-cont .first_row .user-avatar img.agro-profile-avatar {
    width: 76px !important;
    height: 76px !important;
    border-width: 3px !important;
  }
  /* Info kolona desno od avatara */
  .wo_page_profile .page-info-cont .first_row .info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 4px;
    padding: 4px 0 0 !important;
    margin: 0 !important;
  }
  .wo_page_profile .page-info-cont .first_row .info .agro-profile-name,
  .wo_page_profile .page-info-cont .first_row .info h1.title {
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .wo_page_profile .page-info-cont .first_row .info .agro-profile-name a,
  .wo_page_profile .page-info-cont .first_row .info h1.title a {
    color: inherit;
  }
  .wo_page_profile .page-info-cont .first_row .info .page_username,
  .wo_page_profile .page-info-cont .first_row .info .page_username--inline {
    font-size: 12px !important;
    color: var(--agro-text-muted) !important;
    font-weight: 400;
  }

  /* last_row (page_info — phone, etc.) i col-md-12 (page_navbar wrapper) —
     sakri na mobile. Razlog: legacy markup im daje margin 31px 0 34px i
     pravi 71px praznog prostora unutar kartice ispod action dugmadi.
     Telefon i kontakt info su anyway u Detalji profila sheet-u, a page_navbar
     opcije (rating/invite/more) su sakrivene zasebno. */
  .wo_page_profile .page-info-cont .last_row,
  .wo_page_profile .page-info-cont > .col-md-12 {
    display: none !important;
  }

  /* ----- 3. Action dugmad: Uredi (owner — pozicioniran desno na liniji imena) ili
     Prati/Umreži/Poruka (visitor — row ispod imena) ----- */

  /* Owner "Uredi" je pozicioniran ABSOLUTNO unutar first_row-a (avatar + info
     red), bottom-right ugao. Cilj: Uredi na ISTOJ horizontalnoj liniji sa imenom,
     desno od identity sekcije (a NE na cover-u). Cover ostaje cist sa svojim
     badge-om u top-right. */
  .wo_page_profile .page-info-cont .first_row {
    position: relative !important;
  }
  /* Override .options-buttons relative (stylesheet/style.css:3139) na static
     da Uredi (absolute child unutar options-buttons) ne nadje options-buttons
     kao containing block, vec first_row. */
  .wo_page_profile .options-buttons {
    position: static !important;
  }
  /* Uredi — minimalistican pill button, sa breathing room od ivice, ne nalepljen.
     Modern look: tanki transparentni border + soft fill, smanjena velicina,
     fine-tuned padding za "spontano" prisustvo. */
  .wo_page_profile .agro-profile-edit-btn {
    position: absolute !important;
    right: 12px !important;
    bottom: 10px !important;
    z-index: 5 !important;
    padding: 5px 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.1px;
    border-radius: 999px !important;
    min-height: 0 !important;
    background: rgba(46, 125, 50, 0.08) !important;
    color: var(--agro-primary-dark, #1b5e20) !important;
    border: 1px solid rgba(46, 125, 50, 0.25) !important;
    box-shadow: none;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .wo_page_profile .agro-profile-edit-btn:hover {
    background: rgba(46, 125, 50, 0.14) !important;
    border-color: rgba(46, 125, 50, 0.45) !important;
  }
  .wo_page_profile .agro-profile-edit-btn:active {
    background: var(--agro-primary, #2e7d32) !important;
    color: #fff !important;
    border-color: var(--agro-primary, #2e7d32) !important;
  }
  .wo_page_profile .agro-profile-edit-btn svg {
    width: 12px;
    height: 12px;
    opacity: 0.85;
  }
  /* Avatar + info zauzimaju levu stranu first_row-a, ostavljaju mesto desno
     za Uredi. padding-right SAMO za owner-a (kada Uredi postoji), da se ime
     ne uvlači ispod Uredi-ja. Visitor (Prati/Umreži/Poruka) ima pun width. */
  .wo_page_profile .page-info-cont .first_row:has(.agro-profile-edit-btn) .info {
    padding-right: 84px !important;
  }

  /* Adaptivan flex layout za preostala dugmad (Prati/Umreži/Poruka — visitor only) */
  .wo_page_profile .page-info-cont .first_row .info .options-buttons,
  .wo_page_profile .page-info-cont .first_row .info .agro-profile-identity__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
  }
  /* Sakrij "Call to action" CTA (Wo_GetCallInAction) na mobile — ima sopstvenu
     stilizaciju u page_info_cta i kvari layout. Akcija je dostupna iz Ponuda taba. */
  .wo_page_profile .page-info-cont .first_row .info .options-buttons .page_info_cta {
    display: none !important;
  }
  /* Span wrapper-i (user-follow-button, btn-glossy) — flex item-i, fleksibilna sirina */
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > span,
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > a {
    flex: 1 1 calc(33.333% - 4px);
    min-width: 100px;
    display: block;
  }
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > a,
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > button,
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > .btn,
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > span > a,
  .wo_page_profile .page-info-cont .first_row .info .options-buttons > span > button {
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* ----- 4. page_navbar (rating/invite/more) — sakri na mobile (premestamo u sheet) ----- */
  .wo_page_profile .page_navbar {
    display: none !important;
  }

  /* ----- 5. Agro entity tabs — full width, kompaktan, stacked sa stats ispod ----- */
  /* Desktop default je nav = flex row sa space-between (tabovi levo, stats desno).
     Na mobile preokrecemo na column da tabovi budu jedan red, stats traka drugi. */
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: var(--agro-surface-card, #fefcf9);
    border-bottom: 1px solid var(--agro-border, #e0d8c8);
    gap: 0 !important;
    overflow: hidden !important;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    padding: 4px 10px !important;
    margin: 0 !important;
    list-style: none;
    width: 100%;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul::-webkit-scrollbar {
    display: none;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul > li {
    flex: 0 0 auto;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul > li > a {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    position: relative;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul > li > a .agro-tab-badge,
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul > li > a .agro-profile-tabs__counter {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 18px;
    border-radius: 9px;
    background: var(--agro-primary, #2e7d32);
    color: #fff;
    font-weight: 600;
  }

  /* Stats traka ispod tab-ova — centrirana, 4 brojke jednako razmaknute u sredini.
     Default desktop koristi space-between (stretched), na mobile/tablet trebamo
     centriran cluster — bez stretch, sve 4 statistike u sredini sa konzistentnim gap-om. */
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs .agro-profile-tabs__stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 8px 10px !important;
    gap: 20px !important;
    margin: 0 !important;
    background: var(--agro-surface-card, #fefcf9);
    border-top: 1px solid var(--agro-border, #e0d8c8);
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs .agro-profile-tabs__stat {
    flex: 0 0 auto !important;
    min-width: 56px;
    padding: 2px;
    text-align: center;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1px;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs .agro-profile-tabs__stat-num {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--agro-primary-dark, #1b5e20);
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs .agro-profile-tabs__stat-label {
    font-size: 10px;
    line-height: 1.2;
    color: var(--agro-text-muted, #4a5e55);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }

  /* ----- 6. Pozovi mrežu CTA banner — kompaktuj ----- */
  .wo_page_profile .agro-invite-network-banner,
  .wo_page_profile .agro-invite-network-cta {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    margin: 8px 14px !important;
    border-radius: 10px;
  }

  /* ----- 7. Sidebar widgets — premesti col-md-4 IZNAD col-md-8 ----- */
  /* Wo_PageProfile koristi `.wo_page_profile.row` kao Bootstrap row, identicno
     kao kod fizickih lica. Reordering preko flex order. */
  .wo_page_profile.row,
  .row.wo_page_profile {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  .wo_page_profile.row > .col-md-8,
  .row.wo_page_profile > .col-md-8 {
    order: 2 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .wo_page_profile.row > .col-md-4.agro-entity-sidebar,
  .row.wo_page_profile > .col-md-4.agro-entity-sidebar,
  .wo_page_profile.row > .col-md-4,
  .row.wo_page_profile > .col-md-4 {
    order: 1 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: column;
  }

  /* Compact widget cards u sidebar-u */
  .wo_page_profile .agro-entity-sidebar .agro-widget,
  .wo_page_profile .col-md-4 .agro-widget {
    margin-bottom: 8px !important;
    border-radius: 12px;
  }
  .wo_page_profile .agro-entity-sidebar .agro-widget:last-child,
  .wo_page_profile .col-md-4 .agro-widget:last-child {
    margin-bottom: 0 !important;
  }

  /* Sakri BRZE CINJENICE + Lokacija + Kontakt widgets na mobile —
     premesti u "Detalji profila" sheet. Razlog: ovi widgets su info-only
     (bez akcije), zauzimaju puno vertical space-a iznad feed-a, a korisniku
     trebaju samo na klik. AgroProfileDetails ih klonira u sheet. */
  .wo_page_profile .agro-entity-sidebar .agro-widget--quick-facts,
  .wo_page_profile .agro-entity-sidebar .agro-widget--location,
  .wo_page_profile .agro-entity-sidebar .agro-widget--contact,
  .wo_page_profile .col-md-4 .agro-widget--quick-facts,
  .wo_page_profile .col-md-4 .agro-widget--location,
  .wo_page_profile .col-md-4 .agro-widget--contact {
    display: none !important;
  }

  /* Sakri AKCIJA widget na mobile — duplira Prati/Umreži/Pošalji iz top
     identity-action row-a. Owner ima Uredi + Detalji profila u top-u,
     pa AKCIJA widget nije potreban. */
  .wo_page_profile .agro-entity-sidebar .agro-widget--actions,
  .wo_page_profile .col-md-4 .agro-widget--actions {
    display: none !important;
  }

  /* Sidebar footer (copyright) — sakri (postoji global footer ispod) */
  .wo_page_profile .agro-entity-sidebar .agro-sidebar-footer-outer,
  .wo_page_profile .col-md-4 .agro-sidebar-footer-outer {
    display: none !important;
  }

  /* Sidebar ad ostaje na dnu sidebar-a */
  .wo_page_profile .agro-entity-sidebar .sidebar-ad,
  .wo_page_profile .col-md-4 .sidebar-ad {
    order: 90;
  }

  /* col-md-8 sadrzaj reorder — Publisher prvi, completion drugi, posts treci.
     Sprecava da profile completion banner uzima srednji prostor sa razmacima. */
  .wo_page_profile .col-md-8 .publisher-box,
  .wo_page_profile .col-md-8 form.publisher-box,
  .wo_page_profile .col-md-8 .sun_post_pub {
    order: 1 !important;
    margin: 0 0 8px !important;
    padding: 12px 14px !important;
    border-radius: 12px;
  }
  .wo_page_profile .col-md-8 .agro-profile-completion {
    order: 2 !important;
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
  }
  .wo_page_profile .col-md-8 #posts,
  .wo_page_profile .col-md-8 .posts_load {
    order: 3 !important;
  }
  .wo_page_profile .col-md-8 .load-more,
  .wo_page_profile .col-md-8 #load-more-filter {
    order: 99 !important;
  }

  /* Publisher textarea kompaktnije */
  .wo_page_profile .col-md-8 .publisher-box textarea,
  .wo_page_profile .col-md-8 .sun_post_pub textarea {
    font-size: 14px;
    padding: 6px 0 !important;
  }
  .wo_page_profile .col-md-8 .sun_pub_mid_foot {
    padding: 10px 0 0 !important;
    gap: 4px;
    flex-wrap: wrap;
  }
  .wo_page_profile .col-md-8 .sun_pub_mid_foot > * {
    padding: 6px 10px !important;
    font-size: 12px !important;
    gap: 4px;
  }

  /* Post cards u feed-u — kompaktnije */
  .wo_page_profile #posts .post,
  .wo_page_profile #posts .agro-post-card {
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .wo_page_profile #posts .post .post-heading {
    padding: 12px 14px !important;
  }
  .wo_page_profile #posts .post .description,
  .wo_page_profile #posts .post .post-text {
    padding: 0 14px 12px !important;
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ===== Entity profile telefoni ≤479px — fine refinements ===== */
@media (max-width: 479px) {
  .agro-profile-shell[data-profile-type="gazdinstvo"] .agro-profile-cover,
  .agro-profile-shell[data-profile-type="firma"]      .agro-profile-cover {
    height: 120px !important;
  }
  .wo_page_profile .page-info-cont .first_row .user-avatar,
  .wo_page_profile .page-info-cont .first_row .user-avatar img.agro-profile-avatar {
    width: 68px !important;
    height: 68px !important;
  }
  .wo_page_profile .page-info-cont .first_row .user-avatar {
    margin-top: -34px !important;
  }
  .wo_page_profile .page-info-cont .first_row .info .agro-profile-name,
  .wo_page_profile .page-info-cont .first_row .info h1.title {
    font-size: 18px !important;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs ul > li > a {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs .agro-profile-tabs__stat-num {
    font-size: 14px;
  }
  .wo_page_profile .agro-profile-tabs.agro-entity-tabs .agro-profile-tabs__stat-label {
    font-size: 9.5px;
  }
}