/*
    Kendo UI + Bootstrap 5 compatibility overrides.
    Originally for v2021 box-sizing conflicts. Updated for v2026 Sass themes.

    v2026 uses border-box globally (matching Bootstrap 5), so the old
    content-box reset is no longer needed. Remaining rules are custom
    styling overrides for Guard Tour UI.

    Epic 34: Removed --kendo-font-size override. Bootstrap 5 uses the browser default
    html { font-size: 16px }, so Kendo's rem-based sizing works correctly without override.
    (Bootstrap 3 set html { font-size: 10px }, requiring --kendo-font-size: 14px.)
*/

/* v2026 sets .k-content to position:absolute with inset:0 (for calendar/popup use).
   Stand-alone page content divs that use .k-content as a wrapper
   (loaded via TabStrip AJAX) need position:relative so they don't
   cover sibling elements. The TabStrip's own .k-tabstrip > .k-content
   rule already sets position:relative, so this only affects non-tabstrip usage. */
.k-content {
    position: relative !important;
    inset: auto !important;
}

/* #tabstrip is the positioning context for .guardtour-header-actions buttons
   in Schedule/Unscheduled tabs so they appear in the tab-label row. */
#tabstrip {
    position: relative;
}

/* Tab content panels must NOT be positioning contexts — position:static lets
   absolutely-positioned .guardtour-header-actions "see through" them to
   #tabstrip.  Also needs overflow:visible so buttons aren't clipped. */
#tabstrip > .k-content,
#tabstrip > .k-tabstrip-content {
    position: static !important;
    overflow: visible !important;
}

/* Activity grid: buttons now use .guardtour-header-actions (positioned in
   tab-label row via #tabstrip), so no padding-top or position needed. */

/* Form controls inside Kendo widgets.
   In Kendo v2026, .k-input is on wrapper elements (not inner <input>).
   padding:0 prevents Bootstrap 5 .form-control padding from inflating
   Kendo wrappers.  width:100% was a BS3-era hack that overrode Kendo's
   per-widget sizing (e.g. .k-numerictextbox width:5em).  Removed —
   widgets that need full width already have explicit rules below
   (.k-datepicker, .k-datetimepicker, .k-dropdown). */
.form-control.k-input
{
    padding: 0;
}

.form-control.k-dropdown {
    border: 0;
}

.k-window .k-footer span {
    margin-left: .4em;
}

.k-window .k-footer span.float-end{
    margin-right: .4em;
}

/* Kendo v2026 sets --kendo-font-size to 16px (matching BS5 root).  Since the
   Guard Tour UI retains the BS3 14px base, override the variable so Kendo
   widgets (scheduler, grid, tabstrip) inherit the correct size. */
.guardtour {
    --kendo-font-size: 14px;
    --kendo-color-base: #ffffff;
    --kendo-color-base-hover: #e9ecef;
    --kendo-color-base-active: #dee2e6;
}

.k-button {
    border-color: #cccccc;
    background-color: #ffffff;
}

/* Scheduler nav prev/next icon buttons are 2px taller than the Today
   text button because the SVG icon container renders slightly taller
   than a text span at the same line-height.  Pin them to match. */
.k-scheduler-navigation .k-icon-button {
    box-sizing: border-box;
    height: 34px;
}

.k-tooltip {
    border-color: #0070c0;
    background-color: #0070c0;
    color: #ffffff;
}

.k-callout-w {
    border-right-color: #0070c0;
}

.k-callout-n {
    border-bottom-color: #0070c0;
}

.k-callout-e {
    border-left-color: #0070c0;
}

.k-callout-s {
    border-top-color: #0070c0;
}

/* Notification */
.k-notification.k-notification-info {
  background-color: rgba(0, 0, 0, 0);
  color: #555555;
  border-color: #555555;
}
.k-notification.k-notification-success {
  background-color: rgba(0, 0, 0, 0);
  color: #555555;
  border-color: #555555;
}
.k-notification.k-notification-warning {
  background-color: rgba(0, 0, 0, 0);
  color: #555555;
  border-color: #555555;
}
.k-notification.k-notification-error {
  background-color: rgba(0, 0, 0, 0);
  color: #555555;
  border-color: #555555;
}

.k-filter-menu {
    height: auto !important;
}
.k-window .k-footer {
     background-image: none,linear-gradient(to bottom,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 100%);
     background-position: 50% 50%;
     background-repeat: repeat, repeat;
     white-space: nowrap;
     min-height: 16px;
     width: 100%;
     border-top-style: solid;
     border-top-width: 1px;
     padding: .4em 0;
     position: absolute;
     bottom: 0;
 }
.k-window .k-footer span {
    margin-left: .4em;
}

