/*
 * Time Series Plugin Stylesheet (v4.6.1 - Split Layout)
 */

/* ========================================================================
   1. GLOBAL & LAYOUT
   ======================================================================== */
:root {
    --header-height: 54px; 
}

/* Page-specific overrides */
#mobile-search-icon,
.main-menu .header-search-wrapper {
    display: none !important;
}

.time-series-plugin-wrapper,
.time-series-plugin-wrapper button,
.time-series-plugin-wrapper input,
.time-series-plugin-wrapper select,
.ts-control {
    font-family: 'Lato', sans-serif !important;
}

.time-series-plugin-wrapper {
    margin-inline: auto;
    max-width: 1600px !important;
    padding: 25px 15px;
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    box-sizing: border-box;
}

.ts-table-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    /* No gap here, we handle spacing in mobile media queries */
}

/* ========================================================================
   2. FILTERS CONTAINER (DESKTOP)
   ======================================================================== */
.ts-top-filters {
    display: flex;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 24px;
    gap: 30px;
    align-items: stretch;
    margin-bottom: 20px;
}

/* Primary Group: Metrics + Tickers columns */
.ts-filter-group-primary {
    display: flex;
    flex: 2; /* Takes up 2/3 of space roughly */
    gap: 30px;
}

/* Secondary Group: Settings + Dates */
.ts-filter-group-secondary {
    display: flex;
    flex-direction: column;
    flex: 1; /* Takes up 1/3 of space */
    gap: 15px;
}

.ts-filter-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
    min-width: 0;
}

.ts-input-group { width: 100%; }

/* Border between Metrics and Tickers on Desktop */
.ts-filter-group-primary .ts-filter-column:first-child {
    border-right: 1px solid #e9ecef;
    padding-right: 30px;
}

.ts-secondary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
    align-items: start;
}

.ts-date-row {
    display: flex;
    gap: 15px;
}

.date-input-wrapper { width: 100%; }

.mobile-filter-separator { display: none; }

/* ========================================================================
   3. INPUT STYLING
   ======================================================================== */
.ts-control {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    min-height: 42px !important;
    padding: 6px 12px !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
    background-image: none !important; 
    display: flex !important;
    align-items: center;
}
.ts-wrapper.focus .ts-control {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: 0 !important;
}
.ts-wrapper .ts-control > input::placeholder { color: #6c757d; }
.ts-wrapper .item {
    background: #e2efff !important;
    color: #004085 !important;
    padding: 2px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 2px 4px 2px 0 !important;
}
.ts-wrapper.multi .ts-control > div { margin: 0 3px 3px 0 !important; }
.ts-wrapper .ts-dropdown { z-index: 1001 !important; }

/* Photo-Style Date Input */
.date-input-wrapper {
    position: relative;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: #fff;
    display: flex;
    align-items: center;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    min-height: 42px;
}
.date-input-wrapper:focus-within {
    border-color: #86b7fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    outline: 0 !important;
}
.ta-date-range {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: transparent !important;
    padding: 10px 15px !important;
    width: 100% !important;
    font-size: 14px;
    color: #333;
    z-index: 1;
}
.date-input-label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999;
    background-color: white;
    padding: 0 5px;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 0;
}
.ta-date-range:focus + .date-input-label,
.ta-date-range:not(:placeholder-shown) + .date-input-label {
    top: -9px; transform: translateY(0); left: 10px;
    font-size: 12px; color: #555; font-weight: 500; z-index: 2;
}
.date-picker-icon {
    padding: 0 10px; cursor: pointer; z-index: 1; display: flex; align-items: center;
}
.date-picker-icon .bx { font-size: 24px; color: #555; }

/* ========================================================================
   4. TABLE CONTAINER & CONTROLS
   ======================================================================== */
.placeholder-div {
    min-height: 350px; display: flex; justify-content: center; align-items: center;
    border: 1px gray dashed; width: 100%; text-align: center; color: #6c757d;
}

#ts-table-container-wrapper { position: relative; }

#ts-table-container-wrapper.loading-overlay::after {
    content: ''; position: absolute; inset: 0; border-radius: 8px;
    background: rgba(255, 255, 255, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='50' height='50'%3E%3Ccircle cx='50' cy='50' r='32' stroke-width='8' stroke='%23217ab4' stroke-dasharray='50.26548245743669 50.26548245743669' fill='none' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1s' keyTimes='0;1' values='0 50 50;360 50 50'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E") center no-repeat;
    z-index: 20;
}

.ts-table-container {
    background: white; border: 1px solid #e9ecef; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 20px;
    display: flex; flex-direction: column; gap: 15px;
}

.ts-table-header-controls {
    display: flex; justify-content: space-between; align-items: center; gap: 15px;
}
#ts-table-search {
    border: 1px solid #ced4da; border-radius: 4px; padding: 8px 12px; font-size: 14px;
    min-width: 250px;
}
#ts-table-search:focus {
    border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); outline: 0;
}

