/* Fachowiec24 R25 additive presentation layer. */

/* ==========================================================
   GROUP / CHAT — MOBILE HEIGHT
   ========================================================== */

@media (max-width:767px){
  .f24-messages-panel-card{
    width:100%!important;
    max-width:100%!important;
    min-height:calc(100dvh - 9.25rem)!important;
    height:auto!important;
    align-items:stretch!important;
  }

  .f24-chat-thread-pane{
    display:flex!important;
    flex-direction:column!important;

    width:100%!important;
    max-width:100%!important;

    min-height:calc(100dvh - 9.25rem)!important;
    height:auto!important;
    max-height:none!important;

    align-self:stretch!important;
  }

  .f24-chat-message-list{
    flex:1 1 auto!important;

    min-height:8rem!important;
    max-height:none!important;

    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
}

/* ==========================================================
   MARKETPLACE GRID
   ========================================================== */

@media (max-width:359px){
  .f24-market-product-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media (min-width:360px) and (max-width:767px){
  .f24-market-product-grid{
    display:grid!important;

    grid-template-columns:
      repeat(2,minmax(0,1fr))!important;

    gap:.55rem!important;

    width:100%!important;
    max-width:100%!important;
  }

  .f24-market-product-grid > *{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  .f24-market-product-grid img{
    max-width:100%!important;
  }

  .f24-market-product-grid button{
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
}

@media (min-width:768px) and (max-width:1023px){
  .f24-market-product-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr))!important;
  }
}

/* ==========================================================
   MARKETPLACE OWNER ACTIONS
   ========================================================== */

.f24-owner-card-inline-actions{
  width:100%!important;

  grid-template-columns:
    repeat(2,minmax(0,1fr))!important;
}

.f24-owner-card-inline-actions button{
  min-width:0!important;
  min-height:38px;

  white-space:normal!important;
  overflow-wrap:anywhere;

  line-height:1.15;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.f24-owner-card-inline-actions button:active{
  transform:scale(.98);
}

.f24-owner-inline-edit{
  box-shadow:
    0 4px 12px
    rgba(124,58,237,.08);
}

.f24-owner-inline-delete,
.f24-owner-delete-button{
  box-shadow:
    0 4px 12px
    rgba(225,29,72,.07);
}

@media (max-width:479px){
  .f24-owner-card-actions{
    display:grid!important;

    grid-template-columns:
      minmax(0,1fr)!important;

    width:100%!important;
    max-width:100%!important;

    gap:.5rem!important;
  }

  .f24-owner-card-actions > button,
  .f24-owner-card-actions > select{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;

    min-height:44px!important;

    margin:0!important;
  }

  .f24-owner-delete-button{
    display:flex!important;

    align-items:center!important;
    justify-content:center!important;
  }
}

/* ==========================================================
   MARKETPLACE MOBILE BOTTOM NAV
   ========================================================== */

@media (max-width:1023px){
  .f24-market-mobile-nav{
    min-height:
      calc(
        78px +
        env(safe-area-inset-bottom,0px)
      )!important;

    height:
      calc(
        78px +
        env(safe-area-inset-bottom,0px)
      )!important;

    padding:
      7px 8px
      calc(
        6px +
        env(safe-area-inset-bottom,0px)
      )!important;

    border-top:
      1px solid #dbe3ee!important;

    background:
      rgba(255,255,255,.985)!important;

    backdrop-filter:blur(14px);

    box-shadow:
      0 -8px 26px
      rgba(15,23,42,.10)!important;
  }

  .f24-market-mobile-nav > a,
  .f24-market-mobile-nav > button{
    min-width:0!important;
    min-height:58px!important;

    padding:6px 4px!important;

    font-size:12.5px!important;
    line-height:1.12!important;
    font-weight:800!important;

    gap:4px!important;
  }

  .f24-market-mobile-nav svg{
    width:22px!important;
    height:22px!important;
    stroke-width:2.15;
  }

  .f24-market-detail-mobile-nav{
    min-height:
      calc(
        74px +
        env(safe-area-inset-bottom,0px)
      )!important;

    background:
      rgba(255,255,255,.985)!important;

    box-shadow:
      0 -7px 22px
      rgba(15,23,42,.09)!important;
  }

  .f24-market-detail-mobile-nav a,
  .f24-market-detail-mobile-nav button{
    min-height:54px!important;

    font-size:12px!important;
    font-weight:800!important;
  }

  .f24-owner-launcher-mobile{
    bottom:
      calc(
        5.8rem +
        env(safe-area-inset-bottom,0px)
      )!important;

    min-height:46px!important;

    font-size:13px!important;
    font-weight:800!important;
  }
}

/* ==========================================================
   ROLE DASHBOARD SIDEBARS
   ========================================================== */

@media (min-width:768px){
  .f24-modern-sidebar{
    position:relative;

    width:17rem!important;

    padding:14px!important;

    border:
      1px solid #e2e8f0!important;

    border-radius:22px!important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.99),
        rgba(248,250,252,.99)
      )!important;

    box-shadow:
      0 16px 40px
      rgba(15,23,42,.08)!important;

    overflow:hidden;
  }

  .f24-modern-sidebar::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:4px;

    background:
      linear-gradient(
        90deg,
        #4f46e5,
        #7c3aed,
        #d946ef
      );
  }

  .f24-sidebar-client::before{
    background:
      linear-gradient(
        90deg,
        #2563eb,
        #4f46e5,
        #7c3aed
      );
  }

  .f24-sidebar-provider::before{
    background:
      linear-gradient(
        90deg,
        #4f46e5,
        #7c3aed,
        #8b5cf6
      );
  }

  .f24-sidebar-admin::before{
    background:
      linear-gradient(
        90deg,
        #e11d48,
        #f43f5e,
        #fb7185
      );
  }

  .f24-modern-sidebar nav{
    display:flex;
    flex-direction:column;

    gap:5px;
  }

  .f24-modern-sidebar nav > div{
    border:
      1px solid
      rgba(226,232,240,.82);

    border-radius:15px;

    padding:5px;

    background:
      rgba(248,250,252,.72);
  }

  .f24-modern-sidebar nav > div + div{
    margin-top:7px;
  }

  .f24-modern-sidebar h2,
  .f24-modern-sidebar h3,
  .f24-modern-sidebar h4,
  .f24-modern-sidebar h5{
    margin-top:10px!important;
    margin-bottom:5px!important;

    padding:0 9px!important;

    color:#64748b!important;

    font-size:10px!important;
    line-height:1.2!important;
    font-weight:900!important;

    letter-spacing:.09em!important;

    text-transform:uppercase;
  }

  .f24-modern-sidebar a,
  .f24-modern-sidebar button{
    min-height:43px;

    border-radius:13px!important;

    transition:
      transform .16s ease,
      background-color .16s ease,
      color .16s ease,
      box-shadow .16s ease;
  }

  .f24-modern-sidebar a:hover,
  .f24-modern-sidebar button:hover{
    transform:translateX(2px);

    box-shadow:
      0 5px 15px
      rgba(79,70,229,.07);
  }

  .f24-modern-sidebar svg{
    width:19px!important;
    height:19px!important;

    flex:0 0 auto;

    stroke-width:2.05;
  }
}

/* ==========================================================
   COMMON PUBLIC / GUEST DESKTOP NAV
   ========================================================== */

@media (min-width:1024px){
  .f24-public-discovery-nav{
    gap:6px!important;

    padding:5px!important;

    border:
      1px solid #e2e8f0;

    border-radius:14px;

    background:
      rgba(248,250,252,.82);
  }

  .f24-public-discovery-nav a{
    display:flex;

    align-items:center;

    min-height:34px;

    padding:0 11px;

    border-radius:10px;

    transition:
      background-color .16s ease,
      color .16s ease,
      box-shadow .16s ease;
  }

  .f24-public-discovery-nav a:hover{
    background:#fff;

    box-shadow:
      0 3px 10px
      rgba(15,23,42,.06);
  }
}