/* ============================================================================
   STORE / BnB SHELL — top bar. The STANDARD for every shop + Business-in-a-Box.
   TWO ROWS:
     row 1 (.snav__shop)  = shop-only actions (search, wishlist, cart, account,
                            back office, theme) as icons, right-aligned.
     row 2 (.snav__main)  = the appzoola-new HOME PAGE menu (the golden standard):
                            logo left, then Home | Solutions | Custom Software |
                            Pricing | Contact | Dashboard (signed in) pushed right,
                            then Sign in/Sign out, then the Start free trial pill.
   Bottom-row values are copied from the home nav so it is visually identical.
   SINGLE SOURCE OF TRUTH: this row lives in design.platform_stylesheet
   (name='store-shell'); there is NO .css file anywhere.
   ============================================================================ */
.snav{position:sticky;top:0;z-index:100;background:rgba(11,14,20,.86);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.snav__inner{max-width:none;margin:0;padding:0 clamp(24px,3.5vw,56px)}

/* ---- ROW 1 : shop actions ---- */
.snav__shop{display:flex;align-items:center;justify-content:flex-end;gap:1.25rem;height:38px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.snav__shop a{position:relative;display:inline-flex;align-items:center;color:rgba(255,255,255,.66);
  font-size:.98rem;line-height:1;cursor:pointer;transition:color .2s}
.snav__shop a:hover{color:#fff}
.snav__badge{position:absolute;top:-7px;right:-10px;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:var(--blue,#2b8fff);color:#fff;font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.snav__toggle{color:rgba(255,255,255,.66)}

/* ---- ROW 2 : the golden-standard home menu ---- */
.snav__main{display:flex;align-items:center;gap:2rem;height:58px}
.snav__logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.snav__logo img{height:34px;width:auto;display:block}
/* Brand renders BOTH a light and a dark logo image; show only the one for the active theme
   (mirrors the old axnav swap) so the mark never doubles up. */
.snav__logo .logo-dark{display:none}
.snav__logo .logo-light{display:block}
[data-theme="dark"] .snav__logo .logo-light{display:none}
[data-theme="dark"] .snav__logo .logo-dark{display:block}
.snav__links{display:flex;align-items:center;gap:1.7rem;margin-left:auto;
  font-size:.86rem;color:rgba(255,255,255,.72)}
.snav__links a{color:inherit;cursor:pointer;white-space:nowrap;transition:color .2s;text-decoration:none}
.snav__links a:hover{color:#fff}
.snav__links a.is-current{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:8px;text-decoration-color:var(--blue,#2b8fff)}
.snav__signin{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.82);cursor:pointer;
  white-space:nowrap;text-decoration:none;transition:color .2s}
.snav__signin:hover{color:#fff}
.snav__cta{background:var(--blue,#2b8fff);color:#fff;padding:.45rem 1.1rem;border-radius:980px;
  font-size:.84rem;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background .2s;flex:0 0 auto}
.snav__cta:hover{background:var(--blue-hover,#1a6fd0)}

@media(max-width:820px){
  .snav__links{display:none}
  .snav__main{height:52px}
}

/* --- BNB GRID (database-served) --- */
/* The one grid (AG Grid Enterprise), used by every list in every module.
   It lives here, in the database, because all styling does. */
.bnb-grid{width:100%}
.bnb-grid .ag-root-wrapper{border:none;background:transparent}
.bnb-grid .ag-header{border-bottom:1px solid var(--line,rgba(128,128,128,.25))}
.bnb-grid .ag-header-cell-text{font-weight:600;letter-spacing:.01em}
.bnb-grid .ag-row{border-bottom:1px solid var(--line,rgba(128,128,128,.14))}
.bnb-grid .ag-cell{display:flex;align-items:center}
.bnb-grid .ag-right-aligned-cell{justify-content:flex-end}
.bnb-grid .ag-header-cell.ag-right-aligned-header .ag-header-cell-label{justify-content:flex-end}
.bnb-grid .grid-strong{font-weight:600}
.bnb-grid .muted{color:var(--muted,rgba(128,128,128,.85))}
.bnb-grid-empty{color:var(--muted,rgba(128,128,128,.85));font-size:.9rem}

/* Action buttons sit at the end of the row and are ALWAYS rendered, so the
   column never changes width and nothing jumps about between rows. */
.bnb-grid .grid-actions{justify-content:flex-end}
.bnb-grid .grid-actions-row{display:flex;align-items:center;gap:8px;justify-content:flex-end;width:100%}
.bnb-grid .grid-actions-row .btn{padding:.3rem .7rem;font-size:.82rem;line-height:1.4}
.bnb-grid .btn.danger{color:var(--red,#e5484d)}

/* Icon-and-label spacing: an icon next to words ALWAYS has a visible gap.
   Done with layout, not margins, so an icon-only button gets no stray space. */
.bnb-grid .btn{display:inline-flex;align-items:center;gap:8px}

.bnb-grid .grid-sub{font-size:12px}
.bnb-grid .nowrap{white-space:nowrap}
.bnb-grid .btn.icon-btn{padding:.3rem .6rem}
.bnb-grid .btn[disabled]{opacity:.4;cursor:default}

/* A cell may hold two lines (a name with something under it). Keep it inside
   the row and let long values shorten with an ellipsis rather than spill. */
.bnb-grid .ag-cell{overflow:hidden}
.bnb-grid .ag-cell > div{min-width:0;max-width:100%}
.bnb-grid .ag-cell strong,.bnb-grid .grid-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.bnb-grid .grid-sub{font-size:12px}