/* ═══════════════════════════════════════════════
   XPERT IQ — FINANCE ENGINE · Global Styles
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --ink:         #0f0e0c;
  --paper:       #f5f0e8;
  --cream:       #ede8dc;
  --cream2:      #e4ddd0;
  --gold:        #b8912a;
  --gold-light:  #d4a93c;
  --gold-dim:    rgba(184,145,42,0.14);
  --teal:        #1a6b5c;
  --teal-light:  #2a8c78;
  --rust:        #c04a2a;
  --blue:        #1e50b4;
  --green:       #2a7a3b;
  --muted:       #7a7060;
  --border:      rgba(15,14,12,0.12);
  --shadow:      0 2px 16px rgba(15,14,12,0.08);
  --shadow-lg:   0 6px 32px rgba(15,14,12,0.12);
  --radius:      10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; min-height:100vh; font-size:13px; }
a { color:inherit; text-decoration:none; }

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--cream2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

/* ── HEADER ── */
header {
  border-bottom:1px solid var(--border);
  padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--paper);
  position:sticky; top:0; z-index:300;
}
.logo-lockup { display:flex; align-items:center; gap:12px; }
.logo-badge {
  width:34px; height:34px; border-radius:8px;
  background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:'Playfair Display',serif; font-size:16px; font-weight:900;
}
.logo-main  { font-family:'Playfair Display',serif; font-size:17px; font-weight:900; letter-spacing:-0.5px; }
.logo-sub   { font-family:'DM Mono',monospace; font-size:9px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }
.hdr-right  { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── PILLS ── */
.pill { font-family:'DM Mono',monospace; font-size:10px; padding:3px 10px; border-radius:100px; }
.pill-teal   { background:var(--teal);  color:#fff; }
.pill-gold   { background:var(--gold);  color:#fff; }
.pill-muted  { border:1px solid var(--border); background:var(--cream); color:var(--muted); }
.pill-rust   { background:var(--rust);  color:#fff; }
.pill-green  { background:var(--green); color:#fff; }

/* ── BUTTONS ── */
.btn {
  border:none; border-radius:7px;
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; padding:8px 14px; transition:all .2s; white-space:nowrap;
}
.btn-sm  { padding:5px 11px; font-size:11px; }
.btn-xs  { padding:3px 8px;  font-size:10px; }
.btn-ink    { background:var(--ink);  color:var(--paper); }
.btn-ink:hover { background:#2a2a28; }
.btn-gold   { background:var(--gold); color:#fff; }
.btn-gold:hover { background:var(--gold-light); }
.btn-teal   { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-light); }
.btn-outline { background:transparent; color:var(--ink); border:1px solid var(--border); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.btn-ghost  { background:transparent; color:var(--muted); border:none; padding:5px 8px; }
.btn-ghost:hover { color:var(--ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* Period / FY toggle active state */
.period-btn.active, .fy-btn.active {
  background:var(--ink); color:var(--paper);
}
.period-btn, .fy-btn {
  background:transparent; color:var(--muted); border:none; border-radius:5px;
}

/* ── INDUSTRY SELECTOR (landing) ── */
#landingSection {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:calc(100vh - 57px); padding:40px; gap:24px;
}
.landing-headline {
  font-family:'Playfair Display',serif; font-size:32px; font-weight:900;
  text-align:center; letter-spacing:-1px; line-height:1.2;
}
.landing-sub { color:var(--muted); font-size:14px; text-align:center; max-width:540px; line-height:1.7; }

.industry-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; max-width:860px; width:100%; }
.industry-card {
  background:#fff; border:2px solid var(--border); border-radius:14px;
  padding:20px 16px; text-align:center; cursor:pointer;
  transition:all .2s; position:relative; overflow:hidden;
}
.industry-card:hover,
.industry-card.active { border-color:var(--gold); background:rgba(184,145,42,0.04); }
.industry-card.active::after {
  content:'✓'; position:absolute; top:8px; right:10px;
  font-size:10px; color:var(--gold); font-weight:700;
}
.ind-icon { font-size:26px; margin-bottom:8px; }
.ind-name { font-weight:700; font-size:12px; line-height:1.3; }
.ind-desc { font-size:10px; color:var(--muted); margin-top:4px; line-height:1.4; }

.upload-zone {
  background:#fff; border:2px dashed var(--border); border-radius:16px;
  padding:40px 60px; text-align:center; max-width:520px; width:100%;
  cursor:pointer; transition:border-color .2s,background .2s;
}
.upload-zone:hover,.upload-zone.drag { border-color:var(--gold); background:rgba(184,145,42,0.04); }
.upload-icon { font-size:36px; margin-bottom:12px; }
.upload-title { font-family:'Playfair Display',serif; font-size:19px; font-weight:700; margin-bottom:6px; }
.upload-sub   { color:var(--muted); font-size:12px; line-height:1.65; margin-bottom:18px; }

/* ── PROGRESS ── */
#progressSection { display:none; padding:80px 40px; text-align:center; }
.spinner {
  width:28px; height:28px; border:3px solid var(--cream);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin .8s linear infinite; margin:0 auto 14px;
}
@keyframes spin { to { transform:rotate(360deg); } }
.prog-bar-wrap { background:var(--cream); border-radius:100px; height:6px; width:340px; margin:12px auto; overflow:hidden; }
.prog-bar-fill { height:100%; background:linear-gradient(90deg,var(--teal),var(--gold)); border-radius:100px; transition:width .3s; }

/* ── MAIN DASHBOARD LAYOUT ── */
#dashboard { display:none; padding:16px 24px; }

/* ── BREADCRUMB / INDUSTRY BADGE ── */
.ind-banner {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-radius:8px; background:var(--cream);
  margin-bottom:14px; font-size:12px;
}
.ind-banner-icon { font-size:18px; }

/* ── TABS ── */
.tabs {
  display:flex; border-bottom:1px solid var(--border);
  margin-bottom:18px; overflow-x:auto; gap:0;
}
.tab {
  padding:8px 16px; font-size:12px; font-weight:500;
  cursor:pointer; border-bottom:2px solid transparent;
  color:var(--muted); transition:all .2s; white-space:nowrap; flex-shrink:0;
}
.tab.active       { color:var(--ink); border-bottom-color:var(--ink); }
.tab.tab-ai       { color:var(--gold); }
.tab.tab-ai.active { border-bottom-color:var(--gold); }
.tab.tab-custom   { color:var(--teal); }
.tab.tab-custom.active { border-bottom-color:var(--teal); }
.tab-content      { display:none; }
.tab-content.active { display:block; }

/* ── KPI GRID ── */
.kpi-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.kpi-card {
  background:#fff; border-radius:var(--radius); padding:15px 16px;
  border:1px solid var(--border); box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.kpi-card:hover { box-shadow:var(--shadow-lg); }
.kpi-label {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.kpi-value {
  font-family:'Playfair Display',serif; font-size:22px; font-weight:700; line-height:1;
}
.kpi-value.gold  { color:var(--gold); }
.kpi-value.teal  { color:var(--teal); }
.kpi-value.rust  { color:var(--rust); }
.kpi-value.blue  { color:var(--blue); }
.kpi-value.green { color:var(--green); }
.kpi-sub { font-size:10px; color:var(--muted); margin-top:5px; line-height:1.4; }
.kpi-trend {
  font-family:'DM Mono',monospace; font-size:9px;
  margin-top:4px; display:inline-block; padding:1px 6px;
  border-radius:100px;
}
.kpi-trend.up   { background:rgba(42,122,59,0.1);  color:var(--green); }
.kpi-trend.down { background:rgba(192,74,42,0.1);  color:var(--rust); }

/* ── CHART CARDS ── */
.chart-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.chart-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-bottom:14px; }
.chart-grid-32 { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:14px; }
.chart-grid-23 { display:grid; grid-template-columns:1fr 2fr; gap:14px; margin-bottom:14px; }
.card {
  background:#fff; border-radius:var(--radius); padding:16px 18px;
  border:1px solid var(--border); box-shadow:var(--shadow);
}
.card.full { grid-column:1/-1; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.card-title { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; }
.card-sub   { font-size:10px; color:var(--muted); margin-top:1px; }
canvas { max-height:200px; }

/* ── FILTERS BAR ── */
.filters-bar {
  display:flex; gap:8px; align-items:center;
  margin-bottom:12px; flex-wrap:wrap;
}
.filter-select, .search-input {
  border:1px solid var(--border); border-radius:7px;
  padding:5px 10px; font-family:'DM Sans',sans-serif; font-size:12px;
  background:#fff; color:var(--ink); outline:none;
}
.filter-select:focus,.search-input:focus { border-color:var(--gold); }
.search-input { min-width:200px; }
.spacer { flex:1; }
.result-count {
  font-family:'DM Mono',monospace; font-size:10px; color:var(--muted);
}

/* ── TABLES ── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); padding:8px 10px;
  text-align:left; border-bottom:1px solid var(--border);
  white-space:nowrap; cursor:pointer; user-select:none;
}
th:hover { color:var(--ink); }
th.sorted { color:var(--gold); }
td { padding:8px 10px; border-bottom:1px solid rgba(15,14,12,0.05); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(184,145,42,0.03); }
.tr { text-align:right; }
.amount { font-family:'DM Mono',monospace; font-size:11px; }

/* ── BADGES ── */
.badge {
  display:inline-block; padding:2px 8px; border-radius:100px;
  font-size:9px; font-weight:600; font-family:'DM Mono',monospace; white-space:nowrap;
}
.b-gold  { background:rgba(184,145,42,0.14);  color:var(--gold); }
.b-teal  { background:rgba(26,107,92,0.11);   color:var(--teal); }
.b-rust  { background:rgba(192,74,42,0.11);   color:var(--rust); }
.b-ink   { background:rgba(15,14,12,0.07);    color:var(--ink); }
.b-blue  { background:rgba(30,80,180,0.09);   color:var(--blue); }
.b-green { background:rgba(42,122,59,0.1);    color:var(--green); }
.b-grey  { background:rgba(122,112,96,0.1);   color:var(--muted); }

/* ── PIPELINE BARS ── */
.pipeline-item { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.pipeline-name { width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; }
.pipeline-bar  { flex:1; height:6px; background:var(--cream); border-radius:100px; overflow:hidden; }
.pipeline-fill { height:100%; border-radius:100px; transition:width .6s ease; }
.pipeline-val  { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); width:90px; text-align:right; }

/* ── AI ASSISTANT ── */
.ai-layout {
  display:grid; grid-template-columns:250px 1fr; gap:14px;
  height:calc(100vh - 170px); min-height:500px;
}
.ai-sidebar {
  background:#fff; border-radius:var(--radius); border:1px solid var(--border);
  padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
}
.ai-sidebar-title {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted);
  margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.ai-chip {
  padding:7px 10px; border-radius:7px; font-size:11px; cursor:pointer;
  border:1px solid var(--border); background:var(--cream); color:var(--ink);
  transition:all .15s; line-height:1.4;
}
.ai-chip:hover { border-color:var(--gold); background:var(--gold-dim); color:var(--gold); }
.ai-main {
  background:#fff; border-radius:var(--radius); border:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.ai-chat-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.ai-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--teal));
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.ai-messages { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.msg { display:flex; gap:8px; align-items:flex-start; }
.msg.user { flex-direction:row-reverse; }
.msg-bubble {
  max-width:80%; padding:9px 13px; border-radius:12px;
  font-size:12px; line-height:1.65;
}
.msg.ai   .msg-bubble { background:var(--cream); color:var(--ink); border-radius:4px 12px 12px 12px; }
.msg.user .msg-bubble { background:var(--ink);   color:var(--paper); border-radius:12px 4px 12px 12px; }
.msg-avatar {
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0;
}
.msg-avatar.ai   { background:linear-gradient(135deg,var(--gold),var(--teal)); color:#fff; }
.msg-avatar.user { background:var(--muted); color:#fff; font-size:9px; font-weight:700; }
.msg.ai .msg-bubble strong { color:var(--teal); }
.msg.ai .msg-bubble ul { padding-left:16px; margin-top:4px; }
.typing-indicator { display:flex; gap:4px; padding:10px 13px; background:var(--cream); border-radius:4px 12px 12px 12px; width:fit-content; }
.typing-dot { width:5px; height:5px; border-radius:50%; background:var(--muted); animation:bounce .9s infinite; }
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.3s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-4px);} }
.ai-key-bar {
  padding:6px 14px 0; display:flex; gap:8px; align-items:center;
  border-top:1px solid var(--border);
}
.ai-key-input {
  flex:1; padding:6px 10px; border:1px solid var(--border); border-radius:6px;
  font-size:11px; background:var(--paper); color:var(--ink); font-family:inherit; outline:none;
}
.ai-key-input:focus { border-color:var(--gold); }
.ai-input-area { padding:10px 14px; display:flex; gap:8px; align-items:flex-end; }
.ai-input {
  flex:1; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; font-family:'DM Sans',sans-serif; font-size:12px;
  outline:none; resize:none; max-height:90px; line-height:1.5; background:#fff;
}
.ai-input:focus { border-color:var(--gold); }
.ai-send {
  width:34px; height:34px; border-radius:50%; background:var(--gold); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:13px; transition:background .2s; flex-shrink:0; color:#fff;
}
.ai-send:hover    { background:var(--gold-light); }
.ai-send:disabled { background:var(--cream); cursor:not-allowed; }

/* ── CUSTOMISATION PANEL ── */
.custom-panel { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.custom-section {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px;
}
.custom-section-title {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.form-row { display:flex; gap:8px; align-items:flex-end; margin-bottom:8px; }
.form-col { display:flex; flex-direction:column; gap:4px; flex:1; }
.form-label { font-size:10px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.form-input,.form-select {
  border:1px solid var(--border); border-radius:6px; padding:7px 10px;
  font-family:'DM Sans',sans-serif; font-size:12px;
  background:#fff; color:var(--ink); outline:none;
}
.form-input:focus,.form-select:focus { border-color:var(--gold); }
.field-chip {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--cream); border:1px solid var(--border); border-radius:6px;
  padding:4px 8px; font-size:11px; margin:3px;
}
.field-chip-remove {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:13px; padding:0; line-height:1;
}
.field-chip-remove:hover { color:var(--rust); }

/* ── ANALYTICS QUICK INSIGHTS ── */
.insight-strip { display:flex; gap:10px; margin-bottom:14px; overflow-x:auto; }
.insight-card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 14px; min-width:180px; flex-shrink:0; border-left:3px solid var(--gold);
}
.insight-label { font-size:10px; color:var(--muted); font-weight:600; margin-bottom:4px; }
.insight-val { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; color:var(--gold); }
.insight-note { font-size:10px; color:var(--muted); margin-top:3px; }

/* ── EMPTY / LOADER STATES ── */
.empty-state { text-align:center; padding:40px; color:var(--muted); font-size:12px; }
.empty-state-icon { font-size:32px; margin-bottom:10px; opacity:.4; }

/* ── RESPONSIVE ── */
@media(max-width:1200px) {
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
  .industry-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
  .kpi-grid { grid-template-columns:repeat(3,1fr); }
  .chart-grid-2,.chart-grid-3,.chart-grid-32,.chart-grid-23 { grid-template-columns:1fr; }
  .ai-layout { grid-template-columns:1fr; }
  .custom-panel { grid-template-columns:1fr; }
  .industry-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
  .kpi-grid { grid-template-columns:repeat(2,1fr); }
  #dashboard { padding:10px 12px; }
}