/**
 * AIOX Analytics - WordPress Native Styles
 * Lightweight chart and stats styling
 */

/* Main container - use WordPress wrap */
.aiox-analytics-tab-wrapper .aiox-analytics-enhanced {
    max-width: 1400px;
}

/* Header */
.aiox-analytics-tab-wrapper .aiox-analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

.aiox-analytics-tab-wrapper .aiox-header-content {
    display: flex;
    align-items: center;
}

.aiox-analytics-tab-wrapper .aiox-header-content h1 {
    font-size: 23px;
    font-weight: 400;
    margin: 0;
    color: #1d2327;
}

.aiox-analytics-tab-wrapper .aiox-subtitle {
    color: #646970;
    font-size: 13px;
}

.aiox-analytics-tab-wrapper .aiox-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.aiox-analytics-tab-wrapper .aiox-period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aiox-analytics-tab-wrapper .aiox-period-selector label {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.aiox-analytics-tab-wrapper .aiox-select {
    padding: 6px 10px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    background: #fff;
}

/* Buttons */
.aiox-analytics-tab-wrapper .aiox-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid #8c8f94;
    background: #f6f7f7;
    color: #2c3338;
}

.aiox-analytics-tab-wrapper .aiox-btn:hover {
    background: #f0f0f1;
    border-color: #0a4b78;
    color: #0a4b78;
}

.aiox-analytics-tab-wrapper .aiox-btn-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.aiox-analytics-tab-wrapper .aiox-btn-primary:hover {
    background: #135e96;
    border-color: #135e96;
    color: #fff;
}

.aiox-analytics-tab-wrapper .aiox-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* 5.50.111 — Tabs redesigned. The old WordPress nav-tab look was
   nearly invisible: the active tab was a white pill on a white page
   with a 1px light-gray border, and inactive tabs read as plain text
   links. New design uses a pill-strip pattern with strong active-state
   contrast so navigation is obvious. */
.aiox-analytics-tab-wrapper .aiox-analytics-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    margin-bottom: 22px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

.aiox-analytics-tab-wrapper .aiox-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    text-decoration: none;
    color: #4b5563;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.005em;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
    cursor: pointer;
    white-space: nowrap;
}

.aiox-analytics-tab-wrapper .aiox-tab:hover {
    color: #111827;
    background: rgba(255,255,255,.7);
}

.aiox-analytics-tab-wrapper .aiox-tab.active,
.aiox-analytics-tab-wrapper a.aiox-tab.active,
.aiox-analytics-tab-wrapper .aiox-tab.active span,
.aiox-analytics-tab-wrapper a.aiox-tab.active span {
    /* 5.50.112 — `!important` here is defensive: the inner markup is
       `<a class="aiox-tab"><span>Label</span></a>`, and host/theme
       stylesheets routinely target anchors or anchor-spans with high
       specificity, leaving the active tab's intended white text
       rendered black against the indigo fill. Specificity + bang wins. */
    color: #ffffff !important;
}

.aiox-analytics-tab-wrapper .aiox-tab.active {
    background: #4338ca; /* indigo accent — matches the dashboard's existing accent palette */
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(67,56,202,.35), 0 1px 2px rgba(0,0,0,.06);
}

.aiox-analytics-tab-wrapper .aiox-tab.active:hover {
    background: #3730a3;
}

.aiox-analytics-tab-wrapper .aiox-tab .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
}

/* Tab content */
.aiox-analytics-tab-wrapper .aiox-tab-content {
    display: none;
}

.aiox-analytics-tab-wrapper .aiox-tab-content.active {
    display: block;
}

