/*
=============================================================
CSS SECTIONS — PLEASE ADD TO EXISTING SECTIONS OR CREATE NEW
=============================================================
  Last optimised : pass 1 — consolidation & deduplication
  Modernised     : pass 2 — design tokens, transitions, focus
                            rings, table headers, vendor prefix
                            cleanup, status modifiers

  THEME VARIABLES (set externally in config, do not edit here):
    --main-accent-colour   Primary brand colour
    --menu-bg-color        Nav panel background
    --menu-text-color      Nav item text
    --menu-text-selected-color
    --menu-icon-color
    --menu-icon-hover-color
    --header-bg-color
    --header-icon-color
    --trip-ontime-colour / --trip-early-colour / --trip-late-colour

  DESIGN TOKENS (defined in :root below — safe to adjust):
    --radius-sm/md/lg      Border radius scale
    --transition-fast/med  Animation durations
    --shadow-card          Subtle elevation
    --border-subtle        Default hairline border
    --accent-tint          Focus ring colour (auto-derived from accent)

=============================================================

  1.  CSS VARIABLES
  2.  BODY & PAGE
  3.  SCROLLBAR UTILITIES
  4.  MAIN NAV PANEL — STANDARD
  5.  MAIN NAV PANEL — MINIFIED
  6.  NAV SEARCH
  7.  PANEL HEADERS
  8.  BADGES
  9.  BUTTONS
 10.  STATUS BOXES
 11.  TASK TILES
 12.  HEADER ICONS
 13.  DASHBOARDS
 14.  FLOATING MENU BUTTON — BOTTOM RIGHT
 15.  HEADINGS & LABELS
 16.  FORM TITLES (List View, Gantt View etc.)
 17.  MAINTENANCE
 18.  MODALS
 19.  LOGIN SCREEN
 20.  CALENDAR
 21.  DATATABLES
 22.  DATEPICKER
 23.  TASK DETAILS
 24.  SELECT2
 25.  TYPEAHEAD
 26.  STOCK SECTION
 27.  APPOINTMENTS
 28.  WALKTHROUGHS
 29.  TRACKING
 30.  DEPOT LOCATIONS
 31.  FOOTER
 32.  LED INDICATORS
 33.  COLOUR UTILITIES
 34.  LAYOUT / SCROLL PANELS
 35.  RESPONSIVE — HIDE UTILITIES
 36.  SITE LIST SORTABLE
 37.  USAGE TABLE CELLS
 38.  ICON WRAPPER
 39.  WHAT3WORDS
 40.  ADDRESS FIELDS
 41.  MISCELLANEOUS

*/

@font-face {
    font-family: 'AltLogic';
    src: url('../webfonts/altlogic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/**********************/
/* 1. CSS VARIABLES   */
/**********************/

:root {
    /* === EXISTING — customer/config set === */
    --text-light: #E6E6E6;
    --default-text-colour: #666;
    --default-menu-spacing: .8rem;

    /* === RADIUS SCALE === */
    --radius-sm:  2px;   /* badges, chips */
    --radius-md:  2px;   /* buttons, inputs */
    --radius-lg: 2px;   /* cards, panels */

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-med:  0.25s ease;

    /* === ELEVATION === */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* === BORDERS === */
    --border-subtle: 0.5px solid rgba(0, 0, 0, 0.10);

    /* === ACCENT TINT (for focus rings — derived from customer accent colour) === */
    --accent-tint: color-mix(in srgb, var(--main-accent-colour) 18%, transparent);
}


/**********************/
/* 2. BODY & PAGE     */
/**********************/

html body {
    overflow: hidden;
}

.body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: .875rem; /* 14px — one step up from .8125rem for readability */
    font-weight: 400;
    line-height: 1.5;  /* was 1.27 — modern standard for dense UIs */
    color: var(--default-text-colour);
    text-align: left;
}

.page-content {
    color: var(--default-text-colour);
}

/* Desktop keeps the left nav on screen, so the top header bar is unused.
   Below 801px the theme moves the nav off-canvas and the header carries the
   only button that can open it - the header must stay visible there. */
.page-header {
    background-color: var(--header-bg-color);
}

@media (min-width: 801px) {
    .page-header {
        display: none;
    }

    .header-function-fixed:not(.nav-function-top) .page-content {
        margin-top: 0 !important;
    }
}

/* The theme hides ribbon action blocks (New Booking, screen actions...) on
   phones - those buttons are the way into most screens, so keep them. */
@media only screen and (max-width: 576px) {
    .subheader-block {
        display: block;
    }
}

pre {
    font-size: 100%;
}


/****************************/
/* 3. SCROLLBAR UTILITIES   */
/****************************/

/* Hide scrollbar — all browsers */
.noscrollbar {
    -ms-overflow-style: none;   /* IE 10+ */
    scrollbar-width: none;      /* Firefox */
}

.noscrollbar::-webkit-scrollbar {
    display: none;              /* Safari / Chrome */
}


/************************************/
/* 4. MAIN NAV PANEL — STANDARD     */
/************************************/

/* Logo */
.page-logo {
    box-shadow: none !important;
    background-color: var(--header-bg-color);
}

.page-logo img {
    width: auto;
    height: 100px;
    margin-left: 0;
    margin-top: 10px;
    background-color: var(--header-bg-color);
}

.nav-function-minify .page-logo {
    display: none;
}

/* Override gradients for left nav panel */
.page-logo,
.page-sidebar,
.nav-footer,
.bg-brand-gradient {
    background-image: linear-gradient(270deg, transparent, transparent);
    background-color: var(--menu-bg-color);
}

/* Restore header background on logo — must come after the group rule above */
.page-logo {
    background-color: var(--header-bg-color);
}

/* Panel backgrounds */
.primary-nav,
.nav-menu li > ul {
    background-color: var(--menu-bg-color);
}

/* Nav item padding */
.nav-menu li a {
    padding: var(--default-menu-spacing) 2rem;
    color: var(--menu-text-color);
}

.nav-menu li > ul li a {
    padding: var(--default-menu-spacing) 2rem var(--default-menu-spacing) 4rem;
    color: var(--menu-text-color);
}

.nav-menu li a > .nav-link-text {
    color: var(--menu-text-color);
}

.nav-menu li.open > a {
    color: var(--menu-text-color);
}

/* Hover states */
.nav-menu li a:hover,
.nav-menu li > ul li a:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, .1) !important;
}

/* Focus */
.nav-menu li a:focus {
    color: var(--menu-text-color) !important;
}

/* Hover sub-item text colour */
.nav-menu li > ul li a:hover {
    color: var(--menu-text-selected-color);
}

/* Selected item */
.nav-menu ul .active > a {
    color: var(--menu-text-selected-color) !important;
    position: relative;
}

.nav-menu li.active > a {
    color: var(--menu-text-selected-color);
    background-color: rgba(255, 255, 255, .04);
    box-shadow: inset 3px 0 0 var(--menu-text-selected-color);
    font-weight: 400;
}

/* Selected item indicator (dot) */
.nav-menu li.active:not(.open) > a:before {
    content: '\f413';
    font-family: nextgen-icons;
    position: absolute;
    top: calc(50% - 5px);
    right: 11px;
    font-size: 7px;
    height: 10px;
    width: auto;
    color: var(--menu-text-selected-color);
    display: flex;
    align-content: center;
    align-items: center;
}

/* Icons */
.nav-menu li a > .ni,
.nav-menu li a > [class*="fa-"] {
    color: var(--menu-icon-color);
}

.nav-menu li a:hover > .ni,
.nav-menu li a:hover > [class*="fa-"],
.nav-menu li.active > a:hover > .ni,
.nav-menu li.active > a:hover > [class*="fa-"] {
    color: var(--menu-icon-hover-color);
}

/* Collapse sign */
.nav-menu b.collapse-sign {
    color: var(--menu-text-selected-color);
}

/* Navigator left dot (currently hidden) */
.mod-nav-link:not(.nav-function-top):not(.nav-function-minify):not(.mod-hide-nav-icons)
ul.nav-menu:not(.nav-menu-compact) > li > ul > li a::after {
    content: "";
    display: none;
    position: absolute;
    width: .4rem;
    height: .4rem;
    background-color: var(--text-light);
    left: 2.4rem;
    top: calc(50% - .3rem);
    border: 0 solid #333;
    border-radius: 50%;
    z-index: 1;
}

/* Navigator left line (currently hidden) */
.mod-nav-link:not(.nav-function-top):not(.nav-function-minify):not(.mod-hide-nav-icons)
ul.nav-menu:not(.nav-menu-compact) > li > ul::before {
    content: "";
    display: none;
    position: absolute;
    z-index: 1;
    left: 2.5625rem;
    top: 44px;
    bottom: 0;
    border-left: 1px solid var(--text-light) !important;
}

/* Sub-menu placeholders (reserved for future use) */
.nav_sub_menu_icon { display: none; }
.nav_sub_menu {}
.nav_sub_menu_item {}


/************************************/
/* 5. MAIN NAV PANEL — MINIFIED     */
/************************************/

