/* ═══════════════════════════════════════════════════════════════════════════════
   GB Financial Dashboard — App Stylesheet
   Mobile-first, optimised for low-end Android WebView / Chrome Mobile
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
    --gb-transition: 0.18s ease;
    --gb-radius: 0.75rem;
    --gb-radius-sm: 0.5rem;
    --gb-shadow: 0 2px 12px rgba(0,0,0,.08);
    --gb-border: 1px solid rgba(0,0,0,.08);
}

/* ─── Base ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 0.92rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ─── Loading Overlay ───────────────────────────────────────────────────────── */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(13,110,253,.92);
    z-index: 9990;
    transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ─── Navigation ─────────────────────────────────────────────────────────────── */
#mainNav {
    z-index: 1030;
}

/* ─── Touch-friendly Buttons ─────────────────────────────────────────────────── */
.touch-btn {
    min-height: 38px;
    min-width: 38px;
    touch-action: manipulation;
}

/* ─── KPI Cards ─────────────────────────────────────────────────────────────── */
.kpi-card {
    border-radius: var(--gb-radius) !important;
    transition: transform var(--gb-transition), box-shadow var(--gb-transition);
    cursor: default;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
}

.kpi-value {
    font-size: 1.4rem !important;
    line-height: 1.1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.5px;
}

.kpi-sub {
    font-size: 0.72rem !important;
    margin-top: 2px;
}

/* ─── Chart Container ───────────────────────────────────────────────────────── */
.chart-container {
    position: relative;
    width: 100%;
    height: 260px;
}

@media (max-width: 576px) {
    .chart-container {
        height: 200px;
    }
}

/* ─── Product Table ─────────────────────────────────────────────────────────── */
#productTable {
    font-size: 0.82rem;
}

#productTable thead th {
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

#serviceTable {
    font-size: 0.82rem;
}

#serviceTable thead th {
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.sortable-col {
    cursor: pointer;
    user-select: none;
}

.sortable-col:hover {
    background: rgba(255,255,255,.05);
}

.sortable-col.active {
    text-decoration: underline;
}

/* ─── Trend Badges ───────────────────────────────────────────────────────────── */
.trend-badge {
    font-size: 0.72rem;
    font-weight: 600;
}

