﻿/* Left Panel */
.filters-navbar .item,
.filters-navbar ul.dxnb-content
{
    border-right: none;
}

.filters-navbar .item
{
    padding-left: 24px !important;
}

/* GridView borders */
.grid-view:focus
{
    outline: none;
}

.grid-view .dxgvCSD,
.grid-view .pager
{
    border-left: none;
    border-right: none;
}
.grid-view .dxgvLVR > td.dxgv
{
    border-bottom: none !important;
}

/* GridView Custom Styles */
.grid-view .votes-column
{
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    line-height: .99;
    border-radius: 2em;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 3px 5px 2px;
    text-align: center;
}

.grid-view .status-column
{
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    font-size: 11px;
    text-transform: uppercase;
    line-height: .99;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 2px 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.02);
}

.grid-view .focused .status-column
{
    border: solid 1px #fff;
}

.grid-view .status-column.active
{
    font-weight: bold;
}

.grid-view .status-column.active::after
{
    content: "active";
}

.grid-view .status-column.closed::after
{
    content: "closed";
}

.grid-view .column-image
{
    width: 12px;
    height: 12px;
}

.grid-view .priority1
{
    background-image: url('Images/priority1.svg');
}

.grid-view .priority2
{
    background-image: url('Images/priority2.svg');
}

.grid-view .priority3
{
    background-image: url('Images/priority3.svg');
}

.grid-view .focused .priority1
{
    background-image: url('Images/priority1-white.svg');
}

.grid-view .focused .priority2
{
    background-image: url('Images/priority2-white.svg');
}

.grid-view .focused .priority3
{
    background-image: url('Images/priority3-white.svg');
}

.grid-view .kind1
{
    background-image: url('Images/kind1.svg');
}

.grid-view .kind2
{
    background-image: url('Images/kind2.svg');
}

.grid-view .focused .kind1
{
    background-image: url('Images/kind1-white.svg');
}

.grid-view .focused .kind2
{
    background-image: url('Images/kind2-white.svg');
}

/* GridView filter panel */
.filter-panel
{
    padding: 16px;
    padding-left: 18px;
}

/* Compact row height for DevExpress data grids. Scoped strictly to
   data-row <td>s so edit-form rows, filter rows, header rows, footer
   rows, and inner editor cells keep their theme-supplied padding
   (otherwise Update / Cancel and editor controls get clipped). */
table.dxgvControl_Office365 tr.dxgvDataRow_Office365 > td,
table.dxgvControl tr.dxgvDataRow > td
{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

table.dxgvControl_Office365 tr.dxgvDataRow_Office365,
table.dxgvControl tr.dxgvDataRow
{
    height: auto !important;
}

/* Zebra striping: every 2nd data row gets a whitesmoke background.
   No !important so DevExpress hover / focused / selected states still win. */
tr.dxgvDataRow_Office365:nth-of-type(even) > td,
tr.dxgvDataRow:nth-of-type(even) > td
{
    background-color: whitesmoke;
}

/* Plain-HTML action buttons rendered inside grid cells (Process Tree etc.) —
   styled to match the DevExpress Office365 primary button look
   (teal background, white text) so they align with Review / Apply / Save elsewhere. */
.tree-action-btn
{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    min-width: 60px;
    padding: 1px 12px;
    background-color: #216c87;
    border: 1px solid #216c87;
    border-radius: 2px;
    color: #fff;
    text-decoration: none;
    font: 600 12px inherit;
    cursor: pointer;
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
}
.tree-action-btn .btn-icon
{
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Icon-only variant — square, compact; used in grid/tree row actions. Tooltip
   via the element's title attribute. */
.tree-action-btn.tree-action-btn--icon
{
    min-width: 0;
    width: 26px;
    height: 22px;
    padding: 0;
    gap: 0;
}
.tree-action-btn.tree-action-btn--icon .btn-icon
{
    width: 14px;
    height: 14px;
}
.tree-action-btn:hover,
.tree-action-btn:focus
{
    background-color: #1a5670;
    border-color: #1a5670;
    color: #fff;
    text-decoration: none;
    outline: none;
}
.tree-action-btn:active
{
    background-color: #154458;
    border-color: #154458;
}