/*
    Modern theme layer for Mobile Install.

    Loaded after every other stylesheet in the layouts. It only changes visual properties
    (colour, border, radius, shadow, focus ring, transition, font weight) so existing layouts,
    forms, dialogs and scripts keep working exactly as before. No display / position / width /
    padding / margin / font-size changes here on purpose.
*/

/* ---------- Base ---------- */
body.page-body,
body.page-body .page-container .main-content {
    color: #344054;
}

body.page-body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-body .page-container .main-content {
    background-color: #f7f8fa;
}

::selection {
    background-color: #fbd5d5;
    color: #101828;
}

/* ---------- Sidebar ---------- */
body.page-body .page-container .sidebar-menu {
    background: linear-gradient(180deg, #9c1c1c 0%, #7f1515 100%);
}

    body.page-body .page-container .sidebar-menu #main-menu li {
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

        body.page-body .page-container .sidebar-menu #main-menu li a {
            color: rgba(255, 255, 255, 0.86);
            transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
        }

            body.page-body .page-container .sidebar-menu #main-menu li a:hover {
                background-color: rgba(255, 255, 255, 0.08);
                color: #fff;
            }

        body.page-body .page-container .sidebar-menu #main-menu li.active > a,
        body.page-body .page-container .sidebar-menu #main-menu li.opened > a {
            background-color: rgba(0, 0, 0, 0.18);
            box-shadow: inset 3px 0 0 #fff;
            color: #fff;
        }

    body.page-body .page-container .sidebar-menu .logo-env > div.sidebar-collapse a,
    body.page-body .page-container .sidebar-menu .logo-env > div.sidebar-mobile-menu a {
        border-color: rgba(255, 255, 255, 0.18);
        border-radius: 8px;
    }

/* ---------- Header ---------- */
body.page-body .userHeader {
    background-color: #fff;
}

hr.layoutHr {
    border-color: #eaecf0 !important;
}

#profileLogo {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #eaecf0;
}

/* ---------- "Mail" layout: list filters sidebar, detail tab menu, list tables ---------- */
body.page-body .mail-env .mail-sidebar {
    border-color: #eaecf0;
}

    body.page-body .mail-env .mail-sidebar .mail-sidebar-row h4 {
        color: #475467;
        font-weight: 600;
    }

    body.page-body .mail-env .mail-sidebar .mail-menu > li > a {
        transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    body.page-body .mail-env .mail-sidebar .mail-menu > li:hover > a {
        background-color: #f9fafb;
    }

    /* selected detail tab (setSelectedLi adds .active to the .orderMenu li) */
    body.page-body .mail-env .mail-sidebar .mail-menu > li.active > a {
        background-color: #fef3f2;
        box-shadow: inset 3px 0 0 #c62323;
        color: #b42318;
        font-weight: 600;
    }

body.page-body .mail-env .mail-body .mail-table > thead > tr > th {
    background-color: #f9fafb;
    border-bottom-color: #eaecf0 !important;
    color: #475467;
}

body.page-body .mail-env .mail-body .mail-table > tbody > tr > td {
    border-top-color: #f2f4f7;
}

body.page-body .mail-env .mail-body .mail-table > tbody > tr:hover > td {
    background-color: #fcfcfd;
}

/* ---------- Content card ---------- */
body.page-body #content-area.panel {
    border: 1px solid #eaecf0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* The page body (.mail-env) used to be pulled 20px out on both sides and 18px up (custom.css) to run edge to edge.
   Inside the bordered content card that made the sidebar, headers, Start Work, tables and Dashboard2 cross the card
   border (worse at 125% display scaling), so keep it inside the card and round its corners with the card. */
body.page-body #content-area .mail-env {
    margin: 0;
    border-radius: 12px;
}

    body.page-body #content-area .mail-env > .mail-sidebar {
        border-radius: 12px 0 0 12px;
    }

/* ---------- Links ---------- */
body.page-body a {
    transition: color 0.15s ease;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

    .btn:focus,
    .btn:active:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(204, 36, 36, 0.18);
    }

.btn-danger {
    background-color: #c62323;
    border-color: #c62323;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background-color: #a91e1e;
        border-color: #a91e1e;
    }

