/* ==========================================================================
   TTSM FOUNDATION
   COMPONENT : Master DataGrid
   FILE      : grid.css
   VERSION   : GRID-006A.2
   Persistent Row Selection
   ========================================================================== */

/* ==========================================================================
   GRID ROOT
   ========================================================================== */

.ttsm-grid{

    --grid-column-symbol:110px;
    --grid-column-close:90px;
    --grid-column-open:90px;
    --grid-column-change:115px;
    --grid-column-percent:80px;
    --grid-column-bid:105px;
    --grid-column-ask:110px;
    --grid-column-high:90px;
    --grid-column-low:90px;
    --grid-column-volume:120px;
    --grid-column-value:140px;

    --grid-columns:
        var(--grid-column-symbol)
        var(--grid-column-close)
        var(--grid-column-open)
        var(--grid-column-change)
        var(--grid-column-percent)
        var(--grid-column-bid)
        var(--grid-column-ask)
        var(--grid-column-high)
        var(--grid-column-low)
        var(--grid-column-volume)
        var(--grid-column-value);

    --grid-track-width:1140px;

    display:flex;
    flex-direction:column;

    width:100%;
    height:100%;

    background:#111827;

    border:1px solid #2D3748;

    border-radius:12px;

    overflow:hidden;

}

.grid-data-disclosure{

    margin:0;
    padding:5px 12px;
    border-top:1px solid rgba(148,163,184,.15);
    color:#94a3b8;
    background:#111827;
    font-size:11px;
    line-height:1.35;

}

@media(max-width:640px){

    .grid-data-disclosure{

        padding:4px 10px;
        font-size:10px;
        line-height:1.25;

    }

}

@media(max-width:760px){

    .grid-controls{

        flex-wrap:wrap;

    }

    .grid-quick-search{

        flex:1 1 100%;
        width:100%;

    }

}

/* ==========================================================================
   QUICK SEARCH
   ========================================================================== */

.grid-controls{

    display:flex;
    align-items:center;
    gap:10px;

    flex:0 0 auto;
    width:100%;

    padding:8px 12px;

    background:#111827;
    border-bottom:1px solid #2D3748;

}

.grid-controls[hidden]{

    display:none;

}

.grid-quick-search{

    position:relative;
    flex:0 1 360px;
    width:clamp(220px, 30vw, 360px);

}

.grid-search-input{

    box-sizing:border-box;
    width:100%;
    min-height:34px;

    padding:7px 34px 7px 11px;

    color:#F8FAFC;
    background:#182235;
    border:1px solid #3A4B63;
    border-radius:7px;
    outline:none;

}

.grid-search-input:focus{

    border-color:#6FC3FF;
    box-shadow:0 0 0 2px rgba(111,195,255,.18);

}

.grid-search-input::placeholder{

    color:#94A3B8;

}

.grid-search-clear{

    position:absolute;
    top:50%;
    right:7px;
    transform:translateY(-50%);

    padding:2px 5px;

    color:#CBD5E1;
    background:transparent;
    border:0;
    cursor:pointer;
    font-size:1.1rem;
    line-height:1;

}

.grid-search-clear:hover{

    color:#FFFFFF;

}

.grid-filter-count{

    flex:0 0 auto;
    color:#94A3B8;
    font-size:.78rem;
    white-space:nowrap;

}

.grid-visually-hidden{

    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;

}

.grid-empty-state{

    display:flex;
    align-items:center;
    justify-content:center;

    min-width:var(--grid-track-width);
    min-height:96px;
    padding:20px;

    color:#94A3B8;
    font-size:.9rem;

}

/* ==========================================================================
   HEADER
   ========================================================================== */

.grid-header{

    display:grid;

    grid-template-columns:var(--grid-columns);

    background:linear-gradient(
        180deg,
        #24364f 0%,
        #1b2b42 100%
    );

    border-bottom:2px solid #4b82d6;

    color:#ffffff;

    font-weight:700;

    letter-spacing:.05em;

    user-select:none;

    flex:0 0 auto;

    position:relative;

    z-index:2;

    transform:translateX(

        calc(0px - var(--grid-scroll-left, 0px))

    );

    will-change:transform;

    width:var(--grid-track-width);

    min-width:var(--grid-track-width);

}

/* ==========================================================================
   HEADER CELLS
   ========================================================================== */

.grid-header-cell{

    color:#F8FAFC;

    padding:0;

    transition:
        background .20s ease,
        color .20s ease;

}

.grid-sort-button{

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:inherit;
    gap:6px;

    flex:1 1 auto;
    min-width:0;
    min-height:100%;
    padding:10px 5px 10px 10px;

    color:inherit;
    background:transparent;
    border:0;
    font:inherit;
    letter-spacing:inherit;

}

.grid-header-cell:hover,
.grid-sort-button:focus-visible{

    background:#31507b;

    color:#6fc3ff;

}

