/* =========================================
   GLOBAL
========================================= */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: #0F0F11;
  font-family: "Inter", Arial, sans-serif;
  color: #FFFFFF;
  display: flex;
  overflow: hidden;
}

h1, h2, h3 {
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #FFFFFF;
}

p {
  color: #B5B5B5;
}

/* =========================================
   LAYOUT
========================================= */
.sidebar {
  width: 240px;
  background: #1A1A1E;
  padding: 20px;
  overflow-y: auto;
  border-right: 1px solid #262626;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 25px;
}

.sidebar-logo {
  width: 180px;
  display: block;
  margin: 0 auto 10px auto;
}

.sidebar-title {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.9;
  color: #0A52D1;
}

.sidebar-nav .nav-item {
  display: block;
  padding: 12px 15px;
  color: #E0E0E0;
  font-size: 15px;
  cursor: pointer;
  border-radius: 6px;
  margin-bottom: 6px;
  transition: background 0.2s, color 0.2s;
}

.sidebar-nav .nav-item:hover {
  background: #0A52D133;
}

.sidebar-nav .nav-item.active {
  background: #0A52D1;
  color: #FFF;
}

.main {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
}

/* =========================================
   TOP BAR
========================================= */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1A1A1E;
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid #262626;
  margin-bottom: 20px;
}

.topbar-left label {
  margin-right: 6px;
  font-size: 14px;
  color: #BBBBBB;
}

.topbar-select {
  background: #0F0F11;
  border: 1px solid #444;
  color: #FFF;
  padding: 6px 10px;
  margin-right: 15px;
  border-radius: 6px;
}

.refresh-btn {
  background: #0A52D1;
  color: #FFF;
  padding: 8px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

.refresh-btn:hover {
  background: #0C63FF;
}

/* =========================================
   KPI CARDS
========================================= */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.kpi-card {
  background: #1A1A1E;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #262626;
}

.kpi-label {
  font-size: 13px;
  color: #A0A0A0;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: #0A52D1;
}

/* =========================================
   CHARTS
========================================= */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.chart-card {
  background: #1A1A1E;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #262626;
}

/* =========================================
   ATTRIBUTION CARDS
========================================= */
.attrib-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.attrib-card {
  background: #1A1A1E;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #262626;
}

/* =========================================
   DATA TABLES
========================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #1A1A1E;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #262626;
  margin-top: 10px;
}

.data-table thead {
  background: #0A52D1;
}

.data-table th {
  font-size: 14px;
  color: #FFF;
  padding: 12px;
  text-align: left;
}

.data-table td {
  padding: 10px;
  border-bottom: 1px solid #333;
  color: #DDD;
  font-size: 14px;
}

.data-table tr:hover td {
  background: #0A52D122;
}

/* =========================================
   PAGINATION
========================================= */
.pagination {
  display: flex;
  align-items: center;
  margin-top: 12px;
}

.page-btn {
  background: #0A52D1;
  padding: 8px 15px;
  border-radius: 6px;
  color: #FFF;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}

.page-btn:hover {
  background: #0C63FF;
}

.page-num {
  font-size: 15px;
}

/* =========================================
   SCREEN TOGGLES
========================================= */
.screen {
  display: none;
}

.screen.active {
  display: block;
}

/* Container card like dashboard widgets */
#visitorJourneyCard {
    background-color: #1e1f26;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

/* Empty-state message */
.empty-state {
    margin-top: 20px;
    padding: 20px;
    background-color: #262730;
    border: 1px dashed #3a3b44;
    border-radius: 8px;
    text-align: center;
    color: #aaa;
}


.data-table th {
    text-align: left;
    padding: 10px;
    background: #0d6efd;
    color: white;
    font-weight: bold;
}

.data-table td {
    padding: 10px;
    border-bottom: 1px solid #333;
    color: #ddd;
}

.data-table tr:hover {
    background-color: #2c2d36;
}

/* Timestamp */
.col-time {
  width: 160px;
}

/* Event */
.col-event {
  width: 100px;
}

/* Page URL – intentionally smaller */
.col-url {
  width: 35%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Visitor ID – give it room */
.col-visitor {
  width: 35%;
  white-space: normal;
  word-break: break-all;
}

/* Prevent wrapping for IDs */
.data-table td,
.data-table th {
    word-break: normal;
}

/* Conversions table specific */
#screen-conversions th:nth-child(1) { width: 160px; } /* Timestamp */
#screen-conversions th:nth-child(2) { width: 120px; } /* Event */
#screen-conversions th:nth-child(3) { width: auto; }  /* Source (URL) */
#screen-conversions th:nth-child(4) {
    width: 340px;        /* Visitor ID */
    white-space: nowrap;
}

/* Events table specific */
#screen-events th:nth-child(1) { width: 160px; } /* Timestamp */
#screen-events th:nth-child(2) { width: auto; }  /* Page */
#screen-events th:nth-child(3) { width: 140px; } /* Source */
#screen-events th:nth-child(4) { width: 120px; } /* Medium */
#screen-events th:nth-child(5) { width: 160px; } /* Campaign */
#screen-events th:nth-child(6) {
    width: 240px;        /* Visitor */
    white-space: nowrap;
}

/* Only break long IDs when needed */
.col-visitor {
  word-break: break-all;
}

.col-visitor {
  cursor: pointer;
  user-select: all;
}

.visitor-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.visitor-controls input {
    margin-left: auto;
    padding: 6px 10px;
    width: 260px;
}

.copy-id {
    cursor: pointer;
    font-family: monospace;
}

.visitor-journey-title {
    font-weight: 600;
    margin-bottom: 12px;
    color: #cfd8ff;
    word-break: break-all;
}

/* ============================= */
/* ATTRIBUTION PAGE (DETAIL)     */
/* ============================= */

#screen-attribution {
  max-width: 1100px;
  margin: 0 auto;
}