.ts-table-buttons-group { display: flex; align-items: center; gap: 10px; }
.ts-table-buttons-group button {
    background: #f8f9fa; color: #495057; border: 1px solid #ced4da;
    border-radius: 4px; cursor: pointer; height: 36px;
    font-size: 14px; padding: 0 12px; transition: background-color 0.2s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 500; white-space: nowrap;
}
.ts-table-buttons-group button:hover { background-color: #e9ecef; }
.ts-table-buttons-group button.active { background-color: #d3d9df; border-color: #adb5bd; }
.ts-table-buttons-group i { font-size: 20px; line-height: 1; }

/* ========================================================================
   5. TABLE STYLING
   ======================================================================== */
.ts-table-scroll-wrapper { overflow-x: auto; width: 100%; }
.ts-table-scroll-wrapper::-webkit-scrollbar { height: 8px; }
.ts-table-scroll-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
.ts-table-scroll-wrapper::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }

.simple-table { width: 100%; border-collapse: collapse; }
.simple-table thead { position: relative; z-index: 1; }
.simple-table thead tr { border-bottom: 2px solid #dee2e6; }
.simple-table th, .simple-table td {
    padding: 12px 15px; border-bottom: 1px solid #f1f1f1; white-space: nowrap;
}
.simple-table th { font-weight: 600; color: #333; background: #f8f9fa; }
.simple-table tbody tr:nth-child(even) { background-color: #f9f9f9; }
.simple-table tbody tr:hover { background-color: #f1f8ff !important; }
.simple-table th.text-left, .simple-table td.text-left { text-align: left; }
.simple-table th.text-right, .simple-table td.text-right { text-align: right; }

.simple-table th.freeze, .simple-table td.freeze { position: sticky; z-index: 5; }
.simple-table th:nth-child(1), .simple-table td:nth-child(1) { left: 0; }
.simple-table th:nth-child(2), .simple-table td:nth-child(2) { left: 100px; border-right: 1px solid #dee2e6; }
.simple-table thead th.freeze { z-index: 6; } 
.simple-table tbody td.freeze { background-color: #ffffff; }
.simple-table tbody tr:nth-child(even) td.freeze { background-color: #f9f9f9; }
.simple-table tbody tr:hover td.freeze { background-color: #f1f8ff !important; }

.simple-table th:nth-child(1), .simple-table td:nth-child(1) { width: 100px; min-width: 100px; }
.simple-table th:nth-child(2), .simple-table td:nth-child(2) { width: 150px; min-width: 150px; }
.simple-table th:nth-child(n+3), .simple-table td:nth-child(n+3) { width: 120px; min-width: 120px; }

.fixed-header-wrapper {
    position: fixed; left: 0; z-index: 11; display: none; overflow: hidden;
    pointer-events: none; background-color: #f8f9fa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-bottom: 2px solid #dee2e6;
}
.fixed-header-wrapper table { border-collapse: collapse; }
.fixed-header-wrapper th { background-color: #f8f9fa !important; pointer-events: auto; }
.fixed-header-wrapper th.freeze { z-index: 12 !important; }

/* ========================================================================
   6. MOBILE RESPONSIVENESS (SPLIT LAYOUT)
   ======================================================================== */
#ts-custom-tooltip {
    display: none; position: absolute; z-index: 10001; background: white;
    border: 1px solid #ccc; border-radius: 6px; padding: 10px 15px;
    font-size: 13px; line-height: 1.6; color: #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); pointer-events: none;
    max-width: 320px; white-space: normal;
}
#ts-custom-tooltip strong { font-weight: 700; color: #000; }

@media (max-width: 992px) {
    .time-series-plugin-container { padding: 15px; margin-top: 0; }

    /* UNWRAP THE MAIN CONTAINER */
    /* This makes the children (primary group, secondary group) direct children of ts-table-wrapper for ordering */
    .ts-top-filters {
        display: contents; 
    }

    /* Primary Filter Group (Metrics, Tickers) - ORDER 1 */
    .ts-filter-group-primary {
        display: flex;
        flex-direction: column;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        gap: 15px;
        order: 1; /* First */
    }

    /* Remove Desktop Border */
    .ts-filter-group-primary .ts-filter-column:first-child {
        border-right: none;
        padding-right: 0;
    }

    /* Mobile Separator Line */
    .mobile-filter-separator {
        display: block;
        width: 100%;
        height: 1px;
        background-color: #e9ecef;
        margin: 5px 0;
    }

    /* Table Container - ORDER 2 */
    #ts-table-container-wrapper {
        order: 2; /* Middle */
        margin-top: 20px;
        margin-bottom: 20px;
    }

    /* Secondary Filter Group (Settings, Dates) - ORDER 3 */
    .ts-filter-group-secondary {
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        order: 3; /* Last */
    }
    
    .ts-date-row {
        width: 100%;
    }

    /* Table Controls Mobile */
    .ts-table-header-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    #ts-table-search { width: 100%; }
    .ts-table-buttons-group {
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .ts-table-buttons-group button {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ts-table-buttons-group button span { display: none; }
}