/* Shell polish: faster paint and fluid resize. IDs and controls stay the same. */

html {
    height: 100%;
}

html, body.appbody {
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    background-image: none;
    -webkit-transform: none;
    transform: none;
}

body.appbody {
    padding: 2px 6px 4px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

#search {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

#search > tbody {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
}

#search > tbody > tr {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
}

#spleft,
#spright {
    min-width: 0;
    vertical-align: top;
    overflow: hidden;
}

#spleft {
    width: min(520px, 42vw);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#spright {
    flex: 1 1 auto;
    width: auto;
    min-width: 200px;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#crm-left-top,
#crm-left-bottom {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

#crm-left-top {
    flex: 1 1 48%;
    min-height: 140px;
}

#crm-left-bottom {
    flex: 1 1 auto;
    min-height: 120px;
}

.crm-split {
    flex: 0 0 6px;
    background: darkgray;
}

.crm-split-v {
    cursor: col-resize;
    width: 8px;
    min-width: 8px;
    height: 100%;
    margin: 0 3px;
}

.crm-split-h {
    cursor: row-resize;
    height: 6px;
    min-height: 6px;
    width: 100%;
    margin: 2px 0;
}

.crm-split:hover,
body.crm-col-resizing .crm-split-v,
body.crm-row-resizing .crm-split-h {
    background: gray;
}

body.crm-col-resizing,
body.crm-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

body.crm-row-resizing,
body.crm-row-resizing * {
    cursor: row-resize !important;
    user-select: none !important;
}

#dashcontainer {
    margin-left: 0;
    margin-top: 0;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    height: 100%;
}

#dashboard,
#dashboardheader,
#searchrows,
#searchcontrols,
#results,
#resultsfooter,
#listsheader,
#listsfooter,
#tablist,
.dashboardcontent {
    max-width: 100%;
    box-sizing: border-box;
}

#dashboard {
    overflow-x: auto;
    contain: layout;
    margin-top: 0;
    padding-top: 0;
}

#searchrows {
    flex: 0 1 auto;
    max-height: 22vh;
    overflow-y: auto;
    min-height: 0;
}

#results {
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 48px;
    height: auto;
    overflow-y: auto;
    align-self: stretch;
}

#tablist {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#liststabs {
    flex: 1 1 auto;
    min-height: 0;
    height: 100% !important;
    max-height: 100%;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

#liststabs .ui-tabs-nav {
    flex: 0 0 auto;
}

#liststabs .ui-tabs-panel,
.tabspage {
    flex: 1 1 auto;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    padding-top: 2px !important;
}

#spright .ui-tabs .ui-tabs-nav,
#spright .dashboardcontent > .ui-tabs-nav {
    margin: 0 0 8px 0 !important;
}

#spright .ui-tabs .ui-tabs-panel,
#spright .dashboardcontent .ui-tabs-panel,
#spright #tabs-view {
    margin: 8px 0 0 0 !important;
    padding: 6px 8px 0 8px !important;
}

#spright .ui-tabs .ui-tabs-panel > .dashitemline:first-child,
#spright .ui-tabs .ui-tabs-panel > .dashitemhalfline:first-child,
#spright .dashboardcontent .ui-tabs-panel > .dashitemline:first-child,
#spright .dashboardcontent .ui-tabs-panel > .dashitemhalfline:first-child {
    margin-top: 4px !important;
}

#spright .dashboardcontent {
    margin: 0;
    padding: 8px !important;
    box-sizing: border-box;
}

#spright .dashitemline,
#spright .dashitemhalfline {
    margin: 0 0 6px 0 !important;
    padding: 0;
    box-sizing: border-box;
}

#spright .dashitemline:last-child,
#spright .dashitemhalfline:last-child {
    margin-bottom: 0 !important;
}

#spright .dashinputitem {
    box-sizing: border-box;
}

#dashboardheader {
    margin-bottom: 8px;
}

#nowtime {
    position: static !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
}

.crm-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    height: auto !important;
    min-height: 40px;
    line-height: 1.2 !important;
    padding: 4px !important;
    width: 100%;
    box-sizing: border-box;
}

.crm-toolbar .headertext {
    /* searchcore sets color:transparent but the label still took width */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    border: 0 !important;
    font-size: 0 !important;
}

#listsheader,
#listsfooter {
    gap: 0;
}

#listsheader .headertext {
    /* keep collapsed like other toolbar titles */
}

