/* ============================================================
   assets/css/main.css — OrderFlow ERP
   ============================================================ */

:root {
  --bg-base: #0a0e1a;
  --bg-card: #0f1628;
  --bg-sidebar: #080c18;
  --bg-glass: rgba(255,255,255,0.04);
  --accent: #3b82f6;
  --accent-glow: rgba(59,130,246,0.3);
  --accent2: #06b6d4;
  --accent3: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --border: rgba(255,255,255,0.08);
  --border-accent: rgba(59,130,246,0.3);
  --sidebar-w: 260px;
  --topbar-h: 64px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Montserrat',sans-serif; background:var(--bg-base); color:var(--text-primary); min-height:100vh; }

/* ── SIDEBAR ─────── */
.sidebar {
  position:fixed; left:0; top:0; bottom:0; width:var(--sidebar-w);
  background:var(--bg-sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:100; transition:.3s;
}
.sidebar-brand { padding:20px 20px 16px; border-bottom:1px solid var(--border); }
.brand-logo { display:flex; align-items:center; gap:10px; }
.brand-logo .icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--accent),var(--accent3)); display:flex; align-items:center; justify-content:center; font-size:16px; color:#fff; box-shadow:0 0 16px var(--accent-glow); }
.brand-logo h2 { font-size:18px; font-weight:800; letter-spacing:-.5px; }
.brand-logo h2 span { color:var(--accent); }
.brand-sub { font-size:9px; color:var(--text-muted); letter-spacing:1.5px; text-transform:uppercase; margin-top:2px; }
.sidebar-nav { flex:1; overflow-y:auto; padding:12px 0; }
.sidebar-nav::-webkit-scrollbar { width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.nav-section { padding:8px 16px 4px; font-size:9px; font-weight:700; letter-spacing:2px; color:var(--text-muted); text-transform:uppercase; }
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 16px; margin:2px 8px; border-radius:10px; cursor:pointer; transition:.2s; color:var(--text-secondary); font-size:13px; font-weight:500; text-decoration:none; position:relative; }
.nav-item:hover { background:var(--bg-glass); color:var(--text-primary); }
.nav-item.active { background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(139,92,246,.1)); color:var(--accent); border:1px solid rgba(59,130,246,.2); }
.nav-item.active::before { content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%); width:3px; height:60%; background:var(--accent); border-radius:2px; }
.nav-item i { width:18px; text-align:center; font-size:14px; }
.nav-badge { margin-left:auto; background:var(--warning); color:#000; font-size:10px; font-weight:700; padding:2px 6px; border-radius:20px; }
.sidebar-user { padding:16px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.user-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent3)); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.user-info { flex:1; min-width:0; }
.user-name { font-size:12px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { font-size:10px; color:var(--accent); font-weight:500; }
.logout-btn { color:var(--text-muted); cursor:pointer; font-size:14px; transition:.2s; text-decoration:none; }
.logout-btn:hover { color:var(--danger); }

/* ── TOPBAR ─────── */
.topbar { position:fixed; left:var(--sidebar-w); right:0; top:0; height:var(--topbar-h); background:rgba(10,14,26,.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; z-index:99; gap:16px; }
.topbar-title { font-size:18px; font-weight:700; flex:1; }
.topbar-search { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; padding:8px 14px; width:280px; }
.topbar-search input { background:none; border:none; outline:none; color:var(--text-primary); font-family:'Montserrat',sans-serif; font-size:13px; width:100%; }
.topbar-search input::placeholder { color:var(--text-muted); }
.topbar-search i { color:var(--text-muted); font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:8px; }
.topbar-btn { width:36px; height:36px; border-radius:10px; background:var(--bg-glass); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; color:var(--text-secondary); position:relative; text-decoration:none; }
.topbar-btn:hover { color:var(--text-primary); border-color:var(--accent); }
.notif-dot { position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--bg-base); }
.sidebar-toggle { background:none; border:none; color:var(--text-secondary); font-size:18px; cursor:pointer; padding:4px 8px; }

/* ── MAIN ─────── */
.main { margin-left:var(--sidebar-w); padding-top:var(--topbar-h); min-height:100vh; }

/* ── CARDS ─────── */
.glass-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:20px; transition:.2s; }
.glass-card:hover { border-color:rgba(59,130,246,.15); }