.trend-up   { color: #198754; }
.trend-down { color: #dc3545; }
.trend-flat { color: #6c757d; }

/* ─── Summary Panel ──────────────────────────────────────────────────────────── */
.summary-item {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.summary-item:last-child {
    border-bottom: none;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */
#productPagination .page-link {
    padding: 4px 10px;
    font-size: 0.82rem;
    min-width: 36px;
    text-align: center;
}

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.card {
    border-radius: var(--gb-radius) !important;
}

/* ─── Dark Mode ──────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
    --bs-body-bg: #111827;
    --bs-secondary-bg: #1f2937;
    --bs-border-color: #374151;
}

[data-bs-theme="dark"] .card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

[data-bs-theme="dark"] #mainNav {
    background-color: #1e3a5f !important;
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: transparent;
}

[data-bs-theme="dark"] .table-dark {
    --bs-table-bg: #111827;
}

/* ─── Margin / profit colour helpers ────────────────────────────────────────── */
.text-positive { color: #198754 !important; }
.text-negative { color: #dc3545 !important; }
.text-neutral  { color: #6c757d !important; }

/* ─── Skeleton loaders ───────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0;  }
}

.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 4px;
    display: inline-block;
}

[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 800px 100%;
}

/* ─── Analytics Tables: Name Column — always fully visible, wraps naturally ── */

/* Name cell: grows to fill available space, wraps long names */
.col-name-cell {
    /* Let the browser use remaining space after fixed columns take their share */
    width: 99%;          /* table-layout auto will still shrink this intelligently */
    min-width: 100px;
}

.item-name {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.35;
}

.item-category {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.2;
    margin-top: 1px;
}

/* Rank column stays narrow */
.col-rank {
    width: 1%;
    white-space: nowrap;
}

/* ─── Mobile Adjustments ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .kpi-value {
        font-size: 1.15rem !important;
    }

    .card-header h6 {
        font-size: 0.85rem;
    }
}

/* Very small phones (≤ 360px) — shrink KPI value further */
@media (max-width: 360px) {
    .kpi-value {
        font-size: 0.95rem !important;
    }
}

/* ─── Analytics Tables: Responsive Card Layout (≤ 575px) ─────────────────── */
/*
 * On narrow screens each table row transforms into a mini-card:
 *   ┌─────────────────────────────────┐ ┌── #rank badge
 *   │ PRODUCT NAME (bold, full width) │
 *   │ category (muted small)          │
 *   ├─────────────────────────────────┤
 *   │ QTY        REVENUE              │
 *   │ 10         Rp 500.000           │
 *   │ PROFIT     MARGIN               │
 *   │ Rp 100.000 20%                  │
 *   └─────────────────────────────────┘
 */
@media (max-width: 575px) {

    /* Disable horizontal scroll — cards stack vertically */
    .analytics-responsive {
        overflow-x: visible !important;
    }

    /* Make table itself block so it flows with the card rows */
    #productTable,
    #serviceTable {
        display: block;
    }

    /* Hide header row — labels come from data-label ::before */
    #productTable thead,
    #serviceTable thead {
        display: none;
    }

    #productTable tbody,
    #serviceTable tbody {
        display: block;
    }

    /* ── Each row → card block ── */
    #productTable tbody tr,
    #serviceTable tbody tr {
        display: block;
        padding: 0.55rem 0.75rem;
        border-bottom: 1px solid var(--bs-border-color);
        position: relative;
    }

    #productTable tbody tr:last-child,
    #serviceTable tbody tr:last-child {
        border-bottom: none;
    }

    /* Default: all cells block, stripped of table styles */
    #productTable tbody td,
    #serviceTable tbody td {
        display: block;
        border: none;
        padding: 0;
        text-align: left !important;
    }

    /* Empty colspan cell (Loading… / No records) */
    #productTable tbody td[colspan],
    #serviceTable tbody td[colspan] {
        text-align: center !important;
        padding: 1rem 0 !important;
    }

    /* ── Rank: small badge in top-right corner ── */
    #productTable td.col-rank,
    #serviceTable td.col-rank {
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        font-size: 0.65rem;
        color: var(--bs-secondary-color);
        background: var(--bs-secondary-bg);
        border-radius: 0.25rem;
        padding: 1px 6px;
        line-height: 1.5;
        white-space: nowrap;
    }

    /* ── Name cell: full width, bottom separator ── */
    #productTable td.col-name-cell,
    #serviceTable td.col-name-cell {
        padding-right: 2.5rem;   /* don't overlap rank badge */
        padding-bottom: 0.35rem;
        margin-bottom: 0.3rem;
        border-bottom: 1px solid var(--bs-border-color-translucent) !important;
    }

    /* Item name: clearly legible, full weight */
    #productTable .item-name,
    #serviceTable .item-name {
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    /* Item category: unchanged small/muted, just ensure no overflow */
    #productTable .item-category,
    #serviceTable .item-category {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ── Numeric cells: 2-col grid via inline-block ── */
    #productTable td.col-qty,
    #productTable td.col-revenue,
    #productTable td.col-profit,
    #productTable td.col-margin,
    #serviceTable td.col-qty,
    #serviceTable td.col-revenue,
    #serviceTable td.col-profit,
    #serviceTable td.col-margin {
        display: inline-block;
        width: 50%;
        padding: 0.1rem 0;
        font-size: 0.72rem;
        vertical-align: top;
        box-sizing: border-box;
    }

    /* ── Data-label: tiny header above each number ── */
    #productTable td[data-label]::before,
    #serviceTable td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.6rem;
        color: var(--bs-secondary-color);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        line-height: 1.4;
    }
}

/* ─── Pagination footer — wraps cleanly on narrow screens ─────────────────── */
@media (max-width: 479px) {
    /* Stack info text above pagination buttons if both don't fit */
    .card-footer.d-flex {
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    /* Smaller page-link buttons */
    .pagination-sm .page-link {
        padding: 3px 7px;
        font-size: 0.75rem;
        min-width: 28px;
    }

    /* Allow pagination row to scroll if still needed */
    .card-footer nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ─── Scrollbar (thin for WebKit) ───────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(0,0,0,.2); border-radius: 3px; }