/* =========================================
     Quick Search: premium + consistent theme
     ========================================= */
  .qs-shell{ position: relative; }

  .qs-searchbar{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap: wrap;
  }

  .qs-searchbar .form-control{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.12);
    padding: .9rem 1rem;
    box-shadow: none !important;
    font-weight: 850;
  }

  .qs-search-actions .btn{ border-radius: 14px; font-weight: 900; }

  /* Result cards: stronger hierarchy */
  .qs-grid .mini-item{
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.10);
    box-shadow: 0 12px 26px rgba(0,0,0,.06);
    background: #fff;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    position: relative;
  }
  .qs-grid .mini-item:hover{
    transform: translateY(-2px);
    border-color: rgba(21,120,190,.22);
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
  }
  .qs-titleline{
    font-weight: 1000;
    font-size: 1.05rem;
    color: var(--secondary-blue);
    letter-spacing: -.01em;
  }
  .qs-desc{
    margin-top: 6px;
    color: rgba(0,0,0,.62);
    font-size: .93rem;
    line-height: 1.55;
  }
  .qs-actions{
    display:flex;
    gap:8px;
    flex-wrap: wrap;
    margin-top: 12px;
    position: relative;
    z-index: 2;
  }
  .qs-actions a.btn{ position: relative; z-index: 2; }

  /* Suggestions: portal to body (no clipping) */
  .qs-suggest{
    position: fixed;
    z-index: 2000;
    width: 420px; /* overwritten by JS */
    max-width: min(720px, 92vw);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
    overflow:hidden;
    display:none;
  }
  .qs-suggest-head{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background:linear-gradient(135deg, rgba(21,120,190,.10), rgba(212,0,0,.06), #fff);
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
  }
  .qs-suggest-item{
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    cursor:pointer;
  }
  .qs-suggest-item:hover{ background: rgba(21,120,190,.06); }
  .qs-suggest-item:last-child{ border-bottom: none; }
  .qs-s-code{ font-weight: 1000; color: var(--secondary-blue); }
  .qs-s-name{ font-weight: 900; color: rgba(0,0,0,.88); }
  .qs-s-meta{
    margin-top: 2px;
    font-size: .88rem;
    color: rgba(0,0,0,.62);
    display:flex;
    gap:8px;
    flex-wrap: wrap;
    align-items:center;
  }

  /* Offcanvas width */
  .offcanvas{ width: min(640px, 96vw); }

  /* Offcanvas content cards */
  .oc-box{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.06);
    padding: 12px 12px;
    white-space: pre-wrap;
    line-height: 1.6;
    color: rgba(0,0,0,.82);
  }
  .oc-sec{ margin-top: 14px; }

  .oc-title{
    font-weight: 1000;
    letter-spacing: -.02em;
    color: var(--secondary-blue);
    margin:0;
  }
  .oc-sub{
    color: rgba(0,0,0,.62);
    font-weight: 850;
    font-size: .92rem;
  }

  .oc-chiprow{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-bottom: 10px;
  }

  /* Titles list items inside offcanvas */
  .oc-title-item{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 16px;
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 10px 12px;
  }
  .oc-title-item .tname{ font-weight: 1000; }
  .oc-title-item .tdesc{ color: rgba(0,0,0,.62); margin-top: 4px; font-size:.92rem; }

  /* Make offcanvas header feel “app-like” */
  .offcanvas-header{
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(10px);
  }



  /* ---------- Quick search extra polish ---------- */
  .qs-grid .mini-item{
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
    padding: 14px 14px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .qs-grid .mini-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.08);
  }
  .qs-titleline{
    font-weight: 1000;
    letter-spacing: -.01em;
    color: var(--secondary-blue);
    line-height: 1.2;
  }
  .qs-desc{
    margin-top: 6px;
    color: rgba(0,0,0,.70);
    line-height: 1.55;
    font-size: .95rem;
  }
  .qs-actions{
    margin-top: 10px;
    display:flex;
    gap:8px;
    flex-wrap: wrap;
    align-items:center;
  }

  /* ---------- Suggestions dropdown sits above everything ---------- */
  #qsSuggest{
    z-index: 1100;
  }

  /* ---------- Offcanvas: premium header ---------- */
  .offcanvas-header{
    background: linear-gradient(135deg, rgba(21,120,190,.12), rgba(212,0,0,.08), #fff);
    border-bottom: 1px solid rgba(0,0,0,.08);
  }
  .oc-sub{
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(0,0,0,.55);
  }
  .oc-title{
    font-weight: 1000;
    letter-spacing: -.02em;
    color: rgba(6,30,55,.95);
  }

  /* ---------- Offcanvas content blocks ---------- */
  .oc-chiprow{
    display:flex; gap:8px; flex-wrap:wrap; align-items:center;
    margin-bottom: 10px;
  }

  .oc-sec{ margin-top: 14px; }

  .field-label{
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(0,0,0,.58);
    margin: 0 0 8px;
    display:flex;
    align-items:center;
    gap:8px;
  }

  .oc-box{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 12px 12px;
    line-height: 1.65;
    color: rgba(0,0,0,.82);
    overflow-wrap: anywhere;
  }

  /* lists inside oc-box */
  .oc-box ul{
    margin: 0;
    padding-left: 1.15rem;
  }
  .oc-box li{
    margin: 8px 0;
    padding-left: 2px;
  }
  .oc-box li::marker{
    font-weight: 900;
    color: rgba(21,120,190,.85);
  }

  /* paragraphs inside oc-box */
  .oc-box p{
    margin: 0 0 10px;
  }
  .oc-box p:last-child{ margin-bottom: 0; }

  /* skeleton loader box */
  .oc-skel{
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 12px 12px;
  }


   .qs-shell{ border-radius: 22px; border: 1px solid rgba(0,0,0,.10); background: rgba(255,255,255,.72); box-shadow: 0 18px 50px rgba(2,10,28,.10); padding: 14px; }
  .qs-searchbar{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
  .qs-searchbar .form-control, .qs-searchbar .form-select{ height: 44px; border-radius: 14px; }
  .qs-actions .btn{ height:44px; border-radius: 14px; font-weight: 900; }

  .mini-item{
    position:relative;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.10);
    background: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 12px 12px 46px; /* bottom space for badge */
    overflow:hidden;
  }
  .qs-titleline{ font-weight:1000; color: rgba(11,18,32,.92); }
  .qs-desc{ margin-top:6px; color: rgba(11,18,32,.68); font-size:.94rem; }
  .qs-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

  .type-pill{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 10px; border-radius:999px;
    border:1px solid rgba(21,120,190,.18);
    background: rgba(21,120,190,.06);
    color: rgba(4,64,124,.92);
    font-weight: 1000;
    font-size:.82rem;
  }

  /* Bottom-right category badge */
 /* Bottom-right category badge (safe truncation) */
.cat-badge{
  position:absolute;
  right:10px;
  bottom:10px;

  /* keep within the card */
  max-width: min(92%, 520px);

  display:flex;               /* important */
  align-items:center;
  gap:8px;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.70);
  font-weight: 900;
  font-size: .82rem;
  text-decoration:none;

  /* allow shrinking inside flex */
  min-width: 0;
}

.cat-badge:hover{
  background: rgba(21,120,190,.06);
  border-color: rgba(21,120,190,.18);
  color: rgba(4,64,124,.92);
}

.cat-badge .lbl{
  opacity:.72;
  flex: 0 0 auto;            /* label never shrinks */
}

/* THIS is the key: truncate only the name */
.cat-badge .cat-text{
  flex: 1 1 auto;
  min-width: 0;              /* required for ellipsis in flex */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

  /* Offcanvas content boxes */
  .oc-box{
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background:#fff;
    box-shadow: 0 10px 22px rgba(0,0,0,.05);
    padding: 10px 12px;
    color: rgba(0,0,0,.80);
  }
  .field-label{
    margin-top: 12px;
    margin-bottom: 6px;
    font-size:.78rem;
    letter-spacing:.10em;
    text-transform:uppercase;
    color: rgba(0,0,0,.55);
    font-weight: 1000;
    display:flex; align-items:center; gap:8px;
  }


  /* Category row (below buttons) */
.qs-category-row{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  line-height: 1.2;
}

/* Label */
.qs-cat-label{
  font-weight: 900;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
}

/* Link */
.qs-cat-link{
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;

  /* long names handled safely */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-cat-link:hover{
  text-decoration: underline;
}