/* static/exhibition/css/exhibitors.css */

/* Overlay затемнение */
.filters-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:flex-start; justify-content:center;
  padding:1rem; z-index:1100; overflow-y:auto;
}
/* Панель поверх */
.filters-panel{
  background:var(--bs-body-bg); width:min(820px,100%);
  margin-top:.5rem; padding:1rem; animation:filterSlide .18s ease-out both;
  border-radius:.75rem;
}
@keyframes filterSlide{ from{transform:translateY(-8px); opacity:0} to{transform:translateY(0); opacity:1} }
body.no-scroll{ overflow:hidden; }

/* Подсветка текущего клиента */
.current-exhibitor{ background:#E3F2FD; border-color:#BBDEFB; }

/* Split-view: Active card highlight (desktop only) */
@media (min-width: 992px) {
  .js-exh-card.active {
    background: #E3F2FD !important;
    border-left: 4px solid var(--bs-primary) !important;
    padding-left: calc(0.75rem - 4px);
  }
}

/* Split-view: Details panel scrolling */
#exhibitorDetails .sticky-top {
  max-height: calc(100vh - 2rem);
}

#exhibitorDetails .card-body {
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
}

.avatar{
  --avatar-size:40px; flex:0 0 auto; width:var(--avatar-size); height:var(--avatar-size);
  border-radius:50%; border:2px solid #CFD8DC; background:transparent;
  display:flex; align-items:center; justify-content:center; color:#455A64;
  font-weight:700; line-height:1; overflow:hidden;
}
.avatar i{ font-size:calc(var(--avatar-size)*.65); line-height:1; }
.avatar .letter{ font-size:calc(var(--avatar-size)*.5); }

.list-group-item{ padding-left:.75rem; padding-right:.75rem; }
.list-group-item .text-end{ padding-right:.25rem; }

.filter-dot{ width:8px; height:8px; }

/* Material-like separator dot */
.md-sep{ display:inline-block; width:6px; height:6px; border-radius:50%;
        background:currentColor; opacity:.45; margin:0 .5rem; vertical-align:middle; }

.nowrap{ white-space:nowrap; }
.nbsp::before{ content:"\202F"; }

/* Триггеры bottom-sheet */
.js-exh-pick{ position:relative; z-index:3; }
.avatar.js-exh-pick{ cursor:pointer; }
.avatar.js-exh-pick:focus{ outline:2px solid var(--bs-primary); outline-offset:2px; }

.sort-panel{ padding:1rem 1rem 0.75rem; border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.18); }

.md-icon-btn{
  --_pad: .45rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--bs-border-color);
  background:var(--bs-body-bg);
  border-radius:.6rem; padding:var(--_pad); line-height:1;
}
.md-icon-btn:hover{ background:var(--bs-secondary-bg); }
.md-icon-btn i{ font-size:1rem; }

.md-sort{ display:flex; flex-direction:column; gap:.5rem; }
.md-row{
  display:grid; align-items:center; gap:.75rem;
  grid-template-columns: max-content 1fr auto auto;
  padding:.25rem 0;
}
.md-label{
  color:var(--bs-secondary-color);
  min-width:6rem; padding-inline-start:.25rem;
}
.md-segment{
  display:inline-flex; border:1px solid var(--bs-border-color);
  border-radius:.6rem; overflow:hidden;
}
.md-segment .seg{
  padding:.375rem .6rem; display:inline-flex; align-items:center; justify-content:center;
  border-right:1px solid var(--bs-border-color); background:var(--bs-body-bg);
}
.md-segment .seg:last-child{ border-right:none; }
.md-segment .seg[aria-pressed="true"],
.md-segment .seg.active{
  background: var(--bs-primary-bg-subtle);
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.md-actions{ display:inline-flex; gap:.35rem; }

/* Compact on small screens */
@media (max-width: 520px){
  .md-row{ grid-template-columns: 1fr auto; grid-template-rows:auto auto; }
  .md-label{ grid-column:1 / -1; margin-bottom:.25rem; }
  .md-actions{ justify-self:end; }
}

.exhibition-selector {
  border-radius: 5px !important;         /* smooth oval shape */
  border: 1.5px solid var(--bs-primary);  /* same blue as Bootstrap primary */
  background-color: #f8fbff;              /* very light blue background */
  color: #0b284f !important;                       /* Bootstrap primary text color */
  padding: 4px 16px;
  transition: all 0.2s ease-in-out;
}

.exhibition-selector:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(13,110,253,0.25); /* subtle blue glow */
  background-color: #fff;
}

.exhibition-selector option {
  color: #212529;
}