.btn-white,
.btn-default {
    border-color: #d0d5dd;
}

    .btn-white:hover,
    .btn-default:hover {
        background-color: #f9fafb;
        border-color: #98a2b3;
    }

/* Neon "btn-icon icon-left" puts the icon in a darker block; round its corner to match */
.btn.btn-icon.icon-left i {
    border-radius: 6px 0 0 6px;
}

/* ---------- Form controls ---------- */
.form-control,
select.form-control,
textarea.form-control {
    border-color: #d0d5dd;
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .form-control:hover {
        border-color: #98a2b3;
    }

    .form-control:focus {
        border-color: #e08a8a;
        box-shadow: 0 0 0 3px rgba(204, 36, 36, 0.12);
        outline: none;
    }

    .form-control[readonly],
    .form-control[disabled] {
        background-color: #f9fafb;
    }

/* ---------- Dropdowns ---------- */
.dropdown-menu,
.bDropdown-menu,
.aDropdown-menu {
    border-color: #eaecf0 !important;
    border-radius: 8px;
    box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
}

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus {
        background-color: #fef3f2;
    }

/* the app's own dropdown family (location, status, picked/installed, approved filters...) */
.sDropdown-menu,
.iDropdown-menu,
.lDropdown-menu,
.ipDropdown-menu {
    border-color: #eaecf0 !important;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -2px rgba(16, 24, 40, 0.06);
}

    .lDropdown-menu li.locationTd:hover,
    .sDropdown-menu li:hover,
    .aDropdown-menu li:hover,
    .iDropdown-menu li:hover,
    .ipDropdown-menu li:hover {
        background-color: #f9fafb;
    }

.locationTd.selected,
.itemsSelectedLi.selected,
.pickedItemsSelectedLi.selected,
.installedItemsSelectedLi.selected,
.approvedItemsSelectedLi.selected {
    background-color: #fef3f2 !important;
    box-shadow: inset 3px 0 0 #c62323;
}

    .locationTd.selected .locationA {
        font-weight: 600;
    }

.bDropdown.open .bDropdown-btn, .sDropdown.open .sDropdown-btn, .aDropdown.open .aDropdown-btn,
.iDropdown.open .iDropdown-btn, .lDropdown.open .lDropdown-btn, .ipDropdown.open .ipDropdown-btn {
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
}

/* phone location list */
.mail-sidebar .mail-menu > li > a.locationGroupName:hover {
    background-color: #f9fafb;
}

/* ---------- Modals ---------- */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.22);
}

.modal-header {
    border-bottom-color: #eaecf0;
    border-radius: 12px 12px 0 0;
}

    .modal-header .modal-title {
        color: #101828;
        font-weight: 600;
    }

.modal-footer {
    background-color: #f9fafb;
    border-top-color: #eaecf0;
    border-radius: 0 0 12px 12px;
}

.modal-backdrop.in {
    opacity: 0.45;
}

/* ---------- Time sheet add/edit dialog sidebar ---------- */
.workhistory-sidebar {
    background-color: #f9fafb !important;
    border-right: 1px solid #eaecf0 !important;
}

    .workhistory-sidebar li {
        border-bottom-color: #eaecf0 !important;
    }

        .workhistory-sidebar li a {
            background-color: transparent !important;
            color: #475467 !important;
        }

            .workhistory-sidebar li a:hover {
                background-color: #fff !important;
                color: #101828 !important;
            }

            .workhistory-sidebar li a.active,
            .workhistory-sidebar li a.active:hover {
                background-color: #fff !important;
                border-left-color: #c62323 !important;
                color: #b42318 !important;
            }

/* ---------- Panels ---------- */
.panel {
    border-radius: 10px;
}

.panel-primary,
.panel-default {
    border-color: #eaecf0;
}

/* ---------- Tables (generic) ---------- */
.table > thead > tr > th {
    background-color: #f9fafb;
    color: #475467;
    font-weight: 600;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td {
    border-color: #eaecf0;
}

.table-hover > tbody > tr:hover > td {
    background-color: #fcfcfd;
}

/* ---------- Tabs ---------- */
.nav-tabs {
    border-bottom-color: #eaecf0;
}

    .nav-tabs > li > a {
        border-radius: 8px 8px 0 0;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        border-color: #eaecf0 #eaecf0 transparent;
        color: #101828;
        font-weight: 600;
    }

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
    border-color: #eaecf0;
    color: #344054;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    border-radius: 8px 0 0 8px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: 0 8px 8px 0;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: #c62323;
    border-color: #c62323;
    color: #fff;
}