.attr-block {
  background: #151515;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 28px;
}

.attr-block h3 {
  margin-bottom: 12px;
  font-size: 18px;
  color: #ffffff;
}

/* Attribution tables */
.attr-block table {
  width: 100%;
  border-collapse: collapse;
}

.attr-block th {
  text-align: left;
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 1px solid #2a2a2a;
  color: #bfbfbf;
}

.attr-block td {
  padding: 8px;
  border-bottom: 1px solid #1f1f1f;
}

/* Right-align numeric columns */
.attr-block th:last-child,
.attr-block td:last-child {
  text-align: right;
}

/* =========================================
   TABLE LAYOUT FIXES (EVENTS & JOURNEY)
========================================= */

/* Events & User Journey: allow wrapping */
#screen-events td,
#screen-visitor td {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}

/* Page URL columns specifically */
#screen-events th:nth-child(2),
#screen-visitor th:nth-child(3) {
  width: 45%;
}

/* Prevent timestamp + source from collapsing */
#screen-events th:nth-child(1),
#screen-visitor th:nth-child(1) {
  width: 160px;
  white-space: nowrap;
}

/* Source column tidy */
#screen-events th:nth-child(3),
#screen-visitor th:nth-child(4) {
  width: 140px;
  white-space: nowrap;
}

/* Dashboard + Attribution tables stay fixed */
#screen-dashboard table,
#screen-attribution table {
  table-layout: fixed;
}

.table-search {
    width: 320px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    border-radius: 6px;
}

/* =========================================
   USER JOURNEY TABLE COLUMN FIX
========================================= */

#screen-visitor .data-table {
  table-layout: fixed;
}

/* Visitor ID — flexible, largest column */
#screen-visitor th:nth-child(1),
#screen-visitor td:nth-child(1) {
  width: 36%;
  word-break: break-all;
}

/* Events */
#screen-visitor th:nth-child(2),
#screen-visitor td:nth-child(2) {
  width: 90px;
  text-align: center;
}

/* Sessions */
#screen-visitor th:nth-child(3),
#screen-visitor td:nth-child(3) {
  width: 90px;
  text-align: center;
}

/* Conversions */
#screen-visitor th:nth-child(4),
#screen-visitor td:nth-child(4) {
  width: 110px;
  text-align: center;
}

/* Last Seen */
#screen-visitor th:nth-child(5),
#screen-visitor td:nth-child(5) {
  width: 170px;
  white-space: nowrap;
}

/* First Seen */
#screen-visitor th:nth-child(6),
#screen-visitor td:nth-child(6) {
  width: 170px;
  white-space: nowrap;
}