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

/* Q4 HCP Table Section */
.q4-insight-box{padding:16px 0;}
.q4-alert-bar{
    border-left:4px solid #ef4444;
    background:#fff8f8;
    padding:12px 16px;
    font-size:13px;
    color:#374151;
    line-height:1.6;
    border-radius:0 6px 6px 0;
    margin-bottom:4px;
}
.q4-filters{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    padding:10px 0 14px 0;
    font-size:13px;
    color:#374151;
}
.q4-filters label{display:flex;align-items:center;gap:6px;font-weight:500;}
.q4-filters select{
    padding:4px 8px;
    border:1px solid #e5e7eb;
    border-radius:6px;
    font-size:13px;
    color:#374151;
    background:white;
    cursor:pointer;
}
.q4-table-wrap{
    overflow-x:auto;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:white;
}
.q4-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
    white-space:nowrap;
}
.q4-table thead tr{
    background:#f9fafb;
    border-bottom:2px solid #e5e7eb;
}
.q4-table th{
    padding:10px 14px;
    text-align:left;
    font-weight:700;
    color:#374151;
    font-size:12px;
    white-space:nowrap;
}
.q4-table tbody tr{
    border-bottom:1px solid #f3f4f6;
    transition:background 0.15s;
}
.q4-table tbody tr:hover{background:#f9fafb;}
.q4-table td{
    padding:10px 14px;
    color:#374151;
    vertical-align:top;
}
.q4-table td.cust-id{font-weight:700;color:#1f2937;}
.q4-table td.cust-name{color:#1f2937;font-weight:500;}
.q4-table td.prev{color:#4a90d9;font-weight:600;}
.q4-table td.comp{color:#4a90d9;font-weight:600;}
.q4-table td.link{color:#4a90d9;font-weight:600;}
.q4-table td.priority-first{color:#4a90d9;font-weight:600;}

/* Competitor Select dropdown */
.q4-comp-wrap{position:relative;display:inline-block;}
.q4-comp-btn{
    padding:4px 10px;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:white;
    font-size:13px;
    color:#374151;
    cursor:pointer;
    white-space:nowrap;
}
.q4-comp-btn:hover{background:#f9fafb;}
.q4-comp-dropdown{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    background:white;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.12);
    padding:8px 0;
    min-width:140px;
    z-index:100;
}
.q4-comp-dropdown label{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    font-size:13px;
    color:#374151;
    cursor:pointer;
    font-weight:400;
}
.q4-comp-dropdown label:hover{background:#f9fafb;}
.q4-comp-dropdown input[type="checkbox"]{width:15px;height:15px;cursor:pointer;}

:root{
  --topbar-h:50px;
  --orange-nav-h:50px;
  --secondary-nav-h:48px;
  --filters-h:52px;
}

body{
  font-family:'Inter',sans-serif;
  background:#f5f7fa;
  color:#1f2937;
  padding-top:calc(var(--topbar-h) + var(--orange-nav-h) + var(--secondary-nav-h) + var(--filters-h));
  padding-bottom:80px;
}

/* Fixed Veeva Top Bar */
.veeva-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--topbar-h);
  background:white;
  padding:10px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  z-index:1000;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.back-btn{background:none;border:none;font-size:20px;color:#FF6B35;cursor:pointer;font-weight:700;}
.time{font-size:13px;color:#6b7280;font-weight:500;}
.topbar-title{font-size:18px;font-weight:700;}
.topbar-right{display:flex;align-items:center;}
.bell-icon{position:relative;font-size:18px;cursor:pointer;padding:6px;}
.bell-icon .badge{position:absolute;top:0;right:0;background:#ef4444;color:white;font-size:10px;font-weight:700;padding:2px 5px;border-radius:10px;min-width:16px;text-align:center;}

/* Fixed Orange Nav */
.orange-nav{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  right:0;
  height:var(--orange-nav-h);
  background:#D4711A;
  display:flex;
  gap:4px;
  padding:0 16px;
  z-index:999;
}
.orange-nav a{
  display:flex;
  align-items:center;
  padding:0 20px;
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  border-bottom:3px solid transparent;
  white-space:nowrap;
}
.orange-nav a:hover{color:white;background:rgba(255,255,255,0.1);}
.orange-nav a.active{color:white;border-bottom-color:white;font-weight:600;}

/* Fixed Secondary Nav */
.secondary-nav{
  position:fixed;
  top:calc(var(--topbar-h) + var(--orange-nav-h));
  left:0;
  right:0;
  height:var(--secondary-nav-h);
  background:white;
  border-bottom:1px solid #e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  z-index:998;
}
.sec-item{
  text-decoration:none;
  color:#6b7280;
  font-weight:600;
  font-size:14px;
  padding:12px 24px;
  border-bottom:3px solid transparent;
  transition:all 0.2s;
}
.sec-item:hover{color:#374151;}
.sec-item.active{color:#FF6B35;border-bottom-color:#FF6B35;}

/* Fixed Filters Row */
.filters-row{
  position:fixed;
  top:calc(var(--topbar-h) + var(--orange-nav-h) + var(--secondary-nav-h));
  left:0;
  right:0;
  height:var(--filters-h);
  background:#fafbfc;
  border-bottom:1px solid #e5e7eb;
  padding:10px 24px;
  display:flex;
  gap:12px;
  align-items:center;
  z-index:997;
}
.filter-pill{
  background:white;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.filter-pill span{font-size:16px;}
.filter-pill select{
  border:none;
  background:none;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  outline:none;
  color:#111827;
}

/* Main Content */
.main-content{padding:24px;max-width:1600px;margin:0 auto;}

/* KPI Grid */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px;}
.kpi-card{background:white;border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #e5e7eb;transition:all 0.3s;}
.kpi-card:hover{box-shadow:0 8px 20px rgba(255,107,53,0.08);transform:translateY(-2px);border-color:#FF6B35;}
.kpi-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.kpi-icon{font-size:14px;}
.kpi-label{font-size:11px;font-weight:600;color:#FF6B35;text-transform:uppercase;letter-spacing:0.3px;}
.kpi-card h3{font-size:14px;font-weight:600;color:#6b7280;margin-bottom:10px;}
.kpi-value{font-size:32px;font-weight:800;color:#111827;margin-bottom:6px;}
.kpi-unit{font-size:13px;font-weight:500;color:#6b7280;}
.kpi-meta{font-size:12px;color:#9ca3af;margin-bottom:8px;font-weight:500;}
.kpi-change{font-size:13px;font-weight:600;}
.kpi-change.positive{color:#059669;}
.kpi-change.negative{color:#dc2626;}

/* Questions */
.questions-section{display:flex;flex-direction:column;gap:16px;padding-bottom:40px;}
.q-card{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-radius:12px;border:1px solid #fed7aa;transition:all 0.3s;}
.q-card:hover{box-shadow:0 4px 12px rgba(255,107,53,0.1);}
.q-header{padding:18px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.q-left{display:flex;align-items:center;gap:12px;flex:1;}
.chevron{transition:transform 0.3s;color:#9ca3af;}
.chevron.open{transform:rotate(180deg);}
.q-header h3{font-size:16px;font-weight:600;color:#111827;}
.q-right{display:flex;gap:10px;align-items:center;}
.q-badge{padding:4px 12px;background:#dbeafe;color:#1e40af;border-radius:16px;font-size:12px;font-weight:600;}
.q-right button{background:white;border:1px solid#e5e7eb;width:32px;height:32px;border-radius:6px;font-size:14px;cursor:pointer;color:#6b7280;}
.q-right button:hover{background:#f9fafb;}

/* Content */
.q-content{padding:0 24px 24px;display:none;}
.q-content.open{display:block;animation:slideDown 0.3s;}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.insights-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.insight-box{background:white;border-radius:10px;padding:18px;box-shadow:0 2px 6px rgba(0,0,0,0.08);border:1px solid #e5e7eb;}
.box-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.box-actions{display:flex;gap:4px;}
.box-actions button,.box-actions select{background:white;border:1px solid #d1d5db;padding:4px 8px;border-radius:4px;font-size:11px;cursor:pointer;color:#6b7280;}
.days-filter{font-weight:500;}
.insight-box h4{font-size:15px;font-weight:600;margin-bottom:12px;color:#111827;line-height:1.4;}
.chart-area{height:200px;margin-bottom:12px;}
.insight{font-size:13px;color:#374151;line-height:1.6;margin-bottom:10px;padding:10px;background:#f9fafb;border-radius:6px;border-left:3px solid #FF6B35;}
.source{font-size:11px;color:#9ca3af;font-style:italic;}

/* Add Modal */
.add-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);z-index:2000;display:none;align-items:center;justify-content:center;}
.add-modal.show{display:flex;}
.modal-box{background:white;border-radius:12px;padding:24px;width:90%;max-width:500px;box-shadow:0 20px 60px rgba(0,0,0,0.3);}
.modal-box h3{font-size:18px;font-weight:700;margin-bottom:8px;}
.modal-box>p{font-size:14px;color:#6b7280;margin-bottom:16px;}
.coll-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.coll-options label{display:flex;align-items:center;gap:10px;padding:12px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:14px;}
.coll-options input{width:18px;height:18px;cursor:pointer;}
.modal-actions{display:flex;gap:10px;}
.modal-actions button{flex:1;padding:10px;border-radius:8px;font-weight:600;cursor:pointer;}
.modal-actions button:first-child{background:white;border:1px solid #d1d5db;color:#374151;}
.add-confirm{background:#FF6B35;color:white;border:none;}

/* Bottom Nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e5e7eb;padding:6px 4px;display:flex;justify-content:space-around;z-index:90;}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-btn span{font-size:10px;color:#6b7280;}
.nav-btn.active span{color:#FF6B35;font-weight:600;}