:root{
  --bg:            #f6f7f9;
  --surface:       #ffffff;
  --border:        #e7e9ee;
  --border-soft:   #eef0f4;

  --text-primary:  #16181d;
  --text-secondary:#6b7280;
  --text-muted:    #9aa1ac;

  --accent:        #2697FF;
  --accent-soft:   #eaf0ff;
  --positive:      #1ba15a;
  --positive-soft: #e8f7ef;
  --negative:      #e0483e;
  --negative-soft: #fdecea;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 14px rgba(16,24,40,.06);

  --sidebar-w: 240px;
}

/* ================= MAIN ================= */
.main-content{
  flex:1;
  min-width:0;
  padding:20px 32px 64px;
}

.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:12px;
}
.topbar-spacer{ flex:1; }
.btn-icon{
  border:1px solid var(--border);
  background:var(--surface);
  width:36px; height:36px;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
}
.avatar{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ================= PAGE HEAD ================= */
.page-head{ padding:8px 0 20px; }
.page-head h1{
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
.page-head p{
  margin:0;
  color:var(--text-secondary);
  font-size:.9rem;
}

/* ================= SEARCH ================= */
.search-row{ margin-bottom:14px; }
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:11px 16px;
  max-width:720px;
  box-shadow:var(--shadow-sm);
}
.search-box i{ color:var(--text-muted); font-size:1rem; }
.search-box input{
  border:none;
  outline:none;
  flex:1;
  font-size:.88rem;
  color:var(--text-primary);
  background:transparent;
}
.search-box input::placeholder{ color:var(--text-muted); }

.search-wrap{ position:relative; max-width:720px; }
.search-suggest-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  max-height:280px;
  overflow-y:auto;
  z-index:20;
  padding:6px;
}
.search-suggest-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:.85rem;
  color:var(--text-primary);
}
.search-suggest-item:hover{
  background:var(--accent-soft);
  color:var(--accent);
}
.search-suggest-name{ font-weight:600; }
.search-suggest-type{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--text-muted);
  background:var(--bg);
  border-radius:var(--radius-pill);
  padding:2px 8px;
  text-transform:uppercase;
  white-space:nowrap;
}
.search-suggest-empty{
  padding:10px;
  font-size:.82rem;
  color:var(--text-muted);
  text-align:center;
}

/* ================= CHIPS ================= */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 8px 6px 14px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-primary);
}
.chip-tag{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--text-muted);
  background:var(--bg);
  border-radius:var(--radius-pill);
  padding:2px 7px;
  margin-left:2px;
}
.chip-close{
  border:none;
  background:var(--bg);
  color:var(--text-secondary);
  width:20px; height:20px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:.75rem;
}
.chip-close:hover{ background:var(--negative-soft); color:var(--negative); }

/* ================= CONTROLS ROW ================= */
.controls-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}

.segmented{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:3px;
  gap:2px;
}
.seg-btn{
  border:none;
  background:transparent;
  color:var(--text-secondary);
  font-size:.82rem;
  font-weight:600;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.seg-btn:hover{ color:var(--text-primary); }
.seg-btn.active{
  background:var(--text-primary);
  color:#fff;
}

.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-secondary);
  font-size:.82rem;
  font-weight:600;
  padding:8px 14px;
  border-radius:var(--radius-pill);
  cursor:pointer;
}
.pill-btn:hover{ color:var(--text-primary); border-color:#d8dbe2; }

/* ================= TABS ================= */
.tabs{
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--border);
  margin-bottom:22px;
  overflow-x:auto;
}
.tab-link{
  border:none;
  background:transparent;
  padding:10px 2px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
  position:relative;
  white-space:nowrap;
}
.tab-link:hover{ color:var(--text-primary); }
.tab-link.active{ color:var(--accent); }
.tab-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}

/* ================= TAB PANELS ================= */
/* .tab-panel{ display:none; } */
.tab-panel.active{ display:block; }

/* ================= STAT CARDS (Summary) ================= */
.summary-highlight-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  margin-bottom:16px;
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

.stat-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text-muted);
  text-transform:uppercase;
  margin-bottom:10px;
}
.stat-label i{ font-size:.85rem; opacity:.7; }

.stat-value{
  font-size:1.7rem;
  font-weight:700;
  letter-spacing:-0.01em;
  display:flex;
  align-items:center;
  gap:8px;
}
.stat-value--sm{ font-size:1.05rem; font-weight:600; }
.stat-value--pos{ color:var(--positive); }
.stat-value--neg{ color:var(--negative); }
.stat-value i{ font-size:1rem; }

.stat-sub{
  margin-top:6px;
  font-size:.76rem;
  color:var(--text-muted);
}

