/* ============================================================
   Universal Inventory ERP — style.css v2
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root, html[data-theme="light"] {
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #f8f9fc;
  --text: #1c2434; --text-muted: #64748b; --border: #e4e9f1;
  --primary: #3b6ef6; --primary-hover: #2c5ce0; --primary-soft: #eaf0ff;
  --sidebar-bg: #0f172a; --sidebar-text: #94a3b8; --sidebar-active: #3b6ef6;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
}
html[data-theme="dark"] {
  --bg: #0b1220; --surface: #151e30; --surface-2: #1b2640;
  --text: #e6ecf7; --text-muted: #8fa0bd; --border: #263350;
  --primary: #5b86ff; --primary-hover: #79a;  --primary-soft: #1d2a4a;
  --sidebar-bg: #0a101e; --sidebar-text: #8b97b0; --sidebar-active: #5b86ff;
  --shadow: 0 1px 3px rgba(0,0,0,.45);
}

* { font-family: 'Inter', system-ui, sans-serif; }
body { background: var(--bg); color: var(--text); font-size: .92rem; }
a { text-decoration: none; color: var(--primary); }
a:hover { color: var(--primary-hover); }

/* Bootstrap theme bridging */
.card,.dropdown-menu,.modal-content,.form-control,.form-select,.input-group-text,.list-group-item,.accordion-item,.accordion-button {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.accordion-button:not(.collapsed){ background: var(--primary-soft); color: var(--primary); box-shadow:none; }
.form-control::placeholder { color: var(--text-muted); opacity:.8; }
.form-control:focus,.form-select:focus { background: var(--surface); color: var(--text); border-color: var(--primary); box-shadow: 0 0 0 .18rem rgba(91,134,255,.15); }
.form-label { font-weight: 600; font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .35rem; }
.table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); border-color: var(--border); margin-bottom: 0; }
.table thead th { background: var(--surface-2); color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; padding: .7rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tbody td { padding: .68rem 1rem; vertical-align: middle; border-color: var(--border); }
.table-hover tbody tr:hover { background: var(--surface-2); --bs-table-accent-bg: transparent; color: var(--text); }
.text-secondary { color: var(--text-muted) !important; }
hr,.dropdown-divider,.border-bottom,.border-top { border-color: var(--border) !important; }
.dropdown-item { color: var(--text); font-size:.88rem; }
.dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.btn { border-radius: 9px; font-weight: 500; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.modal-header,.modal-footer{ border-color: var(--border); }
.pagination .page-link{ background: var(--surface); border-color: var(--border); color: var(--text); }
.pagination .active .page-link{ background: var(--primary); border-color: var(--primary); }
.badge-status{ font-size:.66rem; letter-spacing:.04em; font-weight:600; padding:.38em .65em; }
.breadcrumb{ font-size:.8rem; margin-bottom:.2rem; }
.breadcrumb-item.active{ color: var(--text-muted); }
.breadcrumb-item+.breadcrumb-item::before{ color: var(--text-muted); }

/* ================= PUBLIC SITE ================= */
.public-body { display:flex; flex-direction:column; min-height:100vh; }
.public-navbar { background: var(--surface); box-shadow: var(--shadow); padding:.8rem 0; }
.public-navbar .nav-link { color: var(--text); font-weight: 500; padding:.5rem .9rem !important; border-radius:8px; }
.public-navbar .nav-link.active,.public-navbar .nav-link:hover { color: var(--primary); background: var(--primary-soft); }
.brand-icon { width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#3b6ef6,#7a3ff2);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem; }
.hero { background:linear-gradient(135deg,#0f172a 0%,#1e2c54 55%,#2b4480 100%); color:#fff; padding:96px 0; position:relative; overflow:hidden; }
.hero::after{ content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(91,134,255,.25),transparent 70%);top:-150px;right:-100px; }
.hero h1 { font-weight:800; letter-spacing:-.025em; }
.hero .lead { color:#b9c6e2; font-size:1.08rem; }
.hero-badge { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#cdd9f1; backdrop-filter:blur(4px); }
.feature-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.6rem; height:100%; transition:transform .15s, box-shadow .15s; }
.feature-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(15,23,42,.10); border-color:var(--primary); }
.feature-icon { width:50px;height:50px;border-radius:13px;background:var(--primary-soft);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:1rem; }
.section-title { font-weight:800; letter-spacing:-.02em; }
.public-footer { background:#0f172a; color:#b9c6e2; }
.public-footer h5,.public-footer h6{ color:#fff; }
.footer-links a{ color:#94a3b8; display:inline-block; padding:3px 0; } .footer-links a:hover{ color:#fff; }
.footer-social{ color:#94a3b8; } .footer-social:hover{ color:#fff; }
.industry-badge{ background:rgba(255,255,255,.08); color:#cdd9f1; font-weight:500; }
.pricing-card{ border:1.5px solid var(--border); border-radius:18px; background:var(--surface); transition:box-shadow .15s; }
.pricing-card:hover{ box-shadow:0 14px 34px rgba(15,23,42,.10); }
.pricing-card.featured{ border-color:var(--primary); border-width:2px; position:relative; box-shadow:0 14px 38px rgba(59,110,246,.16); }
.pricing-card .price{ font-size:2.8rem; font-weight:800; letter-spacing:-.03em; }
.step-number{ width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#3b6ef6,#7a3ff2);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem; }

/* ================= AUTH ================= */
.auth-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px; }
.auth-card{ max-width:440px; width:100%; border-radius:18px; box-shadow:0 14px 50px rgba(15,23,42,.12); }
.auth-card.wide{ max-width:580px; }

/* ================= APP LAYOUT ================= */
.app-wrapper{ display:flex; min-height:100vh; }
.app-sidebar{ width:258px;min-width:258px;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:1030;transition:margin-left .25s; }
.app-sidebar .sidebar-brand{ height:62px;color:#fff;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar-nav{ flex:1;overflow-y:auto;padding:10px 12px 20px; }
.sidebar-nav::-webkit-scrollbar{ width:5px; } .sidebar-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12);border-radius:3px; }
.nav-label{ font-size:.64rem;letter-spacing:.14em;color:#56627c;padding:18px 12px 6px;font-weight:700; }
.sidebar-nav .nav-link{ color:var(--sidebar-text);display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;font-size:.875rem;margin-bottom:2px;font-weight:500; }
.sidebar-nav .nav-link i:first-child{ font-size:1.05rem;width:20px;text-align:center; }
.sidebar-nav .nav-link:hover{ color:#fff;background:rgba(255,255,255,.07); }
.sidebar-nav .nav-link.active{ color:#fff;background:var(--sidebar-active);box-shadow:0 4px 12px rgba(59,110,246,.35); }
.sidebar-nav .nav-link .arrow{ transition:transform .2s;font-size:.68rem; }
.sidebar-nav .nav-link:not(.collapsed) .arrow{ transform:rotate(180deg); }
.submenu{ list-style:none;padding-left:30px;margin:2px 0 6px; }
.submenu a{ display:block;color:var(--sidebar-text);padding:6px 12px;font-size:.83rem;border-left:1.5px solid rgba(255,255,255,.12);margin-left:6px;font-weight:450; }
.submenu a:hover{ color:#fff; }
.submenu a.active{ color:#fff;border-left-color:var(--sidebar-active);font-weight:600; }
.sidebar-footer{ border-top:1px solid rgba(255,255,255,.07);color:#7d8aa5; }
.sidebar-nav .logout-link{ color:#f08a8a; }
.sidebar-nav .logout-link:hover{ color:#fff;background:rgba(216,64,63,.35); }
.app-sidebar.collapsed{ margin-left:-258px; }
.sidebar-backdrop{ display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1029; }
@media (max-width:991.98px){
  .app-sidebar{ position:fixed;left:0;margin-left:-258px; }
  .app-sidebar.mobile-open{ margin-left:0; }
  .app-sidebar.mobile-open + .sidebar-backdrop{ display:block; }
}

.app-main{ flex:1;display:flex;flex-direction:column;min-width:0; }
.app-topbar{ height:62px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1020; }
.btn-icon{ color:var(--text);border:none;background:transparent;border-radius:9px;padding:6px 10px; }
.btn-icon:hover{ background:var(--surface-2);color:var(--primary); }
.topbar-search{ max-width:480px; position:relative; }
.search-icon{ position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);z-index:5; }
.search-input{ padding-left:36px;background:var(--surface-2);border-radius:10px; }
.search-results{ position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(15,23,42,.18);max-height:420px;overflow-y:auto;z-index:1040;display:none; }
.search-results .group-label{ font-size:.68rem;letter-spacing:.08em;color:var(--text-muted);padding:8px 14px 4px;font-weight:700;text-transform:uppercase; }
.search-results a{ display:flex;justify-content:space-between;gap:10px;padding:8px 14px;color:var(--text);font-size:.86rem; }
.search-results a:hover{ background:var(--surface-2); }
.user-menu-btn{ color:var(--text);border:none; }
.avatar{ width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3b6ef6,#7a3ff2);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700; }
.notif-dropdown{ width:350px;border-radius:14px; }
.notif-list{ max-height:360px;overflow-y:auto; }
.notif-item{ padding:10px 14px;border-bottom:1px solid var(--border);font-size:.84rem; }
.notif-item.unread{ background:var(--primary-soft); }
.app-content{ flex:1; }
.app-footer{ border-top:1px solid var(--border);background:var(--surface); }

/* ---------- Page header ---------- */
.page-header{ display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:1.25rem; }
.page-header h4{ font-weight:800;letter-spacing:-.01em;margin:0; }

/* ---------- Panels & KPI ---------- */
.kpi-card{ background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.15rem 1.3rem;height:100%;box-shadow:var(--shadow); }
.kpi-card .kpi-icon{ width:46px;height:46px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;font-size:1.3rem; }
.kpi-value{ font-size:1.5rem;font-weight:800;letter-spacing:-.02em; }
.kpi-label{ font-size:.74rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600; }
.icon-blue{background:#eaf0ff;color:#3b6ef6}.icon-green{background:#e6f7ee;color:#19a35a}.icon-orange{background:#fff3e2;color:#e8870c}
.icon-red{background:#fdeaea;color:#d8403f}.icon-purple{background:#f1eaff;color:#7a3ff2}.icon-teal{background:#e2f7f6;color:#0e9c95}
html[data-theme="dark"] .icon-blue{background:#1d2a4a}html[data-theme="dark"] .icon-green{background:#11301f}
html[data-theme="dark"] .icon-orange{background:#3a2a10}html[data-theme="dark"] .icon-red{background:#3a1717}
html[data-theme="dark"] .icon-purple{background:#271744}html[data-theme="dark"] .icon-teal{background:#0f2e2c}

.card-panel{ background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden; }
.card-panel .panel-header{ padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.92rem; }
.card-panel .panel-body{ padding:18px; }
.card-panel .panel-footer{ padding:12px 18px;border-top:1px solid var(--border);background:var(--surface-2); }

.status-pill{ font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:20px; }
.pill-success{background:#e6f7ee;color:#19a35a}.pill-warning{background:#fff3e2;color:#e8870c}.pill-danger{background:#fdeaea;color:#d8403f}

/* ---------- Filter bar ---------- */
.filter-bar{ background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.85rem 1rem;margin-bottom:1rem;box-shadow:var(--shadow); }
.filter-bar .form-control,.filter-bar .form-select{ font-size:.86rem; }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center;padding:3.5rem 1rem;color:var(--text-muted); }
.empty-state i{ font-size:3rem;opacity:.35;display:block;margin-bottom:.8rem; }

/* ---------- Line item editor ---------- */
.line-items th{ font-size:.7rem; }
.line-items .form-control,.line-items .form-select{ font-size:.85rem;padding:.32rem .55rem; }
.totals-box{ background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem; }
.totals-box .row+.row{ margin-top:.4rem; }

@media print {
  .app-sidebar,.app-topbar,.app-footer,.no-print{ display:none !important; }
  .app-content{ padding:0 !important; }
  body{ background:#fff; }
}

/* ================= AUTH v2 — split screen ================= */
.auth-split { min-height:100vh; display:flex; background:var(--bg); }
.auth-side { width:46%; min-width:46%; color:#fff; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:52px 56px;
  background: radial-gradient(900px 460px at 85% -10%, rgba(91,134,255,.30), transparent 60%),
              radial-gradient(700px 420px at -10% 115%, rgba(122,63,242,.24), transparent 60%),
              linear-gradient(160deg, #0b1220 0%, #101a30 55%, #16223e 100%); }
.auth-side::before { content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image: radial-gradient(620px 420px at 45% 35%, #000 30%, transparent 80%); }
.auth-side > * { position:relative; }
.auth-side h2 { font-weight:800; letter-spacing:-.02em; }
.auth-side .sub { color:#b9c6e2; }
.auth-tick { display:flex; gap:15px; align-items:flex-start; }
.auth-tick + .auth-tick { margin-top:22px; }
.auth-tick .ic { width:42px; height:42px; min-width:42px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:#7da2ff; font-size:1.1rem; }
.auth-tick b { display:block; font-size:.95rem; }
.auth-tick small { color:#9fb3d9; line-height:1.5; }
.auth-quote { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13);
  border-radius:16px; padding:18px 20px; font-size:.9rem; color:#dbe4f5; }
.auth-quote .who { color:#8fa0bd; font-size:.78rem; }
.auth-mini-badges { display:flex; flex-wrap:wrap; gap:10px; }
.auth-mini-badges span { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:20px; padding:6px 14px; font-size:.76rem; color:#cdd9f1; }
.auth-main { flex:1; display:flex; align-items:center; justify-content:center;
  padding:40px 22px; overflow-y:auto; }
.auth-form { width:100%; max-width:430px; }
.auth-form.wide { max-width:560px; }
.auth-form h4 { font-weight:800; letter-spacing:-.01em; }
.auth-form .form-control, .auth-form .form-select { padding:.72rem .95rem; border-radius:12px; font-size:.94rem; }
.auth-form .input-group .form-control { border-radius:0 12px 12px 0; }
.auth-form .input-group .form-control:not(:last-child) { border-radius:0; }
.auth-form .input-group-text { border-radius:12px 0 0 12px; background:var(--surface-2); color:var(--text-muted); }
.auth-form .input-group .btn { border-radius:0 12px 12px 0; border-color:var(--border); color:var(--text-muted); }
.btn-auth { background:linear-gradient(135deg,#3b6ef6,#7a3ff2); border:0; border-radius:12px;
  padding:.85rem; font-weight:600; color:#fff; box-shadow:0 10px 26px rgba(59,110,246,.28);
  transition:filter .15s, transform .15s; }
.btn-auth:hover { filter:brightness(1.08); transform:translateY(-1px); color:#fff; }
.auth-topline { position:absolute; top:22px; right:28px; font-size:.85rem; z-index:5; }
.pw-meter { height:6px; border-radius:4px; background:var(--border); overflow:hidden; margin-top:8px; }
.pw-meter span { display:block; height:100%; width:0; border-radius:4px; transition:width .25s, background .25s; }
.pw-hint { font-size:.74rem; color:var(--text-muted); margin-top:5px; }
@media (max-width:991.98px) { .auth-side { display:none; } .auth-topline { right:18px; } }