/* ============================================================================
   THEME VARIABLES — rendered once per tenant from WebSettings.
   Every rule below reads these via var(--lp-…); no other Razor in this file
   except the @media breakpoints (which can't reference CSS variables).
   ============================================================================ */
:root {
    /* brand colours + their derived readable foregrounds */
    --lp-color1: #073552;
    --lp-color1-fg: #fff;
    --lp-color2: #3899B0;
    --lp-color2-fg: #fff;
    --lp-color3: #00C907;
    --lp-color3-fg: #fff;
    --lp-color4: #3899B0;
    --lp-color4-fg: #fff;
    --lp-color5: #308396;
    --lp-color5-fg: #fff;
    --lp-color6: #ECE7D6;
    --lp-color6-fg: #000;
    /* lightened color1 for hover backgrounds */
    --lp-color7: #6A8597;

    /* footable row-detail colours */
    --lp-detail-bg:      #FFFFFF;
    --lp-detail-fg:      #000;
    --lp-detail-alt-bg:  #FBF9F4;
    --lp-detail-alt-fg:  #000;

    /* grid header + rows */
    --lp-grid-header-bg:        #B9E3EF;
    --lp-grid-header-fg:        #073552;
    --lp-grid-header-font-size: 16px;
    --lp-grid-row-bg:           #FFFFFF;
    --lp-grid-alt-bg:           #FBF9F4;
    --lp-grid-text-size:        14px;

    /* fonts + page title */
    --lp-page-title-fg:    #073552;
    --lp-page-title-size:  30px;
    --lp-font:             'Exo 2', 'Exo 2', sans-serif;
    --lp-button-font:      'Exo 2', 'Exo 2', sans-serif;
    --lp-headerspan-font:  'Exo 2', 'Exo 2', sans-serif;
    --lp-body-font-size:   14px;
}

/* ============================================================================
   GENERAL THEME RULES
   ============================================================================ */
.headerspan { font-family: var(--lp-headerspan-font) !important; }
body { font-size: var(--lp-body-font-size) !important; }

.list-item .dropdown:hover { background-color: var(--lp-color7) !important; }

/* ── color4 group (buttons / pagination arrows) ── */
.bttn2, .export-bttn, .import-bttn,
td.footable-row-detail-cell:not(.image-buttons) a.bttn-collapse:not(.edit),
td.footable-row-detail-cell:not(.image-buttons) a.bttn-collapse:hover .bttn-collapse,
#lnknextTask, #lnkprevTask,
#lnknextTask a, #lnknextTask a:hover,
#lnkprevTask a, #lnkprevTask a:hover { color: var(--lp-color4-fg) !important; }

.bttn2, .export-bttn, .import-bttn,
.bttn-collapse, #lnknextTask, #lnkprevTask { background-color: var(--lp-color4) !important; }

/* ── color5 group (view / add buttons) ── */
.bttn-view a, .bttn-view a:hover,
.bttn-add, .bttn-view,
a.bttn-view, a.bttn-view:hover,
td.footable-row-detail-cell a.bttn-view,
td.footable-row-detail-cell a.bttn-view:hover { color: var(--lp-color5-fg) !important; }

.bttn-add, .bttn-view { background-color: var(--lp-color5) !important; }

/* ── color2 group (panel/menu chrome) ── */
.nav-b, .nav-b a, .nav-b a:hover, #divHeader div,
.panel-heading, .panel-heading2, .panel-heading div, .panel-heading a, .panel-heading a:hover, .table-b p,
.portlet-title, .portlet-title div, .portlet-title a, .portlet-title a:hover, .table-b a, .table-b a:hover,
.logout > div.active, .profile-subheader, .icon-button, .icon-button-righticon,
.k-grid-cancel a, .btn-warning.cancel a, .btn-success.update a, .table-b .question,
.k-grid-cancel a:hover, .btn-warning.cancel a:hover, .btn-success.update a:hover,
a.k-grid-cancel, a.btn-warning.cancel, a.btn-success.update,
a.k-grid-cancel:hover, a.btn-warning.cancel:hover, a.btn-success.update:hover,
.search, .menu-links > li.active a:hover, .submenus > li.active a:hover,
.menu-links > li.active a, .submenus > li.active a,
.topic-content a:hover, .topic-content a,
.title, .title a, .title a:hover,
.loginbody, .loginbody a, .loginbody a:hover,
a.icon-button, a.icon-button:hover,
a.icon-button-righticon:hover { color: var(--lp-color2-fg) !important; }

