/* ============================================================
   OneBiz ERP — Business Management Console Styles
   Completely separate visual identity from the POS application.
   Dark, enterprise-grade management console.
   ============================================================ */

:root {
  --erp-bg: #0f172a;
  --erp-surface: #1e293b;
  --erp-surface-alt: #273549;
  --erp-border: #334155;
  --erp-text: #e2e8f0;
  --erp-text-muted: #94a3b8;
  --erp-sidebar: #0b1221;
  --erp-topbar: #0f172a;
  --erp-primary: #3b82f6;
  --erp-primary-light: #1e3a8a;
  --erp-success: #10b981;
  --erp-success-bg: rgba(16,185,129,0.12);
  --erp-warning: #f59e0b;
  --erp-warning-bg: rgba(245,158,11,0.12);
  --erp-danger: #ef4444;
  --erp-danger-bg: rgba(239,68,68,0.12);
  --erp-info: #06b6d4;
  --erp-info-bg: rgba(6,182,212,0.12);
  --erp-purple: #8b5cf6;
  --erp-purple-bg: rgba(139,92,246,0.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100vh; width:100%; font-family:'Segoe UI', system-ui, sans-serif; background:var(--erp-bg); color:var(--erp-text); }
body.erp-console { display:flex; flex-direction:column; overflow:hidden; }

/* ── Login Screen ───────────────────────────────────────── */
.erp-login {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0b1221 100%);
}
.erp-login-card {
  background: var(--erp-surface); padding:2.5rem; border-radius:1rem; width:100%; max-width:420px;
  border:1px solid var(--erp-border); box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.erp-login-brand { text-align:center; margin-bottom:2rem; }
.erp-login-brand i { font-size:3rem; color:var(--erp-primary); display:block; margin-bottom:0.5rem; }
.erp-login-brand h1 { font-size:1.5rem; font-weight:700; color:#fff; margin-bottom:0.25rem; }
.erp-login-brand p { font-size:0.85rem; color:var(--erp-text-muted); }
.erp-login-card .form-label { color:var(--erp-text-muted); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
.erp-login-card .form-control {
  background:var(--erp-bg); border:1px solid var(--erp-border); color:var(--erp-text); border-radius:0.5rem;
}
.erp-login-card .form-control:focus { border-color:var(--erp-primary); box-shadow:0 0 0 0.2rem rgba(59,130,246,0.25); }
.erp-login-card .btn-primary { background:var(--erp-primary); border:none; font-weight:600; border-radius:0.5rem; padding:0.75rem; }

/* ── Topbar ──────────────────────────────────────────────── */
.erp-topbar {
  position:fixed; top:0; left:240px; right:0; height:56px; background:var(--erp-topbar);
  border-bottom:1px solid var(--erp-border); display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem; z-index:100; transition:left 0.3s;
}
body.sidebar-collapsed .erp-topbar { left:0; }
.erp-topbar-left { display:flex; align-items:center; gap:1rem; }
.erp-sidebar-toggle {
  background:none; border:none; color:var(--erp-text-muted); font-size:1.25rem; cursor:pointer;
  padding:0.25rem 0.5rem; border-radius:0.375rem; transition:color 0.2s;
}
.erp-sidebar-toggle:hover { color:var(--erp-text); background:var(--erp-surface); }
.erp-brand { font-weight:700; font-size:1rem; color:var(--erp-primary); }
.erp-breadcrumb { font-size:0.85rem; color:var(--erp-text-muted); margin-left:0.5rem; }
.erp-breadcrumb::before { content:' › '; }
.erp-topbar-right { display:flex; align-items:center; gap:0.75rem; }
.erp-branch-switcher .form-select {
  background:var(--erp-surface); border:1px solid var(--erp-border); color:var(--erp-text);
  font-size:0.8rem; width:180px;
}
.erp-user { font-size:0.85rem; color:var(--erp-text-muted); }
.erp-btn-icon {
  background:none; border:none; color:var(--erp-text-muted); font-size:1.1rem; cursor:pointer;
  padding:0.25rem 0.5rem; border-radius:0.375rem; transition:color 0.2s;
}
.erp-btn-icon:hover { color:var(--erp-danger); }

/* ── Sidebar ──────────────────────────────────────────────── */
.erp-sidebar {
  position:fixed; top:0; left:0; width:240px; height:100vh; background:var(--erp-sidebar);
  border-right:1px solid var(--erp-border); overflow-y:auto; z-index:200; transition:transform 0.3s;
}
body.sidebar-collapsed .erp-sidebar { transform:translateX(-240px); }
.erp-nav { padding:1rem 0; }
.erp-nav-section { margin-bottom:1.5rem; }
.erp-nav-heading {
  padding:0.75rem 1.25rem 0.5rem; font-size:0.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--erp-text-muted);
}
.erp-nav-link {
  display:flex; align-items:center; gap:0.75rem; padding:0.6rem 1.25rem; color:var(--erp-text-muted);
  text-decoration:none; font-size:0.875rem; border-left:3px solid transparent; transition:all 0.15s;
}
.erp-nav-link:hover { background:var(--erp-surface); color:var(--erp-text); }
.erp-nav-link.active { background:var(--erp-surface); color:var(--erp-primary); border-left-color:var(--erp-primary); font-weight:600; }
.erp-nav-link i { font-size:1.1rem; width:20px; text-align:center; }

/* ── Main Content ─────────────────────────────────────────── */
.erp-content {
  margin-left:240px; margin-top:56px; padding:1.5rem; min-height:calc(100vh - 56px);
  overflow-y:auto; transition:margin-left 0.3s;
}
body.sidebar-collapsed .erp-content { margin-left:0; }
.erp-page { animation:fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── KPI Cards ────────────────────────────────────────────── */
.erp-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem; margin-bottom:1.5rem; }
.erp-kpi {
  background:var(--erp-surface); border:1px solid var(--erp-border); border-radius:0.75rem; padding:1.25rem;
  display:flex; gap:1rem; align-items:flex-start; transition:transform 0.15s, box-shadow 0.15s;
}
.erp-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.erp-kpi-icon {
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; flex-shrink:0;
}
.erp-kpi.primary .erp-kpi-icon { background:var(--erp-primary-light); color:var(--erp-primary); }
.erp-kpi.success .erp-kpi-icon { background:var(--erp-success-bg); color:var(--erp-success); }
.erp-kpi.warning .erp-kpi-icon { background:var(--erp-warning-bg); color:var(--erp-warning); }
.erp-kpi.danger .erp-kpi-icon { background:var(--erp-danger-bg); color:var(--erp-danger); }
.erp-kpi.info .erp-kpi-icon { background:var(--erp-info-bg); color:var(--erp-info); }
.erp-kpi.purple .erp-kpi-icon { background:var(--erp-purple-bg); color:var(--erp-purple); }
.erp-kpi-body { flex:1; min-width:0; }
.erp-kpi-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--erp-text-muted); font-weight:600; margin-bottom:0.25rem; }
.erp-kpi-value { font-size:1.4rem; font-weight:700; color:var(--erp-text); }
.erp-kpi-sub { font-size:0.75rem; color:var(--erp-text-muted); margin-top:0.25rem; }