/* ================= PANEL CARD (Trends) ================= */
.panel-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.panel-card-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.panel-card-head h2{
  font-size:1rem;
  font-weight:700;
  margin:0;
}
.panel-card-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.select-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:7px 12px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-secondary);
  cursor:pointer;
}

.chart-wrap{ width:100%; position:relative; }

.legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
  margin-top:14px;
}
.legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-secondary);
}
.legend-dot{
  width:9px; height:9px;
  border-radius:50%;
  display:inline-block;
}

/* ================= ROI TAB ================= */
.roi-group{ margin-bottom:26px; }
.roi-group-title{
  font-size:.95rem;
  font-weight:700;
  margin:0 0 12px;
  color:var(--text-primary);
}
.roi-group-title span{
  font-weight:500;
  color:var(--text-muted);
  font-size:.82rem;
}

.roi-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.roi-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.roi-card-label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text-muted);
  text-transform:uppercase;
  margin-bottom:10px;
}
.roi-card-value{
  font-size:1.7rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.roi-card-value--pos{ color:var(--accent); }
.roi-card-value--neg{ color:var(--negative); }
.roi-card-value i{ font-size:1rem; }

.roi-card-foot{
  display:flex;
  justify-content:space-between;
  background:var(--bg);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  margin-bottom:10px;
}
.roi-card-foot > div{ display:flex; flex-direction:column; gap:4px; }
.roi-card-foot span{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--text-muted);
  text-transform:uppercase;
}
.roi-card-foot strong{ font-size:.86rem; font-weight:700; }

.roi-card-note{ font-size:.74rem; color:var(--text-muted); }

/* ================= DATA TABLE (Transactions) ================= */
.data-table{
  margin-bottom:0;
  font-size:.85rem;
  border-collapse:separate;
  border-spacing:0 8px;
}
.data-table thead th{
  background:var(--accent);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
  border:none;
  padding:12px 16px;
  white-space:nowrap;
}
.data-table thead th:first-child{ border-radius:8px 0 0 8px; }
.data-table thead th:last-child{ border-radius:0 8px 8px 0; }

.data-table tbody td{
  background:linear-gradient(180deg, #fff 0%, var(--accent-soft) 100%);
  padding:14px 16px;
  color:#000;
  font-weight:500;
  border:none;
  vertical-align:middle;
  white-space:nowrap;
}
.data-table tbody td:first-child{ border-radius:8px 0 0 8px; }
.data-table tbody td:last-child{ border-radius:0 8px 8px 0; }
.data-table tbody tr:hover td{ background:linear-gradient(180deg, #fff 0%, #e3f0ff 100%); }

.table-empty-cell{
  background:transparent !important;
  text-align:center;
  color:var(--text-muted);
  padding:32px 12px !important;
  white-space:normal !important;
  border-radius:8px !important;
}

.table-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:16px;
  flex-wrap:wrap;
}
.table-pagination-info{
  font-size:.8rem;
  color:var(--text-secondary);
}
.table-pagination-controls{
  display:flex;
  gap:8px;
}

.pagination-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.page-btn{
  min-width:36px;
  height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-secondary);
  font-size:.85rem;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.page-btn:hover:not(:disabled){
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.page-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.page-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}
.page-ellipsis{
  padding:0 4px;
  color:var(--text-muted);
  font-size:.85rem;
}

/* ================= EMPTY STATE ================= */
.empty-state{
  color:var(--text-secondary);
}
.empty-state i{
  font-size:2rem;
  color:var(--text-muted);
  margin-bottom:12px;
  display:inline-block;
}

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width: 1100px){
  .summary-highlight-grid,
  .summary-grid{ grid-template-columns:repeat(2, 1fr); }
  .roi-grid{ grid-template-columns:1fr; }
}

@media (max-width: 992px){
  .sidebar{
    position:fixed;
    left:-260px;
    z-index:1030;
    transition:left .2s ease;
    box-shadow:var(--shadow-md);
  }
  .sidebar.show{ left:0; }
  .main-content{ padding:16px 18px 48px; }
  .analytics-page .btn.seg-btn, .analytics-page .btn.pill-btn, .analytics-page .pill-toggle{
    padding: 0.3rem 0.8rem;
  }
}

@media (max-width: 640px){
  .summary-highlight-grid,
  .summary-grid{ grid-template-columns:1fr; }
  .controls-row{ gap:8px; }
  .segmented{ flex:1; justify-content:space-between; }
  .seg-btn{ padding:6px 10px; }
  .page-head h1{ font-size:1.25rem; }
  .panel-card{ padding:16px 14px 18px; }
  .tabs{ gap:16px; }
}

@media (max-width: 420px){
  .chip{ font-size:.72rem; padding:5px 6px 5px 10px; }
  .stat-value{ font-size:1.4rem; }
  .roi-card-value{ font-size:1.4rem; }
}

/* =======================================================
   REACT-BOOTSTRAP OVERRIDES
   Neutralizes default Bootstrap component styling
   (Button, Card, Badge, Nav, Dropdown) so the classes
   above render exactly as designed. Make sure this file
   is imported AFTER bootstrap/dist/css/bootstrap.min.css.
   ======================================================= */

.analytics-page{
  background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---- Buttons used as segmented / pill controls ---- */
.analytics-page .btn.seg-btn, .analytics-page .btn.pill-btn, .analytics-page .pill-toggle {
    border: none;
    box-shadow: none;
    font-size: 0.9rem;
    padding: 0.3rem 1.2rem;
}
.analytics-page .btn.seg-btn:focus,
.analytics-page .btn.pill-btn:focus,
.analytics-page .pill-toggle:focus{
  box-shadow:none;
}
.analytics-page .btn.seg-btn.active,
.analytics-page .btn.seg-btn.active:hover,
.analytics-page .btn.seg-btn.active:focus{
  background:var(--text-primary);
  color:#fff;
  border-color:var(--text-primary);
}
.analytics-page .btn.seg-btn:not(.active):hover{
  background:var(--bg);
  color:var(--text-primary);
}
.analytics-page ButtonGroup.segmented,
.analytics-page .segmented{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:3px;
  gap:2px;
}
.analytics-page .segmented > .btn{
  border-radius:var(--radius-pill) !important;
}

.analytics-page .pill-toggle{
  display:inline-flex;
  align-items:center;
  background:var(--surface);
  color:var(--text-secondary);
}
.analytics-page .pill-toggle::after{ display:none; } /* hide default caret, we use our own icon */

/* ---- Cards (stat / panel / roi) ---- */
.analytics-page .card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding: 0;
}
.analytics-page .card.panel-card,
.analytics-page .card.roi-card{
  border-radius:var(--radius-lg);
}
.analytics-page .card .card-body{
  padding:16px 18px;
}
.analytics-page .card.stat-card--lg .card-body{
  padding:20px 22px;
}
.analytics-page .card.panel-card .card-body{
  padding:20px 22px 22px;
}
.analytics-page .card.roi-card .card-body{
  padding:18px 20px;
}
.analytics-page .card.empty-state .card-body{
  text-align:center;
  padding:64px 24px;
}

/* ---- Badge used for chips ---- */
.analytics-page .badge.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  padding:6px 8px 6px 14px;
  font-size:.8rem;
  font-weight:600;
  color:var(--text-primary);
}
.analytics-page .badge.chip .chip-close{
  padding: 0.2rem;
  width:20px; height:20px;
  border-radius:50%;
}

