/* =========================
   B2B Visual System (v20260223)
   Goals:
   - Better readability (contrast + spacing)
   - More rational layout (desktop sidebar, mobile bottom nav)
   - Calm, premium palette (deep background + soft surfaces)
   - Low-risk: pure CSS + small structural changes in B2BLayout
   ========================= */

:root{
  --b2b-bg: #0b1020;
  --b2b-surface: rgba(255,255,255,.06);
  --b2b-surface-2: rgba(255,255,255,.10);
  --b2b-border: rgba(255,255,255,.10);
  --b2b-text: rgba(255,255,255,.90);
  --b2b-muted: rgba(255,255,255,.65);
  --b2b-faint: rgba(255,255,255,.45);
  --b2b-accent: #6ea8ff;
  --b2b-accent-2: #a78bfa;
  --b2b-ok: #2dd4bf;
  --b2b-warn: #fbbf24;
  --b2b-bad: #fb7185;
  --b2b-shadow: 0 18px 50px rgba(0,0,0,.35);
  --b2b-radius: 18px;
  --b2b-radius-sm: 12px;
  --b2b-pad: 16px;
}

html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(110,168,255,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 10%, rgba(167,139,250,.14), transparent 55%),
    var(--b2b-bg);
  color: var(--b2b-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{color:inherit}

/* icon base */
.b2b-ic{display:inline-block;flex:none;opacity:.92}

/* ========= Shell layout ========= */
.b2b-shell{min-height:100vh;display:flex}
.b2b-content{min-width:0;flex:1;display:flex;flex-direction:column}

.b2b-sidebar{
  width: 260px;
  padding: 18px;
  border-right: 1px solid var(--b2b-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  height: 100vh;
  display: none;
}

@media (min-width: 1024px){
  .b2b-sidebar{display:flex;flex-direction:column;gap:14px}
  .b2b-topbar{display:none}
  .b2b-bottomnav{display:none}
}

@media (max-width: 1023px){
  .b2b-shell{display:block}
}

.b2b-brand{display:flex;align-items:center;gap:12px;padding:10px 10px}
.b2b-dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--b2b-accent),var(--b2b-accent-2));box-shadow:0 0 0 4px rgba(110,168,255,.10)}
.b2b-brand-title{font-weight:900;letter-spacing:.2px;line-height:1.05}
.b2b-brand-sub{font-size:12px;color:var(--b2b-muted);margin-top:2px}

.b2b-navlist{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.b2b-navitem{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--b2b-muted);
  border:1px solid transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}
.b2b-navitem:hover{background:rgba(255,255,255,.06);color:var(--b2b-text);transform:translateY(-1px)}
.b2b-navitem.is-active{background:rgba(110,168,255,.14);border-color:rgba(110,168,255,.22);color:var(--b2b-text)}
.b2b-navitem span{font-weight:700}

.b2b-sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding:10px}

/* ========= Mobile topbar ========= */
.b2b-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom: 1px solid var(--b2b-border);
  background: rgba(11,16,32,.70);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.b2b-topbar-left{display:flex;align-items:center;gap:10px}
.b2b-topbar-title{font-weight:900;letter-spacing:.2px}
.b2b-topbar-right{display:flex;align-items:center;gap:10px}

/* ========= Main ========= */
.b2b-main{padding:18px 14px 92px}
@media (min-width:1024px){.b2b-main{padding:22px 22px 22px}}

/* ========= Buttons ========= */
.b2b-logout,
.b2b-btn{
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}

.b2b-logout{
  background: rgba(255,255,255,.06);
  color: var(--b2b-text);
  border: 1px solid var(--b2b-border);
}
.b2b-logout:hover{background:rgba(255,255,255,.10);transform:translateY(-1px)}

.b2b-btn{
  background: linear-gradient(135deg, rgba(110,168,255,.24), rgba(167,139,250,.18));
  border: 1px solid rgba(110,168,255,.30);
  color: var(--b2b-text);
  font-weight: 900;
}
.b2b-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.b2b-btn:active{transform:translateY(0px);filter:brightness(.98)}

.b2b-btn--ghost{background: rgba(255,255,255,.06);border: 1px solid var(--b2b-border)}
.b2b-btn--danger{background: rgba(251,113,133,.14);border-color: rgba(251,113,133,.25)}

/* ========= Inputs ========= */
.b2b-input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--b2b-text);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.b2b-input::placeholder{color:rgba(255,255,255,.45)}
.b2b-input:focus{border-color: rgba(110,168,255,.40);box-shadow:0 0 0 4px rgba(110,168,255,.12)}

/* ========= Cards ========= */
.b2b-card{
  background: var(--b2b-surface);
  border: 1px solid var(--b2b-border);
  border-radius: var(--b2b-radius);
  padding: var(--b2b-pad);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
}
.b2b-card--tight{padding:12px}

.b2b-h1{font-size:18px;font-weight:900;letter-spacing:.1px;margin:0 0 10px}
.b2b-sub{color:var(--b2b-muted);font-size:13px}

/* ========= Mobile bottom nav ========= */
.b2b-bottomnav{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(11,16,32,.78);
  border: 1px solid var(--b2b-border);
  backdrop-filter: blur(12px);
  box-shadow: var(--b2b-shadow);
  z-index: 30;
}

.b2b-bottomitem{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  text-decoration:none;
  color: var(--b2b-muted);
  padding:8px 6px;
  border-radius: 16px;
  border: 1px solid transparent;
}
.b2b-bottomitem span{font-size:11px;font-weight:700}
.b2b-bottomitem.is-active{background:rgba(110,168,255,.14);border-color:rgba(110,168,255,.22);color:var(--b2b-text)}

/* ========= Tables ========= */
.b2b-table{width:100%;border-collapse:separate;border-spacing:0}
.b2b-table th{font-size:12px;color:var(--b2b-muted);text-align:left;padding:12px 10px;border-bottom:1px solid var(--b2b-border);position:sticky;top:0;background:rgba(11,16,32,.72);backdrop-filter:blur(10px);z-index:5}
.b2b-table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.06);vertical-align:middle}
.b2b-table tr:hover td{background:rgba(255,255,255,.04)}

/* ========= Small utilities ========= */
.b2b-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.b2b-spacer{flex:1}
.b2b-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--b2b-border);background:rgba(255,255,255,.05);color:var(--b2b-muted);font-size:12px;font-weight:700}

/* PATCH_B2B_BG_OVERRIDE */
html, body, #root {
  background: #2C2A7A !important;
}