#listsfootertext {
    margin-right: auto;
}

#listsheader .sortheader {
    margin-left: 0;
    gap: 4px;
}

#searchtype {
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 32px !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#searchtype #searchtypeselect {
    flex: 0 0 auto;
    margin: 0 !important;
}

#searchtype #filterselectdiv {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin: 0 4px 0 0 !important; /* clear gap before checkbox */
    padding-right: 22px; /* room for dropdown arrow */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: inline-flex !important;
    align-items: center;
}

#searchtype #filterselect {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#searchtype #filterselectdropdown {
    position: absolute;
    right: 0;
    top: 2px;
    bottom: 2px;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

#searchtype #filterall {
    flex: 0 0 auto;
    flex-shrink: 0;
    margin: 0 4px 0 0 !important;
    position: relative;
    z-index: 1;
}

/* right cluster: save, and/or, add — tight, right-aligned */
#searchtype #savefilter {
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto;
}

#searchtype #andor {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

#searchtype #addbutton {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

.searchrow .icbutton {
    float: none !important;
    margin: 0 !important;
}

.crm-toolbar .icbutton {
    float: none !important;
}

.crm-toolbar .sortheader {
    float: none !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    min-width: 0;
}

.crm-toolbar .headerobj {
    position: static !important;
    right: auto !important;
    height: auto !important;
    display: inline-flex;
    align-items: center;
}

#sortresults,
#listsortresults {
    width: min(168px, 100%) !important;
    max-width: 100%;
    margin-top: 0 !important;
    min-width: 0;
    height: 32px !important;
    box-sizing: border-box;
}

#resultsfootertext,
#listsfootertext {
    margin-right: auto;
    margin-left: 0;
    font-size: 0.8em;
    min-width: 0;
}

.crm-add-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.crm-dashbar {
    justify-content: flex-end;
}

.crm-baricons {
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.crm-baricons img {
    height: 18px;
    width: auto;
    display: block;
}

#dashboardheader {
    height: auto !important;
    min-height: 36px;
}

#dbsize {
    position: absolute !important;
    top: 2px;
    right: 8px;
    width: auto !important;
    height: auto !important;
    z-index: 5;
    pointer-events: none;
}

.searchrow,
#searchtype {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    height: 32px !important;
}

/* Second-line search filter boxes: even 4px gaps */
.searchrow {
    display: flex !important;
    align-items: center;
    gap: 4px;
    margin: 2px 0 3px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

.searchrow .combolist,
.searchrow .by {
    flex: 0 1 28%;
    width: auto !important;
    max-width: 32%;
    min-width: 72px;
    margin: 0 !important;
}

.searchrow .operator {
    flex: 0 1 20%;
    width: auto !important;
    max-width: 28%;
    min-width: 72px;
    margin: 0 !important;
}

.searchrow .searchrow-value {
    flex: 1 1 auto;
    display: flex !important;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: auto !important;
}

.searchrow .searchvalue {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}

.searchrow .searchvaluedropdown {
    flex: 0 1 160px;
    width: auto !important;
    max-width: 40%;
    margin: 0 !important;
}

.searchrow .icbutton {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

#spleft select,
#spleft .idrop,
#spleft .ibox,
#spleft .combolist,
#spleft .searchvalue,
#spleft .searchvaluedropdown,
#searchtypeselect,
#andor,
#sortresults,
#listsortresults,
#filterselectdiv,
#spright select,
#spright .dashitemcombo,
#spright .dashitemdropdown {
    height: 32px !important;
    min-height: 32px !important;
    line-height: 30px !important;
    box-sizing: border-box;
    vertical-align: middle !important;
}

#filterselectdiv {
    display: inline-flex;
    align-items: center;
}

.by, .operator, .searchvalue, .combolist {
    max-width: 100%;
    box-sizing: border-box;
}

.resultsrow {
    content-visibility: auto;
    contain-intrinsic-size: 0 26px;
}

#sortresults,
#listsortresults {
    width: min(200px, 36vw) !important;
    max-width: 100%;
    height: 32px !important;
}

.headerobj {
    max-width: 100%;
}

.crm-topstrip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 16px;
    max-height: 18px;
    margin: 0 72px 2px 0;
}

#marquee {
    height: 16px;
    width: 70%;
    overflow: hidden;
    max-width: calc(100% - 12px);
}

