/* Table */
.ap-table thead th {
  font-size: .72rem;
  color: var(--ap-secondary);
  font-weight: 700;
  border-bottom: 1px solid var(--ap-border);
  padding: .75rem .6rem;
  white-space: nowrap;
}

.ap-table tbody td {
  padding: .8rem .6rem;
  border-bottom: 1px solid var(--ap-border);
  vertical-align: middle;
  font-size: .85rem;
  color: var(--ap-text);
}

.ap-trend-chip {
  font-size: .72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .15rem;
}

.ap-trend-chip.up {
  color: var(--ap-success);
}

.ap-trend-chip.down {
  color: var(--ap-danger);
}

/* Geo bars */
.ap-geo-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
}

.ap-geo-flag {
  font-size: 1.3rem;
  width: 26px;
  text-align: center;
}

.ap-geo-name {
  font-size: .83rem;
  color: var(--ap-text-strong);
  font-weight: 600;
  width: 110px;
  flex-shrink: 0;
}

.ap-geo-bar-bg {
  flex: 1;
  background: var(--ap-bg);
  border-radius: 10px;
  height: 8px;
  overflow: hidden;
}

.ap-geo-bar {
  height: 100%;
  background: var(--ap-primary);
  border-radius: 10px;
}

.ap-geo-pct {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ap-text-strong);
  width: 42px;
  text-align: right;
}

/* ============ Utility classes (extracted from inline styles) ============ */

/* Font sizes */
.ap-fs-13 {
  font-size: 1.3rem;
}

.ap-fs-06 {
  font-size: .6rem;
}

.ap-fs-085 {
  font-size: .85rem;
}

/* Text colors */
.ap-color-strong {
  color: var(--ap-text-strong);
}

.ap-color-secondary {
  color: var(--ap-secondary);
}

/* Transparent button (topbar user) */
.ap-btn-transparent {
  background: transparent;
}

/* Small dropdown menu */
.ap-menu-sm {
  font-size: .85rem;
}

/* Funnel bar color variants */
.ap-funnel-primary {
  background: var(--ap-primary);
}

.ap-funnel-info {
  background: var(--ap-info);
}

.ap-funnel-warning {
  background: var(--ap-warning);
}

.ap-funnel-orange {
  background: #F97316;
}

.ap-funnel-success {
  background: var(--ap-success);
}

/* Funnel bar widths */
.ap-funnel-w-100 {
  width: 100%;
}

.ap-funnel-w-64 {
  width: 64%;
}

.ap-funnel-w-31 {
  width: 31%;
}

.ap-funnel-w-18 {
  width: 18%;
}

.ap-funnel-w-684 {
  width: 6.84%;
}

/* Device legend icon colors */
.ap-dev-icon-primary {
  color: var(--ap-primary);
}

.ap-dev-icon-info {
  color: var(--ap-info);
}

.ap-dev-icon-warning {
  color: var(--ap-warning);
}

/* Geo bar widths */
.ap-geo-w-38 {
  width: 38%;
}

.ap-geo-w-24 {
  width: 24%;
}

.ap-geo-w-11 {
  width: 11%;
}

.ap-geo-w-9 {
  width: 9%;
}

.ap-geo-w-7 {
  width: 7%;
}

/* Page search input */
.ap-page-search {
  max-width: 200px;
  background: var(--ap-bg);
  border-color: var(--ap-border);
  color: var(--ap-text-strong);
}

/* Footer */
.ap-footer {
  color: var(--ap-secondary);
}

/* Traffic & Revenue Trend Chart */
#trendChart {
    width: 100% !important;
    height: 360px !important;
    min-height: 360px !important;
}

.trend-chart-wrap {
    position: relative;
    width: 100%;
    height: 360px;
}

/* Responsive */
@media (max-width: 767.98px) {
    #trendChart {
        height: 300px !important;
        min-height: 300px !important;
    }

    .trend-chart-wrap {
        height: 300px;
    }
}