/* ── Deal Tracker – Global Styles ───────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a10;--bg2:#101018;--bg3:#14141f;
  --surface:#181828;--surface2:#1e1e32;--surface3:#24243c;
  --accent:#7c3aed;--accent2:#a78bfa;--accent-dim:rgba(124,58,237,.12);
  --text:#e8e8f0;--text2:#9494b0;--text3:#5e5e78;
  --green:#10b981;--green-dim:rgba(16,185,129,.1);
  --orange:#f59e0b;--orange-dim:rgba(245,158,11,.1);
  --red:#ef4444;--red-dim:rgba(239,68,68,.1);
  --blue:#3b82f6;--blue-dim:rgba(59,130,246,.1);
  --border:#222240;--border2:#2e2e50;
  --radius:10px;--radius-lg:14px;--radius-xl:18px;
  --shadow:0 1px 3px rgba(0,0,0,.3);--shadow-lg:0 8px 32px rgba(0,0,0,.4);
  --transition:.15s ease;
}
html{font-size:14px}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
button{cursor:pointer;font-family:inherit}
input,select,textarea,button{font-family:inherit;font-size:inherit}
.hidden{display:none!important}

/* ── Utilities ─────────────────────────────────────────────── */
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.w-full{width:100%}.text-center{text-align:center}
.font-bold{font-weight:700}.font-semi{font-weight:600}.font-medium{font-weight:500}
.text-xs{font-size:.75rem}.text-sm{font-size:.85rem}.text-base{font-size:1rem}.text-lg{font-size:1.15rem}.text-xl{font-size:1.35rem}.text-2xl{font-size:1.7rem}.text-3xl{font-size:2rem}
.text-muted{color:var(--text2)}.text-dim{color:var(--text3)}
.text-green{color:var(--green)}.text-orange{color:var(--orange)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}.text-accent{color:var(--accent2)}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}