.nav-function-minify:not(.nav-function-top) .page-sidebar {
    z-index: 999999;
}

.nav-function-minify:not(.nav-function-top) .page-header [data-class="nav-function-minify"] {
    background: var(--header-bg-color);
    border-color: var(--header-bg-color);
    color: var(--header-bg-color);
}

/* Minified menu graphic */
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul:before {
    content: "\f1c8";
    font-family: nextgen-icons;
    position: absolute;
    font-size: 3.5rem;
    left: -.4125rem;
    color: var(--main-accent-colour);
    z-index: -1;
    transform: rotate(270deg);
    overflow: hidden;
    display: block;
    top: 1rem;
}

/* Minified menu popout */
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul {
    position: absolute;
    width: 13.75rem;
    left: 5.6875rem;
    background-color: var(--main-accent-colour);
    margin-top: -5rem;
    padding-top: 3.75rem;
    padding-bottom: 1rem;
    border-radius: 4px .5rem .5rem .5rem;
    z-index: 1 !important;
}

/* Minified nav link text */
.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text {
    display: none;
    position: absolute;
    text-align: left;
    background: transparent;
    padding-left: 1.375rem;
    color: var(--menu-icon-color);
    top: 0;
    left: 5.6875rem;
    height: 100%;
    width: 13.75rem;
    font-weight: 500;
    margin-top: -1.563rem;
}


/**********************/
/* 6. NAV SEARCH      */
/**********************/

.custom-search-form {
    position: relative;
    margin-left: 30px;
    margin-right: 30px;
}

.custom-search-container {
    margin-top: 10px;
}

.search-icon-input {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px;
}

.search-icon-input i {
    margin-right: 10px;
    font-size: 18px;
    color: var(--menu-icon-color);
}

#searchBox {
    border: none;
    outline: none;
    width: 100%;
    padding: 5px 0;
    font-size: .875rem;
    border-bottom: 1px solid #ccc;
    background-color: var(--menu-bg-color);
    color: var(--menu-text-color);
}

/* Placeholder — all vendor prefixes */
#searchBox::placeholder,
#searchBox::-webkit-input-placeholder,
#searchBox::-moz-placeholder,
#searchBox:-ms-input-placeholder {
    color: var(--menu-text-color);
}

#searchBox::placeholder {
    color: var(--menu-text-color);
}

/* Search results dropdown */
.custom-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    font-size: .875rem;
    border: 0.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 1000;
    max-height: 50vh;
    overflow-y: hidden;
    box-shadow: var(--shadow-card);
}

.custom-search-results div {
    padding: 10px;
    cursor: pointer;
}

.custom-search-results .search-result-item {
    padding: 8px;
}

.custom-search-results div:hover,
.custom-search-results div.search-result-item:hover {
    background-color: #f0f0f0;
    color: var(--main-accent-colour);
}

.custom-search-results div:focus {
    outline: none;
}

.custom-search-results div::selection {
    background: transparent;
}

.custom-search-results div.highlight {
    background-color: #e0e0e0;
    color: #333;
    font-weight: bold;
}

.custom-search-results div.search-result-item.highlight {
    background-color: var(--main-accent-colour) !important;
    color: #fff;
}


/**********************/
/* 7. PANEL HEADERS   */
/**********************/

