/* === B2B PORTAL STYLES === */
/* Override main site top bar offset — B2B has no top bar */
.navbar-premium { top: 0 !important; }
.b2b-body { padding-top: 70px; }

/* DARK THEME (default) */
:root {
    --b2b-bg: #0a0a0a;
    --b2b-surface: #111;
    --b2b-border: #222;
    --b2b-text: #fff;
    --b2b-text-secondary: #ccc;
    --b2b-text-muted: #888;
    --b2b-img-bg: #080808;
    --b2b-input-bg: #1a1a1a;
    --b2b-overlay: rgba(0,0,0,0.9);
    --b2b-pill-bg: transparent;
    --b2b-pill-border: #333;
    --b2b-pill-color: #999;
    --b2b-sidebar-bg: #111;
    --b2b-sidebar-link: #aaa;
    --b2b-card-bg: #111;
    --b2b-card-border: #222;
    --b2b-modal-bg: #111;
    --b2b-btn-border: #333;
    --b2b-table-bg: #1a1a1a;
}

/* LIGHT THEME */
body.b2b-light {
    --b2b-bg: #f5f5f5;
    --b2b-surface: #fff;
    --b2b-border: #e0e0e0;
    --b2b-text: #111;
    --b2b-text-secondary: #333;
    --b2b-text-muted: #777;
    --b2b-img-bg: #eee;
    --b2b-input-bg: #fff;
    --b2b-overlay: rgba(0,0,0,0.7);
    --b2b-pill-bg: #fff;
    --b2b-pill-border: #ddd;
    --b2b-pill-color: #666;
    --b2b-sidebar-bg: #fff;
    --b2b-sidebar-link: #666;
    --b2b-card-bg: #fff;
    --b2b-card-border: #e0e0e0;
    --b2b-modal-bg: #fff;
    --b2b-btn-border: #ddd;
    --b2b-table-bg: #fff;
}

body.b2b-light .navbar-premium { background: #fff !important; border-bottom: 1px solid #e0e0e0; }
body.b2b-light .navbar-premium .nav-link { color: rgba(0,0,0,0.7) !important; }
body.b2b-light { --accent: #1E3A8A; --accent-rgb: 26,86,219; --accent-text: #fff; }
body.b2b-light .btn-premium-primary { background: var(--accent) !important; color: #fff !important; }
body.b2b-light .navbar-premium .nav-link:hover,
body.b2b-light .navbar-premium .nav-link.active { color: var(--accent) !important; }

/* Layout */
.b2b-body { background: var(--b2b-bg) !important; padding-top: 90px; }
.b2b-layout { display: flex; min-height: calc(100vh - 90px); position: relative; z-index: 0; }
.b2b-sidebar { width: 220px; background: var(--b2b-sidebar-bg); border-right: 1px solid var(--b2b-border); padding: 1.25rem; overflow-y: auto; flex-shrink: 0; font-size: 13px; }
.b2b-main { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; }
.b2b-sidebar a { display: block; padding: .4rem .6rem; border-radius: 6px; color: var(--b2b-sidebar-link); text-decoration: none; margin-bottom: 1px; }
.b2b-sidebar a:hover, .b2b-sidebar a.active { background: var(--accent); color: #000; font-weight: 600; }
.b2b-sidebar .section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--b2b-text-muted); margin: 1rem 0 .4rem; }

/* Theme toggle */
.theme-toggle { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-radius: 20px; border: 1px solid var(--b2b-border); cursor: pointer; font-size: 12px; color: var(--b2b-text-secondary); background: var(--b2b-surface); transition: all .2s; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle i { font-size: 14px; }

/* Color cards */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.color-card-premium { background: var(--b2b-card-bg); border: 1px solid var(--b2b-card-border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all .25s; }
.color-card-premium:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.15); border-color: var(--accent); }
body:not(.b2b-light) .color-card-premium:hover { box-shadow: 0 12px 30px rgba(0,0,0,0.4); }
.color-card-premium .img-wrap { aspect-ratio: 1; background: var(--b2b-img-bg); display: flex; align-items: center; justify-content: center; }
.color-card-premium .img-wrap img { width: 100%; height: 100%; object-fit: contain; }
.cc-body { padding: .85rem; }
.cc-code { font-weight: 700; font-size: 14px;  color: var(--b2b-text); }
.cc-name { font-size: 11px; color: var(--b2b-text-secondary); margin-top: 2px; }
.cc-meta { font-size: 10px; color: var(--b2b-text-muted); margin-top: 6px; }
.cc-price { color: var(--accent); font-weight: 700; margin-top: 6px; font-size: 15px; font-family: 'Montserrat', sans-serif;font-weight:700; }

/* Filter pills */
.filter-pill { padding: .35rem .85rem; border-radius: 20px; font-size: 12px; cursor: pointer; border: 1px solid var(--b2b-pill-border); background: var(--b2b-pill-bg); color: var(--b2b-pill-color); transition: all .2s; display: inline-block; }
.filter-pill:hover { border-color: var(--b2b-text-muted); color: var(--b2b-text-secondary); }
.filter-pill.active { border-color: var(--accent); color: var(--accent); }

/* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: var(--b2b-overlay); z-index: 9999; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-box { background: var(--b2b-modal-bg); border: 1px solid var(--b2b-border); border-radius: var(--radius); max-width: 800px; width: 95%; max-height: 90vh; overflow-y: auto; padding: 2rem; position: relative; }
.modal-close { position: absolute; top: .75rem; right: 1rem; background: none; border: none; color: var(--b2b-text-muted); font-size: 1.5rem; cursor: pointer; }
.size-btn { padding: .45rem 1rem; border: 1px solid var(--b2b-btn-border); border-radius: 6px; background: transparent; color: var(--b2b-text-secondary); cursor: pointer; font-size: 13px; margin: 2px; transition: all .2s; }
.size-btn:hover { border-color: var(--b2b-text-muted); color: var(--b2b-text); }
.size-btn.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600; }

/* Pack rows */
.pack-row { cursor: pointer; transition: background .15s; }
.pack-row:hover { background: rgba(212,175,55,0.08); }
.pack-row.selected { background: rgba(212,175,55,0.15); border-left: 3px solid var(--accent); }

/* Cart badge */
.cart-badge { background: var(--accent); color: #000; border-radius: 50%; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; margin-left: 4px; }

/* Light overrides for dark table */
body.b2b-light .table-dark { --bs-table-bg: var(--b2b-table-bg); --bs-table-color: var(--b2b-text); --bs-table-border-color: var(--b2b-border); }

body.b2b-light .b2b-sidebar a.active { color: #fff !important; }
body.b2b-light .size-btn.active { color: #fff !important; }
body.b2b-light .btn-premium-primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }