/**
 * ============================================================================
 * File: les-avartan-analytics.css
 * Purpose: Styles for the WebApp Usage Analytics dashboard rendered inside
 *          WooCommerce My Account — Les Avartan Network plugin.
 *
 * Design tokens are intentionally aligned with les-avartan-network-public.css:
 *   --pv-green       : #A9CB52   (primary CTA / chart line)
 *   --pv-brown       : #69381c   (headings / borders)
 *   --pv-brown-dark  : #3d2b1f   (text / chart labels)
 *   --pv-beige       : #efdecd   (card borders / input borders)
 *   --pv-beige-light : #fbf7f2   (card backgrounds)
 *   --pv-muted       : #8a7060   (secondary labels)
 *
 * Version: 1.1.0
 * Author:  Punaravartan Development Team
 *
 * Responsive breakpoints (mobile-first aware):
 *   > 1200px  : 4-col filters, 5-col stat cards       (large desktop)
 *   ≤ 1200px  : 2-col filters, 3-col stat cards       (small desktop / tablet landscape)
 *   ≤ 900px   : 2-col filters, 2-col stat cards       (tablet portrait)
 *   ≤ 767px   : 1-col filters, 2-col stat cards, card tables → card view  (large phone)
 *   ≤ 480px   : 1-col everything, reduced font/padding (medium phone)
 *   ≤ 380px   : extra compact for small phones (Galaxy Fold, iPhone SE)
 * ============================================================================
 */

/* ============================================================================
   WRAPPER
   ============================================================================ */
.les-analytics-wrap
{
    padding-bottom : 40px;
    color          : #3d2b1f;
    /* Prevent any child from breaking the viewport width */
    overflow-x     : hidden;
    max-width      : 100%;
    box-sizing     : border-box;
}

.les-analytics-title
{
    font-size     : 22px;
    font-weight   : 700;
    color         : #3d2b1f;
    margin        : 0 0 24px;
    padding-bottom: 14px;
    border-bottom : 2px solid #efdecd;
    display       : flex;
    align-items   : center;
    gap           : 10px;
    /* Allow wrapping so the title doesn't clip on narrow screens */
    flex-wrap     : wrap;
    word-break    : break-word;
}

.les-analytics-title i
{
    color       : #A9CB52;
    flex-shrink : 0;
}

/* ============================================================================
   CARDS — base style shared by every panel
   ============================================================================ */
.les-analytics-card
{
    background    : #fff;
    border        : 1px solid #e8e0d5;
    border-radius : 12px;
    padding       : 24px;
    margin-bottom : 24px;
    box-shadow    : 0 2px 12px rgba(0, 0, 0, 0.05);
    /* Guarantee cards never overflow the wrap */
    box-sizing    : border-box;
    max-width     : 100%;
    overflow      : hidden;
}

.les-analytics-card-header
{
    display         : flex;
    justify-content : space-between;
    align-items     : flex-start;   /* was center — flex-start prevents subtitle from being cut */
    flex-wrap       : wrap;
    gap             : 6px;
    margin-bottom   : 20px;
    padding-bottom  : 14px;
    border-bottom   : 1px solid #efdecd;
}

.les-analytics-card-title
{
    margin      : 0;
    font-size   : 17px;
    font-weight : 700;
    color       : #3d2b1f;
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-shrink : 0;
}

.les-analytics-header-actions,
.les-analytics-section-header
{
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 12px;
    flex-wrap       : wrap;
}

.les-analytics-header-actions
{
    margin-left : auto;
}

.les-analytics-section-header
{
    margin-bottom : 16px;
}

.les-analytics-section-header .les-analytics-section-sub
{
    margin-bottom : 0;
}

.les-analytics-export-btn
{
    min-height  : 36px;
    line-height : 1;
    white-space : nowrap;
}

.les-export-notice
{
    display        : none;
    width          : 100%;
    box-sizing     : border-box;
    padding        : 12px 16px;
    margin-bottom  : 12px;
    border-radius  : 6px;
    border-left    : 5px solid #A9CB52;
    background     : #fff;
    color          : #2f2a24;
    font-size      : 14px;
    line-height    : 1.5;
}

.les-export-notice.is-visible
{
    display        : block;
}

.les-export-notice--success
{
    background        : #f0faf3;
    border-left-color : #28a745;
    color             : #1a5c2e;
}

.les-export-notice--error
{
    background        : #fff5f5;
    border-left-color : #dc3545;
    color             : #7b1a22;
}

.les-export-notice a
{
    display         : inline-block;
    margin-top      : 6px;
    color           : #5f7f18;
    font-weight     : 700;
    text-decoration : underline;
}

.les-analytics-card-title i
{
    color : #A9CB52;
}

.les-analytics-card-subtitle
{
    font-size  : 12px;
    font-weight: 500;
    color      : #8a7060;
    /* Removed white-space: nowrap — it was causing overflow on narrow screens */
    white-space: normal;
    word-break : break-word;
    text-align : right;
    max-width  : 100%;
}

/* ============================================================================
   FILTERS PANEL
   ============================================================================ */
.les-analytics-filters
{
    background   : #fbf7f2;
    border-color : #efdecd;
}

.les-analytics-filters-grid
{
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 16px;
    align-items           : flex-end;
}

/* Date inputs */
.les-analytics-date
{
    width         : 100% !important;
    height        : 52px !important;
    border        : 2px solid #efdecd !important;
    border-radius : 6px !important;
    padding       : 0 14px !important;
    font-size     : 14px !important;
    color         : #2c2420;
    background    : #fff;
    box-sizing    : border-box;
    cursor        : pointer;
    /* Prevent native date pickers from growing beyond card width */
    max-width     : 100%;
}

.les-analytics-date:focus
{
    border-color : #A9CB52 !important;
    outline      : none;
}

.les-analytics-filter-actions
{
    display         : flex;
    justify-content : flex-start;
    align-items     : flex-end;
    width           : 100%;
}

#applyAnalyticsFilters
{
    width       : 100%;
    gap         : 6px;
    white-space : nowrap;
}

/* ============================================================================
   STAT CARDS ROW (registration summary)
   ============================================================================ */
.les-analytics-stats-row
{
    display               : grid;
    grid-template-columns : repeat(5, 1fr);
    gap                   : 16px;
    margin-bottom         : 24px;
}

.les-analytics-stat-card
{
    border-radius : 12px;
    padding       : 20px 16px;
    text-align    : center;
    transition    : transform 0.15s ease, box-shadow 0.15s ease;
    cursor        : default;
    box-sizing    : border-box;
}