.nav-b, .panel-heading, .panel-heading2, .portlet-title, .table-b,
a.icon-button, .icon-button-righticon,
.logout > div.active, .profile-subheader,
.menu-links > li.active, .submenus > li.active,
.topic-content, .loginbody,
.icon-button, #divHeader div, .k-grid-update, .k-grid-cancel,
.search, .btn-warning.cancel, .btn-success.update { background-color: var(--lp-color2) !important; }

/* ── color1 group (brand bars / clickable headings) ── */
.logout a, .logout p, .profile-header,
#exit a, #exit a:hover, #help a, #help a:hover,
.table-b1 a, .table-b1 a:hover, .icon-button:before,
.list-item nav-img .active p > a, .dropdown > p > a:hover,
.menu-links > li.active:before, .submenus > li.active:before, #btnLogin,
.header-b span, .mobileheaderspan, .blue-tooltip, .headerspan,
.loginbutton, .headerspan2 { color: var(--lp-color1-fg) !important; }

.profile-header, #topic .title, #task .title, #setting .title,
.panel .clickable, .clickable2, .table-b1 a,
.loginheader, #btnLogin, .lptooltipclass, .ui-tooltip,
.blue-tooltip + .tooltip > .tooltip-inner, .header-logo,
.header-b, .nav-img > .dropdown.active, .clickable,
.mobileheader, .loginbutton,
.fa-cog, .search-icon, .icon-button .fa-close { background-color: var(--lp-color1) !important; }

.blue-tooltip + .tooltip > .tooltip-arrow { border-bottom-color: var(--lp-color1) !important; }
.question, .question2 { color: var(--lp-color1) !important; }

/* Many FA icons re-skinned with the brand colour. */
.fa-ban, .fa-save, .fa-pencil, .fa-search, .fa-check, .fa-refresh,.icon-button .fa-filter,
.eyebig.fa-eye, .fa-money, .fabig.fa-upload,
.icon-button .fa-arrow-left, .icon-button-righticon .fa-arrow-right,
.fa-backward, .icon-button .fa-print {
    background-color: var(--lp-color1) !important;
    overflow: hidden;
    display: inline;
}

/* ── color3 group (k-button background) ── */
.k-button:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button) {
    background-color: var(--lp-color3) !important;
    color: var(--lp-color3-fg) !important;
}
/* Kendo 2026 renders the pager's page-number / prev / next buttons as
   .k-button (the 2017 version used plain links), so they fell into the color3
   button skin above. Keep the pager neutral; the selected page takes the
   brand colour. The :not() chain matches the rule above so this wins on
   source order at equal-or-higher specificity. */
.k-pager .k-button:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button),
.k-grid-pager .k-button:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button) {
    background-color: transparent !important;
    color: var(--lp-detail-fg, #424242) !important;
}

.k-pager .k-button.k-selected:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button),
.k-grid-pager .k-button.k-selected:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button) {
    background-color: var(--lp-color1) !important;
    color: var(--lp-color1-fg) !important;
}

/* Calendar popups (DatePicker / DateTimePicker) and NumericTextBox spinners —
   Kendo 2026 renders the month-title pill, prev/next arrows, the "today"
   footer and the spin up/down arrows as .k-button without .k-input-button,
   so they fell into the color3 skin above. Neutralise them; the selected
   date / today highlight then comes from the --kendo-color-* theme tokens
   (bridged to the tenant colours in menu.css). */
.k-calendar .k-button:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button),
.k-calendar-container .k-button:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button),
.k-button.k-spinner-increase:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button),
.k-button.k-spinner-decrease:not(.k-grid-update):not(.k-grid-cancel):not(.k-input-button) {
    background-color: transparent !important;
    color: inherit !important;
}

