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

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

.ttsm-grid{

    display:flex;
    flex-direction:column;

    width:100%;
    height:100%;

    background:#111827;

    border:1px solid #2D3748;

    border-radius:12px;

    overflow:hidden;

}

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

.grid-header{

    display:grid;

    grid-template-columns:

        110px
        90px
        90px
        95px
        80px
        90px
        90px
        90px
        90px
        120px
        140px;

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

    border-bottom:2px solid #4b82d6;

    color:#ffffff;

    font-weight:700;

    letter-spacing:.05em;

    user-select:none;

}

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

.grid-header-cell{

    color:#F8FAFC;

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

}

.grid-header-cell.interactive{

    cursor:pointer;

}

.grid-header-cell.interactive:hover{

    background:#31507b;

    color:#6fc3ff;

}

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

.grid-body{

    display:flex;
    flex-direction:column;
    overflow:auto;

}

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

.grid-row{

    display:grid;

    grid-template-columns:

        110px
        90px
        90px
        95px
        80px
        90px
        90px
        90px
        90px
        120px
        140px;

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

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

}

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

.grid-row:hover{

    background:#1d2b41;

}

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

.grid-row.selected{

    background:#263b59;

    border-left:5px solid #4b82d6;

    box-shadow: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;

}

.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:auto;

    }

    .grid-header,
    .grid-row{

        min-width:1085px;

    }

}