.k-window .k-footer span.right-buttons{
    float: right;
    margin-right: .4em;
}
.k-grid tr td{
    white-space: nowrap;
}
.k-grid{
    font-family: "DejaVu Sans", "Arial", sans-serif;
}
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap,
.k-pdf-export .non-exportable-column-link
{
    display: none;
}
.k-pdf-export .exportable-column-link {
    display: block !important;
}
.k-editor-toolbar .k-tool-text {
    display: none;
}
.k-window-title {
    cursor: move;
}
.k-notification-wrap > .k-icon,
.k-notification-wrap > .k-font-icon {
    color: #fff !important;
}
.k-tabstrip:focus {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

/* Kendo v2026 added inset box-shadow focus indicators on tab items and outer
   box-shadow focus rings on buttons.  These didn't exist in the pre-upgrade
   Kendo version and make tabs/buttons show a gray border/ring on click.
   Remove them within .guardtour to restore the pre-upgrade appearance.
   Specificity matches or exceeds bootstrap-main.css; cascade order wins. */
.guardtour .k-tabstrip-items-wrapper .k-item:focus,
.guardtour .k-tabstrip-items-wrapper .k-item.k-focus,
.guardtour .k-tabstrip-items-wrapper .k-tabstrip-item:focus,
.guardtour .k-tabstrip-items-wrapper .k-tabstrip-item.k-focus {
    box-shadow: none;
}

.guardtour .k-button:focus,
.guardtour .k-button.k-focus,
.guardtour .k-button.k-button-solid:focus,
.guardtour .k-button.k-button-solid.k-focus {
    box-shadow: none;
}

.k-popup .k-list .k-item > .k-group {
    background: #b6b6b6;
    color: #fff;
    border-bottom-left-radius: 3px;
}
.k-popup>.k-group-header, .k-popup>.k-virtual-wrap>.k-group-header {
    background: #b6b6b6;
    color: #fff;
}
.k-popup>.k-group-header, .k-popup>.k-virtual-wrap>.k-group-header {
    padding-right: 22px;
    text-align: right;
}
.k-popup .k-list .k-item, .k-fieldselector .k-list .k-item, .k-list-optionlabel, .k-popup>.k-group-header, .k-popup>.k-virtual-wrap>.k-group-header {
    padding: 1px 5px 1px 5px;
    line-height: 1.8em;
    min-height: 1.8em;
}
.k-pager-refresh.k-link{
    border: 1px solid #ccc !important;
    border-radius: 4px;
    text-decoration: none !important;
    color: #333333 !important;
    font-size: 13px !important;
    padding: 0px 7px !important;
    margin-right: 5px !important;
}
.k-pager-sizes.k-label .k-dropdown {
    width: 70px !important;
}
.k-datepicker{
    width: 100%;
}
.k-datetimepicker{
    width: 100%;
}
.link-disable-grid-header {
    pointer-events: none;
    cursor: default;
}
.k-dropdown:not([role='listbox']){
    width: 100%;
}

div[data-role=columnselector] .k-treeview-leaf.k-selected:not(.k-focused) {
    border: 0!important;
    background-color: transparent!important;
}

div[data-role=columnselector] .kendo-columns-clearable {
    background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
    border: 1px solid #999;
}

.k-filter-menu .k-dropdown{
    width: 100%;
}
.k-grid tbody tr {
    height: 33px;
}

#custom-fields-button.active-filters{
    background-color: #dcdcdc !important;
}
.inactive-officer-magicsuggest{
    color: #ccc;
}
.k-picker-wrap.k-disabled input {
    background-color: #f5f5f5;
}

.k-filter-menu .k-combobox,
.k-filter-menu .k-datepicker,
.k-filter-menu .k-datetimepicker,
.k-filter-menu .k-numerictextbox,
.k-filter-menu .k-textbox,
.k-filter-menu .k-timepicker{
    min-width: 19.3em !important;
    max-width: 19.3em !important;
}

.alertify-notifier {
    z-index: 11000 !important;
}
.k-window-content {
    margin-bottom: 0px !important;
}
.user-window.k-window-content {
    margin-bottom: 50px !important;
}

.k-dropdown-wrap.k-active,
.k-numeric-wrap.k-active,
.k-panelbar > .k-item > .k-focused,
.k-picker-wrap.k-active,
.k-active, .k-active:hover,
.k-active > .k-link {
    background-image: none;
}
.k-radio {
    border-color: #767676;
}

/* Paging dropdown*/
.k-dropdown-wrap > span[role="option"].k-input {
    min-width: 40px !important;
}

.k-calendar .k-today .k-link {
    color: inherit;
    box-shadow: none;
}
.k-selected {
    box-shadow: none;
}