/* Metrics Grid */
.aiox-analytics-tab-wrapper .aiox-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.aiox-analytics-tab-wrapper .aiox-metric-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-blue { border-left: 4px solid #2271b1; }
.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-purple { border-left: 4px solid #8b5cf6; }
.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-green { border-left: 4px solid #00a32a; }
.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-orange { border-left: 4px solid #dba617; }
.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-pink { border-left: 4px solid #d63638; }
.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-teal { border-left: 4px solid #0097a7; }
.aiox-analytics-tab-wrapper .aiox-metric-card.gradient-gray { border-left: 4px solid #646970; }

/* Info Tooltip */
.aiox-analytics-tab-wrapper .aiox-info-tooltip {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    cursor: help;
}

.aiox-analytics-tab-wrapper .aiox-info-tooltip .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: #646970;
}

.aiox-analytics-tab-wrapper .aiox-info-tooltip:hover .dashicons {
    color: #2271b1;
}

/* Secondary Metrics - Smaller Cards */
.aiox-analytics-tab-wrapper .aiox-metrics-secondary {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.aiox-analytics-tab-wrapper .aiox-metric-card-small {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-left: 3px solid #8c8f94;
    border-radius: 4px;
}

.aiox-analytics-tab-wrapper .aiox-metric-icon-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f0f0f1;
    border-radius: 4px;
}

.aiox-analytics-tab-wrapper .aiox-metric-icon-small .dashicons {
    color: #646970;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.aiox-analytics-tab-wrapper .aiox-metric-value-small {
    font-size: 18px;
    font-weight: 600;
    color: #1d2327;
    line-height: 1.2;
}

.aiox-analytics-tab-wrapper .aiox-metric-label-small {
    font-size: 11px;
    color: #646970;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.aiox-analytics-tab-wrapper .aiox-metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #f0f0f1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiox-analytics-tab-wrapper .aiox-metric-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #646970;
}

.aiox-analytics-tab-wrapper .aiox-metric-value {
    font-size: 24px;
    font-weight: 600;
    color: #1d2327;
}

.aiox-analytics-tab-wrapper .aiox-metric-label {
    font-size: 12px;
    color: #646970;
}

/* Charts Grid */
.aiox-analytics-tab-wrapper .aiox-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.aiox-analytics-tab-wrapper .aiox-chart-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px;
}

.aiox-analytics-tab-wrapper .aiox-chart-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
}

.aiox-analytics-tab-wrapper .aiox-chart-card h3 .dashicons {
    color: #2271b1;
}

.aiox-analytics-tab-wrapper .aiox-chart-container {
    position: relative;
    height: 250px;
}

/* Tables */
.aiox-analytics-tab-wrapper .aiox-table-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.aiox-analytics-tab-wrapper .aiox-table-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
}

.aiox-analytics-tab-wrapper .aiox-table {
    width: 100%;
    border-collapse: collapse;
}

.aiox-analytics-tab-wrapper .aiox-table th,
.aiox-analytics-tab-wrapper .aiox-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
}

.aiox-analytics-tab-wrapper .aiox-table th {
    font-weight: 600;
    background: #f6f7f7;
}

.aiox-analytics-tab-wrapper .aiox-table tbody tr:hover {
    background: #f6f7f7;
}

/* Info Banner */
.aiox-analytics-tab-wrapper .aiox-info-banner {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: #f0f6fc;
    border-left: 4px solid #72aee6;
    margin-bottom: 20px;
}

.aiox-analytics-tab-wrapper .aiox-info-banner .dashicons {
    color: #72aee6;
    flex-shrink: 0;
}

.aiox-analytics-tab-wrapper .aiox-info-banner strong {
    display: block;
    margin-bottom: 4px;
}

.aiox-analytics-tab-wrapper .aiox-info-banner p {
    margin: 0;
    color: #646970;
    font-size: 13px;
}

/* Loading States */
.aiox-analytics-tab-wrapper .aiox-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.aiox-analytics-tab-wrapper .aiox-spinner-wrapper {
    text-align: center;
}

.aiox-analytics-tab-wrapper .aiox-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f0f0f1;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

.aiox-analytics-tab-wrapper .aiox-spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid #f0f0f1;
    border-top-color: #2271b1;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.aiox-analytics-tab-wrapper .aiox-spin {
    animation: spin 1s linear infinite;
}

.aiox-analytics-tab-wrapper .spinning {
    animation: spin 1s linear infinite;
    display: inline-block;
}

/* Animated counting placeholder */
.aiox-analytics-tab-wrapper .aiox-counting {
    display: inline-block;
    animation: pulse 1.5s ease-in-out infinite;
    color: #999;
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.aiox-analytics-tab-wrapper .aiox-loading-cell {
    text-align: center;
    padding: 30px !important;
    color: #646970;
}

/* Empty State */
.aiox-analytics-tab-wrapper .aiox-empty-state {
    text-align: center;
    padding: 40px;
    background: #f0f0f1;
    border-radius: 4px;
    color: #646970;
}

.aiox-analytics-tab-wrapper .aiox-empty-state .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #c3c4c7;
    margin-bottom: 10px;
}

/* Responsive */
@media screen and (max-width: 782px) {
    .aiox-analytics-tab-wrapper .aiox-analytics-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .aiox-analytics-tab-wrapper .aiox-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .aiox-analytics-tab-wrapper .aiox-charts-grid {
        grid-template-columns: 1fr;
    }
    
    .aiox-analytics-tab-wrapper .aiox-analytics-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    /* 5.50.111 — Keep pills from squishing on small screens; let
       the horizontal scroll handle overflow instead. */
    .aiox-analytics-tab-wrapper .aiox-tab {
        flex: 0 0 auto;
    }
}

/* Visitor Logs Styles */
.aiox-analytics-tab-wrapper .aiox-visitor-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

.aiox-analytics-tab-wrapper .aiox-type-human {
    background: #d1e7dd;
    color: #0f5132;
}

.aiox-analytics-tab-wrapper .aiox-type-ai {
    background: #e7d6f8;
    color: #5e2b97;
}

.aiox-analytics-tab-wrapper .aiox-type-search {
    background: #cfe2ff;
    color: #084298;
}

.aiox-analytics-tab-wrapper .aiox-type-bot,
.aiox-analytics-tab-wrapper .aiox-type-social,
.aiox-analytics-tab-wrapper .aiox-type-seo,
.aiox-analytics-tab-wrapper .aiox-type-monitoring,
.aiox-analytics-tab-wrapper .aiox-type-feed,
.aiox-analytics-tab-wrapper .aiox-type-security,
.aiox-analytics-tab-wrapper .aiox-type-archive,
.aiox-analytics-tab-wrapper .aiox-type-automation,
.aiox-analytics-tab-wrapper .aiox-type-infrastructure,
.aiox-analytics-tab-wrapper .aiox-type-tool {
    background: #fff3cd;
    color: #664d03;
}

.aiox-analytics-tab-wrapper .aiox-type-unidentified,
.aiox-analytics-tab-wrapper .aiox-type-unknown {
    background: #e2e3e5;
    color: #41464b;
}

/* 5.50.68 — "Analyzing" interim state. Rows that are still unidentified
   but young enough that the verification beacon or the hourly cron may
   still promote them get this tone instead of the definitive
   "Unidentified" badge. A subtle pulse animation telegraphs that
   the row is still being worked on. */
.aiox-analytics-tab-wrapper .aiox-type-analyzing {
    background: #fef3c7;
    color: #92400e;
    position: relative;
    overflow: hidden;
}
.aiox-analytics-tab-wrapper .aiox-type-analyzing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
    animation: aiox-analyzing-pulse 1.8s ease-in-out infinite;
}
@keyframes aiox-analyzing-pulse {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* 5.50.75 — Tiny green check appended to Human badges where the
   Suite's /verify-human JS handshake confirmed a real browser. Inline
   so it sits inside the .aiox-visitor-type pill without disrupting
   the table column width. Tone-matched to .aiox-type-human's green so
   it reads as reinforcement rather than a separate state. */
.aiox-analytics-tab-wrapper .aiox-visitor-type .aiox-verified-dot {
    display: inline-block;
    margin-left: 4px;
    color: #198754;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.aiox-analytics-tab-wrapper #visitor-logs-table {
    font-size: 12px;
}

.aiox-analytics-tab-wrapper #visitor-logs-table th {
    background: #f6f7f7;
    font-weight: 600;
}

