/* ============================================================================
   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.
   ============================================================================ */
/* THE TOP BAR FOLLOWS THE THEME. IT USED TO BE PAINTED DARK, ALWAYS.
   So on a light shop you got a dark bar sitting over white pages, with a logo nobody could
   read - one screen, two themes. David, 21 August 2026: "If its DARK then its dark
   throughout. IF ITS LIGHT then its LIGHT throughout. NOT A MIX."
   Every colour here now comes from the theme's own variables, so light and dark are one
   decision made in one place and this bar can never disagree with the page under it. */
.snav{position:sticky;top:0;z-index:100;background:var(--card);
  border-bottom:1px solid var(--line)}
.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 var(--line)}
.snav__shop a{position:relative;display:inline-flex;align-items:center;color:var(--text-mid);
  font-size:.98rem;line-height:1;cursor:pointer;transition:color .2s}
.snav__shop a:hover{color:var(--text)}
.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:var(--text-mid)}

/* ---- 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:var(--text-mid)}
.snav__links a{color:inherit;cursor:pointer;white-space:nowrap;transition:color .2s;text-decoration:none}
.snav__links a:hover{color:var(--text)}
.snav__links a.is-current{color:var(--text);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:var(--text);cursor:pointer;
  white-space:nowrap;text-decoration:none;transition:color .2s}
.snav__signin:hover{color:var(--text)}
.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}