/* ── Cards ────────────────────────────────────────────────── */
.erp-card {
  background:var(--erp-surface); border:1px solid var(--erp-border); border-radius:0.75rem;
  margin-bottom:1.25rem; overflow:hidden;
}
.erp-card-header {
  padding:1rem 1.25rem; border-bottom:1px solid var(--erp-border); font-weight:600; font-size:0.9rem;
  display:flex; justify-content:space-between; align-items:center;
}
.erp-card-body { padding:1.25rem; }
.erp-card-body.p-0 { padding:0; }

/* ── Tables ───────────────────────────────────────────────── */
.erp-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.erp-table th {
  text-align:left; padding:0.65rem 1rem; background:var(--erp-bg); color:var(--erp-text-muted);
  font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; font-weight:700; border-bottom:1px solid var(--erp-border);
}
.erp-table td { padding:0.65rem 1rem; border-bottom:1px solid var(--erp-border); color:var(--erp-text); }
.erp-table tbody tr:hover { background:var(--erp-surface-alt); }
.erp-table .text-end { text-align:right; }

/* ── Badges ───────────────────────────────────────────────── */
.erp-badge {
  display:inline-block; padding:0.2em 0.6em; border-radius:0.375rem; font-size:0.7rem; font-weight:600;
}
.erp-badge.success { background:var(--erp-success-bg); color:var(--erp-success); }
.erp-badge.warning { background:var(--erp-warning-bg); color:var(--erp-warning); }
.erp-badge.danger { background:var(--erp-danger-bg); color:var(--erp-danger); }
.erp-badge.info { background:var(--erp-info-bg); color:var(--erp-info); }
.erp-badge.primary { background:var(--erp-primary-light); color:var(--erp-primary); }