/* ---- Nav / tabs ---- */
.analytics-page .nav-tabs.tabs{
  border-bottom:1px solid var(--border);
  gap:24px;
  flex-wrap:nowrap;
  overflow-y: hidden;
}
.analytics-page .nav-tabs .nav-link.tab-link{
  border:none;
  background:transparent;
  padding:10px 2px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--text-secondary);
  border-radius:0;
}
.analytics-page .nav-tabs .nav-link.tab-link:hover{
  border:none;
  color:var(--text-primary);
}
.analytics-page .nav-tabs .nav-link.tab-link.active{
  background:transparent;
  border:none;
  color:var(--accent);
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* ---- Dropdown menu ---- */
.analytics-page .dropdown-menu{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  font-size:.85rem;
  padding:6px;
}
.analytics-page .dropdown-item{
  border-radius:var(--radius-sm);
  padding:8px 10px;
}
.analytics-page .dropdown-item:active,
.analytics-page .dropdown-item:hover{
  background:var(--accent-soft);
  color:var(--accent);
}

/* ---- Search input group ---- */
.analytics-page .search-box.input-group{
  max-width:720px;
  box-shadow:var(--shadow-sm);
  border-radius:var(--radius-md);
  overflow:hidden;
 padding: 0.4rem 1rem;
}
.analytics-page .search-box .input-group-text{
  background:var(--surface);
  border:1px solid var(--border);
  border-right:none;
  color:var(--text-muted);
   border: none;
}
.analytics-page .search-box .form-control{
  border:1px solid var(--border);
  border-left:none;
  font-size:.88rem;
   border: none;
}
.analytics-page .search-box .form-control:focus{
  box-shadow:none;
  border-color:var(--border);
}

/* ---- Empty state icons ---- */
.analytics-page .empty-state svg{
  font-size:2rem;
  width:2rem;
  height:2rem;
  color:var(--text-muted);
  margin-bottom:12px;
}
.analytics-page .empty-state h3{
  font-size:1rem;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 6px;
}
.analytics-page .empty-state p{
  font-size:.85rem;
  color:var(--text-secondary);
  margin:0;
}