/* ============================================
   Finance Tables Pro - Front-end styles
   ============================================ */

.ft-wrap {
    --ft-pos:        #10b981;
    --ft-pos-bg:     rgba(16, 185, 129, 0.10);
    --ft-neg:        #ef4444;
    --ft-neg-bg:     rgba(239, 68, 68, 0.10);
    --ft-neutral:    #6b7280;
    --ft-text:       #111827;
    --ft-text-soft:  #4b5563;
    --ft-bg:         #ffffff;
    --ft-bg-alt:     #f9fafb;
    --ft-header-bg:  #f3f4f6;
    --ft-header-tx:  #374151;
    --ft-border:     #e5e7eb;
    --ft-shadow:     0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.04);
    --ft-radius:     12px;
    --ft-hint-bg:    #eff6ff;
    --ft-hint-bd:    #bfdbfe;
    --ft-hint-tx:    #1e40af;

    margin: 24px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ft-text);
}

.ft-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    color: var(--ft-text);
}

/* ============================================
   Scroll-hint banner (only shown when overflowing)
   ============================================ */
.ft-scroll-hint {
    display: none; /* JS toggles via .is-overflowing */
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 7px 12px;
    background: var(--ft-hint-bg);
    border: 1px solid var(--ft-hint-bd);
    border-radius: 999px;
    color: var(--ft-hint-tx);
    font-size: 0.82rem;
    font-weight: 500;
    width: fit-content;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.ft-wrap.is-overflowing .ft-scroll-hint {
    display: inline-flex;
}
.ft-wrap.user-scrolled .ft-scroll-hint {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
}
.ft-swipe-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    animation: ft-swipe-nudge 1.6s ease-in-out infinite;
}
@keyframes ft-swipe-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}

/* ============================================
   Container + scroll wrapper + edge gradients
   ============================================ */
.ft-table-container {
    position: relative;
}
.ft-table-scroll {
    background: var(--ft-bg);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius);
    box-shadow: var(--ft-shadow);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.ft-table-scroll::-webkit-scrollbar        { height: 8px; }
.ft-table-scroll::-webkit-scrollbar-thumb  { background: rgba(0, 0, 0, 0.18); border-radius: 4px; }
.ft-table-scroll::-webkit-scrollbar-track  { background: transparent; }

/* Edge fade overlays — visible only when overflowing AND not at that edge */
.ft-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.ft-fade-left {
    left: 0;
    background: linear-gradient(to right, var(--ft-bg) 5%, rgba(255, 255, 255, 0) 100%);
    border-top-left-radius: var(--ft-radius);
    border-bottom-left-radius: var(--ft-radius);
}
.ft-fade-right {
    right: 0;
    background: linear-gradient(to left, var(--ft-bg) 5%, rgba(255, 255, 255, 0) 100%);
    border-top-right-radius: var(--ft-radius);
    border-bottom-right-radius: var(--ft-radius);
}
.ft-wrap.is-overflowing:not(.at-start) .ft-fade-left  { opacity: 1; }
.ft-wrap.is-overflowing:not(.at-end)   .ft-fade-right { opacity: 1; }

/* ============================================
   Table base
   ============================================ */
.ft-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
    table-layout: auto;
}

/* Header */
.ft-table thead th {
    background: var(--ft-header-bg);
    color: var(--ft-header-tx);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 18px;
    text-align: left;
    border-bottom: 1px solid var(--ft-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s ease;
}
.ft-table thead th:hover     { background: #e5e7eb; }
.ft-table thead th.ft-num    { text-align: right; }
.ft-th-label                 { display: inline-block; vertical-align: middle; }
.ft-sort-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    opacity: 0.35;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.ft-table thead th.ft-sort-asc  .ft-sort-arrow { opacity: 1; }
.ft-table thead th.ft-sort-desc .ft-sort-arrow { opacity: 1; transform: rotate(180deg); }

/* Body cells — never wrap, that's what causes the "crumpled" look */
.ft-table tbody td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--ft-border);
    color: var(--ft-text);
    vertical-align: middle;
    white-space: nowrap;
    transition: background 0.12s ease;
}
.ft-table tbody tr:last-child td      { border-bottom: none; }
.ft-table tbody tr:hover td           { background: var(--ft-bg-alt); }
.ft-table td.ft-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
}
.ft-table td.ft-text                  { font-weight: 500; }

/* Color rules — the headline feature */
.ft-table td.ft-pos     { color: var(--ft-pos); font-weight: 600; }
.ft-table td.ft-neg     { color: var(--ft-neg); font-weight: 600; }
.ft-table td.ft-neutral { color: var(--ft-neutral); }