#searchrows,
#searchcontrols,
#resultsfooter,
#listsheader,
#listsfooter {
    flex: 0 0 auto;
}

#listsfooter {
    margin-top: 0;
}

.k-grid,
.k-scheduler,
.jsgrid {
    max-width: 100%;
}

.k-grid-content,
.jsgrid-grid-body {
    overflow-x: auto;
}

body.is-compact #toggle {
    display: block !important;
}

@media (max-width: 900px) {
    #search {
        border-spacing: 0;
    }
    #sortresults,
    #listsortresults {
        width: min(140px, 28vw) !important;
    }
}

@media (max-width: 700px) {
    body.appbody {
        padding: 2px 4px 6px;
        height: auto;
        max-height: none;
        overflow: auto;
    }
    #search,
    #search > tbody,
    #search > tbody > tr {
        display: block;
        width: 100%;
    }
    #spleft,
    #spright,
    #crm-left-top,
    #crm-left-bottom {
        display: block;
        width: 100% !important;
        padding-bottom: 8px;
        height: auto !important;
        max-height: none !important;
        overflow: visible;
        flex: none !important;
    }
    .crm-split {
        display: none;
    }
    #tablist {
        min-height: 180px;
        max-height: 50vh;
    }
    #sortresults,
    #listsortresults {
        width: min(160px, 55vw) !important;
    }
    .sline {
        min-width: 0;
        max-width: 100%;
    }
}

/* Login modal: hide the rest of the CRM so nothing shows through. */
body.crm-login-open {
    overflow: hidden;
}

body.crm-login-open .crm-topstrip,
body.crm-login-open #search,
body.crm-login-open #dashcontainer,
body.crm-login-open #dashboardheader,
body.crm-login-open #toggle,
body.crm-login-open #dbsize,
body.crm-login-open #loginwindow {
    display: none !important;
    visibility: hidden !important;
}

body.crm-login-open .ui-widget-overlay {
    background: #1a1a1a !important;
    opacity: 1 !important;
}

body.crm-login-open .ui-dialog {
    z-index: 10000 !important;
}

button.icbutton,
.icbutton {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    padding: 4px !important;
    margin-top: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #c4ccd0;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

button.icbutton img,
.icbutton img {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px;
    max-height: 20px;
    object-fit: contain;
    display: block;
}

button.icbutton:hover,
.icbutton:hover {
    background-color: #f4f8fa;
    border-color: #8fa0a8;
}

button.icbutton:active,
.icbutton:active {
    background-color: #e6eef2;
    box-shadow: none;
}

button.icbutton:focus-visible,
.icbutton:focus-visible {
    outline: 2px solid rgba(69, 158, 222, 0.55);
    outline-offset: 1px;
}

#spright .dialogbutton,
#dashboard .dialogbutton {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 36px;
    min-height: 36px;
    min-width: 112px;
    padding: 0 16px;
    margin: 4px 8px 4px 0;
    box-sizing: border-box;
    background: #eef3f6;
    border: 1px solid #c4ccd0;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    color: #1f2a2e;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

#spright .dialogbutton:hover,
#dashboard .dialogbutton:hover {
    background-color: #e2ebf0;
    border-color: #8fa0a8;
}

#spright .dialogbutton:active,
#dashboard .dialogbutton:active {
    background-color: #d5e0e6;
    box-shadow: none;
}

#spright .dialogbutton:focus-visible,
#dashboard .dialogbutton:focus-visible {
    outline: 2px solid rgba(69, 158, 222, 0.55);
    outline-offset: 1px;
}


/* Results / Lists: All-None on the left with a small left gap */
.crm-toolbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    margin-right: auto;
    min-width: 0;
    position: relative;
}

.crm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    min-width: 0;
}

#selectall,
#selectallcart {
    margin: 0;
}

#searchcontrols.crm-toolbar,
#listsheader.crm-toolbar,
#resultsfooter.crm-toolbar,
#listsfooter.crm-toolbar {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Lists: sort icon + dropdown + refresh tight on the right */
#listsheader .crm-toolbar-right.lists-sort-cluster {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

#listsheader .lists-sort-cluster .sorticon {
    display: block;
    height: 24px;
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}

#listsheader .lists-sort-cluster #listsortresults {
    width: min(168px, 36vw) !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

#listsheader #refreshlists {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
}

#listsheader #refreshlists img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Lists footer: add + remove buttons tight on the right */
#listsfooter .lists-footer-cluster {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

