/* ============================================================
   styles.css — BuildChangeOrder design system
   Purple accent — distinct from the rest of the Build ecosystem
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:             #0a0b14;
  --bg-card:        #12131f;
  --bg-input:       #1a1b2e;
  --border:         rgba(255,255,255,0.08);
  --border-focus:   rgba(124,58,237,0.5);
  --accent:         #7C3AED;
  --accent-hover:   #8B5CF6;
  --text-primary:   #f0f0f5;
  --text-secondary: #a0a0b8;
  --text-muted:     #5a5a7a;
  --radius:         12px;
  --radius-sm:      8px;
  --success:        #10b981;
  --error:          #ef4444;
  --warning:        #f59e0b;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text-primary); min-height: 100vh; line-height: 1.6; }

/* ── Navbar ── */
.navbar { display:flex; align-items:center; justify-content:space-between; padding:0.875rem 1.5rem; background:rgba(10,11,20,0.95); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.navbar-brand { font-size:1.1rem; font-weight:800; color:var(--text-primary); text-decoration:none; }
.navbar-links { display:flex; gap:1.5rem; }
.navbar-links a { font-size:0.875rem; color:var(--text-secondary); text-decoration:none; font-weight:500; transition:color 0.2s; }
.navbar-links a:hover { color:var(--accent); }

/* ── Hero ── */
.hero-banner { text-align:center; padding:2rem 1.5rem 1.5rem; background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.15) 0%, transparent 70%); border-bottom:1px solid var(--border); }
.hero-banner h1 { font-size:clamp(1.5rem,4vw,2.25rem); font-weight:800; background:linear-gradient(135deg,#fff 0%,var(--accent) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:0.5rem; }
.hero-banner p { color:var(--text-secondary); font-size:1rem; }

/* ── App Container ── */
.app-container { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:1300px; margin:1.5rem auto; padding:0 1.5rem; }
@media (max-width:900px) { .app-container { grid-template-columns:1fr; } }

/* ── Form Panel ── */
.form-panel { display:flex; flex-direction:column; gap:1rem; }
.form-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.form-section-header { padding:0.75rem 1.25rem; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02); }
.form-section-header h3 { font-size:0.875rem; font-weight:700; color:var(--text-primary); }
.form-body { padding:1.25rem; display:flex; flex-direction:column; gap:0.875rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.form-row.full    { grid-template-columns:1fr; }
.form-row.triple  { grid-template-columns:1fr 1fr 1fr; }
.form-group { display:flex; flex-direction:column; gap:0.35rem; }
.form-group label { font-size:0.75rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; }
input, textarea, select { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-family:inherit; font-size:0.875rem; padding:0.5rem 0.75rem; transition:border-color 0.2s; width:100%; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(124,58,237,0.15); }
input::placeholder, textarea::placeholder { color:var(--text-muted); }
textarea { resize:vertical; min-height:70px; }
select option { background:var(--bg-card); }
.color-row { display:flex; gap:0.5rem; align-items:center; }
input[type="color"] { width:44px; height:36px; padding:2px; cursor:pointer; border-radius:var(--radius-sm); }

/* ── Line Items ── */
.line-items-header { display:grid; grid-template-columns:1fr 60px 90px 80px 32px; gap:0.5rem; padding:0.4rem 1.25rem; font-size:0.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid var(--border); }
#lineItems { padding:0.5rem 1.25rem; display:flex; flex-direction:column; gap:0.5rem; }
.line-item-row { display:grid; grid-template-columns:1fr 60px 90px 80px 32px; gap:0.5rem; align-items:center; }
.li-amount { font-size:0.85rem; font-weight:600; color:var(--text-primary); text-align:right; }
.btn-remove-item { background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:6px; width:28px; height:28px; cursor:pointer; font-size:0.75rem; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.btn-remove-item:hover { border-color:var(--error); color:var(--error); }
.btn-add-item { margin:0.5rem 1.25rem 1rem; background:none; border:1px dashed var(--border); color:var(--text-secondary); border-radius:var(--radius-sm); padding:0.5rem; cursor:pointer; font-size:0.8rem; font-family:inherit; width:calc(100% - 2.5rem); transition:all 0.2s; }
.btn-add-item:hover { border-color:var(--accent); color:var(--accent); }

/* ── Running Total ── */
.running-total {
  margin:0 1.25rem 1.25rem;
  background:rgba(124,58,237,0.06);
  border:1px solid rgba(124,58,237,0.2);
  border-radius:var(--radius-sm);
  padding:1rem 1.25rem;
}
.rt-row { display:flex; justify-content:space-between; font-size:0.85rem; color:var(--text-secondary); padding:0.2rem 0; }
.rt-divider { border:none; border-top:1px solid rgba(124,58,237,0.2); margin:0.5rem 0; }
.rt-total { font-weight:800; font-size:1.1rem; color:var(--accent); }
.rt-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:0.5rem; }

/* ── Buttons ── */
.btn-download { width:100%; background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff; border:none; border-radius:var(--radius); padding:0.875rem; font-size:1rem; font-weight:700; font-family:inherit; cursor:pointer; transition:all 0.2s; box-shadow:0 4px 20px rgba(124,58,237,0.3); }
.btn-download:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 6px 24px rgba(124,58,237,0.4); }
.btn-download:disabled { opacity:0.6; cursor:not-allowed; }

/* ── Preview Panel ── */
.preview-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; position:sticky; top:72px; max-height:calc(100vh - 100px); display:flex; flex-direction:column; }
.preview-header { display:flex; align-items:center; justify-content:space-between; padding:0.875rem 1.25rem; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02); }
.preview-header h3 { font-size:0.875rem; font-weight:700; }
.preview-badge { font-size:0.7rem; background:rgba(124,58,237,0.15); color:var(--accent); padding:0.2rem 0.6rem; border-radius:20px; font-weight:600; }
.preview-body { flex:1; overflow-y:auto; padding:1rem; background:#f0f0f0; }
.preview-body::-webkit-scrollbar { width:6px; }
.preview-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* ── Toast ── */
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(80px); background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); padding:0.75rem 1.5rem; border-radius:50px; font-size:0.875rem; font-weight:600; z-index:9999; transition:transform 0.3s ease; pointer-events:none; white-space:nowrap; }
.toast.show { transform:translateX(-50%) translateY(0); }
.toast--success { border-color:var(--success); color:var(--success); }
.toast--error   { border-color:var(--error);   color:var(--error); }

/* ── Footer ── */
.site-footer { text-align:center; padding:2rem 1.5rem; border-top:1px solid var(--border); color:var(--text-muted); font-size:0.8rem; margin-top:3rem; }
.site-footer a { color:var(--text-muted); text-decoration:none; }
.site-footer a:hover { color:var(--accent); }