/* ============================================
   Themes
   ============================================ */

/* Modern (default) — already applied above. */

/* Dark — Bloomberg-style terminal feel. */
.ft-theme-dark {
    --ft-pos:        #22c55e;
    --ft-neg:        #f87171;
    --ft-neutral:    #9ca3af;
    --ft-text:       #f3f4f6;
    --ft-text-soft:  #d1d5db;
    --ft-bg:         #0f172a;
    --ft-bg-alt:     #1e293b;
    --ft-header-bg:  #1e293b;
    --ft-header-tx:  #94a3b8;
    --ft-border:     #334155;
    --ft-shadow:     0 1px 3px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --ft-hint-bg:    #1e293b;
    --ft-hint-bd:    #334155;
    --ft-hint-tx:    #93c5fd;
}
.ft-theme-dark .ft-table thead th:hover                   { background: #334155; }
.ft-theme-dark .ft-title                                  { color: var(--ft-text); }
.ft-theme-dark .ft-fade-left                              { background: linear-gradient(to right, var(--ft-bg) 5%, rgba(15, 23, 42, 0) 100%); }
.ft-theme-dark .ft-fade-right                             { background: linear-gradient(to left,  var(--ft-bg) 5%, rgba(15, 23, 42, 0) 100%); }
.ft-theme-dark .ft-table-scroll::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.18); }

/* Minimal — borderless, airy. */
.ft-theme-minimal .ft-table-scroll {
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.ft-theme-minimal .ft-table thead th {
    background: transparent;
    border-bottom: 2px solid var(--ft-text);
    color: var(--ft-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}
.ft-theme-minimal .ft-table thead th:hover { background: var(--ft-bg-alt); }
.ft-theme-minimal .ft-table tbody td       { border-bottom: 1px solid var(--ft-border); }
.ft-theme-minimal .ft-fade                 { display: none; }

/* Striped */
.ft-theme-striped .ft-table tbody tr:nth-child(odd) td  { background: #fafafa; }
.ft-theme-striped .ft-table tbody tr:hover td           { background: #f0f9ff; }

/* ============================================
   MOBILE — readability + sticky first column
   ============================================ */
@media (max-width: 768px) {
    .ft-wrap   { margin: 18px 0; }
    .ft-title  { font-size: 1.02rem; margin-bottom: 10px; }
    .ft-table  { font-size: 0.9rem; }

    .ft-table thead th {
        padding: 11px 12px;
        font-size: 0.7rem;
        letter-spacing: 0.03em;
    }
    .ft-table tbody td { padding: 11px 12px; }

    .ft-scroll-hint {
        font-size: 0.78rem;
        padding: 6px 11px;
    }

    /* Sticky first column when overflowing — keeps the row label
       visible while the user scrolls horizontally. */
    .ft-wrap.is-overflowing .ft-table thead th:first-child,
    .ft-wrap.is-overflowing .ft-table tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .ft-wrap.is-overflowing .ft-table tbody td:first-child {
        background: var(--ft-bg);
    }
    .ft-wrap.is-overflowing .ft-table thead th:first-child {
        background: var(--ft-header-bg);
        z-index: 3;
    }
    /* Subtle shadow on the sticky column once user scrolls past start */
    .ft-wrap.is-overflowing:not(.at-start) .ft-table thead th:first-child,
    .ft-wrap.is-overflowing:not(.at-start) .ft-table tbody td:first-child {
        box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.18);
    }
    /* Striped: keep alternating background on the sticky column */
    .ft-theme-striped.is-overflowing .ft-table tbody tr:nth-child(odd) td:first-child {
        background: #fafafa;
    }
    /* Stronger shadow for dark theme */
    .ft-theme-dark.is-overflowing:not(.at-start) .ft-table thead th:first-child,
    .ft-theme-dark.is-overflowing:not(.at-start) .ft-table tbody td:first-child {
        box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.45);
    }

    .ft-fade { width: 28px; }
}

@media (max-width: 420px) {
    .ft-table             { font-size: 0.86rem; }
    .ft-table thead th    { padding: 10px 10px; font-size: 0.66rem; }
    .ft-table tbody td    { padding: 10px 10px; }
}

/* Empty / not-found messages */
.ft-notfound,
.ft-empty {
    padding: 14px 18px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .ft-swipe-icon { animation: none; }
    .ft-fade,
    .ft-scroll-hint { transition: none; }
}