/* Kendo 2026 renders the dropdown picker's caret area as a child .k-button
   (.k-input-button). Force it transparent so it stops painting the brand
   colour over every DropDownList / ComboBox / DatePicker arrow. */
.k-picker .k-input-button,
.k-input .k-input-button,
.k-picker > .k-button,
.k-dropdownlist .k-button,
.k-combobox .k-button,
.k-datepicker .k-button,
.k-datetimepicker .k-button,
.k-timepicker .k-button,
.k-numerictextbox .k-button,
.k-dropdown-wrap > .k-select,
.k-picker-wrap > .k-select {
    background-color: transparent !important;
    color: var(--text-muted, #626f84) !important;
    border-color: transparent !important;
}

/* ── color6 group (mobile menu / task content / dropdown body) ── */
.mobilemenu, .mobilemenu a, .mobilemenu a:hover,
td.footable-row-detail-cell a:not(.bttn-collapse-delete):not(.bttn-view):not(.btn-success):not(.btn-warning):not(.icon-button),
td.footable-row-detail-cell a:not(.icon-button):not(.btn-success):not(.btn-warning):not(.icon-button):not(.bttn-view):hover,
.dropdown-content, .dropdown-content a, .dropdown-content a:hover,
.task-content a, .task-content a:hover,
.btn-accordion, .btn-accordion a, .btn-accordion a:hover { color: var(--lp-color6-fg) !important; }

.task-content, .mobilemenu, .btn-accordion, .btn-accordion .active { background-color: var(--lp-color6) !important; }

.dropdown-content {
    background-color: var(--lp-color6) !important;
    display: none;
    position: absolute;
    min-width: 235px;
    z-index: 9999;
    border-bottom: 1px solid #fff;
    top: 100%;
    left: -7px;
}
.dropdown-content a:hover {
    background-color: var(--lp-color6) !important;
    filter: brightness(108%);
    text-decoration: none;
}

/* ── page title / k-grid header text styling ── */
#cus, .profile-nametext, .k-grid-header {
    font-family: var(--lp-font) !important;
    font-size: var(--lp-page-title-size);
    margin-bottom: 0;
    color: var(--lp-page-title-fg);
}
#cus, .profile-nametext { font-weight: 600; margin-top: 22px; }

/* ── grid header / row sizing ── */
.MoveHeader_1, .MoveHeader_2,
tr.k-grid-header, th.k-header,
.summaryheader td, .k-grid-header td, .k-grid-header th {
    background-color: var(--lp-grid-header-bg) !important;
    color: var(--lp-grid-header-fg) !important;
    font-size: var(--lp-grid-header-font-size) !important;
    font-family: var(--lp-button-font);
}
.k-grid-header th, .k-grid-header th a,
.k-grid-header td a, .k-grid-header td a:hover,
.k-grid-header .k-link,
.summaryheader td, .summaryheader a {
    color: var(--lp-grid-header-fg) !important;
    font-weight: 700;
}
h4 {
    font-size: var(--lp-grid-header-font-size) !important;
    font-family: var(--lp-button-font);
}

.k-grid tr, .k-grid tr:hover {
    background-color: var(--lp-grid-row-bg);
    font-size: var(--lp-grid-text-size);
}
tr.k-alt, tr.k-alt:hover {
    background-color: var(--lp-grid-alt-bg) !important;
    font-size: var(--lp-grid-text-size) !important;
}
.k-grid td, .k-grid td:hover { font-size: var(--lp-grid-text-size) !important; }

/* ── footable row-detail backgrounds + readable text ── */
.footable-row-detail {
    background-color: var(--lp-detail-bg) !important;
    color: var(--lp-detail-fg) !important;
}
tr.k-alt + .footable-row-detail {
    background-color: var(--lp-detail-alt-bg) !important;
    color: var(--lp-detail-alt-fg) !important;
}

/* ============================================================================
   KENDO 2026 NEW-RENDERING OVERRIDES — same theme variables.
   ============================================================================ */