/* ---------- Dashboard tiles (Neon tile-stats) ---------- */
.tile-stats {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
}

/* tile-grey ("All") and tile-gray ("Deferred") are different colours in Neon: keep them distinct */
.tile-stats.tile-grey { background: linear-gradient(135deg, #bdb2b2 0%, #a09292 100%); }
.tile-stats.tile-gray { background: linear-gradient(135deg, #e6e6ea 0%, #d0d0d7 100%); }

    .tile-stats.tile-gray .num,
    .tile-stats.tile-gray h3,
    .tile-stats.tile-gray p {
        color: #667085;
    }
.tile-stats.tile-orange { background: linear-gradient(135deg, #f79009 0%, #dc6803 100%); }
.tile-stats.tile-green { background: linear-gradient(135deg, #17b26a 0%, #079455 100%); }
.tile-stats.tile-aqua { background: linear-gradient(135deg, #06aed4 0%, #088ab2 100%); }
.tile-stats.tile-red { background: linear-gradient(135deg, #f04438 0%, #d92d20 100%); }
.tile-stats.tile-blue { background: linear-gradient(135deg, #2e90fa 0%, #1570ef 100%); }

/* dashboard cards are clickable: lift on hover */
.card > .tile-stats {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .card:hover > .tile-stats {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -4px rgba(16, 24, 40, 0.18);
    }

/* background icon: centred on the right and sized to fit, so it is never cut off at the bottom
   (replaces Neon's per-browser bottom offsets) */
.card > .tile-stats .icon,
.page-container .card > .tile-stats .icon {
    top: 50% !important;
    right: 16px;
    bottom: auto !important;
    line-height: 1;
    transform: translateY(-50%);
}

    .card > .tile-stats .icon i {
        display: block;
        font-size: 64px !important;
        line-height: 1 !important;
        vertical-align: top;
    }

        .card > .tile-stats .icon i:before {
            display: block;
            line-height: 1 !important;
        }

@media (min-width: 768px) and (max-width: 1199px) {
    .card > .tile-stats .icon i {
        font-size: 48px !important;
    }
}

.flipkartBox {
    border-color: #eaecf0 !important;
    border-radius: 999px !important;
    background-color: #f9fafb !important;
    opacity: 1 !important;
}

/* ---------- Calendar (FullCalendar 1.6 in Neon calendar-env): month, week and day views ----------
   Event colours are set inline per status by the page script and are left untouched. */

/* sidebar section bands (Filter / Installers / Status ...) - also used by the list pages */
body.page-body .mail-env .mail-sidebar-row {
    background-color: #f9fafb;
    border-top: 1px solid #eaecf0;
    border-bottom: 1px solid #eaecf0;
}

/* header: month title + segmented Day / Week / Month switcher (grey track, white thumb on the active view) */
body.page-body .calendar-env .fc-header-title h2 {
    color: #101828;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

body.page-body .calendar-env .calendar-body .fc-header .fc-button {
    position: relative;
    z-index: 0;
    height: 38px;
    padding: 0 18px;
    background: #f2f4f7;
    border: none !important;
    border-radius: 0;
    box-shadow: none;
    color: #475467;
    font-size: 13px;
    font-weight: 500;
    line-height: 38px;
    text-transform: capitalize;
    transition: color 0.15s ease;
}

    body.page-body .calendar-env .calendar-body .fc-header .fc-button:hover {
        background: #f2f4f7;
        color: #101828;
    }

    body.page-body .calendar-env .calendar-body .fc-header .fc-button.fc-corner-left {
        padding-left: 20px;
        border-radius: 12px 0 0 12px;
    }

    body.page-body .calendar-env .calendar-body .fc-header .fc-button.fc-corner-right {
        padding-right: 20px;
        border-radius: 0 12px 12px 0;
    }

    body.page-body .calendar-env .calendar-body .fc-header .fc-button.fc-state-active {
        background: #f2f4f7;
        color: #b42318;
        font-weight: 600;
        box-shadow: none;
    }

        body.page-body .calendar-env .calendar-body .fc-header .fc-button.fc-state-active:before {
            content: "";
            position: absolute;
            top: 4px;
            right: 4px;
            bottom: 4px;
            left: 4px;
            z-index: -1;
            background-color: #fff;
            border-radius: 9px;
            box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 1px 2px rgba(16, 24, 40, 0.06);
        }

/* grid (month + week): plain weekday names, left-aligned dates, past days shaded, today tinted */
body.page-body .calendar-env .calendar-body .fc-content .fc-view table thead tr th {
    padding: 10px 10px 8px;
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: #e4e7ec;
    color: #101828;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

body.page-body .calendar-env .fc-widget-header,
body.page-body .calendar-env .fc-widget-content,
body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day {
    border-color: #e4e7ec;
}

/* every day is its own box: full grid lines in month and week views */
body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-month table tbody tr td.fc-day,
body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-basicWeek table tbody tr td.fc-day {
    border: 1px solid #dde1e7 !important;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-future {
    background-color: #fff;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-past {
    background-color: #eceef2;
}

    /* past dates are muted, upcoming dates stand out */
    body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-past .fc-day-number {
        color: #98a2b3;
        font-weight: 400;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-future:not(.fc-other-month) .fc-day-number {
        color: #101828;
        font-weight: 600;
    }

body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day .fc-day-number {
    display: block;
    float: none;
    padding: 8px 10px 4px;
    background: transparent !important;
    border: none !important;
    color: #344054;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-other-month .fc-day-number {
    color: #98a2b3;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-today {
    background-color: #fdeceb !important;
    box-shadow: inset 0 0 0 1px #f5b8b3;
}

    body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-today .fc-day-number {
        color: #b42318 !important;
        font-weight: 700;
    }

/* events: chip with the status colour as a left bar and a light tint of it behind dark text.
   The page sets the status colour inline as background-color; the white overlay leaves the first 4px untinted. */
body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event {
    margin-bottom: 4px;
    border: none !important;
    border-radius: 6px;
    background-image: linear-gradient(90deg, transparent 4px, rgba(255, 255, 255, 0.8) 4px);
    box-shadow: none;
    color: #101828 !important;
    font-weight: 500;
    transition: box-shadow 0.15s ease;
}

    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event:hover {
        background-image: linear-gradient(90deg, transparent 4px, rgba(255, 255, 255, 0.68) 4px);
        box-shadow: 0 2px 6px rgba(16, 24, 40, 0.14);
    }

    /* inset from the cell edges at its first and last day (FullCalendar subtracts these borders when sizing) */
    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-hori {
        background-clip: padding-box;
    }

        body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-hori.fc-event-start {
            border-left: 6px solid transparent !important;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }

        body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-hori.fc-event-end {
            border-right: 6px solid transparent !important;
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }

    /* an event continued from the previous week has no start: no bar, square left end */
    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-hori:not(.fc-event-start) {
        background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-hori:not(.fc-event-end) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-hori .fc-event-inner {
        padding: 5px 8px 5px 12px;
        overflow: hidden;
        line-height: 18px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event.fc-event-vert .fc-event-inner {
        padding: 4px 8px 4px 10px;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event .fc-event-title {
        color: #101828 !important;
        font-size: 12.5px;
        font-weight: 500;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-event .fc-event-inner img {
        vertical-align: -4px;
    }

/* day view (agenda) */
body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-allday {
    background-color: #f9fafb;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-divider {
    background-color: #eaecf0;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-axis {
    border-right-color: #eaecf0 !important;
    color: #667085 !important;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-slots tr td,
body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-slots tr th {
    border-bottom: 1px solid #f2f4f7;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-slots tr.fc-minor td,
body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-slots tr.fc-minor th {
    border-bottom: 1px dashed #f2f4f7;
}

body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-days th,
body.page-body .calendar-env .calendar-body .fc-content .fc-view .fc-agenda-days td {
    border-color: #eaecf0;
}

/* in day view the whole column is "today": no pink tint there */
body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-agendaDay td.fc-today {
    background-color: transparent !important;
}

/* desktop / tablet (phones have their own month chips and week / day lists in custom.css):
   - past days only lightly shaded and today marked by its red date and a red line on top, not a pink column: in the week view
     (one tall row) the full grey / pink fills covered most of the screen
   - week view titles wrap so they can be read in full (the month view keeps one line with "...")
   - day view items sit side by side (slotEventOverlap false in Views\Calendar\List.cshtml) with a thin white gap between them */
@media (min-width: 768px) {
    body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-past {
        background-color: #f9fafb;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view table tbody tr td.fc-day.fc-today {
        background-color: #fff !important;
        box-shadow: inset 0 3px 0 #b42318;
    }

    body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-basicWeek .fc-event.fc-event-hori .fc-event-inner {
        line-height: 16px;
        white-space: normal;
        text-overflow: clip;
        overflow-wrap: break-word;
    }

    /* side by side the items are narrower, so a long title is cut at the item's edges instead of running over the items below it */
    body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-agendaDay .fc-event.fc-event-vert {
        overflow: hidden;
        box-shadow: 0 0 0 1px #fff;
    }

        body.page-body .calendar-env .calendar-body .fc-content .fc-view.fc-view-agendaDay .fc-event.fc-event-vert .fc-event-inner {
            overflow: hidden;
        }
}

/* ---------- Alerts / labels / badges ---------- */
.alert {
    border-radius: 10px;
}

.label,
.badge {
    border-radius: 999px;
}

/* ---------- Tooltips / popovers ---------- */
.tooltip-inner {
    background-color: #101828;
    border-radius: 6px;
}

.tooltip.top .tooltip-arrow { border-top-color: #101828; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #101828; }
.tooltip.left .tooltip-arrow { border-left-color: #101828; }
.tooltip.right .tooltip-arrow { border-right-color: #101828; }

.popover {
    border-color: #eaecf0;
    border-radius: 10px;
    box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.14);
}

/* ---------- Date picker ---------- */
.datepicker.dropdown-menu {
    border-radius: 10px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: #c62323 !important;
    background-image: none !important;
    border-radius: 6px;
    color: #fff;
}

.datepicker table tr td.day:hover {
    border-radius: 6px;
}

/* ---------- Select2 ---------- */
.select2-container .select2-choice,
.select2-container-multi .select2-choices {
    border-color: #d0d5dd !important;
    border-radius: 6px !important;
}

.select2-drop {
    border-color: #eaecf0 !important;
    border-radius: 0 0 8px 8px;
}

/* ---------- Status message / loading ---------- */
.messageInfo .alert {
    box-shadow: 0 12px 24px -6px rgba(16, 24, 40, 0.14);
}

/* ---------- Login page ---------- */
/* The logo image (dtools_145.jpg / dtools_144.png) has a solid #8a1818 background baked in,
   so the header stays exactly that colour behind it and only darkens slightly below. */
.login-page .login-header {
    background: linear-gradient(180deg, #8a1818 0%, #8a1818 70%, #7a1515 100%);
}

.login-page .login-content.login-box {
    background-color: #fff;
    border: 1px solid #eaecf0 !important;
    border-radius: 14px;
    box-shadow: 0 16px 40px -12px rgba(16, 24, 40, 0.20);
}

/* No overflow:hidden here: the account selector's dropdown list lives inside this input-group
   and must be able to open below it. The icon block's corners are rounded instead. */
.login-page .login-form .form-group .input-group {
    border-color: #d0d5dd !important;
    border-radius: 8px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .login-page .login-form .form-group .input-group > .input-group-addon:first-child {
        border-radius: 7px 0 0 7px;
    }

    .login-page .login-form .form-group .input-group.focused {
        border-color: #e08a8a !important;
        box-shadow: 0 0 0 3px rgba(204, 36, 36, 0.12);
    }

body.login-page .login-form .form-group .btn-login {
    background-color: #c62323;
    border-color: #c62323;
    border-radius: 8px;
}

    body.login-page .login-form .form-group .btn-login:hover,
    body.login-page .login-form .form-group .btn-login:focus {
        background-color: #a91e1e;
        border-color: #a91e1e;
    }

/* "Keep me logged in" and "Forgot your password?" are built as input-groups with a white border; keep them borderless */
body.login-page .login-form .form-group .input-group.rememberMe,
body.login-page .login-form #forgotPassword .input-group {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* e-mail error line (sign in, forgot password): its own line under the field, so the Next / Send buttons below it
   (absolutely positioned in LogOn.cshtml) never cover it, e.g. at 125% display scaling or with a long message */
body.login-page .login-form .emailErrorMsg,
body.login-page .login-form .emaiErrorMsg {
    position: static !important;
    min-height: 20px;
    margin-top: 4px;
    line-height: 20px;
    text-align: right;
}

/* ---------- Cookie banner ---------- */
.accept-cookies-content {
    border-radius: 10px 10px 0 0 !important;
}

/* Phone sign in (below the 767px breakpoint where LogOn.cshtml pads the card): the phone logo (dtools_144.png) has a #971a1a
   background, so the header matches it; the card gets the same inner spacing as on desktop, with the absolutely positioned
   Next / Log in / Back / Send / Cancel buttons and the error line kept inside it */
@media (max-width: 766px) {
    .login-page .login-header {
        background: linear-gradient(180deg, #971a1a 0%, #971a1a 70%, #851717 100%);
    }

    body .login-container .login-header.login-caret:after {
        border-top-color: #851717;
    }

    .login-page .login-content.login-box {
        width: auto !important;
        max-width: 400px;
        margin: 0 16px !important;
        padding: 20px 16px 16px !important;
    }

    body.login-page #loginbutton, body.login-page #next, body.login-page .emailErrorMsg, body.login-page #send, body.login-page .emaiErrorMsg {
        margin-right: 17px !important;
    }

    body.login-page #back, body.login-page #cancel {
        margin-left: 17px !important;
    }

    body.login-page #loginAction button.btn, body.login-page #forgetPasswordContent button.btn {
        width: calc(50% - 23px) !important;
    }

    body.login-page .iconAlign {
        right: 37px !important;
    }

    body.login-page .userLabel {
        padding-right: 20px;
    }

    /* cookie banner: full width with a small gutter (the inline 65px left padding is for the desktop sidebar) */
    .accept-cookies-container {
        padding-left: 0 !important;
    }

    .accept-cookies-content {
        width: auto !important;
        margin: 0 12px !important;
    }
}

/* ---------- Scrollbars (WebKit / WebView2) ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #d0d5dd;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #98a2b3;
    }

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Loading overlay (#loading via showProgress, #loadingPreviewContent in the list preview pane) ----------
   The old LoadingBar4.gif is hidden; a spinner card and a thin top bar are drawn in CSS. Show/hide is unchanged. */
.loading#loading {
    overflow: hidden;
    background-color: rgba(16, 24, 40, 0.28);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

    .loading#loading:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 40%;
        height: 3px;
        background: linear-gradient(90deg, rgba(204, 36, 36, 0) 0%, #f04438 50%, rgba(204, 36, 36, 0) 100%);
        animation: miLoadingBar 1.1s ease-in-out infinite;
    }

#loading > div,
#loadingPreviewContent > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 132px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 12px 16px;
    overflow: visible !important;
    background-color: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 40px -8px rgba(16, 24, 40, 0.25), 0 0 0 1px rgba(16, 24, 40, 0.04);
    text-align: center;
    transform: translate(-50%, -50%);
}

#loadingPreviewContent > div {
    box-shadow: 0 8px 24px -6px rgba(16, 24, 40, 0.2), 0 0 0 1px #eaecf0;
}

    #loading > div > img,
    #loadingPreviewContent > div > img {
        display: none;
    }

    #loading > div:before,
    #loadingPreviewContent > div:before {
        content: "";
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        border: 3px solid #fde2e0;
        border-top-color: #cc2424;
        border-radius: 50%;
        animation: miSpin 0.8s linear infinite;
    }

    #loading > div:after,
    #loadingPreviewContent > div:after {
        content: "Loading\2026";
        display: block;
        margin-top: 12px;
        color: #475467;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.2px;
    }

@keyframes miSpin {
    to { transform: rotate(360deg); }
}

@keyframes miLoadingBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}