/* Shared frontend base.
* Own only shared/global SBF frontend primitives used across search/detail/front-end surfaces.
* Page-specific views must scope their selectors to a page root and must not rely on unscoped generic selectors here.
*/
/* Max-length helper + warning (frontend) */
.sbf-help{margin:8px 0 0;color:#6b7280;font-size:12px}
.sbf-warn{margin:8px 0 0;color:#b45309;font-size:12px;font-weight:600}
:root{--sbf-bg:#f6f7f9;--sbf-card:#ffffff;--sbf-text:#1f2937;--sbf-muted:#6b7280;--sbf-border:#e5e7eb;--sbf-blue:#2563eb;--sbf-blue-10:rgba(37,99,235,.1);--sbf-green:#10b981;--sbf-green-25:rgba(16,185,129,.25);--sbf-green-45:rgba(16,185,129,.45);--sbf-shadow:0 10px 30px rgba(0,0,0,.08)}
/* ===== Single Open Card view (QR direct link) =====
URL: ?sbf_view=single&entry_id=ID&category=...
We render a single hidden row only to supply the header line that the inline card promotes.
The actual visible UI is the inline card itself.
*/
#sbfFeResults[data-sbf-view="single"] .sbf-gmail__row{display:none !important;}
#sbfFeResults[data-sbf-view="single"]{margin-top:10px;}
.sbf-home,.sbf-fe{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--sbf-text)}
/* Home */
.sbf-home:not(.sbf-home-dashboard-bleed){max-width:1040px;margin:0 auto;padding:20px}
.sbf-home__hero{background:var(--sbf-card);border:1px solid var(--sbf-border);border-radius:18px;padding:18px;box-shadow:var(--sbf-shadow)}
.sbf-home__searchWrap{display:flex;align-items:center;gap:10px;border:1px solid var(--sbf-border);border-radius:999px;padding:10px 12px;background:#fff}
.sbf-home__searchIcon{font-size:18px;opacity:.85}
.sbf-home__search{flex:1;border:0;outline:0;background:transparent;font-size:18px;line-height:1.2}
.sbf-home__search:focus{outline:none}
.sbf-home__mic{border:0;background:var(--sbf-blue-10);color:var(--sbf-blue);padding:8px 10px;border-radius:999px;cursor:not-allowed;opacity:.8}
.sbf-home__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sbf-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--sbf-border);background:#fff;color:var(--sbf-text);text-decoration:none;font-weight:600}
.sbf-pill:hover{border-color:#cbd5e1}
.sbf-home__stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0 0}
.sbf-stat{background:var(--sbf-card);border:1px solid var(--sbf-border);border-radius:14px;padding:12px 12px;display:flex;justify-content:space-between;align-items:center}
.sbf-stat__label{font-size:12px;color:var(--sbf-muted);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.sbf-stat__value{font-size:18px;font-weight:800}
.sbf-stat--warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35)}
.sbf-stat--info{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35)}
.sbf-home__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.sbf-card{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--sbf-card);border:1px solid var(--sbf-border);min-height:180px;text-decoration:none;color:#fff;box-shadow:var(--sbf-shadow)}
.sbf-card__img{position:absolute;inset:0;background:#111827;opacity:1;background-size:cover;background-position:center}
.sbf-card__img--bins{background:linear-gradient(135deg,#f59e0b,#d97706)}
.sbf-card__img--locations{background:linear-gradient(135deg,#10b981,#059669)}
.sbf-card__img--hardware{background:linear-gradient(135deg,#111827,#334155)}
.sbf-card__img--tools{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.sbf-card__img--items{background:linear-gradient(135deg,#a855f7,#6d28d9)}
.sbf-card__img--fluids{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.sbf-card__overlay{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.65))}
.sbf-card__title{font-size:20px;font-weight:900;letter-spacing:.2px}
.sbf-card__sub{margin-top:4px;font-size:13px;opacity:.9;font-weight:700}
.sbf-home__map{margin-top:18px}
.sbf-home__sectionTitle{font-size:16px;font-weight:900;margin-bottom:10px}
.sbf-home__mapGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sbf-miniCard{border:1px solid var(--sbf-border);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:var(--sbf-text);box-shadow:var(--sbf-shadow)}
.sbf-miniCard__img{height:72px;background:#e5e7eb}
.sbf-miniCard__img--front{background:linear-gradient(135deg,#9ca3af,#e5e7eb)}
.sbf-miniCard__img--back{background:linear-gradient(135deg,#94a3b8,#e2e8f0)}
.sbf-miniCard__img--storage{background:linear-gradient(135deg,#a7f3d0,#d1fae5)}
.sbf-miniCard__img--trailer{background:linear-gradient(135deg,#fca5a5,#fee2e2)}
.sbf-miniCard__img--mobile{background:linear-gradient(135deg,#bfdbfe,#dbeafe)}
.sbf-miniCard__img--location{background-color:#fff;background-image:url(../images/location-icon.svg);background-repeat:no-repeat;background-position:center;background-size:56%}
.sbf-miniCard__body{padding:10px 12px}
.sbf-miniCard__title{font-weight:900}
.sbf-miniCard__meta{margin-top:4px;color:#6b7280;font-size:12px;line-height:1.2}
.sbf-miniCard__btn{display:inline-block;margin-top:8px;background:var(--sbf-blue-10);color:var(--sbf-blue);padding:8px 10px;border-radius:12px;font-weight:800;font-size:12px}
/* Area view */
.sbf-area__head{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px 14px;margin:10px 0 14px 0;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sbf-area__headTop{display:flex;gap:12px;align-items:flex-start}
.sbf-area__thumbWrap{flex:0 0 auto}
.sbf-area__thumbBtn{border:0;background:transparent;padding:0;cursor:pointer}
.sbf-area__thumb{width:72px;height:72px;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e5e7eb;background:#f9fafb}
.sbf-area__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-area__thumbPh{font-size:22px;opacity:.75}
.sbf-area__thumbIcon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#f3f4f6}
.sbf-gmail__thumbIcon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#f3f4f6}
.sbf-iconPin{fill:#9aa3af}
.sbf-area__headInfo{min-width:0;flex:1 1 auto}
.sbf-area__codePill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#f3f4f6;color:#111827;font-weight:900;font-size:12px}
.sbf-area__name{font-weight:900;font-size:18px}
.sbf-area__meta{color:#6b7280;font-size:13px;margin-top:2px}
.sbf-area__counts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;color:#111827;font-size:13px;font-weight:700}
.sbf-area__notes{margin-top:10px;color:#374151;font-size:13px;line-height:1.3}
.sbf-area__notesTitle{font-weight:900;margin-bottom:6px;color:#111827}
.sbf-area__notesText{color:#374151}
.sbf-area__noContent{margin-top:6px;color:#6b7280;font-weight:700}
.sbf-area__binList{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px}
.sbf-area__binRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid #f3f4f6}
.sbf-area__binRow:last-child{border-bottom:0}
.sbf-area__binName{font-weight:800;color:#111827}
.sbf-area__binCode{color:#6b7280;font-weight:800;font-size:12px;white-space:nowrap}
.sbf-area__section{margin-top:14px}
.sbf-area__sectionTitle{font-weight:900;margin:10px 0}
/* =============================
* AREA (Location) HEADER (Hero)
* ============================= */
.sbf-areaHero{margin:10px 0 14px}
.sbf-areaHero__bar{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.sbf-areaHero__barTitle{font-size:28px;font-weight:900;color:#111827;letter-spacing:-.02em}
.sbf-areaHero__actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.sbf-areaHero__back{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111827;text-decoration:none;font-weight:900}
.sbf-areaHero__editBtn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#111827;font-weight:900;cursor:pointer}
.sbf-areaHero__editBtn:hover,.sbf-areaHero__back:hover{background:#f9fafb}
.sbf-areaHero__editIcon svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbf-areaHero__card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;display:flex;min-height:210px}
.sbf-areaHero__media{flex:0 0 44%;min-width:240px;background:#f3f4f6 center/cover no-repeat;position:relative}
.sbf-areaHero__media:after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:46%;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.82) 55%, rgba(255,255,255,1) 100%)}
.sbf-areaHero__media--noimg{display:flex;align-items:center;justify-content:center}
.sbf-areaHero__noimgIcon{display:inline-flex;align-items:center;justify-content:center;color:#9ca3af}
.sbf-areaHero__noimgIcon svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sbf-areaHero__content{flex:1 1 auto;min-width:0;padding:30px 22px;display:flex;flex-direction:column;justify-content:center}
.sbf-areaHero__topRow{display:flex;align-items:center;gap:14px}
.sbf-areaHero__name{font-size:42px;line-height:1.05;font-weight:900;color:#111827;letter-spacing:-.03em;min-width:0}
.sbf-areaHero__codePill{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;background:#dff3ef;border:1px solid rgba(17,24,39,.08);color:#0f3d3a;font-weight:900;font-size:18px;cursor:pointer;user-select:none}
.sbf-areaHero__counts{margin-top:16px;display:flex;flex-wrap:wrap;gap:12px;color:#111827;font-weight:800;font-size:16px}
.sbf-areaHero__count{display:inline-flex;align-items:center;gap:10px}
.sbf-areaHero__countIcon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;opacity:.9}
.sbf-areaHero__countIcon svg{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Area header: collapsible bins block */
.sbf-areaHero__bins{margin-top:0;padding-top:14px;border-top:1px solid #eef2f7}
.sbf-areaHero__binsHeader{display:flex;align-items:center;gap:12px;font-weight:900;color:#111827}
.sbf-areaHero__binsLabel{font-size:16px}
.sbf-areaHero__binsPills{margin-left:auto;display:flex;gap:10px;align-items:center}
.sbf-areaHero__binsPill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;color:#111827;font-weight:900;font-size:13px}
.sbf-areaHero__binsBody{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
.sbf-areaHero__binsSection{flex:1 1 360px;min-width:260px}
.sbf-areaHero__binsTitle{font-weight:900;color:#111827;margin:0 0 8px;font-size:14px;text-transform:uppercase;letter-spacing:.06em;opacity:.75}
.sbf-areaHero__binsSection .sbf-gmail{max-height:280px;overflow:auto;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.sbf-areaHero__binsSection .sbf-gmail .sbf-gmail__row{border-left:0;border-right:0}
@media (max-width: 920px){
.sbf-areaHero__barTitle{font-size:22px}
.sbf-areaHero__card{flex-direction:column}
.sbf-areaHero__media{flex:0 0 auto;min-width:0;height:170px}
.sbf-areaHero__media:after{display:none}
.sbf-areaHero__content{padding:18px 16px}
.sbf-areaHero__name{font-size:28px}
.sbf-areaHero__codePill{font-size:14px;padding:8px 12px}
.sbf-areaHero__counts{font-size:14px;gap:12px}
}
/* Placeholder view */
.sbf-fe{max-width:980px;margin:0 auto;padding:18px}
.sbf-fe__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sbf-fe__back{display:inline-flex;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--sbf-border);background:#fff;text-decoration:none;color:var(--sbf-text);font-weight:800}
.sbf-fe__title{font-size:20px;font-weight:1000}
.sbf-fe__notice{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.35);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.sbf-fe__placeholder{background:#fff;border:1px solid var(--sbf-border);border-radius:18px;padding:18px;box-shadow:var(--sbf-shadow)}
.sbf-fe__placeholderTitle{font-size:18px;font-weight:1000;margin-bottom:6px}
.sbf-fe__placeholderSub{color:var(--sbf-muted);font-weight:700}
@media (max-width: 960px){
.sbf-home__stats{grid-template-columns:repeat(2,1fr)}
.sbf-home__cards{grid-template-columns:repeat(2,1fr)}
.sbf-home__mapGrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 520px){
.sbf-home__cards{grid-template-columns:1fr}
.sbf-card--wide{grid-column:span 1}
.sbf-home__mapGrid{grid-template-columns:1fr}
}
/* === Mobile compact list polish (AWZ+) === */
@media (max-width: 520px){
/* Less left/right padding on mobile list pages */
.sbf-fe{padding-left:8px;padding-right:8px}
/* Make the list read like a list (not a card) */
.sbf-gmail{border:none;border-radius:0;box-shadow:none;background:transparent}
/* Tighter rows */
.sbf-gmail__row{padding:8px 6px;gap:8px}
.sbf-gmail__thumb{width:48px;height:48px;border-radius:12px}
.sbf-gmail__chip{min-width:50px;padding:7px 12px}
.sbf-gmail__chev{width:26px;height:26px}
/* Subtle divider line between items */
.sbf-gmail__row{border-top:1px solid rgba(229,231,235,.75)}
}
/* Gmail-style compact list (Hardware Phase 2) */
.sbf-fe--gmail{padding-top:10px}
.sbf-fe__searchBar{display:block;margin:10px 0 14px}
.sbf-fe__searchRow{display:flex;gap:10px;align-items:center}
.sbf-fe__searchInput{flex:1;border:1px solid var(--sbf-border);border-radius:14px;padding:12px 14px;font-size:15px;font-weight:800;outline:none;background:#fff}
.sbf-fe__searchInput:focus{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
.sbf-fe__searchBtn{border:1px solid var(--sbf-border);background:#fff;border-radius:14px;padding:12px 14px;font-weight:900;cursor:pointer}
.sbf-gmail{background:#fff;border:1px solid var(--sbf-border);border-radius:18px;box-shadow:var(--sbf-shadow);overflow:hidden}
/* Inline open-card "parted list" mode: split the list into top/bottom segments with space around the card. */
.sbf-gmail.sbf-gmail--split{background:transparent;border:0;box-shadow:none;overflow:visible}
.sbf-gmail__segment{background:#fff;border:1px solid var(--sbf-border);border-radius:18px;box-shadow:var(--sbf-shadow);overflow:hidden}
.sbf-gmail__segment--top{margin-bottom:14px}
.sbf-gmail__segment--bottom{margin-top:14px}
.sbf-gmail.sbf-gmail--split .sbf-inline{margin:0 auto}
.sbf-gmail__empty{padding:18px;color:var(--sbf-muted);font-weight:800}
/* Section heading inside gmail-style results (used for "Other Things We Found") */
.sbf-gmail__sectionTitle{margin:14px 0 10px;padding:10px 6px;font-size:18px;font-weight:900;letter-spacing:.01em;color:#1d2327;background:transparent;border-top:1px solid rgba(229,231,235,.9);border-bottom:1px solid rgba(229,231,235,.9);text-align:center}
.sbf-gmail__subSectionTitle{margin:10px 0 4px;padding:0 2px;font-size:12px;font-weight:800;color:#1d2327}
.sbf-gmail__row{border-top:1px solid var(--sbf-border)}
.sbf-gmail__row:first-child{border-top:none}
.sbf-gmail__main{width:100%;border:0;background:transparent;padding:12px 12px;display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer}
.sbf-gmail__row.is-open .sbf-gmail__main{background:rgba(37,99,235,.06)}
.sbf-gmail__thumb{width:44px;height:44px;border-radius:12px;overflow:hidden;flex:0 0 auto;border:1px solid var(--sbf-border);background:linear-gradient(135deg,#eef2ff,#f8fafc);display:flex;align-items:center;justify-content:center}
.sbf-gmail__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-gmail__thumbPh{font-size:18px}
.sbf-gmail__text{min-width:0;flex:1}
.sbf-gmail__title{display:block;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__meta{display:flex;gap:8px;align-items:center;margin-top:4px}
.sbf-gmail__loc{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:6px 10px;border-radius:999px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.30);color:#065f46;font-weight:1000;font-size:12px;letter-spacing:.02em}
.sbf-gmail__loc--empty{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.35);color:var(--sbf-muted)}
.sbf-gmail__right{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.sbf-gmail__qty{font-weight:900;color:var(--sbf-muted);font-size:12px}
.sbf-gmail__chev{font-size:16px;color:var(--sbf-muted);transition:transform .15s ease}
.sbf-gmail__row.is-open .sbf-gmail__chev{transform:rotate(180deg)}
.sbf-gmail__detail{border-top:1px solid var(--sbf-border);background:rgba(248,250,252,.70);padding:12px}
.sbf-detail{background:#fff;border:1px solid var(--sbf-border);border-radius:16px;padding:12px;box-shadow:0 8px 24px rgba(15,23,42,.06)}
.sbf-detail__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sbf-detail__title{font-weight:1000;font-size:16px;line-height:1.15}
.sbf-detail__badge{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:7px 12px;border-radius:999px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.30);color:#065f46;font-weight:1000;font-size:12px}
.sbf-detail__grid{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start}
.sbf-detail__img{width:120px;height:84px;border-radius:14px;overflow:hidden;border:1px solid var(--sbf-border);background:#f8fafc}
.sbf-detail__img img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-detail__imgPh{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--sbf-muted);font-weight:900}
.sbf-detail__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sbf-detail__field{border:1px solid var(--sbf-border);border-radius:14px;padding:10px 10px;background:#fff}
.sbf-detail__field span{display:block;color:var(--sbf-muted);font-weight:900;font-size:11px;letter-spacing:.02em}
.sbf-detail__field strong{display:block;margin-top:4px;font-weight:1000}
.sbf-detail__notes{margin-top:10px;border-top:1px solid var(--sbf-border);padding-top:10px;color:#334155;font-weight:750;line-height:1.35}
.sbf-detail__actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.sbf-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:14px;border:1px solid var(--sbf-border);background:#fff;font-weight:900;text-decoration:none;color:var(--sbf-text)}
.sbf-btn:hover{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.35)}
@media (max-width: 520px){
.sbf-detail__grid{grid-template-columns:1fr}
.sbf-detail__img{width:100%;height:160px}
.sbf-detail__fields{grid-template-columns:1fr}
}
/* --- AWQ: True 3-line Gmail-style row layout --- */
.sbf-gmail__row{display:flex;gap:0}
.sbf-gmail__thumbBtn{border:0;background:transparent;padding:10px 10px 10px 12px;cursor:pointer;display:flex;align-items:center}
.sbf-gmail__thumbBtn:focus{outline:2px solid rgba(37,99,235,.35);outline-offset:2px;border-radius:14px}
.sbf-gmail__mainBtn{flex:1;border:0;background:transparent;padding:10px 12px 10px 6px;display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:left;cursor:pointer;min-width:0}
.sbf-gmail__row.is-open .sbf-gmail__mainBtn{background:rgba(37,99,235,.06)}
.sbf-gmail__text{min-width:0;flex:1}
.sbf-gmail__l1{display:block;font-size:15px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__l2{display:block;font-size:13px;color:var(--sbf-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__l3{display:block;font-size:12px;color:var(--sbf-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.sbf-gmail__chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 10px;border-radius:999px;background:rgba(16,185,129,.14);color:#065f46;font-weight:900;letter-spacing:.02em}
.sbf-gmail__chev{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--sbf-border);color:var(--sbf-muted)}
.sbf-gmail__row.is-open .sbf-gmail__chev{transform:rotate(180deg)}
/* Hide legacy meta/qty styles if present */
.sbf-gmail__meta,.sbf-gmail__loc,.sbf-gmail__qty{display:none !important}
/* Lightbox */
.sbf-lightbox{position:fixed;inset:0;background:rgba(15,23,42,.72);display:none;align-items:center;justify-content:center;padding:18px;z-index:99999}
.sbf-lightbox.is-open{display:flex}
.sbf-lightbox__img{max-width:min(920px,96vw);max-height:86vh;border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.35);background:#fff}
.sbf-lightbox__close{position:absolute;top:14px;right:14px;border:0;background:rgba(255,255,255,.92);border-radius:999px;width:42px;height:42px;cursor:pointer;font-size:22px;line-height:42px}
/* === Frontend Gmail-style list v2 (AW R) === */
.sbf-gmail__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px}
.sbf-gmail__row{border-top:1px solid var(--sbf-border)}
.sbf-gmail__row:first-child{border-top:none}
.sbf-gmail__row.is-open{background:rgba(37,99,235,.04)}
.sbf-gmail__thumbBtn{border:0;background:transparent;padding:0;cursor:pointer;flex:0 0 auto}
.sbf-gmail__thumb{width:56px;height:56px;border-radius:14px;overflow:hidden;flex:0 0 auto;border:1px solid var(--sbf-border);background:linear-gradient(135deg,#eef2ff,#f8fafc);display:flex;align-items:center;justify-content:center}
.sbf-gmail__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-gmail__thumbPh{font-size:20px}
.sbf-gmail__mainBtn{border:0;background:transparent;padding:0;cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.sbf-gmail__text{display:flex;flex-direction:column;min-width:0;gap:2px}
.sbf-gmail__l1{font-size:15px;font-weight:900;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__l2{font-size:13px;font-weight:850;color:var(--sbf-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__l3{font-size:13px;font-weight:850;color:var(--sbf-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbf-gmail__right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.sbf-gmail__chip{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:8px 14px;border-radius:999px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.20);font-weight:1000;color:#0f766e}
.sbf-gmail__chev{width:28px;height:28px;border-radius:999px;border:1px solid var(--sbf-border);display:inline-flex;align-items:center;justify-content:center;color:var(--sbf-muted);font-weight:900;background:#fff}
.sbf-gmail__row.is-open .sbf-gmail__chev{transform:rotate(180deg)}
.sbf-gmail__detail{flex:0 0 100%;width:100%;margin-top:8px}
/* Flyout */
body.sbf-noScroll{overflow:hidden}
.sbf-flyout{position:fixed;inset:0;z-index:99999;display:none}
.sbf-flyout.is-open{display:block}
.sbf-flyout__overlay{position:absolute;inset:0;background:rgba(17,24,39,.35)}
.sbf-flyout__panel{position:absolute;top:0;right:0;height:100%;width:min(920px,100%);background:#fff;box-shadow:-12px 0 30px rgba(0,0,0,.18);display:flex;flex-direction:column}
.sbf-flyout__close{position:absolute;top:12px;right:12px;border:1px solid var(--sbf-border);background:#fff;border-radius:999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.sbf-flyout__content{display:grid;grid-template-columns:360px 1fr;gap:12px;padding:18px;padding-top:56px;height:100%;overflow:auto}
@media (max-width:860px){.sbf-flyout__content{grid-template-columns:1fr}}
.sbf-flyout__media{min-width:0}
.sbf-flyout__mainBtn{border:0;background:transparent;padding:0;cursor:pointer;width:100%}
.sbf-flyout__mainImg{width:100%;height:auto;border-radius:14px;border:1px solid var(--sbf-border);background:#f3f4f6;display:block}
.sbf-flyout__thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sbf-flyout__thumbBtn{border:1px solid var(--sbf-border);background:#fff;border-radius:10px;padding:0;width:56px;height:56px;overflow:hidden;cursor:pointer}
.sbf-flyout__thumbBtn img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-flyout__thumbBtn.is-active{outline:2px solid var(--sbf-blue);outline-offset:1px}
.sbf-flyout__info{min-width:0}
.sbf-flyout__titleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sbf-flyout__title{font-size:22px;font-weight:750;line-height:1.15}
.sbf-flyout__badge{background:rgba(16,185,129,.12);color:#065f46;border:1px solid rgba(16,185,129,.25);padding:6px 10px;border-radius:999px;font-weight:700;white-space:nowrap}
.sbf-flyout__sub{margin-top:6px;color:var(--sbf-muted);font-size:14px}
.sbf-flyout__kv{margin-top:14px;border-top:1px solid var(--sbf-border);padding-top:10px}
.sbf-kv__row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid rgba(229,231,235,.6)}
.sbf-kv__row dt{color:var(--sbf-muted);font-weight:650}
.sbf-kv__row dd{margin:0;color:var(--sbf-text);font-weight:650}
.sbf-flyout__notes{margin-top:14px}
.sbf-flyout__notesLabel{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--sbf-muted);font-weight:750;margin-bottom:6px}
.sbf-flyout__notesText{color:var(--sbf-text);line-height:1.45}
/* Make list rows feel clickable */
.sbf-gmail__mainBtn{cursor:pointer}
/* Inline details panel (opens under a row) */
.sbf-gmail__row.is-expanded{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* When expanded, we "promote" the row header instead of duplicating title/location, and hide the small thumbnail */
.sbf-gmail__row.is-expanded .sbf-gmail__thumbBtn{display:none}
.sbf-gmail__row.is-expanded{padding-top:14px;padding-bottom:14px}
.sbf-gmail__row.is-expanded .sbf-gmail__l1{font-size:18px;line-height:1.2}
.sbf-gmail__row.is-expanded .sbf-gmail__l2{font-size:14px}
.sbf-gmail__row.is-expanded .sbf-gmail__chip{transform:scale(1.02)}
/* Search results type badge */
.sbf-gmail__chip.sbf-gmail__chip--type{
min-width:0;
height:22px;
padding:0 8px;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
border:1px solid rgba(107,114,128,.30);
background:rgba(107,114,128,.10);
color:#374151;
margin-right:8px;
}
/* Code pill inside the inline (open card) details list */
.sbf-gmail__chip.sbf-gmail__chip--code{
min-width:0;
height:28px;
padding:0 10px;
font-size:13px;
}
.sbf-gmail__l2sep{margin:0 6px; opacity:.7}
.sbf-inline{max-width:1040px;margin:16px auto 12px; padding:0}
/* Single-view: keep the post-card sections (search + contents) aligned to the same width as the open card.
Themes may constrain .sbf-fe differently (it has its own max-width + padding), causing mismatched widths.
In single-view we normalize to the open-card container width and remove outer padding. */
.sbf-singleOpenCard .sbf-fe{
max-width:1040px;
margin:0 auto 16px;
padding:0;
width:100%;
box-sizing:border-box;
}
.sbf-singleOpenCard .sbf-inline__inner{
max-width:1040px;
margin:0 auto;
width:100%;
box-sizing:border-box;
}
.sbf-singleOpenCard .sbf-fe__searchBar{margin:14px 0 10px}
.sbf-singleOpenCard #sbfFeResults,
.sbf-singleOpenCard .sbf-gmail{width:100%}
.sbf-inline__inner{background:var(--sbf-card);border:1px solid var(--sbf-border);border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.06);padding:14px 14px 16px;position:relative;animation:sbf-inline-enter 140ms ease-out}
@keyframes sbf-inline-enter{
from{transform:translateY(-4px);opacity:.98}
to{transform:translateY(0);opacity:1}
}
/* Close button is now part of the header (see header styles below) */
.sbf-inline__content{display:flex;gap:16px;align-items:flex-start}
.sbf-inline__media{width:280px;flex:0 0 280px}
.sbf-inline__mainBtn{border:0;background:transparent;padding:0;width:100%;cursor:pointer}
.sbf-inline__mainImg{width:100%;height:220px;object-fit:cover;border-radius:14px;border:1px solid var(--sbf-border);display:block}
.sbf-inline__mainPh{width:100%;height:220px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--sbf-border);background:linear-gradient(135deg, rgba(2,132,199,.08), rgba(16,185,129,.08));font-size:56px;line-height:1}
.sbf-inline__thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sbf-inline__thumbBtn{border:1px solid var(--sbf-border);background:#fff;border-radius:12px;padding:0;cursor:grab;overflow:hidden}
.sbf-inline__thumbBtn img{width:52px;height:52px;object-fit:cover;display:block}
.sbf-inline__thumbBtn.is-active{border-color:rgba(37,99,235,.55);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.sbf-inline__thumbBtn.is-dragover{box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.sbf-inline__thumbBtn.is-dragging{opacity:.55;cursor:grabbing}
/* Inline actions (UI only for now) */
.sbf-inline__addPhotos{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--sbf-border);background:#f8fafc;border-radius:12px;padding:12px 12px;font-weight:800;color:var(--sbf-text);cursor:pointer}
.sbf-inline__addPhotos:hover{background:#eef2f7}
.sbf-inline__addPhotosIcon{font-size:18px;line-height:1}
/* Header (title/meta on left, actions on right) */
.sbf-inline__head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between}
.sbf-inline__headLeft{min-width:0;flex:1}
.sbf-inline__headLeft .sbf-gmail__text{gap:4px}
.sbf-inline__headLeft .sbf-gmail__l1{font-size:20px;line-height:1.2}
.sbf-inline__headLeft .sbf-gmail__l2,.sbf-inline__headLeft .sbf-gmail__l3{font-size:14px}
.sbf-inline__headRight{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex:0 0 auto;margin-top:2px}
.sbf-inline__assistOnly{display:none !important;}
.sbf-inline__menuWrap{position:relative;display:flex;align-items:center;}
.sbf-inline__menuBtn{
gap:8px;
background:#f3f4f6;
font-size:13px;
padding:7px 10px;
height:32px;
min-width:auto;
box-shadow:none;
}
.sbf-inline__menuBtn:hover{filter:brightness(.98);}
.sbf-inline__menuBtn.is-open{
background:#e5e7eb;
border-color:var(--sbf-border);
}
.sbf-inline__menuBtnCaret{
font-size:12px;
line-height:1;
margin-left:2px;
}
.sbf-inline__menu{
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:210px;
background:#fff;
border:1px solid var(--sbf-border);
border-radius:14px;
box-shadow:0 18px 50px rgba(0,0,0,.12);
padding:8px 0;
z-index:80;
}
.sbf-inline__menuList{
display:flex;
flex-direction:column;
}
.sbf-inline__menuAction{
appearance:none;
-webkit-appearance:none;
width:100%;
border:0;
background:transparent;
border-radius:0;
padding:11px 14px;
text-align:left;
font-weight:700;
color:var(--sbf-text);
cursor:pointer;
box-shadow:none;
outline:none;
}
.sbf-inline__menuAction:hover{background:#f8fafc}
.sbf-inline__menuAction.is-disabled{opacity:.6;cursor:pointer}
.sbf-inline__menuActionTxt{display:block;line-height:1.25}
/* Compact code pill that mirrors the row chip */
.sbf-inline__codePill{display:none;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(16,185,129,.35);background:linear-gradient(180deg, rgba(16,185,129,.18), rgba(16,185,129,.10));color:#065f46;font-weight:900;border-radius:999px;padding:6px 10px;font-size:13px;line-height:1}
/* Smaller top-right buttons */
.sbf-inline__btn{border:1px solid var(--sbf-border);border-radius:999px;padding:7px 10px;font-weight:900;cursor:pointer;background:#f3f4f6;color:var(--sbf-text);font-size:13px;line-height:1;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:32px}
.sbf-inline__btnIcon{font-size:14px;line-height:1}
.sbf-inline__btnTxt{line-height:1}
.sbf-inline__btn:hover{filter:brightness(.98)}
.sbf-inline__btn.is-disabled,
.sbf-inline__addPhotos.is-disabled{opacity:.6;filter:grayscale(.2);cursor:pointer}
.sbf-inline__btn.is-disabled:hover,
.sbf-inline__addPhotos.is-disabled:hover{filter:none}
.sbf-inline__btn--order{background:linear-gradient(180deg, rgba(16,185,129,.22), rgba(16,185,129,.12));border-color:rgba(16,185,129,.35)}
/* Close button (top right of the header) */
.sbf-inline__close{border:1px solid var(--sbf-border);background:#fff;border-radius:10px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;color:#dc2626;margin-left:10px}
.sbf-inline__close:hover{background:#f8fafc;color:#b91c1c}
/* Modal close X (match inline close button) */
.sbf-fe-modal__x{border:1px solid var(--sbf-border);background:#fff;border-radius:10px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;color:#dc2626}
.sbf-fe-modal__x:hover{background:#fef2f2;color:#b91c1c}
/* Locations share the same action menu shell as other open cards. */
.sbf-inline__info{flex:1;min-width:0}
.sbf-inline__titleRow{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-right:44px}
.sbf-inline__title{font-size:18px;font-weight:800;line-height:1.2}
.sbf-inline__badge{font-size:12px;font-weight:800;color:var(--sbf-muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.sbf-inline__sub{margin-top:6px;color:var(--sbf-muted);font-weight:600}
.sbf-inline__kv{margin-top:12px;display:grid;gap:8px}
.sbf-kv__row{display:flex;gap:12px;align-items:baseline}
.sbf-kv__row dt{min-width:86px;color:var(--sbf-muted);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em}
.sbf-kv__row dd{margin:0;font-weight:700;color:var(--sbf-text);word-break:break-word}
/* Open Card: Color swatch (circle) next to color name */
.sbf-fe-color{display:inline-flex;align-items:center;gap:8px}
.sbf-fe-color__dot{width:20px;height:20px;border-radius:999px;border:1px solid rgba(209,213,219,.9);display:inline-block;background:#fff;flex:0 0 20px}
.sbf-fe-color__name{display:inline-block;line-height:1.2}
.sbf-inline__notes{margin-top:12px}
.sbf-inline__notesLabel{font-size:12px;color:var(--sbf-muted);font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.sbf-inline__notesText{color:var(--sbf-text);line-height:1.45;font-weight:600;white-space:pre-wrap}
.sbf-inline__sublist{margin-top:12px;border-top:1px solid rgba(0,0,0,.06);padding-top:12px}
.sbf-sublist__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.sbf-sublist__title{font-size:12px;color:var(--sbf-muted);font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.sbf-sublist__search{display:flex;align-items:center;gap:6px}
.sbf-sublist__search input[type="search"]{width:220px;max-width:45vw;padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:10px;font-size:13px}
.sbf-sublist__clear{width:34px;height:34px;border-radius:10px;border:1px solid rgba(0,0,0,.12);background:#fff;cursor:pointer;line-height:1;font-size:18px}
.sbf-sublist__group{margin:12px 0 6px;font-weight:700;opacity:.75}
.sbf-sublist__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.sbf-sublist__row:last-child{border-bottom:none}
.sbf-sublist__rowLeft{font-size:14px;line-height:1.25;word-break:break-word;font-weight:650}
.sbf-sublist__open{font-size:13px;text-decoration:none;border:1px solid rgba(0,0,0,.12);padding:6px 10px;border-radius:999px;display:inline-block}
.sbf-sublist__meta{font-size:12px;opacity:.7}
.sbf-sublist__empty{padding:10px 0;opacity:.75}
/* Open Card: hide the read-only Notes block while editing so it doesn't duplicate the textarea */
.sbf-inline.is-editing .sbf-inline__notes{display:none}
@media (max-width: 900px){
.sbf-inline__content{flex-direction:column}
.sbf-inline__media{width:100%;flex:1}
.sbf-inline__mainImg{height:240px}
.sbf-inline__mainPh{height:240px}
}
/* Inline details: promoted header should feel clickable */
.sbf-inline__head{cursor:pointer}
/* Subtle focus when an inline card is open */
body.sbf-inline-open .sbf-gmail__row{opacity:.86;transition:opacity 120ms ease-out}
body.sbf-inline-open .sbf-gmail__row.is-expanded{opacity:1}
/* Inline-open scrim + prominence (keeps inline expansion but makes it feel separate) */
#sbfInlineScrim.sbf-inline-scrim{
position:fixed; inset:0;
background:rgba(0,0,0,.08);
opacity:0;
pointer-events:none;
transition:opacity 140ms ease-out;
z-index:50;
}
body.sbf-inline-open #sbfInlineScrim.sbf-inline-scrim{
opacity:1;
pointer-events:auto;
}
/* Lift the expanded row + inline card above the scrim */
body.sbf-inline-open .sbf-gmail__row.is-expanded{position:relative; z-index:60;}
body.sbf-inline-open .sbf-inline{position:relative; z-index:60; margin:22px auto 22px;}
/* Mobile polish for the inline expander:
- keep the promoted header readable (no pill clipping)
- allow wrapping when space is tight
- ensure the close button doesn't overlap the right-side pill */
@media (max-width: 520px){
.sbf-inline__head{flex-wrap:wrap}
.sbf-inline__thumbs{flex-wrap:nowrap;overflow:auto;padding-bottom:2px}
.sbf-inline__thumbBtn{flex:0 0 auto}
}
/* When expanded, the row's "line" is promoted into the inline panel; hide the original row controls
so it feels like the whole row moved next to the bigger image. */
.sbf-gmail__row.is-expanded{padding:0;border:0;background:transparent}
.sbf-gmail__row.is-expanded > .sbf-gmail__thumbBtn,
.sbf-gmail__row.is-expanded > .sbf-gmail__mainBtn{display:none}
/* Inline Open Card should REPLACE the row position (no second container/border).
Hide the original row entirely while expanded; the inline card that follows becomes the only visible block. */
.sbf-gmail__row.is-expanded{display:none !important;}
/* === Mobile compact list overrides (AX B) === */
@media (max-width: 520px){
/* tighter page gutters for FE list views */
.sbf-fe.sbf-fe--gmail{padding-left:8px !important;padding-right:8px !important}
/* flatten list container */
.sbf-fe.sbf-fe--gmail .sbf-gmail{border:none !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important}
/* tighter rows + divider (keep thumb + text + chip on one line) */
.sbf-fe.sbf-fe--gmail .sbf-gmail__row{
padding:8px 6px !important;
gap:8px !important;
border-top:1px solid rgba(229,231,235,.75) !important;
flex-wrap:nowrap !important;
align-items:center !important;
}
.sbf-fe.sbf-fe--gmail .sbf-gmail__thumb{width:48px !important;height:48px !important;border-radius:12px !important}
.sbf-fe.sbf-fe--gmail .sbf-gmail__chip{min-width:50px !important;padding:7px 12px !important}
.sbf-fe.sbf-fe--gmail .sbf-gmail__chev{width:26px !important;height:26px !important}
/* mobile collapsed rows: show title only, allow wrapping */
.sbf-fe.sbf-fe--gmail .sbf-gmail__l1{
white-space:normal !important;
overflow:hidden !important;
text-overflow:clip !important;
display:-webkit-box !important;
-webkit-box-orient:vertical !important;
-webkit-line-clamp:3 !important;
line-height:1.18 !important;
}
.sbf-fe.sbf-fe--gmail .sbf-gmail__l2{display:none !important}
}
/* === AXI Mobile container + search polish === */
@media (max-width: 520px){
/* tighter overall gutters on mobile */
.sbf-home{padding-left:8px;padding-right:8px}
.sbf-fe{padding-left:8px;padding-right:8px}
/* make the hero feel less boxed against theme container */
.sbf-home__hero{border-radius:16px}
/* nicer search bar (no boxed input) for list pages */
.sbf-fe__searchRow{
border:1px solid var(--sbf-border);
background:#fff;
border-radius:999px;
padding:8px 10px;
}
.sbf-fe__searchInput{
border:0 !important;
background:transparent !important;
padding:10px 8px !important;
border-radius:0 !important;
box-shadow:none !important;
}
.sbf-fe__searchInput:focus{
border:0 !important;
box-shadow:none !important;
outline:none !important;
}
.sbf-fe__searchBtn{
border:0;
background:var(--sbf-blue-10);
color:var(--sbf-blue);
border-radius:999px;
padding:10px 12px;
}
}
/* Empty state artwork */
.sbf-empty-state {
display:flex;
justify-content:center;
align-items:center;
padding: 10px 6px 18px;
}
.sbf-empty-state img{
width:100%;
max-width:520px;
height:auto;
display:block;
}
@media (max-width: 768px){
.sbf-empty-state { padding: 6px 2px 14px; }
.sbf-empty-state img{ max-width: 420px; }
}
/* Location modal */
.sbf-loc__actions{
padding:12px 16px;
border-top:1px solid rgba(0,0,0,0.08);
display:flex;
justify-content:flex-end;
gap:10px;
}
.sbf-loc__viewArea{
display:inline-block;
padding:8px 12px;
border:1px solid rgba(0,0,0,0.12);
border-radius:8px;
background:#f9fafb;
text-decoration:none;
color:inherit;
font-weight:600;
}
.sbf-loc__viewArea:hover{
background:#f3f4f6;
}
.sbf-locLink,.sbf-locChip{
cursor:pointer;
}
.sbf-locLink:hover{
text-decoration:underline;
}
.sbf-loc{position:fixed;inset:0;z-index:999999;display:none;}
.sbf-loc.is-open{display:block;}
.sbf-loc__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.sbf-loc__dialog{position:relative;max-width:860px;margin:5vh auto; background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;}
.sbf-loc__header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eef2f7;}
.sbf-loc__title{font-size:18px;font-weight:800;}
.sbf-loc__close{border:1px solid #e5e7eb;background:#fff;border-radius:999px;width:38px;height:38px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sbf-loc__body{padding:16px;}
.sbf-loc__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sbf-loc__gallery{border:1px solid #eef2f7;border-radius:14px;padding:12px;}
/* Location modal: keep the left media area visually strong even when no images exist */
.sbf-loc__mainBtn{position:relative;width:100%;padding:0;border:0;background:transparent;cursor:pointer;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;}
.sbf-loc__main{width:100%;height:100%;display:block;object-fit:cover;}
.sbf-loc__thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.sbf-loc__thumb{padding:0;border:1px solid #e5e7eb;background:#fff;border-radius:10px;overflow:hidden;width:64px;height:52px;cursor:pointer;}
.sbf-loc__thumb.is-active{outline:2px solid rgba(16,185,129,.45);}
.sbf-loc__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sbf-loc__placeholder{position:absolute;inset:0;background:transparent;display:flex;align-items:center;justify-content:center;font-size:160px;line-height:1;opacity:1;filter:none;color:inherit;}
.sbf-loc__info{border:1px solid #eef2f7;border-radius:14px;padding:12px;}
.sbf-loc__meta{margin:0 0 10px 0;color:#374151;}
.sbf-loc__dl{margin:0;}
.sbf-loc__row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px dashed #e5e7eb;}
.sbf-loc__row:first-child{border-top:0;padding-top:0;}
.sbf-loc__row dt{font-weight:700;color:#111827;}
.sbf-loc__row dd{margin:0;color:#374151;text-align:right;}
.sbf-loc__notes{margin-top:12px;padding-top:12px;border-top:1px solid #eef2f7;color:#374151;white-space:pre-wrap;}
.sbf-open-location{border:0;background:transparent;color:#0f766e;font-weight:800;padding:0;cursor:pointer;text-decoration:underline;}
@media (max-width:768px){
.sbf-loc__dialog{max-width:94vw;margin:8vh auto;}
.sbf-loc__grid{grid-template-columns:1fr;}
.sbf-loc__thumb{width:56px;height:46px;}
}
/* Location link (list + detail): looks like plain text but is clickable */
.sbf-locLink {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.sbf-locLink:focus-visible {
outline: 2px solid rgba(32, 132, 222, 0.35);
outline-offset: 2px;
border-radius: 6px;
}
/* Area view */
.sbf-area__head{padding:12px 0 8px}
.sbf-area__name{font-size:22px;font-weight:900;margin-bottom:2px}
.sbf-area__meta{color:#6b7280;font-weight:700;margin-bottom:6px}
.sbf-area__counts{display:flex;flex-wrap:wrap;gap:10px;color:#374151;font-weight:700;font-size:13px;margin-bottom:8px}
.sbf-area__notes{color:#374151;margin-top:4px;white-space:pre-wrap}
.sbf-area__section{margin-top:14px}
.sbf-area__sectionTitle{font-size:16px;font-weight:900;margin:8px 0}
/* Filters panel (front-end) */
.sbf-fe__filtersWrap{ margin:10px 0 0; }
.sbf-fe__filtersBtn{
display:inline-flex; align-items:center; gap:6px;
padding:8px 10px; border:1px solid rgba(0,0,0,.12);
border-radius:10px; background:#fff; font-weight:600; cursor:pointer;
}
.sbf-fe__filtersPanel{
margin-top:10px; padding:12px;
border:1px solid rgba(0,0,0,.12);
border-radius:14px; background:#fff;
}
.sbf-fe__filtersGrid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 12px;
}
@media (max-width:720px){
.sbf-fe__filtersGrid{ grid-template-columns:1fr; }
}
.sbf-fe__fGroup{ display:flex; flex-direction:column; gap:6px; }
.sbf-fe__fLabel{ font-size:12px; font-weight:700; opacity:.75; }
.sbf-fe__select{
width:100%; padding:9px 10px;
border:1px solid rgba(0,0,0,.12); border-radius:10px; background:#fff;
}
.sbf-fe__chk{ display:flex; align-items:center; gap:8px; font-size:13px; }
.sbf-fe__filtersActions{ margin-top:10px; display:flex; justify-content:flex-end; }
.sbf-fe__clearFilters{
padding:8px 10px; border:1px solid rgba(0,0,0,.12);
border-radius:10px; background:#fafafa; cursor:pointer;
}
.sbf-fe--loading .sbf-fe__searchBtn{ opacity:.6; pointer-events:none; }
/* Live-search AJAX error banner (temporary / can be styled down later) */
.sbf-fe__ajaxError{
margin: 10px 0;
padding: 10px 12px;
border: 1px solid rgba(180, 0, 0, 0.25);
background: rgba(255, 0, 0, 0.06);
border-radius: 10px;
font-size: 14px;
line-height: 1.3;
}
/* Sort controls */
.sbf-fe__sortRow{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap;}
.sbf-fe__sortLabel{font-size:14px;opacity:.85;}
.sbf-fe__sortSep{opacity:.35;margin:0 4px;}
.sbf-fe__sortSelect,.sbf-fe__sortDir,.sbf-fe__sortGroup{height:34px;border-radius:10px;padding:6px 10px;border:1px solid rgba(0,0,0,.15);background:#f6faf8;}
/* ---- Search bar + sort controls (mock-style) ---- */
.sbf-fe__searchBar{margin:14px 0 10px}
.sbf-fe__searchBox{
display:flex;
align-items:center;
gap:10px;
border:1px solid var(--sbf-border);
border-radius:18px;
background:#fff;
padding:12px 12px;
box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.sbf-fe__searchIcon{
width:22px;height:22px;flex:0 0 22px;
opacity:.55;
background:currentColor;
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
.sbf-fe__searchInput{
flex:1;
border:none !important;
box-shadow:none !important;
padding:6px 6px;
font-size:22px;
font-weight:600;
outline:none;
background:transparent;
}
.sbf-fe__searchRight{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.sbf-fe__scopeSelect{
border:1px solid var(--sbf-border);
background:rgba(37,99,235,.07);
color:#134e4a;
border-radius:14px;
padding:10px 14px;
font-weight:800;
cursor:pointer;
}
.sbf-fe__gearBtn{
border:1px solid transparent;
background:transparent;
border-radius:12px;
padding:10px 10px;
cursor:pointer;
opacity:.75;
}
.sbf-fe__gearBtn:hover{background:rgba(0,0,0,.04);opacity:1}
.sbf-fe__clearBtn{
border:0;
background:transparent;
color:var(--sbf-muted);
font-weight:700;
cursor:pointer;
padding:10px 10px;
border-radius:12px;
}
.sbf-fe__clearBtn:hover{background:rgba(0,0,0,.04);color:var(--sbf-text)}
.sbf-fe__submitHidden{display:none}
.sbf-fe__sortRow{
display:flex;
align-items:center;
gap:12px;
margin:10px 0 12px;
color:var(--sbf-muted);
font-weight:700;
}
.sbf-fe__sortRow select{
border:1px solid var(--sbf-border);
border-radius:12px;
padding:8px 10px;
font-weight:800;
background:#fff;
color:var(--sbf-text);
}
.sbf-fe__sortSep{opacity:.4}
/* Filters menu: shown inline in sort row; gear also toggles it */
.sbf-fe__filtersBtn:not(.sbf-fe__filtersBtn--inline){display:none !important}
.sbf-fe__filtersWrap:not(.sbf-fe__filtersWrap--inline){margin-top:10px}
.sbf-fe__filtersPanel{
border:1px solid var(--sbf-border);
border-radius:14px;
padding:12px;
background:#fff;
box-shadow:0 12px 25px rgba(0,0,0,.06);
}
/* Inline dropdown positioning */
.sbf-fe__filtersWrap--inline{ position: relative; }
.sbf-fe__filtersBtn--inline{
display:inline-flex;
align-items:center;
gap:8px;
height:40px;
padding:0 14px;
border-radius:12px;
border:1px solid var(--sbf-border);
background: rgba(240,247,244,.75);
font-weight:700;
}
.sbf-fe__filtersBtn--inline .sbf-fe__caret{ opacity:.7; }
.sbf-fe__filtersWrap--inline .sbf-fe__filtersPanel{
position:absolute;
right:0;
top: calc(100% + 8px);
width: min(520px, 92vw);
z-index: 9999;
}
/* ---- Search header layout hard overrides (to match mock) ---- */
.sbf-fe__sortRow{
flex-wrap:nowrap;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.sbf-fe__sortGroup{
display:flex;
align-items:center;
gap:10px;
white-space:nowrap;
}
.sbf-fe__sortGroup--grow{
flex:1 1 auto;
min-width:260px;
}
.sbf-fe__sortRow select{
width:auto !important;
min-width:120px;
height:40px;
}
@media (max-width: 720px){
.sbf-fe__searchInput{ font-size:18px; }
.sbf-fe__scopeSelect{ padding:9px 12px; }
.sbf-fe__sortRow{ gap:10px; }
}
/* === Mock-style Search Header Polish (0.0.3BCN) === */
.sbf-fe__gearBtn, #sbfFeGear { display:none !important; }
.sbf-fe__sortRow{
display:flex;
align-items:center;
gap:14px;
flex-wrap:wrap;
padding:10px 2px 0 2px;
}
.sbf-fe__sortLabel{ font-weight:600; opacity:.7; margin-right:6px; }
.sbf-fe__sortSelect, .sbf-fe__sortDir{
height:36px !important;
border-radius:12px !important;
padding:6px 34px 6px 12px !important;
border:1px solid rgba(0,0,0,.12) !important;
background:rgba(240,247,244,.75) !important;
font-weight:700 !important;
}
.sbf-fe__filtersWrap--inline{ position:relative; }
.sbf-fe__filtersBtn--inline{
height:36px !important;
border-radius:12px !important;
padding:6px 12px !important;
border:1px solid rgba(0,0,0,.12) !important;
background:rgba(240,247,244,.75) !important;
font-weight:700 !important;
}
.sbf-fe__filtersWrap--inline .sbf-fe__filtersPanel{
position:absolute;
right:0;
top:calc(100% + 8px);
z-index:9999;
min-width:280px;
max-width:min(420px, 92vw);
box-shadow:0 10px 30px rgba(0,0,0,.12);
border:1px solid rgba(0,0,0,.12);
border-radius:16px;
background:#fff;
padding:12px;
}
/* === 0.0.3BCN UI fixes === */
.sbf-fe__gearBtn--removed{display:none !important;}
/* Remove horizontal scrollbars/arrows on sort row; match mock */
.sbf-fe__sortRow{ overflow:visible !important; flex-wrap:nowrap !important; }
@media (max-width: 720px){
.sbf-fe__sortRow{ flex-wrap:wrap !important; }
}
/* Keep filters dropdown from affecting row height */
.sbf-fe__filtersPanel{ max-height:none; overflow:visible; }
/* --- Frontend modal (Edit) --- */
.sbf-fe-modal{position:fixed;inset:0;display:none;z-index:99999}
.sbf-fe-modal.is-open{display:block}
.sbf-fe-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.sbf-fe-modal__panel{position:relative;max-width:520px;margin:8vh auto 0;background:#fff;border:1px solid var(--sbf-border);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);overflow:hidden}
.sbf-fe-modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--sbf-border);background:var(--sbf-card)}
.sbf-fe-modal__title{font-weight:900;font-size:15px}
.sbf-fe-modal__close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:10px}
.sbf-fe-modal__close:hover{background:rgba(0,0,0,.06)}
.sbf-fe-modal__body{padding:14px 16px;display:grid;gap:12px}
.sbf-fe-modal__field{display:grid;gap:6px;font-size:12px;font-weight:800;color:var(--sbf-muted)}
.sbf-fe-modal__field input,.sbf-fe-modal__field textarea{border:1px solid var(--sbf-border);border-radius:12px;padding:10px 12px;font-size:14px;font-weight:700;color:var(--sbf-text);outline:none}
.sbf-fe-modal__field input:focus,.sbf-fe-modal__field textarea:focus{border-color:var(--sbf-blue);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.sbf-fe-modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--sbf-border);background:#fff}
.sbf-fe-modal__btn{border:1px solid var(--sbf-border);background:#fff;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:900;cursor:pointer}
.sbf-fe-modal__btn--primary{background:var(--sbf-blue);border-color:var(--sbf-blue);color:#fff}
.sbf-fe-modal__btn--ghost{background:#fff}
.sbf-fe-modal__btn.is-loading{opacity:.7;cursor:wait}
.sbf-fe-modal__err{padding:10px 12px;border-radius:12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);color:#b91c1c;font-weight:800;font-size:12px}
body.sbf-modal-open{overflow:hidden}
.sbf-inline__err{margin:10px 0;padding:10px 12px;border:1px solid rgba(220,38,38,.25);background:rgba(220,38,38,.08);border-radius:12px;font-weight:700}
/* Inline editor */
.sbf-inline__form{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.sbf-inline__frow{display:flex;flex-direction:column;gap:2px;}
.sbf-inline__frow label{font-weight:600;opacity:.75;font-size:12px;}
.sbf-inline__fcell{display:flex;flex-direction:column;gap:6px;}
.sbf-inline__frow input,.sbf-inline__frow textarea{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:4px 8px;font-size:14px;}
.sbf-inline__frow textarea{min-height:90px;resize:vertical;grid-column:1/-1;}
.sbf-inline.is-editing .sbf-inline__frow input:not([readonly]),.sbf-inline.is-editing .sbf-inline__frow textarea{background:#fff;}
.sbf-inline__formNote{opacity:.7;font-size:13px;padding:8px 0;}
.sbf-inline__editActions{margin-top:10px;display:flex;gap:10px;}
.sbf-inline__editActions button{border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:8px 12px;font-weight:700;}
@media (max-width:700px){.sbf-inline__form{grid-template-columns:1fr;}}
/* === Inline editing UX === */
.sbf-inline__form{display:none;}
.sbf-inline.is-editing .sbf-inline__form{display:block;}
.sbf-inline.is-editing .sbf-inline__kv{display:none;}
.sbf-inline__editActions{display:none; gap:8px; margin-top:10px;}
.sbf-inline.is-editing .sbf-inline__editActions{display:flex;}
.sbf-inline__form input:disabled, .sbf-inline__form textarea:disabled{opacity:0.85;}
.sbf-inline__uploadStatus{margin:10px 0;padding:8px 12px;border:1px solid rgba(59,130,246,.25);background:rgba(59,130,246,.08);border-radius:12px;font-weight:800;font-size:12px}
.sbf-inline__uploadStatus.is-ok{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.10)}
.sbf-inline__uploadStatus.is-err{border-color:rgba(220,38,38,.25);background:rgba(220,38,38,.08)}
/* Login modal + toast (used when controls are visible-but-disabled) */
.sbf-loginModal{position:fixed;inset:0;display:none;z-index:99999}
.sbf-loginModal.is-open{display:block}
.sbf-loginModal__backdrop{position:absolute;inset:0;background:rgba(17,24,39,.55)}
.sbf-loginModal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);background:#fff;border-radius:16px;box-shadow:0 20px 70px rgba(0,0,0,.25);overflow:hidden}
.sbf-loginModal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e5e7eb}
.sbf-loginModal__header h3{margin:0;font-size:16px;line-height:1.2}
.sbf-loginModal__close{appearance:none;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:#111827}
.sbf-loginModal__body{padding:14px 16px;color:#374151;font-size:14px}
.sbf-loginModal__footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 16px;border-top:1px solid #e5e7eb}
.sbf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:12px;border:1px solid #d1d5db;background:#fff;color:#111827;text-decoration:none;font-weight:700;cursor:pointer}
.sbf-btn--primary{background:#111827;color:#fff;border-color:#111827}
/* Slim inline flyout notice (anchored under a dropdown/header) */
.sbf-flynote{
margin-top:6px;
display:flex;
align-items:center;
gap:8px;
padding:4px 8px;
border-radius:10px;
border:1px solid #d1d5db;
background:#fff;
color:#111827;
font-size:12px;
line-height:1.2;
max-width:100%;
box-shadow:0 1px 3px rgba(0,0,0,.06);
opacity:0;
transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease;
}
.sbf-flynote.is-show{opacity:1;transform:translateY(0)}
.sbf-flynote__txt{flex:1;min-width:0}
.sbf-flynote__x{
flex:0 0 auto;
margin-left:auto;
background:transparent;
border:0;
padding:0 2px;
font-size:16px;
line-height:1;
cursor:pointer;
color:inherit;
}
.sbf-flynote.is-info{background:#eef6ff;border-color:#b6d4fe;color:#084298}
.sbf-flynote.is-ok{background:#e9f7ef;border-color:#a3d9b1;color:#0f5132}
.sbf-flynote.is-err{background:#fbeaea;border-color:#f5c2c7;color:#842029}
.sbf-flynote.is-warn{background:#fff4db;border-color:#ffda6a;color:#664d03}
.sbf-toast{position:fixed;right:16px;top:16px;z-index:99999;background:#111827;color:#fff;padding:10px 12px;border-radius:12px;font-weight:700;opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease;box-shadow:0 16px 50px rgba(0,0,0,.25)}
.sbf-toast.is-show{opacity:1;transform:translateY(0)}
/* Front-end upload UI: thumbnail placeholders + spinner */
.sbf-inline__uploadThumbs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}
/* When the upload strip is rendered inside the thumbs column, keep spacing tidy. */
.sbf-inline__thumbs .sbf-inline__uploadThumbs{margin:0 0 10px}
.sbf-inline__uploadThumb{position:relative;width:56px;height:56px;border-radius:12px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background:#f3f5f7}
.sbf-inline__uploadThumb img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-inline__uploadThumb.is-loading{opacity:.55;filter:grayscale(1)}
.sbf-inline__uploadThumb .sbf-inline__uploadSpin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sbf-inline__uploadThumb .sbf-inline__uploadSpin::after{content:"";width:18px;height:18px;border-radius:999px;border:2px solid rgba(0,0,0,.12);border-top-color:rgba(0,0,0,.55);animation:sbfspin .7s linear infinite}
@keyframes sbfspin{to{transform:rotate(360deg)}}
.sbf-inline--uploading .sbf-inline__close{opacity:1;pointer-events:auto}
/* Disable closing while uploading */
.sbf-inline--uploading .sbf-inline__close{opacity:1;pointer-events:auto}
.sbf-inline__upThumb{width:56px;height:56px;border-radius:12px;overflow:hidden;position:relative;border:1px solid rgba(0,0,0,.08);background:rgba(0,0,0,.03)}
.sbf-inline__upThumb img{width:100%;height:100%;object-fit:cover;display:block}
.sbf-inline__upPh{width:100%;height:100%}
.sbf-inline__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sbf-inline__spinner:before{content:"";width:18px;height:18px;border-radius:999px;border:2px solid rgba(0,0,0,.18);border-top-color:rgba(0,0,0,.55);animation:sbfSpin .7s linear infinite}
.sbf-inline__upThumb.is-loading{opacity:.45;filter:grayscale(1) brightness(1.1)}
.sbf-inline__upThumb.is-ok{border-color:rgba(34,197,94,.35)}
.sbf-inline__upThumb.is-err{border-color:rgba(220,38,38,.35)}
.sbf-inline__footer{display:none !important;}
@media (max-width: 720px){
.sbf-inline__menu{
position:fixed;
left:12px;
right:12px;
top:auto;
bottom:12px;
min-width:0;
}
}
/* --- Open card: Order button + close X (v0.0.51) --- */
.sbf-inline__footer{display:none;justify-content:flex-end;margin-top:10px;}
.sbf-inline__footerRight{display:flex;justify-content:flex-end;gap:8px;}
.sbf-inline__btn--order{
background:#2271b1;
color:#fff;
border:1px solid #2271b1;
padding:8px 12px;
border-radius:8px;
}
.sbf-inline__btn--order:hover{filter:brightness(0.95);}
.sbf-inline__btn--order.is-onorder,
.sbf-inline__btn--order:disabled.is-onorder{
background:#00a32a;
border-color:#00a32a;
color:#fff;
}
.sbf-inline__btn--order:disabled{opacity:0.85;cursor:not-allowed;}
.sbf-inline__close{
background:#d63638 !important;
color:#fff !important;
border:1px solid #d63638 !important;
border-radius:10px;
width:34px;
height:34px;
line-height:30px;
font-size:20px;
}
.sbf-inline__close:hover{filter:brightness(0.95);}
/* ===== 0.0.59 Filters bar polish (non-home pages; search bar reverted) ===== */
.sbf-fe__sortRow{margin:12px 0 14px;gap:12px;align-items:center;flex-wrap:wrap;}
.sbf-fe__sortSep{margin:0 2px;opacity:.25;line-height:1;}
.sbf-fe__sortGroup{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:rgba(240,247,244,.55);}
.sbf-fe__sortGroup--grow{flex:1 1 auto;min-width:320px;}
.sbf-fe__sortLabel{font-size:14px;font-weight:700;opacity:.55;margin:0;white-space:nowrap;}
.sbf-fe__sortRow select,.sbf-fe__sortSelect,.sbf-fe__sortDir{height:38px!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0 10px!important;font-weight:800!important;color:#134e4a!important;}
.sbf-fe__sortRow select:focus{outline:none!important;box-shadow:none!important;}
/* === Compact Sort/Filter buttons + popover menus (search pages) === */
.sbf-fe__searchRight{
display:flex;
align-items:center;
gap:12px;
}
.sbf-fe__menuBtn{
appearance:none;
border:1px solid rgba(0,0,0,0.15);
background:#fff;
border-radius:12px;
padding:10px 14px;
font-weight:600;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:8px;
box-shadow:0 1px 0 rgba(0,0,0,0.04);
}
.sbf-fe__menuBtn:hover{ background:rgba(0,0,0,0.02); }
.sbf-fe__menuBtn:active{ transform:translateY(1px); }
.sbf-fe__menus{
position:relative;
}
.sbf-fe__menu{
position:absolute;
z-index:9999;
width:340px;
max-width:calc(100vw - 32px);
background:#fff;
border:1px solid rgba(0,0,0,0.15);
border-radius:14px;
box-shadow:0 18px 50px rgba(0,0,0,0.12);
overflow:hidden;
}
.sbf-fe__menuHead{
padding:14px 16px;
border-bottom:1px solid rgba(0,0,0,0.08);
background:rgba(0,0,0,0.02);
}
.sbf-fe__menuTitle{ font-weight:700; }
.sbf-fe__menuBody{ padding:14px 16px; }
.sbf-fe__menuSection{ margin-bottom:14px; }
.sbf-fe__menuLabel{ font-size:13px; color:rgba(0,0,0,0.65); margin-bottom:8px; font-weight:600; }
.sbf-fe__menuSelect{
width:100%;
border:1px solid rgba(0,0,0,0.15);
border-radius:12px;
padding:10px 12px;
background:#fff;
}
.sbf-fe__menuRadios{ display:flex; flex-direction:column; gap:8px; }
.sbf-fe__radio{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:12px;
border:1px solid rgba(0,0,0,0.12);
cursor:pointer;
}
.sbf-fe__radio input{ transform:translateY(1px); }
.sbf-fe__menuActions{
display:flex;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-top:1px solid rgba(0,0,0,0.08);
background:rgba(0,0,0,0.02);
}
.sbf-fe__menuReset{
border:1px solid rgba(0,0,0,0.18);
background:#fff;
border-radius:12px;
padding:10px 14px;
font-weight:600;
cursor:pointer;
}
.sbf-fe__menuApply{
border:1px solid rgba(0,0,0,0.18);
background:#0f766e;
color:#fff;
border-radius:12px;
padding:10px 14px;
font-weight:700;
cursor:pointer;
}
/* Embed existing filter UI inside menu */
.sbf-fe__menuBody--filters .sbf-fe__filtersBtn{ display:none !important; }
.sbf-fe__menuBody--filters .sbf-fe__filtersPanel{ display:block !important; position:static !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.sbf-fe__menuBody--filters .sbf-fe__filtersActions{ display:none !important; } /* we provide Reset/Apply in menu footer */
/* Fix: ensure Sort/Filter buttons remain visible inside search bar (no wrapping/hiding) */
.sbf-fe__menuBtn{display:inline-flex !important;}
/* === 0.0.64 UX unify: search toolbar + safe menus === */
.sbf-fe__searchBox{
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
padding: 12px;
}
.sbf-fe__searchIcon{ order: 1; margin: 0 4px 0 6px; }
.sbf-fe__searchInput{
order: 2;
flex: 1 1 260px;
min-width: 180px;
padding-right: 10px;
}
.sbf-fe__searchRight{
order: 3;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding-top: 6px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.sbf-fe__searchRight .sbf-fe__scopeSelect{ margin-left: 0; }
/* Make menus + filter panels never cut off the viewport */
.sbf-fe__menu{
max-height: calc(100vh - 24px);
overflow: hidden;
}
.sbf-fe__menuBody{
max-height: calc(100vh - 180px);
overflow: auto;
}
.sbf-fe__menuBody--filters{
max-height: calc(100vh - 180px);
overflow: auto;
}
.sbf-fe__filtersPanel{
max-height: calc(100vh - 220px);
overflow: auto;
}
/* On small screens the right-side controls should wrap cleanly */
@media (max-width: 520px){
.sbf-fe__searchRight{
justify-content: space-between;
gap: 8px;
}
.sbf-fe__searchRight .sbf-fe__menuBtn{
flex: 1 1 auto;
}
.sbf-fe__searchRight .sbf-fe__clearBtn{
margin-left: auto;
}
}
/* === Unified Search / Sort / Filter / Type toolbar (stable) === */
.sbf-fe__searchBar{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.sbf-fe__searchBox{ flex:1 1 560px; }
.sbf-fe__toolbar{ margin-top:0; flex:0 0 auto; }
@media (max-width: 720px){
/* Search input on its own row; actions under it, aligned right */
.sbf-fe__toolbar{ width:100%; justify-content:flex-end; margin-top:10px; }
}
.sbf-fe__searchBox{ flex-wrap:nowrap; align-items:center; }
.sbf-fe__searchRight{ width:auto; padding-top:0; border-top:0; order:3; }
.sbf-fe__toolbar{
display:flex;
align-items:center;
gap:10px;
margin-top:0;
flex-wrap:wrap;
}
.sbf-fe__toolBtn{
appearance:none;
border:1px solid rgba(0,0,0,0.15);
background:#fff;
border-radius:999px;
padding:10px 14px;
font-weight:700;
cursor:pointer;
box-shadow:0 1px 0 rgba(0,0,0,0.04);
}
.sbf-fe__toolBtn:hover{ background:rgba(0,0,0,0.02); }
.sbf-fe__toolBtn:active{ transform:translateY(1px); }
.sbf-fe__toolBtn--filter{ background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.25); }
.sbf-fe__toolBtn--filter:hover{ background:rgba(37,99,235,.12); }
.sbf-fe__onlyMobile{ display:none; }
@media (max-width: 720px){
.sbf-fe__onlyDesktop{ display:none !important; }
.sbf-fe__onlyMobile{ display:inline-flex !important; }
}
/* Type list */
.sbf-fe__typeList{ display:flex; flex-direction:column; gap:10px; }
.sbf-fe__chk--type{ display:flex; align-items:center; gap:10px; font-weight:700; }
.sbf-fe__chk--type input{ transform:translateY(1px); }
.sbf-fe__chk--type.is-disabled{ opacity:.45; cursor:not-allowed; }
.sbf-fe__menuSub{ margin-top:6px; font-size:13px; color:rgba(0,0,0,.55); font-weight:600; }
/* More menu items */
.sbf-fe__moreItem{
width:100%;
text-align:left;
border:1px solid rgba(0,0,0,0.12);
background:#fff;
border-radius:14px;
padding:12px 14px;
font-weight:750;
cursor:pointer;
margin-bottom:10px;
}
.sbf-fe__moreItem:last-child{ margin-bottom:0; }
.sbf-fe__moreItem:hover{ background:rgba(0,0,0,0.02); }
/* Bottom-sheet (mobile) */
.sbf-fe__sheetOverlay{
position:fixed;
inset:0;
background:rgba(15,23,42,.55);
display:none;
z-index:9998;
}
.sbf-fe__sheetOverlay.is-open{ display:block; }
.sbf-fe__menu.is-sheet{
z-index:9999;
width:auto;
max-width:none;
border-radius:18px 18px 0 0;
box-shadow:0 -18px 50px rgba(0,0,0,0.18);
max-height:85vh;
}
.sbf-fe__menu.is-sheet .sbf-fe__menuBody{
max-height:calc(85vh - 160px);
overflow:auto;
}
.sbf-fe__menu.is-sheet .sbf-fe__menuActions{
position:sticky;
bottom:0;
}
/* FAB: Add (bottom-right on every view) */
.sbf-fe__fabAdd{
position:fixed;
right:18px;
bottom:18px;
width:56px;
height:56px;
border-radius:999px;
border:1px solid rgba(0,0,0,0.14);
background:#fff;
box-shadow:0 14px 34px rgba(0,0,0,0.16);
font-size:26px;
font-weight:900;
line-height:1;
display:inline-flex;
align-items:center;
justify-content:center;
z-index:9997;
cursor:pointer;
}
.sbf-fe__fabAdd:hover{ background:rgba(0,0,0,0.02); }
.sbf-fe__fabAdd.is-disabled{ opacity:.55; }
.sbf-fe__fabAdd.is-disabled:hover{ background:#fff; }
/* Add sheet */
.sbf-fe__menuBody--add{ padding-top:6px; }
.sbf-fe__addGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 721px){
.sbf-fe__addGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.sbf-fe__addPick{
border:1px solid rgba(0,0,0,0.12);
background:#fff;
border-radius:14px;
padding:12px 12px;
font-weight:800;
cursor:pointer;
}
.sbf-fe__addPick:hover{ background:rgba(0,0,0,0.02); }
.sbf-fe__addFields{ display:flex; flex-direction:column; gap:12px; }
.sbf-fe__addField span{ display:block; font-size:12px; font-weight:800; color:rgba(0,0,0,0.62); margin-bottom:6px; }
.sbf-fe__addInput,
.sbf-fe__addSelect,
.sbf-fe__addTextarea{
width:100%;
border:1px solid rgba(0,0,0,0.14);
border-radius:12px;
padding:10px 12px;
font-weight:700;
background:#fff;
}
.sbf-fe__addTextarea{ resize:vertical; }
.sbf-fe__menuActions--add{ gap:10px; }
/* ===============================
Global full-screen Add modal
(used by FAB on ALL pages)
================================ */
.sbf-add{ position:fixed; inset:0; display:none; z-index:99999; align-items:center; justify-content:center; padding:16px 12px; }
body.admin-bar .sbf-add{ padding-top: calc(16px + 32px); }
@supports (padding-top: max(0px)) { body.admin-bar .sbf-add{ padding-top: max(calc(16px + 32px), env(safe-area-inset-top)); } }
.sbf-add.is-open{ display:flex; }
.sbf-add__overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.38); }
.sbf-add__dialog{
position:relative;
width:min(980px, calc(100vw - 24px));
max-height:calc(100vh - 32px);
margin:0;
background:#fff;
border:1px solid rgba(0,0,0,0.12);
border-radius:18px;
box-shadow: 0 28px 70px rgba(0,0,0,0.22);
overflow:hidden;
display:flex;
flex-direction:column;
}
/* Confirmation-only: green border + glow on the whole modal card (not the action tiles). */
.sbf-add.is-confirm .sbf-add__dialog{
border:3px solid var(--sbf-green);
box-shadow:0 0 0 1px rgba(16,185,129,0.35), 0 28px 70px rgba(0,0,0,0.22), 0 0 34px rgba(16,185,129,0.35);
}
@media (max-width: 720px){
.sbf-add__dialog{ width:100vw; max-height:100vh; margin:0; border-radius:0; }
}
.sbf-add__header{
padding:16px 16px;
border-bottom:1px solid rgba(0,0,0,0.08);
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.sbf-add__title{ font-size:18px; font-weight:900; }
.sbf-add__sub{ margin-top:4px; font-size:12px; font-weight:700; color:rgba(0,0,0,0.6); }
.sbf-add__close{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(0,0,0,0.12); background:#fff; font-size:22px; line-height:1; cursor:pointer; }
.sbf-add__close:hover{ background:rgba(0,0,0,0.02); }
.sbf-add__body{ padding:16px 16px; overflow:auto; }
/* Inline upload modal (used when global Add is triggered on pages without the [sbf_app] shell).
Must be viewport-safe and not rely on page layout containers. */
.sbf-modal{ position:fixed; inset:0; display:none; z-index:99999; align-items:center; justify-content:center; padding:16px 12px; }
body.admin-bar .sbf-modal{ padding-top: calc(16px + 32px); }
@supports (padding-top: max(0px)) { body.admin-bar .sbf-modal{ padding-top: max(calc(16px + 32px), env(safe-area-inset-top)); } }
.sbf-modal.is-open{ display:flex; }
.sbf-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,0.38); }
.sbf-modal__dialog{ position:relative; background:#fff; border-radius:18px; width:min(860px, 96vw); max-height:calc(100vh - 32px); box-shadow:0 16px 40px rgba(0,0,0,0.18); overflow:hidden; border:1px solid rgba(0,0,0,0.10); }
.sbf-modal__header{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px; border-bottom:1px solid rgba(0,0,0,0.08); }
.sbf-modal__title{ font-size:15px; font-weight:900; }
.sbf-modal__close{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(0,0,0,0.12); background:#fff; font-size:22px; line-height:1; cursor:pointer; }
.sbf-modal__close:hover{ background:rgba(0,0,0,0.02); }
.sbf-modal__body{ padding:16px 16px; overflow:auto; }
@media (max-width: 860px){ .sbf-modal__dialog{ width:100vw; max-height:100vh; border-radius:0; } }
.sbf-add__label{ font-size:12px; font-weight:900; color:rgba(0,0,0,0.62); margin-bottom:10px; }
.sbf-add__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 860px){
.sbf-add__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.sbf-add__pick{
border:1px solid rgba(0,0,0,0.12);
background:#fff;
border-radius:14px;
padding:12px 12px;
font-weight:900;
cursor:pointer;
}
.sbf-add__pick:hover{ background:rgba(0,0,0,0.02); }
.sbf-add__fields{ display:flex; flex-direction:column; gap:12px; }
.sbf-add__field span{ display:block; font-size:12px; font-weight:900; color:rgba(0,0,0,0.62); margin-bottom:6px; }
.sbf-add__input,
.sbf-add__select,
.sbf-add__textarea{
width:100%;
border:1px solid rgba(0,0,0,0.14);
border-radius:12px;
padding:10px 12px;
font-weight:800;
background:#fff;
}
.sbf-add__textarea{ resize:vertical; }
.sbf-add__actions{
padding:14px 16px;
border-top:1px solid rgba(0,0,0,0.08);
display:flex;
gap:10px;
justify-content:flex-end;
}
.sbf-add__btn{ border:1px solid rgba(0,0,0,0.14); background:#fff; border-radius:12px; padding:10px 12px; font-weight:900; cursor:pointer; }
.sbf-add__btn:hover{ background:rgba(0,0,0,0.02); }
.sbf-add__btn.is-primary{ background:#111; border-color:#111; color:#fff; }
.sbf-add__btn.is-primary:hover{ background:#000; }
.sbf-add__btn--primary{ background:#111; border-color:#111; color:#fff; }
.sbf-add__btn--primary:hover{ background:#000; }
/* Add modal: required + confirm */
.sbf-add__reqNote{ margin-top:-6px; margin-bottom:12px; font-size:12px; font-weight:800; color:rgba(0,0,0,0.56); }
.sbf-add__reqStar{ color:#b00020; font-weight:900; }
.sbf-add__field.is-error .sbf-add__input,
.sbf-add__field.is-error .sbf-add__select,
.sbf-add__field.is-error .sbf-add__textarea{ border-color:#b00020; box-shadow:0 0 0 3px rgba(176,0,32,0.12); }
.sbf-add__fieldErr{ margin-top:6px; font-size:12px; font-weight:800; color:#b00020; }
.sbf-add__field.is-disabled{ opacity:0.55; }
.sbf-add__confirm{ padding:14px 0; }
.sbf-add__confirmTitle{ font-size:18px; font-weight:900; }
.sbf-add__confirmSub{ margin-top:6px; font-size:12px; font-weight:800; color:rgba(0,0,0,0.58); }
.sbf-add__confirmMeta{ margin-top:12px; padding:12px; border:1px solid rgba(0,0,0,0.10); border-radius:14px; background:rgba(0,0,0,0.02); }
.sbf-add__confirmMetaSub{ margin-top:4px; font-size:12px; font-weight:800; color:rgba(0,0,0,0.62); }
/* Confirm choices (Add flow) */
.sbf-add__confirmChoices{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:0; }
@media (max-width: 900px){ .sbf-add__confirmChoices{ grid-template-columns:1fr; } }
/* Confirm-only optional hardware bin details */
.sbf-add__hwbinExtras{ margin-top:6px; margin-bottom:10px; }
.sbf-add__hwbinRow{ display:flex; gap:12px; }
.sbf-add__hwbinRow .sbf-add__field{ flex:1 1 0; }
@media (max-width: 900px){
.sbf-add__hwbinRow{ flex-direction:column; }
}
.sbf-addChoice{
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:26px 18px; border-radius:18px;
border:1px solid rgba(0,0,0,0.14);
background:#fff;
box-shadow:none;
cursor:pointer;
text-align:center;
transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.sbf-addChoice:focus{ outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.18), 0 14px 28px var(--sbf-green-45); }
.sbf-addChoice__icon{
width:58px; height:58px; border-radius:16px;
display:flex; align-items:center; justify-content:center;
border:1px solid rgba(0,0,0,0.10);
background:rgba(0,0,0,0.03);
font-size:26px;
}
.sbf-addChoice__title{ margin-top:14px; font-size:20px; font-weight:900; color:var(--sbf-text); }
.sbf-addChoice__sub{ margin-top:6px; font-size:13px; font-weight:800; color:rgba(0,0,0,0.58); }
.sbf-addChoice.is-disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }
/* Sub-create modal */
.sbf-addSub{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; }
.sbf-addSub[hidden]{ display:none !important; }
.sbf-addSub__overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.45); }
.sbf-addSub__panel{ position:relative; width:min(720px, calc(100vw - 24px)); max-height:calc(100vh - 32px); background:#fff; border-radius:18px; box-shadow:0 28px 70px rgba(0,0,0,0.22); overflow:hidden; display:flex; flex-direction:column; }
.sbf-addSub__header{ padding:14px 16px; border-bottom:1px solid rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sbf-addSub__title{ font-size:14px; font-weight:900; }
.sbf-addSub__close{ width:38px; height:38px; border-radius:12px; border:1px solid rgba(0,0,0,0.12); background:#fff; font-size:22px; line-height:1; cursor:pointer; }
.sbf-addSub__close:hover{ background:rgba(0,0,0,0.02); }
.sbf-addSub__body{ padding:16px 16px; overflow:auto; }
.sbf-addSub__actions{ padding:14px 16px; border-top:1px solid rgba(0,0,0,0.08); display:flex; gap:10px; justify-content:flex-end; }
.sbf-addSub__grid{ display:flex; flex-direction:column; gap:12px; }
/* Prevent page scroll behind modals */
body.sbf-modal-open{ overflow:hidden !important; }
/* Remove legacy inline filter toggle styling when embedded */
.sbf-fe__menuBody--filters .sbf-fe__filtersWrap{ margin:0 !important; }
/* Login form (modal) */
.sbf-loginForm{display:flex;flex-direction:column;gap:10px}
.sbf-loginForm__label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#111827}
.sbf-loginForm__input{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:12px;font-size:14px}
.sbf-loginForm__remember{display:flex;align-items:center;gap:8px;font-size:14px;color:#374151;font-weight:600;margin-top:2px}
.sbf-loginForm__error{margin-top:8px;padding:10px 12px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:13px}
.sbf-addChoice:hover{ border-color: var(--sbf-green); box-shadow: 0 10px 22px rgba(16,185,129,0.28); }
/* --- Add confirm upload queue (under the 3 action cards) --- */
.sbf-add__uploadQueue{
margin-top:14px;
display:grid;
gap:10px;
}
.sbf-uq{
display:flex;
align-items:center;
gap:12px;
padding:10px 12px;
border-radius:14px;
background:#fff;
border:1px solid rgba(0,0,0,0.10);
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
border-left:4px solid rgba(239,68,68,0.85); /* red by default */
}
.sbf-uq.is-done{ border-left-color: rgba(34,197,94,0.9); }
.sbf-uq.is-error{ border-left-color: rgba(239,68,68,0.95); }
.sbf-uq__thumb{
width:44px;
height:44px;
border-radius:10px;
background:rgba(0,0,0,0.06);
object-fit:cover;
flex:0 0 auto;
border:1px solid rgba(0,0,0,0.10);
}
.sbf-uq__main{ flex:1 1 auto; min-width:0; }
.sbf-uq__status{
flex:0 0 auto;
font-size:12px;
font-weight:900;
color: rgba(239,68,68,0.95);
white-space:nowrap;
margin-left:8px;
}
.sbf-uq.is-done .sbf-uq__status{ color: rgba(34,197,94,0.95); }
.sbf-uq.is-error .sbf-uq__status{ color: rgba(239,68,68,0.95); }
.sbf-uq__name{
font-size:13px;
font-weight:900;
color:var(--sbf-text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.sbf-uq__bar{
margin-top:8px;
height:10px;
border-radius:999px;
background: rgba(239,68,68,0.18);
border:1px solid rgba(239,68,68,0.25);
overflow:hidden;
}
.sbf-uq__fill{
width:0%;
height:100%;
border-radius:999px;
background: rgba(239,68,68,0.85);
transition: width .18s ease;
}
.sbf-uq.is-done .sbf-uq__bar{
background: rgba(34,197,94,0.18);
border-color: rgba(34,197,94,0.28);
}
.sbf-uq.is-done .sbf-uq__fill{
background: rgba(34,197,94,0.88);
}
/* Location thumb: use locations.svg instead of emoji placeholder */
/* Filterable select (type-to-filter for long lists) */
.sbf-selectFilterWrap{display:flex;gap:8px;align-items:center}
.sbf-selectFilter{width:220px;max-width:60vw;padding:6px 10px;border:1px solid #d1d5db;border-radius:10px;background:#fff}
@media (max-width: 782px){
.sbf-selectFilterWrap{flex-direction:column;align-items:stretch}
.sbf-selectFilter{width:100%;max-width:100%}
}
/* ===== Searchable select (click field opens panel with search bar) ===== */
.sbf-ss{position:relative;display:block;}
.sbf-ss__native{display:none !important;}
.sbf-ss__btn{width:100%;text-align:left;border:1px solid #d0d7de;border-radius:10px;padding:10px 12px;background:#fff;line-height:1.3;min-height:42px;}
.sbf-ss__btn:hover{border-color:#b6bec8;}
.sbf-ss__btn:focus{outline:2px solid rgba(0,0,0,.12);outline-offset:2px;}
.sbf-ss__overlay{position:fixed;inset:0;z-index:999999;display:block;background:rgba(0,0,0,0);}
.sbf-ss__panel{position:fixed;z-index:1000000;background:#fff;border:1px solid #d0d7de;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:10px;max-height:70vh;overflow:hidden;}
.sbf-ss__panel .sbf-ss__list{max-height:calc(70vh - 60px);overflow:auto;}
.sbf-ss__q{width:100%;box-sizing:border-box;border:1px solid #d0d7de;border-radius:10px;padding:10px 12px;margin:0 0 10px 0;}
.sbf-ss__list{max-height:320px;overflow:auto;}
.sbf-ss__opt{padding:10px 10px;border-radius:10px;cursor:pointer;}
.sbf-ss__opt:hover,.sbf-ss__opt.is-active{background:rgba(0,0,0,.06);}
.sbf-ss__opt.is-selected{font-weight:600;}
.sbf-ss__actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;}
.sbf-ss__action{border:1px solid #d0d7de;border-radius:10px;padding:10px 12px;background:#fff;cursor:pointer;font-size:13px;}
.sbf-ss__action:hover{background:rgba(0,0,0,.04);}
@media (max-width: 600px){
.sbf-ss__panel{left:14px !important;right:14px !important;top:14px !important;bottom:14px !important;max-height:none;overflow:hidden;}
.sbf-ss__panel .sbf-ss__list{max-height:calc(100% - 60px);}
}
/* Inline editor XOR note */
.sbf-inline__xorNote{margin:8px 0 0;font-size:12px;font-weight:700;opacity:.8}
/* Floating toast (non-blocking feedback) */
.sbf-toast{
position:fixed;
right:18px;
bottom:18px;
z-index:999999;
max-width:360px;
padding:10px 14px;
border-radius:14px;
border:1px solid rgba(0,0,0,.12);
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.18);
font-size:13px;
font-weight:800;
opacity:0;
transform:translateY(8px);
transition:opacity .18s ease, transform .18s ease;
}
.sbf-toast.is-show{opacity:1;transform:translateY(0)}
.sbf-toast.is-ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
.sbf-toast.is-info{border-color:rgba(59,130,246,.30);background:rgba(59,130,246,.10)}
.sbf-toast.is-warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.12)}
.sbf-toast.is-err{border-color:rgba(220,38,38,.30);background:rgba(220,38,38,.10)}
/* Order access hint (thin, under button) */
.sbf-inline__orderHint{font-size:12px; opacity:.8; margin-top:4px;}
/* Keep helper text visually attached to its field */
.sbf-inline__frow .sbf-help{margin-top:0;}
/* Location modal actions + form */
#sbfLocModal .sbf-loc__actions{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#sbfLocModal .sbf-loc__actionsRight{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
#sbfLocModal .sbf-loc__btn{padding:8px 10px;border:1px solid rgba(0,0,0,.15);border-radius:10px;background:#fff;cursor:pointer;font-size:13px;line-height:1;}
#sbfLocModal .sbf-loc__btn:disabled,#sbfLocModal .sbf-loc__btn.is-disabled{opacity:.55;cursor:not-allowed;}
#sbfLocModal .sbf-loc__form{margin-top:10px;display:block;}
#sbfLocModal .sbf-loc__lab{display:block;margin:10px 0 6px;font-weight:600;font-size:12px;}
#sbfLocModal .sbf-loc__inp,#sbfLocModal .sbf-loc__ta{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid rgba(0,0,0,.18);border-radius:12px;background:#fff;}
#sbfLocModal .sbf-loc__ta{min-height:90px;resize:vertical;}
#sbfLocModal .sbf-field-error{border-color:#d63638 !important;box-shadow:0 0 0 1px #d63638 inset;}
#sbfLocModal .sbf-loc__thumb.is-uploading{opacity:.55;}
#sbfLocModal .sbf-loc__thumb.is-error{opacity:1;border-color:#d63638;}
#sbfLocModal .sbf-loc__thumbPh{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
/* Tool Loans (frontend) */
.sbf-inline__toolLoan{ margin: 0; padding: 0; }
.sbf-toolLoan{ padding: 0; background: transparent; border: 0; border-radius: 0; }
.sbf-toolLoan__row{ margin: 4px 0; }
.sbf-kv__row--toolLoan dd{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sbf-toolLoan__status{ font-weight: 700; }
.sbf-toolLoan__statusText{ font-weight: 700; }
.sbf-toolLoan__hint{ color:#646970; font-size: 13px; }
.sbf-toolLoan__subnote{ margin: 8px 0; color:#646970; font-size: 13px; }
/* Floating Tool button */
.sbf-toolFab{ position: fixed; left: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 999px; border: 1px solid rgba(17,24,39,.18); background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.14); display:flex; align-items:center; justify-content:center; z-index: 9999; cursor:pointer; }
.sbf-toolFab:hover{ box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.sbf-toolFab__icon{ width: 26px; height: 26px; display:block; }
.sbf-toolFab__emoji{ font-size: 22px; line-height: 1; }
.sbf-toolFab__barcode{ position:absolute; left: 6px; bottom: 6px; width: 40px; height: 18px; overflow:hidden; opacity: .92; pointer-events:none; }
.sbf-toolFab__barcode svg{ width: 100%; height: 100%; display:block; }
.sbf-toolFab__badge{ position:absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background:#ef4444; color:#fff; font-size: 11px; font-weight: 800; display:flex; align-items:center; justify-content:center; border: 2px solid #fff; }
.sbf-toolFab__section{ margin: 0 0 14px; }
/* Minimal / flat section headers */
.sbf-toolFab__h{ font-weight: 700; margin: 0 0 8px; font-size: 13px; color:#374151; }
/* Barcode at top of modal (barcode only) */
.sbf-toolFab__barcodeTop{ display:flex; justify-content:center; align-items:center; padding: 6px 0 10px; }
/* Tech barcode (Toolbox bubble): force a readable size on mobile while preserving aspect ratio */
.sbf-toolFab__barcodeTop svg{ width: 250px; height: auto; max-width: 100%; display:block; }
.sbf-toolFab__divider{ height: 1px; background: rgba(17,24,39,.10); margin: 6px 0 12px; }
/* Minimal / flat list rows */
.sbf-toolFab__list{ list-style:none; margin: 0; padding: 0; display:flex; flex-direction:column; gap:0; }
.sbf-toolFab__item{ padding: 10px 0; border-bottom: 1px solid rgba(17,24,39,.08); background: transparent; border-radius: 0; }
.sbf-toolFab__item:last-child{ border-bottom: 0; }
.sbf-toolFab__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sbf-toolFab__left{ flex: 1 1 auto; min-width: 0; }
.sbf-toolFab__right{ flex: 0 0 auto; text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sbf-toolFab__actions{ flex: 0 0 auto; }
.sbf-toolFab__actions .button{ padding: 6px 12px; font-size: 12px; line-height: 1.2; border-radius: 10px; }
.sbf-toolFab__title{ font-weight: 700; color:#111827; }
.sbf-toolFab__tech{ margin-top: 2px; color:#6b7280; font-size: 12px; }
.sbf-toolFab__date{ color:#6b7280; font-size: 12px; white-space:nowrap; }
.sbf-toolFab__empty{ color:#6b7280; font-size: 13px; padding: 8px 0; }
.sbf-toolFab__loading{ color:#6b7280; font-size: 13px; padding: 8px 0; }
/* Modal */
.sbf-feModal{ position: fixed; inset: 0; z-index: 999999; display:none; }
.sbf-feModal.is-open{ display:block; }
.sbf-feModal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.45); }
.sbf-feModal__panel{ position: relative; max-width: 520px; margin: 8vh auto; background:#fff; border-radius: 12px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.sbf-feModal__head{ display:flex; justify-content:space-between; align-items:center; padding: 12px 14px; border-bottom: 1px solid #eee; }
.sbf-feModal__title{ font-weight: 700; }
.sbf-feModal__close{ background: transparent; border:0; font-size: 22px; line-height: 1; cursor:pointer; }
.sbf-feModal__body{ padding: 14px; }
.sbf-feFormRow{ margin-bottom: 12px; }
.sbf-feFormRow label{ display:block; font-weight: 600; margin-bottom: 6px; }
.sbf-feInput, .sbf-feTextarea, .sbf-feSelect{ width:100%; padding: 8px 10px; border: 1px solid #c3c4c7; border-radius: 8px; }
.sbf-feFormActions{ display:flex; justify-content:flex-end; gap:8px; margin-top: 10px; }
/* Hide native browser "x" clear button on search inputs (we provide our own Clear × button) */
.sbf-fe__searchInput::-webkit-search-cancel-button,
.sbf-fe__searchInput::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
.sbf-fe__searchInput::-ms-clear,
.sbf-fe__searchInput::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* User barcode shown at top of Tool Loans bubble */
.sbf-toolFab__userBarcodeTop{margin-bottom:8px; display:flex; justify-content:flex-start; align-items:center;}
.sbf-toolFab__userBarcodeTop svg{height:52px; width:auto; max-width:220px;}
/* Tool FAB modal: lighter header to match minimal theme */
.sbf-toolFabModal .sbf-feModal__head{ padding: 10px 14px; border-bottom: 1px solid rgba(17,24,39,.08); }
.sbf-toolFabModal .sbf-feModal__title{ font-size: 13px; font-weight: 600; color:#6b7280; }
.sbf-toolFabModal .sbf-feModal__close{ font-size: 22px; line-height: 1; color:#6b7280; }
/* Open Card: when no images exist, hide the empty thumbs strip */
.sbf-inline__thumbs--empty{display:none !important;margin-top:0 !important}
/* Tool open-card barcode (above image, left column) */
.sbf-inline__toolBarcode{margin:0 0 8px 0;line-height:0;text-align:center;}
.sbf-inline__toolBarcode svg{height:40px;width:auto;max-width:100%;display:block;margin:0 auto;}
/* Tool barcode in search (gmail) rows */
.sbf-gmail__toolBarcode{margin:0 auto 6px auto;line-height:0;text-align:center;}
.sbf-gmail__toolBarcode svg{height:24px;width:auto;max-width:100%;display:block;margin:0 auto;}
/* === Extracted frontend shared styles === */
.sbf-shophub-header{position:relative;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.sbf-shophub-header__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:14px 18px}
.sbf-shophub-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#111827}
.sbf-shophub-mark{width:34px;height:34px;border-radius:12px;background:#111827;display:inline-block;box-shadow:0 10px 20px rgba(17,24,39,.12)}
.sbf-shophub-nav{display:flex;gap:16px;margin-left:18px;flex:1;flex-wrap:wrap}
.sbf-shophub-nav__link{color:#6b7280;text-decoration:none;font-weight:600;position:relative;padding:8px 4px}
.sbf-shophub-nav__link.is-active{color:#111827}
.sbf-shophub-nav__link.is-active:after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;border-radius:3px;background:#fca5a5}
.sbf-shophub-user{display:flex;align-items:center;gap:10px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px}
.sbf-shophub-user__label{font-size:11px;line-height:1;color:#6b7280;font-weight:700}
.sbf-shophub-user__name{font-weight:800;color:#111827}
.sbf-shophub-user__avatar{width:32px;height:32px;border-radius:999px;background:#111827;display:inline-block}
/* === AUTO-GENERATED FROM INLINE STYLES (frontend) === */
/* DO NOT EDIT BY HAND. Remove inline styles in PHP/templates instead. */
.sbf-inline-1169661891{margin:0;}
.sbf-inline-17d70ce71c{display:inline-block;padding:6px 10px;border-radius:6px;background:#fff4e5;color:#7a4a00;}
.sbf-inline-2033c57c51{margin:18px 0;}
.sbf-inline-3c194af635{padding:12px 16px 0;}
.sbf-inline-41db5c3964{margin:12px 0;}
.sbf-inline-60583d4711{margin:12px 0 6px;font-weight:600;opacity:.8;}
.sbf-inline-620e8a48f2{margin-top:6px; font-size:12px; line-height:1.3;}
.sbf-inline-6b99de8b69{display:none;}
.sbf-inline-6f02283b5f{display:block; font-weight:600; margin-bottom:6px;}
.sbf-inline-70a7c65349{margin:6px 0 10px;}
.sbf-inline-73b20a4399{display:none; margin-top:10px;}
.sbf-inline-7623f05545{flex:1;}
.sbf-inline-8a77e5a311{margin-top:8px;}
.sbf-inline-92a6381141{height:10px;}
.sbf-inline-9374e84210{margin-top:12px;}
.sbf-inline-a35af9d1bc{max-width:1100px;}
.sbf-inline-ad54e396fa{margin:0 0 8px;}
.sbf-inline-af3fee87a1{margin-bottom:10px;}
.sbf-inline-afbbdd6b72{gap:8px; align-items:center; flex-wrap:wrap;}
.sbf-inline-c17aedcb33{display:inline-block;padding:6px 10px;border-radius:6px;background:#e7f7ed;color:#0a6b1a;}
.sbf-inline-c8be1ccba6{display:none;}
.sbf-inline-cad980f4b7{width:100%;}
.sbf-inline-cbbcac1ef5{grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.sbf-inline-d6f2af6e0a{margin-top:14px;}
.sbf-inline-dbde3ba4d9{padding:0 16px 8px;font-size:13px;opacity:.75;}
/* === Global Search V2 Sandbox === */
/* === Search V2 sandbox refresh === */
.sbf-v2search{
--sbf-v2-bg:#f3f4f6;
--sbf-v2-surface:#ffffff;
--sbf-v2-text:#1b1b1b;
--sbf-v2-muted:#6b7280;
--sbf-v2-line:#e5e7eb;
--sbf-v2-accent:#ffc0cb;
--sbf-v2-blue:#2b82ff;
--sbf-v2-green:#11d564;
--sbf-v2-green-bg:#c3f1d5;
--sbf-v2-amber:#ffb020;
--sbf-v2-amber-bg:#fff0d4;
--sbf-v2-red:#ff4d4d;
--sbf-v2-red-bg:#ffe5e5;
max-width:1280px;
margin:0 auto;
padding:8px 20px 28px;
color:var(--sbf-v2-text);
}
.sbf-v2search__controls{
position:sticky;
top:0;
z-index:25;
display:block;
margin:0 0 14px;
padding:0 0 10px;
background:rgba(243,244,246,.94);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(229,231,235,.7);
}
.sbf-v2search__head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 0 8px;
}
.sbf-v2search__titleGroup{display:flex;align-items:center;gap:10px;min-width:0;}
.sbf-v2search__badge{
display:inline-flex;align-items:center;justify-content:center;
height:30px;padding:0 10px;border-radius:8px;background:#111827;color:#fff;
font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
}
.sbf-v2search__title{
margin:0;
font-size:34px;
line-height:1;
letter-spacing:-.04em;
font-weight:900;
color:#161616;
}
.sbf-v2search__count{
white-space:nowrap;
font-size:14px;
color:var(--sbf-v2-muted);
}
.sbf-v2search__count strong{color:var(--sbf-v2-text);font-weight:800;}
.sbf-v2search__searchRow{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:14px;
align-items:center;
}
.sbf-v2search__searchBox{
position:relative;
display:flex;
align-items:center;
min-height:52px;
padding:0 14px;
background:#fff;
border:1px solid var(--sbf-v2-line);
border-radius:18px;
box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 18px rgba(0,0,0,.03);
}
.sbf-v2search__searchIcon{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;flex:0 0 auto;
color:#9ca3af;font-size:18px;margin-right:10px;
}
.sbf-v2search__input{
flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;box-shadow:none;
font-size:18px;font-weight:500;color:var(--sbf-v2-text);padding:0;
}
.sbf-v2search__input::placeholder{color:#9ca3af;font-weight:400;}
.sbf-v2search__clear{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;flex:0 0 auto;
color:#9ca3af;text-decoration:none;font-size:16px;font-weight:700;
}
.sbf-v2search__clear.is-empty{opacity:.45}
.sbf-v2search__filters{
position:relative;
display:flex;
align-items:center;
gap:10px;
overflow:visible;
padding-bottom:2px;
z-index:20;
}
.sbf-v2search__selectWrap{position:relative;display:block;flex:0 0 auto;}
.sbf-v2search__select{
appearance:none;
min-width:138px;
height:52px;
padding:0 42px 0 16px;
border:1px solid var(--sbf-v2-line);
border-radius:16px;
background:#fff;
color:var(--sbf-v2-text);
font-size:15px;
font-weight:600;
box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 18px rgba(0,0,0,.03);
}
.sbf-v2search__chev{
pointer-events:none;
position:absolute;right:16px;top:50%;transform:translateY(-48%);
color:#6b7280;font-size:12px;font-weight:900;
}
.sbf-v2search__filterBtn{
position:relative;
display:inline-flex;
align-items:center;
gap:8px;
height:52px;
padding:0 16px;
border:1px solid var(--sbf-v2-line);
border-radius:16px;
background:#fff;
color:var(--sbf-v2-text);
font-size:15px;
font-weight:600;
box-shadow:0 1px 0 rgba(17,24,39,.02), 0 4px 18px rgba(0,0,0,.03);
cursor:pointer;
}
/* V2 buttons should match homepage Find button */
.sbf-v2search .sbf-search__btn{
border:0 !important;
background:#111827 !important;
color:#fff !important;
border-radius:18px !important;
padding:0 22px !important;
font-weight:1000 !important;
cursor:pointer !important;
box-shadow:0 10px 30px rgba(17,24,39,.18) !important;
line-height:1 !important;
white-space:nowrap !important;
min-height:52px;
display:inline-flex;
align-items:center;
justify-content:center;
text-decoration:none;
}
.sbf-v2search .sbf-search__btn:hover{
background:#0b1220 !important;
}
.sbf-v2search__filtersWrap{
position:relative;
flex:0 0 auto;
}
.sbf-v2search__filterBtnLabel{
display:inline-block;
}
.sbf-v2search__filterPanel{
position:absolute;
top:calc(100% + 10px);
right:0;
width:280px;
z-index:200;
}
.sbf-v2search__filterPanelInner{
background:#fff;
border:1px solid var(--sbf-v2-line);
border-radius:18px;
box-shadow:0 18px 40px rgba(15,23,42,.16);
padding:16px;
}
.sbf-v2search__filterPanel[hidden]{
display:none !important;
}
.sbf-v2search__panelGroup + .sbf-v2search__panelGroup{
margin-top:14px;
}
.sbf-v2search__panelTitle{
margin:0 0 10px;
font-size:13px;
line-height:1.2;
font-weight:800;
color:#111827;
letter-spacing:.01em;
}
.sbf-v2search__checkGrid{
display:grid;
gap:8px;
}
.sbf-v2search__checkItem{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
color:#374151;
}
.sbf-v2search__checkItem input{
margin:0;
}
.sbf-v2search__panelFooter{
margin-top:14px;
padding-top:12px;
border-top:1px solid #eef2f7;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.sbf-v2search__panelReset{
color:var(--sbf-v2-blue);
font-size:13px;
font-weight:700;
text-decoration:none;
white-space:nowrap;
}
.sbf-v2search__panelApply{
min-width:132px;
}
.sbf-v2search__filterIcon{font-size:14px;color:var(--sbf-v2-blue);}
.sbf-v2search__filterCount{
display:inline-flex;align-items:center;justify-content:center;
min-width:22px;height:22px;padding:0 6px;border-radius:999px;
background:var(--sbf-v2-blue);color:#fff;font-size:12px;font-weight:800;
}
.sbf-v2search__chipRow{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:12px;
margin-bottom:20px;
}
.sbf-v2search__chipPill{
display:inline-flex;align-items:center;gap:6px;
min-height:32px;padding:0 10px;border-radius:10px;
background:#eef4ff;border:1px solid #dbe7ff;color:#4763ff;
font-size:14px;font-weight:600;
}
.sbf-v2search__chipPill.is-green{
background:#edf9f1;border-color:#d3efd9;color:#3a8a52;
}
.sbf-v2search__chipPill button,
.sbf-v2search__clearAll{
border:0;background:transparent;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;
}
.sbf-v2search__clearAll{text-decoration:underline;color:#8d8d8d;font-size:14px;}
.sbf-v2search__resultsBody{
margin-top:20px;
}
.sbf-v2search__grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px;
}
.sbf-v2card{
background:#fff;
border:1px solid #ececec;
border-radius:28px;
box-shadow:0 8px 28px rgba(0,0,0,.035);
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sbf-v2card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.08);border-color:#ffd3dc;}
.sbf-v2card__media{
position:relative;
height:218px;
padding:16px;
background:#f8fafc;
}
.sbf-v2card__img{
width:100%;height:100%;display:block;object-fit:cover;border-radius:18px;
}
.sbf-v2card__media.is-placeholder{
background:linear-gradient(180deg,#fcfcfd 0%, #fafafa 100%);
}
.sbf-v2card__placeholder{
width:100%;height:100%;border-radius:18px;background:#fbfbfb;border:1px solid #f0f0f0;
display:grid;place-items:center;color:#eadac7;font-size:72px;font-weight:700;
}
.sbf-v2card__mediaTop{
position:absolute;
top:22px;
right:22px;
z-index:3;
display:flex;
align-items:center;
gap:10px;
}
.sbf-v2card__status{
display:inline-flex;
align-items:center;
gap:6px;
min-height:30px;
padding:0 12px;
border-radius:12px;
font-size:12px;
font-weight:700;
backdrop-filter:blur(6px);
}
.sbf-v2card__status--ready{background:var(--sbf-v2-green-bg);color:#16814c;}
.sbf-v2card__status--warn{background:var(--sbf-v2-amber-bg);color:#d08b14;}
.sbf-v2card__status--info{background:#e7f0ff;color:#356ff5;}
.sbf-v2card__status--neutral{background:#eef2f7;color:#667085;}
.sbf-v2card__status--danger{background:var(--sbf-v2-red-bg);color:#d92d20;}
.sbf-v2card__edit{
width:32px;
height:32px;
border-radius:999px;
background:rgba(255,255,255,.92);
color:#4b5563;
box-shadow:0 2px 8px rgba(15,23,42,.08);
margin-left:auto;
flex:0 0 auto;
}
.sbf-v2card__edit:hover{
background:#000;
transform:translateY(-1px);
box-shadow:0 16px 30px rgba(15,23,42,.24);
}
.sbf-v2card__edit svg{
width:16px;
height:16px;
display:block;
}
.sbf-v2card__body{padding:16px 16px 18px;}
.sbf-v2card__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;}
.sbf-v2card__type{
display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 8px;border-radius:8px;
font-size:12px;font-weight:700;
}
.sbf-v2card__type--tool{background:#fff1f1;color:#e05151;}
.sbf-v2card__type--hardware{background:#fff6dd;color:#d89212;}
.sbf-v2card__type--fluid{background:#e9fbfb;color:#13a8c2;}
.sbf-v2card__type--location{background:#eaf8ef;color:#19a45f;}
.sbf-v2card__type--item{background:#f3eaff;color:#8b3dff;}
.sbf-v2card__type--bin{background:#fff1e7;color:#f97316;}
.sbf-v2card__code{font-size:12px;font-weight:700;color:#94a3b8;}
.sbf-v2card__title{margin:0 0 6px;font-size:17px;line-height:1.22;font-weight:700;letter-spacing:-.03em;color:#171717;}
.sbf-v2card__title a{
font-weight:700;
}
.sbf-v2card__location{margin:0 0 14px;font-size:14px;line-height:1.45;color:#6b7280;font-weight:500;}
.sbf-v2card__actions{display:flex;align-items:center;gap:8px;}
.sbf-v2card__detailsBtn{
flex:1 1 auto;height:40px;padding:0 14px;border:1px solid #ececec;border-radius:14px;background:#fafafa;
color:#161616;font-size:14px;font-weight:600;text-align:left;
}
.sbf-v2card__toggle{
width:40px;height:40px;border:1px solid #ececec;border-radius:14px;background:#fafafa;color:#6b7280;
font-size:16px;font-weight:800;
}
.sbf-v2card.is-open .sbf-v2card__toggle{transform:rotate(180deg);}
.sbf-v2card__expanded{padding-top:14px;}
.sbf-v2card__detailGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;}
.sbf-v2card__detail{padding:10px 12px;border-radius:14px;background:#fafafa;border:1px solid #f0f0f0;min-width:0;}
.sbf-v2card__detail--wide{grid-column:1 / -1;}
.sbf-v2card__detail span{display:block;font-size:11px;line-height:1.2;color:#98a2b3;text-transform:uppercase;font-weight:700;margin-bottom:4px;}
.sbf-v2card__detail strong{display:block;font-size:13px;line-height:1.45;color:#101828;font-weight:700;white-space:pre-line;word-break:break-word;overflow-wrap:anywhere;}
.sbf-v2search__loadMoreWrap{display:flex;justify-content:center;padding:42px 0 8px;}
.sbf-v2search__loadMoreWrap[hidden]{display:none !important;}
.sbf-v2search__loadMore,
.sbf-v2search__loadMoreBtn{
min-height:56px;padding:0 28px;border:0;border-radius:18px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.05);
color:#111827;font-size:18px;font-weight:700;
}
.sbf-v2search__loadMore span,
.sbf-v2search__loadMoreBtn span{margin-left:6px;}
.sbf-v2search__grid [data-sbf-v2-card-hidden="1"]{display:none !important;}
@media (max-width: 1180px){
.sbf-v2search__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 980px){
.sbf-v2search{padding:8px 12px 24px;}
.sbf-v2search__title{font-size:42px;}
.sbf-v2search__searchRow{grid-template-columns:1fr;}
.sbf-v2search__filters{flex-wrap:wrap;}
.sbf-v2search__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 640px){
.sbf-v2search__head{align-items:flex-start;flex-direction:column;}
.sbf-v2search__title{font-size:34px;}
.sbf-v2search__grid{grid-template-columns:1fr;}
.sbf-v2card__media{height:196px;}
}
/* Search V2 interactive controls */
.sbf-v2search__filtersWrap{position:relative;}
.sbf-v2search__filterPanel{
position:absolute;top:calc(100% + 10px);right:0;z-index:30;width:320px;
background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:18px;
box-shadow:0 18px 44px rgba(15,23,42,.14);padding:16px;
}
.sbf-v2search__panelGroup + .sbf-v2search__panelGroup{margin-top:16px;padding-top:14px;border-top:1px solid rgba(15,23,42,.08);}
.sbf-v2search__panelTitle{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:10px;}
.sbf-v2search__checkGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sbf-v2search__checkItem{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#1f2937;}
.sbf-v2search__checkItem input{accent-color:#2563eb;}
.sbf-v2search__panelFooter{margin-top:14px;padding-top:12px;border-top:1px solid rgba(15,23,42,.08);display:flex;justify-content:flex-end;}
.sbf-v2search__panelReset{font-size:13px;font-weight:700;color:#64748b;text-decoration:none;}
.sbf-v2search__viewToggle{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid rgba(15,23,42,.1);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(15,23,42,.06);}
.sbf-v2search__viewBtn{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:#64748b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.sbf-v2search__viewBtn svg{width:18px;height:18px;display:block;}
.sbf-v2search__viewBtn.is-active{background:#0f172a;color:#fff;}
.sbf-v2search__clear svg,.sbf-v2search__searchIcon svg,.sbf-v2search__chev svg,.sbf-v2card__toggle svg{width:18px;height:18px;display:block;}
.sbf-v2search__filterIcon svg{width:14px;height:14px;display:block;}
.sbf-v2search__chipPill a,.sbf-v2search__clearAll{border:0;background:none;color:inherit;text-decoration:none;font:inherit;cursor:pointer;}
.sbf-v2card__metaRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.sbf-v2card__metaRow span{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;border:1px solid rgba(148,163,184,.28);background:#f8fafc;color:#475569;font-size:12px;font-weight:700;line-height:1;}
.sbf-v2search__empty{padding:48px 24px;border:1px dashed rgba(148,163,184,.35);border-radius:24px;background:#fff;color:#64748b;font-size:16px;font-weight:600;text-align:center;}
.sbf-v2search--layout-list .sbf-v2search__grid{grid-template-columns:1fr;gap:12px;}
.sbf-v2search--layout-list .sbf-v2card{display:grid;grid-template-columns:240px 1fr;align-items:stretch;}
.sbf-v2search--layout-list .sbf-v2card__media{min-height:100%;border-radius:24px 0 0 24px;}
.sbf-v2search--layout-list .sbf-v2card__body{display:flex;flex-direction:column;justify-content:center;}
.sbf-v2search--layout-list .sbf-v2card__actions{margin-top:0;}
.sbf-v2search--layout-list .sbf-v2card__mediaTop{top:16px;right:16px;}
@media (max-width: 960px){
.sbf-v2search__filterPanel{left:0;right:auto;width:min(320px,calc(100vw - 32px));}
.sbf-v2search__viewToggle{order:4;}
}
@media (max-width: 720px){
.sbf-v2search__checkGrid{grid-template-columns:1fr;}
.sbf-v2search--layout-list .sbf-v2card{grid-template-columns:1fr;}
.sbf-v2search--layout-list .sbf-v2card__media{border-radius:24px 24px 0 0;min-height:220px;}
}
/* --- V2 search input: hide native browser clear/reveal so only custom grey X shows --- */
.sbf-v2search__input::-webkit-search-decoration,
.sbf-v2search__input::-webkit-search-cancel-button,
.sbf-v2search__input::-webkit-search-results-button,
.sbf-v2search__input::-webkit-search-results-decoration{
-webkit-appearance:none;
appearance:none;
display:none;
}
.sbf-v2search__input::-ms-clear,
.sbf-v2search__input::-ms-reveal{
display:none;
width:0;
height:0;
}
/* --- V2 placeholder icon treatment --- */
.sbf-v2card__placeholder{
width:100%;
height:100%;
border-radius:18px;
background:#fbfbfb;
border:1px solid #f0f0f0;
display:grid;
place-items:center;
color:#d7dde6;
}
.sbf-v2card__placeholder svg{
width:84px;
height:84px;
display:block;
stroke:currentColor;
fill:none;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
/* V2 filter polish + apply workflow */
.sbf-v2search__filterPanel{
width:320px;
background:transparent;
border:0;
box-shadow:none;
padding:0;
}
.sbf-v2search__filterPanelInner{
background:#fff;
border:1px solid rgba(15,23,42,.08);
border-radius:18px;
box-shadow:0 18px 44px rgba(15,23,42,.14);
padding:16px;
}
.sbf-v2search__panelFooter{
margin-top:14px;
padding-top:12px;
border-top:1px solid rgba(15,23,42,.08);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.sbf-v2search__panelApply{
min-height:40px;
padding:0 14px;
border:0;
border-radius:12px;
background:#111827;
color:#fff;
font-size:13px;
font-weight:800;
cursor:pointer;
}
.sbf-v2search__panelReset{
font-size:13px;
font-weight:700;
color:#64748b;
text-decoration:none;
}
.sbf-v2search__clearAll{
text-decoration:underline;
}
.sbf-v2card__type{
gap:8px;
}
.sbf-v2card__typeIcon{
width:14px;
height:14px;
display:block;
object-fit:contain;
}
/* 2026-03 card refresh: search result cards match approved search card comp */
.sbf-v2search__grid{
gap:24px;
}
.sbf-v2card{
display:flex;
flex-direction:column;
height:100%;
background:#fff;
border:1px solid #f1f5f9;
border-radius:24px;
box-shadow:0 10px 24px rgba(15,23,42,.05),0 2px 6px rgba(15,23,42,.03);
overflow:hidden;
position:relative;
transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.sbf-v2card:hover{
transform:translateY(-4px);
box-shadow:0 18px 36px rgba(15,23,42,.09),0 4px 12px rgba(15,23,42,.05);
border-color:#e2e8f0;
}
.sbf-v2card__media{
position:relative;
height:192px;
background:#f3f4f6;
padding:0;
overflow:hidden;
}
.sbf-v2card__img,
.sbf-v2card__placeholder{
width:100%;
height:100%;
border-radius:0;
}
.sbf-v2card__img{
object-fit:cover;
transition:transform .5s ease;
}
.sbf-v2card:hover .sbf-v2card__img,
.sbf-v2card:hover .sbf-v2card__placeholder img{
transform:scale(1.05);
}
.sbf-v2card__media.is-placeholder{
background:#f3f4f6;
}
.sbf-v2card__placeholder{
background:#f8fafc;
border:0;
display:flex;
align-items:center;
justify-content:center;
padding:18px;
}
.sbf-v2card__placeholder img{
width:auto;
height:68%;
max-width:70%;
object-fit:contain;
transition:transform .5s ease;
filter:grayscale(.06);
}
.sbf-v2card__mediaTop{
position:absolute;
top:12px;
left:12px;
right:12px;
z-index:3;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.sbf-v2card__status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:30px;
padding:6px 10px;
border-radius:10px;
font-size:12px;
font-weight:700;
line-height:1;
border:1px solid transparent;
box-shadow:0 2px 6px rgba(15,23,42,.06);
backdrop-filter:blur(6px);
}
.sbf-v2card__status--ready{background:#dcfce7;color:#166534;border-color:#bbf7d0;}
.sbf-v2card__status--warn{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.sbf-v2card__status--info{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe;}
.sbf-v2card__status--neutral{background:#e5e7eb;color:#4b5563;border-color:#d1d5db;}
.sbf-v2card__status--danger{background:#fee2e2;color:#b91c1c;border-color:#fecaca;}
.sbf-v2card__statusDot{
width:6px;
height:6px;
border-radius:999px;
background:currentColor;
flex:0 0 auto;
}
.sbf-v2card__editMenu{
position:relative;
margin-left:auto;
flex:0 0 auto;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .2s ease, visibility .2s ease;
}
.sbf-v2card:hover .sbf-v2card__editMenu,
.sbf-v2card:focus-within .sbf-v2card__editMenu,
.sbf-v2card__editMenu[open]{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.sbf-v2card__editToggle{
list-style:none;
width:32px;
height:32px;
border-radius:999px;
background:rgba(255,255,255,.92);
color:#4b5563;
box-shadow:0 2px 8px rgba(15,23,42,.08);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}
.sbf-v2card__editToggle::-webkit-details-marker{display:none;}
.sbf-v2card__editToggle:hover,
.sbf-v2card__editMenu[open] .sbf-v2card__editToggle{
background:#fff;
color:#111827;
box-shadow:0 6px 16px rgba(15,23,42,.12);
}
.sbf-v2card__editToggle svg{
width:14px;
height:14px;
display:block;
flex:0 0 auto;
}
.sbf-v2card__editDropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:132px;
padding:8px;
border-radius:14px;
background:#fff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 16px 34px rgba(15,23,42,.14);
}
.sbf-v2search .sbf-v2card__editDropdown .sbf-v2card__editItem,
.sbf-v2search .sbf-v2card__editDropdown button.sbf-v2card__editItem,
.sbf-v2search .sbf-v2card__editDropdown a.sbf-v2card__editItem{
appearance:none !important;
-webkit-appearance:none !important;
display:flex;
align-items:center;
gap:8px;
width:100%;
min-height:38px;
padding:0 10px;
border:0 !important;
background:transparent !important;
border-radius:10px !important;
color:#111827;
font:inherit;
font-size:13px;
font-weight:700;
text-decoration:none;
text-align:left;
white-space:nowrap;
box-shadow:none !important;
outline:none;
cursor:pointer;
}
.sbf-v2card__editItem:hover{
background:#f8fafc;
}
.sbf-v2card__editItem svg{
width:13px;
height:13px;
display:block;
flex:0 0 auto;
}
.sbf-v2card__imageBtn{
width:100%;
height:100%;
padding:0;
border:0;
background:transparent;
display:block;
cursor:zoom-in;
}
.sbf-v2card__mediaTypeWrap{
position:absolute;
left:12px;
bottom:12px;
z-index:3;
display:block;
}
.sbf-v2card__mediaType,
.sbf-v2card__type{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:8px;
font-size:12px;
font-weight:600;
line-height:1;
}
.sbf-v2card__mediaType{
background:rgba(17,24,39,.84);
color:#fff;
backdrop-filter:blur(8px);
}
.sbf-v2card__mediaType .sbf-v2card__typeIcon{
filter:brightness(0) invert(1);
}
.sbf-v2card__body{
display:flex;
flex-direction:column;
flex:1 1 auto;
padding:16px;
}
.sbf-v2card__titleRow{display:none;}
.sbf-v2card__title{
margin:0;
font-size:18px;
line-height:1.25;
font-weight:800;
letter-spacing:-.02em;
color:#111827;
}
.sbf-v2card__code{display:none;}
.sbf-v2card__locationRow{
display:flex;
align-items:center;
gap:10px;
margin:0 0 14px;
color:#4b5563;
}
.sbf-v2card__locIcon{
width:32px;
height:32px;
border-radius:999px;
background:#eff6ff;
color:#2563eb;
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
}
.sbf-v2card__locIcon svg{width:14px;height:14px;display:block;}
.sbf-v2card__locationStack{display:flex;flex-direction:column;min-width:0;gap:0;}
.sbf-v2card__locationRow--headline{margin:0 0 16px;}
.sbf-v2card__locationLabel{display:none;}
.sbf-v2card__location{
margin:0;
font-size:18px;
line-height:1.3;
color:#111827;
font-weight:800;
letter-spacing:-.02em;
}
.sbf-v2card__metaRow{
display:none;
}
.sbf-v2card__summaryGrid{
margin-top:auto;
padding-top:12px;
border-top:1px solid #f1f5f9;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.sbf-v2card__summaryItem span{
display:block;
font-size:10px;
line-height:1.2;
color:#9ca3af;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
margin-bottom:4px;
}
.sbf-v2card__summaryItem strong{
display:block;
font-size:12px;
line-height:1.35;
color:#374151;
font-weight:700;
white-space:pre-line;
word-break:break-word;
}
.sbf-v2card__actions{
margin-top:12px;
display:flex;
align-items:center;
}
.sbf-v2card__detailsBtn{
width:100%;
min-height:40px;
padding:0 14px;
border:0;
border-radius:12px;
background:#f9fafb;
color:#4b5563;
font-size:12px;
font-weight:700;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
text-align:center;
}
.sbf-v2card__detailsBtn:hover{
background:#f3f4f6;
color:#111827;
}
.sbf-v2card__detailsBtn svg{
width:12px;
height:12px;
transition:transform .2s ease;
}
.sbf-v2card.is-open .sbf-v2card__detailsBtn svg{
transform:rotate(90deg);
}
.sbf-v2card__toggle{display:none !important;}
.sbf-v2card__expanded{
padding-top:12px;
}
.sbf-v2card__detailGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.sbf-v2card__detail{
padding:10px 12px;
border-radius:14px;
background:#fafafa;
border:1px solid #f0f0f0;
}
.sbf-v2search--layout-list .sbf-v2search__grid{
grid-template-columns:1fr;
gap:14px;
}
.sbf-v2search--layout-list .sbf-v2card{
display:grid;
grid-template-columns:220px minmax(0,1fr);
}
.sbf-v2search--layout-list .sbf-v2card__media{
height:auto;
min-height:100%;
}
.sbf-v2search--layout-list .sbf-v2card__body{
justify-content:center;
}
.sbf-v2search--layout-list .sbf-v2card__metaRow{
display:flex;
gap:8px;
flex-wrap:wrap;
margin:0 0 14px;
}
.sbf-v2search--layout-list .sbf-v2card__metaRow span{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
border:1px solid rgba(148,163,184,.28);
background:#f8fafc;
color:#475569;
font-size:12px;
font-weight:700;
line-height:1;
}
@media (max-width:1180px){
.sbf-v2search__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:980px){
.sbf-v2search__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
.sbf-v2search--layout-list .sbf-v2card{grid-template-columns:1fr;}
.sbf-v2search--layout-list .sbf-v2card__media{height:192px;}
}
@media (max-width:640px){
.sbf-v2search__grid{grid-template-columns:1fr;}
.sbf-v2card__summaryGrid{grid-template-columns:1fr 1fr;}
}
.sbf-v2search .sbf-v2card__imageBtn{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:inherit;overflow:hidden;}
.sbf-v2search .sbf-v2card__imageLink{cursor:pointer;}
.sbf-v2search .sbf-v2card__imageBtn:focus-visible{outline:3px solid #fda4af;outline-offset:3px;}
.sbf-v2search .sbf-v2card__title,
.sbf-v2search .sbf-v2card__location,
.sbf-v2search .sbf-v2card__locationLink{color:#111827;font-weight:800;}
.sbf-v2search .sbf-v2card__locationLink{color:#111827;text-decoration:none;}
.sbf-v2search .sbf-v2card__locationLink:hover{color:#111827;text-decoration:none;}
.sbf-v2search .sbf-v2card__locationLink:focus-visible{outline:2px solid #fda4af;outline-offset:3px;border-radius:8px;}
.sbf-v2search .sbf-v2card__editItem--placeholder{width:100%;border:0;background:transparent;text-align:left;cursor:default;}
.sbf-v2search .sbf-v2card__editItem--placeholder:hover{background:#f8fafc;color:#111827;}
/* Compact layout */
.sbf-v2search--layout-compact .sbf-v2search__grid{
grid-template-columns:1fr;
gap:8px;
}
.sbf-v2search--layout-compact .sbf-v2card{
display:grid;
grid-template-columns:36px minmax(0,1fr) auto;
align-items:center;
column-gap:10px;
row-gap:0;
padding:8px 12px;
border-radius:16px;
overflow:visible;
min-height:52px;
content-visibility:auto;
contain:layout paint style;
contain-intrinsic-size:52px;
}
.sbf-v2search--layout-compact .sbf-v2card:hover{
transform:none;
}
.sbf-v2search--layout-compact .sbf-v2card__media{
grid-column:1;
height:36px;
width:36px;
min-width:36px;
padding:0;
background:transparent;
}
.sbf-v2search--layout-compact .sbf-v2card__imageBtn,
.sbf-v2search--layout-compact .sbf-v2card__img,
.sbf-v2search--layout-compact .sbf-v2card__placeholder{
width:36px;
height:36px;
border-radius:10px;
}
.sbf-v2search--layout-compact .sbf-v2card__placeholder{
display:flex;
align-items:center;
justify-content:center;
background:#111827;
border:1px solid #374151;
color:#fff;
font-size:18px;
}
.sbf-v2search--layout-compact .sbf-v2card__placeholder img,
.sbf-v2search--layout-compact .sbf-v2card__placeholder svg{
width:14px;
height:14px;
max-width:14px;
max-height:14px;
opacity:1;
filter:brightness(0) invert(1);
}
.sbf-v2search--layout-compact .sbf-v2card__mediaTop,
.sbf-v2search--layout-compact .sbf-v2card__mediaTypeWrap,
.sbf-v2search--layout-compact .sbf-v2card__actions,
.sbf-v2search--layout-compact .sbf-v2card__expanded,
.sbf-v2search--layout-compact .sbf-v2card__locationRow,
.sbf-v2search--layout-compact .sbf-v2card__locIcon,
.sbf-v2search--layout-compact .sbf-v2card__metaRow{
display:none !important;
}
.sbf-v2search--layout-compact .sbf-v2card__body{
grid-column:2 / 4;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
column-gap:10px;
min-width:0;
width:100%;
padding:0;
}
.sbf-v2search--layout-compact .sbf-v2card__compactLine{
grid-column:1;
min-width:0;
width:100%;
text-align:left;
}
.sbf-v2search--layout-compact .sbf-v2card__compactTitle{
display:block;
min-width:0;
max-width:100%;
margin:0;
font-size:14px;
line-height:1.2;
font-weight:700;
color:#111827;
text-align:left;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
text-decoration:none;
}
.sbf-v2search--layout-compact .sbf-v2card__compactRail{
grid-column:2;
display:inline-flex;
align-items:center;
justify-content:flex-end;
gap:6px;
min-width:max-content;
white-space:nowrap;
justify-self:end;
align-self:center;
position:relative;
z-index:5;
}
.sbf-v2search--layout-compact .sbf-v2card__status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:22px;
padding:0 8px;
border-radius:10px;
font-size:11px;
white-space:nowrap;
margin:0;
flex:0 0 auto;
}
.sbf-v2search--layout-compact .sbf-v2card__compactType{
display:inline-flex;
align-items:center;
flex:0 0 auto;
}
.sbf-v2search--layout-compact .sbf-v2card__compactType .sbf-v2card__type{
display:inline-flex;
align-items:center;
white-space:nowrap;
margin:0;
flex:0 0 auto;
}
.sbf-v2search--layout-compact .sbf-v2card__type{
min-height:22px;
padding:0 8px;
border-radius:10px;
font-size:11px;
white-space:nowrap;
}
.sbf-v2search--layout-compact .sbf-v2card__typeIcon{
width:12px;
height:12px;
}
.sbf-v2search--layout-compact .sbf-v2card__editMenu{
display:inline-flex;
align-items:center;
flex:0 0 auto;
position:relative;
z-index:6;
opacity:1;
visibility:visible;
pointer-events:auto;
margin-left:0;
}
.sbf-v2search--layout-compact .sbf-v2card__editToggle{
width:28px;
height:28px;
background:transparent;
box-shadow:none;
}
.sbf-v2search--layout-compact .sbf-v2card__editDropdown{
right:0;
left:auto;
}
@media (max-width: 720px){
.sbf-v2search--layout-compact .sbf-v2card{
grid-template-columns:32px minmax(0,1fr) auto;
column-gap:8px;
row-gap:0;
padding:8px 10px;
min-height:48px;
contain-intrinsic-size:48px;
}
.sbf-v2search--layout-compact .sbf-v2card__body{
grid-column:2 / 4;
grid-template-columns:minmax(0,1fr) auto;
column-gap:8px;
}
.sbf-v2search--layout-compact .sbf-v2card__imageBtn,
.sbf-v2search--layout-compact .sbf-v2card__img,
.sbf-v2search--layout-compact .sbf-v2card__placeholder,
.sbf-v2search--layout-compact .sbf-v2card__media{
width:32px;
height:32px;
min-width:32px;
}
}
/* Location detail page (single location / area view) */
.sbf-fe--locationDetail{max-width:1200px;margin:0 auto;padding:8px 0 28px}
.sbf-locPage{display:flex;flex-direction:column;gap:18px}
.sbf-locPage__crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#6b7280;font-size:13px;padding:4px 2px}
.sbf-locPage__crumbBack{color:#111827;text-decoration:none;font-weight:700}
.sbf-locPage__crumbBack:hover{text-decoration:underline}
.sbf-locPage__crumbs .is-current{color:#111827;font-weight:800}
.sbf-locPage__hero{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:28px;box-shadow:0 10px 30px rgba(15,23,42,.05);padding:24px;overflow:hidden}
.sbf-locPage__heroBg{position:absolute;top:-30px;right:-10px;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle at center, rgba(59,130,246,.12), rgba(59,130,246,0) 68%);pointer-events:none}
.sbf-locPage__heroInner{position:relative;display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.sbf-locPage__heroMain{display:flex;gap:18px;min-width:0;align-items:flex-start}
.sbf-locPage__thumbWrap{flex:0 0 auto}
.sbf-locPage__thumb{width:92px;height:92px;border-radius:24px;background:linear-gradient(135deg,#eff6ff,#e0e7ff);border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;color:#2563eb;box-shadow:0 6px 18px rgba(37,99,235,.12)}
.sbf-locPage__thumb.has-image{border-color:#e5e7eb;box-shadow:none}
.sbf-locPage__thumbIcon{font-size:34px;line-height:1}
.sbf-locPage__heroText{min-width:0;display:flex;flex-direction:column;gap:10px}
.sbf-locPage__eyebrowRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sbf-locPage__eyebrow,.sbf-locPage__status{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sbf-locPage__eyebrow{background:#f3f4f6;color:#4b5563;border:1px solid #e5e7eb}
.sbf-locPage__status{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.sbf-locPage__title{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.05;font-weight:900;letter-spacing:-.03em;color:#0f172a}
.sbf-locPage__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:#475569;font-size:14px}
.sbf-locPage__metaPill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;color:#0f172a;font-weight:800}
.sbf-locPage__metaText strong{color:#0f172a}
.sbf-locPage__notes{max-width:900px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.5}
.sbf-locPage__heroActions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;position:relative;z-index:1}
.sbf-locPage__actionBtn{appearance:none;border:1px solid #e5e7eb;background:#fff;color:#111827;padding:11px 15px;border-radius:14px;font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sbf-locPage__actionBtn:hover{background:#f8fafc}
.sbf-locPage__stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;z-index:1}
.sbf-locPage__statCard{text-decoration:none;color:#0f172a;background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.sbf-locPage__statCard:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(15,23,42,.06);border-color:#cbd5e1}
.sbf-locPage__statLabel{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.sbf-locPage__statValue{font-size:28px;line-height:1;font-weight:900;color:#0f172a}
.sbf-locPage__search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sbf-locPage__searchIcon{font-size:18px;color:#94a3b8;line-height:1}
.sbf-locPage__searchInput{border:0;outline:0;background:transparent;flex:1 1 auto;min-width:0;color:#0f172a;font-size:15px;padding:4px 0}
.sbf-locPage__searchInput::placeholder{color:#94a3b8}
.sbf-locPage__clear{font-size:13px;font-weight:800;color:#2563eb;text-decoration:none}
.sbf-locPage__section{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sbf-locPage__sectionHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.sbf-locPage__sectionTitle{margin:0;font-size:18px;line-height:1.2;font-weight:900;color:#0f172a}
.sbf-locPage__sectionCount{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:#f1f5f9;border:1px solid #e2e8f0;color:#0f172a;font-weight:800}
.sbf-locPage__section .sbf-gmail{border:1px solid #eef2f7;border-radius:18px;overflow:hidden;background:#fff}
.sbf-locPage__empty{background:#fff;border:1px dashed #cbd5e1;border-radius:20px;padding:32px 18px;text-align:center;color:#64748b;font-weight:700}
@media (max-width: 960px){
.sbf-locPage__heroInner{flex-direction:column}
.sbf-locPage__heroActions{justify-content:flex-start}
.sbf-locPage__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
.sbf-fe--locationDetail{padding-bottom:22px}
.sbf-locPage{gap:14px}
.sbf-locPage__hero{padding:18px}
.sbf-locPage__heroMain{flex-direction:column;gap:14px}
.sbf-locPage__thumb{width:76px;height:76px;border-radius:20px}
.sbf-locPage__stats{grid-template-columns:1fr}
.sbf-locPage__section{padding:14px}
.sbf-locPage__sectionHead{align-items:flex-start}
}
/* Single entity detail pages (canonical ?sbf_view=single routes for bins) */
.sbf-entityPage{
max-width:1200px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:22px;
}
.sbf-entityPage__crumbs{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
font-size:13px;
color:#64748b;
}
.sbf-entityPage__crumbBack,
.sbf-entityPage__metaLink{
color:#0f172a;
text-decoration:none;
}
.sbf-entityPage__crumbBack:hover,
.sbf-entityPage__metaLink:hover{
text-decoration:underline;
}
.sbf-entityPage__crumbs .is-current{
color:#0f172a;
font-weight:600;
}
.sbf-entityPage__hero{
background:#fff;
border:1px solid #e2e8f0;
border-radius:28px;
box-shadow:0 12px 34px rgba(15,23,42,.06);
padding:24px;
display:flex;
flex-direction:column;
gap:22px;
}
.sbf-entityPage__heroInner{
display:flex;
justify-content:space-between;
gap:24px;
align-items:flex-start;
}
.sbf-entityPage__heroMain{
display:flex;
gap:18px;
align-items:flex-start;
min-width:0;
flex:1 1 auto;
}
.sbf-entityPage__thumbWrap{flex:0 0 auto;}
.sbf-entityPage__thumb{
width:92px;
height:92px;
border-radius:24px;
background:linear-gradient(135deg,#eff6ff 0%,#e2e8f0 100%);
border:1px solid #dbeafe;
display:flex;
align-items:center;
justify-content:center;
background-size:cover;
background-position:center;
overflow:hidden;
}
.sbf-entityPage__thumb.has-image{border-color:#cbd5e1;}
.sbf-entityPage__thumbIcon{font-size:34px; line-height:1;}
.sbf-entityPage__heroText{
min-width:0;
display:flex;
flex-direction:column;
gap:10px;
}
.sbf-entityPage__eyebrowRow{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
}
.sbf-entityPage__eyebrow,
.sbf-entityPage__status{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
font-size:11px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
.sbf-entityPage__eyebrow{
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
}
.sbf-entityPage__status{
background:#ecfdf5;
border:1px solid #bbf7d0;
color:#166534;
}
.sbf-entityPage__title{
margin:0;
font-size:clamp(28px,4vw,40px);
line-height:1.05;
color:#0f172a;
}
.sbf-entityPage__meta{
display:flex;
flex-wrap:wrap;
gap:12px 18px;
align-items:center;
color:#475569;
font-size:14px;
}
.sbf-entityPage__metaPill{
display:inline-flex;
align-items:center;
min-height:36px;
padding:0 14px;
border-radius:999px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-weight:700;
color:#0f172a;
}
.sbf-entityPage__metaText strong{color:#0f172a;}
.sbf-entityPage__notes{
max-width:780px;
color:#475569;
background:#fff7ed;
border:1px solid #fed7aa;
border-radius:16px;
padding:14px 16px;
}
.sbf-entityPage__notes p:last-child{margin-bottom:0;}
.sbf-entityPage__heroActions{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.sbf-entityPage__actionBtn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:14px;
background:#fff;
border:1px solid #dbe1ea;
color:#0f172a;
font-weight:600;
text-decoration:none;
cursor:pointer;
}
.sbf-entityPage__actionBtn:hover{
background:#f8fafc;
border-color:#cbd5e1;
}
.sbf-entityPage__stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.sbf-entityPage__statCard{
text-decoration:none;
border:1px solid #e2e8f0;
background:#f8fafc;
border-radius:18px;
padding:16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
color:#0f172a;
}
.sbf-entityPage__statCard:hover{
transform:translateY(-1px);
box-shadow:0 12px 20px rgba(15,23,42,.06);
}
.sbf-entityPage__statLabel{
font-size:11px;
text-transform:uppercase;
letter-spacing:.08em;
color:#64748b;
font-weight:700;
}
.sbf-entityPage__statValue{
font-size:28px;
line-height:1;
}
.sbf-entityPage__statCard.is-tools{border-color:#bfdbfe;}
.sbf-entityPage__statCard.is-items{border-color:#ddd6fe;}
.sbf-entityPage__statCard.is-hardware{border-color:#fde68a;}
.sbf-entityPage__statCard.is-fluids{border-color:#99f6e4;}
.sbf-entityPage__search{
position:relative;
display:flex;
align-items:center;
background:#fff;
border:1px solid #e2e8f0;
border-radius:20px;
min-height:60px;
padding:0 16px 0 48px;
box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.sbf-entityPage__searchIcon{
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
color:#94a3b8;
font-size:20px;
}
.sbf-entityPage__searchInput{
flex:1 1 auto;
border:0;
background:transparent;
min-height:58px;
font-size:15px;
color:#0f172a;
}
.sbf-entityPage__searchInput:focus{outline:none;}
.sbf-entityPage__clear{
color:#475569;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.sbf-entityPage__sections{
display:flex;
flex-direction:column;
gap:20px;
}
.sbf-entityPage__section{
background:#fff;
border:1px solid #e2e8f0;
border-radius:24px;
padding:20px;
box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.sbf-entityPage__sectionHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
.sbf-entityPage__sectionTitle{
margin:0;
font-size:20px;
color:#0f172a;
}
.sbf-entityPage__sectionCount{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:34px;
height:34px;
padding:0 10px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-weight:700;
}
.sbf-entityPage__empty{
background:#fff;
border:1px dashed #cbd5e1;
border-radius:24px;
padding:34px 22px;
text-align:center;
color:#64748b;
}
@media (max-width: 980px){
.sbf-entityPage__heroInner{
flex-direction:column;
}
.sbf-entityPage__heroActions{
justify-content:flex-start;
}
.sbf-entityPage__stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media (max-width: 640px){
.sbf-entityPage__hero{
padding:18px;
border-radius:22px;
}
.sbf-entityPage__heroMain{
flex-direction:column;
}
.sbf-entityPage__thumb{
width:78px;
height:78px;
border-radius:20px;
}
.sbf-entityPage__stats{
grid-template-columns:1fr;
}
.sbf-entityPage__search{
padding-right:12px;
}
.sbf-entityPage__section{
padding:16px;
border-radius:20px;
}
}
/* Canonical single-detail / retired legacy view helpers */
.sbf-entityRetired{max-width:780px;margin:32px auto;padding:28px;border:1px solid rgba(15,23,42,.08);border-radius:24px;background:#fff;box-shadow:0 12px 34px rgba(15,23,42,.08)}
.sbf-entityRetired__eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin-bottom:8px}
.sbf-entityRetired__title{margin:0 0 10px;font-size:clamp(28px,4vw,42px);line-height:1.05;color:#0f172a}
.sbf-entityRetired__text{margin:0;color:#475569;font-size:15px;line-height:1.7}
.sbf-entityRetired__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.sbf-entityRetired__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:#0f172a;color:#fff;text-decoration:none;font-weight:700}
.sbf-entityRetired__btn.is-secondary{background:#eef2f7;color:#0f172a}