/* ============================================================
   email-grid.css — /Email/IndexV2 (email grid page)
   Look of the old EmailV1 grid page: grey gradient header, 12px Tahoma,
   bold unread rows, red error rows, yellow attachment-missing rows.
   Phone layout stays in mobile.css (only applies on small / touch screens).
   ============================================================ */

/* ── Grid ─────────────────────────────────────────────────── */
.clsVGrid {
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 0;
    margin: 0;
    font-family: Tahoma, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px !important;
    width: 100%;
}

.clsVGrid > div.k-grid-header > div.k-grid-header-wrap > table.k-grid-header-table > thead.k-table-thead > tr.k-table-row > th,
.clsVGrid .k-grid-header th.k-header {
    padding: 5px 5px !important;
    background: linear-gradient(to bottom, #f7f8ff 18%, #adadad 100%);
    font-family: Tahoma, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    border: 0.8px solid rgb(165, 172, 182);
    border-right: none;
    color: black !important;
    white-space: nowrap !important;
}

.clsVGrid > div.k-grid-container > div.k-grid-content > table.k-grid-table > tbody.k-table-tbody > tr > td {
    padding: 2px 5px !important;
    font-family: Tahoma, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    border: 0.8px solid rgb(165, 172, 182);
    border-top: none;
    border-right: none;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.clsVGrid > div.k-grid-container > div.k-grid-content > table.k-grid-table > tbody.k-table-tbody > tr > td:last-child {
    border: 1px solid rgb(165, 172, 182) !important;
}

#grid table { table-layout: fixed !important; }

/* old alternate row colour */
#grid tbody.k-table-tbody > tr:nth-child(even),
#grdEmailDraft tbody.k-table-tbody > tr:nth-child(even),
#grdEmailIntro tbody.k-table-tbody > tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* row states */
tr.clsIsNotRead > td { font-weight: 700; white-space: nowrap; border-bottom: 1px solid lightgrey; }
tr.clsIsRead > td { font-weight: normal; white-space: nowrap; border-bottom: 1px solid lightgrey; }
tr.clsIsError > td { color: red !important; }
tr.clsIsNoError > td { color: rgb(0, 0, 39) !important; }
tr.clsIsAttachmentMissing > td { background-color: yellow !important; }
tr.UnknownVgt > td { background-color: #fff2cc !important; }
tr.clsActioned > td { background-color: lightgray !important; cursor: none; }
/* [GR-25] selected row (checkbox ticked) — old EmailGrid.css highlight; rule was missing, so nothing showed */
.clsVGrid > div.k-grid-container > div.k-grid-content > table.k-grid-table > tbody.k-table-tbody > tr.clsSelected > td { background-color: #cfe8ff !important; }

/* [GR-25] Documents cell wraps (old inline style white-space:normal); the general td rule above is nowrap */
.clsVGrid > div.k-grid-container > div.k-grid-content > table.k-grid-table > tbody.k-table-tbody > tr > td.clsDocTab {
    white-space: normal !important;
    word-break: break-word;
    border-right: 1px solid rgb(165, 172, 182) !important;
}

/* error label grid */
.errSpamId td { background-color: #e0e0e0 !important; }
.errSpamName td { background-color: #fff8dc !important; }

.clsGrid > div.k-grid-container > div.k-grid-content > table.k-grid-table > tbody.k-table-tbody > tr > td:last-child {
    white-space: normal !important;
}

.clsEmailIcons { height: 13px; width: 13px; font-size: 13px; font-weight: 600; }
.clsSVGHW { height: 14px !important; width: 14px !important; }
.clsSubject { cursor: pointer; }
.clsEmailSelect { cursor: pointer; }

/* tooltips */
.clsEmailToolTip > tbody > tr > td {
    background-color: rgb(255, 255, 224);
    font-family: Tahoma, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    padding: 2px 3px !important;
    white-space: nowrap !important;   /* no wrapping inside the row / document tooltips (grid-main.js _fitTip keeps them inside the window) */
}
.clsEmailToolTip td, .clsEmailToolTip th { white-space: nowrap !important; }
.k-tooltip { color: black !important; font-size: 12px !important; font-family: Tahoma, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.clsPaddingLeft { left: 10px !important; }
.clsPaddingRight { right: 10px !important; }
.clsSubjectPaddingRight { right: 950px !important; }

/* pager "Days / More" box */
input.clsBackDays::-webkit-inner-spin-button, input.clsBackDays::-webkit-outer-spin-button,
input.clsPeriodBackDays::-webkit-inner-spin-button, input.clsPeriodBackDays::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.clsBackDays, input.clsPeriodBackDays { -moz-appearance: textfield; }

.clsCommonButton {
    padding: 0px 6px;
    background-color: purple;
    color: #fff;
    line-height: 0px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer !important;
}

/* ── Header toolbar ───────────────────────────────────────── */
.clsHeaderButton {
    height: 19px;
    padding: 0px 6px;
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: #fff;
    line-height: 0px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer !important;
}

.clsExtraFilterBox {
    padding: 1px 5px;
    background-color: #fff;
    width: 175px;
    white-space: nowrap;
    min-width: 70px;
    border: 0.5px solid;
    height: 15px;
    cursor: pointer !important;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: 400;
}
.clsExtraFilterText { width: 165px; display: inline-block; overflow-x: hidden; text-overflow: ellipsis; }
.clsExtraFilterArrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: currentColor;
    transform: rotate(45deg);
    float: right;
}

.clsCountLink { cursor: pointer; color: purple; font-size: 12px; font-weight: bold; }
/* Counts bar: one flex row, the cells are transparent (display: contents) so each visible item is a flex item and the gap is
   the same between all of them. Hidden counts (display:none) take no gap. No   / cell padding to keep in step. */
#tblECounts { border-collapse: collapse; border-spacing: 0; margin: 0; }
#tblECounts > tbody > tr { display: flex; align-items: center; gap: 14px; white-space: nowrap; line-height: 1.2; }
#tblECounts > tbody > tr > td { display: contents !important; }
span.k-picker.k-dropdownlist { background-color: #fff !important; }
.k-context-menu { z-index: 99999 !important; }

/* ── Search panel ─────────────────────────────────────────── */
#dvSearch {
    display: none;
    position: absolute;
    z-index: 1000;
    background-color: lightgray;
    padding: 5px;
    border: 1px solid black;
    width: 930px !important;
}
.clstd1 { font-weight: bold !important; }
.SearchTable { background-color: rgb(228, 228, 235); width: 100% !important; }
.SearchTable > tbody { background-color: rgb(228, 228, 235); padding: 0px !important; display: block; width: 100% !important; }
.SearchTable > tbody > tr > td { text-align: left !important; padding: 3px 5px !important; white-space: nowrap !important; }

.clsBtnCommon, .clsBtnCancel {
    height: 22px;
    border: none;
    color: #fff;
    padding: 1px !important;
    padding-bottom: 3px !important;
    min-width: 70px;
    -webkit-user-select: none;
    box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}
.clsBtnCommon { background: linear-gradient(to bottom, #ffffff 1%, #3c8dbc 19%, #3c8dbc 100%); }
.clsBtnCancel { background: linear-gradient(to bottom, #ffffff 1%, #ed3e04 19%, #f21000 100%); }

/* old search tab strip colours (were injected by SearchBox()) */
#tabstrip .k-tabstrip-item, #tabstrip .k-item {
    background-color: #f4f4f4;
    border: 1px solid #bcbcbc;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-size: 13px;
    font-family: Tahoma, sans-serif;
    font-weight: normal;
    color: #4a4a4a;
    margin-right: 2px;
    cursor: pointer;
}
#tabstrip .k-tabstrip-item:hover, #tabstrip .k-item:hover { background-color: #fffbe7; color: #e36c0a; }
#tabstrip .k-tabstrip-item.k-active, #tabstrip .k-item.k-active { background-color: #ffffff; color: #f58220; font-weight: bold; border-bottom: 1px solid #ffffff; }

/* ── Phone / small screen only (desktop look above is unchanged) ── */
@media (max-width: 768px) {
    main.container { box-sizing: border-box; padding: 0 !important; }
    .headerContainer { flex-wrap: wrap; height: auto !important; gap: 4px; padding: 4px 6px; }
    .headerContainer .box { flex: 1 1 100% !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 6px; text-align: left; }
    #ddlView, #ddlAction { max-width: 100%; min-height: 32px; }
    .clsHeaderButton { height: 30px; padding: 0 12px; }

    /* grids keep their desktop column sizes and scroll sideways inside the grid */
    .clsVGrid { max-width: 100vw; }
    .clsVGrid .k-grid-header-wrap > table,
    .clsVGrid .k-grid-content > table { min-width: 980px; }
    .clsVGrid .k-grid-content { -webkit-overflow-scrolling: touch; }
    .clsVGrid input.clsAction { width: 20px !important; height: 20px !important; }
    .k-pager .custom-go-box { flex: 1 1 100% !important; text-align: left !important; }

    /* search panel: full width, one field per line */
    #dvSearch { width: calc(100vw - 12px) !important; left: 6px !important; max-height: 85vh; overflow: auto; }
    #dvSearch .SearchTable > tbody > tr { display: flex; flex-wrap: wrap; align-items: center; }
    #dvSearch .SearchTable > tbody > tr > td { white-space: normal !important; }
    #dvSearch .SearchTable input[style*="700px"], #dvSearch .SearchTable .k-picker[style*="700px"],
    #dvSearch .SearchTable .k-dropdownlist, #dvSearch .SearchTable .k-datepicker { width: 100% !important; max-width: calc(100vw - 40px); }
}