.panel-hdr {
    background-color: var(--color-background-secondary, #F8F8F8);
    border-bottom: 0.5px solid var(--color-border-tertiary, #e5e5e5);
}

.panel-hdr > h2 {
    color: var(--default-text-colour);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.font-bold-hdr {
    background-color: var(--color-background-secondary, #F8F8F8);
    font-size: 16px;
    font-weight: 500;
    color: var(--default-text-colour);
    border-bottom: 0.5px solid var(--color-border-tertiary, #e5e5e5);
}

.panel .panel-container .panel-content {
    padding: 1rem 1rem 10px;
}

.panel .panel-container .panel-content {
    padding: 1rem 1rem 10px;
}


/**********************/
/* 8. BADGES          */
/**********************/

.badge-primary {
    background-color: var(--main-accent-colour);
}

/* Badge positioning base */
.menu-open-button {
    position: relative;
}

.main-button-badge,
.bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #dc3545;
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    border-radius: 999px;
    padding: 4px 6px;
    min-width: 18px;
    text-align: center;
    display: none;
    z-index: 10;
}

.badge-large {
    top: -8px !important;
    right: -8px !important;
    font-size: 1.10rem !important;
    min-width: 1.5rem !important;
    max-width: 3.375rem !important;
    padding: 0 6px;
}

/* Show/hide badge logic via checkbox state */
#menu_open:not(:checked) ~ .menu-open-button .main-button-badge,
#menu_open:checked ~ .menu-open-button .main-button-badge {
    display: inline-block;
}

#menu_open:checked ~ .menu-open-button .main-button-badge { display: inline-block; }
#menu_open:checked ~ a[data-toggle][title="Notifications"] .bell-badge { display: inline-block; }
#menu_open:not(:checked) ~ a[data-toggle][title="Notifications"] .bell-badge { display: none; }
#menu_open:checked ~ .bell-icon .bell-badge { display: inline-block; }


/**********************/
/* 9. BUTTONS         */
/**********************/

/* Shared base for default/danger/success */
.btn-default,
.btn-danger,
.btn-info,
.btn-warning,
.btn-success {
    height: 32px !important;
    min-height: 20px !important;
    padding-top: 5px;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast) !important;
}

/* Shared hover for default/danger/success */
.btn-default:hover,
.btn-danger:hover,
.btn-success:hover {
    border-radius: var(--radius-md) !important;
    height: 32px;
    min-height: 20px !important;
    border-color: var(--main-accent-colour);
    background-color: var(--main-accent-colour);
    padding-top: 5px;
}

/* Shared normal style: primary / secondary / default / ribbon */
.btn-primary,
.btn-secondary,
.btn-default,
.btn-ribbon {
    color: var(--main-accent-colour);
    border-color: var(--main-accent-colour) !important;
    background-color: var(--main-accent-colour);
    min-width: 100px;
    border-width: 1px !important;
    border-style: solid !important;
    padding: .375rem 1rem !important;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast) !important;
}

.btn-primary,
.btn-ribbon {
    background-color: var(--main-accent-colour);
    color: #fff;
}

.btn-secondary,
.btn-default {
    background-color: var(--main-accent-colour);
    background-image: none;
    color: #fff;
}

.btn-primary {
    height: 32px !important;
    padding-top: 5px;
    background-color: var(--main-accent-colour);
    color: #fff;
}

/* Split-button carets (e.g. the Search dropdown on the task/trip lists)
   stay slim - the shared min-width above must not inflate them */
.dropdown-toggle-split {
    min-width: 30px !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

/* Shared hover: primary / secondary / default / ribbon */
.btn-primary:hover,
.btn-secondary:hover,
.btn-default:hover,
.btn-ribbon:hover {
    border-radius: var(--radius-md) !important;
    min-height: 20px !important;
    background-color: var(--main-accent-colour) !important;
    border-color: var(--main-accent-colour) !important;
    color: #fff !important;
    filter: brightness(90%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px);
    z-index: 2;
}

.btn-ribbon {
    margin-left: 2px;
}

/* Shared active state */
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn-ribbon:not(:disabled):not(.disabled).active,
.btn-ribbon:not(:disabled):not(.disabled):active,
.show > .btn-ribbon.dropdown-toggle {
    color: #fff !important;
    background-color: var(--main-accent-colour);
    border-color: var(--main-accent-colour);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0);
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle,
.btn-default:not(:disabled):not(.disabled).active,
.btn-default:not(:disabled):not(.disabled):active,
.show > .btn-default.dropdown-toggle {
    color: var(--default-text-colour) !important;
    background-color: #F1F1F1;
    border-color: #DBDBDB;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0);
}

/* Focus ring — keyboard navigation only (not triggered by mouse clicks) */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-default:focus-visible,
.btn-ribbon:focus-visible {
    color: #fff !important;
    background-color: var(--main-accent-colour);
    border-color: var(--main-accent-colour);
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}
/* Bootstrap 4 JS adds .focus class programmatically — keep parity */
.btn-primary.focus,
.btn-secondary.focus,
.btn-default.focus,
.btn-ribbon.focus {
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}

/* A clicked button keeps :focus until the next click elsewhere — without
   this the vendor bundle's stock-blue .btn:focus background bleeds through
   and the button "sticks" blue after pressing. Mouse focus keeps the normal
   look; the visible ring stays keyboard-only via :focus-visible above. */
.btn-primary:focus:not(:focus-visible),
.btn-secondary:focus:not(:focus-visible),
.btn-default:focus:not(:focus-visible),
.btn-ribbon:focus:not(:focus-visible) {
    background-color: var(--main-accent-colour) !important;
    border-color: var(--main-accent-colour) !important;
    color: #fff !important;
    outline: none;
}

/* Button group borders */
.btn-group .btn:not([class*=btn-outline-]):not(.btn-icon):not(.btn-light) {
    border: 1px solid var(--main-accent-colour) !important;
}

.btn-group.no-inner-borders .btn:not([class*=btn-outline-]):not(.btn-icon):not(.btn-light) {
    border: 1px solid !important;
}

/* Button group corner radii */
.btn-group > .btn { border-radius: 0 !important; }

.btn-group > .btn:first-of-type,
.btn-group > .btn:first-child {
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

.btn-group > .btn:last-of-type,
.btn-group > .btn:last-child {
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

.btn-group > .dropdown-toggle-split {
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
    width: 30px;
}

/* Width/height utilities */
.btn-min-width  { min-height: 20px !important; min-width: 100px; }
.btn-max-width  { max-width: 100px; }

.btn-min-width_110 { min-height: 30px !important; min-width: 110px; }
.btn-max-width_110 { max-width: 110px; }

.btn-min-width_120 { min-height: 30px !important; min-width: 120px; }
.btn-max-width_120 { max-width: 120px; }

.btn-min-width_130 { min-height: 30px !important; min-width: 130px; }
.btn-max-width_130 { max-width: 130px; }

.btn-min-width_140 { min-height: 30px !important; min-width: 140px; }
.btn-max-width_140 { max-width: 140px; }

.btn-min-width_150 { min-height: 40px !important; min-width: 150px; }
.btn-max-width_150 { max-width: 150px; }

.btn_margin_bottom { min-height: 20px !important; margin-bottom: 3px; }
.btn_margin_left   { margin-left: 3px; }
.btn_margin_right  { margin-right: 3px; }

.btn-small  { min-width: 40px; width: 40px; }

.btn-device {
    border-radius: var(--radius-md) !important;
    min-height: 60px !important;
    max-height: 60px !important;
    min-width: 120px;
    height: 30px;
    padding-top: 5px;
    color: #fff !important;
    background-color: var(--main-accent-colour);
    border-color: var(--main-accent-colour);
    background-image: none !important;
}

/* Ribbon responsive collapse */
@media (max-width: 1200px) {
    .btn-ribbon {
        max-width: 60px !important;
        min-width: 60px !important;
    }
    .btn-ribbon-label { display: none; }
}

/* Mobile nav button */
.header-btn[data-class="mobile-nav-on"] {
    border-color: var(--main-accent-colour);
    background-color: var(--main-accent-colour);
    background-image: linear-gradient(to top, var(--main-accent-colour), var(--main-accent-colour));
    color: #fff;
    width: 3.875rem;
}

/* Bootstrap's a:not([href]) has specificity 0,1,1 which beats .btn-primary at 0,1,0.
   These rules use 0,2,1 to win back the correct button text colour. */
a.btn-primary:not([href]),
a.btn-secondary:not([href]),
a.btn-default:not([href]),
a.btn-danger:not([href]),
a.btn-success:not([href]),
a.btn-warning:not([href]),
a.btn-ribbon:not([href]) {
    color: #fff;
}

/* File input */
input[type="file"] {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    vertical-align: middle;
    box-sizing: border-box;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--main-accent-colour);
    outline: 0;
    box-shadow: none;
    background-color: var(--main-accent-colour);
    color: #fff;
    height: 30px;
    padding: 4px 12px;
    min-width: 120px;
    border-radius: 0 !important;
    cursor: pointer;
}

input[type="file"]:focus,
input[type="file"]:focus-visible,
input[type="file"]:focus::file-selector-button,
input[type="file"]:focus-visible::file-selector-button,
input[type="file"]:focus::-webkit-file-upload-button {
    outline: 0;
    box-shadow: none;
}

/* Pulse animation */
@keyframes pulse-grow-shrink {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

.pulse-button {
    animation: pulse-grow-shrink 0.4s ease-in-out 3;
}

/* Button press hint tooltip */
.button-press-hint {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: var(--main-accent-colour);
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--main-accent-colour);
    z-index: 999;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform-origin: center;
}

.button-press-hint.show {
    animation: button-press-hint-fade-in 0.4s ease forwards;
}

/* Arrow outer (border layer) */
.button-press-hint::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 11px solid transparent;
    border-top-color: var(--main-accent-colour);
    z-index: 0;
}

/* Arrow inner (white fill) */
.button-press-hint::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #fff;
    z-index: 1;
}

@keyframes button-press-hint-fade-in {
    from { opacity: 0; transform: translateX(-50%) scale(0.95); }
    to   { opacity: 1; transform: translateX(-50%) scale(1); }
}


/**********************/
/* 10. STATUS BOXES   */
/**********************/

/* Shared status box base */
.status-box,
.audit-box,
.audit-notes {
    border-radius: .25em;
}

.status-box {
    min-width: 130px;
    max-width: 130px;
    min-height: 25px;
    max-height: 25px;
}

.status-box-bag-management {
    min-width: 130px;
    max-width: 130px;
    min-height: 30px;
    max-height: 30px;
    border-radius: .30em;
}

.audit-box {
    min-width: 80px;
    max-width: 80px;
    min-height: 25px;
    max-height: 25px;
}

.audit-notes {
    min-width: 30px;
    max-width: 30px;
    min-height: 25px;
    max-height: 25px;
}

/* Shared label base */
.status-box-label,
.status-box-label-bag-management,
.audit-box-label,
.audit-notes-label {
    /*color: white !important;*/
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: .25em !important;
}

.audit-box-label {
    display: block !important;
    text-align: center !important;
    font-size: 75% !important;
    font-weight: 400 !important;
}

.audit-notes-label {
    font-weight: 400 !important;
    position: absolute;
    top: 5px;
    left: 10px;
}

.status-box-label,
.status-box-label-bag-management {
    display: block !important;
    text-align: center !important;
    font-size: 75% !important;
    font-weight: 700 !important;
}

.status-box-label      { padding-top: 8px !important; }
.status-box-label-bag-management { padding-top: 10px !important; }

/* === MODERN STATUS MODIFIERS ===
   Add these classes to .status-box in templates for a tinted,
   accessible look. Existing solid-colour approach still works unchanged.
   Usage: <div class="status-box status-box--success">
*/
.status-box--success { background: #EAF3DE; border: 1px solid #C0DD97; border-radius: var(--radius-sm); }
.status-box--warning { background: #FAEEDA; border: 1px solid #FAC775; border-radius: var(--radius-sm); }
.status-box--danger  { background: #FCEBEB; border: 1px solid #F7C1C1; border-radius: var(--radius-sm); }
.status-box--info    { background: #E6F1FB; border: 1px solid #B5D4F4; border-radius: var(--radius-sm); }
.status-box--neutral { background: #F1EFE8; border: 1px solid #D3D1C7; border-radius: var(--radius-sm); }

.status-box--success .status-box-label { color: #3B6D11 !important; }
.status-box--warning .status-box-label { color: #854F0B !important; }
.status-box--danger  .status-box-label { color: #A32D2D !important; }
.status-box--info    .status-box-label { color: #185FA5 !important; }
.status-box--neutral .status-box-label { color: #5F5E5A !important; }

/* Switch display boxes (shared size) */
.switch-display-on,
.switch-display-off,
.switch-display-na {
    min-width: 120px;
    max-width: 120px;
    min-height: 25px;
    max-height: 25px;
    padding: 3px 8px 0;
    text-align: center;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.switch-display-on {
    background-color: #d6f0d6;
    border: 1px solid #8fce8f;
    color: #1a6b1a;
}

.switch-display-off {
    background-color: #fcd6d6;
    border: 1px solid #f08f8f;
    color: #8b1a1a;
}

.switch-display-na {
    background-color: #e8e8e8;
    border: 1px solid #b0b0b0;
    color: #4a4a4a;
}


/* Comment / message containers */
.comment-container,
.message-container {
    min-width: 200px;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

.comment-container { background-color: #F3EAADFF; }
.message-container { background-color: #E16552; }

.comment-container p,
.message-container p {
    color: black;
    margin: 0;
    padding: 5px;
}

/* Task tiles date mismatch */
.task-tile.date_mismatch {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

.task-tile.date_mismatch::after {
    content: "\f023";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    color: #555;
    font-size: 28px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 8px 10px;
    z-index: 2;
    pointer-events: none;
}

/* Task status boxes — shared base */
.task-status-box,
.task-status-box_secondary,
.task-status-box_hassecondary,
.task-status-box-wide_secondary,
.task-status-box-wide_hassecondary {
    display: inline-block;
    margin: 5px 15px 10px 0;
    overflow: hidden;
    z-index: 1;
    border-radius: .25em;
}

.task-status-box,
.task-status-box_secondary,
.task-status-box_hassecondary {
    min-width: 200px;
    max-width: 200px;
    min-height: 60px;
    max-height: 60px;
}

.task-status-box-wide_secondary,
.task-status-box-wide_hassecondary {
    min-width: 200px;
    max-width: 400px;
    min-height: 60px;
    max-height: 60px;
}

/* Left border variants */
.task-status-box_secondary,
.task-status-box-wide_secondary,
.task-status-box-small_secondary,
.task-status-box-small-wide_secondary {
    border-left: 8px solid red;
}

.task-status-box_hassecondary,
.task-status-box-wide_hassecondary,
.task-status-box-small_hassecondary,
.task-status-box-small-wide_hassecondary {
    border-left: 8px solid green;
}

/* Small task status boxes */
.task-status-box-small,
.task-status-box-small_secondary,
.task-status-box-small_hassecondary {
    min-width: 100px;
    max-width: 100px;
    min-height: 50px;
    max-height: 50px;
    margin: 0 5px 5px 0;
    overflow: hidden;
    z-index: 1;
    border-radius: .25em;
}

.task-status-box-small_secondary,
.task-status-box-small_hassecondary {
    display: inline-block;
}

.task-status-box-small-wide,
.task-status-box-small-wide_secondary,
.task-status-box-small-wide_hassecondary {
    min-width: 180px;
    max-width: 180px;
    min-height: 75px;
    max-height: 70px;
    display: inline-block;
    margin: 0 5px 5px 0;
    overflow: hidden;
    z-index: 1;
    border-radius: .25em;
}

.highlight-box {
    padding-right: 5px;
    overflow: hidden;
    z-index: 1;
    border-radius: .25em;
}

/* Task status box line */
.task-status-box-line { position: relative; color: white !important; cursor: default; }

.task-status-box-line-left {
    position: absolute;
    width: 100%;
    text-align: left;
    padding-left: 2px;
    z-index: 99;
    color: white;
    white-space: nowrap;
}

.task-status-box-line-right {
    position: absolute;
    width: 100%;
    text-align: right;
    padding-right: 2px;
    z-index: 100;
    color: pink;
    white-space: nowrap;
}

/* Task status box labels */
.task-status-box-label {
    color: white !important;
    display: block !important;
    text-align: left !important;
    font-size: 75% !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden;
    border-radius: .25em !important;
    padding: .2em .6em .3em !important;
    padding-top: 5px !important;
    cursor: pointer;
}

.task-status-box-label-display {
    color: white !important;
    display: block !important;
    text-align: left !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden;
    border-radius: .25em !important;
}

.task-status-box-label-display-timeslot {
    color: navy !important;
    margin-top: 3px;
}

.task-status-box-label-display-line01 {
    margin-bottom: 5px;
}

/* Trip status box */
.trip-status-box {
    min-width: 200px;
    max-width: 200px;
    min-height: 85px;
    display: inline-block;
    margin: 5px 15px 10px 0;
    overflow: hidden;
    border-radius: 2px;
    border: 0 solid var(--main-accent-colour);
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    z-index: 1;
    cursor: pointer;
}

.trip-status-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.trip-summary-text { color: lightgrey; }

/* Trip allocation screen tiles: uniform full-row tiles (unallocated panel)
   and compact stacked tiles (engineer panels), replacing the old squares */
.trip-tile {
    display: block;
    width: 100%;
    margin: 0 0 8px 0;
    border-radius: .35em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.trip-tile:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.trip-tile.ui-draggable-dragging {
    opacity: 0.85;
    z-index: 1000;
}

.trip-tile-body {
    padding: 6px 10px;
}

.trip-tile .trip-tile-line1 {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
}

.trip-tile-id {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

.trip-tile-desc {
    margin-left: 0.6rem;
    font-size: 0.75rem;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-tile-status {
    margin-left: auto;
    padding-left: 0.6rem;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trip-tile-wide .trip-tile-line2 {
    display: flex;
    margin-top: 2px;
    font-size: 0.72rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
}

.trip-tile-line2-right {
    margin-left: auto;
    padding-left: 0.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-tile-compact .trip-tile-line {
    font-size: 0.7rem;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-tile-compact .trip-tile-id {
    font-size: 0.75rem;
}

/* Date separators between the unallocated trip tiles */
.trip-tile-date-heading {
    display: flex;
    align-items: center;
    margin: 12px 0 8px 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--main-accent-colour, #7a2f8f);
}

.trip-tile-date-heading:first-child {
    margin-top: 0;
}

.trip-tile-date-heading::after {
    content: '';
    flex: 1;
    margin-left: 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.trip-status-box-label-display {
    color: #fff;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.4;
    display: block;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.trip-status-display {
    display: inline-block;
    font-size: 0.75rem;
    padding: 4px 8px;
    background-color: #BD737D !important;
    color: white;
    border-radius: var(--radius-sm);
    font-weight: bold;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    right: -20px;
    z-index: 2;
    transform-origin: right center;
}

/* Trip timing colours */
.trip_ontime    { color: var(--trip-ontime-colour); }
.trip_early     { color: var(--trip-early-colour); }
.trip_late      { color: var(--trip-late-colour); }
.trip_notstarted { color: gray; }


/**********************/
/* 11. TASK TILES     */
/**********************/

.task-tile {
    width: 180px;
    height: 80px;
    position: relative;
    overflow: hidden;
    font-size: smaller;
    margin-right: 4px;
    margin-bottom: 4px;
}

.task-tile-left-item,
.task-tile-right-item {
    position: absolute;
    width: 50%;
    height: 15.75px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: visible;
}

.task-tile-left-item  { left: 4px;  text-align: left; }
.task-tile-right-item { right: 4px; text-align: right; }

/* Left items vertical positions */
.task-tile-left-item:nth-child(1) { top: 0px; }
.task-tile-left-item:nth-child(2) { top: 14px; }
.task-tile-left-item:nth-child(3) { top: 26px; }
.task-tile-left-item:nth-child(4) { top: 38px; }
.task-tile-left-item:nth-child(5) { top: 50px; }
.task-tile-left-item:nth-child(6) { top: 62px; }

/* Right items vertical positions */
.task-tile-right-item:nth-child(7)  { top: 0px; }
.task-tile-right-item:nth-child(8)  { top: 14px; }
.task-tile-right-item:nth-child(9)  { top: 26px; }
.task-tile-right-item:nth-child(10) { top: 38px; }
.task-tile-right-item:nth-child(11) { top: 50px; }
.task-tile-right-item:nth-child(12) { top: 62px; }

.task-tile-status-box {
    min-height: 15px;
    max-height: 15px;
    border-radius: .25em;
}

.task-tile-status-box-label {
    color: white !important;
    display: block !important;
    text-align: center;
    font-size: 75% !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    padding-top: 4px !important;
    border-radius: .25em !important;
}

.task-tile-status-label {
    display: block !important;
    text-align: right !important;
    line-height: 1 !important;
    font-size: smaller;
    white-space: nowrap !important;
    padding-top: 4px !important;
}


/**********************/
/* 12. HEADER ICONS   */
/**********************/

.header-icon {
    color: pink;
    height: 4.125rem;
    display: block;
    line-height: 4.125rem;
    text-decoration: none;
    position: relative;
}

.header-icon:not(.btn) {
    min-width: 3.125rem;
    text-align: center;
    overflow: visible;
}

.header-icon:not(.btn) > .ni:first-child,
.header-icon:not(.btn) > [class*=fa-]:first-child {
    color: var(--header-icon-color);
    vertical-align: middle;
    font-size: 21px;
}

.header-icon:not(.btn):hover > .ni,
.header-icon:not(.btn):hover > [class*=fa-]:only-child,
.header-icon:not(.btn)[data-toggle=dropdown][aria-expanded=true],
.header-icon:hover {
    color: var(--header-icon-color);
    filter: brightness(70%);
}

.header-icon:hover { cursor: default; }

.header-icon:not(.btn)[data-toggle=dropdown][aria-expanded=true] {
    position: relative;
    z-index: 1001;
    font-weight: 500;
}

.header-icon:not(.btn)[data-toggle=dropdown][aria-expanded=true] > .ni:first-child,
.header-icon:not(.btn)[data-toggle=dropdown][aria-expanded=true] > [class*=fa-]:first-child {
    color: var(--header-icon-color) !important;
    filter: brightness(70%);
    background: 0 0;
}

/* Dropdown indicator circle */
.header-icon:not(.btn)[data-toggle=dropdown][data-toggle=dropdown]:after {
    content: " ";
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    background: #dae1e8;
    border-radius: 50%;
    top: 1.3125rem;
    z-index: -1;
    left: .9375rem;
    opacity: 0;
    transition: all .1s ease-in;
}

.header-icon:not(.btn)[data-toggle=dropdown][aria-expanded=true]:after {
    content: " ";
    width: 2.5rem;
    height: 2.5rem;
    top: .8125rem;
    z-index: -1;
    left: .3125rem;
    opacity: 1;
}

.header-icon:not(.btn)[data-toggle=dropdown] + .dropdown-menu {
    position: absolute;
    border: 0 solid #ccc;
    right: 2rem;
    top: 4.0625rem !important;
    left: auto !important;
    padding: 0;
    margin: 0;
}

.header-icon:not(.btn) .profile-image {
    width: 2rem;
    height: auto;
}

.tracking-header-icon {
    height: 4.125rem;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 4.125rem;
    text-decoration: none;
    position: relative;
    text-align: center;
    overflow: visible;
    font-size: 28px;
    font-weight: 300;
    color: var(--header-icon-color);
}


/**********************/
/* 13. DASHBOARDS     */
/**********************/

.customer-logo {
    float: right;
    margin-top: -20px;
}

.dashboard-datepicker {
    color: #545454;
    font-size: large;
    outline: none;
    margin: auto;
    display: block;
    text-align: center;
    border-color: transparent;
    background-color: transparent;
    width: 220px;
}

.dashboard-panel-content {
    padding: 0 !important;
}

.dashboard-pane {
    padding-top: 5px !important;
}

.dashboard-header { font-size: .875rem !important; }
.dashboard-icon   { font-size: 1.2rem !important; }
.dashboard-engineer { min-width: 50px; }
.dashboard-gantt    { min-width: 150px; }
.dashboard-engineer-name {}
.dashboard-job-count {}

.dashboard-search {
    border: none;
    border-bottom: 1px solid;
    border-bottom-width: 1px;
    width: 90%;
}

.widget-icon { font-size: 18px; }


/****************************************************/
/* 14. FLOATING MENU BUTTON — BOTTOM RIGHT          */
/****************************************************/

/* Defaults are OK — uncomment below if HELP/CONFLUENCE button is needed:
.shortcut-menu {
    position: fixed;
    right: 1.5rem;
    bottom: 7.3125rem;
    z-index: 931;
}
*/

label.menu-open-button,
.menu-item {
    background: var(--main-accent-colour);
}

.menu-item:hover,
label.menu-open-button:hover {
    background: var(--main-accent-colour);
    filter: brightness(90%);
}


/****************************/
/* 15. HEADINGS & LABELS    */
/****************************/

h3, h4 {
    color: var(--main-accent-colour);
}

.h3w, .h4w { color: #fff; }

.label,
.col-form-label,
.form-label,
.asset-col-form-label {
    font-weight: 500;
    color: var(--main-accent-colour);
}

.asset-col-form-label {
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.47;
}

.form-label-right {
    text-align: right;
    display: block;
}

.form-group-small {
    font-size: small;
    line-height: 10px;
    margin-bottom: 10px !important;
}


/****************************************************/
/* 16. FORM TITLES (List View, Gantt View etc.)     */
/****************************************************/

.subheader-title {
    color: var(--default-text-colour);
    line-height: 1.3;
    font-weight: 400;
    min-width: 150px;
    text-shadow: none;
}

.subheader-title > .fa {
    color: var(--default-text-colour);
    line-height: 1.3;
    font-weight: 400;
    text-shadow: none;
}

.attachment-title {
    color: var(--default-text-colour);
    line-height: 1.3;
    font-weight: 400;
    text-shadow: none;
}


/**********************/
/* 17. MAINTENANCE    */
/**********************/

.maintenance-title {
    margin-bottom: 10px !important;
}

.subheader_manitenance {
    margin-bottom: calc(1.2rem);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.note-error { color: red !important; }

.ttt_db_mapping_div {
    border: 0 !important;
    padding: 10px !important;
}


/**********************/
/* 18. MODALS         */
/**********************/

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
}

/* Shared full-height maintenance modals */
.modal-maintenance,
.modal-maintenance-medium,
.modal-maintenance-full-height {
    z-index: 999;
    height: calc(100vh - 3.5rem);
}

.modal-maintenance-medium {
    max-width: 600px;
}

.modal-maintenance-wide {
    width: 80vw;
    max-width: 80vw;
    margin: 1.75rem auto;
}

.modal-location,
.modal-generic {
    z-index: 999;
}

.modal-full-screen {
    max-width: 100%;
    margin-left: 15px;
}

.modal-secondary {
    max-width: 800px;
    margin-top: 50px;
}

.modal-lg {
    max-width: 80%;
}

.modal-upload {
    width: 800px;
    max-width: none;
    margin: 20px auto;
}

.modal-case-lg,
.modal-case-xl {
    max-width: 80%;
}

/* Shared iframe-height modals */
.modal-w3w .modal-dialog,
.modal-ts .modal-dialog,
.modal-shipping-label .modal-dialog {
    max-width: 60%;
    margin-top: 100px;
}

.modal-w3w .modal-body iframe,
.modal-ts .modal-body iframe,
.modal-shipping-label .modal-body iframe {
    height: 500px;
}

/* Phones: the percentage-capped dialogs above waste most of a narrow screen -
   let them take the full width (Bootstrap's .5rem dialog margin remains). */
@media (max-width: 576px) {
    .modal-lg,
    .modal-case-lg,
    .modal-case-xl,
    .modal-maintenance-wide,
    .modal-w3w .modal-dialog,
    .modal-ts .modal-dialog,
    .modal-shipping-label .modal-dialog {
        width: auto;
        max-width: none;
    }

    .modal-w3w .modal-dialog,
    .modal-ts .modal-dialog,
    .modal-shipping-label .modal-dialog {
        margin-top: .5rem;
    }
}

/* Viewport-height scroll containers */
.modal-25-vh  { max-height: 25vh;  overflow-y: scroll; }
.modal-50-vh  { max-height: 50vh;  overflow-y: scroll; }
.modal-75-vh  { max-height: 75vh;  overflow-y: scroll; }
.modal-100-vh { max-height: 100vh; overflow-y: scroll; }
.modal-25-vw  { max-height: 25vw;  overflow-y: scroll; }
.modal-50-vw  { max-height: 50vw;  overflow-y: scroll; }
.modal-75-vw  { max-height: 75vw;  overflow-y: scroll; }
.modal-100-vw { max-height: 100vw; overflow-y: scroll; }

.generic-dialog {
    max-width: 500px;
    height: 80vh;
    margin-top: 10vh;
}

#mfa-modal {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#genericCaseModal {
    position: fixed;
    top: 30px;
    left: 0;
    z-index: 4000;
    display: none;
    width: 100%;
    height: 80%;
    overflow: hidden;
    outline: 0;
}

#expired-modal-content,
#mfa-modal-content {
    height: 450px;
}

.mfa-bottom-buttons {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.modal-header {
    padding: 1rem 1.25rem 0;
}

.modal-page-footer {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    margin: 0 1px;
    background-color: white;
}

.modal-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.location-map-marker {
    color: orange;
    font-size: 18px;
    float: right;
    margin-top: 3px;
}

.case-management-window {
    border-color: var(--main-accent-colour);
    border-width: 4px;
}

#toast-container {
    top: 10px;
    right: 10px;
}

.bootbox.modal:not(.changeable) {
    z-index: 9999 !important;
}

/* Cell tooltip */
.CellWithComment { position: relative; }

.CellComment {
    visibility: hidden;
    min-width: 110px;
    position: absolute;
    z-index: 9999;
    text-align: left;
    opacity: 1;
    transition: opacity 1s;
    border-radius: 2px;
    margin: 5px 0 0 8px;
    background-color: #fff;
    padding: 3px;
    top: 0;
    left: 0;
}

.CellWithComment:hover span.CellComment {
    visibility: visible;
    opacity: 1;
}


/**********************/
/* 19. LOGIN SCREEN   */
/**********************/

.login-footer-company {
    position: absolute;
    bottom: 0;
    height: 2.8125rem;
    align-items: center;
    background: transparent;
    color: #4d4d4d;
    font-size: .8125rem;
    padding: 0 2rem;
}

.login-footer-policy {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2.8125rem;
    background: transparent;
    color: #4d4d4d;
    font-size: .8125rem;
    padding: 0 2rem;
}


/**********************/
/* 20. CALENDAR       */
/**********************/

.fc-today-button {
    min-width: 100px;
    min-height: 20px;
    border-radius: var(--radius-sm);
    border-color: var(--main-accent-colour);
}

.fc-today-button:hover {
    background: var(--main-accent-colour);
    color: #fff;
}

[class^="fc-"].active.btn-default {
    background: var(--main-accent-colour);
    height: 30px;
    margin-top: 0;
}

/* Calendar view button radii */
.fc-twoMonth-button      { border-radius: 4px 0 0 4px; }
.fc-dayGridMonth-button,
.fc-timeGridWeek-button   { border-radius: 0; }
.fc-timeGridDay-button    { border-radius: 0 4px 4px 0; }

/* Calendar view hover states */
.fc-twoMonth-button:hover     { border-radius: 4px 0 0 4px !important; background: var(--main-accent-colour); color: #fff; }
.fc-dayGridMonth-button:hover,
.fc-timeGridWeek-button:hover { border-radius: 0 !important; background: var(--main-accent-colour); color: #fff; }
.fc-timeGridDay-button:hover  { border-radius: 0 4px 4px 0 !important; background: var(--main-accent-colour); color: #fff; }
.fc-prev-button:hover         { border-radius: 4px 0 0 4px !important; background: var(--main-accent-colour); color: #fff; }
.fc-next-button:hover         { border-radius: 0 4px 4px 0 !important; background: var(--main-accent-colour); color: #fff; }

/* Active button states */
.fc-twoMonth-button.active.btn-default     { background: var(--main-accent-colour); border-radius: 4px 0 0 4px; }
.fc-timeGridDay-button.active.btn-default  { background: var(--main-accent-colour); border-radius: 0 4px 4px 0; }

.cal-icon          { color: purple; }
.cal-title,
.cal-data          { color: yellow; }
.cal-data-status   { color: orange; }
.cal-count         { margin-top: 3px; color: white; font-size: 1.1em !important; }

.allocation-icon {
    color: white;
    margin-top: 5px;
    margin-right: 5px;
}

.cal-progress-container {
    background-color: grey;
    margin-bottom: 2px;
    border-radius: 2px;
    padding: 2px;
    width: 95%;
}

.cal-progres-bar-text {
    width: 85%;
    margin-left: 5px;
    position: absolute;
    z-index: 999;
}

.cal-progress {
    max-height: 20px;
    min-height: 20px;
    margin: 0 10px 4px;
    border-radius: 2px;
}

.drill-down {}

.drill-down-icon {
    color: var(--default-text-colour);
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;
}


/**********************/
/* 21. DATATABLES     */
/**********************/

.dataTables_empty {
    color: grey !important;
    font-size: 1rem !important;
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
}

.dataTable_actions { min-width: 300px; }
.dataTable_actions input { display: none; }

.datatable_simple_input {
    width: 7em;
    border: 0;
    border-bottom: 1px solid #000;
}

.datatable_simple_input:disabled {
    border-bottom: none;
    background-color: #f9f9f9;
    color: #888;
}

/* Quantity stepper (purchase order modal) */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 0.5px solid #d0d0d0;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: #fff;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.qty-stepper:focus-within {
    border-color: var(--main-accent-colour);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.qty-stepper .qty-btn {
    width: 2em;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--default-text-colour);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.qty-stepper .qty-btn:hover:not(:disabled) {
    background-color: var(--accent-tint);
    color: var(--main-accent-colour);
}

.qty-stepper .qty-btn:disabled {
    color: #ccc;
    cursor: default;
}

.qty-stepper input.datatable_simple_input {
    width: 3.5em;
    border: 0;
    padding: 0.375rem 0;
    line-height: 1.5;
    text-align: center;
    background-color: transparent;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-stepper input:focus {
    outline: none;
}

/* Lines with a quantity on the order stand out */
.qty-stepper.qty-nonzero input {
    color: var(--main-accent-colour);
    font-weight: 600;
}

/* Read-only orders (sent/confirmed) */
.qty-stepper.qty-locked {
    background-color: #f9f9f9;
    border-color: rgba(0, 0, 0, 0.08);
}

.qty-stepper.qty-locked .qty-btn {
    visibility: hidden;
}

.qty-stepper.qty-locked input:disabled {
    background-color: transparent;
    color: #888;
}

.qty-stepper.qty-locked.qty-nonzero input:disabled {
    color: var(--default-text-colour);
    font-weight: 600;
}

/* Column width helpers */
.max-col-width-100 { max-width: 100px; word-wrap: break-word; white-space: normal; }
.max-col-width-150 { max-width: 100px; word-wrap: break-word; white-space: normal; }
.max-col-width-200 { max-width: 200px; word-wrap: break-word; white-space: normal; }
.max-col-width-250 { max-width: 250px; word-wrap: break-word; white-space: normal; }
/* .max-col-width-300 — intentionally left empty */

/* Maintenance table */
#dt_maintenance_filter  { display: none; }
#dt_maintenance_wrapper { margin-top: -10px; }

/* Table styling */
.table thead th {
    background-color: var(--color-background-secondary, #f5f5f5);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--default-text-colour);
    border-bottom: 0.5px solid #e0e0e0;
}

.table-hover tbody tr:hover {
    background-color: color-mix(in srgb, var(--main-accent-colour) 5%, transparent);
    border-width: 0;
    box-shadow: none !important;
}

.job-allocation-task-status-box { float: left; }
.engineers { margin-bottom: 20px; }

/* DataTable group rows */
#dt_basic tr.dtrg-group.dtrg-start.dtrg-level-0 td {
    color: var(--main-accent-colour);
    font-weight: 500;
    font-size: small;
}


/**********************/
/* 22. DATEPICKER     */
/**********************/

.datepicker { z-index: 1006 !important; }

/* Increased z-index variant where required */
.datepicker3040 { z-index: 3040 !important; }


/**********************/
/* 23. TASK DETAILS   */
/**********************/

.task-data-row { line-height: 15px; }

.task-data-heading {
    font-size: 1.0625rem;
    color: var(--main-accent-colour);
}

.task-data-label,
.task-data-label-default {
    font-weight: 500;
    color: var(--main-accent-colour);
}

.task-data-label { text-align: right; }

.task-data-value {
    text-align: left;
    color: var(--default-text-colour);
}

.task-data-hr {
    border: none;
    margin-top: 0;
    border-bottom: 1px solid var(--main-accent-colour);
}

.task-tab-item {
    margin-bottom: 5px;
    margin-right: 2px;
    min-width: 100px;
    background-color: #EEEEEE;
    border-color: #EEEEEE;
    color: #84888B;
    text-align: center;
}

.task-tabs {}

.task-tabs > li.active > a,
.task-tabs > li.active > a:focus,
.task-tabs > li.active > a:hover {
    color: #fff;
    background-color: var(--main-accent-colour);
}

.task-tabs > li > a:focus,
.nav > li > a:hover {
    text-decoration: none;
    color: #84888B;
    background-color: var(--main-accent-colour);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--main-accent-colour);
}

.asset_transfer_row {
    background-color: rgba(9, 7, 7, 0.03);
    border: 1px solid rgba(9, 7, 7, 0.1);
    border-radius: var(--radius-sm);
    padding: 12px 5px;
    margin: 0 5px 12px 5px;
}


/**********************/
/* 24. SELECT2        */
/**********************/

/* Highlighted option */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--main-accent-colour) !important;
}

/* Hide clear button in multiple selects */
.select2-container--default .select2-selection--multiple .select2-selection__clear {
    display: none !important;
}

/* Multiple selection tags */
.select2-selection__choice {
    display: inline-flex;
    align-items: center;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0 0.5rem;
    margin: 0.25rem 0.25rem 0 0;
    color: #495057;
}

.select2-selection__choice__remove {
    margin-left: 0.5rem;
    color: #dc3545;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: transparent;
    font-size: 1rem;
}

/* Prevent left shift on multi-select search */
.select2-search.select2-search--inline {
    position: absolute !important;
}

/* Multi-select positioning context */
.select2-container .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    position: relative !important;
}

/* Visually hide inline search field while keeping it focusable */
.select2-container .select2-selection--multiple .select2-search__field,
.select2-container--default .select2-selection--multiple .select2-search__field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: transparent !important;
    color: transparent !important;
    caret-color: transparent !important;
    resize: none !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

/* Single select — layout fix for clear + arrow */
.select2-container--default .select2-selection--single {
    position: relative;
    padding-right: 4em !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    font-weight: 300 !important;
    font-size: 1.5rem !important;
    right: 0.5em;
    top: 45%;
    transform: translateY(-50%);
    color: #dc3545;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-selection__arrow {
    position: absolute !important;
    right: 0.5em !important;
    top: 50% !important;
    transform: translateY(-50%);
    z-index: 1;
}

.select2-container.ttt_db_mapping .select2-selection--single .select2-selection__rendered {
    padding-right: 25px !important;
}

.select2-dropdown { z-index: 99999 !important; }

/* Multi-select display element */
.displaySelectMulti {
    background-color: #EBEEF5 !important;
    padding-top: 5px !important;
    font-size: .8125rem !important;
    color: #3d4e7c !important;
    border: 1px solid #7b8dbd !important;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial !important;
    letter-spacing: .1px !important;
    max-height: 30px !important;
    height: 30px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    margin-left: 2px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Validation errors */
.is-invalid {
    border: 1px solid rgb(255, 67, 65) !important;
}

.is-invalid-stock {
    border: 2px solid red !important;
    background-color: red;
    border-radius: 5px;
}


/**********************/
/* 25. TYPEAHEAD      */
/**********************/

.tt-query,
.tt-input {
    width: 396px;
    height: 30px;
    padding: 0;
    font-size: 12px;
    line-height: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.find_address_modal .tt-input.form-control {
    width: 100% !important;
    padding: 6px 12px;
}

.tt-hint { display: none; }

.twitter-typeahead { width: 100%; }

.tt-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 24px;
}

.tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;
}

.tt-suggestion p { margin: 0; }

/* Bloodhound typeahead dropdown */
div.tt-menu.tt-open {
    background-color: white;
    max-height: 400px;
    overflow-y: auto;
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    z-index: 1000;
    margin-top: 0;
}


/**********************/
/* 26. STOCK SECTION  */
/**********************/

.link-td { position: relative; }

.arrow-right-drill {
    position: absolute;
    bottom: 1px;
    right: -1px;
    float: right;
    width: 0;
    height: 0;
    cursor: pointer;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #80808063;
    transform: rotate(135deg);
}


/**********************/
/* 27. APPOINTMENTS   */
/**********************/

.appointment-input-wrapper { position: relative; }

.appointment-input-wrapper .form-control {
    padding-right: 30px;
}

.appointment-default-value {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    pointer-events: none;
}

.appointment-default-value-red { color: #e28ab3; }


/**********************/
/* 28. WALKTHROUGHS   */
/**********************/

.info_highlight { opacity: 0.4 !important; }


/**********************/
/* 29. TRACKING       */
/**********************/

.tracking-container-main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

.tracking-header-main { display: none; height: 0; }

.tracking-header-bags {
    height: 70px;
    margin-right: 5px;
}

.tracking-center-panel {
    margin-top: 5px;
    margin-right: 5px;
    flex: 1;
}

.tracking-footer-panel {
    margin-top: 5px;
    height: 72px;
}

.tracking-dashboard-container {
    margin: 0 10px 0 5px;
    min-height: 60px;
}

.flutter_extra_button {
    top: 250px;
    right: 10px;
    bottom: auto;
}

/* Asset groups */
.asset_group {
    font-weight: lighter;
    border-radius: .25em;
    border: 1px solid lightgrey;
    background-color: lightgrey;
    color: #000;
}

.asset_group_selected {
    background-color: var(--main-accent-colour);
    color: #fff;
}

.asset_group_summary {
    min-width: 167px;
    max-width: 167px;
    width: 167px;
    min-height: 30px;
    max-height: 30px;
    height: 30px;
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 5px 0 0 5px;
    overflow: hidden;
    z-index: 1;
    background-color: lightgrey;
    font-weight: lighter;
    font-size: smaller;
    position: relative;
    color: var(--main-accent-colour);
    border-radius: .25em;
    text-decoration: none;
}

.asset_group_summary .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 10px;
    height: 32px;
    width: 32px;
    border-radius: .25em;
    background: var(--main-accent-colour);
    color: #fff;
    font-weight: bold;
    font-size: smaller;
}

.asset_group_item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 10px 14px;
    margin: 6px;
    min-width: 110px;
    min-height: 40px;
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.asset_group_item:hover {
    background-color: #e6f0ff;
    transform: scale(1.03);
    cursor: pointer;
}

/* Device dashboard */
.device-dashboard-bag {
    max-width: 180px;
    min-width: 180px;
    max-height: 80px;
    min-height: 80px;
    margin-right: 5px;
    overflow: hidden;
}

.device-dashboard-stat {
    min-width: 100px;
    max-height: 50px;
    min-height: 50px;
    margin: 0 0 -5px 5px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    font-family: 'Segoe UI', sans-serif;
    color: #333;
    transition: transform 0.1s ease, background-color 0.2s ease;
}

.device-dashboard-stat-header,
.device-dashboard-stat-item {
    overflow: hidden;
    position: relative;
    color: white;
}

.device-dashboard-stat-header { height: 20px; }
.device-dashboard-stat-item   { height: 30px; }

.device-dashboard-stat-item-text {
    color: white;
    margin-left: 3px;
    font-weight: 400;
}

.device-dashboard-key {
    max-width: 25px;
    min-width: 25px;
    max-height: 60px;
    min-height: 60px;
    margin: 0 0 -5px 5px;
}

.device-panel {
    width: calc(100vw - 16.875rem - 150px);
}

/* Asset alerts */
.asset-alert   { color: red !important; }
.asset-warning { color: orange !important; }

/* Fade image overlay */
.fade-img { position: relative; }

.fade-img:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    height: 40%;
}

#customPrompt {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    display: none;
    transition: all 0.3s;
}

.adjust-for-keyboard { top: 10% !important; }


/**********************/
/* 30. DEPOT LOCATIONS */
/**********************/

.depot-location {
    min-height: 20px !important;
    min-width: 125px;
    color: #fff !important;
    background-image: none !important;
    height: 30px;
    margin-top: 3px;
    padding: 2px 0 4px;
}

/* Shared hover for all depot location types */
.depot-location-zone:hover,
.depot-location-aisle:hover,
.depot-location-bay:hover,
.depot-location-shelf:hover {
    min-height: 20px !important;
    box-shadow: none;
    border-color: var(--main-accent-colour);
    border-width: 1px;
    filter: brightness(70%);
    z-index: 2;
}

.depot-location-zone  { background-color: red;    border-color: red; }
.depot-location-aisle { background-color: green;  border-color: green; }
.depot-location-bay   { background-color: orange; border-color: orange; }
.depot-location-shelf { background-color: purple; border-color: purple; }

.depot-location-zone:hover  { background-color: red; }
.depot-location-aisle:hover { background-color: green; }
.depot-location-bay:hover   { background-color: orange; }
.depot-location-shelf:hover { background-color: purple; }


/**********************/
/* 31. FOOTER         */
/**********************/

.page-footer {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-left-content,
.footer-right-content {
    display: flex;
    align-items: center;
}

.footer-left-content { flex-grow: 0; }
.footer-right-content { margin-left: auto; }

.footer-list-table {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list-table li {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.footer-item  { margin-left: 10px; }
.footer-link  { text-decoration: none; color: inherit; }
/* Session countdown ("SESSION EXPIRES : 3h 56m") - informational, so keep it
   quiet: light grey, regular weight (fw-700 removed from the span - it is
   !important in the bundle and cannot be overridden here). */
.footer-lock-icon,
.session-timeout { color: #9a9a9a; font-weight: 400; }


/***************************/
/* 32. TICKER TAPE         */
/***************************/

#ticker-wrap {
    overflow: hidden;
    height: 28px;
    width: 100%;
    display: flex;
    align-items: stretch;
}

#ticker-wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    min-width: 0;
}

#ticker-wrap.ticker-info    .ticker-icon { color: var(--main-accent-colour, #006698); }
#ticker-wrap.ticker-warning .ticker-icon { color: #f59e0b; }
#ticker-wrap.ticker-urgent  .ticker-icon { color: #dc2626; }

.ticker-type-info    { color: var(--main-accent-colour, #006698); }
.ticker-type-warning { color: #f59e0b; }
.ticker-type-urgent  { color: #dc2626; }

.ticker-icon {
    flex-shrink: 0;
    font-size: 12px;
}

.ticker-track {
    flex: 1;
    overflow: hidden;
    height: 28px;
    position: relative;
}

.ticker-items {
    position: absolute;
    white-space: nowrap;
    font-size: 12px;
    line-height: 28px;
    padding: 0 8px;
    transform: translateX(100vw);
    animation: ticker-scroll 30s linear infinite;
}

.ticker-sep { opacity: .6; }

@keyframes ticker-scroll {
    0%   { transform: translateX(var(--ticker-start, 600px)); }
    100% { transform: translateX(-100%); }
}

/****************************/
/* 33. LED INDICATORS       */
/****************************/

.led {
    border-radius: 5px;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 3px black;
    margin: 5px;
    zoom: 2;
}

.led:after {
    display: block;
    content: '';
    margin: 0 1px;
    width: 8px;
    height: 6px;
    border-radius: 4px 4px 4px 4px / 3px 3px 3px 3px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.green { background-image: linear-gradient(to bottom, #13fB04 0%, #58e343 50%, #ADED99 100%); }
.orange { background-image: linear-gradient(to bottom, #f9a004 0%, #e0ac45 50%, #ead698 100%); }
.red    { background-image: linear-gradient(to bottom, #fb1304 0%, #e35843 50%, #edad99 100%); }


/****************************/
/* 33. COLOUR UTILITIES     */
/****************************/

.altlogic-info {
    color: #fff;
    border-color: var(--main-accent-colour);
    background-color: var(--main-accent-colour);
}

.altlogic-background { background-color: var(--main-accent-colour); }
.altlogic-color      { color: var(--main-accent-colour); }

.icon-green { color: green; }
.icon-red   { color: red; }

.align-right  { text-align: right; }
.align-left   { text-align: left; }
.align-center { text-align: center; }

.display-none { display: none !important; }

.permission-parent { color: var(--main-accent-colour); }


/****************************/
/* 34. LAYOUT / SCROLL PANELS */
/****************************/

/* Shared hidden-scrollbar scroll panel pattern */
#maintenance-panel,
#js-page-content,
.dashboard-body,
.primary-nav-scroll {
    overflow: scroll;
    margin-bottom: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#maintenance-panel::-webkit-scrollbar,
#js-page-content::-webkit-scrollbar,
.dashboard-body::-webkit-scrollbar,
.primary-nav-scroll::-webkit-scrollbar {
    display: none;
}

#maintenance-panel  { height: calc(100vh - 350px); }
#js-page-content,
#js-page-content-dashboard,
.page-content { height: calc(100vh - 50px); background-image: linear-gradient(rgba(255,255,255,var(--page-bg-opacity,0.85)), rgba(255,255,255,var(--page-bg-opacity,0.85))), var(--page-bg-image); background-size: cover; background-attachment: fixed; background-position: center; }
.dashboard-body     { height: calc(100vh - 180px); }
.primary-nav-scroll { height: calc(100vh - 20px); margin-bottom: 20px; }

#maintenance-panel .panel-content { height: calc(100vh - 362px); }

#audit-container { display: none; }

#audit-panel {
    height: 100px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Trimble Maps */
.trimblemaps-ctrl-ssinput {
    padding: 8px;
    background: white;
    border-radius: 2px !important;
}

.trimblemaps-ctrl-ssctrl {
    width: 334px;
    height: 20px;
    border-style: none;
}

.trimblemaps-ctrl-close-icon { margin-left: 0 !important; }

/* Loading spinner */
.loading {
    position: absolute;
    z-index: 9999;
    height: 2em;
    width: 2em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.loading:not(:required) {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.loading:not(:required):after {
    content: '';
    display: block;
    font-size: 10px;
    border-top: 16px solid #FF9714;
    border-right: 16px solid #3276B1;
    border-bottom: 16px solid #1B1E24;
    border-left: 16px solid #434953;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* Route / address */
.route-stop-header {
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background-color: #f8f9fb;
}

/* Adhoc trip stops rendered as cards - see _get_task_fields.php */

#adhoc_trip_stops {
    counter-reset: adhoc-stop;
}

.route-stop-div.stop-card {
    border: 1px solid #e4dced;
    border-radius: .5rem;
    box-shadow: 0 1px 4px rgba(60, 20, 80, .08);
    background: #fff;
    margin: 0 0 1.25rem 0;
    overflow: hidden;
}

.stop-card .stop-card-header {
    background: linear-gradient(to right, #faf7fc, #f4eef8);
    border-bottom: 1px solid #e9e2f0;
    border-left: 4px solid var(--main-accent-colour, #7a2f8f);
    padding: .4rem .9rem;
    margin: 0;
}

.stop-card .stop-card-header .route-stop-header {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.stop-card .route-stop-header label.col-form-label {
    display: flex;
    align-items: center;
}

/* Stop sequence chip - CSS counter follows DOM order so numbering
   stays correct when stops are added, removed or drag-reordered */
.stop-card .route-stop-header label.col-form-label::before {
    counter-increment: adhoc-stop;
    content: counter(adhoc-stop);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--main-accent-colour, #7a2f8f);
    color: #fff;
    font-weight: 700;
    font-size: .75rem;
    margin-right: .6rem;
    flex-shrink: 0;
}

.stop-card .stop-card-body {
    padding: .75rem 1rem .25rem 1rem;
}

/* Numbered site chip + type label - shared language across the queue
   list cells, the details tabs and the edit-screen site list */
.site-list-seq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--main-accent-colour, #7a2f8f);
    color: #fff;
    font-weight: 700;
    font-size: .65rem;
    flex-shrink: 0;
}

.site-list-type {
    font-size: .68rem;
    font-weight: 600;
    color: var(--main-accent-colour, #7a2f8f);
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
}

/* Site list rendered inside list/table cells - see view-queue-list.php */
.site-list-cell {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.site-list-cell .site-list-stop {
    display: flex;
    align-items: flex-start;
}

.site-list-cell .site-list-seq {
    margin-top: .1rem;
    margin-right: .45rem;
}

/* Column to the right of the chip: type label (when present) sits
   above the site text, so addresses always align at the same edge */
.site-list-cell .site-list-stop-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Details tabs: 1.2rem line box so the chip centre lines up with the
   first line of the address */
.task-data-value.site-list-detail-value {
    line-height: 1.2rem;
}

/* Site list chips - type label then numbered chip. Fixed-width label
   area with the chip on its right edge so every address starts at the
   same column. Shared by the edit screen and the details tabs'
   read-only rendering */
.site_list_sortable_item .site_list_sortable_item_number,
.site-list-readonly .site_list_sortable_item_number {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    min-width: 7rem;
    flex-shrink: 0;
}

.task-data-value.site-list-readonly {
    display: flex;
    align-items: center;
}

.linkzone {
    border: 2px dashed #dedede;
    border-radius: 5px;
    background: #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    padding: .5rem;
}

.sortable-placeholder {
    height: 50px;
    background: #ffeeba;
    border: 2px dashed #d39e00;
    margin-bottom: 5px;
}


/*************************************/
/* 35. RESPONSIVE — HIDE UTILITIES   */
/*************************************/

@media only screen and (max-width: 1400px) { .hide-1400 { display: none !important; } }
@media only screen and (max-width: 1300px) { .hide-1300 { display: none !important; } }
@media only screen and (max-width: 1200px) { .hide-1200 { display: none !important; } }
@media only screen and (max-width: 1100px) { .hide-1100 { display: none !important; } }
@media only screen and (max-width: 1000px) { .hide-1000 { display: none !important; } }
@media only screen and (max-width:  900px) { .hide-900  { display: none !important; } }
@media only screen and (max-width:  800px) { .hide-800  { display: none !important; } }
@media only screen and (max-width:  700px) { .hide-700  { display: none !important; } }
@media only screen and (max-width:  600px) { .hide-600  { display: none !important; } }
@media only screen and (max-width:  500px) { .hide-500  { display: none !important; } }
@media only screen and (max-width:  400px) { .hide-400  { display: none !important; } }
@media only screen and (max-width:  300px) { .hide-300  { display: none !important; } }
@media only screen and (max-width:  200px) { .hide-200  { display: none !important; } }
@media only screen and (max-width:  100px) { .hide-100  { display: none !important; } }


/****************************/
/* 36. SITE LIST SORTABLE   */
/****************************/

.site_list_sortable_container {
    border: 1px solid #ccc;
    padding: 10px;
    width: 100%;
    min-height: 50px;
    list-style: none;
    margin-top: 10px;
}

.site_list_sortable_item {
    display: flex;
    align-items: center;
    padding: 5px;
    margin-bottom: 5px;
    cursor: move;
}

.site_list_sortable-item .item-number {
    margin-right: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.site_list_sortable-item span { flex-grow: 1; }

.site_list_sortable_item_number {
    margin-right: 20px;
    color: var(--main-accent-colour);
    font-weight: bold;
}

.site_list_delete_btn {
    color: white;
    background-color: var(--main-accent-colour);
    border: none;
    border-radius: 3px;
    padding: 2px 5px;
    cursor: pointer;
    position: absolute;
    right: 20px;
}

.site_list_delete_btn:hover { background-color: red; }


/****************************/
/* 37. USAGE TABLE CELLS    */
/****************************/

td.usage-low,
td.usage-medium,
td.usage-high {
    padding: 0;
    border: none;
}

td.usage-low .usage-inner,
td.usage-medium .usage-inner,
td.usage-high .usage-inner {
    color: white;
    padding: 10px;
    margin: 4px;
    border-radius: 6px;
    display: inline-block;
    min-width: 90%;
    text-align: center;
}

td.usage-low .usage-inner    { background-color: green; }
td.usage-medium .usage-inner { background-color: orange; }
td.usage-high .usage-inner   { background-color: red; }


/****************************/
/* 38. ICON WRAPPER         */
/****************************/

.icon-wrapper {
    position: relative;
    display: inline-block;
}

.icon-wrapper .fa { font-size: 24px; }

.icon-wrapper .cross-out {
    position: absolute;
    top: 0;
    left: 0;
    color: red;
    font-size: 24px;
    pointer-events: none;
}

/* Check action icons (shared) */
.check-export-icon,
.check-search-icon,
.check-optimize-icon,
.check-range-icon {
    float: right;
    cursor: pointer;
    color: gray;
}


/****************************/
/* 39. WHAT3WORDS           */
/****************************/

.w3w-link {
    color: #FF4136;
    text-decoration: none;
    position: relative;
    padding-left: 30px;
    font-weight: bold;
}

.w3w-link:hover { text-decoration: underline; cursor: pointer; }

.w3w-link[data-tooltip]:hover::after { opacity: 1; visibility: visible; }

.w3w-link::before {
    content: "///";
    background-color: #FF4136;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: normal;
}


/****************************/
/* 40. ADDRESS FIELDS       */
/****************************/

.address-field[readonly] {
    background-color: #fff;
    border-color: #fff;
    border-width: 0;
    color: #999;
    cursor: not-allowed;
}

.address-field:not([readonly]) {
    background-color: #fff;
    color: #000;
    cursor: text;
    border: 0.5px solid #d0d0d0;
    border-radius: var(--radius-md);
    box-shadow: none;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.address-field:not([readonly]):focus {
    border-color: var(--main-accent-colour);
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}

.address-field-group {
    margin: 0 2px;
    min-height: 190px;
    padding: .5rem .875rem;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.47;
    border: 0.5px solid #d0d0d0;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.address-field-group:focus-within {
    border-color: var(--main-accent-colour);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Global form-control focus ring — consistent across all inputs */
.form-control:focus {
    border-color: var(--main-accent-colour);
    box-shadow: 0 0 0 3px var(--accent-tint);
    outline: none;
}

.form-control {
    border-radius: var(--radius-md);
    border: 0.5px solid #d0d0d0;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}


/****************************/
/* 41. MISCELLANEOUS        */
/****************************/

/* Disabled checkbox styling */
.custom-control-input:checked.disabled_checkbox ~ .custom-control-label::before {
    color: #fff;
    border-color: gray;
    background-color: gray;
}

/* Dashboard date picker (inline) */
.dashboard-datepicker {
    color: #545454;
    font-size: large;
    outline: none;
    margin: auto;
    display: block;
    text-align: center;
    border-color: transparent;
    background-color: transparent;
    width: 220px;
}