.les-analytics-stat-card:hover
{
    transform  : translateY(-2px);
    box-shadow : 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Olive / green variant (registration counts) */
.les-analytics-stat-card--olive
{
    background : #f4fbea;
    border     : 1px solid #d4e8a0;
}

/* Brown variant (login totals) */
.les-analytics-stat-card--brown
{
    background : #fdf4e8;
    border     : 1px solid #efdecd;
}

/* Green variant (login totals) */
.les-analytics-stat-card--green
{
    background : #ecfdf5;
    border     : 1px solid #a7f3d0;
}

.les-analytics-stat-icon
{
    font-size     : 22px;
    margin-bottom : 8px;
    color         : #A9CB52;
}

.les-analytics-stat-card--brown .les-analytics-stat-icon { color : #69381c; }
.les-analytics-stat-card--green .les-analytics-stat-icon { color : #10B981; }

.les-analytics-stat-value
{
    font-size    : 30px;
    font-weight  : 800;
    line-height  : 1.1;
    color        : #3d2b1f;
    margin-bottom: 6px;
}

.les-analytics-stat-label
{
    font-size  : 12px;
    font-weight: 500;
    color      : #8a7060;
    line-height: 1.35;
    word-break : break-word;
}

/* ============================================================================
   LOADER SPINNER
   ============================================================================ */
.les-analytics-loader
{
    display         : none;
    justify-content : center;
    align-items     : center;
    padding         : 30px 0;
    min-height      : 80px;
}

.les-analytics-loader .listingPageLoader
{
    width  : 36px;
    height : 36px;
}

/* ============================================================================
   CHART CANVAS WRAPPER
   ============================================================================ */
.les-analytics-chart-wrap
{
    position  : relative;
    min-height: 260px;
    width     : 100%;
    max-width : 100%;
    box-sizing: border-box;
}

.les-analytics-chart-wrap canvas
{
    display   : block;
    /* Explicit width 100% ensures Chart.js never renders wider than the card */
    width     : 100% !important;
    max-width : 100%;
    max-height: 340px;
    margin    : 0 auto;
    box-sizing: border-box;
}

/* ============================================================================
   INLINE REGISTRATION STAT CARD (JS-injected when a single type is selected)
   ============================================================================ */
#regStatCard
{
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    padding         : 32px 16px 24px;
    text-align      : center;
    gap             : 12px;
    box-sizing      : border-box;
    max-width       : 100%;
}

#regStatCard .reg-stat-icon-circle
{
    width           : 72px;
    height          : 72px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 28px;
    flex-shrink     : 0;
}

#regStatCard .reg-stat-count
{
    font-size   : 52px;
    font-weight : 800;
    color       : #3d2b1f;
    line-height : 1;
}

#regStatCard .reg-stat-type
{
    font-size   : 16px;
    font-weight : 600;
    color       : #3d2b1f;
}

#regStatCard .reg-stat-range
{
    font-size  : 12px;
    color      : #8a7060;
    word-break : break-word;
    text-align : center;
}

/* ============================================================================
   TABLE WRAPPER — horizontal scroll on overflow
   ============================================================================ */
.table-wrapper
{
    width      : 100%;
    overflow-x : auto;
    -webkit-overflow-scrolling : touch; /* smooth momentum scroll on iOS */
    box-sizing : border-box;
}

/* Minimum column widths prevent tables from collapsing too aggressively */
#mapClicksTable,
#topUsersTable
{
    min-width : 480px;
}

/* ============================================================================
   EMPTY CELL
   ============================================================================ */
.les-analytics-empty-cell
{
    text-align : center !important;
    color      : #8a7060 !important;
    font-style : italic;
    padding    : 24px !important;
}

/* ============================================================================
   MAP CLICKS TABLE
   ============================================================================ */
.les-analytics-map-link
{
    color           : #A9CB52 !important;
    font-weight     : 600;
    font-size       : 13px !important;
    text-decoration : none;
    display         : inline-flex;
    align-items     : center;
    gap             : 5px;
    padding         : 4px 10px;
    border-radius   : 6px;
    transition      : all 0.15s ease;
    white-space     : nowrap;
}

.les-analytics-map-link:hover
{
    background : #A9CB52;
    color      : #fff !important;
}

.les-analytics-click-badge
{
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    min-width       : 36px;
    height          : 28px;
    padding         : 0 10px;
    background      : #fdf4e8;
    border          : 1px solid #efdecd;
    border-radius   : 20px;
    font-size       : 13px;
    font-weight     : 700;
    color           : #69381c;
}

/* ============================================================================
   LOGIN ANALYTICS — TOTALS ROW
   ============================================================================ */
.les-analytics-login-totals
{
    display               : grid;
    grid-template-columns : repeat(2, 1fr);
    gap                   : 16px;
    margin-bottom         : 6px;
}

/* ============================================================================
   TOP-10 USERS SECTION
   ============================================================================ */
.les-analytics-top-users
{
    margin-top : 28px;
}

.les-analytics-section-sub
{
    font-size   : 15px;
    font-weight : 700;
    color       : #3d2b1f;
    margin      : 0 0 16px;
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-wrap   : wrap;
}

.les-analytics-section-sub i
{
    color       : #F59E0B;
    flex-shrink : 0;
}

/* ============================================================================
   TYPE BADGE
   ============================================================================ */
.les-analytics-type-badge
{
    display        : inline-block;
    padding        : 3px 10px;
    border-radius  : 20px;
    font-size      : 11px;
    font-weight    : 600;
    text-transform : capitalize;
    /* Removed white-space: nowrap — caused overflow on narrow cells */
    white-space    : normal;
    word-break     : break-word;
    max-width      : 100%;
    background     : #fdf4e8;
    color          : #69381c;
    border         : 1px solid #efdecd;
}

/* Per-type colour overrides */
.les-analytics-type-badge--donor          { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.les-analytics-type-badge--artisan        { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.les-analytics-type-badge--clay-processor { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.les-analytics-type-badge--clay-collector { background: #fdf4e8; color: #69381c; border-color: #efdecd; }
.les-analytics-type-badge--receiver       { background: #f5f3ff; color: #4c1d95; border-color: #ddd6fe; }
.les-analytics-type-badge--pmc            { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.les-analytics-type-badge--administrator  { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.les-analytics-type-badge--partner        { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 1200px — small desktop / tablet landscape
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px)
{
    .les-analytics-stats-row
    {
        grid-template-columns : repeat(3, 1fr);
    }

    .les-analytics-filters-grid
    {
        grid-template-columns : repeat(2, 1fr);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 900px — tablet portrait
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px)
{
    .les-analytics-stats-row
    {
        grid-template-columns : repeat(2, 1fr);
    }

    /* Reduce chart height slightly to leave room for legend on tablet portrait */
    .les-analytics-chart-wrap canvas
    {
        max-height : 300px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 767px — large phone / small tablet
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px)
{
    .les-analytics-wrap
    {
        padding-bottom : 24px;
    }

    .les-analytics-card
    {
        padding       : 16px;
        border-radius : 10px;
        margin-bottom : 16px;
    }

    .les-analytics-title
    {
        font-size      : 19px;
        margin-bottom  : 18px;
        padding-bottom : 12px;
    }

    /* Filters — full-width stack */
    .les-analytics-filters-grid
    {
        grid-template-columns : 1fr;
        gap                   : 12px;
    }

    /* Stats — 2 columns still comfortable at 767px */
    .les-analytics-stats-row
    {
        grid-template-columns : repeat(2, 1fr);
        gap                   : 12px;
    }

    /* Login totals remain 2-col at 767px */

    /* Card header — subtitle drops below title */
    .les-analytics-card-header
    {
        flex-direction : column;
        align-items    : flex-start;
    }

    .les-analytics-card-subtitle
    {
        text-align : left;
    }

    .les-analytics-card-title
    {
        font-size : 15px;
    }

    /* Charts */
    .les-analytics-chart-wrap
    {
        min-height : 200px;
    }

    .les-analytics-chart-wrap canvas
    {
        max-height : 260px;
    }

    /* Apply button */
    .les-analytics-filter-actions
    {
        width : 100%;
    }

    #applyAnalyticsFilters
    {
        width : 100%;
    }

    /* Inline reg stat card */
    #regStatCard .reg-stat-count
    {
        font-size : 40px;
    }

    #regStatCard
    {
        padding : 20px 12px 16px;
        gap     : 10px;
    }

    /* ── Mobile card-view for analytics tables ────────────────────────────── */
    /* Hide the table header row — labels come from data-label via ::before   */
    .les-analytics-card .stakeholderListingTable thead
    {
        display : none;
    }

    .les-analytics-card .stakeholderListingTable tbody tr
    {
        display       : block;
        border        : 2px solid #efdecd;
        border-radius : 8px;
        margin-bottom : 10px;
        overflow      : hidden;
    }

    .les-analytics-card .stakeholderListingTable tbody td
    {
        display               : grid;
        grid-template-columns : 40% 1fr; /* label column is fixed proportion */
        gap                   : 8px;
        padding               : 8px 14px;
        border-bottom         : 1px solid #f0e8db;
        align-items           : center;
        word-break            : break-word;
    }

    .les-analytics-card .stakeholderListingTable tbody td::before
    {
        content        : attr(data-label);
        font-weight    : 600;
        font-size      : 11px;
        text-transform : uppercase;
        letter-spacing : 0.4px;
        color          : #8a7060;
        white-space    : nowrap;
    }

    .les-analytics-card .stakeholderListingTable tbody td:last-child
    {
        border-bottom : none;
    }

    /* When in card-view mode, the table itself doesn't need min-width */
    .les-analytics-card .table-wrapper
    {
        overflow-x : visible;
    }

    .les-analytics-card #mapClicksTable,
    .les-analytics-card #topUsersTable
    {
        min-width : 0;
    }

    .les-analytics-section-sub
    {
        font-size : 14px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 480px — medium phone (iPhone 12/13 mini, most Android mid-range)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px)
{
    .les-analytics-title
    {
        font-size : 17px;
    }

    /* Collapse EVERYTHING to single column */
    .les-analytics-stats-row,
    .les-analytics-login-totals
    {
        grid-template-columns : 1fr;
        gap                   : 10px;
    }

    .les-analytics-stat-card
    {
        /* Horizontal layout — icon left, value+label right — saves vertical space */
        display     : flex;
        align-items : center;
        gap         : 14px;
        padding     : 14px 16px;
        text-align  : left;
    }

    .les-analytics-stat-icon
    {
        font-size     : 20px;
        margin-bottom : 0;
        flex-shrink   : 0;
        width         : 36px;
        text-align    : center;
    }

    .les-analytics-stat-card-body
    {
        display        : flex;
        flex-direction : column;
    }

    .les-analytics-stat-value
    {
        font-size    : 26px;
        margin-bottom: 2px;
    }

    .les-analytics-stat-label
    {
        font-size : 11px;
    }

    .les-analytics-chart-wrap
    {
        min-height : 160px;
    }

    .les-analytics-chart-wrap canvas
    {
        max-height : 220px;
    }

    /* Inline reg stat card */
    #regStatCard .reg-stat-count
    {
        font-size : 34px;
    }

    #regStatCard .reg-stat-icon-circle
    {
        width     : 56px;
        height    : 56px;
        font-size : 22px;
    }

    #regStatCard .reg-stat-type
    {
        font-size : 14px;
    }

    .les-analytics-card-header
    {
        gap : 4px;
    }

    .les-analytics-card
    {
        padding       : 12px;
        border-radius : 8px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ≤ 380px — small phones (iPhone SE 1st gen, Galaxy Fold outer screen, etc.)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px)
{
    .les-analytics-title
    {
        font-size      : 15px;
        gap            : 8px;
        margin-bottom  : 14px;
        padding-bottom : 10px;
    }

    .les-analytics-card
    {
        padding       : 10px;
        border-radius : 8px;
        margin-bottom : 12px;
    }

    .les-analytics-card-title
    {
        font-size : 13px;
    }

    .les-analytics-stat-value
    {
        font-size : 22px;
    }

    .les-analytics-stat-icon
    {
        font-size : 17px;
        width     : 28px;
    }

    .les-analytics-stat-label
    {
        font-size : 10px;
    }

    .les-analytics-chart-wrap
    {
        min-height : 130px;
    }

    .les-analytics-chart-wrap canvas
    {
        max-height : 190px;
    }

    #regStatCard .reg-stat-count
    {
        font-size : 28px;
    }

    #regStatCard .reg-stat-icon-circle
    {
        width     : 46px;
        height    : 46px;
        font-size : 18px;
    }

    .les-analytics-section-sub
    {
        font-size : 13px;
    }

    .les-analytics-type-badge
    {
        font-size : 10px;
        padding   : 2px 7px;
    }

    .les-analytics-click-badge
    {
        font-size : 11px;
        min-width : 28px;
        height    : 24px;
        padding   : 0 7px;
    }

    #applyAnalyticsFilters
    {
        font-size : 13px;
        padding   : 10px 14px;
    }

    .les-analytics-card .stakeholderListingTable tbody td
    {
        grid-template-columns : 38% 1fr;
        padding               : 6px 10px;
        font-size             : 12px;
    }

    .les-analytics-card .stakeholderListingTable tbody td::before
    {
        font-size : 10px;
    }
}