.k-grid .k-grid-header .k-table-th,
.k-grid .k-grid-header th.k-header,
.k-grid .k-grid-header .k-header {
    background-color: var(--lp-grid-header-bg) !important;
    color: var(--lp-grid-header-fg) !important;
    font-size: var(--lp-grid-header-font-size) !important;
    font-family: var(--lp-button-font) !important;
}
.k-grid .k-grid-header .k-table-th .k-link,
.k-grid .k-grid-header .k-table-th a,
.k-grid .k-grid-header .k-cell-inner > .k-link,
.k-grid .k-grid-header .k-column-title {
    color: var(--lp-grid-header-fg) !important;
    font-weight: 700;
}

.k-grid .k-table-row > td,
.k-grid .k-table-td,
.k-grid td { font-size: var(--lp-grid-text-size) !important; }
.k-grid .k-table-row     { background-color: var(--lp-grid-row-bg); }
.k-grid .k-table-alt-row,
.k-grid tr.k-alt         { background-color: var(--lp-grid-alt-bg) !important; }

.k-grid .k-table-row.k-selected > td,
.k-grid tr.k-selected > td {
    background-color: var(--lp-color1) !important;
    color: var(--lp-color1-fg) !important;
}

/* no hover highlight on grid rows */
.k-grid .k-table-row.k-hover > td,
.k-grid .k-table-row:hover > td,
.k-grid .k-table-alt-row.k-hover > td,
.k-grid .k-table-alt-row:hover > td,
.k-grid tr:hover > td,
.k-grid tr.k-alt:hover > td { background-color: transparent !important; }

.k-grid-pager .k-selected,
.k-pager .k-selected,
.k-pager-numbers .k-selected {
    background-color: var(--lp-color1) !important;
    border-color:     var(--lp-color1) !important;
    color:            var(--lp-color1-fg) !important;
}

/* ── input widgets — consistent box, brand-coloured focus ring ── */
.k-input, .k-picker, .k-dropdownlist, .k-combobox, .k-multiselect,
.k-numerictextbox, .k-datepicker, .k-datetimepicker, .k-timepicker, .k-textbox {
    font-family: var(--lp-button-font);
    border-radius: 4px;
}
.k-input-inner { font-size: var(--lp-grid-text-size); }
.k-input.k-focus, .k-picker.k-focus,
.k-input:focus-within, .k-picker:focus-within {
    border-color: var(--lp-color1) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lp-color1) 20%, transparent) !important;
}

/* ── popup list items (DropDownList / ComboBox / MultiSelect) ── */
.k-list, .k-list-md,
.k-list .k-list-item, .k-popup .k-list-item,
.k-list .k-list-optionlabel,
.k-animation-container .k-list-item {
    font-size:   var(--lp-grid-text-size) !important;
    font-family: var(--lp-button-font) !important;
    line-height: 1.6;
}
.k-list .k-list-item.k-selected,
.k-popup .k-list-item.k-selected {
    background-color: var(--lp-color1) !important;
    color:            var(--lp-color1-fg) !important;
}
.k-list .k-list-item.k-hover,
.k-list .k-list-item:hover { background-color: var(--lp-color7) !important; }

.k-multiselect .k-chip,
.k-chip-list .k-chip.k-selected {
    background-color: var(--lp-color2) !important;
    color:            var(--lp-color2-fg) !important;
}

/* ============================================================================
   Bootstrap-3 navbar breakpoints — tenant-configurable, so still Razor.
   (CSS variables aren't allowed inside @media queries.)
   ============================================================================ */