.aiox-analytics-tab-wrapper #visitor-logs-table td {
    vertical-align: middle;
    padding: 8px 10px;
}

.aiox-analytics-tab-wrapper #debug-log-content {
    line-height: 1.6;
}

.aiox-analytics-tab-wrapper .aiox-info-text code {
    background: #f0f0f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* 5.50.112 — Frontend modal styles. These previously existed only in
   admin.css (wp-admin), which the customer dashboard never loads. The
   #aiox-clear-logs-modal markup carries class="aiox-modal" but had no
   matching rule on the frontend, so it rendered as a normal block-flow
   <div> at the bottom of the page rather than a centered overlay.
   The user had to scroll down to find it. Adding the rules here makes
   Clear Logs (and any future modals using the same class) appear
   centered over the viewport regardless of scroll position. */
body .aiox-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* Inline style on the markup (`style="display:none;"` or `display:flex`
       toggled by JS) controls visibility, so we don't set a default
       display here — that would override the JS-managed hidden state. */
    align-items: center;
    justify-content: center;
    /* 5.50.113 — `contain: paint` walls off the modal's painting from
       the rest of the page so charts/tables behind don't get re-rasterized
       on every hover or scroll while the modal is open. Cheaper and more
       targeted than `will-change`, which would also reserve memory while
       the modal sits hidden in the DOM. */
    contain: paint;
}
body .aiox-modal-backdrop {
    position: absolute;
    inset: 0;
    /* 5.50.113 — Dropped `backdrop-filter: blur(2px)`. It forced the
       browser to capture and re-blur the entire dashboard viewport
       (with its charts and tables) on every paint, locking up the
       page on mid-spec machines. Plain darker tint achieves the
       same "this is foregrounded" effect with zero GPU cost. */
    background: rgba(15,23,42,.65);
}
body .aiox-modal .aiox-modal-content {
    position: relative;
    background: #fff;
    border-radius: 8px;
    width: 92%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
    z-index: 1;
}
body .aiox-modal .aiox-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px 8px 0 0;
}
body .aiox-modal .aiox-modal-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}
body .aiox-modal .aiox-modal-close {
    font-size: 26px;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #6b7280;
    padding: 0 4px;
}
body .aiox-modal .aiox-modal-close:hover {
    color: #d63638;
}
body .aiox-modal .aiox-modal-body {
    padding: 20px;
}
body .aiox-modal .aiox-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 8px 8px;
}
/* Lock page scroll while a modal is open so it really feels modal. */
body.aiox-modal-open {
    overflow: hidden;
}