/* 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)}

.sbf-home,.sbf-fe{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--sbf-text)}

/* Home */
.sbf-home{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}

/* 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}

.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:950;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:950;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:950;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:950;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:950;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:950;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:18px;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}
.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:pointer;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)}

/* 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}

/* 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:#dc2626margin-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 don't get edit/order UI in the inline panel */
.sbf-inline[data-kind="location"] .sbf-inline__headRight,
.sbf-inline[data-kind="location"] .sbf-inline__addPhotos{display:none}

.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}

/* 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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') 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:10px;}
.sbf-inline__frow{display:flex;flex-direction:column;gap:6px;}
.sbf-inline__frow label{font-weight:600;opacity:.75;font-size:12px;}
.sbf-inline__frow input,.sbf-inline__frow textarea{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px 12px;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}
.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)}
@keyframes sbfSpin{to{transform:rotate(360deg)}}

.sbf-home__stats a.sbf-stat{text-decoration:none;color:inherit}
.sbf-home__stats a.sbf-stat:hover{box-shadow:var(--sbf-shadow)}

/* --- Open card: Order button + close X (v0.0.51) --- */
.sbf-inline__footer{display:flex;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:18px;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:18px; }
@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:950; 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__panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:99999;background:#fff;border:1px solid #d0d7de;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.12);padding:10px;}
.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;}
@media (max-width: 600px){
  .sbf-ss__panel{position:fixed;left:14px;right:14px;top:14px;bottom:14px;max-height:none;overflow:hidden;}
  .sbf-ss__list{max-height:calc(100% - 60px);}
}