/* ── STAT CARDS ─────── */
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden; transition:.3s; }
.stat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:16px 16px 0 0; }
.stat-card.blue::before   { background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.stat-card.purple::before { background:linear-gradient(90deg,var(--accent3),#ec4899); }
.stat-card.green::before  { background:linear-gradient(90deg,var(--success),#34d399); }
.stat-card.orange::before { background:linear-gradient(90deg,var(--warning),#fb923c); }
.stat-card.red::before    { background:linear-gradient(90deg,var(--danger),#f87171); }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,.3); }
.stat-label { font-size:11px; font-weight:600; letter-spacing:.8px; color:var(--text-muted); text-transform:uppercase; }
.stat-value { font-size:32px; font-weight:800; letter-spacing:-1px; font-family:'JetBrains Mono',monospace; }
.stat-sub   { font-size:12px; color:var(--text-muted); }
.stat-icon  { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:40px; opacity:.08; }

/* ── SECTION HEADER ─────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title  { font-size:16px; font-weight:700; }
.section-sub    { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* ── TABLE ─────── */
.erp-table { width:100%; border-collapse:separate; border-spacing:0; }
.erp-table th { font-size:10px; font-weight:700; letter-spacing:1px; color:var(--text-muted); text-transform:uppercase; padding:12px 14px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
.erp-table td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.03); font-size:13px; vertical-align:middle; }
.erp-table tr:hover td { background:rgba(255,255,255,.02); }
.erp-table tr:last-child td { border-bottom:none; }

/* ── BADGES ─────── */
.badge-status { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; letter-spacing:.3px; }
.bs-pedido    { background:rgba(59,130,246,.15);  color:var(--accent);   border:1px solid rgba(59,130,246,.2); }
.bs-proceso   { background:rgba(245,158,11,.15);  color:var(--warning);  border:1px solid rgba(245,158,11,.2); }
.bs-entregado { background:rgba(16,185,129,.15);  color:var(--success);  border:1px solid rgba(16,185,129,.2); }
.bs-facturado { background:rgba(139,92,246,.15);  color:var(--accent3);  border:1px solid rgba(139,92,246,.2); }

/* ── BUTTONS ─────── */
.btn-erp { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:10px; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:.2s; border:none; letter-spacing:.3px; text-decoration:none; }
.btn-primary-erp { background:linear-gradient(135deg,var(--accent),#2563eb); color:#fff; box-shadow:0 4px 14px var(--accent-glow); }
.btn-primary-erp:hover { transform:translateY(-1px); box-shadow:0 6px 20px var(--accent-glow); color:#fff; }
.btn-outline-erp { background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-outline-erp:hover { border-color:var(--accent); color:var(--accent); }
.btn-success-erp { background:linear-gradient(135deg,var(--success),#059669); color:#fff; }
.btn-danger-erp { background:rgba(239,68,68,.15); color:var(--danger); border:1px solid rgba(239,68,68,.2); }
.btn-danger-erp:hover { background:rgba(239,68,68,.25); }
.btn-sm-erp { padding:6px 12px; font-size:11px; }
.btn-icon-erp { width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; font-size:13px; cursor:pointer; transition:.2s; border:1px solid var(--border); background:transparent; color:var(--text-muted); }
.btn-icon-erp:hover { color:var(--text-primary); border-color:var(--accent); background:rgba(59,130,246,.1); }
.btn-icon-erp.danger:hover { color:var(--danger); border-color:var(--danger); background:rgba(239,68,68,.1); }

/* ── FORMS ─────── */
.form-label-erp { font-size:11px; font-weight:600; letter-spacing:.8px; color:var(--text-secondary); text-transform:uppercase; display:block; margin-bottom:6px; }
.form-control-erp { width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text-primary); font-family:'Montserrat',sans-serif; font-size:13px; transition:.2s; outline:none; }
.form-control-erp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-control-erp option { background:var(--bg-card); color:var(--text-primary); }
textarea.form-control-erp { resize:vertical; }
.form-section-title { font-size:11px; font-weight:700; letter-spacing:1.5px; color:var(--accent); text-transform:uppercase; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid rgba(59,130,246,.2); display:flex; align-items:center; gap:8px; }

/* ── MODAL ─────── */
.modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal-box { background:var(--bg-card); border:1px solid var(--border-accent); border-radius:20px; width:100%; max-width:640px; max-height:90vh; overflow-y:auto; box-shadow:0 0 60px rgba(0,0,0,.5); animation:modalPop .3s cubic-bezier(.34,1.56,.64,1); }
.modal-box.modal-lg { max-width:900px; }
@keyframes modalPop { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
.modal-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--bg-card); z-index:1; }
.modal-header h3 { font-size:16px; font-weight:700; }
.modal-close { color:var(--text-muted); cursor:pointer; font-size:18px; transition:.2s; }
.modal-close:hover { color:var(--danger); transform:rotate(90deg); }
.modal-body   { padding:24px; }
.modal-footer { padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ── UPLOAD ZONE ─────── */
.upload-zone { border:2px dashed var(--border); border-radius:12px; padding:20px; text-align:center; cursor:pointer; transition:.2s; color:var(--text-muted); }
.upload-zone:hover { border-color:var(--accent); color:var(--accent); background:rgba(59,130,246,.05); }
.upload-zone i { font-size:24px; margin-bottom:6px; display:block; }
.upload-zone span { font-size:12px; }

/* ── ALERTS ─────── */
.alert-item { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:12px; margin-bottom:8px; }
.alert-item.warn   { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.2); }
.alert-item.danger { background:rgba(239,68,68,.08);  border:1px solid rgba(239,68,68,.2); }
.alert-item.info   { background:rgba(59,130,246,.08);  border:1px solid rgba(59,130,246,.2); }
.alert-icon { font-size:16px; margin-top:1px; }
.alert-item.warn   .alert-icon { color:var(--warning); }
.alert-item.danger .alert-icon { color:var(--danger); }
.alert-item.info   .alert-icon { color:var(--accent); }
.alert-text { flex:1; }
.alert-title { font-size:12px; font-weight:600; margin-bottom:2px; }
.alert-desc  { font-size:11px; color:var(--text-muted); }

/* ── FILTER BAR ─────── */
.filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-input { background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:8px; padding:8px 12px; color:var(--text-primary); font-family:'Montserrat',sans-serif; font-size:12px; outline:none; transition:.2s; }
.filter-input:focus { border-color:var(--accent); }
.filter-input option { background:var(--bg-card); color:var(--text-primary); }

/* ── NOTIFICATION PANEL ─────── */
.notif-panel { position:fixed; right:16px; top:var(--topbar-h); width:360px; background:var(--bg-card); border:1px solid var(--border-accent); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); z-index:150; padding:16px; display:none; }
.notif-panel.open { display:block; animation:slideDown .2s ease; }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ── SEARCH RESULTS ─────── */
.search-results { position:absolute; top:100%; left:0; right:0; background:var(--bg-card); border:1px solid var(--border-accent); border-radius:12px; margin-top:6px; max-height:300px; overflow-y:auto; box-shadow:0 20px 50px rgba(0,0,0,.5); z-index:200; display:none; }
.search-results.open { display:block; }
.search-result-item { padding:10px 14px; cursor:pointer; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); transition:.15s; }
.search-result-item:hover { background:rgba(255,255,255,.04); }
.search-result-item:last-child { border-bottom:none; }
.sr-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; }
.sr-icon.order  { background:rgba(59,130,246,.15); color:var(--accent); }
.sr-icon.client { background:rgba(16,185,129,.15); color:var(--success); }

/* ── DETAIL ROWS ─────── */
.detail-row { display:flex; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.detail-row:last-child { border-bottom:none; }
.detail-key { width:180px; font-size:12px; color:var(--text-muted); font-weight:600; flex-shrink:0; }
.detail-val { font-size:13px; color:var(--text-primary); font-weight:500; }

/* ── TIMELINE ─────── */
.timeline { position:relative; padding-left:24px; }
.timeline::before { content:''; position:absolute; left:7px; top:8px; bottom:0; width:2px; background:var(--border); }
.tl-item { position:relative; margin-bottom:16px; }
.tl-dot  { position:absolute; left:-24px; width:14px; height:14px; border-radius:50%; border:2px solid var(--accent); background:var(--bg-card); top:3px; }
.tl-date { font-size:10px; color:var(--text-muted); margin-bottom:2px; }
.tl-text { font-size:12px; color:var(--text-primary); }
.tl-user { font-size:11px; color:var(--accent); }

/* ── RANK ─────── */
.client-rank { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.client-rank:last-child { border-bottom:none; }
.rank-num  { font-size:20px; font-weight:800; color:var(--text-muted); width:24px; text-align:center; font-family:'JetBrains Mono',monospace; }
.rank-info { flex:1; }
.rank-name { font-size:13px; font-weight:600; }
.rank-sub  { font-size:11px; color:var(--text-muted); }
.rank-val  { font-size:13px; font-weight:700; color:var(--accent); font-family:'JetBrains Mono',monospace; }

/* ── PROGRESS ─────── */
.progress-bar-wrap { background:rgba(255,255,255,.06); border-radius:20px; height:6px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:20px; transition:.6s; }

/* ── MISC ─────── */
.mb-3 { margin-bottom:1rem!important; }
.mb-4 { margin-bottom:1.5rem!important; }

/* ── LOGIN ─────── */
.login-grid { position:fixed; inset:0; opacity:.15; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.login-glow { position:fixed; width:600px; height:600px; background:radial-gradient(circle,rgba(59,130,246,.2) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.login-box { position:relative; z-index:1; background:var(--bg-card); border:1px solid var(--border-accent); border-radius:20px; padding:48px 40px; width:420px; box-shadow:0 0 60px rgba(59,130,246,.15),0 40px 80px rgba(0,0,0,.5); animation:loginFade .6s ease; }
@keyframes loginFade { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.login-logo { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.login-logo .icon { width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--accent),var(--accent3)); display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; box-shadow:0 0 20px var(--accent-glow); }
.login-logo h1 { font-size:26px; font-weight:800; letter-spacing:-1px; }
.login-logo h1 span { color:var(--accent); }
.login-sub { color:var(--text-muted); font-size:13px; margin-bottom:36px; margin-left:60px; }
.login-label { font-size:11px; font-weight:600; letter-spacing:.8px; color:var(--text-secondary); text-transform:uppercase; margin-bottom:6px; display:block; }
.login-input { width:100%; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; padding:12px 16px; color:var(--text-primary); font-family:'Montserrat',sans-serif; font-size:14px; transition:.2s; margin-bottom:16px; outline:none; }
.login-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.login-btn { width:100%; padding:14px; background:linear-gradient(135deg,var(--accent),#2563eb); border:none; border-radius:10px; color:#fff; font-family:'Montserrat',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:.3s; letter-spacing:.5px; box-shadow:0 4px 20px var(--accent-glow); }
.login-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }

/* ── RESPONSIVE ─────── */
@media(max-width:992px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main, .topbar { margin-left:0; left:0; }
  .topbar-search { width:200px; }
}
@media(max-width:576px) {
  .login-box { width:100%; max-width:400px; padding:32px 24px; }
  .topbar-search { display:none; }
}