#listsfooter .lists-footer-cluster .crm-add-label {
    margin: 0;
    flex: 0 0 auto;
}

#listsfooter .lists-footer-cluster .icbutton {
    margin: 0;
    flex: 0 0 auto;
}

/* Results footer: action buttons tight on the right (match Lists footer) */
#resultsfooter .results-footer-cluster {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

#resultsfooter .results-footer-cluster .icbutton {
    margin: 0;
    flex: 0 0 auto;
}

/* Results toolbar: sort + dropdown + search + clear tight on the right */
#searchcontrols .crm-toolbar-right.results-sort-cluster {
    margin-left: auto;
    margin-right: 0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

#searchcontrols .results-sort-cluster .sorticon {
    display: block;
    height: 24px;
    width: auto;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

#searchcontrols .results-sort-cluster #sortresults {
    width: min(168px, 36vw) !important;
    margin: 0 !important;
    flex: 0 0 auto;
}

#searchcontrols .results-sort-cluster .icbutton {
    margin: 0;
    flex: 0 0 auto;
}

/* Shared top-left toolbar padding */
#searchcontrols.crm-toolbar,
#resultsfooter.crm-toolbar {
    gap: 4px;
}

/* CRM left-column: edge inset = in-between gap (4px) inside each panel */
#spleft {
    --crm-gap: 4px;
}

#spleft #searchrows,
#spleft #results,
#spleft #tablist,
#spleft #searchcontrols,
#spleft #resultsfooter,
#spleft #listsheader,
#spleft #listsfooter {
    padding-left: var(--crm-gap) !important;
    padding-right: var(--crm-gap) !important;
    box-sizing: border-box;
}

#spleft .crm-toolbar {
    gap: var(--crm-gap);
}

#spleft .crm-toolbar-left {
    margin-left: 0 !important;
}

#spleft .crm-toolbar-right,
#spleft .results-sort-cluster,
#spleft .lists-sort-cluster,
#spleft .results-footer-cluster,
#spleft .lists-footer-cluster {
    margin-right: 0 !important;
    gap: var(--crm-gap) !important;
}

#spleft #searchtype,
#spleft .searchrow {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: var(--crm-gap) !important;
}

#spleft #searchtype #filterselectdiv,
#spleft #searchtype #filterall {
    margin-right: var(--crm-gap) !important;
}

/* Campaign General-tab charts: responsive wrap + modern doughnut (reversible) */
#spright .crm-chart-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    clear: both;
    margin: 8px 0 12px 0;
}

#spright .crm-chart-wrap .chartBox,
#spright .crm-chart-wrap .chartDataBox {
    float: none !important;
    box-sizing: border-box;
    border-radius: 14px;
    border: 1px solid #d8e0e6;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    padding: 14px 16px;
    width: auto !important;
    height: auto !important;
    min-width: 0;
}

#spright .crm-chart-wrap .chartBox {
    flex: 1 1 300px;
    min-width: min(280px, 100%);
    max-width: 100%;
    min-height: 280px;
    position: relative;
}

#spright .crm-chart-wrap .crm-chart-title {
    font: 600 13px/1.3 system-ui, -apple-system, Segoe UI, sans-serif;
    color: #0f172a;
    margin: 0 0 8px 0;
}

#spright .crm-chart-wrap .crm-chart-canvas-wrap {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

#spright .crm-chart-wrap .chartDataBox {
    flex: 1 1 200px;
    min-width: min(200px, 100%);
    max-width: 360px;
}

#spright .crm-chart-wrap .chartBox canvas {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    max-height: 320px;
}

#spright .crm-chart-stat-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eef2;
}

#spright .crm-chart-stat-total-label {
    font: 600 11px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#spright .crm-chart-stat-total-value {
    font: 700 22px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
    color: #0f172a;
    margin-top: 2px;
}

#spright .crm-chart-stat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#spright .crm-chart-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
    font: 13px/1.3 system-ui, -apple-system, Segoe UI, sans-serif;
    color: #1e293b;
}

#spright .crm-chart-stat-row:last-child {
    border-bottom: none;
}

#spright .crm-chart-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

#spright .crm-chart-stat-name {
    flex: 1 1 auto;
    min-width: 0;
}

#spright .crm-chart-stat-nums {
    flex: 0 0 auto;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

#spright .crm-chart-stat-nums em {
    font-style: normal;
    color: #64748b;
    margin-left: 4px;
}