/* ── Topbar ────────────────────────────────────────────────── */
.topbar{
  background:var(--surface);padding:0 24px;height:56px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:90;
}
.topbar-brand{display:flex;align-items:center;gap:10px;font-size:1rem;font-weight:700;color:var(--text);text-decoration:none}
.topbar-brand:hover{text-decoration:none}
.topbar-brand svg{width:24px;height:24px;color:var(--accent)}
.topbar-nav{display:flex;align-items:center;gap:4px}
.topbar-nav a{
  padding:8px 16px;border-radius:var(--radius);font-size:.85rem;font-weight:500;
  color:var(--text2);transition:var(--transition);text-decoration:none;
}
.topbar-nav a:hover{background:var(--surface2);color:var(--text)}
.topbar-nav a.active{background:var(--accent-dim);color:var(--accent2)}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* ── Mobile Menu Toggle ────────────────────────────────────── */
.menu-toggle{display:none;background:none;border:none;color:var(--text2);padding:6px;cursor:pointer}
.menu-toggle svg{width:22px;height:22px}
@media(max-width:600px){
  .menu-toggle{display:flex;align-items:center}
  .topbar-nav{
    display:none;position:absolute;top:50px;left:0;right:0;
    background:var(--surface);border-bottom:1px solid var(--border);
    flex-direction:column;padding:8px 14px;gap:2px;
    box-shadow:var(--shadow-lg);z-index:91;
  }
  .topbar-nav.open{display:flex}
  .topbar-nav a{padding:10px 12px;border-radius:var(--radius);width:100%}
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border:1px solid var(--border);border-radius:var(--radius);
  background:transparent;color:var(--text2);font-size:.85rem;font-weight:500;
  transition:var(--transition);white-space:nowrap;line-height:1.4;
}
.btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)}
.btn-primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.btn-primary:hover{opacity:.9;background:#6d28d9}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{opacity:.9}
.btn-danger{border-color:rgba(239,68,68,.3);color:var(--red)}
.btn-danger:hover{background:var(--red-dim);border-color:var(--red)}
.btn-sm{padding:5px 12px;font-size:.78rem}
.btn-xs{padding:3px 8px;font-size:.72rem}
.btn-icon{width:34px;height:34px;padding:0;border-radius:8px}
.btn-icon.sm{width:28px;height:28px;border-radius:6px}
.btn-wa{background:#25d366;border-color:#25d366;color:#fff}
.btn-wa:hover{opacity:.85}

/* ── Form Controls ─────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:4px}
.form-label{font-size:.72rem;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.form-input,.form-select{
  padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg2);color:var(--text);outline:none;transition:var(--transition);
  font-size:.9rem;
}
.form-input:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.form-input::placeholder{color:var(--text3)}
.form-select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e5e78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}

/* Toggle group */
.toggle-group{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.toggle-btn{
  flex:1;padding:9px 4px;border:none;background:var(--bg2);color:var(--text3);
  font-size:.82rem;font-weight:500;text-align:center;transition:var(--transition);
  border-right:1px solid var(--border);
}
.toggle-btn:last-child{border-right:none}
.toggle-btn:hover:not(.active){background:var(--surface2);color:var(--text2)}
.toggle-btn.active{background:var(--accent);color:#fff;font-weight:600}

/* ── Cards ─────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;transition:var(--transition)}
.card:hover{border-color:var(--border2)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}

/* ── Stat Cards ────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px;position:relative;overflow:hidden;transition:var(--transition);
}
.stat-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px}
.stat-card[data-color="purple"]::after{background:var(--accent)}
.stat-card[data-color="blue"]::after{background:var(--blue)}
.stat-card[data-color="orange"]::after{background:var(--orange)}
.stat-card[data-color="green"]::after{background:var(--green)}
.stat-card .stat-icon{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:15px;margin-bottom:10px;
}
.stat-card[data-color="purple"] .stat-icon{background:var(--accent-dim);color:var(--accent2)}
.stat-card[data-color="blue"] .stat-icon{background:var(--blue-dim);color:var(--blue)}
.stat-card[data-color="orange"] .stat-icon{background:var(--orange-dim);color:var(--orange)}
.stat-card[data-color="green"] .stat-icon{background:var(--green-dim);color:var(--green)}
.stat-card .stat-label{font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.stat-card .stat-value{font-size:1.6rem;font-weight:800;margin-top:2px;letter-spacing:-.5px}

/* ── Badges ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:6px;font-size:.72rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.badge-amazon{background:rgba(255,152,0,.1);color:#ffa726;border-color:rgba(255,152,0,.2)}
.badge-flipkart{background:rgba(40,116,240,.1);color:#64b5f6;border-color:rgba(40,116,240,.2)}
.badge-rating{background:rgba(168,85,247,.08);color:#c084fc;border-color:rgba(168,85,247,.15)}
.badge-review{background:rgba(14,165,233,.08);color:#38bdf8;border-color:rgba(14,165,233,.15)}
.badge-original{background:var(--green-dim);color:var(--green);border-color:rgba(16,185,129,.2)}
.badge-exchange{background:var(--orange-dim);color:var(--orange);border-color:rgba(245,158,11,.2)}
.badge-ordered{background:var(--blue-dim);color:#60a5fa;border-color:rgba(59,130,246,.2)}
.badge-submitted{background:var(--orange-dim);color:#fbbf24;border-color:rgba(245,158,11,.2)}
.badge-received{background:var(--green-dim);color:#34d399;border-color:rgba(16,185,129,.2)}

/* Stage pills in order cards */
.stage-pills{display:flex;gap:3px}
.stage-pill{
  padding:5px 12px;border:1px solid var(--border);border-radius:6px;
  background:transparent;color:var(--text3);font-size:.72rem;font-weight:600;
  transition:var(--transition);
}
.stage-pill:hover{border-color:var(--accent);color:var(--text2)}
.stage-pill.active-ordered{border-color:var(--blue);color:#60a5fa;background:var(--blue-dim)}
.stage-pill.active-submitted{border-color:var(--orange);color:#fbbf24;background:var(--orange-dim)}
.stage-pill.active-received{border-color:var(--green);color:#34d399;background:var(--green-dim)}

/* ── Modal ─────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:modalFadeIn .15s ease;
}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalSlideUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);
  width:540px;max-width:100%;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:modalSlideUp .2s ease;
}
.modal-header{
  padding:20px 24px;border-bottom:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
}
.modal-header h3{font-size:1.05rem;font-weight:700}
.modal-body{padding:20px 24px 24px}
.modal-footer{padding:0 24px 20px;display:flex;justify-content:flex-end;gap:8px}

/* ── Table ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;min-width:700px}
.data-table thead{background:var(--surface2)}
.data-table th{padding:10px 12px;text-align:left;font-size:.7rem;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;font-weight:600;white-space:nowrap}
.data-table td{padding:12px;border-top:1px solid var(--border);vertical-align:middle}
.data-table tbody tr{transition:var(--transition)}
.data-table tbody tr:hover{background:var(--surface2)}

/* ── Search & Filters bar ──────────────────────────────────── */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-box{
  position:relative;flex:1;min-width:200px;
}
.search-box input{
  width:100%;padding:9px 14px 9px 36px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg2);color:var(--text);outline:none;font-size:.85rem;transition:var(--transition);
}
.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.search-box svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text3)}
.filter-select{
  padding:9px 32px 9px 12px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg2);color:var(--text2);font-size:.82rem;outline:none;transition:var(--transition);
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e5e78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.filter-select:focus{border-color:var(--accent)}

/* ── Page Layout ───────────────────────────────────────────── */
.page-wrap{padding:24px 0}
.page-header{margin-bottom:24px}
.page-header h1{font-size:1.5rem;font-weight:800;margin-bottom:4px}
.page-header p{color:var(--text2);font-size:.9rem}

/* ── Finance row ───────────────────────────────────────────── */
.finance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.finance-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;text-align:center;
}
.finance-card .fc-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.finance-card .fc-value{font-size:1.3rem;font-weight:800;margin-top:2px}

/* ── Order Cards ───────────────────────────────────────────── */
.orders-list{display:flex;flex-direction:column;gap:10px}
.order-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:20px 24px;transition:var(--transition);
}
.order-card:hover{border-color:var(--border2)}
.order-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.order-badges{display:flex;gap:6px;flex-wrap:wrap}
.order-fields{display:grid;grid-template-columns:repeat(5,1fr);gap:12px 28px;margin-bottom:16px}
.order-field .of-label{font-size:.65rem;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:2px}
.order-field .of-value{font-size:.95rem;font-weight:600;margin-top:2px;word-break:break-all}
.order-field .of-value.mono{font-family:'Cascadia Code','Consolas',monospace;font-size:.85rem;color:var(--text2)}
.order-row-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.order-actions{display:flex;gap:6px;align-items:center}

/* ── Empty State ───────────────────────────────────────────── */
.empty-state{text-align:center;padding:60px 20px}
.empty-state .empty-icon{font-size:40px;opacity:.4;margin-bottom:12px}
.empty-state p{color:var(--text3);font-size:.9rem}

/* ── Login ─────────────────────────────────────────────────── */
.login-page{display:flex;min-height:100vh}
.login-left{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.login-right{flex:1;background:linear-gradient(135deg,#1a0a30 0%,#0d0d1a 50%,#0a1628 100%);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.login-right::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(124,58,237,.08);top:-100px;right:-100px}
.login-right::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(59,130,246,.06);bottom:-80px;left:-80px}
.login-right-content{position:relative;z-index:1;text-align:center;color:var(--text2);padding:40px;max-width:400px}
.login-right-content h2{font-size:2rem;font-weight:800;color:var(--text);margin-bottom:12px}
.login-right-content p{font-size:.95rem;line-height:1.6}
.login-card{width:380px;max-width:100%}
.login-card h1{font-size:1.6rem;font-weight:800;margin-bottom:4px}
.login-card .sub{color:var(--text2);font-size:.9rem;margin-bottom:28px}
.login-card .form-group{margin-bottom:16px}
.login-card .form-input{padding:12px 16px}
.login-err{background:var(--red-dim);border:1px solid rgba(239,68,68,.2);color:var(--red);padding:10px 14px;border-radius:var(--radius);font-size:.82rem;margin-bottom:14px}

/* PIN digit inputs */
.pin-digit{
  width:52px;height:60px;text-align:center;font-size:1.5rem;font-weight:700;
  letter-spacing:0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg2);color:var(--text);caret-color:var(--accent);
  transition:var(--transition);padding:0;
}
.pin-digit:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .finance-grid{grid-template-columns:repeat(3,1fr)}
  .order-fields{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  html{font-size:13px}
  .container{padding:0 14px}
  .topbar{padding:0 14px;height:50px}
  .topbar-brand{font-size:.9rem}
  .topbar-nav a{padding:6px 10px;font-size:.8rem}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .finance-grid{grid-template-columns:1fr}
  .login-right{display:none}
  .login-left{padding:20px}
  .order-fields{grid-template-columns:repeat(3,1fr);gap:10px 16px}
  .order-card{padding:16px 16px}
  .page-header h1{font-size:1.25rem}
  .page-wrap{padding:18px 0}
  .modal{width:95%;margin:10px}
  .modal-header{padding:16px 18px}
  .modal-body{padding:16px 18px 18px}
  .modal-footer{padding:0 18px 16px}
  .data-table th,.data-table td{padding:8px 8px;font-size:.78rem}
  .card{padding:16px}
}
@media(max-width:600px){
  .topbar-nav{display:none}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar .search-box{min-width:100%}
  .filter-select{width:100%}
  .order-fields{grid-template-columns:1fr 1fr;gap:10px 20px}
  .order-row-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .stage-pills{flex-wrap:wrap}
  .order-actions{width:100%;justify-content:flex-end}
  .finance-grid{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .finance-card{padding:10px 8px}
  .finance-card .fc-label{font-size:.6rem;letter-spacing:.5px}
  .finance-card .fc-value{font-size:1.05rem}
}
@media(max-width:480px){
  html{font-size:12.5px}
  .container{padding:0 10px}
  .topbar{padding:0 10px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:12px}
  .stat-card .stat-icon{width:28px;height:28px;font-size:12px;margin-bottom:6px}
  .stat-card .stat-value{font-size:1.2rem}
  .stat-card .stat-label{font-size:.6rem}
  .page-wrap{padding:14px 0}
  .page-header h1{font-size:1.1rem}
  .order-card{padding:14px 12px}
  .order-fields{grid-template-columns:1fr 1fr;gap:8px 14px}
  .order-field .of-value{font-size:.85rem}
  .order-field .of-value.mono{font-size:.75rem}
  .btn{padding:7px 12px;font-size:.78rem}
  .btn-sm{padding:4px 10px;font-size:.72rem}
  .stage-pill{padding:4px 8px;font-size:.65rem}
  .badge{padding:2px 7px;font-size:.65rem}
  .modal-body div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .card{padding:12px}
  .card-header{flex-direction:column;align-items:flex-start;gap:8px}
}