@media (min-width: 1301px) {
    .nav-justified > li { display: table-cell; width: 1%; }
    .nav-justified > li > a { margin-bottom: 0; }
    .nav-tabs-justified > li > a { border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }
    .nav-tabs-justified > .active > a,
    .nav-tabs-justified > .active > a:focus,
    .nav-tabs-justified > .active > a:hover { border-bottom-color: #fff; }

    .navbar-collapse { width: auto; border-top: 0; box-shadow: none; }
    .navbar-collapse.collapse { display: none !important; height: auto !important; padding-bottom: 0; overflow: visible !important; }
    .navbar-collapse.in { overflow-y: visible; }
    .navbar-fixed-bottom .navbar-collapse,
    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse { padding-right: 0; padding-left: 0; }
    .navbar-toggle { display: none; }
    .navbar-nav { float: left; margin: 0; }
    .navbar-nav > li { float: left; }
    .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }

    .navbar-form .form-control-static,
    .navbar-form .form-group { display: inline-block; }
    .navbar-form .control-label,
    .navbar-form .form-group { margin-bottom: 0; vertical-align: middle; }
    .navbar-form .form-control { display: inline-block; width: auto; vertical-align: middle; }
    .navbar-form .input-group { display: inline-table; vertical-align: middle; }
    .navbar-form .input-group .form-control,
    .navbar-form .input-group .input-group-addon,
    .navbar-form .input-group .input-group-btn { width: auto; }
    .navbar-form .input-group > .form-control { width: 100%; }
    .navbar-form .checkbox,
    .navbar-form .radio { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
    .navbar-form .checkbox label,
    .navbar-form .radio label { padding-left: 0; }
    .navbar-form .checkbox input[type=checkbox],
    .navbar-form .radio input[type=radio] { position: relative; margin-left: 0; }
    .navbar-form .has-feedback .form-control-feedback { top: 0; }

    .navbar-text { float: left; margin-right: 15px; margin-left: 15px; }
    .container { width: 100%; }

    .visible-md, .visible-lg { display: block !important; }
    table.visible-md, table.visible-lg { display: table !important; }
    tr.visible-md, tr.visible-lg { display: table-row !important; }
    td.visible-md, th.visible-md, td.visible-lg, th.visible-lg { display: table-cell !important; }
    .visible-md-block, .visible-lg-block { display: block !important; }
    .visible-md-inline, .visible-lg-inline { display: inline !important; }
    .visible-md-inline-block, .visible-lg-inline-block { display: inline-block !important; }
    .hidden-lg, .hidden-md { display: none !important; }

    .nav-tabs.nav-justified > li { display: table-cell; width: 1%; }
    .nav-tabs.nav-justified > li > a { margin-bottom: 0; border-bottom: 1px solid #ddd; border-radius: 4px 4px 0 0; }
    .nav-tabs.nav-justified > .active > a,
    .nav-tabs.nav-justified > .active > a:focus,
    .nav-tabs.nav-justified > .active > a:hover { border-bottom-color: #fff; }

    .navbar-right .dropdown-menu { right: 0; left: auto; }
    .navbar-right .dropdown-menu-left { right: auto; left: 0; }
}

@media (max-width: 1300px) {
    .navbar-nav .open .dropdown-menu {
        position: static; float: none; width: auto; margin-top: 0;
        background-color: transparent; border: 0; box-shadow: none;
    }
    .navbar-nav .open .dropdown-menu .dropdown-header,
    .navbar-nav .open .dropdown-menu > li > a { padding: 5px 15px 5px 25px; }
    .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; }
    .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-nav .open .dropdown-menu > li > a:hover { background-image: none; }
    .hidden-xs { display: none !important; }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header { border-color: #080808; }
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider { background-color: #080808; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover { color: #fff; background-color: transparent; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover { color: #fff; background-color: #080808; }
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus,
    .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover { color: #444; background-color: transparent; }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { color: #333; background-color: transparent; }
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
    .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover { color: #555; background-color: #e7e7e7; }
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus,
    .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover { color: #ccc; background-color: transparent; }
}

@media (min-width: 768px) and (max-width: 1300px) {
    .visible-sm { display: block !important; }
    table.visible-sm { display: table !important; }
    tr.visible-sm { display: table-row !important; }
    td.visible-sm, th.visible-sm { display: table-cell !important; }
    .visible-sm-block { display: block !important; }
    .visible-sm-inline { display: inline !important; }
    .visible-sm-inline-block { display: inline-block !important; }
}