/* ── Buttons ──────────────────────────────────────────────── */
.erp-btn {
  display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border-radius:0.5rem;
  font-size:0.85rem; font-weight:600; cursor:pointer; border:none; transition:all 0.15s;
}
.erp-btn.primary { background:var(--erp-primary); color:#fff; }
.erp-btn.primary:hover { background:#2563eb; }
.erp-btn.success { background:var(--erp-success); color:#fff; }
.erp-btn.success:hover { background:#059669; }
.erp-btn.danger { background:transparent; color:var(--erp-danger); border:1px solid var(--erp-danger); }
.erp-btn.danger:hover { background:var(--erp-danger-bg); }
.erp-btn.sm { padding:0.35rem 0.75rem; font-size:0.78rem; }
.erp-btn-icon-sm {
  background:none; border:1px solid var(--erp-border); color:var(--erp-text-muted); cursor:pointer;
  padding:0.35rem; border-radius:0.375rem; font-size:0.85rem; transition:all 0.15s;
}
.erp-btn-icon-sm:hover { color:var(--erp-text); border-color:var(--erp-text-muted); }

/* ── Section Header ───────────────────────────────────────── */
.erp-section-title {
  font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--erp-text-muted);
  font-weight:700; margin-bottom:0.75rem; padding-bottom:0.5rem; border-bottom:1px solid var(--erp-border);
}

/* ── Form Controls ────────────────────────────────────────── */
.erp-content .form-control, .erp-content .form-select {
  background:var(--erp-bg); border:1px solid var(--erp-border); color:var(--erp-text);
  border-radius:0.5rem; font-size:0.85rem;
}
.erp-content .form-control:focus, .erp-content .form-select:focus {
  border-color:var(--erp-primary); box-shadow:0 0 0 0.15rem rgba(59,130,246,0.2);
}
.erp-content .form-label { color:var(--erp-text-muted); font-size:0.8rem; font-weight:600; }

/* ── Branch Admin Card ────────────────────────────────────── */
.erp-branch-card {
  background:var(--erp-surface); border:1px solid var(--erp-border); border-radius:0.75rem; padding:1.25rem;
  border-left:4px solid var(--erp-primary); transition:transform 0.15s;
}
.erp-branch-card:hover { transform:translateY(-2px); }
.erp-branch-card.hq { border-left-color:var(--erp-warning); }

/* ── Supplier Mini Cards ──────────────────────────────────── */
.erp-supplier-card {
  background:var(--erp-surface); border:1px solid var(--erp-border); border-radius:0.75rem; padding:1rem;
  transition:transform 0.15s;
}
.erp-supplier-card:hover { transform:translateY(-1px); }

/* ── Dark theme overrides for Bootstrap components ────────── */
.modal-content { background:var(--erp-surface); border:1px solid var(--erp-border); color:var(--erp-text); }
.modal-header { border-bottom:1px solid var(--erp-border); }
.modal-footer { border-top:1px solid var(--erp-border); }
.table { color:var(--erp-text); }
.alert { background:var(--erp-surface); border:1px solid var(--erp-border); color:var(--erp-text); border-radius:0.5rem; }
.text-muted { color:var(--erp-text-muted) !important; }
canvas { max-width:100%; }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:768px) {
  .erp-sidebar { transform:translateX(-240px); }
  .erp-sidebar.mobile-open { transform:translateX(0); }
  .erp-content { margin-left:0; }
  .erp-topbar { left:0; }
  .erp-kpi-grid { grid-template-columns:1fr; }
}