.grid-header-cell.sort-active{

    color:#6FC3FF;
    background:#29466D;

}

.grid-sort-indicator{

    font-size:.7rem;
    color:#7FB3E8;

}

.grid-smart-group-toggle{

    display:flex;
    align-items:center;
    justify-content:inherit;
    gap:6px;

    flex:1 1 auto;
    min-width:0;
    min-height:100%;
    padding:10px 5px 10px 10px;
    color:#B38BDB;
    background:transparent;
    border:0;
    cursor:pointer;
    font:inherit;
    letter-spacing:inherit;

}

.grid-smart-group-toggle.active{

    color:#D8B4FE;

}

.grid-sort-button:hover .grid-sort-indicator,
.grid-sort-button:focus-visible .grid-sort-indicator{

    color:#A7D8FF;

}

.grid-header-cell.sort-active .grid-sort-indicator{

    color:#38BDF8;

}

.grid-smart-group-toggle:hover,
.grid-smart-group-toggle:focus-visible{

    color:#E9D5FF;

}

.grid-sort-button:focus-visible,
.grid-smart-group-toggle:focus-visible{

    outline:2px solid #6FC3FF;
    outline-offset:-3px;

}

/* ==========================================================================
   BODY
   ========================================================================== */

.grid-scroll{

    display:flex;
    flex-direction:column;

    flex:1 1 auto;

    min-height:0;

    overflow:auto;

}

/* ==========================================================================
   WORKSPACE REGION
   ========================================================================== */

.ttsm-workspace{

    flex:0 0 auto;

    position:relative;

    z-index:1;

    background:#111827;

    border-bottom:1px solid #2D3748;

    width:100%;

    overflow:hidden;

}

.ttsm-workspace-track{

    width:var(--grid-track-width);

    min-width:var(--grid-track-width);

    transform:translateX(

        calc(0px - var(--grid-scroll-left, 0px))

    );

    will-change:transform;

}

/* ==========================================================================
   ROW
   ========================================================================== */

.grid-row{

    display:grid;

    grid-template-columns:var(--grid-columns);

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:
        background .18s ease,
        box-shadow .18s ease;

    width:var(--grid-track-width);

    min-width:var(--grid-track-width);

}

/* ==========================================================================
   HOVER
   ========================================================================== */

.grid-row:hover{

    background:#1d2b41;

}

/* ==========================================================================
   SELECTED ROW
   ========================================================================== */

.grid-row.selected{

    background:#263b59;

    box-shadow:
        inset 5px 0 0 #4b82d6,
        inset 0 0 0 1px rgba(111,195,255,.25);

}

/* ==========================================================================
   CELLS
   ========================================================================== */

.grid-cell{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    padding:10px 12px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    color:#E2E8F0;

    font-size:.85rem;

    font-variant-numeric:tabular-nums;

}

/* ==========================================================================
   SYMBOL
   ========================================================================== */

.grid-cell.symbol{

    justify-content:flex-start;

    font-weight:700;

}

/* ===========================================================================
   FROZEN SYMBOL COLUMN
   ========================================================================== */

.grid-header .symbol{

    position:relative;

    z-index:3;

    transform:translateX(

        var(--grid-scroll-left, 0px)

    );

    background:linear-gradient(
        180deg,
        #24364f 0%,
        #1b2b42 100%
    );

    will-change:transform;

}

.grid-scroll .grid-row .symbol{

    position:sticky;

    left:0;

    z-index:1;

    background:#111827;

}

.grid-scroll .grid-row:hover .symbol{

    background:#1d2b41;

}

.grid-scroll .grid-row.selected .symbol{

    background:#263b59;

    box-shadow:inset 5px 0 0 #4b82d6;

}

.ttsm-workspace .grid-row .symbol{

    position:relative;

    z-index:2;

    transform:translateX(

        var(--grid-scroll-left, 0px)

    );

    background:#263b59;

    box-shadow:inset 5px 0 0 #4b82d6;

    will-change:transform;

}

.ttsm-workspace .grid-row:hover .symbol{

    background:#1d2b41;

}

.grid-cell.symbol.symbol-positive{

    color:#22C55E;

}

.grid-cell.symbol.symbol-negative{

    color:#EF4444;

}

.grid-cell.symbol.symbol-neutral{

    color:#B9C2D0;

}

/* ==========================================================================
   CHANGE COLORS
   ========================================================================== */

.grid-row.positive .change{

    color:#22C55E;

}

.grid-row.negative .change{

    color:#EF4444;

}

.grid-row.neutral .change{

    color:#CBD5E1;

}

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

@media (max-width:1200px){

    .ttsm-grid{

        overflow:hidden;

    }

}

@media (max-width:640px){

    .grid-controls{

        gap:8px;
        padding:7px 9px;

    }

    .grid-quick-search{

        flex:1 1 100%;
        width:100%;
        min-width:0;

    }

}