@import url("/tm/tm.loading.css?v=20261029-1");



/* =========================================================
   PREVENT THEME FLASH
   ========================================================= */

html {
    background: #ffffff;
}

    html.tm-dark {
        background: #0b1220;
    }

    html.tm-light {
        background: #ffffff;
    }

    html.tm-dark body {
        background: #0b1220;
    }

    html.tm-light body {
        background: #ffffff;
    }

:root {
    --tm-primary: #4682B4; /* tavo melyna */
    --tm-primary-dark: #225ca2;
    --tm-on-primary: #ffffff;
    --tm-bg-main: #ffffff;
    --tm-bg-card: #ffffff;
    --tm-border-soft: #c9d3e6;
    --tm-text-main: #1f2933;
    --tm-text-muted: #5b657a;
    --tm-accent: #ff5b5b;
    --tm-success: #1a8f3a;
    --tm-error: #c62828;
    --tm-yellow-action-bg: linear-gradient(180deg, #fde88a 0%, #fcdb6c 50%, #f5c830 100%);
    --tm-yellow-action-bg-hover: linear-gradient(180deg, #feee99 0%, #fde27a 50%, #f8d040 100%);
    --tm-yellow-action-border: #c9a800;
    --tm-yellow-action-border-hover: #b89400;
    --tm-yellow-action-text: #3a2800;
    --tm-scroll-track: #d4dbea;
    --tm-scroll-thumb: #9caed3;
    /* RESIZABLE COLUMNS */
    --tm-left-col-width: 300px;
    --tm-right-col-width: 300px;
}


* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, sans-serif;
    background: var(--tm-bg-main);
    color: var(--tm-text-main);
    overflow: hidden; /* ? page never scrolls, inner lists do */
}

html {
    overflow-x: auto; /* leidžia horizontalų slinkimą kai priartinta (zoom) */
}

body {
    min-width: 1150px; /* neleidžia layout'ui susitraukti žemiau 3-stulpelių minimumo */
}
/* TOPBAR */

.tm-topbar {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: var(--tm-bg-main);
    color: var(--tm-text-main);
    border-bottom: none; /* jokios linijos apacioje */
    box-shadow: none; /* jokio šešelio */
}

.tm-topbar-left {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tm-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.tm-btn {
    border: 1px solid var(--tm-primary-dark);
    background: var(--tm-primary); /* SteelBlue */
    color: var(--tm-on-primary);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

    .tm-btn:hover {
        background: #3a709c; /* šiek tiek tamsesne */
    }

.tm-btn-secondary {
    border: 1px solid var(--tm-primary-dark);
    background: var(--tm-primary); /* taip pat SteelBlue, kad visi vienodi */
    color: var(--tm-on-primary);
}

    .tm-btn-secondary:hover {
        background: #3a709c;
    }

/* MAIN 3 COLUMNS LAYOUT */

.tm-main {
    display: grid;
    grid-template-columns: var(--tm-left-col-width) minmax(520px, 1fr) var(--tm-right-col-width);
    gap: 8px;
    padding: 0 6px 8px 6px;
    height: calc(100vh - var(--tm-nav-h, 52px));
    min-height: 0; /* ? critical for nested scroll */
}


/* COLUMNS */

.tm-column {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tm-bg-card);
    border: 1px solid var(--tm-border-soft);
    border-top: none;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
    min-height: 0; /* ? allows inner list to scroll instead of page */
}

.tm-column-left,
.tm-column-right {
    min-width: 230px;
}

/* centrine kolona kaip buvo */
.tm-column-center {
    overflow: hidden;
    border: none; /* jei turejai cia border'io keitima – palik taip */
    min-width: 0;
}

/* RESIZER STRYPELIAI ŠONUOSE */
.tm-column-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 20;
    background: transparent;
}

    .tm-column-resizer:hover {
        background: rgba(70, 130, 180, 0.25); /* švelniai melynas hover */
    }

.tm-column-resizer-left {
    right: 0;
}

.tm-column-resizer-right {
    left: 0;
}


.tm-column-left,
.tm-column-right {
    min-width: 230px;
}

.tm-column-center {
    overflow: hidden;
    border: none; /* jokios linijos aplink kalendoriaus kolona */
    background: transparent; /* kad susilietu su bendru fonu */
    box-shadow: none;
    min-width: 0;
}

/* COLUMN HEADER */

.tm-column-header {
    padding: 4px 6px 4px 8px;
    background: #d9e3f5;
    border-bottom: 1px solid var(--tm-border-soft);
}

.tm-column-title {
    font-size: 13px;
    font-weight: 600;
}

.tm-column-subtitle {
    font-size: 11px;
    color: var(--tm-text-muted);
}

/* SEARCH */

.tm-search-wrapper {
    padding: 4px 6px;
    border-bottom: 1px solid var(--tm-border-soft);
}

.tm-search {
    width: 100%;
    padding: 4px 6px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #c3cfe8;
}

/* TASK LISTS */

.tm-list {
    flex: 1;
    min-height: 0; /* ? critical */
    overflow-y: auto; /* ? scrollbar inside list */
    overflow-x: hidden;
    padding: 2px 2px 4px 2px;
    background: #f7f9fd;
}

    .tm-list::-webkit-scrollbar {
        width: 8px;
    }

    .tm-list::-webkit-scrollbar-track {
        background: var(--tm-scroll-track);
    }

    .tm-list::-webkit-scrollbar-thumb {
        background: var(--tm-scroll-thumb);
        border-radius: 4px;
    }

.tm-list-item {
    padding: 2px 4px;
    margin-bottom: 1px;
    border-radius: 2px;
    background: #ffffff; /* viena spalva visiems */
    font-size: 11px;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tm-list-item:hover {
        background: #dde5f7;
    }

/* === CALENDAR ===================================================== */

.tm-calendar-wrapper {
    margin: 4px 0 0 0; /* be papildomo remelio tarpo šonuose */
    background: transparent; /* jokios atskiros korteles */
    border-radius: 0;
    border: none; /* jokios linijos aplink kalendoriu */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tm-calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-bottom: none;
    background: transparent; /* be remelio ir fono */
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

#tm-year-label {
    margin: 0 10px;
    font-weight: 700;
}

.tm-year-btn {
    border: 1px solid #b7c7e6;
    background: #f4f7fd;
    padding: 2px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
}

    .tm-year-btn:hover {
        background: #ffffff;
    }

.tm-calendar {
    flex: 1;
    padding: 6px 0 0 0;
    background: transparent;
    border-radius: 0;
    border: none;
    overflow: visible; /* be scroll/ratuko */
    min-width: 0;
}

/* 12 men. – 3 stulpeliai x 4 eiles, kompaktiška */
.tm-month-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 260px));
    grid-auto-rows: minmax(110px, 1fr);
    gap: 6px 12px;
    justify-content: center;
}

/* Menesiu blokai be remelio ir fono */
.tm-month {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    overflow: hidden;
    padding: 0 2px 6px 2px; /* tik šiek tiek apacioje */
}

    .tm-month.tm-month-current {
        border: none;
        box-shadow: none;
    }

/* menesio pavadinimas ant bendro background */
.tm-month-header {
    text-align: center;
    padding: 0 0 2px 0;
    background: transparent;
    border-bottom: none;
    font-weight: 600;
    font-size: 12px;
    color: #555;
}

.tm-month.tm-month-current .tm-month-header {
    color: var(--tm-primary-dark);
    font-weight: 700;
}

.tm-month-weekdays,
.tm-month-weeks {
    padding: 0 0 2px 0;
}

/* WEEKDAYS + WEEK NUMBERS */

.tm-weekdays-row {
    display: grid;
    grid-template-columns: 18px repeat(7, 1fr);
    font-size: 8px;
    text-align: center;
    color: var(--tm-text-muted);
}

.tm-weekdays-row .tm-calendar-weekend {
    color: rgba(176, 78, 67, 0.9);
    font-weight: 700;
}

.tm-weeknum-header,
.tm-weeknum {
    font-size: 8px;
    color: #b3bac7; /* dar pilkesnis tekstas */
    text-align: right;
    padding-right: 2px;
}

/* weeks */

.tm-weeks {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
}

/* one week row */
.tm-week-row {
    display: grid;
    grid-template-columns: 18px repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 3px;
}

.tm-day {
    border: 0.5px solid #e3e5f0;
    min-height: 16px;
    position: relative;
    font-size: 8px;
    padding: 0 1px;
    background: #fff9e3;
    cursor: default;
    border-radius: 3px;
    /* centras */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* dienos numeris – centre, be absolute */
.tm-day-number {
    position: static;
    line-height: 1;
}

/* dienos ne iš šio menesio (blank pilki numeriai) */
.tm-day-outside {
    background: #f7f7fb;
    border: none;
    opacity: 0.85;
    pointer-events: none; /* jokio hover/click */
}

    .tm-day-outside .tm-day-number {
        color: #b8bfcd;
    }

/* hover tik normalioms dienoms */
.tm-day:not(.tm-day-outside):hover {
    background: #fdf0d8;
}

.tm-day.tm-calendar-weekend:not(.tm-day-outside):not(.tm-day-today):not(.tm-day-color-fill) {
    background: #fff1ed;
    border-color: #e7cbc4;
}

.tm-day.tm-calendar-weekend:not(.tm-day-outside):not(.tm-day-today):not(.tm-day-color-fill):hover {
    background: #fbe2dc;
    border-color: #ddb3aa;
}

/* small colour bar on left (task category) */

.tm-day-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
}

    .tm-day-bar.red {
        background: #ff5b5b;
    }

    .tm-day-bar.green {
        background: #4caf50;
    }

    .tm-day-bar.blue {
        background: #2196f3;
    }

    .tm-day-bar.orange {
        background: #ff9800;
    }

/* SENAS hover – visoms dienoms vienodas */
.tm-day:hover {
    background: #fdf0d8;
}

/* responsive */

@media (max-width: 1100px) {
    .tm-main {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        height: auto;
    }

    .tm-column {
        height: 340px;
    }
}

.tm-list-week {
    margin: 6px 0 2px 0;
    font-size: 10px;
    font-weight: 600;
    color: #7d8597;
    text-align: center; /* centre */
    padding: 0;
    display: block;
    width: 100%;
}

/* Past / Upcoming – header SteelBlue */
.tm-column-left .tm-column-header,
.tm-column-right .tm-column-header {
    background: var(--tm-primary);
    color: var(--tm-on-primary);
    border-bottom: 1px solid var(--tm-primary-dark);
}


/* =========================
   Search with clear (X)
   ========================= */

.tm-search-wrap {
    position: relative;
    width: 100%;
}

    .tm-search-wrap input {
        width: 100%;
        padding-right: 28px; /* vieta X */
    }

.tm-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: var(--tm-text-muted, #aaa);
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}

.tm-search-wrap input:not(:placeholder-shown) + .tm-search-clear {
    opacity: 1;
    pointer-events: auto;
}

.tm-search-clear:hover {
    color: var(--tm-accent, #ff5b5b);
}

/* spalvota juostele kalendoriaus langelyje pagal taskColor */
.tm-day-color-strip {
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    height: 3px;
    border-radius: 999px;
    pointer-events: none;
}

/* kad absolute veiktu – dienos langelis turi buti relative */
.tm-day {
    position: relative;
}

.tm-list-week-header {
    padding: 2px 0;
    font-size: 11px;
    font-weight: normal;
    color: #6b7280; /* švelni pilkai melyna */
    text-align: center;
    background: transparent;
}


/* === Multi-color day bars (NO blending) ============================ */
.tm-day-bars {
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 4px;
    min-width: 4px;
    max-width: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 2px;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 2;
}

    .tm-day-bars .tm-day-bar-seg {
        display: block;
        flex: 1 1 0;
        width: 100%;
        min-height: 0;
        box-sizing: border-box;
    }


/* ? show events on outside days, but muted */
.tm-day-bars-outside,
.tm-day-outside .tm-day-bars {
    opacity: 0.35;
    filter: saturate(0.75);
}

/* ===== Category dropdown with color squares (desktop-like) ===== */
.tm-csel-wrap {
    position: relative;
    width: 100%;
}

.tm-csel-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--tm-border-soft);
    border-radius: 4px;
    background: #fff;
    color: var(--tm-text-main);
    cursor: pointer;
}

.tm-csel-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.tm-csel-sq {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,.18);
    flex: 0 0 16px;
}

.tm-csel-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-csel-caret {
    opacity: .85;
}

.tm-csel-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--tm-border-soft);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    max-height: 240px;
    overflow: auto;
    z-index: 99999;
    display: none;
    padding: 4px 0;
}

.tm-csel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    cursor: pointer;
    user-select: none;
}

    .tm-csel-item:hover {
        background: rgba(70,130,180,.12);
    }

    .tm-csel-item.selected {
        background: rgba(70,130,180,.18);
    }

.tm-csel-sep {
    height: 1px;
    background: rgba(0,0,0,.08);
    margin: 4px 0;
}

.tm-csel-manage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
}

    .tm-csel-manage:hover {
        background: rgba(70,130,180,.12);
    }
/* ===== Category dropdown (fix font + bigger popup) ===== */
.tm-csel-btn {
    font: inherit; /* ? toks pats šriftas kaip visur */
    font-size: inherit;
    line-height: inherit;
}

.tm-csel-list {
    font: inherit; /* ? toks pats šriftas kaip visur */
    font-size: inherit;
    line-height: inherit;
    max-height: 520px; /* ? didesnis list aukštis */
}
/* ===== Category color dropdown: match native input sizing ===== */
.tm-csel-btn {
    padding: 6px 10px !important; /* mažiau “storio” */
    min-height: 34px !important; /* kaip kiti select/input */
    border-radius: 4px !important;
    font-size: 14px !important; /* mažesnis šriftas */
    line-height: 18px !important;
}

.tm-csel-left {
    gap: 6px !important;
}

.tm-csel-sq {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    border-radius: 3px !important;
}

.tm-csel-text {
    font-size: 14px !important;
    line-height: 18px !important;
}

.tm-csel-caret {
    font-size: 12px !important;
}

.tm-csel-list {
    padding: 3px 0 !important;
    font-size: 14px !important;
    line-height: 18px !important;
}

.tm-csel-item {
    padding: 6px 10px !important; /* mažiau tarpo tarp pasirinkimu */
    gap: 8px !important;
}

.tm-csel-manage {
    padding: 6px 10px !important;
    font-size: 14px !important;
    line-height: 18px !important;
}

.tm-csel-search-row {
    position: sticky;
    top: -3px;
    z-index: 1;
    padding: 4px 6px 6px;
    margin-top: -3px;
    background: inherit;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.tm-csel-search {
    width: 100%;
    box-sizing: border-box;
    height: 30px;
    padding: 4px 8px;
    font: inherit;
    font-size: 14px;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    background: #fff;
    color: inherit;
}

    .tm-csel-search:focus {
        outline: none;
        border-color: var(--tm-primary, #4682B4);
    }

.tm-csel-empty {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--tm-text-muted, #5b657a);
}

html.tm-dark .tm-csel-search-row {
    border-bottom-color: rgba(255,255,255,.08);
}

html.tm-dark .tm-csel-search {
    background: var(--tm-bg-input, rgba(255,255,255,0.04));
    border-color: var(--tm-border-soft, rgba(201,211,230,0.16));
    color: var(--tm-text-main, #e6edf7);
}
/* =========================================================
   Vehicle Defects page (match existing TM style)
   ========================================================= */

.tm-main.tm-main-2col {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 6px;
    padding: 6px;
}

.tm-defects-center {
    background: #fff;
    border: 1px solid var(--tm-border-soft);
    border-radius: 6px;
    overflow: hidden;
}

/* left list items */
.tm-sidepanel {
    background: #f7f9fd;
}

.tm-sidepanel-item {
    padding: 6px 8px;
    margin: 2px 2px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid transparent;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .tm-sidepanel-item:hover {
        background: #dde5f7;
    }

    .tm-sidepanel-item.active {
        border-color: rgba(70,130,180,0.45);
        background: rgba(70,130,180,0.12);
        font-weight: 700;
    }

/* toolbar */
.tm-defects-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid var(--tm-border-soft);
    background: #fff;
}

.tm-defects-toolbar-left {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.tm-defects-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tm-search-inline {
    padding: 0;
    border-bottom: none;
}

.tm-search-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}

.tm-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    line-height: 16px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tm-text-muted);
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .tm-search-clear:hover {
        color: var(--tm-accent);
    }

/* table */
.tm-defects-table-wrap {
    height: auto; /* ? nebefiksuojam aukšcio */
    max-height: calc(100vh - 170px); /* ? ribojam tik maksimaliai */
    overflow: auto;
    background: #fff;
}


.tm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .tm-table thead th {
        position: sticky;
        top: 0;
        background: #d9e3f5;
        border-bottom: 1px solid var(--tm-border-soft);
        color: var(--tm-text-main);
        text-align: left;
        padding: 8px 8px;
        user-select: none;
        cursor: pointer;
    }


    .tm-table tbody td {
        border-bottom: 1px solid #eef2f7;
        padding: 7px 8px;
        vertical-align: top;
    }

    .tm-table tbody tr:hover {
        background: #dde5f7; /* same subtle hover as task lists */
    }

    .tm-table tbody tr.active {
        background: #cfdaf5; /* slightly stronger than hover */
    }

.tm-th-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tm-th-sort {
    font-size: 11px;
    opacity: 0.75;
}

/* footer */
.tm-defects-footer {
    padding: 8px 10px;
    font-size: 12px;
    color: var(--tm-text-muted);
    border-top: 1px solid var(--tm-border-soft);
    background: #fff;
}

/* =========================================================
   Edit Defect modal (single source of truth)
   ========================================================= */

/* backdrop */
#tm-defects-modal-backdrop.tm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(30,41,59,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    padding: 16px;
}

/* modal box (FIX: not transparent) */
#tm-defects-modal {
    width: min(980px, 100%);
    background: var(--tm-bg-card, #fff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
    overflow: hidden;
}

    /* header */
    #tm-defects-modal .tm-modal-head {
        padding: 10px 12px;
        background: var(--tm-primary, #4682B4);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 13px;
    }

    /* IMPORTANT: body not grid (inner layout uses grid) */
    #tm-defects-modal .tm-modal-body,
    #tm-defects-modal .tm-defects-modal-body {
        display: block !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 16px 16px 16px !important;
    }

/* inner layout */
.tm-defect-modal-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 16px;
    align-items: start;
}

/* left side grid */
.tm-defect-left {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 10px 14px;
    align-items: center;
}

    .tm-defect-left label {
        font-weight: 600;
        font-size: 12px;
        color: var(--tm-text-main, #1f2933);
    }

    .tm-defect-left input,
    .tm-defect-left select,
    .tm-defect-left textarea {
        width: 100%;
        padding: 6px 7px;
        border: 1px solid #c3cfe8;
        border-radius: 2px;
        background: #fff;
        color: var(--tm-text-main, #1f2933);
        outline: none;
        font-size: 12px;
        box-sizing: border-box;
    }

    .tm-defect-left textarea {
        min-height: 90px;
        resize: vertical;
    }

    .tm-defect-left .tm-row-full,
    .tm-defect-left #tm-defects-modal-msg {
        grid-column: 1 / -1;
    }

/* reported-by inline row */
.tm-inline-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* checkbox row aligned with inputs */
.tm-defect-left .tm-defect-checks {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
}

    .tm-defect-left .tm-defect-checks .tm-checkline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        margin: 0;
    }

        .tm-defect-left .tm-defect-checks .tm-checkline input {
            margin: 0;
        }

/* right fixed panel */
.tm-defect-fixed-panel {
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    background: var(--tm-bg-card, #fff);
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
    /* right panels inputs look same as left side */
    .tm-defect-fixed-panel input,
    .tm-defect-fixed-panel select,
    .tm-defect-fixed-panel textarea {
        width: 100%;
        padding: 6px 7px;
        border: 1px solid #c3cfe8;
        border-radius: 2px;
        background: #fff;
        color: var(--tm-text-main, #1f2933);
        outline: none;
        font-size: 12px;
        box-sizing: border-box;
    }

    .tm-defect-fixed-panel textarea {
        min-height: 70px;
        resize: vertical;
    }

.tm-fixed-title {
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 10px;
    color: var(--tm-text-main, #1f2933);
}

.tm-fixed-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 10px 10px;
    align-items: center;
}

.tm-fixed-photos {
    margin-top: 12px;
}

#tm-defects-modal #tm-defect-fixed-photos-wrap {
    width: 100%;
}

#tm-defects-modal #tm-defect-photos-fixed-strip {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    align-content: stretch;
    scrollbar-width: thin;
    scrollbar-color: #9bb7dc #e9f0fb;
}

#tm-defects-modal #tm-defect-photos-fixed-strip.tm-photo-strip-has-scroll {
    min-height: 98px;
    max-height: 98px;
    align-items: flex-start;
    padding-bottom: 14px;
    overflow-x: scroll !important;
    scrollbar-gutter: stable;
}

#tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar {
    height: 12px;
}

#tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar-track {
    background: #e9f0fb;
    border-radius: 999px;
}

#tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar-thumb {
    background: #9bb7dc;
    border-radius: 999px;
    border: 2px solid #e9f0fb;
}

#tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar-thumb:hover {
    background: #7f9fc9;
}
/* right VOR panel — match Fixed details panel */
.tm-defect-vor-wrap {
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    background: var(--tm-bg-card, #fff);
    padding: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

    /* right panels inputs look same as left side */
    .tm-defect-vor-wrap input,
    .tm-defect-vor-wrap select,
    .tm-defect-vor-wrap textarea {
        width: 100%;
        padding: 6px 7px;
        border: 1px solid #c3cfe8;
        border-radius: 2px;
        background: #fff;
        color: var(--tm-text-main, #1f2933);
        outline: none;
        font-size: 12px;
        box-sizing: border-box;
    }

    .tm-defect-vor-wrap textarea {
        min-height: 70px;
        resize: vertical;
    }


/* photos strip */
#tm-defect-photos-reported-strip,
#tm-defect-photos-fixed-strip {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0;
}

/* photo thumb */
#tm-defects-modal .tm-photo {
    position: relative;
    width: 92px;
    height: 62px;
    border: 1px solid #c3cfe8;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

    #tm-defects-modal .tm-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: zoom-in;
    }

#tm-defects-modal .tm-photo-del {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.22);
    background: #d9534f;
    color: #fff;
    border-radius: 0 0 0 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: none;
}

    #tm-defects-modal .tm-photo-del:hover {
        background: #c9302c;
        color: #fff;
    }

    #tm-defects-modal .tm-photo-del:active {
        background: #b52b27;
        color: #fff;
    }

/* defects photo preview */
#tm-defect-photo-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10060;
    padding: 24px 24px 40px 24px;
}

    #tm-defect-photo-preview-backdrop[hidden] {
        display: none !important;
    }

#tm-defect-photo-preview-dialog {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
}

#tm-defect-photo-preview-stage {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 6px;
    cursor: zoom-in;
    user-select: none;
    line-height: 0;
}

    #tm-defect-photo-preview-stage.is-zoomed {
        cursor: grab;
    }

    #tm-defect-photo-preview-stage.is-dragging {
        cursor: grabbing;
    }

    /* The preview opens on the click and fills in after: the thumbnail stands in,
       blurred, under a spinner, so it is obvious the click did something. */
    #tm-defect-photo-preview-stage.is-loading {
        min-width: 220px;
        min-height: 160px;
        background: rgba(17, 24, 39, 0.55);
        cursor: progress;
    }

        #tm-defect-photo-preview-stage.is-loading #tm-defect-photo-preview-image {
            filter: blur(6px);
            opacity: 0.75;
        }

        #tm-defect-photo-preview-stage.is-loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 38px;
            height: 38px;
            margin: -19px 0 0 -19px;
            border: 3px solid rgba(255, 255, 255, 0.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: tm-defect-photo-spin 0.8s linear infinite;
            pointer-events: none;
        }

@keyframes tm-defect-photo-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #tm-defect-photo-preview-stage.is-loading::after {
        animation-duration: 2.4s;
    }
}

#tm-defect-photo-preview-image {
    display: block;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    background: #fff;
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
}

#tm-defect-photo-preview-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 5;
    align-items: center;
}

#tm-defect-photo-preview-download,
#tm-defect-photo-preview-close {
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(20,20,20,0.68);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

#tm-defect-photo-preview-download {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
}

#tm-defect-photo-preview-close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 16px;
    flex: 0 0 30px;
}

    #tm-defect-photo-preview-download:hover,
    #tm-defect-photo-preview-close:hover {
        background: rgba(20,20,20,0.86);
    }




/* actions */
.tm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

/* fixed panel alignment helper */
.tm-fixed-offset {
    margin-top: 10px;
}

/* responsive */
@media (max-width:920px) {
    .tm-defect-modal-layout {
        grid-template-columns: 1fr;
    }

    .tm-inline-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Quick Mark-as-Fixed modal
   ========================================================= */

#tm-qfix-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
    padding: 16px;
}

    #tm-qfix-backdrop .tm-modal {
        background: var(--tm-bg-card, #fff);
        border: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 4px;
        box-shadow: 0 18px 40px rgba(0,0,0,0.25);
        overflow: hidden;
        min-width: 520px;
    }

    #tm-qfix-backdrop .tm-modal-head {
        padding: 10px 14px;
        background: var(--tm-primary, #4682B4);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 13px;
    }

    /* Quick Mark-as-Fixed: fields look like the Edit Defect fixed panel */
    #tm-qfix-backdrop input[type="text"],
    #tm-qfix-backdrop input[type="date"],
    #tm-qfix-backdrop .tm-dateui-text,
    #tm-qfix-backdrop textarea {
        width: 100%;
        padding: 6px 7px;
        border: 1px solid #c3cfe8;
        border-radius: 2px;
        background: #fff;
        color: var(--tm-text-main, #1f2933);
        outline: none;
        font-size: 12px;
        box-sizing: border-box;
    }

    #tm-qfix-backdrop textarea {
        min-height: 70px;
        resize: vertical;
    }

    /* Quick Mark-as-Fixed: thumbnails strip */
    #tm-qfix-backdrop .tm-photo-strip {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    #tm-qfix-backdrop .tm-photo {
        position: relative;
        width: 92px;
        height: 62px;
        border: 1px solid #c3cfe8;
        border-radius: 3px;
        overflow: hidden;
        background: #fff;
    }

        #tm-qfix-backdrop .tm-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    /* =========================================================
   FILE INPUT: hide "No file chosen" everywhere inside qfix modal
   ========================================================= */

    #tm-qfix-backdrop input[type="file"] {
        font-size: 0 !important; /* hides filename text */
        color: transparent !important;
    }

        /* Chromium / Edge */
        #tm-qfix-backdrop input[type="file"]::file-selector-button {
            font-size: 12px !important;
            padding: 6px 10px !important;
            border: 1px solid #c3cfe8 !important;
            background: #fff !important;
            color: var(--tm-text-main, #1f2933) !important;
            border-radius: 2px !important;
            cursor: pointer !important;
            margin-right: 10px !important;
        }

            #tm-qfix-backdrop input[type="file"]::file-selector-button:hover {
                background: rgba(70,130,180,0.08) !important;
            }

        /* Safari / old WebKit */
        #tm-qfix-backdrop input[type="file"]::-webkit-file-upload-button {
            font-size: 12px !important;
            padding: 6px 10px !important;
            border: 1px solid #c3cfe8 !important;
            background: #fff !important;
            color: var(--tm-text-main, #1f2933) !important;
            border-radius: 2px !important;
            cursor: pointer !important;
            margin-right: 10px !important;
        }

            #tm-qfix-backdrop input[type="file"]::-webkit-file-upload-button:hover {
                background: rgba(70,130,180,0.08) !important;
            }

    /* Optional: if you use custom label button (.tm-filebtn) */
    #tm-qfix-backdrop .tm-filebtn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #c3cfe8;
        background: #fff;
        color: var(--tm-text-main, #1f2933);
        border-radius: 2px;
        padding: 6px 10px;
        cursor: pointer;
        font-size: 12px;
        user-select: none;
    }

        #tm-qfix-backdrop .tm-filebtn:hover {
            background: rgba(70,130,180,0.08);
        }

    #tm-qfix-backdrop .tm-filecount {
        font-size: 12px;
        color: var(--tm-text-muted, #5b657a);
    }

    /* =========================================================
   Quick Mark-as-Fixed modal file button = TM style
   ========================================================= */

    #tm-qfix-backdrop input[type="file"] {
        width: auto !important;
        max-width: 220px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        font-size: 0 !important;
        color: transparent !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

        #tm-qfix-backdrop input[type="file"]::file-selector-button {
            appearance: none !important;
            -webkit-appearance: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 6px 12px !important;
            border: 1px solid var(--tm-primary-dark, #225ca2) !important;
            border-radius: 3px !important;
            background: var(--tm-primary, #4682B4) !important;
            color: #fff !important;
            font-family: inherit !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            line-height: 1.2 !important;
            cursor: pointer !important;
            box-shadow: none !important;
            transition: background .15s ease, border-color .15s ease, transform .05s ease !important;
        }

            #tm-qfix-backdrop input[type="file"]::file-selector-button:hover {
                background: #3a709c !important;
                border-color: var(--tm-primary-dark, #225ca2) !important;
            }

            #tm-qfix-backdrop input[type="file"]::file-selector-button:active {
                transform: translateY(1px) !important;
            }

        #tm-qfix-backdrop input[type="file"]::-webkit-file-upload-button {
            appearance: none !important;
            -webkit-appearance: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            padding: 6px 12px !important;
            border: 1px solid var(--tm-primary-dark, #225ca2) !important;
            border-radius: 3px !important;
            background: var(--tm-primary, #4682B4) !important;
            color: #fff !important;
            font-family: inherit !important;
            font-size: 12px !important;
            font-weight: 600 !important;
            line-height: 1.2 !important;
            cursor: pointer !important;
            box-shadow: none !important;
            transition: background .15s ease, border-color .15s ease, transform .05s ease !important;
        }

            #tm-qfix-backdrop input[type="file"]::-webkit-file-upload-button:hover {
                background: #3a709c !important;
                border-color: var(--tm-primary-dark, #225ca2) !important;
            }

            #tm-qfix-backdrop input[type="file"]::-webkit-file-upload-button:active {
                transform: translateY(1px) !important;
            }

    /* qfix thumbnails */
    #tm-qfix-backdrop .tm-photo-strip {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    #tm-qfix-backdrop .tm-photo {
        position: relative;
        width: 92px;
        height: 62px;
        border: 1px solid #c3cfe8;
        border-radius: 3px;
        overflow: hidden;
        background: #fff;
    }

        #tm-qfix-backdrop .tm-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    #tm-qfix-backdrop .tm-photo-del {
        position: absolute;
        top: 0 !important;
        right: 0 !important;
        width: 22px;
        height: 22px;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 0 0 3px !important;
        background: #d9534f !important;
        color: #fff !important;
        cursor: pointer;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3;
    }

        #tm-qfix-backdrop .tm-photo-del:hover {
            background: #c9302c !important;
        }


/* =========================================================
   Edit Defect modal – FORCE hide "No file chosen"
   (NO ::file-selector-text because it's not valid)
   ========================================================= */

#tm-defects-modal input[type="file"] {
    font-size: 0 !important; /* hide filename text */
    color: transparent !important;
    max-width: 160px; /* keep compact so text won't appear */
    overflow: hidden;
    white-space: nowrap;
}

    /* Chromium / Edge */
    #tm-defects-modal input[type="file"]::file-selector-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border: 1px solid #c3cfe8 !important;
        background: #fff !important;
        color: var(--tm-text-main, #1f2933) !important;
        border-radius: 2px !important;
        cursor: pointer !important;
        margin-right: 0 !important;
    }

        #tm-defects-modal input[type="file"]::file-selector-button:hover {
            background: rgba(70,130,180,0.08) !important;
        }

    /* Safari / old WebKit */
    #tm-defects-modal input[type="file"]::-webkit-file-upload-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border: 1px solid #c3cfe8 !important;
        background: #fff !important;
        color: var(--tm-text-main, #1f2933) !important;
        border-radius: 2px !important;
        cursor: pointer !important;
        margin-right: 0 !important;
    }

        #tm-defects-modal input[type="file"]::-webkit-file-upload-button:hover {
            background: rgba(70,130,180,0.08) !important;
        }




/* =========================================================
   GLOBAL MODAL CLOSE (X) — ONE STYLE FOR ALL MODALS
   ========================================================= */

.tm-modal-head {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

    .tm-modal-head .tm-x:not(.tm-print-icon-btn),
    .tm-modal-head .tm-modal-close,
    .tm-modal-head button[id$="-close"],
    .tm-modal-head button[id$="-Close"],
    .tm-modal-head button[id$="-x"],
    .tm-modal-head button[id$="-X"],
    .tm-modal-head a[id$="-close"],
    .tm-modal-head a[id$="-Close"],
    .tm-modal-head a[id$="-x"],
    .tm-modal-head a[id$="-X"] {
        appearance: none !important;
        -webkit-appearance: none !important;
        width: 34px !important;
        height: 28px !important;
        min-width: 34px !important;
        min-height: 28px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        padding: 0 !important;
        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        border-radius: 3px !important;
        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 0 !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-indent: 0 !important;
        overflow: visible !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease !important;
    }

    .tm-modal-head .tm-x:not(.tm-print-icon-btn)::before,
    .tm-modal-head .tm-modal-close::before,
    .tm-modal-head button[id$="-close"]::before,
    .tm-modal-head button[id$="-Close"]::before,
    .tm-modal-head button[id$="-x"]::before,
    .tm-modal-head button[id$="-X"]::before,
    .tm-modal-head a[id$="-close"]::before,
    .tm-modal-head a[id$="-Close"]::before,
    .tm-modal-head a[id$="-x"]::before,
    .tm-modal-head a[id$="-X"]::before {
        content: "\2715" !important;
        display: block !important;
        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

        .tm-modal-head .tm-x:not(.tm-print-icon-btn):hover,
        .tm-modal-head .tm-modal-close:hover,
        .tm-modal-head button[id$="-close"]:hover,
        .tm-modal-head button[id$="-Close"]:hover,
        .tm-modal-head button[id$="-x"]:hover,
        .tm-modal-head button[id$="-X"]:hover,
        .tm-modal-head a[id$="-close"]:hover,
        .tm-modal-head a[id$="-Close"]:hover,
        .tm-modal-head a[id$="-x"]:hover,
        .tm-modal-head a[id$="-X"]:hover {
            background: rgba(255, 255, 255, 0.15) !important;
            border-color: rgba(255, 255, 255, 0.75) !important;
            color: #ffffff !important;
        }

        .tm-modal-head .tm-x:not(.tm-print-icon-btn):active,
        .tm-modal-head .tm-modal-close:active,
        .tm-modal-head button[id$="-close"]:active,
        .tm-modal-head button[id$="-Close"]:active,
        .tm-modal-head button[id$="-x"]:active,
        .tm-modal-head button[id$="-X"]:active,
        .tm-modal-head a[id$="-close"]:active,
        .tm-modal-head a[id$="-Close"]:active,
        .tm-modal-head a[id$="-x"]:active,
        .tm-modal-head a[id$="-X"]:active {
            transform: translateY(1px) !important;
        }

/* =========================================================
   Vehicle Defects (BIG modal) – checkbox bar align + file input no frame
   ========================================================= */

/* 1) VOR + Mark as fixed – perkelti i dešine puse (kaip input'ai) */
#tm-defects-modal .tm-defects-checkboxbar {
    grid-column: 2 / -1; /* sulygiuojam su input kolona */
    display: flex;
    justify-content: flex-end; /* ?? i dešine */
    align-items: center;
    gap: 26px;
    margin: 0;
    padding: 0;
}

    #tm-defects-modal .tm-defects-checkboxbar .tm-checkline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        margin: 0;
    }

        #tm-defects-modal .tm-defects-checkboxbar .tm-checkline input {
            margin: 0;
        }

        /* "Make visible in Driver App" – i kaire puse, Mark as fixed lieka dešineje */
        #tm-defects-modal .tm-defects-checkboxbar .tm-defect-visible-checkline {
            margin-right: auto;
        }

/* 2) File input – nuimti remeli (nes global input stilius uždeda border + width:100%) */
#tm-defects-modal input[type="file"] {
    width: auto !important;
    max-width: 180px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important; /* paslepia "No file chosen" teksta */
    color: transparent !important;
}

    /* Chromium / Edge */
    #tm-defects-modal input[type="file"]::file-selector-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border: 1px solid #c3cfe8 !important;
        background: #fff !important;
        color: var(--tm-text-main, #1f2933) !important;
        border-radius: 2px !important;
        cursor: pointer !important;
        margin-right: 0 !important;
    }

        #tm-defects-modal input[type="file"]::file-selector-button:hover {
            background: rgba(70,130,180,0.08) !important;
        }

    /* Safari / old WebKit */
    #tm-defects-modal input[type="file"]::-webkit-file-upload-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border: 1px solid #c3cfe8 !important;
        background: #fff !important;
        color: var(--tm-text-main, #1f2933) !important;
        border-radius: 2px !important;
        cursor: pointer !important;
        margin-right: 0 !important;
    }

        #tm-defects-modal input[type="file"]::-webkit-file-upload-button:hover {
            background: rgba(70,130,180,0.08) !important;
        }
/* ===== TABLE COLUMN RESIZER ===== */
.tm-table thead th {
    position: relative;
}

.tm-col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 3;
}

    .tm-col-resizer::after {
        content: "";
        position: absolute;
        right: 4px;
        top: 20%;
        width: 1px;
        height: 60%;
        background: rgba(34, 92, 162, 0.35);
        border-radius: 1px;
    }

.tm-table thead th:hover .tm-col-resizer::after {
    background: rgba(34, 92, 162, 0.65);
}
/* ===== COLUMNS MODAL ===== */
.tm-columns-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.tm-col-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--tm-border-soft);
    border-radius: 3px;
    background: #fff;
    font-size: 12px;
}
/* === FIX: Companies header EXACT like Defects === */
.tm-column-header {
    background: var(--tm-primary) !important;
    color: var(--tm-on-primary) !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--tm-border-soft);
}

.tm-column-title {
    font-weight: 700;
    font-size: 13px;
}
/* =========================
   Highlight THIS WEEK tasks (Upcoming) - softer
   ========================= */

.tm-upcoming-this-week {
    border: 1px solid rgba(70, 130, 180, 0.45); /* tm-primary, soft */
    border-radius: 3px;
    padding: 2px 2px;
    margin: 3px 2px 6px 2px;
    background: rgba(70, 130, 180, 0.04); /* vos vos */
}

/* =========================================================
   Smooth underline follower for task lists (mouse lag)
   ========================================================= */

.tm-list.tm-uline-host {
    position: relative; /* kad underline galetu buti absolute viduje */
}

/* pats brukšniukas */
.tm-uline {
    z-index: 9999 !important;
    position: absolute;
    left: 6px;
    right: 6px;
    top: 0;
    height: 10px; /* ? storesnis, kad tikrai matytusi */
    border-radius: 999px;
    background: rgba(70, 130, 180, 0.95);
    opacity: 0;
    pointer-events: none;
    z-index: 50; /* ? virš itemu */
    transform: translateY(0);
    transition: opacity 120ms ease;
}


/* rodom tik kai listas aktyvus */
.tm-list.tm-uline-host.tm-uline-on .tm-uline {
    opacity: 1;
}

.tm-uline {
    will-change: transform;
}


/* =========================================================
   HARD disable any row background highlight
   ========================================================= */

/* normal */
.tm-list-item {
    background: transparent !important;
}

    /* hover */
    .tm-list-item:hover {
        background: transparent !important;
    }

    /* active / focus / selected */
    .tm-list-item:active,
    .tm-list-item:focus,
    .tm-list-item:focus-visible {
        background: transparent !important;
        outline: none !important;
    }

    /* just in case something sets inline bg */
    .tm-list-item[style*="background"] {
        background: transparent !important;
    }
/* =========================================================
   Fix search clear X ONLY for app page (Past / Upcoming)
   ========================================================= */

/* daugiau vietos input viduje – TIK šitiems search */
#tm-past-search.tm-search,
#tm-upcoming-search.tm-search {
    padding-right: 36px;
}

/* perstumiam X – TIK šitu input wrapperiuose */
#tm-past-search + .tm-search-clear,
#tm-upcoming-search + .tm-search-clear {
    right: 10px;
}
/* =========================================================
   Defects modal: show validation message near Save button
   ========================================================= */

/* hide old top message (we use save-area message now) */
#tm-defects-modal #tm-defects-modal-msg {
    display: none !important;
}

/* red message next to Save */
#tm-defects-modal .tm-defects-save-msg {
    color: #c62828;
    font-weight: 800;
    font-size: 12px;
    line-height: 1;
    padding: 2px 0;
}
/* =========================================================
   Planner (app.html) Past/Upcoming lists — VERY subtle hover
   (override only these lists, keep other pages unchanged)
   ========================================================= */
#tm-past-list .tm-list-item,
#tm-upcoming-list .tm-list-item {
    transition: background-color 0.12s ease;
}

    #tm-past-list .tm-list-item:hover,
    #tm-upcoming-list .tm-list-item:hover {
        background-color: rgba(70,130,180,0.06) !important; /* vos vos matomas */
    }
    /* =========================================================
   Planner (app.html) Past/Upcoming — selected row
   ========================================================= */
    #tm-past-list .tm-list-item.selected,
    #tm-upcoming-list .tm-list-item.selected {
        background-color: rgba(70,130,180,0.14) !important;
        outline: 1px solid rgba(70,130,180,0.35);
    }

#tm-inv-tbody tr.tm-selected {
    background: rgba(70,130,180,.22);
}

#tm-task-backdrop .tm-rem-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

    #tm-task-backdrop .tm-rem-row .tm-rem-check {
        display: inline-flex;
        gap: 8px;
        align-items: center;
        font-weight: 600;
        font-size: 12px;
        color: var(--tm-text-main, #1f2933);
        white-space: nowrap;
    }

    #tm-task-backdrop .tm-rem-row input[type="checkbox"] {
        width: auto;
        transform: translateY(1px);
    }

    #tm-task-backdrop .tm-rem-row select,
    #tm-task-backdrop .tm-rem-row input[type="time"] {
        flex: 1;
    }
/* Reminder row – compact size */
.tm-rem-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* Common sizing – NO tricks */
    .tm-rem-row select#tm-task-rem-before,
    .tm-rem-row input#tm-task-rem-days,
    .tm-rem-row input#tm-task-rem-time {
        box-sizing: border-box;
        height: 30px;
        line-height: 28px;
        font-size: 13px;
    }

    /* Dropdown */
    .tm-rem-row select#tm-task-rem-before {
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }

    /* Days input – PURE native spinner */
    .tm-rem-row input#tm-task-rem-days {
        width: 64px; /* ?? tik tiek kiek reikia */
        min-width: 64px;
        max-width: 64px;
        padding: 0 6px; /* ?? NIEKO specialaus */
        text-align: center; /* ?? kaip buvo */
    }

    /* Time input */
    .tm-rem-row input#tm-task-rem-time {
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        padding: 0 6px;
        text-align: center;
    }

/* =========================================================
   Tachograph modals (batch detail, infringement edit, mileage edit, match)
   ========================================================= */

#tm-tacho-batch-detail-backdrop,
#tm-tacho-devices-backdrop,
#tm-infr-detail-backdrop,
#tm-infr-signed-backdrop,
#tm-tacho-mileage-edit-backdrop,
#tm-tacho-match-backdrop,
#tm-tacho-browse-backdrop,
#tm-tacho-settings-backdrop,
#tm-tacho-audit-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10020;
    padding: 16px;
}

    #tm-tacho-batch-detail-backdrop .tm-modal,
    #tm-tacho-devices-backdrop .tm-modal,
    #tm-infr-detail-backdrop .tm-modal,
    #tm-infr-signed-backdrop .tm-modal,
    #tm-tacho-mileage-edit-backdrop .tm-modal,
    #tm-tacho-browse-backdrop .tm-modal,
    #tm-tacho-settings-backdrop .tm-modal,
    #tm-tacho-audit-backdrop .tm-modal,
    #tm-tacho-match-backdrop .tm-modal {
        background: var(--tm-bg-card, #fff);
        border: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 4px;
        box-shadow: 0 18px 40px rgba(0,0,0,0.25);
        min-width: 420px;
        max-width: 90vw;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #tm-tacho-batch-detail-backdrop .tm-modal-head,
    #tm-tacho-devices-backdrop .tm-modal-head,
    #tm-infr-detail-backdrop .tm-modal-head,
    #tm-infr-signed-backdrop .tm-modal-head,
    #tm-tacho-mileage-edit-backdrop .tm-modal-head,
    #tm-tacho-browse-backdrop .tm-modal-head,
    #tm-tacho-settings-backdrop .tm-modal-head,
    #tm-tacho-audit-backdrop .tm-modal-head,
    #tm-tacho-match-backdrop .tm-modal-head {
        padding: 10px 14px;
        background: var(--tm-primary, #4682B4);
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 13px;
        flex: 0 0 auto;
    }

    #tm-tacho-batch-detail-backdrop .tm-modal-body,
    #tm-tacho-devices-backdrop .tm-modal-body,
    #tm-infr-detail-backdrop .tm-modal-body,
    #tm-infr-signed-backdrop .tm-modal-body,
    #tm-tacho-mileage-edit-backdrop .tm-modal-body,
    #tm-tacho-browse-backdrop .tm-modal-body,
    #tm-tacho-settings-backdrop .tm-modal-body,
    #tm-tacho-audit-backdrop .tm-modal-body,
    #tm-tacho-match-backdrop .tm-modal-body {
        padding: 14px 16px 16px 16px;
        overflow-y: auto;
    }

    /* ===== Shared settings modal layout (Tachograph settings, Driver App Settings) =====
       Company list on the left picks which set is edited (the defaults, or one company's
       own); the form on the right is one compact list of label + control rows, sized to
       fit the window without scrolling. Controls are the app's plain select / checkbox. */
    .tm-set {
        --tms-line: rgba(15,23,42,.10);
        --tms-blue-ink: var(--tm-primary, #4682B4);
        --tms-amber-ink: #8a5a00;
        --tms-amber-bg: rgba(217,138,24,.14);
        color: var(--tm-text-main, #1f2933);
    }

    html.tm-dark .tm-set {
        --tms-line: rgba(255,255,255,.12);
        --tms-blue-ink: #b9d5f1;
        --tms-amber-ink: #f0b45a;
        --tms-amber-bg: rgba(240,160,40,.18);
    }

    .tm-set-layout {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 18px;
    }

    .tm-set-layout.no-side { grid-template-columns: minmax(0, 1fr); }

    /* --- Company list: the app's own side-list rows (.tm-sidepanel-item) --- */
    .tm-set-side { min-width: 0; }
    .tm-set-side[hidden] { display: none; }

    /* Same look as the page company lists (e.g. Vehicle defects .tm-company-list): light-blue
       list, square rows with a hairline between them, selected row filled with --tm-primary. */
    .tm-set-list {
        display: flex;
        flex-direction: column;
        padding: 0;
        background: rgba(70,130,180,0.06);
        border: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 2px;
        overflow: hidden;
    }

    .tm-set-list .tm-sidepanel-item.tm-set-item {
        display: block;
        margin: 0;
        padding: 5px 7px;
        font-size: 12.5px;
        font-weight: 400;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(201,211,230,0.55);
        border-radius: 0;
    }

    .tm-set-list .tm-sidepanel-item.tm-set-item:last-child { border-bottom: 0; }

    .tm-set-list .tm-sidepanel-item.tm-set-item:hover {
        background: rgba(70,130,180,0.10);
    }

    .tm-set-list .tm-sidepanel-item.tm-set-item.active,
    .tm-set-list .tm-sidepanel-item.tm-set-item[aria-selected="true"] {
        background: var(--tm-primary);
        color: #ffffff !important;
        font-weight: 400;
    }

    /* Page/modal text rules colour the name span too - keep it white on the blue row. */
    .tm-set-list .tm-sidepanel-item.tm-set-item.active .tm-set-item-name,
    .tm-set-list .tm-sidepanel-item.tm-set-item[aria-selected="true"] .tm-set-item-name {
        color: #ffffff !important;
    }

    /* A company on its own settings (Driver App settings): sliders mark at the row's end. */
    .tm-set-list .tm-sidepanel-item.tm-set-item.has-own {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tm-set-list .tm-set-item.has-own .tm-set-item-name {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* !important for the same reason as the name span: modal text rules colour every span. */
    .tm-set-list .tm-set-item-own {
        flex: 0 0 auto;
        display: inline-flex;
        color: var(--tm-primary) !important;
    }

    .tm-set-list .tm-set-item-own svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .tm-set-list .tm-set-item.active .tm-set-item-own,
    .tm-set-list .tm-set-item[aria-selected="true"] .tm-set-item-own {
        color: #ffffff !important;
    }

    .tm-set-list .tm-sidepanel-item.tm-set-item:focus-visible {
        outline: 2px solid var(--tm-primary);
        outline-offset: -2px;
    }

    /* --- Form --- */
    .tm-set-main { min-width: 0; }

    .tm-set-head {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 0 0 8px;
        border-bottom: 1px solid var(--tms-line);
    }

    .tm-set-head-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tm-set-head h2 {
        margin: 0 0 3px;
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tm-set .tm-set-head-sub {
        font-size: 12px !important;
        color: var(--tm-text-muted, #5b657a) !important;
    }

    .tm-set-head-sub:empty { display: none; }

    .tm-set-maint {
        flex: 0 0 auto;
        display: grid;
        justify-items: end;
        gap: 4px;
        max-width: 320px;
    }


    .tm-set .tm-set-result {
        font-size: 11.5px !important;
        font-weight: 600;
        text-align: right;
        color: var(--tm-text-muted, #5b657a) !important;
    }

    .tm-set-result:empty { display: none; }

    .tm-set .tm-set-readonly {
        margin-top: 8px;
        padding: 6px 10px;
        border-radius: 3px;
        background: var(--tms-amber-bg);
        color: var(--tms-amber-ink) !important;
        font-size: 12px !important;
        font-weight: 600;
    }

    .tm-set-readonly[hidden] { display: none; }

    .tm-set-section {
        padding: 10px 0 4px;
    }

    .tm-set-section + .tm-set-section {
        border-top: 1px solid var(--tms-line);
    }

    .tm-set-section h3 {
        margin: 0 0 2px;
        font-size: 11.5px !important;
        font-weight: 700;
        letter-spacing: .06em;
        line-height: 1.4;
        text-transform: uppercase;
        color: var(--tms-blue-ink) !important;
    }

    .tm-set-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 0;
    }

    .tm-set-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tm-set .tm-set-title {
        display: block;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35;
    }

    .tm-set .tm-set-desc {
        margin-top: 1px;
        font-size: 12px !important;
        line-height: 1.4;
        color: var(--tm-text-muted, #5b657a) !important;
    }

    .tm-set-select {
        flex: 0 0 auto;
        width: 220px;
    }

    .tm-set-check {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        /* lines up with the left edge of the select column */
        margin: 0 204px 0 0;
        accent-color: var(--tm-primary, #4682B4);
        cursor: pointer;
    }

    .tm-set-number {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        width: 220px;
    }

    .tm-set .tm-set-unit {
        font-size: 12px !important;
        color: var(--tm-text-muted, #5b657a) !important;
    }

    /* Footer sits under the body, like the other app modals. */
    .tm-set-footer {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border-top: 1px solid var(--tm-border-soft, #c9d3e6);
        background: var(--tm-bg-card, #fff);
    }

    .tm-set-footer-gap { flex: 1 1 auto; }

    @media (max-width: 760px) {
        .tm-set-layout { grid-template-columns: minmax(0, 1fr); }
        .tm-set-head { flex-wrap: wrap; }
        .tm-set-maint { justify-items: start; }
        .tm-set-row { flex-wrap: wrap; }
        .tm-set-select, .tm-set-number { width: 100%; }
        .tm-set-check { margin: 0; }
    }


/* =========================================================
   Reports (Export) modal — same size/style as Filter modal
   ========================================================= */

/* ? make all backdrops truly hidden */
.tm-backdrop[hidden] {
    display: none !important;
}

#tm-reports-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35); /* like filter */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10030;
    padding: 16px;
}

body.tm-notifications-modal-open #tm-reports-backdrop,
#tm-reports-backdrop.tm-export-range-on-top {
    z-index: 2147483000 !important;
}

    #tm-reports-backdrop .tm-reports-modal {
        width: min(520px, 100%); /* ? same as filter */
        background: var(--tm-bg-card, #ffffff);
        border: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 3px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.12);
        overflow: hidden;
    }

    #tm-reports-backdrop .tm-modal-head {
        padding: 10px 12px;
        background: var(--tm-primary, #4682B4);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 13px; /* ? same */
    }

    #tm-reports-backdrop .tm-x {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.35);
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        line-height: 1;
        padding: 4px 8px;
        border-radius: 3px;
    }

    #tm-reports-backdrop .tm-modal-body.tm-reports-body {
        padding: 16px 16px 18px 16px; /* ? same */
    }

    /* Company row */
    #tm-reports-backdrop .tm-reports-row {
        display: grid;
        grid-template-columns: 120px 1fr; /* ? like filter labels */
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
    }

    #tm-reports-backdrop .tm-reports-label,
    #tm-reports-backdrop .tm-reports-label2 {
        font-weight: 600;
        font-size: 12px;
        color: var(--tm-text-main, #1f2933);
    }

    /* selects & inputs */
    #tm-reports-backdrop select.tm-input,
    #tm-reports-backdrop input.tm-input {
        width: 100%;
        padding: 6px 7px;
        border: 1px solid #c3cfe8;
        border-radius: 2px;
        background: #fff;
        color: var(--tm-text-main, #1f2933);
        outline: none;
        font-size: 12px;
    }

    /* radios */
    #tm-reports-backdrop .tm-reports-period {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 22px;
        margin: 6px 0 12px 0;
    }

    #tm-reports-backdrop .tm-reports-radio {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 12px;
        font-weight: 600;
        color: var(--tm-text-main, #1f2933);
        cursor: pointer;
    }

        #tm-reports-backdrop .tm-reports-radio input {
            transform: scale(1.03);
        }

    /* dates grid (same density as filter) */
    #tm-reports-backdrop .tm-reports-dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px 12px;
        align-items: center;
        margin-top: 2px;
    }

    #tm-reports-backdrop .tm-reports-date {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 12px;
        align-items: center;
    }

    /* actions */
    #tm-reports-backdrop .tm-reports-actions {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 14px;
    }

        /* ? Reports modal buttons — same height as Filter modal */
        #tm-reports-backdrop .tm-reports-actions .tm-btn,
        #tm-reports-backdrop .tm-reports-actions .tm-btn-secondary {
            min-width: 160px !important;
            height: 30px !important; /* ?? buvo per aukšti */
            padding: 6px 14px !important; /* ?? mažiau vertikalios erdves */
            font-size: 12px !important;
            font-weight: 700 !important;
            border-radius: 3px !important;
            line-height: 1 !important;
        }

    #tm-reports-backdrop .tm-reports-loading {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        font-size: 12px;
        color: var(--tm-text-muted, #566b8a);
    }

    #tm-reports-backdrop .tm-reports-spinner {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 2px solid rgba(70,130,180,0.25);
        border-top-color: rgba(70,130,180,0.95);
        animation: tmSpin 0.9s linear infinite;
    }

@keyframes tmSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 560px) {
    #tm-reports-backdrop .tm-reports-row,
    #tm-reports-backdrop .tm-reports-date {
        grid-template-columns: 1fr;
    }

    #tm-reports-backdrop .tm-reports-dates {
        grid-template-columns: 1fr;
    }
}
/* ? Reports: prevent date inputs from overflowing */
#tm-reports-backdrop .tm-reports-dates {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#tm-reports-backdrop .tm-reports-date {
    min-width: 0; /* allow shrink */
}

    #tm-reports-backdrop .tm-reports-date input.tm-input,
    #tm-reports-backdrop .tm-reports-date select.tm-input {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

/* safer grid so label+input always fits */
#tm-reports-backdrop .tm-reports-date {
    grid-template-columns: 80px 1fr !important;
}

/* if still tight on some widths */
@media (max-width: 540px) {
    #tm-reports-backdrop .tm-reports-dates {
        grid-template-columns: 1fr !important;
    }
}
/* ? Reports date placeholder lighter (dd/mm/yyyy) */
#tm-reports-backdrop input[type="date"]::placeholder {
    color: rgba(40, 55, 80, 0.35);
}

/* Chrome/Edge date placeholder is rendered inside control -> use disabled/empty styling */
#tm-reports-backdrop input[type="date"]:disabled {
    background: #f2f5fb;
    color: rgba(40, 55, 80, 0.55);
}

#tm-reports-backdrop input[type="date"]:disabled {
    background: #f2f5fb;
    color: rgba(40, 55, 80, 0.55);
    opacity: 0.85;
}
/* ? Reports modal: a bit taller + better spacing */
#tm-reports-backdrop .tm-modal-body.tm-reports-body {
    padding-top: 18px !important;
    padding-bottom: 22px !important;
}

/* More vertical breathing room between rows */
#tm-reports-backdrop .tm-reports-row {
    margin-bottom: 16px !important;
}

#tm-reports-backdrop .tm-reports-period {
    margin: 10px 0 16px 0 !important;
}

/* ? From/To labels closer to inputs */
#tm-reports-backdrop .tm-reports-dates {
    gap: 10px 16px !important;
    margin-top: 2px !important;
}

#tm-reports-backdrop .tm-reports-date {
    gap: 6px !important; /* label closer */
    grid-template-columns: 70px 1fr !important; /* label narrower */
}

/* Also make the "From:" / "To:" labels not too wide */
#tm-reports-backdrop .tm-reports-label2 {
    padding-right: 0 !important;
}

/* Buttons a little lower */
#tm-reports-backdrop .tm-reports-actions {
    margin-top: 18px !important;
}
/* =========================================================
   Reports modal — layout refinement (wider spacing, taller)
   ========================================================= */

/* Make modal a bit taller visually */
#tm-reports-backdrop .tm-reports-modal {
    padding-bottom: 6px;
}

/* More air inside modal */
#tm-reports-backdrop .tm-reports-body {
    padding: 22px 22px 26px 22px !important;
}

/* ======================
   Company row
   ====================== */

/* Narrower company dropdown (not full width) */
#tm-reports-backdrop .tm-reports-row {
    grid-template-columns: 110px 320px !important; /* label + narrower field */
    margin-bottom: 20px !important;
}

/* ======================
   Period radios
   ====================== */

#tm-reports-backdrop .tm-reports-period {
    margin-bottom: 22px !important;
}

/* ======================
   Dates row
   ====================== */

/* Dates container: more space vertically */
#tm-reports-backdrop .tm-reports-dates {
    margin-bottom: 22px !important;
}

/* Shift "To" date slightly left */
#tm-reports-backdrop .tm-reports-dates {
    grid-template-columns: 1fr 0.9fr !important; /* ?? second column narrower */
    column-gap: 16px !important;
}

/* Date blocks spacing */
#tm-reports-backdrop .tm-reports-date {
    grid-template-columns: 80px 1fr !important; /* label closer */
    gap: 8px !important;
}

/* ======================
   Buttons
   ====================== */

/* Push buttons lower for balance */
#tm-reports-backdrop .tm-reports-actions {
    margin-top: 24px !important;
}

    /* Keep buttons compact */
    #tm-reports-backdrop .tm-reports-actions .tm-btn,
    #tm-reports-backdrop .tm-reports-actions .tm-btn-secondary {
        height: 32px !important;
        padding: 5px 14px !important;
        min-width: 150px !important;
    }
/* =========================================================
   Reports modal — limit "To" date width to company width
   ========================================================= */

/* Company dropdown width reference */
#tm-reports-backdrop .tm-reports-row select.tm-input {
    max-width: 360px;
}

/* Make BOTH date inputs not wider than company */
#tm-reports-backdrop .tm-reports-date input.tm-input {
    max-width: 360px;
}
/* =========================================================
   Reports modal — final date alignment (move left cleanly)
   ========================================================= */

/* Dates row: do NOT stretch across modal */
#tm-reports-backdrop .tm-reports-dates {
    grid-template-columns: 360px 360px !important; /* same width as Company */
    justify-content: start !important; /* push whole block left */
    column-gap: 24px !important;
}

/* Each date row uses same internal layout */
#tm-reports-backdrop .tm-reports-date {
    grid-template-columns: 80px 1fr !important;
}

    /* Ensure inputs don’t stretch */
    #tm-reports-backdrop .tm-reports-date input.tm-input {
        width: 100%;
        max-width: 100%;
    }
/* =========================================================
   Reports modal — dates in one compact left-aligned row
   ========================================================= */

/* Replace grid with flex for dates row */
#tm-reports-backdrop .tm-reports-dates {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center;
    gap: 24px !important; /* space between From and To */
}

/* Each date block */
#tm-reports-backdrop .tm-reports-date {
    display: flex !important;
    align-items: center;
    gap: 8px !important; /* label ? input */
}

    /* Fixed, desktop-like widths */
    #tm-reports-backdrop .tm-reports-date input.tm-input {
        width: 200px !important; /* ?? kontroliuojamas plotis */
    }

/* Labels stay compact */
#tm-reports-backdrop .tm-reports-label2 {
    min-width: 48px; /* "From:" / "To:" */
}
/* =========================================================
   ENABLE row highlight for manual task highlights (Past/Upcoming)
   (overrides HARD disable)
   ========================================================= */
#tm-past-list .tm-list-item.tm-highlight-row,
#tm-upcoming-list .tm-list-item.tm-highlight-row {
    background-color: rgba(70,130,180,0.12) !important;
    font-weight: 800 !important;
}

.tm-backdrop[hidden] {
    display: none !important;
}
/* ======================================================
   GLOBAL TYPOGRAPHY — FORCE IDENTICAL EVERYWHERE
   ====================================================== */

/* LEFT LISTS (companies, filters, side panels) */
.tm-company-list,
.tm-company-list .tm-sidepanel-item,
.tm-company-list .tm-list-item {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400; /* ?? vienodas, NE bold */
}

    /* active row should NOT change font weight */
    .tm-company-list .active,
    .tm-company-list .tm-selected {
        font-weight: 400 !important;
    }

/* TABLE HEADERS */
.tm-table thead th {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: 800; /* ?? stiprus, bet vienodas */
}

/* TABLE BODY */
.tm-table tbody td {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400; /* ?? vienodas visur */
}

/* BUTTONS (kad ir jie nesvyruotu) */
.tm-btn {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
}
/* ======================================================
   TOPBAR (STATIC CSS) — prevent any style flash (FOUC)
   ====================================================== */
:root {
    --tm-topbar-h: 34px;
    /* susiaurintas, kad i ta pacia eilute tilptu pilnas logotipas su uzrasu */
    --tm-topbar-gap: 6px;
    /* tavo melynos */
    --tm-topbar-blue: #2f6fa6;
    --tm-topbar-blue-strong: #1f5f96;
    --tm-topbar-bg: #ffffff;
    --tm-topbar-hover: rgba(47,111,166,.12);
}

/* TOPBAR always visible, no flash */
header.tm-topbar[data-tm-topbar] {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 200000;
    box-sizing: border-box;
    height: auto !important;
    min-height: 52px;
    padding: 8px 10px !important;
    margin: 0 !important;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: var(--tm-topbar-bg);
    border-bottom: 1px solid rgba(0,0,0,.15);
}

    header.tm-topbar[data-tm-topbar] .tm-top-actions {
        order: 1;
        display: flex;
        align-items: flex-end;
        gap: var(--tm-topbar-gap);
        flex-wrap: nowrap;
        flex: 1 1 0;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    header.tm-topbar[data-tm-topbar] .tm-top-actions::-webkit-scrollbar {
        height: 6px;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-right {
        order: 2;
        display: flex;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
        flex-shrink: 0;
    }

.tm-trial-banner {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 199900;
    width: min(291px, calc(100vw - 24px));
    padding: 9px;
    border: 1px solid #d6a600;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff08a 0%, #ffd400 100%);
    color: #08213f;
    box-shadow: 0 7px 24px rgba(103, 63, 0, 0.28);
    font-size: 11px;
    line-height: 1.15;
    animation: tm-trial-banner-in 0.28s ease-out both;
}

.tm-trial-banner[hidden] {
    display: none !important;
}

.tm-trial-banner-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px 9px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.tm-trial-banner-link:hover .tm-trial-banner-cta {
    background: #174d89;
}

.tm-trial-banner-link:focus-visible {
    outline: 2px solid #225ca2;
    outline-offset: 3px;
    border-radius: 4px;
}

.tm-trial-banner-close {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #08213f;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
}

.tm-trial-banner-close::before,
.tm-trial-banner-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
}

.tm-trial-banner-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.tm-trial-banner-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.tm-trial-banner-close:hover {
    background: rgba(8, 33, 63, 0.13);
}

.tm-trial-banner-close:focus-visible {
    outline: 2px solid #225ca2;
    outline-offset: 1px;
}

.tm-trial-banner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    padding: 0 7px;
    border-radius: 4px;
    background: #8b5100;
    color: #ffffff;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.tm-trial-banner-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 28px;
}

.tm-trial-banner-days {
    color: #08213f;
    font-size: 13px;
    font-weight: 900;
}

.tm-trial-banner-detail {
    margin-top: 1px;
    color: #17395f;
    font-size: 10px;
    font-weight: 700;
}

.tm-trial-banner-cta {
    grid-column: 1 / -1;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 9px;
    border-radius: 5px;
    background: #225ca2;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.tm-trial-banner-expired {
    border-color: #7f1d1d;
    background: linear-gradient(135deg, #d92d20 0%, #991b1b 100%);
    color: #ffffff;
    box-shadow: 0 9px 28px rgba(127, 29, 29, 0.34);
}

.tm-trial-banner-expired .tm-trial-banner-badge {
    background: rgba(255, 255, 255, 0.94);
    color: #991b1b;
}

.tm-trial-banner-expired .tm-trial-banner-days,
.tm-trial-banner-expired .tm-trial-banner-detail {
    color: #ffffff;
}

.tm-trial-banner-expired .tm-trial-banner-cta {
    background: #ffffff;
    color: #991b1b;
}

.tm-trial-banner-expired .tm-trial-banner-link:hover .tm-trial-banner-cta {
    background: #ffe4e6;
}

.tm-trial-banner-expired .tm-trial-banner-close,
.tm-trial-banner-expired .tm-trial-banner-close[hidden] {
    display: none;
}

@keyframes tm-trial-banner-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Phone screens have rounded corners: a banner pinned 8px from the bottom
   had its lower corners cut off. It sits higher and further in, and clears
   the home indicator on phones that report a safe area. */
@media (max-width: 520px) {
    .tm-trial-banner {
        left: 14px;
        bottom: calc(22px + env(safe-area-inset-bottom, 0px));
        width: calc(100vw - 28px);
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tm-trial-banner {
        animation: none;
    }
}

    header.tm-topbar[data-tm-topbar] #tm-user-email {
        font-size: 12px;
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--tm-topbar-blue-strong);
    }

    /* buttons */
    header.tm-topbar[data-tm-topbar] .tm-btn {
        height: var(--tm-topbar-h);
        padding: 0 9px !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
        background: transparent;
        border: 0;
        border-radius: 6px 6px 0 0;
        color: var(--tm-topbar-blue);
        cursor: pointer;
    }

        header.tm-topbar[data-tm-topbar] .tm-btn:hover {
            background: var(--tm-topbar-hover);
        }

        header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-active {
            background: transparent;
            border-bottom: 4px solid #fcdb6c;
            color: var(--tm-topbar-blue-strong);
            font-weight: 700;
        }

        header.tm-topbar[data-tm-topbar] .tm-btn:focus-visible {
            outline: 2px solid rgba(47,111,166,.45);
            outline-offset: 2px;
        }

        /* logout */
        header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-secondary {
            height: var(--tm-topbar-h);
            padding: 0 12px !important;
            border: 1px solid rgba(0,0,0,.15);
            border-radius: 6px;
            background: #f6f8fb;
            color: var(--tm-topbar-blue-strong);
            font-size: 13px;
            font-weight: 500;
        }

            header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-secondary:hover {
                filter: brightness(0.97);
            }

/* Drivers page fix (kaip buvo) */
.tm-drivers-main {
    height: calc(100vh - var(--tm-nav-h, 52px) - 12px) !important;
}
/* =========================
   VOR modal — same style as Defects modal
   ========================= */

#tm-vor-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    padding: 16px;
}

    #tm-vor-modal-backdrop[hidden] {
        display: none !important;
    }

#tm-vor-modal {
    width: min(980px, 100%);
    background: var(--tm-bg-card, #fff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 4px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
    overflow: hidden;
}

    /* header — identical */
    #tm-vor-modal .tm-modal-head {
        padding: 10px 12px;
        background: var(--tm-primary, #4682B4);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 13px;
    }

    /* body — identical */
    #tm-vor-modal .tm-modal-body {
        display: block !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 16px 16px 16px !important;
    }

    /* reuse same inner layout classes as defects */
    #tm-vor-modal .tm-defect-modal-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 16px;
        align-items: start;
    }

    #tm-vor-modal .tm-defect-left {
        display: grid;
        grid-template-columns: 170px 1fr;
        gap: 10px 14px;
        align-items: center;
    }

        #tm-vor-modal .tm-defect-left label {
            font-weight: 600;
            font-size: 12px;
            color: var(--tm-text-main, #1f2933);
        }

        #tm-vor-modal .tm-defect-left input,
        #tm-vor-modal .tm-defect-left select,
        #tm-vor-modal .tm-defect-left textarea {
            width: 100%;
            padding: 6px 7px;
            border: 1px solid #c3cfe8;
            border-radius: 2px;
            background: #fff;
            color: var(--tm-text-main, #1f2933);
            outline: none;
            font-size: 12px;
            box-sizing: border-box;
        }

        #tm-vor-modal .tm-defect-left textarea {
            min-height: 90px;
            resize: vertical;
        }

        #tm-vor-modal .tm-defect-left .tm-row-full,
     

    /* reported-by inline */
    #tm-vor-modal .tm-inline-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* right panel (same as defects fixed panel look) */
    #tm-vor-modal .tm-defect-fixed-panel {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    #tm-vor-modal .tm-fixed-title {
        font-weight: 600; /* ? not heavy bold */
        font-size: 12px;
        margin-bottom: 10px;
        color: var(--tm-text-main, #1f2933);
    }

    #tm-vor-modal .tm-fixed-grid {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: 10px 10px;
        align-items: center;
    }

        #tm-vor-modal .tm-fixed-grid label {
            font-weight: 600; /* ? match left labels */
            font-size: 12px;
        }

    #tm-vor-modal .tm-checkline {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px; /* ? closer */
        user-select: none;
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
    }

        #tm-vor-modal .tm-checkline input {
            margin: 0; /* ? no extra spacing */
        }



    #tm-vor-modal .tm-modal-actions {
        padding: 12px 16px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        align-items: center;
        border-top: none;
        background: transparent;
    }


    #tm-vor-modal .tm-modal-save-msg {
        margin-left: auto;
        font-size: 12px;
        opacity: 0.85;
    }
    /* VOR ended checkbox position */
    #tm-vor-modal .tm-vor-ended-line {
        grid-column: 1 / -1; /* span full width of right panel */
        margin-top: 12px; /* move lower */
        margin-left: -6px; /* slightly more left */
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        #tm-vor-modal .tm-vor-ended-line input {
            margin: 0;
        }

    #tm-vor-modal .tm-checkline {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 400;
        white-space: nowrap;
    }

        #tm-vor-modal .tm-checkline input {
            margin: 0;
        }
/* Mark as VOR ended row */
.tm-vor-ended-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px; /* ? nuleidžia žemiau */
    margin-left: 4px; /* ? šiek tiek kairiau */
}

    .tm-vor-ended-line input[type="checkbox"] {
        margin: 0;
        position: relative;
        top: 1px;
    }

    .tm-vor-ended-line span {
        white-space: nowrap;
    }
/* VOR modal – push "Mark as VOR ended" lower (grid spacer row) */
#tm-vor-modal .tm-vor-ended-spacer {
    grid-column: 1 / -1;
    height: 4px; /* didink/mazink kiek reikia */
}

#tm-vor-modal .tm-vor-ended-line {
    grid-column: 1 / -1;
    margin: 0 !important;
    align-self: start;
}
/* VOR modal – move ONLY label text left */
#tm-vor-modal .tm-vor-ended-line {
    position: relative;
}

    #tm-vor-modal .tm-vor-ended-line span {
        position: relative;
        left: -100px; /* reguliuok jei reikia */
    }
/* =========================================================
   VOR modal – X button IDENTICAL to Defects modal + Save bottom-right corner
   ========================================================= */

/* make modal a positioning context */
#tm-vor-modal {
    position: relative;
}

    /* ? X button – EXACT same style as Defects modal */
    #tm-vor-modal .tm-modal-head .tm-x:not(.tm-print-icon-btn) {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 1px solid rgba(255,255,255,0.35);
        color: #fff;
        font-size: 14px;
        font-family: inherit;
        cursor: pointer;
        line-height: 1;
        padding: 4px 10px;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background .15s ease, border-color .15s ease, transform .05s ease;
    }

        #tm-vor-modal .tm-modal-head .tm-x:not(.tm-print-icon-btn):hover {
            background: rgba(255,255,255,0.16);
            border-color: rgba(255,255,255,0.75);
        }

        #tm-vor-modal .tm-modal-head .tm-x:not(.tm-print-icon-btn):active {
            transform: translateY(1px);
        }

    /* =========================================================
   VOR modal bottom actions — match Defects modal
   ========================================================= */
    #tm-vor-modal .tm-modal-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        border-top: none !important;
        background: transparent !important;
        position: static !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }

    #tm-vor-modal .tm-modal-body {
        padding-bottom: 16px !important;
        position: static !important;
        z-index: auto !important;
    }

    #tm-vor-modal .tm-modal-save-msg,
    #tm-vor-modal #tm-vor-modal-save-msg {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: auto;
        text-align: center;
        color: #c62828 !important;
        -webkit-text-fill-color: #c62828 !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

html.tm-dark #tm-vor-modal .tm-modal-save-msg,
html.tm-dark #tm-vor-modal #tm-vor-modal-save-msg {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
}

html.tm-dark #tm-qvor-backdrop #tm-qvor-summary {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(201,211,230,0.20) !important;
    color: #b9c7db !important;
}

html.tm-dark #tm-qvor-backdrop label {
    color: #e5e7eb !important;
}

html.tm-dark #tm-qvor-backdrop input,
html.tm-dark #tm-qvor-backdrop textarea {
    background: var(--tm-input-bg, #0f1a2d) !important;
    color: var(--tm-text-main, #e5e7eb) !important;
    border-color: var(--tm-input-border, rgba(201,211,230,0.20)) !important;
}

html.tm-dark #tm-qvor-backdrop input::placeholder,
html.tm-dark #tm-qvor-backdrop textarea::placeholder {
    color: rgba(229,231,235,0.58) !important;
}

html.tm-dark #tm-qvor-backdrop input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.15);
}

/* =========================================================
   Defects + VOR modal photo upload layout
   ========================================================= */
#tm-defects-modal .tm-photo-shelf-row,
#tm-vor-modal .tm-photo-shelf-row {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    min-width: 0;
}

#tm-defects-modal .tm-photo-upload-block,
#tm-vor-modal .tm-photo-upload-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

#tm-defects-modal .tm-photo-upload-header,
#tm-vor-modal .tm-photo-upload-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

#tm-defects-modal .tm-photo-upload-block .tm-photo-title,
#tm-vor-modal .tm-photo-upload-block .tm-photo-title {
    margin-bottom: 0 !important;
}

#tm-defects-modal .tm-photo-input,
#tm-vor-modal .tm-photo-input {
    display: none !important;
}

#tm-defects-modal .tm-photo-choose-btn,
#tm-vor-modal .tm-photo-choose-btn {
    flex: 0 0 auto;
}

    #tm-defects-modal .tm-photo-choose-btn.is-disabled,
    #tm-defects-modal .tm-photo-choose-btn:disabled,
    #tm-vor-modal .tm-photo-choose-btn.is-disabled,
    #tm-vor-modal .tm-photo-choose-btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

#tm-defects-modal .tm-photo-strip,
#tm-vor-modal .tm-photo-strip,
#tm-qfix-backdrop .tm-photo-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 88px;
    padding: 8px;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px dashed #b8c8e2;
    border-radius: 4px;
    background: #ffffff;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #9eb4d3 #eef3fa;
}

    #tm-defects-modal .tm-photo-strip::-webkit-scrollbar,
    #tm-vor-modal .tm-photo-strip::-webkit-scrollbar,
    #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar {
        height: 8px;
    }

    #tm-defects-modal .tm-photo-strip::-webkit-scrollbar-track,
    #tm-vor-modal .tm-photo-strip::-webkit-scrollbar-track,
    #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar-track {
        background: #eef3fa;
        border-radius: 999px;
    }

    #tm-defects-modal .tm-photo-strip::-webkit-scrollbar-thumb,
    #tm-vor-modal .tm-photo-strip::-webkit-scrollbar-thumb,
    #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar-thumb {
        background: #9eb4d3;
        border-radius: 999px;
    }

        #tm-defects-modal .tm-photo-strip::-webkit-scrollbar-thumb:hover,
        #tm-vor-modal .tm-photo-strip::-webkit-scrollbar-thumb:hover,
        #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar-thumb:hover {
            background: #7f9fc9;
        }

    #tm-defects-modal .tm-photo-strip.is-drop-active,
    #tm-vor-modal .tm-photo-strip.is-drop-active,
    #tm-qfix-backdrop .tm-photo-strip.is-drop-active {
        border-color: #4682B4;
        background: #eef6ff;
        box-shadow: inset 0 0 0 1px rgba(70,130,180,0.18);
    }

#tm-defects-modal .tm-photo,
#tm-vor-modal .tm-photo,
#tm-qfix-backdrop .tm-photo {
    flex: 0 0 auto;
}

    #tm-defects-modal .tm-photo.tm-photo-pending,
    #tm-vor-modal .tm-photo.tm-photo-pending,
    #tm-qfix-backdrop .tm-photo.tm-photo-pending {
        width: 92px !important;
        height: 62px !important;
        min-width: 92px !important;
        min-height: 62px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px;
        text-align: center;
        background: #f1f3f6;
        border: 1px dashed #c9d3e3;
        border-radius: 3px;
        color: #111827;
        pointer-events: none;
        box-shadow: none;
    }

    #tm-defects-modal .tm-photo.tm-photo-add-tile,
    #tm-vor-modal .tm-photo.tm-photo-add-tile,
    #tm-qfix-backdrop .tm-photo.tm-photo-add-tile {
        position: relative;
        width: 92px !important;
        height: 62px !important;
        min-width: 92px !important;
        min-height: 62px !important;
        appearance: none;
        -webkit-appearance: none;
        padding: 0;
        cursor: pointer;
        background: #f1f3f6;
        border: 1px dashed #b7c7de;
        border-radius: 3px;
        color: #111827;
        box-shadow: none;
        overflow: hidden;
        transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

        #tm-defects-modal .tm-photo.tm-photo-add-tile:hover,
        #tm-vor-modal .tm-photo.tm-photo-add-tile:hover,
        #tm-qfix-backdrop .tm-photo.tm-photo-add-tile:hover {
            background: #eaf1f8;
            border-color: #7fa1c8;
            box-shadow: inset 0 0 0 1px rgba(70,130,180,0.12);
        }

        #tm-defects-modal .tm-photo.tm-photo-add-tile:active,
        #tm-vor-modal .tm-photo.tm-photo-add-tile:active,
        #tm-qfix-backdrop .tm-photo.tm-photo-add-tile:active {
            transform: translateY(1px);
        }

        #tm-defects-modal .tm-photo.tm-photo-add-tile > *,
        #tm-vor-modal .tm-photo.tm-photo-add-tile > *,
        #tm-qfix-backdrop .tm-photo.tm-photo-add-tile > * {
            display: none !important;
        }

        #tm-defects-modal .tm-photo.tm-photo-add-tile::before,
        #tm-vor-modal .tm-photo.tm-photo-add-tile::before,
        #tm-qfix-backdrop .tm-photo.tm-photo-add-tile::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 6px;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px 20px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234682B4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M5 18v2h14v-2'/%3E%3C/svg%3E");
            opacity: 1;
        }

        #tm-defects-modal .tm-photo.tm-photo-add-tile::after,
        #tm-vor-modal .tm-photo.tm-photo-add-tile::after,
        #tm-qfix-backdrop .tm-photo.tm-photo-add-tile::after {
            content: "Drop files here\Aor click to browse files";
            position: absolute;
            left: 50%;
            top: 27px;
            transform: translateX(-50%);
            width: 74px;
            text-align: center;
            white-space: pre-line;
            font-size: 8px;
            line-height: 1.18;
            font-weight: 600;
            color: #111827;
        }

.tm-photo-add-icon,
.tm-photo-add-label,
.tm-photo-add-hint {
    display: none !important;
}

.tm-photo-upload-text {
    display: block;
    font-size: 9px;
    line-height: 1.2;
    font-weight: 600;
    white-space: normal;
    text-align: center;
    color: #111827;
}

.tm-photo-upload-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(70, 130, 180, 0.18);
    border-top-color: var(--tm-primary, #4682B4);
    animation: tm-photo-upload-spin 0.75s linear infinite;
}

@keyframes tm-photo-upload-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1120px) {
    #tm-defects-modal .tm-photo-strip,
    #tm-vor-modal .tm-photo-strip,
    #tm-qfix-backdrop .tm-photo-strip {
        flex-wrap: wrap !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
}

html.tm-dark #tm-defects-modal .tm-photo-upload-block,
html.tm-dark #tm-vor-modal .tm-photo-upload-block {
    border-color: transparent;
    background: transparent;
}

html.tm-dark #tm-defects-modal .tm-photo-strip,
html.tm-dark #tm-vor-modal .tm-photo-strip,
html.tm-dark #tm-qfix-backdrop .tm-photo-strip {
    border-color: rgba(120, 149, 186, 0.38);
    background: rgba(15, 23, 35, 0.92);
    scrollbar-color: #5b7ea8 rgba(23, 35, 55, 0.96);
}

    html.tm-dark #tm-defects-modal .tm-photo-strip::-webkit-scrollbar-track,
    html.tm-dark #tm-vor-modal .tm-photo-strip::-webkit-scrollbar-track,
    html.tm-dark #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar-track {
        background: rgba(23, 35, 55, 0.96);
    }

    html.tm-dark #tm-defects-modal .tm-photo-strip::-webkit-scrollbar-thumb,
    html.tm-dark #tm-vor-modal .tm-photo-strip::-webkit-scrollbar-thumb,
    html.tm-dark #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar-thumb {
        background: #5b7ea8;
    }

        html.tm-dark #tm-defects-modal .tm-photo-strip::-webkit-scrollbar-thumb:hover,
        html.tm-dark #tm-vor-modal .tm-photo-strip::-webkit-scrollbar-thumb:hover,
        html.tm-dark #tm-qfix-backdrop .tm-photo-strip::-webkit-scrollbar-thumb:hover {
            background: #7297c5;
        }

/* The fixed photo strip sets its own light scrollbar-color and rings its thumb in a light border -
   both carry ID specificity, so the global dark rules above do not reach them. */
html.tm-dark #tm-defects-modal #tm-defect-photos-fixed-strip {
    scrollbar-color: #5b7ea8 rgba(23, 35, 55, 0.96);
}

html.tm-dark #tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar-track {
    background: rgba(23, 35, 55, 0.96) !important;
}

html.tm-dark #tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar-thumb {
    background: #5b7ea8 !important;
    border: 2px solid rgba(23, 35, 55, 0.96);
}

    html.tm-dark #tm-defects-modal #tm-defect-photos-fixed-strip::-webkit-scrollbar-thumb:hover {
        background: #7297c5 !important;
    }

    html.tm-dark #tm-defects-modal .tm-photo-strip.is-drop-active,
    html.tm-dark #tm-vor-modal .tm-photo-strip.is-drop-active,
    html.tm-dark #tm-qfix-backdrop .tm-photo-strip.is-drop-active {
        border-color: #78a7db;
        background: rgba(21, 39, 61, 0.98);
        box-shadow: inset 0 0 0 1px rgba(120,167,219,0.24);
    }

html.tm-dark #tm-defects-modal .tm-photo.tm-photo-pending,
html.tm-dark #tm-vor-modal .tm-photo.tm-photo-pending,
html.tm-dark #tm-qfix-backdrop .tm-photo.tm-photo-pending {
    background: #1d2632;
    border-color: rgba(148, 163, 184, 0.38);
    color: #e8eef6;
}

html.tm-dark #tm-defects-modal .tm-photo.tm-photo-add-tile,
html.tm-dark #tm-vor-modal .tm-photo.tm-photo-add-tile,
html.tm-dark #tm-qfix-backdrop .tm-photo.tm-photo-add-tile {
    background: #1d2632;
    border-color: rgba(120, 167, 219, 0.38);
    color: #e8eef6;
}

    html.tm-dark #tm-defects-modal .tm-photo.tm-photo-add-tile:hover,
    html.tm-dark #tm-vor-modal .tm-photo.tm-photo-add-tile:hover,
    html.tm-dark #tm-qfix-backdrop .tm-photo.tm-photo-add-tile:hover {
        background: #243244;
        border-color: #78a7db;
    }

    html.tm-dark #tm-defects-modal .tm-photo.tm-photo-add-tile::before,
    html.tm-dark #tm-vor-modal .tm-photo.tm-photo-add-tile::before,
    html.tm-dark #tm-qfix-backdrop .tm-photo.tm-photo-add-tile::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234682B4' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3Cpath d='M5 18v2h14v-2'/%3E%3C/svg%3E");
    }

    html.tm-dark #tm-defects-modal .tm-photo.tm-photo-add-tile::after,
    html.tm-dark #tm-vor-modal .tm-photo.tm-photo-add-tile::after,
    html.tm-dark #tm-qfix-backdrop .tm-photo.tm-photo-add-tile::after {
        color: #e8eef6;
    }

html.tm-dark .tm-photo-upload-text {
    color: #e8eef6;
}

html.tm-dark .tm-photo-upload-spinner {
    border-color: rgba(148, 163, 184, 0.28);
    border-top-color: #93c5fd;
}

/* Keep long descriptions scrolling inside the field instead of stretching the modal */
#tm-defects-modal #tm-defect-desc,
#tm-vor-modal #tm-vor-desc {
    min-height: 112px;
    height: 112px;
    max-height: 112px;
    overflow-y: auto;
    resize: none;
}

/* =========================================
   TABLE ROW HOVER – smooth (no flicker)
========================================= */

/* animate whole row, not individual cells */
table.tm-table tbody tr,
#tm-inv-table tbody tr {
    transition: background-color 160ms ease;
}

/* hover only on real hover devices */
@media (hover: hover) and (pointer: fine) {

    table.tm-table tbody tr:hover,
    #tm-inv-table tbody tr:hover {
        background-color: rgba(70,130,180,0.035) !important;
    }

    body.tm-dark table.tm-table tbody tr:hover,
    body.tm-dark #tm-inv-table tbody tr:hover {
        background-color: rgba(255,255,255,0.03) !important;
    }
}



/* jei header yra aukštesnis – kad vizualiai centruotusi */
.tm-modal-head .tm-x:not(.tm-print-icon-btn),
.tm-modal-head .tm-modal-close,
.tm-modal-head button[id$="-close"],
.tm-modal-head button[id$="-Close"],
.tm-modal-head button[id$="-x"],
.tm-modal-head button[id$="-X"] {
    margin-left: auto !important;
}

/* =========================
   GLOBAL MODAL TYPOGRAPHY UNIFICATION
   ========================= */

/* Visas modalas */
.tm-modal,
.tm-modal * {
    font-family: "Segoe UI", Tahoma, sans-serif !important;
    font-size: 13px !important;
    color: var(--tm-text-main) !important;
}

/* Modal notices float over the form like a toast. A message box at the top of a
   modal body ("Lookup successful", "Save failed", ...) used to push the form down:
   the modal grew, tm.modal.fit.js zoomed it down, and when the message went away it
   grew back. A modal keeps its size; the notice takes no room. Clicking a notice
   clears it (tm.modal.fit.js), so an error never hides the field under it for good. */
.tm-modal-body:has(> :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]),
                   > .tm-scheduler-stack:first-child > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):first-child) {
    position: relative;
}

.tm-modal-body > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]),
.tm-modal-body > .tm-scheduler-stack:first-child > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):first-child {
    position: absolute !important;
    top: 8px;
    left: 12px;
    right: 12px;
    z-index: 30;
    margin: 0 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    border-radius: 4px;
    cursor: pointer;
}

/* The notice's own tint is often translucent, so the field underneath would show
   through the text. ::before lays a solid card colour inside the notice, ::after
   repeats the tint on top of it (both sit above the notice's own background). */
.tm-modal-body > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"])::before,
.tm-modal-body > .tm-scheduler-stack:first-child > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):first-child::before,
.tm-modal-body > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"])::after,
.tm-modal-body > .tm-scheduler-stack:first-child > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--tm-bg-card, #fff);
}

.tm-modal-body > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"])::after,
.tm-modal-body > .tm-scheduler-stack:first-child > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):first-child::after {
    background: inherit;
}

.tm-modal-body > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):is([hidden], :empty),
.tm-modal-body > .tm-scheduler-stack:first-child > :is([id$="-error"], [id$="-msg"], [id$="-message"]):not([id^="tm-dialog-"]):first-child:is([hidden], :empty) {
    display: none !important;
}

/* Modal header title */
.tm-modal-head,
.tm-modal-title,
.tm-modal-header {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

/* Form labels */
.tm-modal label,
.tm-form-label,
.tm-modal .tm-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tm-text-main) !important;
}

/* Inputs, selects, textarea */
.tm-modal input,
.tm-modal select,
.tm-modal textarea {
    font-size: 13px !important;
    font-family: inherit !important;
}

/* Buttons inside modal */
.tm-modal .tm-btn,
.tm-modal button {
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Checkbox + small helper text */
.tm-modal small,
.tm-modal .tm-help-text {
    font-size: 12px !important;
    color: var(--tm-text-muted) !important;
}

/* =========================
   MODAL HEADER + BUTTON TEXT WHITE
   ========================= */

/* Header tekstas baltas */
.tm-modal-head,
.tm-modal-title,
.tm-modal-header {
    color: var(--tm-on-primary) !important;
}

    /* Užtikrinam kad visi elementai header'yje paveldetu akcento spalva */
    .tm-modal-head * {
        color: var(--tm-on-primary) !important;
    }

/* ? Akcento spalva TIK tikriems TM mygtukams (ne dropdown rodykliukams!) */
.tm-modal .tm-btn,
.tm-modal button.tm-btn,
.tm-modal .tm-actions .tm-btn,
.tm-modal .tm-actions button.tm-btn,
.tm-modal button.tm-btn[type="button"],
.tm-modal button.tm-btn[type="submit"] {
    color: var(--tm-on-primary) !important;
}

/* ? ComboSelect / custom dropdown rodykliukas — visada matomas */
.tm-modal .tm-ac-wrap {
    position: relative;
}

.tm-modal .tm-ac-input {
    padding-right: 34px !important;
}

.tm-modal .tm-ac-arrow {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: 28px;
    border: 0 !important;
    background: transparent !important;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-text-muted, #5b657a) !important;
}

    .tm-modal .tm-ac-arrow:hover {
        color: var(--tm-text-main, #1f2933) !important;
    }
/* =========================
   Calendar bottom nav - minimal override
   ========================= */

/* tik spalva */
#tm-nav-prev,
#tm-nav-next,
#tm-nav-today,
#tm-nav-label {
    background: var(--tm-primary, #4682B4) !important;
    color: var(--tm-on-primary, #ffd38a) !important;
    border-color: var(--tm-primary-dark, #225ca2) !important;
}

    /* subtilus hover */
    #tm-nav-prev:hover,
    #tm-nav-next:hover,
    #tm-nav-today:hover,
    #tm-nav-label:hover {
        background: #3a709c !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        transition: background 0.15s ease, box-shadow 0.15s ease;
    }

    /* paspaudimo efektas */
    #tm-nav-prev:active,
    #tm-nav-next:active,
    #tm-nav-today:active,
    #tm-nav-label:active {
        transform: translateY(1px);
    }
/* =========================
   Calendar bottom nav - Today label color + hover
   ========================= */

#tm-nav-label,
.tm-nav-label {
    color: var(--tm-on-primary, #ffd38a) !important;
    font-weight: 700;
}

    /* subtilus hover kaip kituose */
    #tm-nav-label:hover,
    .tm-nav-label:hover {
        color: #ffffff !important;
        text-decoration: underline;
        cursor: pointer;
    }

/* =========================================
   DRIVER EDIT MODAL (GROUPED LAST)
   ========================================= */
#tm-modal-driver.tm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10055;
    padding: 16px;
    box-sizing: border-box;
}

    #tm-modal-driver.tm-backdrop[hidden] {
        display: none !important;
    }

#tm-modal-driver .tm-modal {
    width: min(980px, 96vw);
    max-width: calc(100vw - 32px);
    background: var(--tm-bg-card, #fff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
    overflow: hidden;
}
#tm-modal-driver .tm-modal-head {
    background: var(--tm-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
}

    #tm-modal-driver .tm-modal-head .tm-title {
        font-weight: 800;
        font-size: 14px;
    }

#tm-modal-driver .tm-x {
    width: 30px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

    #tm-modal-driver .tm-x:hover {
        background: rgba(255,255,255,0.25);
    }

#tm-modal-driver .tm-modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px 18px;
}

#tm-modal-driver #tm-driver-error,
#tm-modal-driver .tm-driver-error-slot {
    display: none !important;
    min-height: 0;
    box-sizing: border-box;
    color: #c62828 !important;
    -webkit-text-fill-color: #c62828 !important;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-left: 4px solid transparent;
    border-radius: 3px;
    background: transparent;
}

    #tm-modal-driver #tm-driver-error.tm-driver-error-visible {
        display: none !important;
        border-color: rgba(198,40,40,0.25);
        border-left-color: #c62828;
        background: rgba(198,40,40,0.08);
    }

    #tm-modal-driver #tm-driver-error.tm-driver-error-empty {
        display: none !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }

html.tm-dark #tm-modal-driver #tm-driver-error,
html.tm-dark #tm-modal-driver .tm-driver-error-slot {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
}

    html.tm-dark #tm-modal-driver #tm-driver-error.tm-driver-error-visible {
        border-color: rgba(255,123,123,0.28);
        border-left-color: #ff7b7b;
        background: rgba(255,123,123,0.10);
    }

    html.tm-dark #tm-modal-driver #tm-driver-error.tm-driver-error-empty {
        display: none !important;
        color: transparent !important;
        -webkit-text-fill-color: transparent !important;
    }

html.tm-dark #tm-modal-driver #tm-driver-error.tm-driver-error-visible,
html.tm-dark #tm-modal-driver #tm-driver-error.tm-driver-error-toast {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
    border-color: rgba(255,123,123,0.28);
    border-left-color: #ff7b7b;
    background: rgba(255,123,123,0.10);
}
#tm-modal-driver .tm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px;
    border-top: 1px solid var(--tm-border-soft);
    background: #fff;
}

#tm-modal-driver .tm-driver-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 36px 8px 16px;
}

#tm-modal-driver .tm-driver-modal-save-msg {
    margin-right: auto;
    min-height: 18px;
    padding: 4px 8px;
    color: #c62828 !important;
    -webkit-text-fill-color: #c62828 !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    border-radius: 3px;
    background: rgba(198,40,40,0.08);
}

html.tm-dark #tm-modal-driver .tm-driver-modal-save-msg {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
    background: rgba(255,123,123,0.10);
}

/* The licence check form sits on top of the driver form, so its fields wear the same look. */
#tm-modal-driver .tm-input,
#tm-driver-history-backdrop .tm-input {
    width: 100%;
    padding: 5px 6px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #c3cfe8;
    background: #fff;
    box-sizing: border-box;
}

#tm-driver-formgrid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#tm-modal-driver .tm-driver-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

#tm-modal-driver .tm-driver-inline-error {
    display: block;
    color: #c62828 !important;
    -webkit-text-fill-color: #c62828 !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

#tm-modal-driver .tm-input.tm-input-invalid,
#tm-modal-driver .tm-driver-field-wrap .tm-input.tm-input-invalid {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 1px rgba(198,40,40,0.18);
}

html.tm-dark #tm-modal-driver .tm-driver-inline-error {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
}

html.tm-dark #tm-modal-driver .tm-input.tm-input-invalid,
html.tm-dark #tm-modal-driver .tm-driver-field-wrap .tm-input.tm-input-invalid {
    border-color: #ff7b7b !important;
    box-shadow: 0 0 0 1px rgba(255,123,123,0.22);
}

    #tm-driver-formgrid label {
        align-self: center;
        font-size: 12px;
        color: var(--tm-text-main, #1f2933);
        margin: 0;
    }
.tm-driver-grid-row {
    display: grid;
    grid-template-columns: 120px 310px 140px 160px 190px;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
}
    .tm-driver-grid-row > div,
    .tm-driver-grid-row > input,
    .tm-driver-grid-row > select {
        min-width: 0;
    }

#tm-modal-driver #tm-driver-company,
#tm-modal-driver #tm-driver-name,
#tm-modal-driver #tm-driver-position,
#tm-modal-driver #tm-driver-phone,
#tm-modal-driver #tm-driver-email,
#tm-modal-driver #tm-driver-points {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#tm-modal-driver #tm-driver-email-ui {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration-line: none !important;
    border-bottom-style: solid !important;
    background-image: none !important;
}

    #tm-modal-driver #tm-driver-email-ui *,
    #tm-modal-driver #tm-driver-email-ui::before,
    #tm-modal-driver #tm-driver-email-ui::after {
        text-decoration: none !important;
        text-decoration-line: none !important;
        -webkit-text-decoration-line: none !important;
    }

    #tm-modal-driver #tm-driver-email-ui::before,
    #tm-modal-driver #tm-driver-email-ui::after {
        content: none !important;
        display: none !important;
    }

#tm-modal-driver #tm-driver-licence,
#tm-modal-driver #tm-driver-cpc,
#tm-modal-driver #tm-driver-tacho,
#tm-modal-driver #tm-driver-lastchecked,
#tm-modal-driver #tm-driver-birthday,
#tm-modal-driver #tm-driver-startdate {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
}

.tm-driver-startdate-label {
    align-self: start !important;
    padding-top: 4px;
}

.tm-driver-startdate-input {
    align-self: start;
    justify-self: stretch;
}

.tm-driver-position-picker {
    position: relative;
    width: 100%;
}

    .tm-driver-position-picker .tm-input {
        padding-right: 58px;
    }

.tm-driver-position-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 1px solid #c3cfe8;
    border-radius: 3px;
    background: #f1f5fb;
    color: var(--tm-text-main, #1f2933);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

    .tm-driver-position-btn:hover:not(:disabled) {
        background: #e3ebf8;
    }

    .tm-driver-position-btn:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .tm-driver-position-btn svg {
        width: 14px;
        height: 14px;
        fill: var(--tm-primary, #4c84b6);
    }

.tm-driver-position-clear {
    right: 30px;
    opacity: 0;
    pointer-events: none;
}

.tm-driver-position-picker.has-value .tm-driver-position-clear {
    opacity: 1;
    pointer-events: auto;
}

.tm-driver-position-menu {
    right: 4px;
}

.tm-driver-upload-slot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-self: start;
}

    .tm-driver-upload-slot .tm-btn {
        min-width: 132px;
        width: 132px;
    }

.tm-driver-upload-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(76,132,182,.12);
    border: 1px solid rgba(76,132,182,.22);
    color: var(--tm-primary, #4c84b6);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

    .tm-driver-upload-count:empty {
        display: none;
    }

html.tm-dark .tm-driver-upload-count {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.16);
}

.tm-driver-grid-row-notes {
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
}

.tm-driver-notes-label {
    align-self: start !important;
    padding-top: 4px;
}

.tm-driver-notes-wrap {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
}

.tm-driver-notes-area {
    width: 100%;
    min-height: 82px !important;
    height: 82px !important;
    max-height: 150px;
    resize: vertical;
    overflow-y: auto;
    line-height: 1.35;
}

.tm-driver-startdate-label {
    align-self: start !important;
    padding-top: 4px;
}

.tm-driver-startdate-input {
    align-self: start;
}

.tm-driver-file-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

.tm-driver-file-btn {
    min-width: 120px;
}

.tm-driver-file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--tm-primary, #4c84b6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* Driver documents, vehicle documents and completed-task attachments are one
   design: same fixed width, same fixed list height, one-line title. A long file
   name is ellipsised inside its row -- it never widens or grows the dialog. */
#tm-driver-upload-backdrop.tm-backdrop,
#tm-veh-docs-backdrop.tm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10070;
    padding: 16px;
    box-sizing: border-box;
}

    #tm-driver-upload-backdrop.tm-backdrop[hidden],
    #tm-veh-docs-backdrop.tm-backdrop[hidden] {
        display: none !important;
    }

#tm-driver-upload-backdrop .tm-modal,
#tm-veh-docs-backdrop .tm-modal,
#tm-completed-attach-modal {
    width: min(760px, 96vw);
    max-width: calc(100vw - 32px);
    background: var(--tm-bg-card, #fff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
    overflow: hidden;
}

#tm-driver-upload-backdrop .tm-modal-head,
#tm-veh-docs-backdrop .tm-modal-head,
#tm-completed-attach-modal .tm-modal-head {
    background: var(--tm-primary, #4c84b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
}

#tm-driver-upload-backdrop .tm-title,
#tm-veh-docs-backdrop .tm-title,
#tm-completed-attach-modal .tm-title {
    font-size: 18px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#tm-driver-upload-backdrop .tm-x,
#tm-veh-docs-backdrop .tm-x,
#tm-completed-attach-modal .tm-x {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.55);
    background: transparent;
    color: #fff;
    width: 36px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
}

    #tm-driver-upload-backdrop .tm-x:hover,
    #tm-veh-docs-backdrop .tm-x:hover,
    #tm-completed-attach-modal .tm-x:hover {
        background: rgba(255,255,255,.08);
    }

#tm-driver-upload-backdrop .tm-modal-body,
#tm-veh-docs-backdrop .tm-modal-body,
#tm-completed-attach-modal .tm-modal-body {
    padding: 16px;
}

.tm-driver-upload-dropzone {
    border: 2px dashed rgba(76,132,182,.45);
    background: rgba(76,132,182,.05);
    border-radius: 3px;
    min-height: 140px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--tm-text-main, #1f2933);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.tm-driver-upload-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tm-driver-upload-dropzone-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tm-primary, #4c84b6);
    opacity: .92;
    margin-bottom: 4px;
}

    .tm-driver-upload-dropzone-icon svg {
        width: 42px;
        height: 42px;
        display: block;
        fill: currentColor;
    }

    .tm-driver-upload-dropzone.is-dragover {
        border-color: var(--tm-primary, #4c84b6);
        background: rgba(76,132,182,.11);
        box-shadow: inset 0 0 0 1px rgba(76,132,182,.12);
    }

        .tm-driver-upload-dropzone.is-dragover .tm-driver-upload-dropzone-icon {
            transform: scale(1.06);
        }

    .tm-driver-upload-dropzone strong {
        display: block;
        font-size: 15px;
        margin-bottom: 6px;
    }

    .tm-driver-upload-dropzone span {
        display: block;
        font-size: 12px;
        opacity: .88;
    }

.tm-driver-upload-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.tm-driver-upload-list {
    margin-top: 14px;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
}

/* Fixed to its own height (rather than shrinking to fit "No files.") so the
   dialog doesn't visibly resize every time a file is added, removed, or
   renamed. More files than fit scroll inside the list. */
html:not(.tm-mobile) #tm-driver-upload-list,
html:not(.tm-mobile) #tm-veh-docs-list,
html:not(.tm-mobile) #tm-completed-attach-list {
    height: 260px;
    max-height: 260px;
    box-sizing: border-box;
}

.tm-driver-upload-processing {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--tm-text-muted, #64748b);
}

    .tm-driver-upload-processing[hidden] {
        display: none;
    }

.tm-driver-upload-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--tm-border-soft, #e2e8f0);
}

    .tm-driver-upload-item:last-child {
        border-bottom: 0;
    }

.tm-driver-upload-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--tm-text-main, #1f2933);
}

.tm-driver-upload-size {
    font-size: 12px;
    color: var(--tm-text-muted, #64748b);
}

.tm-driver-upload-item-actions {
    display: flex;
    gap: 6px;
}

.tm-driver-upload-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--tm-text-muted, #64748b);
}

.tm-driver-upload-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--tm-border-soft, #d9e2ef);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

html.tm-dark .tm-driver-upload-list {
    background: var(--tm-bg-card, #0f1a2d);
}

html.tm-dark .tm-driver-upload-dropzone {
    background: rgba(70,130,180,0.08);
    border-color: rgba(70,130,180,0.35);
}

html.tm-dark .tm-driver-upload-item {
    border-bottom-color: rgba(201,211,230,0.16);
}

#tm-driver-lookup-backdrop.tm-backdrop,
#tm-driver-lookup-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10080;
    padding: 16px;
    box-sizing: border-box;
}

    #tm-driver-lookup-backdrop.tm-backdrop[hidden],
    #tm-driver-lookup-backdrop[hidden] {
        display: none !important;
    }

#tm-driver-lookup-backdrop .tm-modal {
    width: min(760px, 96vw);
    max-width: calc(100vw - 32px);
    background: var(--tm-bg-card, #ffffff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 6px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
    overflow: hidden;
}

#tm-driver-lookup-backdrop .tm-modal-head {
    background: var(--tm-primary, #4682B4) !important;
    color: #ffffff !important;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 800;
    font-size: 14px;
    border-bottom: 1px solid var(--tm-primary-dark, #225ca2);
}

#tm-driver-lookup-backdrop .tm-modal-head .tm-title,
#tm-driver-lookup-backdrop .tm-title,
#tm-driver-lookup-title {
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 800;
}

#tm-driver-lookup-backdrop .tm-x,
#tm-driver-lookup-x {
    width: 30px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    #tm-driver-lookup-backdrop .tm-x:hover,
    #tm-driver-lookup-x:hover {
        background: rgba(255,255,255,0.22) !important;
    }

#tm-driver-lookup-backdrop .tm-modal.tm-modal-wide {
    width: 760px;
    max-width: calc(100vw - 32px);
}

#tm-driver-lookup-backdrop .tm-modal-body {
    padding: 12px;
    background: var(--tm-bg-card, #ffffff);
}

#tm-driver-lookup-backdrop .tm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px;
    border-top: 1px solid var(--tm-border-soft);
    background: var(--tm-bg-card, #ffffff);
    margin-top: 0;
}

#tm-driver-lookup-ctx {
    position: fixed;
    z-index: 10085;
}

    #tm-driver-lookup-ctx[hidden] {
        display: none !important;
    }

#tm-driver-preview-backdrop.tm-backdrop,
#tm-driver-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.74);
    z-index: 10120 !important;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #tm-driver-preview-backdrop.tm-backdrop[hidden],
    #tm-driver-preview-backdrop[hidden] {
        display: none !important;
    }

#tm-driver-preview-dialog {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
}

#tm-driver-preview-stage {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 6px;
    line-height: 0;
}

    #tm-driver-preview-stage.is-zoomed {
        cursor: grab;
    }

    #tm-driver-preview-stage.is-dragging {
        cursor: grabbing;
    }

#tm-driver-preview-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 5;
    align-items: center;
}

#tm-driver-preview-download,
#tm-driver-preview-close {
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(20,20,20,0.68);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

#tm-driver-preview-download {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
}

#tm-driver-preview-close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 16px;
    flex: 0 0 30px;
}

    #tm-driver-preview-download:hover,
    #tm-driver-preview-close:hover {
        background: rgba(20,20,20,0.86);
    }

#tm-driver-preview-body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    line-height: normal;
}

#tm-driver-preview-image {
    display: block;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    background: #fff;
    transform-origin: center center;
    transition: transform .12s ease;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

#tm-driver-preview-stage.is-zoomed #tm-driver-preview-image {
    cursor: grab;
}

#tm-driver-preview-stage.is-dragging #tm-driver-preview-image {
    cursor: grabbing;
}

#tm-driver-preview-frame {
    width: min(1120px, calc(100vw - 56px));
    height: calc(100vh - 96px);
    border: 0;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.tm-driver-preview-card {
    width: min(520px, calc(100vw - 56px));
    padding: 18px;
    border-radius: 6px;
    background: var(--tm-bg-card, #ffffff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    color: var(--tm-text-main, #1f2933);
}

.tm-driver-preview-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 10px;
    word-break: break-word;
}

.tm-driver-preview-note {
    font-size: 12px;
    color: var(--tm-text-muted, #5b657a);
    line-height: 1.45;
}

html.tm-dark .tm-driver-preview-card {
    background: var(--tm-bg-card, #0f1a2d);
    border-color: rgba(201,211,230,0.18);
    color: var(--tm-text-main, #eaf2ff);
}

@media (max-width: 1100px) {
    .tm-driver-grid-row {
        grid-template-columns: 120px 210px 140px 140px;
    }

    .tm-driver-upload-slot {
        grid-column: 2;
    }
}

@media (max-width: 900px) {
    .tm-driver-grid-row {
        grid-template-columns: 1fr;
    }

    .tm-driver-upload-slot {
        grid-column: auto;
    }

        .tm-driver-upload-slot .tm-btn {
            width: auto;
            min-width: 94px;
        }

    .tm-driver-upload-count {
        width: auto;
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
    }

    .tm-driver-notes-area {
        min-height: 140px;
        height: 140px;
    }

    .tm-driver-notes-wrap {
        grid-column: auto;
    }
}
/* =========================================================
   Move ComboSelect arrow slightly more to the right
   ========================================================= */

.tm-modal .tm-ac-input {
    padding-right: 42px !important; /* daugiau vietos rodyklei */
}

.tm-modal .tm-ac-arrow {
    right: 2px !important; /* buvo 6px – pastumiam arciau krašto */
}

/* =========================================================
   TOPBAR: hide email, use Settings icon
   ========================================================= */

header.tm-topbar[data-tm-topbar] #tm-user-email {
    display: none !important;
}

/* Settings icon button (same family as tm-btn-secondary) */
header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-icon {
    width: var(--tm-topbar-h);
    min-width: var(--tm-topbar-h);
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}

/* =========================================================
   Dark theme (base variables) — can expand later
   Apply by adding: html.tm-dark
   ========================================================= */

html.tm-dark {
    --tm-bg-main: #0f172a;
    --tm-bg-card: #111c33;
    --tm-border-soft: rgba(201,211,230,0.18);
    --tm-text-main: #e5e7eb;
    --tm-text-muted: rgba(229,231,235,0.70);
    --tm-scroll-track: rgba(255,255,255,0.08);
    --tm-scroll-thumb: rgba(255,255,255,0.20);
    /* topbar colours (match your style, just darker) */
    --tm-topbar-bg: #0f172a;
    --tm-topbar-blue: rgba(210,225,255,0.85);
    --tm-topbar-blue-strong: #e6f0ff;
    --tm-topbar-hover: rgba(70,130,180,0.16);
}

html.tm-dark .tm-trial-banner {
    border-color: #d6a600;
    background: linear-gradient(135deg, #fff08a 0%, #ffd400 100%);
    color: #08213f;
    box-shadow: 0 3px 12px rgba(0,0,0,0.32);
}

html.tm-dark .tm-trial-banner-days,
html.tm-dark .tm-trial-banner-detail,
html.tm-dark .tm-trial-banner-close {
    color: #08213f;
}

html.tm-dark .tm-trial-banner-expired {
    border-color: #fca5a5;
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
}

html.tm-dark .tm-trial-banner-expired .tm-trial-banner-days,
html.tm-dark .tm-trial-banner-expired .tm-trial-banner-detail {
    color: #ffffff;
}

/* =========================================
   Reports modal (Export) — narrower date inputs
   ========================================= */

#tm-reports-modal .tm-reports-dates {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

/* each date block */
#tm-reports-modal .tm-reports-date {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* label a bit tighter */
#tm-reports-modal .tm-reports-label2 {
    min-width: 44px;
}

/* ? make date inputs smaller */
#tm-reports-modal input[type="date"] {
    width: 170px !important;
    max-width: 170px !important;
}

/* ? if DateUI wraps and converts to text input */
#tm-reports-modal .tm-dateui-wrap {
    width: 170px !important;
    max-width: 170px !important;
}

#tm-reports-modal .tm-dateui-text {
    width: 170px !important;
    max-width: 170px !important;
}

#tm-reports-modal .tm-dateui-btn {
    color: var(--tm-text, #222) !important;
}

html.tm-dark #tm-reports-modal .tm-dateui-btn {
    color: var(--tm-text-main, #eaf2ff) !important;
}
/* =========================================================
   Date UI template color (dd/mm/yyyy when empty)
   ========================================================= */

.tm-dateui-wrap .tm-dateui-text:not(.tm-has-value) {
    color: #8a8a8a !important; /* grey template */
}

.tm-dateui-wrap .tm-dateui-text.tm-has-value {
    color: var(--tm-text, #222) !important; /* normal text */
}
/* =========================================================
   Invoices modal: Due Date (tm-dateui) disabled look
   - kai ne Custom: pilkiau + neklickinama (overlay text + button)
   ========================================================= */
#tm-inv-editor input.tm-dateui-text:disabled,
#tm-inv-editor .tm-dateui-text:disabled,
#tm-inv-editor .tm-dateui-text[disabled] {
    background: #f2f5fb !important;
    color: rgba(40, 55, 80, 0.55) !important;
    cursor: not-allowed !important;
}

#tm-inv-editor .tm-dateui-btn:disabled,
#tm-inv-editor .tm-dateui-btn[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* =========================================================
   TABLE ACTIVE ROW — same as VOR page
   ========================================================= */

table.tm-table tbody tr.active td,
table.tm-table tbody tr.tm-selected td,
table.tm-table tbody tr[aria-selected="true"] td {
    background: var(--tm-primary) !important;
    color: #ffffff !important;
}

/* hover must NOT override active */
table.tm-table tbody tr.active:hover td,
table.tm-table tbody tr.tm-selected:hover td,
table.tm-table tbody tr[aria-selected="true"]:hover td {
    background: var(--tm-primary) !important;
}

/* =========================================================
   Planner: hover list item -> highlight calendar day cell
   ========================================================= */
.tm-day {
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, filter 0.12s ease, background 0.12s ease;
    transform-origin: center;
}

    .tm-day.tm-day-hover-task {
        transform: scale(1.02);
        border-color: #f5c542 !important;
        box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.42);
        z-index: 3;
        font-weight: 600;
        filter: brightness(1.015);
    }

/* =========================================================
   Planner: calendar hover -> matching list rows
   same style as calendar day highlight
   ========================================================= */
#tm-past-list .tm-list-item.tm-list-hover-from-cal,
#tm-upcoming-list .tm-list-item.tm-list-hover-from-cal {
    transform: scale(1.035);
    transform-origin: center;
    outline-offset: -2px;
    z-index: 5;
    position: relative;
    /* slightly stronger text */
    font-weight: 600;
    filter: brightness(1.05);
}

#tm-past-list .tm-list-item,
#tm-upcoming-list .tm-list-item {
    transition: transform 0.12s ease;
}

/* Category colour bar at the start of each Past / Upcoming row */
.tm-list-item-color {
    display: inline-block;
    width: 2px;
    height: 8px;
    margin-right: 5px;
    border-radius: 1px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* =========================================================
   Planner search inputs - custom focus (remove browser black outline)
   ========================================================= */
#tm-past-search.tm-search,
#tm-upcoming-search.tm-search {
    border: 1px solid #b7c7df;
    border-radius: 3px;
    outline: none;
    box-shadow: none;
    background: #ffffff;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

    #tm-past-search.tm-search:focus,
    #tm-upcoming-search.tm-search:focus {
        outline: none;
        border-color: #4f88bd;
        box-shadow: 0 0 0 1px rgba(79,136,189,0.18);
        background: #ffffff;
    }

#tm-reminders-backdrop .tm-icon-btn {
    color: #ffffff;
}

    #tm-reminders-backdrop .tm-icon-btn svg {
        stroke: #ffffff;
    }

/* =========================
   Lookup manager list
   ========================= */

.tm-lookup-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-lookup-availability {
    position: relative;
    min-width: 0;
}

/* =========================
   Checkbox multi-select (company / driver pickers)
   Base copy. The shift planner and the Driver App carry their own identical,
   higher-specificity copies in their page <style>; these rules are what every
   other host (the tacho sidebar) renders from.
   ========================= */

.tm-scheduler-multi-select {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.tm-scheduler-multi-select-button {
    width: 100%;
    min-height: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--tm-input-border, #c3cfe8);
    border-radius: 2px;
    background: var(--tm-input-bg, #ffffff);
    color: var(--tm-text-main, #1f2933);
    padding: 0 52px 0 8px;
    font-size: 12px;
    line-height: 18px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.tm-scheduler-multi-select-button::after {
    content: "\25BE";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm-text-muted, #5b657a);
    pointer-events: none;
}

.tm-scheduler-multi-select-button:hover,
.tm-scheduler-multi-select-button:focus {
    outline: none;
    border-color: var(--tm-primary, #4682B4);
}

.tm-scheduler-multi-select-button[aria-expanded="true"] {
    border-color: var(--tm-primary, #4682B4);
    box-shadow: 0 0 0 2px rgba(70,130,180,0.18);
}

.tm-scheduler-multi-select-button[disabled] {
    opacity: 0.62;
    cursor: not-allowed;
}

.tm-scheduler-multi-select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 26000;
    max-height: 230px;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 4px;
    background: var(--tm-bg-card, #ffffff);
    box-shadow: 0 10px 22px rgba(10,18,32,0.18);
    box-sizing: border-box;
}

.tm-scheduler-multi-select-list[hidden] {
    display: none !important;
}

/* The phone layer later in this file gives the clear X a display of its own, so
   hiding it needs to outrank that - otherwise it shows with nothing selected. */
.tm-scheduler-multi-select .tm-scheduler-multi-select-clear[hidden],
.tm-scheduler-multi-select-clear[hidden] {
    display: none !important;
}

.tm-scheduler-multi-select-search {
    position: sticky;
    top: -4px;
    z-index: 1;
    padding: 2px 2px 6px 2px;
    margin: -4px -4px 2px -4px;
    background: var(--tm-bg-card, #ffffff);
}

.tm-scheduler-multi-select-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    background: var(--tm-input-bg, #ffffff);
    color: var(--tm-text-main, #1f2933);
    font-size: 12px;
    outline: none;
}

.tm-scheduler-multi-select-search-input:focus {
    border-color: var(--tm-primary, #4682B4);
    box-shadow: 0 0 0 2px rgba(70,130,180,0.18);
}

.tm-scheduler-multi-select-option,
.tm-scheduler-multi-select-empty {
    min-height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--tm-text-main, #1f2933);
    box-sizing: border-box;
}

.tm-scheduler-multi-select-option {
    cursor: pointer;
    user-select: none;
}

.tm-scheduler-multi-select-option:hover {
    background: rgba(70,130,180,0.14);
}

.tm-scheduler-multi-select-option.is-selected {
    background: rgba(70,130,180,0.10);
}

.tm-scheduler-multi-select-option input {
    margin: 0;
    flex: 0 0 auto;
}

.tm-scheduler-multi-select-empty {
    color: var(--tm-text-muted, #5b657a);
    cursor: default;
}

html.tm-dark .tm-scheduler-multi-select-list,
html.tm-dark .tm-scheduler-multi-select-button,
html.tm-dark .tm-scheduler-multi-select-search {
    background: var(--tm-bg-card, #0f1a2d);
    color: var(--tm-text-main, #eaf2ff);
    border-color: rgba(201,211,230,0.22);
}

html.tm-dark .tm-scheduler-multi-select-search-input {
    background: var(--tm-input-bg, #0f1726);
    color: var(--tm-text-main, #eaf2ff);
    border-color: var(--tm-input-border, rgba(201,211,230,0.22));
}

html.tm-dark .tm-scheduler-multi-select-option,
html.tm-dark .tm-scheduler-multi-select-empty {
    color: var(--tm-text-main, #eaf2ff);
}

html.tm-dark .tm-scheduler-multi-select-option.is-selected {
    background: rgba(70,130,180,0.24);
}

.tm-lookup-availability .tm-scheduler-multi-select {
    position: relative;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.tm-lookup-availability .tm-scheduler-multi-select-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    height: 32px;
    padding: 0 52px 0 8px;
    overflow: hidden;
    border: 1px solid var(--tm-input-border, #c3cfe8);
    border-radius: 2px;
    background: var(--tm-input-bg, #ffffff);
    color: var(--tm-text-main, #1f2933);
    font: 400 12px/18px "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.tm-lookup-availability .tm-scheduler-multi-select-button::after {
    content: "\25BE";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tm-text-muted, #5b657a);
    pointer-events: none;
}

.tm-lookup-availability .tm-scheduler-multi-select-button:hover,
.tm-lookup-availability .tm-scheduler-multi-select-button:focus {
    outline: none;
    border-color: var(--tm-primary, #4682B4);
    box-shadow: 0 0 0 1px rgba(70,130,180,0.14);
}

.tm-lookup-availability .tm-scheduler-multi-select-button[aria-expanded="true"] {
    border-color: var(--tm-primary, #4682B4);
    box-shadow: 0 0 0 2px rgba(70,130,180,0.18);
}

.tm-lookup-availability .tm-scheduler-multi-select-clear {
    position: absolute;
    z-index: 1;
    right: 24px;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--tm-text-muted, #aaa);
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 16px;
    cursor: pointer;
}

.tm-lookup-availability .tm-scheduler-multi-select-clear:hover {
    color: var(--tm-accent, #ff5b5b);
}

.tm-lookup-availability .tm-scheduler-multi-select-clear[hidden],
.tm-lookup-availability .tm-scheduler-multi-select-list[hidden] {
    display: none !important;
}

.tm-lookup-availability .tm-scheduler-multi-select-list {
    position: absolute;
    z-index: 26000;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 230px;
    overflow: auto;
    padding: 4px;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 4px;
    background: var(--tm-bg-card, #ffffff);
    box-shadow: 0 10px 22px rgba(10,18,32,0.18);
    box-sizing: border-box;
}

.tm-lookup-availability .tm-scheduler-multi-select-option,
.tm-lookup-availability .tm-scheduler-multi-select-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 3px;
    color: var(--tm-text-main, #1f2933);
    font-size: 12px;
    box-sizing: border-box;
}

.tm-lookup-availability .tm-scheduler-multi-select-option {
    cursor: pointer;
    user-select: none;
}

.tm-lookup-availability .tm-scheduler-multi-select-option:hover {
    background: rgba(70,130,180,0.14);
}

.tm-lookup-availability .tm-scheduler-multi-select-option.is-selected {
    background: rgba(70,130,180,0.10);
}

.tm-lookup-availability .tm-scheduler-multi-select-option input {
    flex: 0 0 auto;
    margin: 0;
}

.tm-lookup-availability .tm-scheduler-multi-select-empty {
    color: var(--tm-text-muted, #5b657a);
    cursor: default;
}

html.tm-dark .tm-lookup-availability .tm-scheduler-multi-select-list,
html.tm-dark .tm-lookup-availability .tm-scheduler-multi-select-button {
    background: var(--tm-input-bg, #0f1726);
    color: var(--tm-text-main, #eaf2ff);
    border-color: var(--tm-input-border, rgba(201,211,230,0.22));
}

html.tm-dark .tm-lookup-availability .tm-scheduler-multi-select-option.is-selected {
    background: rgba(70,130,180,0.24);
}

.tm-lookup-availability--dropup .tm-scheduler-multi-select-list {
    top: auto;
    bottom: calc(100% + 4px);
}

.tm-lookup-item {
    padding: 6px 8px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 12px;
    background: #ffffff;
    border: 1px solid transparent;
}

    .tm-lookup-item:hover {
        background: #dde5f7;
    }

    /* ACTIVE ROW */
    .tm-lookup-item.active {
        background: #cfdaf5;
        border-color: rgba(70,130,180,0.45);
        font-weight: 600;
    }

/* right-click context menu */
#tm-lookup-ctx {
    position: fixed;
    z-index: 20050;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--tm-border-soft);
    border-radius: 3px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    padding: 6px;
}

    #tm-lookup-ctx[hidden] {
        display: none !important;
    }

.tm-ctx-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 2px;
    font-size: 12px;
    color: var(--tm-text-main);
    text-align: left;
}

    .tm-ctx-item .tm-ctx-ico {
        flex: 0 0 18px;
        width: 18px;
        min-width: 18px;
        text-align: center;
        font-size: 13px;
        line-height: 1;
        opacity: .95;
        font-family: "Segoe UI Symbol","Segoe UI Emoji","Segoe UI",Tahoma,Arial,sans-serif;
    }

    .tm-ctx-item .tm-ctx-ico-edit {
        color: #111827;
    }

    .tm-ctx-item .tm-ctx-ico-document {
        color: #a78bca;
    }

    /* Same blue as the open/add icons: the old slate tone was all but invisible against the dark
       menu background and made the one send item look disabled next to its neighbours. */
    .tm-ctx-item .tm-ctx-ico-email {
        color: #2f80c0;
    }

    .tm-ctx-item .tm-ctx-ico-reminder {
        color: #ef4444;
    }

    .tm-ctx-item .tm-ctx-ico-check {
        color: #22b66f;
    }

    .tm-ctx-item .tm-ctx-ico-delete,
    .tm-ctx-item.tm-danger .tm-ctx-ico,
    .tm-ctx-item.tm-ctx-danger .tm-ctx-ico {
        color: #d32f2f;
    }

    .tm-ctx-item .tm-ctx-ico-add,
    .tm-ctx-item .tm-ctx-ico-open {
        color: #2f80c0;
    }

    .tm-ctx-item .tm-ctx-ico-time {
        color: #0f9f8f;
    }

    .tm-ctx-item .tm-ctx-ico-attach {
        color: #7c3aed;
    }

    .tm-ctx-item .tm-ctx-ico-calendar {
        color: #4682B4;
    }

    .tm-ctx-item .tm-ctx-ico-color {
        color: #d97706;
    }

    .tm-ctx-item .tm-ctx-ico-move {
        color: #64748b;
    }

    .tm-ctx-item .tm-ctx-ico-star {
        color: #c58a00;
    }

    .tm-ctx-item .tm-ctx-ico-error {
        color: #d9534f;
    }

    .tm-ctx-item .tm-ctx-txt {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tm-ctx-item:hover {
        background: #dde5f7;
    }

    .tm-ctx-item.tm-danger,
    .tm-ctx-item.tm-ctx-danger {
        color: #c62828;
        font-weight: 600;
    }

/* =========================================================
   DARK MODE FIX — GLOBAL
   Paste at END of app.css
   ========================================================= */

html.tm-dark {
    --tm-bg-main: #0b1220;
    --tm-bg-card: #111a2e;
    --tm-bg-card-2: #16233d;
    --tm-bg-soft: #0f172a;
    --tm-bg-soft-2: #1a2742;
    --tm-border-soft: rgba(201, 211, 230, 0.16);
    --tm-text-main: #e6edf7;
    --tm-text-muted: rgba(230, 237, 247, 0.68);
    --tm-scroll-track: rgba(255,255,255,0.06);
    --tm-scroll-thumb: rgba(255,255,255,0.18);
    --tm-table-head-bg: #223554;
    --tm-row-hover: rgba(70,130,180,0.16);
    --tm-row-active: rgba(70,130,180,0.24);
    --tm-input-bg: #0f1a2d;
    --tm-input-border: rgba(201,211,230,0.20);
}

    /* body ir pagrindas */
    html.tm-dark,
    html.tm-dark body {
        background: var(--tm-bg-main) !important;
        color: var(--tm-text-main) !important;
    }

        /* topbar */
        html.tm-dark .tm-topbar,
        html.tm-dark header.tm-topbar[data-tm-topbar] {
            background: var(--tm-bg-main) !important;
            color: var(--tm-text-main) !important;
            border-bottom: 1px solid var(--tm-border-soft) !important;
        }

        html.tm-dark header.tm-topbar[data-tm-topbar] .tm-top-actions {
            scrollbar-color: var(--tm-border-soft) transparent;
        }

        html.tm-dark header.tm-topbar[data-tm-topbar] .tm-top-actions::-webkit-scrollbar-thumb {
            background: var(--tm-border-soft);
        }

        /* pagrindiniai paneliai */
        html.tm-dark .tm-column,
        html.tm-dark .tm-panel,
        html.tm-dark .tm-defects-center,
        html.tm-dark .tm-modal,
        html.tm-dark .tm-small-modal,
        html.tm-dark .tm-modalbox {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

        /* planner side column headers */
        html.tm-dark .tm-column-left .tm-column-header,
        html.tm-dark .tm-column-right .tm-column-header {
            background: var(--tm-primary) !important;
            color: var(--tm-on-primary) !important;
            border-bottom-color: var(--tm-primary-dark) !important;
        }

        /* generic headers that were too bright */
        html.tm-dark .tm-column-header,
        html.tm-dark .tm-defects-toolbar,
        html.tm-dark .tm-actions,
        html.tm-dark .tm-defects-footer {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

        /* search / inputs / selects / textareas */
        html.tm-dark .tm-search,
        html.tm-dark .tm-input,
        html.tm-dark input,
        html.tm-dark select,
        html.tm-dark textarea {
            background: var(--tm-input-bg) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-input-border) !important;
        }

        html.tm-dark input:-webkit-autofill,
        html.tm-dark input:-webkit-autofill:hover,
        html.tm-dark input:-webkit-autofill:focus,
        html.tm-dark input:-webkit-autofill:active,
        html.tm-dark textarea:-webkit-autofill,
        html.tm-dark textarea:-webkit-autofill:hover,
        html.tm-dark textarea:-webkit-autofill:focus,
        html.tm-dark textarea:-webkit-autofill:active,
        html.tm-dark select:-webkit-autofill,
        html.tm-dark select:-webkit-autofill:hover,
        html.tm-dark select:-webkit-autofill:focus,
        html.tm-dark select:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px var(--tm-input-bg, #0f1a2d) inset !important;
            -webkit-text-fill-color: var(--tm-text-main, #e6edf7) !important;
            caret-color: var(--tm-text-main, #e6edf7) !important;
            border-color: var(--tm-input-border, rgba(201,211,230,0.20)) !important;
            color-scheme: dark;
            transition: background-color 9999s ease-out 0s;
        }

        html.tm-dark input:autofill,
        html.tm-dark textarea:autofill,
        html.tm-dark select:autofill {
            box-shadow: 0 0 0 1000px var(--tm-input-bg, #0f1a2d) inset !important;
            background-color: var(--tm-input-bg, #0f1a2d) !important;
            color: var(--tm-text-main, #e6edf7) !important;
            caret-color: var(--tm-text-main, #e6edf7) !important;
            border-color: var(--tm-input-border, rgba(201,211,230,0.20)) !important;
            color-scheme: dark;
        }
            html.tm-dark .tm-search::placeholder,
            html.tm-dark input::placeholder,
            html.tm-dark textarea::placeholder {
                color: var(--tm-text-muted) !important;
            }

        html.tm-dark .tm-search-clear {
            color: var(--tm-text-muted) !important;
        }

        /* planner lists */
        html.tm-dark .tm-list {
            background: var(--tm-bg-card) !important;
        }

        html.tm-dark .tm-list-item,
        html.tm-dark .tm-list-week-header,
        html.tm-dark .tm-company-item,
        html.tm-dark .tm-sidepanel-item {
            background: transparent !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

            html.tm-dark .tm-list-item:hover,
            html.tm-dark .tm-sidepanel-item:hover,
            html.tm-dark .tm-company-item:hover {
                background: var(--tm-row-hover) !important;
            }

            html.tm-dark .tm-sidepanel-item.active,
            html.tm-dark .tm-company-item.active,
            html.tm-dark .tm-list-item.active,
            html.tm-dark .tm-list-item[aria-selected="true"] {
                background: var(--tm-row-active) !important;
                color: var(--tm-text-main) !important;
                border-color: rgba(70,130,180,0.45) !important;
            }

        /* calendar */
        html.tm-dark .tm-month-header,
        html.tm-dark .tm-weekdays-row,
        html.tm-dark .tm-weeknum,
        html.tm-dark .tm-weeknum-header,
        html.tm-dark #tm-year-label {
            color: var(--tm-text-muted) !important;
        }

        html.tm-dark .tm-month.tm-month-current .tm-month-header {
            color: #ffffff !important;
        }

        html.tm-dark .tm-day {
            background: #17243d !important;
            border-color: rgba(201,211,230,0.12) !important;
            color: var(--tm-text-main) !important;
        }

            html.tm-dark .tm-day:hover {
                background: #21314f !important;
            }

        html.tm-dark .tm-day-outside {
            background: #101827 !important;
            opacity: 1 !important;
        }

            html.tm-dark .tm-day-outside .tm-day-number {
                color: rgba(230,237,247,0.30) !important;
            }

        /* all tables */
        html.tm-dark table,
        html.tm-dark .tm-table,
        html.tm-dark .tm-drivers-table,
        html.tm-dark #tm-inv-table {
            background: transparent !important;
            color: var(--tm-text-main) !important;
        }

            html.tm-dark thead th,
            html.tm-dark .tm-table thead th,
            html.tm-dark .tm-drivers-table thead th,
            html.tm-dark #tm-inv-table thead th,
            html.tm-dark #tm-veh-table thead th {
                background: var(--tm-table-head-bg) !important;
                color: var(--tm-text-main) !important;
                border-bottom: 1px solid var(--tm-border-soft) !important;
            }

            html.tm-dark tbody td,
            html.tm-dark .tm-table tbody td,
            html.tm-dark .tm-drivers-table tbody td,
            html.tm-dark #tm-inv-table tbody td,
            html.tm-dark #tm-veh-table tbody td {
                background: transparent !important;
                color: var(--tm-text-main) !important;
                border-bottom: 1px solid rgba(201,211,230,0.12) !important;
                border-right-color: rgba(255,255,255,0.04) !important;
            }

            html.tm-dark tbody tr:hover td,
            html.tm-dark .tm-table tbody tr:hover td,
            html.tm-dark .tm-drivers-table tbody tr:hover td,
            html.tm-dark #tm-inv-table tbody tr:hover td,
            html.tm-dark #tm-veh-table tbody tr:hover td {
                background: var(--tm-row-hover) !important;
            }

            html.tm-dark tbody tr.active td,
            html.tm-dark tbody tr.tm-selected td,
            html.tm-dark tbody tr[aria-selected="true"] td,
            html.tm-dark .tm-table tbody tr.active td,
            html.tm-dark .tm-table tbody tr.tm-selected td,
            html.tm-dark .tm-table tbody tr[aria-selected="true"] td {
                background: var(--tm-row-active) !important;
                color: var(--tm-text-main) !important;
            }

        /* completed page specific */
        html.tm-dark .tm-tablewrap,
        html.tm-dark .tm-drivers-table-wrap,
        html.tm-dark .tm-company-list {
            background: var(--tm-bg-card-2) !important;
            border-color: var(--tm-border-soft) !important;
        }

        /* modals */
        html.tm-dark .tm-modal-body,
        html.tm-dark .tm-body,
        html.tm-dark .tm-actions {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
        }

        html.tm-dark .tm-backdrop,
        html.tm-dark .tm-modal-backdrop,
        html.tm-dark .tm-driver-backdrop {
            background: rgba(0, 0, 0, 0.55) !important;
        }

        /* context menus / dropdowns / popup */
        html.tm-dark #tm-ctx-menu,
        html.tm-dark #tm-hc-popup,
        html.tm-dark .tm-ac-dd,
        html.tm-dark .tm-csel-list,
        html.tm-dark #tm-inv-menu {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

            html.tm-dark #tm-ctx-menu .tm-ctx-item,
            html.tm-dark .tm-ac-item,
            html.tm-dark .tm-csel-item,
            html.tm-dark #tm-inv-menu .tm-ctx-item {
                background: transparent !important;
                color: var(--tm-text-main) !important;
            }

                html.tm-dark #tm-ctx-menu .tm-ctx-item:hover,
                html.tm-dark .tm-ac-item:hover,
                html.tm-dark .tm-csel-item:hover,
                html.tm-dark #tm-inv-menu .tm-ctx-item:hover {
                    background: var(--tm-row-hover) !important;
                }

        /* scrollbars

           Chromium only switches an element to the custom (::-webkit-scrollbar) rendering path once
           ::-webkit-scrollbar itself carries a size - styling just the track and thumb leaves the
           default light scrollbar, arrow buttons and all, sitting on the dark page. So the size rule
           below is what actually makes the rest of this block take effect; without it only the
           handful of scrollers that declare their own width ever went dark.

           color-scheme on the root covers what the * selector cannot reach at all: native <select>
           popups, date pickers, and the viewport scrollbar before page CSS resolves. */
        html.tm-dark {
            color-scheme: dark;
        }

        html.tm-dark *::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        html.tm-dark *::-webkit-scrollbar-track {
            background: var(--tm-scroll-track) !important;
        }

        html.tm-dark *::-webkit-scrollbar-thumb {
            background: var(--tm-scroll-thumb) !important;
            border-radius: 8px;
        }

            html.tm-dark *::-webkit-scrollbar-thumb:hover {
                background: rgba(255,255,255,0.30) !important;
            }

        /* Both axes scrolling leaves a square where the two bars meet - unstyled, it stays light. */
        html.tm-dark *::-webkit-scrollbar-corner {
            background: var(--tm-scroll-track) !important;
        }

        /* Deliberately NOT setting scrollbar-color on the root: it is an inherited property, and once
           it holds a value Chromium switches that element to the standard-property path and ignores
           every ::-webkit-scrollbar rule on it - which would silently flatten the custom scrollbars
           the photo strips, the topbar strip and the week task list each define for themselves. The
           elements that set their own scrollbar-color are handled next to their own light rules. */

        /* The topbar overflow strip is deliberately a 6px sliver; keep it that way in dark too. */
        html.tm-dark .tm-top-actions::-webkit-scrollbar {
            height: 6px;
        }

        /* =========================================================
   DARK MODE FIX — PAGE SPECIFIC OVERRIDES
   Paste at END of app.css
   ========================================================= */

        html.tm-dark .tm-company-list,
        html.tm-dark .tm-drivers-company-list,
        html.tm-dark .tm-tablewrap,
        html.tm-dark .tm-defects-table-wrap,
        html.tm-dark .tm-vor-table-wrap {
            background: var(--tm-bg-card-2, #16233d) !important;
            border-color: var(--tm-border-soft) !important;
        }

        html.tm-dark .tm-company-item,
        html.tm-dark .tm-sidepanel-item,
        html.tm-dark .tm-list-item,
        html.tm-dark .tm-lookup-item {
            background: transparent !important;
            color: var(--tm-text-main) !important;
            border-color: rgba(201,211,230,0.12) !important;
        }

            html.tm-dark .tm-company-item:hover,
            html.tm-dark .tm-sidepanel-item:hover,
            html.tm-dark .tm-list-item:hover,
            html.tm-dark .tm-lookup-item:hover {
                background: var(--tm-row-hover, rgba(70,130,180,0.16)) !important;
            }

            html.tm-dark .tm-company-item.active,
            html.tm-dark .tm-company-item[aria-selected="true"],
            html.tm-dark .tm-sidepanel-item.active,
            html.tm-dark .tm-sidepanel-item.tm-selected,
            html.tm-dark .tm-sidepanel-item[aria-selected="true"],
            html.tm-dark .tm-list-item.active,
            html.tm-dark .tm-list-item.tm-selected,
            html.tm-dark .tm-list-item[aria-selected="true"],
            html.tm-dark .tm-lookup-item.active {
                background: var(--tm-primary) !important;
                color: #ffffff !important;
                border-color: rgba(110,168,220,0.45) !important;
                outline: none !important;
            }

        html.tm-dark .tm-search,
        html.tm-dark .tm-input,
        html.tm-dark input,
        html.tm-dark select,
        html.tm-dark textarea {
            background: var(--tm-input-bg, #0f1a2d) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        }

        html.tm-dark .tm-search-clear {
            background: transparent !important;
            color: var(--tm-text-muted) !important;
            border-color: rgba(201,211,230,0.20) !important;
        }

        html.tm-dark .tm-panel,
        html.tm-dark .tm-column,
        html.tm-dark .tm-defects-center,
        html.tm-dark .tm-modal,
        html.tm-dark .tm-modalbox,
        html.tm-dark .tm-small-modal,
        html.tm-dark #tm-inv-editor,
        html.tm-dark #tm-inv-settings,
        html.tm-dark #tm-inv-email,
        html.tm-dark #tm-inv-ext,
        html.tm-dark #tm-inv-extadd {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

        html.tm-dark .tm-modal-body,
        html.tm-dark .tm-body,
        html.tm-dark .tm-actions,
        html.tm-dark .tm-defects-toolbar,
        html.tm-dark .tm-toolbar,
        html.tm-dark .tm-vor-toolbar,
        html.tm-dark .tm-inv-toolbar {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

        html.tm-dark .tm-table thead th,
        html.tm-dark #tm-driver-table thead th,
        html.tm-dark #tm-defects-table thead th,
        html.tm-dark #tm-vor-table thead th,
        html.tm-dark #tm-inv-table thead th,
        html.tm-dark #tm-veh-table thead th,
        html.tm-dark #tm-table thead th {
            background: var(--tm-table-head-bg, #223554) !important;
            color: var(--tm-text-main) !important;
            border-bottom: 1px solid var(--tm-border-soft) !important;
        }

        html.tm-dark .tm-table tbody td,
        html.tm-dark #tm-driver-table tbody td,
        html.tm-dark #tm-defects-table tbody td,
        html.tm-dark #tm-vor-table tbody td,
        html.tm-dark #tm-inv-table tbody td,
        html.tm-dark #tm-veh-table tbody td,
        html.tm-dark #tm-table tbody td {
            background: transparent !important;
            color: var(--tm-text-main) !important;
            border-bottom: 1px solid rgba(201,211,230,0.12) !important;
        }

        html.tm-dark .tm-table tbody tr:hover td,
        html.tm-dark #tm-driver-table tbody tr:hover td,
        html.tm-dark #tm-defects-table tbody tr:hover td,
        html.tm-dark #tm-vor-table tbody tr:hover td,
        html.tm-dark #tm-inv-table tbody tr:hover td,
        html.tm-dark #tm-veh-table tbody tr:hover td,
        html.tm-dark #tm-table tbody tr:hover td {
            background: var(--tm-row-hover, rgba(70,130,180,0.16)) !important;
        }

        html.tm-dark .tm-table tbody tr.active td,
        html.tm-dark .tm-table tbody tr.tm-selected td,
        html.tm-dark .tm-table tbody tr[aria-selected="true"] td,
        html.tm-dark #tm-driver-table tbody tr.active td,
        html.tm-dark #tm-driver-table tbody tr.tm-selected td,
        html.tm-dark #tm-driver-table tbody tr[aria-selected="true"] td,
        html.tm-dark #tm-defects-table tbody tr.active td,
        html.tm-dark #tm-defects-table tbody tr.tm-selected td,
        html.tm-dark #tm-defects-table tbody tr[aria-selected="true"] td,
        html.tm-dark #tm-vor-table tbody tr.active td,
        html.tm-dark #tm-vor-table tbody tr.tm-selected td,
        html.tm-dark #tm-vor-table tbody tr[aria-selected="true"] td,
        html.tm-dark #tm-inv-table tbody tr.active td,
        html.tm-dark #tm-inv-table tbody tr.tm-selected td,
        html.tm-dark #tm-inv-table tbody tr[aria-selected="true"] td,
        html.tm-dark #tm-veh-table tbody tr.active td,
        html.tm-dark #tm-veh-table tbody tr.tm-selected td,
        html.tm-dark #tm-veh-table tbody tr[aria-selected="true"] td,
        html.tm-dark #tm-table tbody tr.active td,
        html.tm-dark #tm-table tbody tr.tm-selected td,
        html.tm-dark #tm-table tbody tr[aria-selected="true"] td {
            background: var(--tm-primary) !important;
            color: #ffffff !important;
        }

        html.tm-dark #tm-ctx-menu,
        html.tm-dark #tm-lookup-ctx,
        html.tm-dark #tm-inv-menu,
        html.tm-dark .tm-csel-list,
        html.tm-dark .tm-ac-dd {
            background: var(--tm-bg-card) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

            html.tm-dark #tm-ctx-menu .tm-ctx-item,
            html.tm-dark #tm-lookup-ctx .tm-ctx-item,
            html.tm-dark #tm-inv-menu .tm-ctx-item,
            html.tm-dark .tm-csel-item,
            html.tm-dark .tm-ac-item {
                background: transparent !important;
                color: var(--tm-text-main) !important;
            }

                html.tm-dark #tm-ctx-menu .tm-ctx-item:hover,
                html.tm-dark #tm-lookup-ctx .tm-ctx-item:hover,
                html.tm-dark #tm-inv-menu .tm-ctx-item:hover,
                html.tm-dark .tm-csel-item:hover,
                html.tm-dark .tm-ac-item:hover {
                    background: var(--tm-row-hover, rgba(70,130,180,0.16)) !important;
                }

            html.tm-dark #tm-ctx-menu .tm-ctx-item.tm-ctx-danger,
            html.tm-dark #tm-lookup-ctx .tm-ctx-item.tm-danger,
            html.tm-dark #tm-lookup-ctx .tm-ctx-item.tm-ctx-danger,
            html.tm-dark #tm-inv-menu .tm-ctx-item.tm-ctx-danger,
            html.tm-dark #tm-reminders-ctx .tm-ctx-item.tm-ctx-danger {
                color: var(--tm-error, #ff6b6b) !important;
                font-weight: 700;
            }

            html.tm-dark #tm-ctx-menu .tm-ctx-ico-edit,
            html.tm-dark #tm-lookup-ctx .tm-ctx-ico-edit,
            html.tm-dark #tm-inv-menu .tm-ctx-ico-edit,
            html.tm-dark #tm-reminders-ctx .tm-ctx-ico-edit {
                color: var(--tm-text-main, #e6edf7) !important;
            }

        /* =========================================================
   DARK MODE FIX — REMAINING MODALS
   ========================================================= */

        html.tm-dark #tm-task-backdrop .tm-modal-body input,
        html.tm-dark #tm-task-backdrop .tm-modal-body select,
        html.tm-dark #tm-task-backdrop .tm-modal-body textarea,
        html.tm-dark #tm-cat-backdrop .tm-modal-body input,
        html.tm-dark #tm-cat-backdrop .tm-modal-body select,
        html.tm-dark #tm-cat-backdrop .tm-modal-body textarea,
        html.tm-dark #tm-reminders-edit-backdrop input,
        html.tm-dark #tm-reminders-edit-backdrop select,
        html.tm-dark #tm-reminders-edit-backdrop textarea,
        html.tm-dark #tm-filter-backdrop select,
        html.tm-dark #tm-filter-backdrop .tm-fcsel-btn,
        html.tm-dark #tm-filter-backdrop .tm-ac-input {
            background: var(--tm-input-bg, #0f1a2d) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        }

        html.tm-dark #tm-reminders-backdrop .tm-rem-list,
        html.tm-dark #tm-reminders-ctx,
        html.tm-dark #tm-filter-backdrop .tm-fcsel-list,
        html.tm-dark #tm-cat-backdrop .tm-cat-item,
        html.tm-dark .tm-csel-list {
            background: var(--tm-bg-card, #111a2e) !important;
            color: var(--tm-text-main) !important;
            border-color: var(--tm-border-soft) !important;
        }

            html.tm-dark #tm-reminders-backdrop .tm-rem-item:hover,
            html.tm-dark #tm-reminders-ctx .tm-ctx-item:hover,
            html.tm-dark #tm-filter-backdrop .tm-fcsel-item:hover,
            html.tm-dark .tm-csel-item:hover,
            html.tm-dark .tm-csel-manage:hover {
                background: var(--tm-row-hover, rgba(70,130,180,0.16)) !important;
                color: var(--tm-text-main) !important;
            }

        html.tm-dark #tm-reminders-backdrop .tm-rem-item.selected,
        html.tm-dark #tm-filter-backdrop .tm-fcsel-item.selected,
        html.tm-dark .tm-csel-item.selected {
            background: var(--tm-primary, #4682B4) !important;
            color: #fff !important;
        }

            html.tm-dark #tm-reminders-backdrop .tm-rem-item.selected .tm-rem-sub {
                color: rgba(255,255,255,0.88) !important;
                opacity: 1 !important;
            }

        /* =========================================================
   DARK FIX — Add New Task custom category dropdown
   ========================================================= */

        html.tm-dark #tm-task-backdrop .tm-csel-btn {
            background: var(--tm-input-bg, #0f1a2d) !important;
            color: var(--tm-text-main, #e6edf7) !important;
            border: 1px solid var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        }

        html.tm-dark #tm-task-backdrop .tm-csel-list {
            background: var(--tm-bg-card, #111a2e) !important;
            color: var(--tm-text-main, #e6edf7) !important;
            border: 1px solid var(--tm-border-soft, rgba(201,211,230,0.16)) !important;
            box-shadow: 0 10px 24px rgba(0,0,0,0.45) !important;
        }

        html.tm-dark #tm-task-backdrop .tm-csel-item,
        html.tm-dark #tm-task-backdrop .tm-csel-manage {
            background: transparent !important;
            color: var(--tm-text-main, #e6edf7) !important;
        }

            html.tm-dark #tm-task-backdrop .tm-csel-item:hover,
            html.tm-dark #tm-task-backdrop .tm-csel-manage:hover {
                background: var(--tm-row-hover, rgba(70,130,180,0.16)) !important;
                color: var(--tm-text-main, #e6edf7) !important;
            }

            html.tm-dark #tm-task-backdrop .tm-csel-item.selected {
                background: var(--tm-primary, #4682B4) !important;
                color: #ffffff !important;
            }

        html.tm-dark #tm-task-backdrop .tm-csel-sep {
            background: rgba(255,255,255,0.08) !important;
        }

        html.tm-dark #tm-task-backdrop .tm-csel-caret {
            color: var(--tm-text-muted, rgba(230,237,247,0.68)) !important;
        }

        html.tm-dark #tm-task-backdrop .tm-csel-sq {
            border-color: rgba(255,255,255,0.18) !important;
        }

        /* =========================================================
   DARK FIX — Invoice modal inputs
   ========================================================= */

        html.tm-dark #tm-inv-editor input,
        html.tm-dark #tm-inv-editor select,
        html.tm-dark #tm-inv-editor textarea,
        html.tm-dark #tm-inv-editor .tm-input,
        html.tm-dark #tm-inv-editor .tm-ac-input,
        html.tm-dark #tm-inv-editor .tm-date-input,
        html.tm-dark #tm-inv-editor .tm-num-input {
            background: var(--tm-input-bg, #0f1a2d) !important;
            color: var(--tm-text-main, #e6edf7) !important;
            border: 1px solid var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        }

            /* placeholder */
            html.tm-dark #tm-inv-editor input::placeholder,
            html.tm-dark #tm-inv-editor textarea::placeholder {
                color: var(--tm-text-muted, rgba(230,237,247,0.55)) !important;
            }

            /* disabled fields */
            html.tm-dark #tm-inv-editor input:disabled,
            html.tm-dark #tm-inv-editor select:disabled {
                background: #17243d !important;
                color: rgba(230,237,247,0.65) !important;
            }

        /* autocomplete dropdown */
        html.tm-dark #tm-inv-editor .tm-ac-dd {
            background: var(--tm-bg-card, #111a2e) !important;
            border: 1px solid var(--tm-border-soft, rgba(201,211,230,0.16)) !important;
        }

        html.tm-dark #tm-inv-editor .tm-ac-item {
            color: var(--tm-text-main, #e6edf7) !important;
        }

            html.tm-dark #tm-inv-editor .tm-ac-item:hover {
                background: var(--tm-row-hover, rgba(70,130,180,0.16)) !important;
            }



/* =========================================
   Custom DateUI selection visibility
   ========================================= */
.tm-dateui-text::selection {
    background: rgba(70,130,180,0.35);
    color: inherit;
}

html.tm-dark .tm-dateui-text {
    color: var(--tm-text-main, #e5e7eb) !important;
    -webkit-text-fill-color: var(--tm-text-main, #e5e7eb) !important;
}

    html.tm-dark .tm-dateui-text::selection {
        background: rgba(110,168,220,0.45) !important;
        color: #ffffff !important;
    }

    html.tm-dark .tm-dateui-text:not(.tm-has-value) {
        color: rgba(229,231,235,0.58) !important;
        -webkit-text-fill-color: rgba(229,231,235,0.58) !important;
    }

    html.tm-dark .tm-dateui-text:focus {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }

/* =========================================
   Defects modal - dark mode file button fix
   ========================================= */
html.tm-dark #tm-defects-modal input[type="file"] {
    background: transparent !important;
    color: transparent !important;
}

    html.tm-dark #tm-defects-modal input[type="file"]::file-selector-button {
        background: var(--tm-input-bg, #0f1a2d) !important;
        color: var(--tm-text-main, #eaf2ff) !important;
        border: 1px solid var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

        html.tm-dark #tm-defects-modal input[type="file"]::file-selector-button:hover {
            background: rgba(70,130,180,0.12) !important;
            border-color: var(--tm-primary, #4682B4) !important;
        }

    html.tm-dark #tm-defects-modal input[type="file"]::-webkit-file-upload-button {
        background: var(--tm-input-bg, #0f1a2d) !important;
        color: var(--tm-text-main, #eaf2ff) !important;
        border: 1px solid var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

        html.tm-dark #tm-defects-modal input[type="file"]::-webkit-file-upload-button:hover {
            background: rgba(70,130,180,0.12) !important;
            border-color: var(--tm-primary, #4682B4) !important;
        }

/* =========================================
   Top-right settings / user button fix
   ========================================= */
.tm-topbar-right button,
.tm-topbar-right .tm-icon-btn,
#btnSettings {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--tm-border-soft, rgba(201,211,230,0.20));
    background: var(--tm-input-bg, #0f1a2d);
    color: var(--tm-text-main, #eaf2ff);
    padding: 0;
}

    /* icon inside */
    .tm-topbar-right button svg,
    .tm-topbar-right .tm-icon-btn svg,
    #btnSettings svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    /* hover */
    .tm-topbar-right button:hover,
    .tm-topbar-right .tm-icon-btn:hover,
    #btnSettings:hover {
        background: rgba(70,130,180,0.12);
        border-color: var(--tm-primary, #4682B4);
    }

    /* active page highlight consistency */
    .tm-topbar-right button:active,
    .tm-topbar-right .tm-icon-btn:active,
    #btnSettings:active {
        transform: translateY(1px);
    }

#tm-user-settings,
#tm-notifications-btn {
    position: relative;
    overflow: visible;
    color: #1f2937;
}

#tm-user-settings {
    font-size: 0 !important;
}

#tm-user-settings::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0 2c-2.67 0-8 1.34-8 4v1.5c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5V18c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4Zm0 2c-2.67 0-8 1.34-8 4v1.5c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5V18c0-2.66-5.33-4-8-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#tm-notifications-btn .tm-notifications-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

#tm-notifications-btn .tm-notifications-icon svg,
#tm-notifications-btn .tm-notifications-icon svg path {
    fill: currentColor;
}

html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-right .tm-btn.tm-btn-secondary,
html.tm-dark header.tm-topbar[data-tm-topbar] #tm-user-settings,
html.tm-dark header.tm-topbar[data-tm-topbar] #tm-notifications-btn {
    background: #111c33;
    border-color: rgba(201,211,230,0.28);
    color: #e6f0ff;
    filter: none;
}

html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-right .tm-btn.tm-btn-secondary:hover,
html.tm-dark header.tm-topbar[data-tm-topbar] #tm-user-settings:hover,
html.tm-dark header.tm-topbar[data-tm-topbar] #tm-notifications-btn:hover {
    background: rgba(70,130,180,0.18);
    border-color: rgba(137,183,226,0.55);
    color: #ffffff;
    filter: none;
}

.tm-notifications-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Count of Driver App defects nobody has reviewed yet, sitting on the Defects nav button. */
.tm-nav-badge {
    display: inline-block;
    margin-left: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle;
}

.tm-notifications-popover {
    position: fixed;
    z-index: 200500;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 14px;
    background: rgba(255,255,255,0.98);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.tm-notifications-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.tm-notifications-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}


.tm-notifications-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.tm-notifications-view-all {
    border: 0;
    background: transparent;
    color: #2f6fa6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    font-family: inherit;
}

.tm-notifications-view-all:hover {
    color: #1f5f96;
}

.tm-notifications-list {
    max-height: min(68vh, 560px);
    overflow: auto;
    padding: 8px;
}

.tm-notifications-empty {
    padding: 18px 12px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.tm-notification-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    color: inherit;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.tm-notification-item + .tm-notification-item {
    margin-top: 6px;
}

.tm-notification-item:hover {
    background: rgba(47,111,166,.06);
}

.tm-notification-item[href] {
    cursor: pointer;
}

.tm-notification-item[href]:focus-visible,
.tm-notification-history-item[href]:focus-visible {
    outline: 2px solid rgba(47, 111, 166, 0.72);
    outline-offset: -2px;
}

.tm-notification-item.is-unread {
    background: linear-gradient(90deg, rgba(47,111,166,.12), rgba(47,111,166,.04));
}

.tm-notification-glyph {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(47,111,166,.12);
    color: #1f5f96;
    font-size: 13px;
    font-weight: 800;
}

.tm-notification-body {
    min-width: 0;
}

.tm-notification-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.tm-notification-title {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.tm-notification-time {
    flex-shrink: 0;
    font-size: 11px;
    color: #64748b;
}

.tm-notification-message {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}

.tm-notification-company {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #245b89;
}

.tm-notification-meta {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
}
body.tm-notifications-modal-open {
    overflow: hidden;
}

.tm-notifications-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(15, 23, 42, 0.46);
}

.tm-notifications-modal-backdrop[hidden] {
    display: none !important;
}

.tm-notifications-modal {
    width: min(980px, calc(100vw - 24px));
    height: min(760px, calc(100vh - 24px));
    height: min(760px, calc(100dvh - 24px));
    max-height: min(760px, calc(100vh - 24px));
    max-height: min(760px, calc(100dvh - 24px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    background: var(--tm-bg-card, #ffffff);
    color: var(--tm-text-main, #1f2933);
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.tm-notifications-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 0;
    background: var(--tm-primary, #4682B4);
    color: var(--tm-on-primary, #ffffff);
}

.tm-notifications-modal-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--tm-on-primary, #ffffff);
}

.tm-notifications-modal-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: rgba(255,255,255,0.86);
}

.tm-notifications-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.tm-notifications-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    background: #f8fbff;
}

.tm-notifications-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.tm-notifications-search {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 30px 5px 9px;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    background: var(--tm-bg-card, #ffffff);
    color: var(--tm-text-main, #1f2933);
    font: inherit;
    font-size: 12px;
    outline: none;
}

.tm-notifications-search-clear[hidden] {
    display: none !important;
}

.tm-notifications-search-wrap .tm-notifications-search-clear {
    right: 7px;
}

.tm-notifications-search:focus {
    border-color: var(--tm-primary, #4682B4);
    box-shadow: 0 0 0 2px rgba(70,130,180,0.14);
}

.tm-notifications-search:disabled {
    opacity: 0.62;
    cursor: progress;
}

.tm-notifications-toolbar .tm-notifications-export {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--tm-primary-dark, #225ca2);
    border-radius: 3px;
    background: var(--tm-primary, #4682B4);
    color: var(--tm-on-primary, #ffffff);
    -webkit-text-fill-color: var(--tm-on-primary, #ffffff);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
}

.tm-notifications-toolbar .tm-notifications-export:hover {
    background: #3a709c;
    color: var(--tm-on-primary, #ffffff);
    -webkit-text-fill-color: var(--tm-on-primary, #ffffff);
}


.tm-notifications-history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0;
}

.tm-notification-history-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.tm-notification-history-item[href] {
    cursor: pointer;
}

.tm-notification-history-item[href]:hover {
    background: rgba(47, 111, 166, 0.05);
}

.tm-notification-history-item:last-child {
    border-bottom: 0;
}

.tm-notification-history-item + .tm-notification-history-item {
    margin-top: 0;
}

.tm-notification-history-item.is-unread {
    background: rgba(47, 111, 166, 0.06);
}

.tm-notification-history-top {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.tm-notification-history-main {
    min-width: 0;
}

.tm-notification-history-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tm-notification-history-foot {
    margin-top: 6px;
    font-size: 11px;
    color: #64748b;
}
@media (max-width: 640px) {
    .tm-notifications-modal-backdrop {
        align-items: stretch;
        padding: 10px;
    }

    .tm-notifications-modal {
        width: 100%;
        height: calc(100vh - 20px);
        height: calc(100dvh - 20px);
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .tm-notification-history-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tm-notifications-modal-actions {
        width: auto;
        justify-content: flex-end;
    }

    .tm-notifications-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tm-notifications-search-wrap,
    .tm-notifications-toolbar .tm-notifications-export {
        width: 100%;
    }

}

html.tm-dark .tm-notifications-popover {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15,23,42,0.98);
    box-shadow: 0 18px 38px rgba(0,0,0,.42);
}

html.tm-dark .tm-notifications-head {
    border-bottom-color: rgba(148, 163, 184, 0.14);
}

html.tm-dark .tm-notifications-title,
html.tm-dark .tm-notification-title {
    color: #e2e8f0;
}

html.tm-dark .tm-notifications-subtitle,
html.tm-dark .tm-notification-time,
html.tm-dark .tm-notification-meta,
html.tm-dark .tm-notifications-empty {
    color: #94a3b8;
}

html.tm-dark .tm-notification-message {
    color: #cbd5e1;
}

html.tm-dark .tm-notification-company {
    color: #93c5fd;
}

html.tm-dark .tm-notification-item:hover {
    background: rgba(71, 122, 190, 0.10);
}

html.tm-dark .tm-notification-item.is-unread {
    background: linear-gradient(90deg, rgba(71,122,190,0.20), rgba(71,122,190,0.08));
}

html.tm-dark .tm-notification-glyph {
    background: rgba(71,122,190,0.18);
    color: #dbeafe;
}

html.tm-dark .tm-notifications-view-all {
    color: #dbeafe;
}

html.tm-dark .tm-notifications-modal {
    border-color: rgba(201,211,230,.22);
    background: var(--tm-bg-card, #111a2e);
    color: var(--tm-text-main, #e6edf7);
    box-shadow: 0 18px 40px rgba(0,0,0,.42);
}

html.tm-dark .tm-notifications-modal-head {
    background: var(--tm-primary, #4682B4);
}

html.tm-dark .tm-notifications-toolbar {
    border-bottom-color: rgba(201,211,230,.16);
    background: rgba(15,23,42,0.32);
}

html.tm-dark .tm-notifications-search {
    border-color: rgba(201,211,230,.22);
    background: #0f172a;
    color: #e6edf7;
}

html.tm-dark .tm-notifications-search::placeholder {
    color: #94a3b8;
}

html.tm-dark .tm-notifications-modal-title {
    color: var(--tm-on-primary, #ffffff);
}

html.tm-dark .tm-notifications-modal-subtitle {
    color: rgba(255,255,255,0.86);
}

html.tm-dark .tm-notification-history-item {
    border-bottom-color: rgba(201,211,230,.16);
}

html.tm-dark .tm-notification-history-item.is-unread {
    background: rgba(71,122,190,0.12);
}

html.tm-dark .tm-notification-history-foot {
    color: #94a3b8;
}
/* prevent theme flash on page load */
html.tm-dark {
    background: #0b1220;
}

html.tm-light {
    background: #ffffff;
}

body {
    background: inherit;
}

.tm-dateui-wrap .tm-dateui-text {
    padding-right: 70px !important;
}

.tm-dateui-wrap .tm-dateui-clear {
    color: var(--tm-text-muted, #6b7280);
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

    .tm-dateui-wrap .tm-dateui-clear:hover {
        color: var(--tm-accent, #ff5b5b) !important;
        background: transparent !important;
        border: none !important;
    }


/* =========================================================
   Drivers modal upload icon button
   ========================================================= */
.tm-driver-upload-slot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    justify-self: start;
}

.tm-driver-upload-icon-btn {
    min-width: 44px !important;
    width: 44px !important;
    height: 30px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .tm-driver-upload-icon-btn .tm-driver-upload-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        line-height: 0;
    }

        .tm-driver-upload-icon-btn .tm-driver-upload-icon svg {
            display: block;
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

    /* =========================================================
   Drivers upload icon — force white icon on blue button
   ========================================================= */
    .tm-driver-upload-icon-btn,
    .tm-driver-upload-icon-btn:visited,
    .tm-driver-upload-icon-btn:hover,
    .tm-driver-upload-icon-btn:active,
    .tm-driver-upload-icon-btn:focus {
        color: #ffffff !important;
    }

        .tm-driver-upload-icon-btn .tm-driver-upload-icon,
        .tm-driver-upload-icon-btn .tm-driver-upload-icon svg,
        .tm-driver-upload-icon-btn .tm-driver-upload-icon path {
            color: #ffffff !important;
            fill: #ffffff !important;
            stroke: none !important;
        }

html.tm-light .tm-driver-upload-icon-btn,
html.tm-light .tm-driver-upload-icon-btn:hover,
html.tm-light .tm-driver-upload-icon-btn:active,
html.tm-light .tm-driver-upload-icon-btn:focus {
    color: #ffffff !important;
}

/* =========================================================
   GLOBAL MODAL FOCUS — ONE STYLE FOR ALL MODALS
   Paste at the END of app.css
   ========================================================= */

:root {
    --tm-modal-focus-border: rgba(34,92,162,0.55);
    --tm-modal-focus-ring: 0 0 0 3px rgba(70,130,180,0.18);
}

html.tm-dark {
    --tm-modal-focus-border: rgba(110,168,220,0.62);
    --tm-modal-focus-ring: 0 0 0 3px rgba(110,168,220,0.20);
}

/* ===== all standard modal fields ===== */
.tm-modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.tm-modal select:focus,
.tm-modal textarea:focus,
.tm-modal .tm-input:focus,
.tm-modal .tm-select:focus,
.tm-modal .tm-textarea:focus,
.tm-modal .tm-date-input:focus,
.tm-modal .tm-num-input:focus,
.tm-modal .tm-ac-input:focus,
.tm-modal .tm-csel-btn:focus,
.tm-modal .tm-csel-btn:focus-visible,
.tm-modal .tm-fcsel-btn:focus,
.tm-modal .tm-fcsel-btn:focus-visible,
.tm-modal [contenteditable="true"]:focus,
.tm-modal .tm-dateui-text:focus,
/* ===== filter modal ===== */
#tm-filter-backdrop select:focus,
#tm-filter-backdrop .tm-ac-input:focus,
#tm-filter-backdrop .tm-fcsel-btn:focus,
#tm-filter-backdrop .tm-fcsel-btn:focus-visible,
/* ===== invoice modal overrides (beats inline page CSS) ===== */
html body #tm-inv-editor .tm-inv-editor-body input:focus,
html body #tm-inv-editor .tm-inv-editor-body select:focus,
html body #tm-inv-editor .tm-inv-editor-body textarea:focus,
html body #tm-inv-editor .tm-inv-line input:focus,
html body #tm-inv-editor .tm-inv-line select:focus,
html body #tm-inv-editor [contenteditable="true"]:focus,
html body #tm-inv-settings [contenteditable="true"]:focus,
html body #tm-inv-email [contenteditable="true"]:focus,
html body #tm-inv-ext [contenteditable="true"]:focus,
html body #tm-inv-extadd [contenteditable="true"]:focus {
    outline: none !important;
    border-color: var(--tm-modal-focus-border) !important;
    box-shadow: var(--tm-modal-focus-ring) !important;
}

/* ===== opened searchable dropdowns should look the same ===== */
.tm-modal .tm-ac-wrap.open .tm-ac-input,
#tm-filter-backdrop .tm-ac-wrap.open .tm-ac-input {
    outline: none !important;
    border-color: var(--tm-modal-focus-border) !important;
    box-shadow: var(--tm-modal-focus-ring) !important;
}

/* ===== opened category buttons too ===== */
.tm-modal .tm-csel-wrap.open .tm-csel-btn,
.tm-modal .tm-fcsel-wrap.open .tm-fcsel-btn,
#tm-filter-backdrop .tm-fcsel-wrap.open .tm-fcsel-btn {
    outline: none !important;
    border-color: var(--tm-modal-focus-border) !important;
    box-shadow: var(--tm-modal-focus-ring) !important;
}

/* ===== no ugly browser black outline anywhere inside modals ===== */
.tm-modal input:focus-visible,
.tm-modal select:focus-visible,
.tm-modal textarea:focus-visible,
.tm-modal button:focus-visible,
.tm-modal [contenteditable="true"]:focus-visible,
#tm-filter-backdrop *:focus-visible {
    outline: none !important;
}

/* =========================================================
   Defects modal – VOR action button
   ========================================================= */
#tm-defects-modal #tm-defect-send-vor {
    display: none !important;
}

#tm-defects-modal .tm-defect-vor-btn.is-active {
    background: var(--tm-primary-dark) !important;
    border-color: var(--tm-primary-dark) !important;
    color: #ffffff !important;
}

/* =========================================================
   VOR modal photos — same system/style as defects
   ========================================================= */

#tm-vor-modal .tm-photo-title {
    font-weight: 600;
    font-size: 12px;
    color: var(--tm-text-main, #1f2933);
    margin-bottom: 4px;
}

#tm-vor-photos-strip {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin-top: 0;
}

#tm-vor-modal .tm-photo {
    position: relative;
    width: 92px;
    height: 62px;
    border: 1px solid #c3cfe8;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

    #tm-vor-modal .tm-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: zoom-in;
    }

#tm-vor-modal .tm-photo-del {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.22);
    border-bottom: 1px solid rgba(255,255,255,0.22);
    background: #d9534f;
    color: #fff;
    border-radius: 0 0 0 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    box-shadow: none;
}

    #tm-vor-modal .tm-photo-del:hover {
        background: #c9302c;
        color: #fff;
    }

    #tm-vor-modal .tm-photo-del:active {
        background: #b52b27;
        color: #fff;
    }

/* file input look like defects */
#tm-vor-modal input[type="file"] {
    font-size: 0 !important;
    color: transparent !important;
}

    #tm-vor-modal input[type="file"]::file-selector-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border: 1px solid #c3cfe8 !important;
        background: #fff !important;
        color: var(--tm-text-main, #1f2933) !important;
        border-radius: 2px !important;
        cursor: pointer !important;
        margin-right: 10px !important;
    }

        #tm-vor-modal input[type="file"]::file-selector-button:hover {
            background: rgba(70,130,180,0.08) !important;
        }

    #tm-vor-modal input[type="file"]::-webkit-file-upload-button {
        font-size: 12px !important;
        padding: 6px 10px !important;
        border: 1px solid #c3cfe8 !important;
        background: #fff !important;
        color: var(--tm-text-main, #1f2933) !important;
        border-radius: 2px !important;
        cursor: pointer !important;
        margin-right: 10px !important;
    }

        #tm-vor-modal input[type="file"]::-webkit-file-upload-button:hover {
            background: rgba(70,130,180,0.08) !important;
        }

/* preview */
#tm-vor-photo-preview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10060;
    padding: 24px 24px 40px 24px;
}

    #tm-vor-photo-preview-backdrop[hidden] {
        display: none !important;
    }

#tm-vor-photo-preview-dialog {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
}

#tm-vor-photo-preview-stage {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border-radius: 6px;
    cursor: zoom-in;
    user-select: none;
    line-height: 0;
}

    #tm-vor-photo-preview-stage.is-zoomed {
        cursor: grab;
    }

    #tm-vor-photo-preview-stage.is-dragging {
        cursor: grabbing;
    }

#tm-vor-photo-preview-image {
    display: block;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    background: #fff;
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
}

#tm-vor-photo-preview-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
    z-index: 5;
    align-items: center;
}

#tm-vor-photo-preview-download,
#tm-vor-photo-preview-close {
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(20,20,20,0.68);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

#tm-vor-photo-preview-download {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
}

#tm-vor-photo-preview-close {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    font-size: 16px;
    flex: 0 0 30px;
}

    #tm-vor-photo-preview-download:hover,
    #tm-vor-photo-preview-close:hover {
        background: rgba(20,20,20,0.86);
    }    
    
    
    /* dark */
html.tm-dark #tm-vor-modal input[type="file"] {
    background: transparent !important;
    color: transparent !important;
}

    html.tm-dark #tm-vor-modal input[type="file"]::file-selector-button {
        background: var(--tm-input-bg, #0f1a2d) !important;
        color: var(--tm-text-main, #eaf2ff) !important;
        border: 1px solid var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

        html.tm-dark #tm-vor-modal input[type="file"]::file-selector-button:hover {
            background: rgba(70,130,180,0.12) !important;
            border-color: var(--tm-primary, #4682B4) !important;
        }

    html.tm-dark #tm-vor-modal input[type="file"]::-webkit-file-upload-button {
        background: var(--tm-input-bg, #0f1a2d) !important;
        color: var(--tm-text-main, #eaf2ff) !important;
        border: 1px solid var(--tm-input-border, rgba(201,211,230,0.20)) !important;
        border-radius: 2px !important;
        box-shadow: none !important;
    }

        html.tm-dark #tm-vor-modal input[type="file"]::-webkit-file-upload-button:hover {
            background: rgba(70,130,180,0.12) !important;
            border-color: var(--tm-primary, #4682B4) !important;
        }

.tm-vor-badge {
    color: #c62828;
    font-weight: 700;
}

/* Driver/vehicle event marked as completed: the event stays listed, with this badge. */
.tm-event-done-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    color: #2e7d32;
    vertical-align: -0.15em;
    cursor: help;
}

html.tm-dark .tm-event-done-badge {
    color: #81c784;
}

.tm-week-task-text .tm-event-done-badge svg {
    width: 10px;
    height: 10px;
}

/* Past / Upcoming rows: tick / note icons pinned to the right edge (same place
   as the Completed page paperclip) so every row's date stays in one column. */
.tm-list-item.tm-list-item-has-icons {
    position: relative;
    padding-right: 20px;
}

.tm-list-item.tm-list-item-has-two-icons {
    padding-right: 36px;
}

    .tm-list-item.tm-list-item-has-icons > .tm-list-item-icons {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .tm-list-item-icons > .tm-event-done-badge,
    .tm-list-item-icons > .tm-task-note-icon {
        margin: 0;
        vertical-align: 0;
    }

/* recurring hover only for calendar cells */

.tm-day.tm-day-hover-related {
    transform: scale(1.015);
    border-color: rgba(245, 197, 66, 0.58) !important;
    box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.26);
    z-index: 2;
    filter: brightness(1.01);
}
/* =========================================================
   DARK MODE — softer table row hover
   ========================================================= */

html.tm-dark .tm-table tbody tr:hover td,
html.tm-dark .tm-drivers-table tbody tr:hover td,
html.tm-dark #tm-driver-table tbody tr:hover td,
html.tm-dark #tm-defects-table tbody tr:hover td,
html.tm-dark #tm-vor-table tbody tr:hover td,
html.tm-dark #tm-inv-table tbody tr:hover td,
html.tm-dark #tm-veh-table tbody tr:hover td,
html.tm-dark #tm-table tbody tr:hover td {
    background: rgba(70,130,180,0.07) !important;
}

/* selected/active rows stay strong */
html.tm-dark .tm-table tbody tr.active:hover td,
html.tm-dark .tm-table tbody tr.tm-selected:hover td,
html.tm-dark .tm-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark .tm-drivers-table tbody tr.active:hover td,
html.tm-dark .tm-drivers-table tbody tr.tm-selected:hover td,
html.tm-dark .tm-drivers-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark #tm-driver-table tbody tr.active:hover td,
html.tm-dark #tm-driver-table tbody tr.tm-selected:hover td,
html.tm-dark #tm-driver-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark #tm-defects-table tbody tr.active:hover td,
html.tm-dark #tm-defects-table tbody tr.tm-selected:hover td,
html.tm-dark #tm-defects-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark #tm-vor-table tbody tr.active:hover td,
html.tm-dark #tm-vor-table tbody tr.tm-selected:hover td,
html.tm-dark #tm-vor-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark #tm-inv-table tbody tr.active:hover td,
html.tm-dark #tm-inv-table tbody tr.tm-selected:hover td,
html.tm-dark #tm-inv-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark #tm-veh-table tbody tr.active:hover td,
html.tm-dark #tm-veh-table tbody tr.tm-selected:hover td,
html.tm-dark #tm-veh-table tbody tr[aria-selected="true"]:hover td,
html.tm-dark #tm-table tbody tr.active:hover td,
html.tm-dark #tm-table tbody tr.tm-selected:hover td,
html.tm-dark #tm-table tbody tr[aria-selected="true"]:hover td {
    background: var(--tm-primary) !important;
}

/* planner list header clear filter button */

.tm-column-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

    .tm-column-title .tm-title-wrap {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1.15;
    }

    .tm-column-title .tm-title-main {
        font: inherit;
        font-weight: 700;
        color: inherit;
    }

    .tm-column-title .tm-title-filtered {
        margin-top: 2px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        color: rgba(255,255,255,0.92);
        word-break: break-word;
    }

    .tm-column-title .tm-list-filter-clear {
        flex: 0 0 auto;
        align-self: flex-start;
        margin-top: 0;
        border: 1px solid var(--tm-yellow-action-border, #c9a800);
        background: var(--tm-yellow-action-bg, linear-gradient(180deg, #fde88a 0%, #fcdb6c 50%, #f5c830 100%));
        color: var(--tm-yellow-action-text, #3a2800);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        padding: 4px 8px;
        border-radius: 3px;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, transform .05s ease;
    }

        .tm-column-title .tm-list-filter-clear:hover {
            background: var(--tm-yellow-action-bg-hover, linear-gradient(180deg, #feee99 0%, #fde27a 50%, #f8d040 100%));
            border-color: var(--tm-yellow-action-border-hover, #b89400);
        }

        .tm-column-title .tm-list-filter-clear:active {
            transform: translateY(1px);
        }

html.tm-dark .tm-column-title .tm-list-filter-clear {
    background: var(--tm-yellow-action-bg, linear-gradient(180deg, #fde88a 0%, #fcdb6c 50%, #f5c830 100%));
    border-color: var(--tm-yellow-action-border, #c9a800);
    color: var(--tm-yellow-action-text, #3a2800);
}

    html.tm-dark .tm-column-title .tm-list-filter-clear:hover {
        background: var(--tm-yellow-action-bg-hover, linear-gradient(180deg, #feee99 0%, #fde27a 50%, #f8d040 100%));
        border-color: var(--tm-yellow-action-border-hover, #b89400);
    }

#tm-inv-table tbody td {
    vertical-align: middle;
}

    #tm-inv-table tbody td span {
        vertical-align: middle;
    }

/* =========================================================
   Defects + VOR modal file buttons — use TM button style
   ========================================================= */

#tm-defects-modal input[type="file"],
#tm-vor-modal input[type="file"] {
    width: auto !important;
    max-width: 220px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0 !important; /* hide filename text */
    color: transparent !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

    /* Chromium / Edge */
    #tm-defects-modal input[type="file"]::file-selector-button,
    #tm-vor-modal input[type="file"]::file-selector-button {
        appearance: none !important;
        -webkit-appearance: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        border: 1px solid var(--tm-primary-dark, #225ca2) !important;
        border-radius: 3px !important;
        background: var(--tm-primary, #4682B4) !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: background .15s ease, border-color .15s ease, transform .05s ease !important;
    }

        #tm-defects-modal input[type="file"]::file-selector-button:hover,
        #tm-vor-modal input[type="file"]::file-selector-button:hover {
            background: #3a709c !important;
            border-color: var(--tm-primary-dark, #225ca2) !important;
        }

        #tm-defects-modal input[type="file"]::file-selector-button:active,
        #tm-vor-modal input[type="file"]::file-selector-button:active {
            transform: translateY(1px) !important;
        }

    /* Safari / old WebKit */
    #tm-defects-modal input[type="file"]::-webkit-file-upload-button,
    #tm-vor-modal input[type="file"]::-webkit-file-upload-button {
        appearance: none !important;
        -webkit-appearance: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        border: 1px solid var(--tm-primary-dark, #225ca2) !important;
        border-radius: 3px !important;
        background: var(--tm-primary, #4682B4) !important;
        color: #fff !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        cursor: pointer !important;
        box-shadow: none !important;
        transition: background .15s ease, border-color .15s ease, transform .05s ease !important;
    }

        #tm-defects-modal input[type="file"]::-webkit-file-upload-button:hover,
        #tm-vor-modal input[type="file"]::-webkit-file-upload-button:hover {
            background: #3a709c !important;
            border-color: var(--tm-primary-dark, #225ca2) !important;
        }

        #tm-defects-modal input[type="file"]::-webkit-file-upload-button:active,
        #tm-vor-modal input[type="file"]::-webkit-file-upload-button:active {
            transform: translateY(1px) !important;
        }

/* =========================================================
   Defects modal bottom actions
   ========================================================= */
#tm-defects-modal .tm-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 8px 16px;
}

#tm-defects-modal .tm-modal-actions-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

#tm-defects-modal .tm-modal-save-msg {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: #c62828;
    -webkit-text-fill-color: #c62828;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.2;
}

html.tm-dark #tm-defects-modal .tm-modal-save-msg {
    color: #ff7b7b;
    -webkit-text-fill-color: #ff7b7b;
}



#tm-defects-modal .tm-btn-danger,
#tm-defects-modal .tm-defect-vor-btn {
    border: 1px solid #b42318 !important;
    background: #d92d20 !important;
    color: #fff !important;
}

    #tm-defects-modal .tm-btn-danger:hover,
    #tm-defects-modal .tm-defect-vor-btn:hover {
        background: #b42318 !important;
        border-color: #912018 !important;
    }

    #tm-defects-modal .tm-defect-vor-btn.is-active {
        background: #912018 !important;
        border-color: #7a1b15 !important;
        color: #fff !important;
    }



/* =========================================================
   Clients vehicle modal: show validation message
   ========================================================= */
#tm-modal-vehicle .tm-veh-save-msg {
    color: #c62828;
    font-weight: 800;
    font-size: 12px;
    line-height: 1.25;
    padding: 0 0 10px 0;
}

/* Fleet names are typed in capitals, but the "e.g." hint stays as written. */
#tm-veh-fleet-name::placeholder,
#tm-planner-veh-fleet-name::placeholder {
    text-transform: none;
}

#tm-modal-vehicle .tm-veh-reg-lookup-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#tm-modal-vehicle .tm-veh-reg-lookup-row .tm-input {
    flex: 1 1 auto;
    min-width: 0;
}

#tm-modal-vehicle .tm-veh-lookup-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

#tm-veh-tbody .tm-date-expired {
    color: #c62828 !important;
    font-weight: 600;
}

#tm-veh-tbody .tm-date-warn {
    color: #b45309 !important;
    font-weight: 600;
}

html.tm-dark #tm-veh-tbody .tm-date-expired {
    color: #ff7b7b !important;
}

html.tm-dark #tm-veh-tbody .tm-date-warn {
    color: #fbbf24 !important;
}

@media (max-width: 560px) {
    #tm-modal-vehicle .tm-veh-reg-lookup-row {
        flex-wrap: wrap;
    }

    #tm-modal-vehicle .tm-veh-lookup-btn {
        width: 100%;
    }
}

html.tm-dark #tm-modal-vehicle .tm-veh-save-msg {
    color: #ff7b7b;
}

/* Lookup result window (vehicle Lookup) - what was filled + the plating certificate.
   Opens over the vehicle modal (10055), like Vehicle documents. */
#tm-veh-lookup-backdrop.tm-backdrop {
    z-index: 10070;
}

#tm-veh-lookup-backdrop.tm-backdrop[hidden] {
    display: none !important;
}

.tm-veh-lookup-modal {
    width: min(540px, calc(100vw - 32px));
}

.tm-veh-lookup-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 6px;
}

.tm-veh-lookup-list li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    line-height: 1.35;
}

.tm-veh-lookup-list .tm-veh-lookup-mark {
    font-weight: 800;
    text-align: center;
}

.tm-veh-lookup-list .is-ok .tm-veh-lookup-mark { color: var(--tm-success, #1a8f3a) !important; }
.tm-veh-lookup-list .is-miss .tm-veh-lookup-mark { color: #b45309 !important; }
.tm-veh-lookup-list .is-bad .tm-veh-lookup-mark { color: #c62828 !important; }
html.tm-dark .tm-veh-lookup-list .is-ok .tm-veh-lookup-mark { color: #7ed6a0 !important; }
html.tm-dark .tm-veh-lookup-list .is-miss .tm-veh-lookup-mark { color: #fbbf24 !important; }
html.tm-dark .tm-veh-lookup-list .is-bad .tm-veh-lookup-mark { color: #ff7b7b !important; }

/* MOT due soon (orange) / overdue (red): the whole line, same colours as the
   vehicles table's MOT column (.tm-date-warn / .tm-date-expired). */
.tm-veh-lookup-list .is-warn,
.tm-veh-lookup-list .is-warn * { color: #b45309 !important; font-weight: 600; }
.tm-veh-lookup-list .is-late,
.tm-veh-lookup-list .is-late * { color: #c62828 !important; font-weight: 600; }
html.tm-dark .tm-veh-lookup-list .is-warn,
html.tm-dark .tm-veh-lookup-list .is-warn * { color: #fbbf24 !important; }
html.tm-dark .tm-veh-lookup-list .is-late,
html.tm-dark .tm-veh-lookup-list .is-late * { color: #ff7b7b !important; }
.tm-veh-lookup-list .is-warn .tm-veh-lookup-mark,
.tm-veh-lookup-list .is-late .tm-veh-lookup-mark { font-weight: 800; }
/* The note under the line ("MOT overdue.") takes the line's colour too, not muted grey. */
.tm-veh-lookup-list li.is-warn .tm-veh-lookup-note { color: #b45309 !important; }
.tm-veh-lookup-list li.is-late .tm-veh-lookup-note { color: #c62828 !important; }
html.tm-dark .tm-veh-lookup-list li.is-warn .tm-veh-lookup-note { color: #fbbf24 !important; }
html.tm-dark .tm-veh-lookup-list li.is-late .tm-veh-lookup-note { color: #ff7b7b !important; }

.tm-veh-lookup-list .tm-veh-lookup-note {
    display: block;
    color: var(--tm-text-muted) !important;
    font-size: 12px !important;
}

.tm-veh-lookup-section {
    border-top: 1px solid var(--tm-border-soft, #dfe3ea);
    padding-top: 12px;
}

.tm-veh-lookup-section-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.tm-veh-lookup-hint {
    margin: 0 0 10px;
    color: var(--tm-text-muted) !important;
    line-height: 1.4;
}

.tm-veh-lookup-plating {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 10px;
}

.tm-veh-lookup-drop {
    margin-bottom: 10px;
}

/* Certificate uploaded: solid green box with the file name, so it no longer
   looks like it is still asking for the file. */
.tm-veh-lookup-drop.is-done {
    border-style: solid;
    border-color: rgba(46,125,50,.55);
    background: rgba(46,125,50,.06);
}

.tm-veh-lookup-drop-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tm-veh-lookup-drop-done[hidden],
.tm-veh-lookup-drop .tm-driver-upload-dropzone-inner[hidden] { display: none; }

.tm-veh-lookup-drop-done strong { overflow-wrap: anywhere; }

.tm-veh-lookup-drop-done-icon { color: #2e7d32 !important; }

html.tm-dark .tm-veh-lookup-drop.is-done {
    border-color: rgba(129,199,132,.55);
    background: rgba(129,199,132,.08);
}

html.tm-dark .tm-veh-lookup-drop-done-icon { color: #81c784 !important; }

.tm-veh-lookup-drop.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* =========================================
   GLOBAL — softer placeholders in dark theme
   ========================================= */
html.tm-dark .tm-input::placeholder,
html.tm-dark input::placeholder,
html.tm-dark textarea::placeholder {
    color: rgba(234, 242, 255, 0.34) !important;
    opacity: 1 !important;
}

/* optional: date inputs slightly softer when empty-looking */
html.tm-dark input[type="date"],
html.tm-dark input[type="datetime-local"],
html.tm-dark input[type="month"],
html.tm-dark input[type="week"] {
    color: rgba(234, 242, 255, 0.68) !important;
}

/* calendar icon in dark mode */
html.tm-dark input[type="date"]::-webkit-calendar-picker-indicator,
html.tm-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html.tm-dark input[type="month"]::-webkit-calendar-picker-indicator,
html.tm-dark input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 0.72;
    filter: invert(0.86);
}

/* =========================================================
   Attachment modals — trash icon fix
   Clients + Completed + Drivers
   Paste at END of app.css
   ========================================================= */

.tm-driver-upload-item-actions {
    align-items: center;
}

    .tm-driver-upload-item-actions .tm-driver-upload-delete,
    .tm-driver-upload-item-actions .tm-veh-doc-delete,
    #tm-driver-admin-policies-list .tm-driver-upload-item-actions button[data-policy-action="delete"],
    #tm-completed-attach-list .tm-driver-upload-item-actions button[data-action="delete"] {
        width: 38px !important;
        min-width: 38px !important;
        height: 30px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: middle !important;
        line-height: 0 !important;
        font-size: 0 !important;
        color: #ffffff !important;
    }

        .tm-driver-upload-item-actions .tm-driver-upload-delete svg,
        .tm-driver-upload-item-actions .tm-veh-doc-delete svg,
        #tm-driver-admin-policies-list .tm-driver-upload-item-actions button[data-policy-action="delete"] svg,
        #tm-completed-attach-list .tm-driver-upload-item-actions button[data-action="delete"] svg {
            display: block !important;
            width: 16px !important;
            height: 16px !important;
            margin: 0 !important;
            flex: 0 0 16px !important;
            color: #ffffff !important;
            fill: #ffffff !important;
            pointer-events: none !important;
            transform: translateY(0) !important;
        }

            .tm-driver-upload-item-actions .tm-driver-upload-delete svg path,
            .tm-driver-upload-item-actions .tm-veh-doc-delete svg path,
            #tm-driver-admin-policies-list .tm-driver-upload-item-actions button[data-policy-action="delete"] svg path,
            #tm-completed-attach-list .tm-driver-upload-item-actions button[data-action="delete"] svg path {
                fill: #ffffff !important;
            }

        .tm-driver-upload-item-actions .tm-driver-upload-delete:hover,
        .tm-driver-upload-item-actions .tm-driver-upload-delete:focus,
        .tm-driver-upload-item-actions .tm-driver-upload-delete:active,
        .tm-driver-upload-item-actions .tm-veh-doc-delete:hover,
        .tm-driver-upload-item-actions .tm-veh-doc-delete:focus,
        .tm-driver-upload-item-actions .tm-veh-doc-delete:active,
        #tm-completed-attach-list .tm-driver-upload-item-actions button[data-action="delete"]:hover,
        #tm-completed-attach-list .tm-driver-upload-item-actions button[data-action="delete"]:focus,
        #tm-completed-attach-list .tm-driver-upload-item-actions button[data-action="delete"]:active,
        #tm-driver-admin-policies-list .tm-driver-upload-item-actions button[data-policy-action="delete"]:hover,
        #tm-driver-admin-policies-list .tm-driver-upload-item-actions button[data-policy-action="delete"]:focus,
        #tm-driver-admin-policies-list .tm-driver-upload-item-actions button[data-policy-action="delete"]:active {
            color: #ffffff !important;
        }

/* =========================================================
   VOR modal bottom validation message
   ========================================================= */
#tm-vor-modal .tm-modal-save-msg,
#tm-vor-modal #tm-vor-modal-save-msg {
    margin-left: auto;
    color: #c62828 !important;
    -webkit-text-fill-color: #c62828 !important;
    font-weight: 800 !important;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
}

html.tm-dark #tm-vor-modal .tm-modal-save-msg,
html.tm-dark #tm-vor-modal #tm-vor-modal-save-msg {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
}


/* =========================================================
   Planner calendar zoom views
   ========================================================= */

.tm-calendar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 8px 0 8px;
    margin: 0;
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    background: var(--tm-bg-main, #ffffff);
    pointer-events: auto;
}

    .tm-calendar-header .tm-year-btn,
    .tm-calendar-header .tm-year-today {
        min-width: 30px;
    }

.tm-year-today,
#tm-year-label {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--tm-primary-dark, #225ca2);
    background: var(--tm-primary, #4682B4) !important;
    color: var(--tm-on-primary, #ffd38a) !important;
    min-height: 22px;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

    #tm-year-label:hover,
    .tm-year-today:hover {
        background: #3a709c !important;
        color: var(--tm-on-primary, #ffd38a) !important;
        text-decoration: none !important;
    }

#tm-year-zoom-in,
#tm-year-zoom-out {
    font-size: 13px;
    padding: 0;
}

    #tm-year-zoom-in:disabled,
    #tm-year-zoom-out:disabled {
        opacity: 1;
        cursor: default;
        color: var(--tm-on-primary, #ffd38a) !important;
        background: var(--tm-primary, #4682B4) !important;
        border-color: var(--tm-primary-dark, #225ca2) !important;
        box-shadow: none !important;
    }

#tm-year-prev,
#tm-year-next,
#tm-year-zoom-in,
#tm-year-zoom-out {
    width: 30px;
    min-width: 30px;
    height: 22px;
    min-height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex: 0 0 30px;
    font-weight: 700;
}

#tm-year-label,
.tm-year-today {
    min-width: 62px;
    flex: 0 0 auto;
}

#tm-year-prev,
#tm-year-next,
#tm-year-zoom-in,
#tm-year-zoom-out {
    background: var(--tm-primary, #4682B4) !important;
    color: var(--tm-on-primary, #ffd38a) !important;
    border-color: var(--tm-primary-dark, #225ca2) !important;
}

    #tm-year-prev:hover,
    #tm-year-next:hover,
    #tm-year-zoom-in:hover,
    #tm-year-zoom-out:hover {
        background: #3a709c !important;
        color: var(--tm-on-primary, #ffd38a) !important;
        border-color: var(--tm-primary-dark, #225ca2) !important;
        box-shadow: none !important;
    }

#tm-year-prev:active,
#tm-year-next:active,
#tm-year-label:active,
#tm-year-zoom-in:active,
#tm-year-zoom-out:active {
    transform: translateY(1px);
}

.tm-calendar.tm-calendar-view-month,
.tm-calendar.tm-calendar-view-month-row,
.tm-calendar.tm-calendar-view-week {
    padding-top: 0;
}

.tm-calendar.tm-calendar-view-year,
.tm-calendar.tm-calendar-view-month {
    display: block;
    height: auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.tm-calendar.tm-calendar-view-year {
    padding-top: 0;
    padding-bottom: 4px;
}

.tm-calendar.tm-calendar-view-month {
    padding-top: 54px;
}

.tm-month-grid.tm-month-grid-single {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
}

.tm-month.tm-month-single {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 2px 4px 2px;
    font-size: 12px;
}

    .tm-month.tm-month-single .tm-month-header {
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        padding: 0 0 8px 0;
        color: var(--tm-primary-dark, #225ca2);
    }

    .tm-month.tm-month-single .tm-month-weekdays {
        padding: 0 0 4px 0;
    }

    .tm-month.tm-month-single .tm-weekdays-row,
    .tm-month.tm-month-single .tm-week-row {
        grid-template-columns: 28px repeat(7, minmax(0, 1fr));
        gap: 4px;
    }

    .tm-month.tm-month-single .tm-weekdays-row {
        align-items: center;
        font-size: 11px;
    }

    .tm-month.tm-month-single .tm-weeknum-header,
    .tm-month.tm-month-single .tm-weeknum {
        font-size: 10px;
        text-align: center;
        padding-right: 0;
    }

    .tm-month.tm-month-single .tm-month-weeks {
        display: block;
        min-height: 0;
    }

    .tm-month.tm-month-single .tm-weeks {
        display: grid;
        grid-template-rows: none;
        gap: 4px;
    }

    .tm-month.tm-month-single .tm-week-row {
        margin-bottom: 0;
        min-height: 0;
    }

    .tm-day.tm-day-large,
    .tm-month.tm-month-single .tm-day {
        height: auto;
        min-height: 0;
        aspect-ratio: 1.8 / 1;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 12px;
    }

        .tm-day.tm-day-large .tm-day-number,
        .tm-month.tm-month-single .tm-day-number {
            position: static;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: clamp(14px, 1.2vw, 20px);
            font-weight: 700;
            line-height: 1;
            text-align: center;
        }

        .tm-day.tm-day-large .tm-day-bars,
        .tm-month.tm-month-single .tm-day-bars {
            left: 4px;
            top: 4px;
            bottom: 4px;
            width: 6px;
            min-width: 6px;
            max-width: 6px;
            border-radius: 4px;
        }

    .tm-month.tm-month-single .tm-day-outside .tm-day-number {
        opacity: 0.65;
    }

/* =========================
   WEEK VIEW
   ========================= */

.tm-calendar.tm-calendar-view-week {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.tm-week-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 10px 0 3px 0;
}

.tm-week-view-wc {
    flex: 0 0 auto;
    width: min(960px, calc(100% - 120px));
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--tm-primary-dark, #225ca2);
    margin: 0 auto 8px auto;
}

.tm-week-view-rows {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 6px;
    width: min(960px, calc(100% - 120px));
    margin: 0 auto;
}

.tm-week-row-item {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.tm-day.tm-week-day-row.tm-week-day-with-head {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 3px 6px 3px 102px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 8px;
    overflow: hidden;
    background: #f6f0d9;
    border: 1px solid #d7d9e6;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

    .tm-day.tm-week-day-row.tm-week-day-with-head:hover {
        background: #f8f3e2;
        border-color: #c8d3ea;
    }

.tm-day.tm-week-day-row .tm-day-number {
    display: none !important;
}

.tm-day.tm-week-day-row .tm-day-bars {
    display: none !important;
}

.tm-week-row-head {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 94px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 5px 8px 5px 10px;
    color: var(--tm-text-main, #1f2933);
    border-radius: 8px 0 0 8px;
    transition: background 120ms ease, color 120ms ease;
}

    .tm-week-row-head span {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: var(--tm-text-muted, #5b657a);
        line-height: 1.08;
    }

.tm-week-row-head strong {
        display: block;
        margin-top: 3px;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        color: var(--tm-text-main, #1f2933);
    }

.tm-week-row-head.tm-calendar-weekend span {
    color: #a55b50;
}

.tm-week-row-head.tm-calendar-weekend strong {
    color: #7f443d;
}

.tm-day.tm-week-day-row.tm-calendar-weekend:not(.tm-day-today):not(.tm-day-color-fill) {
    background: #fff0eb;
    border-color: #e6c7c1;
}

.tm-day.tm-week-day-row.tm-calendar-weekend:not(.tm-day-today):not(.tm-day-color-fill):hover {
    background: #faddd6;
    border-color: #dbaca4;
}

.tm-week-task-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding-right: 0;
    justify-content: flex-start;
}

    .tm-week-task-list::-webkit-scrollbar {
        width: 8px;
    }

    .tm-week-task-list::-webkit-scrollbar-track {
        background: var(--tm-scroll-track, #d4dbea);
        border-radius: 999px;
    }

    .tm-week-task-list::-webkit-scrollbar-thumb {
        background: var(--tm-scroll-thumb, #9caed3);
        border-radius: 999px;
    }

.tm-week-task-list {
    scrollbar-width: thin;
    scrollbar-color: var(--tm-scroll-thumb, #9caed3) var(--tm-scroll-track, #d4dbea);
}

.tm-week-task-item {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 0 0 auto;
    padding: 2px 6px;
    margin: 0;
    border-radius: 5px;
    border: 1px solid #d8dceb;
    background: rgba(255,255,255,0.82) !important;
    box-shadow: none;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

    .tm-week-task-item:hover {
        background: #ffffff !important;
        border-color: #9fb8dd;
        box-shadow: 0 0 0 1px rgba(70,130,180,0.14);
        transform: none;
    }

.tm-week-task-color {
    display: block;
    width: 6px;
    height: 14px;
    border-radius: 999px;
    flex: 0 0 6px;
}

.tm-week-task-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1;
    color: var(--tm-text-main, #1f2933);
    font-weight: 500;
}

    .tm-week-task-text .tm-vor-badge {
        font-size: 9px;
    }

/* kai tik 1–3 eventai, scroll nerodyti ir viskas telpa gražiai */
.tm-week-task-list:has(.tm-week-task-item:nth-child(-n+3):last-child),
.tm-week-task-list.tm-week-task-list-fit-3 {
    overflow-y: hidden;
    padding-right: 0;
}

/* =========================
   DARK MODE
   ========================= */

html.tm-dark .tm-month.tm-month-single .tm-day,
html.tm-dark .tm-day.tm-week-day,
html.tm-dark .tm-day.tm-week-day-row {
    background: #151d30;
    border-color: #33415c;
}

    html.tm-dark .tm-day.tm-week-day-row.tm-week-day-with-head {
        background: #162133;
        border-color: #33415c;
    }

        html.tm-dark .tm-day.tm-week-day-row.tm-week-day-with-head:hover {
            background: #1a2740;
            border-color: #496082;
        }

html.tm-dark .tm-day.tm-week-day-row.tm-calendar-weekend:not(.tm-day-today):not(.tm-day-color-fill) {
    background: #251d27;
    border-color: #5c4655;
}

html.tm-dark .tm-day.tm-week-day-row.tm-calendar-weekend:not(.tm-day-today):not(.tm-day-color-fill):hover {
    background: #31232f;
    border-color: #7b5966;
}

html.tm-dark .tm-week-view-wc {
    color: #89b7e2;
}

html.tm-dark .tm-week-row-head strong {
    color: #e5edf8;
}

html.tm-dark .tm-week-row-head span {
    color: #b9c7db;
}

html.tm-dark .tm-weekdays-row .tm-calendar-weekend {
    color: rgba(232, 127, 115, 0.92);
}

html.tm-dark .tm-day.tm-calendar-weekend:not(.tm-day-outside):not(.tm-day-today):not(.tm-day-color-fill) {
    background: #251d27;
    border-color: #5c4655;
}

html.tm-dark .tm-day.tm-calendar-weekend:not(.tm-day-outside):not(.tm-day-today):not(.tm-day-color-fill):hover {
    background: #31232f;
    border-color: #7b5966;
}

html.tm-dark .tm-week-row-head.tm-calendar-weekend span {
    color: #e5a198;
}

html.tm-dark .tm-week-row-head.tm-calendar-weekend strong {
    color: #f1c0ba;
}

html.tm-dark .tm-week-task-list::-webkit-scrollbar-track {
    background: #1a2335;
}

html.tm-dark .tm-week-task-list::-webkit-scrollbar-thumb {
    background: #4d6286;
}

html.tm-dark .tm-week-task-list {
    scrollbar-color: #4d6286 #1a2335;
}

html.tm-dark .tm-week-task-item {
    background: rgba(11,18,32,0.52) !important;
    border-color: #33415c;
}

    html.tm-dark .tm-week-task-item:hover {
        background: rgba(17,28,44,0.92) !important;
        border-color: #6c8fcb;
        box-shadow: 0 0 0 1px rgba(108,143,203,0.18);
    }

html.tm-dark .tm-week-task-text {
    color: #e5edf8;
}

html.tm-dark #tm-year-label,
html.tm-dark .tm-year-today {
    color: var(--tm-on-primary) !important;
}

/* =========================
   MONTH ROW VIEW
   ========================= */

.tm-calendar.tm-calendar-view-month-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 0 8px 0;
    min-width: 0;
}

.tm-month-row-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0 0 2px 0;
    width: min(100%, 1160px);
    margin: 0 auto;
}

.tm-month-row-title {
    text-align: center;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: rgba(34, 92, 162, 0.92);
}

.tm-month-row-header,
.tm-month-row-grid {
    display: grid;
    grid-template-columns: 26px repeat(37, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    width: 100%;
}

.tm-month-row-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: 4px;
    background: transparent;
}

.tm-month-row-header-spacer {
    position: sticky;
    left: 0;
    z-index: 6;
    background: transparent;
    border-radius: 6px;
}

.tm-month-row-weekday-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14px;
    min-width: 0;
    padding: 0 1px;
    font-size: 7px;
    font-weight: 600;
    line-height: 1;
    color: rgba(91, 101, 122, 0.68);
    text-transform: uppercase;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
    white-space: nowrap;
}

.tm-month-row-body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.tm-month-row-label {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 1px;
    min-height: 24px;
    min-width: 0;
    padding: 0 2px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    text-align: right;
}

.tm-month-row-label strong {
    font-size: 10px;
    font-weight: 650;
    line-height: 1.1;
    color: rgba(31, 41, 51, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-month-row-label span {
    font-size: 8px;
    line-height: 1;
    color: rgba(91, 101, 122, 0.7);
}

.tm-day.tm-month-row-day {
    min-height: 28px;
    height: 28px;
    min-width: 0;
    padding: 0;
    border-radius: 3px;
    font-size: 9px;
    overflow: hidden;
    background: #fff7e8;
    border-color: #e7dcc2;
}

.tm-day.tm-month-row-day .tm-day-number {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
}

.tm-day.tm-month-row-day .tm-day-bars {
    left: 1px;
    top: 1px;
    bottom: 1px;
    width: 4px;
    min-width: 4px;
    max-width: 4px;
    border-radius: 2px;
}

.tm-month-row-blank {
    background: rgba(122, 136, 160, 0.018);
    border-color: rgba(91, 101, 122, 0.12);
    border-style: solid;
    opacity: 0.34;
}

.tm-month-row-weekday-cell.tm-month-row-weekend {
    background: transparent;
    color: rgba(186, 63, 52, 0.78);
    font-weight: 800;
}

.tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank) {
    background: #fff0eb;
    border-color: #edc7c0;
}

.tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not(.tm-day-color-fill):hover {
    background: #fbded7;
    border-color: #deafa7;
}

.tm-day.tm-month-row-day.tm-day-outside,
.tm-month-row-blank,
.tm-month-row-blank.tm-month-row-weekend {
    background: rgba(122, 136, 160, 0.018);
    border-color: rgba(91, 101, 122, 0.12);
    border-style: solid;
    opacity: 0.3;
}

.tm-day.tm-month-row-day.tm-day-outside.tm-month-row-weekend {
    background: rgba(122, 136, 160, 0.018);
    border-color: rgba(91, 101, 122, 0.12);
    border-style: solid;
    opacity: 0.3;
}

html.tm-dark .tm-month-row-title {
    color: rgba(137, 183, 226, 0.94);
}

html.tm-dark .tm-month-row-header {
    background: transparent;
}

html.tm-dark .tm-month-row-header-spacer {
    background: transparent;
}

html.tm-dark .tm-month-row-weekday-cell {
    background: transparent;
    color: rgba(185, 199, 219, 0.72);
}

html.tm-dark .tm-month-row-label {
    background: transparent;
    border-color: transparent;
}

html.tm-dark .tm-month-row-label strong {
    color: rgba(229, 237, 248, 0.92);
}

html.tm-dark .tm-month-row-label span {
    color: rgba(185, 199, 219, 0.72);
}

html.tm-dark .tm-day.tm-month-row-day {
    background: #152032;
    border-color: #2d3a54;
}

    html.tm-dark .tm-day.tm-month-row-day:hover {
        background: #18253b;
        border-color: #425472;
    }

html.tm-dark .tm-month-row-weekday-cell.tm-month-row-weekend {
    background: transparent;
    color: rgba(232, 127, 115, 0.92);
    font-weight: 800;
}

html.tm-dark .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank) {
    background: #251d27;
    border-color: #5c4655;
}

html.tm-dark .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not(.tm-day-color-fill):hover {
    background: #31232f;
    border-color: #7b5966;
}

html.tm-dark .tm-month-row-blank {
    background: rgba(185, 199, 219, 0.015);
    border-color: rgba(185, 199, 219, 0.12);
    opacity: 0.22;
}

html.tm-dark .tm-day.tm-month-row-day.tm-day-outside,
html.tm-dark .tm-month-row-blank,
html.tm-dark .tm-month-row-blank.tm-month-row-weekend {
    background: rgba(185, 199, 219, 0.015);
    border-color: rgba(185, 199, 219, 0.12);
    border-style: solid;
    opacity: 0.2;
}

html.tm-dark .tm-day.tm-month-row-day.tm-day-outside.tm-month-row-weekend {
    background: rgba(185, 199, 219, 0.015);
    border-color: rgba(185, 199, 219, 0.12);
    border-style: solid;
    opacity: 0.2;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1100px) {
    .tm-week-view {
        padding: 8px 0 6px 0;
    }

    .tm-week-view-wc {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .tm-week-view-rows {
        gap: 6px;
    }

    .tm-day.tm-week-day-row.tm-week-day-with-head {
        padding: 4px 6px 4px 88px;
    }

    .tm-week-row-head {
        width: 82px;
        padding: 5px 6px 5px 8px;
    }

        .tm-week-row-head span {
            font-size: 10px;
        }

        .tm-week-row-head strong {
            font-size: 16px;
        }

    .tm-week-task-list::-webkit-scrollbar {
        width: 6px;
    }

    .tm-week-task-item {
        grid-template-columns: 5px minmax(0, 1fr);
        gap: 4px;
        padding: 2px 5px;
    }

    .tm-week-task-color {
        width: 5px;
        height: 12px;
    }

    .tm-week-task-text {
        font-size: 9px;
        line-height: 1.04;
    }

    .tm-month-row-title {
        font-size: 12px;
    }

    .tm-month-row-header,
    .tm-month-row-grid {
        grid-template-columns: 40px repeat(37, minmax(0, 1fr));
        min-width: 0;
        gap: 1px;
    }

    .tm-month-row-label {
        padding: 0 1px 0 0;
    }

    .tm-month-row-label strong {
        font-size: 9px;
    }

    .tm-month-row-label span,
    .tm-month-row-weekday-cell {
        font-size: 7px;
    }

    .tm-day.tm-month-row-day {
        min-height: 26px;
        height: 26px;
    }

    .tm-day.tm-month-row-day .tm-day-number {
        font-size: 8px;
    }
}


/* =========================
   DAY VIEW
   ========================= */

.tm-calendar.tm-calendar-view-day {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.tm-day-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: min(960px, calc(100% - 120px));
    margin: 0 auto;
    padding: 10px 0 6px 0;
}

.tm-day.tm-day-detail-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    padding: 12px;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f0d9;
    border: 1px solid #d7d9e6;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

    .tm-day.tm-day-detail-cell:hover {
        background: #f8f3e2;
        border-color: #c8d3ea;
    }

.tm-day-view-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px 0;
    text-align: center;
}

.tm-day-view-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tm-text-muted, #5b657a);
}

.tm-day-view-head.tm-calendar-weekend .tm-day-view-title {
    color: #a55b50;
}

.tm-day-view-date {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    color: var(--tm-primary-dark, #225ca2);
}

.tm-day-view-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px;
}

.tm-day-task-item {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 6px 8px;
    margin: 0;
    border-radius: 8px;
    border: 1px solid #d8dceb;
    background: rgba(255,255,255,0.88) !important;
    box-shadow: none;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

    .tm-day-task-item:hover {
        background: #ffffff !important;
        border-color: #9fb8dd;
        box-shadow: 0 0 0 1px rgba(70,130,180,0.14);
        transform: none;
    }

    .tm-day-task-item .tm-week-task-color {
        width: 6px;
        min-height: 18px;
        height: auto;
        border-radius: 999px;
        align-self: stretch;
    }

    .tm-day-task-item .tm-week-task-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.05;
        color: var(--tm-text-main, #1f2933);
        font-weight: 500;
    }

.tm-day-view-empty {
    padding: 12px 10px;
    text-align: center;
    font-size: 12px;
    color: var(--tm-text-muted, #5b657a);
    border: 1px dashed var(--tm-border-soft, #c9d3e6);
    border-radius: 8px;
    background: rgba(255,255,255,0.45);
}

/* dark mode */

html.tm-dark .tm-day.tm-day-detail-cell {
    background: #162133;
    border-color: #33415c;
}

    html.tm-dark .tm-day.tm-day-detail-cell:hover {
        background: #1a2740;
        border-color: #496082;
    }

html.tm-dark .tm-day-view-title {
    color: #b9c7db;
}

html.tm-dark .tm-day-view-head.tm-calendar-weekend .tm-day-view-title {
    color: #e5a198;
}

html.tm-dark .tm-day-view-date {
    color: #89b7e2;
}

html.tm-dark .tm-day-task-item {
    background: rgba(11,18,32,0.52) !important;
    border-color: #33415c;
}

    html.tm-dark .tm-day-task-item:hover {
        background: rgba(17,28,44,0.92) !important;
        border-color: #6c8fcb;
        box-shadow: 0 0 0 1px rgba(108,143,203,0.18);
    }

    html.tm-dark .tm-day-task-item .tm-week-task-text {
        color: #e5edf8;
    }

html.tm-dark .tm-day-view-empty {
    background: rgba(11,18,32,0.35);
    border-color: #33415c;
    color: #b9c7db;
}

/* responsive */

@media (max-width: 1100px) {
    .tm-day-view {
        width: min(960px, calc(100% - 120px));
        max-width: 100%;
        padding: 8px 0 6px 0;
    }

    .tm-day.tm-day-detail-cell {
        padding: 10px 8px;
        border-radius: 8px;
    }

    .tm-day-view-title {
        font-size: 12px;
    }

    .tm-day-view-date {
        font-size: 20px;
    }

    .tm-day-task-item {
        gap: 6px;
        padding: 6px 8px;
    }

        .tm-day-task-item .tm-week-task-text {
            font-size: 11px;
        }
}




/* =========================================================
   Shift Planner — match Task Planner default side spacing
   Paste at END of app.css
   ========================================================= */

/* Shift Planner parent layout detected by real scheduler IDs */
.tm-main:has(#tm-scheduler-driver-list),
main:has(#tm-scheduler-driver-list),
#app-root:has(#tm-scheduler-driver-list) .tm-main {
    display: grid !important;
    grid-template-columns: var(--tm-left-col-width, 300px) minmax(520px, 1fr) var(--tm-right-col-width, 300px) !important;
    gap: 8px !important;
    padding: 0 6px 8px 6px !important;
    height: calc(100vh - var(--tm-nav-h, 52px)) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

    /* Left Shift Planner panel */
    .tm-main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-driver-list),
    main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-driver-list) {
        width: auto !important;
        min-width: 230px !important;
        max-width: none !important;
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Center calendar panel */
    .tm-main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-calendar),
    main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-calendar) {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Right Shift Planner panel */
    .tm-main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-upcoming),
    main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-upcoming) {
        width: auto !important;
        min-width: 230px !important;
        max-width: none !important;
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

/* If Shift Planner uses named classes */
.tm-scheduler-left,
.tm-scheduler-right {
    width: auto !important;
    min-width: 230px !important;
    max-width: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
}

.tm-scheduler-center {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* Responsive same as Task Planner */
@media (max-width: 1100px) {
    .tm-main:has(#tm-scheduler-driver-list),
    main:has(#tm-scheduler-driver-list),
    #app-root:has(#tm-scheduler-driver-list) .tm-main {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        height: auto !important;
    }

        .tm-main:has(#tm-scheduler-driver-list) > *,
        main:has(#tm-scheduler-driver-list) > * {
            height: 340px !important;
        }
}

/* =========================================================
   Shift Planner — remove grey background under calendar
   Paste at END of app.css
   ========================================================= */

html body #app-root .tm-scheduler-center-body,
html body .tm-scheduler-layout-center .tm-scheduler-center-body,
html body .tm-main:has(#tm-scheduler-calendar) .tm-scheduler-center-body,
html body main:has(#tm-scheduler-calendar) .tm-scheduler-center-body {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

    /* keep calendar/navigation also clean */
    html body #app-root .tm-scheduler-center-body #tm-scheduler-calendar,
    html body #app-root .tm-scheduler-center-body .tm-calendar-header,
    html body #app-root .tm-scheduler-center-body .tm-calendar,
    html body #app-root .tm-scheduler-center-body .tm-month-grid,
    html body #app-root .tm-scheduler-center-body .tm-month,
    html body #app-root .tm-scheduler-center-body .tm-month-header,
    html body #app-root .tm-scheduler-center-body .tm-month-weekdays,
    html body #app-root .tm-scheduler-center-body .tm-month-weeks,
    html body #app-root .tm-scheduler-center-body .tm-weeks,
    html body #app-root .tm-scheduler-center-body .tm-week-row {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }


/* =========================================================
   Shift Planner — Today's Shifts header same height as Upcoming Tasks
   Paste at END of app.css
   ========================================================= */

.tm-scheduler-layout-right > header,
.tm-scheduler-layout-right > .tm-column-header,
.tm-scheduler-layout-right > .tm-scheduler-panel-head,
.tm-scheduler-layout-right > .tm-scheduler-side-header,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > header,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > .tm-column-header,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > .tm-scheduler-panel-head,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > .tm-scheduler-side-header,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > header,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > .tm-column-header,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > .tm-scheduler-panel-head,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) > .tm-scheduler-side-header {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--tm-primary, #4682B4) !important;
    color: var(--tm-on-primary, #ffd38a) !important;
    border-bottom: 1px solid var(--tm-primary-dark, #225ca2) !important;
    overflow: hidden !important;
}

.tm-scheduler-upcoming-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
}

.tm-scheduler-upcoming-tab {
    position: relative !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 33px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.84) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 33px !important;
    overflow: hidden !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.tm-scheduler-upcoming-tab + .tm-scheduler-upcoming-tab {
    border-left: 1px solid rgba(255, 255, 255, 0.24) !important;
}

.tm-scheduler-upcoming-tab:hover,
.tm-scheduler-upcoming-tab:focus-visible {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    outline: none !important;
}

.tm-scheduler-upcoming-tab.active,
.tm-scheduler-upcoming-tab[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 -3px 0 var(--tm-on-primary, #ffd38a) !important;
    color: #ffffff !important;
}

.tm-scheduler-layout-right .tm-column-title,
.tm-scheduler-layout-right .tm-scheduler-panel-title,
.tm-scheduler-layout-right .tm-scheduler-side-title-main,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-column-title,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-scheduler-panel-title,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-scheduler-side-title-main,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-column-title,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-scheduler-panel-title,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-scheduler-side-title-main {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#tm-scheduler-right-subtitle,
.tm-scheduler-layout-right .tm-column-subtitle,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-column-subtitle,
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-column-subtitle {
    display: none !important;
}

/* =========================================================
   Shift Planner — calendar position exactly like Task Planner
   Paste at END of app.css
   ========================================================= */

/* Same main 3-column geometry as Task Planner */
.tm-scheduler-layout-root,
.tm-main:has(#tm-scheduler-driver-list),
main:has(#tm-scheduler-driver-list),
#app-root:has(#tm-scheduler-driver-list) .tm-main {
    display: grid !important;
    grid-template-columns: var(--tm-left-col-width, 300px) minmax(520px, 1fr) var(--tm-right-col-width, 300px) !important;
    gap: 8px !important;
    padding: 0 6px 8px 6px !important;
    height: calc(100vh - var(--tm-nav-h, 52px)) !important;
    min-height: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}

/* Center column must behave exactly like .tm-column-center */
.tm-scheduler-layout-center,
.tm-main:has(#tm-scheduler-calendar) > *:has(#tm-scheduler-calendar),
main:has(#tm-scheduler-calendar) > *:has(#tm-scheduler-calendar) {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    box-sizing: border-box !important;
}

    /* Remove any extra top title/scope space above Shift Planner calendar */
    #tm-scheduler-scope-title,
    #tm-scheduler-scope-subtitle,
    #tm-scheduler-month-label,
    .tm-scheduler-layout-center .tm-scheduler-center-head,
    .tm-scheduler-layout-center .tm-scheduler-center-title,
    .tm-scheduler-layout-center .tm-scheduler-center-subtitle,
    .tm-scheduler-layout-center .tm-scheduler-scope,
    .tm-scheduler-layout-center .tm-scheduler-scope-row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    /* Center body should not add offset */
    .tm-scheduler-center-body,
    .tm-scheduler-layout-center .tm-scheduler-center-body {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
        box-sizing: border-box !important;
    }

/* Shift Planner calendar: same top position/padding as Task Planner #tm-calendar */
#tm-scheduler-calendar {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

#tm-scheduler-calendar.tm-calendar-view-year,
#tm-scheduler-calendar.tm-calendar-view-month-row,
#tm-scheduler-calendar.tm-calendar-view-week {
    padding-top: 0 !important;
}

#tm-scheduler-calendar.tm-calendar-view-month {
    padding-top: 54px !important;
}

/* Calendar nav: same position/spacing as Task Planner bottom nav */
.tm-scheduler-layout-center .tm-calendar-header,
.tm-scheduler-center-body .tm-calendar-header,
.tm-main:has(#tm-scheduler-calendar) .tm-calendar-header,
main:has(#tm-scheduler-calendar) .tm-calendar-header {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 0 4px 0 !important;
    padding: 4px 8px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
}

/* Calendar grid itself: no extra offset */
#tm-scheduler-calendar .tm-month-grid {
    margin: 0 !important;
}

/* Keep same side panel widths as Task Planner even after Shift Planner JS injects its own layout */
.tm-scheduler-layout-left,
.tm-main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-driver-list),
main:has(#tm-scheduler-driver-list) > *:has(#tm-scheduler-driver-list) {
    width: auto !important;
    min-width: 230px !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.tm-scheduler-layout-right,
.tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming),
main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) {
    width: auto !important;
    min-width: 230px !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* =========================================================
   Shift Planner — remove Today's shifts left colour strip
   Paste at END of app.css
   ========================================================= */

html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-item,
html body #app-root .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-item,
html body .tm-main:has(#tm-scheduler-upcoming) #tm-scheduler-upcoming .tm-scheduler-side-item,
html body main:has(#tm-scheduler-upcoming) #tm-scheduler-upcoming .tm-scheduler-side-item {
    padding-left: 10px !important;
}

    html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-item::before,
    html body #app-root .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-item::before,
    html body .tm-main:has(#tm-scheduler-upcoming) #tm-scheduler-upcoming .tm-scheduler-side-item::before,
    html body main:has(#tm-scheduler-upcoming) #tm-scheduler-upcoming .tm-scheduler-side-item::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }

/* =========================================================
   Shift Planner — Today's shifts spacing EXACT like left panel
   Paste at END of app.css
   ========================================================= */

html body .tm-scheduler-layout-right .tm-scheduler-side-wrap,
html body #app-root .tm-scheduler-layout-right .tm-scheduler-side-wrap,
html body .tm-main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-scheduler-side-wrap,
html body main:has(#tm-scheduler-upcoming) > *:has(#tm-scheduler-upcoming) .tm-scheduler-side-wrap {
    padding: 8px !important;
    box-sizing: border-box !important;
}

html body #tm-scheduler-upcoming,
html body #app-root #tm-scheduler-upcoming,
html body .tm-scheduler-layout-right #tm-scheduler-upcoming {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

    html body #tm-scheduler-upcoming .tm-scheduler-side-item,
    html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-item,
    html body .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-item {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px 0 !important;
        padding: 10px 10px 10px 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

        html body #tm-scheduler-upcoming .tm-scheduler-side-item::before,
        html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-item::before,
        html body .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-item::before {
            content: none !important;
            display: none !important;
        }

    html body #tm-scheduler-upcoming .tm-scheduler-side-top,
    html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-top,
    html body .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-top {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: start !important;
        column-gap: 8px !important;
        width: 100% !important;
    }

    html body #tm-scheduler-upcoming .tm-scheduler-side-title,
    html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-title,
    html body .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-title {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body #tm-scheduler-upcoming .tm-scheduler-badge,
    html body #app-root #tm-scheduler-upcoming .tm-scheduler-badge,
    html body .tm-scheduler-layout-right #tm-scheduler-badge,
    html body .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-badge {
        justify-self: end !important;
        margin: 0 !important;
        transform: none !important;
        white-space: nowrap !important;
    }

    /* Daily check done today + the truck/trailer the Driver App says is in use */
    html body #tm-scheduler-upcoming .tm-scheduler-onduty-line {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        margin-top: 8px;
        min-width: 0;
        overflow: hidden;
    }

    /* Kept on one line: smaller than the status badge, and the last chip shortens
       with "..." rather than wrapping when the card is very narrow. */
    html body #tm-scheduler-upcoming .tm-scheduler-onduty-line .tm-scheduler-onduty {
        padding: 1px 6px;
        font-size: 11px;
        flex: 0 0 auto;
    }

    html body #tm-scheduler-upcoming .tm-scheduler-onduty-reg {
        display: inline-block;
        padding: 1px 5px;
        border-radius: 4px;
        border: 1px solid #94a3b8;
        background: #f8fafc;
        color: #1e293b;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.02em;
        line-height: 1.4;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 0 1 auto;
        cursor: default;
    }

    html.tm-dark body #tm-scheduler-upcoming .tm-scheduler-onduty-reg {
        border-color: #475569;
        background: #1e293b;
        color: #e2e8f0;
    }

    html body #tm-scheduler-upcoming .tm-scheduler-onduty {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid #16a34a;
        background: #16a34a;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
        cursor: default;
    }

    html body #tm-scheduler-upcoming .tm-scheduler-onduty.tm-scheduler-onduty-defects {
        border-color: #d97706;
        background: #d97706;
    }

    html body #tm-scheduler-upcoming .tm-scheduler-side-meta,
    html body #app-root #tm-scheduler-upcoming .tm-scheduler-side-meta,
    html body .tm-scheduler-layout-right #tm-scheduler-upcoming .tm-scheduler-side-meta {
        padding-right: 0 !important;
        overflow-wrap: anywhere !important;
    }
/* Shift Planner optional full-cell calendar colours */
html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill,
html body #tm-calendar .tm-day.tm-day-color-fill,
html body #tm-scheduler-calendar .tm-day.tm-day-color-fill {
    position: relative;
    background: var(--tm-day-fill-bg, #fff7e8) !important;
    background-clip: padding-box !important;
    border-color: var(--tm-day-fill-border, rgba(201,211,230,0.96)) !important;
    box-shadow: none !important;
    overflow: hidden;
}

    html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill::before,
    html body #tm-calendar .tm-day.tm-day-color-fill::before,
    html body #tm-scheduler-calendar .tm-day.tm-day-color-fill::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
        pointer-events: none;
        z-index: 0;
    }

    html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill > *,
    html body #tm-calendar .tm-day.tm-day-color-fill > *,
    html body #tm-scheduler-calendar .tm-day.tm-day-color-fill > * {
        position: relative;
        z-index: 1;
    }

    html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill .tm-day-number,
    html body #tm-calendar .tm-day.tm-day-color-fill .tm-day-number,
    html body #tm-scheduler-calendar .tm-day.tm-day-color-fill .tm-day-number {
        color: var(--tm-day-fill-text, #1f2933) !important;
        text-shadow: 0 1px 1px rgba(255,255,255,0.22), 0 0 1px rgba(0,0,0,0.18);
    }

    html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill:hover,
    html body #tm-calendar .tm-day.tm-day-color-fill:hover,
    html body #tm-scheduler-calendar .tm-day.tm-day-color-fill:hover {
        filter: brightness(1.03);
    }

    html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill .tm-day-bars,
    html body #tm-calendar .tm-day.tm-day-color-fill .tm-day-bars,
    html body #tm-scheduler-calendar .tm-day.tm-day-color-fill .tm-day-bars {
        display: none !important;
    }

html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-has-exception,
html body #tm-calendar .tm-day.tm-day-color-fill.tm-day-has-exception,
html body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-has-exception {
    border-color: rgba(201,211,230,0.96) !important;
    box-shadow: none !important;
}

html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill::before,
html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill::before,
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
}

html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill .tm-day-number,
html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill .tm-day-number,
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill .tm-day-number {
    text-shadow: 0 1px 1px rgba(0,0,0,0.32), 0 0 1px rgba(0,0,0,0.26);
}

html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-has-exception,
html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill.tm-day-has-exception,
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-has-exception {
    border-color: rgba(185,199,219,0.28) !important;
    box-shadow: none !important;
}

html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill,
html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill,
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill {
    border-color: rgba(185,199,219,0.28) !important;
}

html body #tm-calendar .tm-day.tm-day-color-fill.tm-day-past:not(.tm-day-today):not(.tm-day-outside),
html body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-past:not(.tm-day-today):not(.tm-day-outside),
html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-past:not(.tm-day-today):not(.tm-day-outside) {
    border-color: rgba(201,211,230,0.62) !important;
    box-shadow: none !important;
    filter: saturate(0.62) brightness(0.90) !important;
}

html body #tm-calendar .tm-day.tm-day-color-fill.tm-day-past.tm-day-has-exception:not(.tm-day-today),
html body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-past.tm-day-has-exception:not(.tm-day-today),
html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-past.tm-day-has-exception:not(.tm-day-today) {
    border-color: rgba(201,211,230,0.62) !important;
    box-shadow: none !important;
    filter: saturate(0.52) brightness(0.86) !important;
}

html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill.tm-day-past:not(.tm-day-today):not(.tm-day-outside),
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-past:not(.tm-day-today):not(.tm-day-outside),
html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-past:not(.tm-day-today):not(.tm-day-outside) {
    border-color: rgba(185,199,219,0.18) !important;
    box-shadow: none !important;
    filter: saturate(0.58) brightness(0.84) !important;
}

html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill.tm-day-past.tm-day-has-exception:not(.tm-day-today),
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-past.tm-day-has-exception:not(.tm-day-today),
html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-past.tm-day-has-exception:not(.tm-day-today) {
    border-color: rgba(185,199,219,0.18) !important;
    box-shadow: none !important;
    filter: saturate(0.46) brightness(0.78) !important;
}

/* Final full-cell exception neutralizer: keep side-bars mode unchanged */
html body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-has-exception:not(.tm-day-today),
html body #tm-calendar .tm-day.tm-day-color-fill.tm-day-has-exception:not(.tm-day-today),
html body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-has-exception:not(.tm-day-today) {
    border-color: rgba(201,211,230,0.62) !important;
    box-shadow: none !important;
}

html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-color-fill.tm-day-has-exception:not(.tm-day-today),
html.tm-dark body #tm-calendar .tm-day.tm-day-color-fill.tm-day-has-exception:not(.tm-day-today),
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-color-fill.tm-day-has-exception:not(.tm-day-today) {
    border-color: rgba(185,199,219,0.18) !important;
    box-shadow: none !important;
}


/* =========================================================
   Planner: Past/Upcoming hover -> clean orange calendar highlight
   - no symbols/dots inside cell
   - exact hovered task date: clear orange border
   - related/recurring dates: orange bottom line
   - full-color cells: white/orange inner edge
   - outside/fake grey dates: never highlighted
   ========================================================= */

/* reset old highlight effects */
#tm-calendar .tm-day.tm-day-hover-task,
#tm-calendar .tm-day.tm-day-hover-related {
    position: relative !important;
    transform: none !important;
    filter: none !important;
    z-index: 4 !important;
    font-weight: 700 !important;
}

    /* remove any previous dot / corner / extra symbol */
    #tm-calendar .tm-day.tm-day-hover-task::before,
    #tm-calendar .tm-day.tm-day-hover-related::before,
    #tm-calendar .tm-day.tm-day-hover-task::after,
    #tm-calendar .tm-day.tm-day-hover-related::after {
        content: none !important;
        display: none !important;
    }

/* exact hovered task date */
#tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-task {
    outline: 2px solid #ff9800 !important;
    outline-offset: -2px !important;
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.22), 0 0 7px rgba(255, 152, 0, 0.30) !important;
}

/* related / recurring dates */
#tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-related {
    outline: none !important;
    border-color: rgba(255, 152, 0, 0.62) !important;
    box-shadow: inset 0 -4px 0 rgba(255, 152, 0, 0.88), 0 0 0 1px rgba(255, 152, 0, 0.16) !important;
}

/* full-color exact cell - no symbol, just cleaner stronger edge */
#tm-calendar .tm-day.tm-day-color-fill:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-task {
    outline: none !important;
    border-color: #ff9800 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 0 0 3px #ff9800, 0 0 0 2px rgba(255, 152, 0, 0.28), 0 0 8px rgba(255, 152, 0, 0.34) !important;
}

/* full-color related cells */
#tm-calendar .tm-day.tm-day-color-fill:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-related {
    outline: none !important;
    border-color: rgba(255, 152, 0, 0.60) !important;
    box-shadow: inset 0 -4px 0 rgba(255, 152, 0, 0.92), inset 0 0 0 1px rgba(255, 255, 255, 0.55) !important;
}

/* date number above borders */
#tm-calendar .tm-day.tm-day-hover-task .tm-day-number,
#tm-calendar .tm-day.tm-day-hover-related .tm-day-number {
    position: relative !important;
    z-index: 10 !important;
    font-weight: 800 !important;
}

/* fake / outside grey dates: never highlight */
#tm-calendar .tm-day.tm-day-outside.tm-day-hover-task,
#tm-calendar .tm-day.tm-day-outside.tm-day-hover-related,
#tm-calendar .tm-day[data-outside="1"].tm-day-hover-task,
#tm-calendar .tm-day[data-outside="1"].tm-day-hover-related {
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    z-index: auto !important;
    font-weight: inherit !important;
    border-color: inherit !important;
}

    #tm-calendar .tm-day.tm-day-outside.tm-day-hover-task::before,
    #tm-calendar .tm-day.tm-day-outside.tm-day-hover-related::before,
    #tm-calendar .tm-day.tm-day-outside.tm-day-hover-task::after,
    #tm-calendar .tm-day.tm-day-outside.tm-day-hover-related::after,
    #tm-calendar .tm-day[data-outside="1"].tm-day-hover-task::before,
    #tm-calendar .tm-day[data-outside="1"].tm-day-hover-related::before,
    #tm-calendar .tm-day[data-outside="1"].tm-day-hover-task::after,
    #tm-calendar .tm-day[data-outside="1"].tm-day-hover-related::after {
        content: none !important;
        display: none !important;
    }

/* dark mode */
html.tm-dark #tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-task {
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.28), 0 0 9px rgba(255, 152, 0, 0.42) !important;
}

html.tm-dark #tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-related {
    box-shadow: inset 0 -4px 0 rgba(255, 152, 0, 0.92), 0 0 0 1px rgba(255, 152, 0, 0.22) !important;
}

/* =========================================================
   Planner: recurring/related task dates same highlight as exact task date
   ========================================================= */

#tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-related {
    outline: 2px solid #ff9800 !important;
    outline-offset: -2px !important;
    border-color: #ff9800 !important;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.22), 0 0 7px rgba(255, 152, 0, 0.30) !important;
    font-weight: 700 !important;
}

/* full-color recurring cells same as exact hovered full-color cells */
#tm-calendar .tm-day.tm-day-color-fill:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-related {
    outline: none !important;
    border-color: #ff9800 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), inset 0 0 0 3px #ff9800, 0 0 0 2px rgba(255, 152, 0, 0.28), 0 0 8px rgba(255, 152, 0, 0.34) !important;
}

/* no symbols/dots */
#tm-calendar .tm-day.tm-day-hover-related::before,
#tm-calendar .tm-day.tm-day-hover-related::after {
    content: none !important;
    display: none !important;
}

/* fake/outside dates still never highlighted */
#tm-calendar .tm-day.tm-day-outside.tm-day-hover-related,
#tm-calendar .tm-day[data-outside="1"].tm-day-hover-related {
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    z-index: auto !important;
    font-weight: inherit !important;
    border-color: inherit !important;
}

html.tm-dark #tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]).tm-day-hover-related {
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.28), 0 0 9px rgba(255, 152, 0, 0.42) !important;
}

/* allow outside marker to render around the cell */
html body #tm-calendar .tm-month,
html body #tm-calendar .tm-month-weeks,
html body #tm-calendar .tm-weeks,
html body #tm-calendar .tm-week-row {
    overflow: visible !important;
}


html body #tm-calendar .tm-month,
html body #tm-calendar .tm-month-weeks,
html body #tm-calendar .tm-weeks,
html body #tm-calendar .tm-week-row {
    overflow: visible !important;
}

html body #tm-scheduler-calendar .tm-month,
html body #tm-scheduler-calendar .tm-month-weeks,
html body #tm-scheduler-calendar .tm-weeks,
html body #tm-scheduler-calendar .tm-week-row,
html body .tm-scheduler-center-shell .tm-month,
html body .tm-scheduler-center-shell .tm-month-weeks,
html body .tm-scheduler-center-shell .tm-weeks,
html body .tm-scheduler-center-shell .tm-week-row {
    overflow: visible !important;
}

/* =========================================================
   Unified search focus state
   ========================================================= */
.tm-search-wrap > input.tm-search:focus,
.tm-searchwrap > input.tm-search:focus,
.tm-search-wrap > .tm-search:focus,
.tm-searchwrap > .tm-search:focus,
.tm-scheduler-searchwrap > input.tm-scheduler-search:focus,
.tm-scheduler-searchwrap > .tm-scheduler-search:focus,
.tm-notifications-search-wrap > .tm-notifications-search:focus {
    outline: none !important;
    border-color: var(--tm-primary, #4682B4) !important;
    box-shadow: 0 0 0 1px rgba(70,130,180,0.14) !important;
}

html.tm-dark .tm-search-wrap > input.tm-search:focus,
html.tm-dark .tm-searchwrap > input.tm-search:focus,
html.tm-dark .tm-search-wrap > .tm-search:focus,
html.tm-dark .tm-searchwrap > .tm-search:focus,
html.tm-dark .tm-scheduler-searchwrap > input.tm-scheduler-search:focus,
html.tm-dark .tm-scheduler-searchwrap > .tm-scheduler-search:focus,
html.tm-dark .tm-notifications-search-wrap > .tm-notifications-search:focus {
    border-color: rgba(110,168,220,0.62) !important;
    box-shadow: 0 0 0 1px rgba(110,168,220,0.22) !important;
}
/* =========================================================
   Unified search clear X - same size, original no-frame hover
   ========================================================= */
.tm-search-wrap > input.tm-search,
.tm-searchwrap > input.tm-search,
.tm-search-wrap > .tm-search,
.tm-searchwrap > .tm-search,
.tm-scheduler-searchwrap > input.tm-scheduler-search,
.tm-scheduler-searchwrap > .tm-scheduler-search {
    padding-right: 38px !important;
}

.tm-search-wrap > .tm-search-clear,
.tm-searchwrap > .tm-search-clear,
.tm-scheduler-searchwrap > .tm-scheduler-search-clear {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 22px !important;
    min-width: 24px !important;
    min-height: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--tm-text-muted, #5b657a) !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-family: inherit !important;
    text-align: center !important;
    box-shadow: none !important;
}

.tm-search-wrap > .tm-search-clear::before,
.tm-searchwrap > .tm-search-clear::before,
.tm-scheduler-searchwrap > .tm-scheduler-search-clear::before {
    content: "\2715" !important;
    display: block !important;
    color: currentColor !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.tm-search-wrap > .tm-search-clear:hover,
.tm-searchwrap > .tm-search-clear:hover,
.tm-scheduler-searchwrap > .tm-scheduler-search-clear:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--tm-accent, #ff5b5b) !important;
}

.tm-search-wrap > input:not(:placeholder-shown) + .tm-search-clear,
.tm-searchwrap > input:not(:placeholder-shown) + .tm-search-clear,
.tm-search-wrap.has-value > .tm-search-clear,
.tm-searchwrap.has-value > .tm-search-clear,
.tm-scheduler-searchwrap.has-value > .tm-scheduler-search-clear {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.tm-search-wrap > .tm-search-clear[hidden],
.tm-searchwrap > .tm-search-clear[hidden],
.tm-scheduler-searchwrap > .tm-scheduler-search-clear[hidden] {
    display: none !important;
}

html.tm-dark .tm-search-wrap > .tm-search-clear,
html.tm-dark .tm-searchwrap > .tm-search-clear,
html.tm-dark .tm-scheduler-searchwrap > .tm-scheduler-search-clear {
    background: transparent !important;
    border-color: transparent !important;
    color: #aab4c5 !important;
}

html.tm-dark .tm-search-wrap > .tm-search-clear:hover,
html.tm-dark .tm-searchwrap > .tm-search-clear:hover,
html.tm-dark .tm-scheduler-searchwrap > .tm-scheduler-search-clear:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--tm-accent, #ff5b5b) !important;
}

/* Scheduler multi-select clear X - same symbol style, original no-frame hover */
.tm-scheduler-multi-select > .tm-scheduler-multi-select-clear,
.tm-scheduler-multi-select-clear {
    position: absolute !important;
    right: 22px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--tm-text-muted, #5b657a) !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-align: center !important;
}

.tm-scheduler-multi-select > .tm-scheduler-multi-select-clear::before,
.tm-scheduler-multi-select-clear::before {
    content: "\2715" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
}

.tm-scheduler-multi-select > .tm-scheduler-multi-select-clear:hover,
.tm-scheduler-multi-select-clear:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--tm-accent, #ff5b5b) !important;
}

html.tm-dark .tm-scheduler-multi-select > .tm-scheduler-multi-select-clear,
html.tm-dark .tm-scheduler-multi-select-clear {
    background: transparent !important;
    border-color: transparent !important;
    color: #aab4c5 !important;
}

html.tm-dark .tm-scheduler-multi-select > .tm-scheduler-multi-select-clear:hover,
html.tm-dark .tm-scheduler-multi-select-clear:hover {
    color: var(--tm-accent, #ff5b5b) !important;
}

/* Main filter multipicker + invoice combo clear X - same symbol style as scheduler multi-select clear.
   Needs to outrank ".tm-modal button" (font-size/weight !important) which otherwise leaks in. */
#tm-filter-backdrop .tm-msel-clear,
.tm-modal .tm-ac2-clear {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--tm-text-muted, #5b657a) !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-align: center !important;
}

#tm-filter-backdrop .tm-msel-clear::before,
.tm-modal .tm-ac2-clear::before {
    content: "\2715" !important;
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
}

#tm-filter-backdrop .tm-msel-clear:hover,
.tm-modal .tm-ac2-clear:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--tm-accent, #ff5b5b) !important;
}

html.tm-dark #tm-filter-backdrop .tm-msel-clear,
html.tm-dark .tm-modal .tm-ac2-clear {
    background: transparent !important;
    border-color: transparent !important;
    color: #aab4c5 !important;
}

html.tm-dark #tm-filter-backdrop .tm-msel-clear:hover,
html.tm-dark .tm-modal .tm-ac2-clear:hover {
    color: var(--tm-accent, #ff5b5b) !important;
}
/* FINAL OVERRIDE: Week view uses the left date header, never the inner day number */
html body #tm-calendar .tm-day.tm-week-day-row .tm-day-number,
html body #tm-scheduler-calendar .tm-day.tm-week-day-row .tm-day-number,
html body .tm-scheduler-center-shell .tm-day.tm-week-day-row .tm-day-number {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* FINAL OVERRIDE: shared today marker for Completed Tasks and Shift Planner */
html body #tm-calendar .tm-month,
html body #tm-calendar .tm-month-weeks,
html body #tm-calendar .tm-weeks,
html body #tm-calendar .tm-week-row,
html body #tm-scheduler-calendar .tm-month,
html body #tm-scheduler-calendar .tm-month-weeks,
html body #tm-scheduler-calendar .tm-weeks,
html body #tm-scheduler-calendar .tm-week-row,
html body .tm-scheduler-center-shell .tm-month,
html body .tm-scheduler-center-shell .tm-month-weeks,
html body .tm-scheduler-center-shell .tm-weeks,
html body .tm-scheduler-center-shell .tm-week-row {
    overflow: visible !important;
}

html body #tm-calendar .tm-day.tm-day-today:not(.tm-day-outside):not([data-outside="1"]),
html body #tm-scheduler-calendar .tm-day.tm-day-today:not(.tm-day-outside):not([data-outside="1"]),
html body .tm-scheduler-center-shell .tm-day.tm-day-today:not(.tm-day-outside):not([data-outside="1"]),
html body .tm-scheduler-day.today:not(.outside) {
    position: relative !important;
    overflow: visible !important;
    z-index: 5 !important;
    transform: none !important;
    outline: none !important;
    box-shadow: none !important;
}

html body #tm-calendar .tm-day.tm-day-today:not(.tm-day-outside):not([data-outside="1"])::before,
html body #tm-scheduler-calendar .tm-day.tm-day-today:not(.tm-day-outside):not([data-outside="1"])::before,
html body .tm-scheduler-center-shell .tm-day.tm-day-today:not(.tm-day-outside):not([data-outside="1"])::before,
html body .tm-scheduler-day.today:not(.outside)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: -7px !important;
    right: -7px !important;
    top: -7px !important;
    bottom: -7px !important;
    pointer-events: none !important;
    z-index: 20 !important;
    border: 0 !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    filter: drop-shadow(0 0 1px rgba(255, 212, 0, 0.45)) drop-shadow(0 0 2px rgba(255, 190, 0, 0.18)) !important;
    /* Horizontal / vertical arm length. The defaults suit the small year-view cells. */
    --tm-today-arm-x: 11px;
    --tm-today-arm-y: 9px;
    --tm-today-thick: 3px;
    background:
        linear-gradient(#ffd400, #ffd400) left top / var(--tm-today-arm-x) var(--tm-today-thick) no-repeat,
        linear-gradient(#ffd400, #ffd400) left top / var(--tm-today-thick) var(--tm-today-arm-y) no-repeat,
        linear-gradient(#ffd400, #ffd400) right top / var(--tm-today-arm-x) var(--tm-today-thick) no-repeat,
        linear-gradient(#ffd400, #ffd400) right top / var(--tm-today-thick) var(--tm-today-arm-y) no-repeat,
        linear-gradient(#ffd400, #ffd400) left bottom / var(--tm-today-arm-x) var(--tm-today-thick) no-repeat,
        linear-gradient(#ffd400, #ffd400) left bottom / var(--tm-today-thick) var(--tm-today-arm-y) no-repeat,
        linear-gradient(#ffd400, #ffd400) right bottom / var(--tm-today-arm-x) var(--tm-today-thick) no-repeat,
        linear-gradient(#ffd400, #ffd400) right bottom / var(--tm-today-thick) var(--tm-today-arm-y) no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
}

/* Month cells are several times larger than year cells; scale the brackets with them. */
html body #tm-calendar.tm-calendar-view-month .tm-day.tm-day-today::before,
html body #tm-scheduler-calendar.tm-calendar-view-month .tm-day.tm-day-today::before,
html body .tm-scheduler-center-shell .tm-calendar-view-month .tm-day.tm-day-today::before {
    --tm-today-arm-x: 26px;
    --tm-today-arm-y: 22px;
}

/* Week rows are very wide but not much taller than a month cell. */
html body #tm-calendar .tm-day.tm-week-day-row.tm-day-today::before,
html body #tm-scheduler-calendar .tm-day.tm-week-day-row.tm-day-today::before,
html body .tm-scheduler-center-shell .tm-day.tm-week-day-row.tm-day-today::before {
    --tm-today-arm-x: 40px;
    --tm-today-arm-y: 28px;
}

/* Week rows: an exception entry draws a ring outside its own border
   (box-shadow 0 0 0 1px), which the list's overflow clipped on both sides. */
html body .tm-day.tm-week-day-row .tm-week-task-list,
html body .tm-day.tm-week-day-row .tm-week-task-list.tm-week-task-list-fit-3 {
    box-sizing: border-box !important;
    padding: 2px !important;
}

/* line-height 1 with overflow hidden cut off descenders (g, y). */
html body .tm-day.tm-week-day-row .tm-week-task-text {
    line-height: 1.3 !important;
}

html body #tm-calendar .tm-day.tm-day-today::after,
html body #tm-scheduler-calendar .tm-day.tm-day-today::after,
html body .tm-scheduler-center-shell .tm-day.tm-day-today::after,
html body .tm-scheduler-day.today::after {
    content: none !important;
    display: none !important;
}

html body #tm-calendar .tm-day.tm-day-today .tm-day-number,
html body #tm-scheduler-calendar .tm-day.tm-day-today .tm-day-number,
html body .tm-scheduler-center-shell .tm-day.tm-day-today .tm-day-number,
html body .tm-scheduler-day.today .tm-scheduler-day-number {
    position: relative !important;
    z-index: 30 !important;
    color: #111827 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

html.tm-dark body #tm-calendar .tm-day.tm-day-today .tm-day-number,
html.tm-dark body #tm-scheduler-calendar .tm-day.tm-day-today .tm-day-number,
html.tm-dark body .tm-scheduler-center-shell .tm-day.tm-day-today .tm-day-number,
html.tm-dark body .tm-scheduler-day.today .tm-scheduler-day-number {
    color: #f8fafc !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.36) !important;
}

html body #tm-calendar .tm-day.tm-day-outside.tm-day-today::before,
html body #tm-calendar .tm-day[data-outside="1"].tm-day-today::before,
html body #tm-scheduler-calendar .tm-day.tm-day-outside.tm-day-today::before,
html body #tm-scheduler-calendar .tm-day[data-outside="1"].tm-day-today::before,
html body .tm-scheduler-center-shell .tm-day.tm-day-outside.tm-day-today::before,
html body .tm-scheduler-center-shell .tm-day[data-outside="1"].tm-day-today::before {
    content: none !important;
    display: none !important;
}

/* Keep the Sunday today marker inside both planner calendar panels. */
html body #tm-calendar > .tm-month-grid,
html body #tm-calendar > .tm-month-row-view,
html body #tm-calendar > .tm-week-view,
html body #tm-calendar > .tm-day-view,
html body #tm-scheduler-calendar > .tm-month-grid,
html body #tm-scheduler-calendar > .tm-month-row-view,
html body #tm-scheduler-calendar > .tm-week-view,
html body #tm-scheduler-calendar > .tm-day-view {
    position: relative;
    left: -6px;
}

/* Calendar cell hover target cue */
html body #tm-calendar .tm-day,
html body #tm-scheduler-calendar .tm-day,
html body .tm-scheduler-center-shell .tm-day,
html body .tm-scheduler-day {
    transform-origin: center center !important;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease, transform 120ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
    html body #tm-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body #tm-scheduler-calendar .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body .tm-scheduler-center-shell .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover {
        transform: scale(1.045) !important;
        z-index: 25 !important;
    }

    /* A hovered neighbour grows over its neighbours but stays under today's
       yellow brackets (today cell is z-index 5). */
    html body #tm-calendar .tm-day:not(.tm-day-today):not(.tm-day-outside):not([data-outside="1"]):hover,
    html body #tm-scheduler-calendar .tm-day:not(.tm-day-today):not(.tm-day-outside):not([data-outside="1"]):hover,
    html body .tm-scheduler-center-shell .tm-day:not(.tm-day-today):not(.tm-day-outside):not([data-outside="1"]):hover {
        z-index: 4 !important;
    }

    html body #tm-calendar.tm-calendar-view-week .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body #tm-scheduler-calendar.tm-calendar-view-week .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body #tm-calendar.tm-calendar-view-day .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body #tm-scheduler-calendar.tm-calendar-view-day .tm-day:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body .tm-scheduler-center-shell .tm-day.tm-week-day-row:not(.tm-day-outside):not([data-outside="1"]):hover,
    html body .tm-scheduler-center-shell .tm-day.tm-day-detail-cell:not(.tm-day-outside):not([data-outside="1"]):hover {
        transform: scale(1.015) !important;
    }

    html body .tm-scheduler-day:not(.outside):hover {
        transform: scale(1.025) !important;
        z-index: 25 !important;
    }

    html body .tm-scheduler-day:not(.today):not(.outside):hover {
        z-index: 4 !important;
    }
}
/* Final override: dark row-calendar weekend cells need a clear but quiet tint. */
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill) {
    background: #211d2d !important;
    border-color: #4b405f !important;
}

html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover {
    background: #2a2538 !important;
    border-color: #65547a !important;
}

html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-blank.tm-month-row-weekend,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-blank.tm-month-row-weekend,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-blank.tm-month-row-weekend {
    background: rgba(232, 127, 115, 0.055) !important;
    border-color: rgba(232, 127, 115, 0.18) !important;
}
/* Final override: subtle shared dark weekend shade for year/month and row calendars. */
html.tm-dark body #tm-calendar.tm-calendar-view-year .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-calendar.tm-calendar-view-month .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-year .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-year .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill),
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill) {
    background: #192235 !important;
    border-color: #35435c !important;
}

html.tm-dark body #tm-calendar.tm-calendar-view-year .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-calendar.tm-calendar-view-month .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-year .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-year .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month .tm-day.tm-calendar-weekend:not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-calendar-weekend:not(.tm-month-row-blank):not(.tm-day-outside):not([data-outside="1"]):not(.tm-day-today):not(.tm-day-color-fill):hover {
    background: #1f2a40 !important;
    border-color: #435472 !important;
}

html.tm-dark body #tm-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-blank.tm-month-row-weekend,
html.tm-dark body #tm-scheduler-calendar.tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-blank.tm-month-row-weekend,
html.tm-dark body .tm-scheduler-center-shell .tm-calendar-view-month-row .tm-day.tm-month-row-day.tm-month-row-blank.tm-month-row-weekend {
    background: rgba(137, 183, 226, 0.03) !important;
    border-color: rgba(137, 183, 226, 0.14) !important;
}

/* =========================
   PLANNER EMPTY / ONBOARDING
   ========================= */

.tm-onboarding-empty {
    padding: 10px 10px 0 10px;
    font-size: 12px;
    color: var(--tm-text-main);
}

.tm-onboarding-empty-plain {
    padding: 4px 2px 0 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--tm-text-muted, #5b657a);
}


/* =========================================================
   FINAL Calendar nav - 24px height, visually centred
   ========================================================= */

html body #app-root .tm-column-center .tm-calendar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 3px 8px 6px 8px !important;
    margin: 0 0 4px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

    /* visi 5 mygtukai */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-out,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-in,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-label {
        appearance: none !important;
        -webkit-appearance: none !important;
        position: relative !important;
        height: 24px !important;
        min-height: 24px !important;
        max-height: 24px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 1px solid var(--tm-primary-dark, #225ca2) !important;
        border-radius: 999px !important;
        background: var(--tm-primary, #4682B4) !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        outline: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
        overflow: hidden !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    /* mazi mygtukai */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-out,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-in {
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        flex: 0 0 42px !important;
    }

    /* Today mygtukas */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-label {
        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        flex: 0 0 72px !important;
    }

    /* paslepiam senus svg/span, jeigu liko nuo ankstesnio bandymo */
    html body #app-root .tm-column-center .tm-calendar-header svg,
    html body #app-root .tm-column-center .tm-calendar-header span {
        display: none !important;
    }

    /* =========================================================
   Minus / Plus - nupiešta linijomis, ne tekstu
   ========================================================= */

    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-out::before,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-in::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 13px !important;
        height: 2px !important;
        background: #ffffff !important;
        border-radius: 999px !important;
        transform: translate(-50%, -50%) !important;
    }

    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-in::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 2px !important;
        height: 13px !important;
        background: #ffffff !important;
        border-radius: 999px !important;
        transform: translate(-50%, -50%) !important;
    }

    /* =========================================================
   Double arrows - nupiešta chevron linijomis, ne tekstu
   ========================================================= */

    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev::before,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev::after,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next::before,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        width: 7px !important;
        height: 7px !important;
        box-sizing: border-box !important;
        border-color: #ffffff !important;
        border-style: solid !important;
        transform-origin: center !important;
    }

    /* left double arrow */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev::before {
        left: 15px !important;
        border-width: 0 0 2px 2px !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev::after {
        left: 22px !important;
        border-width: 0 0 2px 2px !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    /* right double arrow */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next::before {
        left: 13px !important;
        border-width: 2px 2px 0 0 !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next::after {
        left: 20px !important;
        border-width: 2px 2px 0 0 !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    /* =========================================================
   Today text - atskiras tikslus vertikalus centravimas
   ========================================================= */

    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-label::before {
        content: "Today" !important;
        position: absolute !important;
        left: 50% !important;
        top: 53% !important;
        transform: translate(-50%, -50%) !important;
        display: block !important;
        font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    /* hover */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev:hover,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next:hover,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-out:hover,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-in:hover,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-label:hover {
        background: #3a709c !important;
        border-color: var(--tm-primary-dark, #225ca2) !important;
    }

    /* active */
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-prev:active,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-next:active,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-out:active,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-zoom-in:active,
    html body #app-root .tm-column-center .tm-calendar-header > #tm-year-label:active {
        transform: translateY(1px) !important;
    }

/* =========================================
   DRIVER MODAL ERROR MESSAGE FIX
   ========================================= */

#tm-modal-driver #tm-driver-error.tm-driver-error-visible {
    display: block !important;
    padding: 8px 10px !important;
    margin: 0 0 10px 0 !important;
    color: #c62828 !important;
    -webkit-text-fill-color: #c62828 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    border: 1px solid rgba(198,40,40,0.25) !important;
    border-left: 4px solid #c62828 !important;
    border-radius: 3px !important;
    background: rgba(198,40,40,0.08) !important;
}

#tm-modal-driver #tm-driver-error.tm-driver-error-empty,
#tm-modal-driver #tm-driver-error:not(.tm-driver-error-visible) {
    display: none !important;
}

#tm-modal-driver .tm-input-invalid,
#tm-modal-driver [aria-invalid="true"] {
    border-color: #c62828 !important;
    box-shadow: 0 0 0 2px rgba(198,40,40,0.10) !important;
}

html.tm-dark #tm-modal-driver #tm-driver-error.tm-driver-error-visible {
    color: #ff7b7b !important;
    -webkit-text-fill-color: #ff7b7b !important;
    border-color: rgba(255,123,123,0.28) !important;
    border-left-color: #ff7b7b !important;
    background: rgba(255,123,123,0.10) !important;
}

/* =========================================================
   Tachograph infringements (manager page)
   ========================================================= */

#tm-infr-detail-backdrop .tm-modal.tm-infr-modal {
    min-width: 560px;
    max-width: 860px;
    width: 92vw;
}

#tm-infr-signed-backdrop .tm-modal.tm-infr-signed-modal {
    min-width: 420px;
    max-width: 520px;
    width: min(520px, calc(100vw - 32px));
}

.tm-infr-message {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 3px;
    margin-bottom: 8px;
    background: #dff3e6;
    color: #1e7e42;
}

    .tm-infr-message.is-error {
        background: #fbdede;
        color: #a31414;
    }

html.tm-dark .tm-infr-message { background: rgba(30, 126, 66, 0.25); color: #7ed6a0; }
html.tm-dark .tm-infr-message.is-error { background: rgba(163, 20, 20, 0.25); color: #f2a1a1; }

.tm-infr-modebar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
}

.tm-infr-modebar .tm-btn {
    min-width: 126px;
}

.tm-infr-table tbody tr {
    cursor: context-menu;
}

.tm-infr-actions .tm-btn { margin: 0 4px 4px 0; }
.tm-infr-mini { padding: 2px 8px !important; font-size: 11px !important; }

.tm-infr-pager {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
}

.tm-infr-detail-grid {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 4px 10px;
    font-size: 12px;
    margin-bottom: 10px;
}

#tm-infr-detail-summary .tm-infr-source-link {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    color: #1976d2;
    font: inherit;
    font-size: inherit !important;
    font-weight: 400 !important;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    text-decoration: none;
}

#tm-infr-detail-summary .tm-infr-source-link:hover,
#tm-infr-detail-summary .tm-infr-source-link:focus-visible {
    text-decoration: underline;
}

.tm-infr-detail-label {
    color: var(--tm-muted, #64748b);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tm-infr-detail-section {
    font-weight: 700;
    font-size: 12px;
    margin: 12px 0 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--tm-border-soft, #c9d3e6);
}

.tm-infr-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tm-infr-delivery-row {
    padding: 6px 0;
    border-bottom: 1px dashed var(--tm-border-soft, #c9d3e6);
}

.tm-btn-danger {
    background: #b42318 !important;
    border-color: #b42318 !important;
    color: #fff !important;
}

/* Severity / confidence / status badge tones (light + dark) */
.tm-infr-severity-Minor { background: #fdf1d2; color: #8a6100; }
.tm-infr-severity-Serious { background: #ffe3cc; color: #a04b00; }
.tm-infr-severity-VerySerious { background: #fbdede; color: #a31414; }
.tm-infr-severity-MostSerious { background: #a31414; color: #fff; }
.tm-infr-severity-NeedsReview { background: #e7e9ec; color: #55606b; }
.tm-infr-confidence-Confirmed { background: #dff3e6; color: #1e7e42; }
.tm-infr-confidence-NeedsReview { background: #fdf1d2; color: #8a6100; }
.tm-infr-confidence-InsufficientData { background: #e7e9ec; color: #55606b; }
.tm-infr-status-NeedsReview { background: #fdf1d2; color: #8a6100; }
.tm-infr-status-ReadyToSend { background: #d8e9fb; color: #1c5f9e; }
.tm-infr-status-Sent { background: #d8e9fb; color: #1c5f9e; }
.tm-infr-status-Viewed { background: #d8e9fb; color: #1c5f9e; }
.tm-infr-status-Signed { background: #dff3e6; color: #1e7e42; }
.tm-infr-status-Disputed { background: #ffe3cc; color: #a04b00; }
.tm-infr-status-Withdrawn { background: #e7e9ec; color: #55606b; }
.tm-infr-status-Closed { background: #e7e9ec; color: #55606b; }
.tm-infr-status-Preview { background: #e7e9ec; color: #55606b; }
/* Transient, shown only while a send is in flight; it pulses so it never reads as a settled state. */
.tm-infr-status-Sending { background: #d8e9fb; color: #1c5f9e; animation: tm-infr-sending-pulse 1.1s ease-in-out infinite; }

@keyframes tm-infr-sending-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-infr-status-Sending { animation: none; }
}

html.tm-dark .tm-infr-severity-Minor,
html.tm-dark .tm-infr-confidence-NeedsReview,
html.tm-dark .tm-infr-status-NeedsReview { background: rgba(138, 97, 0, 0.3); color: #eec86a; }
html.tm-dark .tm-infr-severity-Serious,
html.tm-dark .tm-infr-status-Disputed { background: rgba(160, 75, 0, 0.3); color: #f0a86e; }
html.tm-dark .tm-infr-severity-VerySerious { background: rgba(163, 20, 20, 0.3); color: #f2a1a1; }
html.tm-dark .tm-infr-confidence-Confirmed,
html.tm-dark .tm-infr-status-Signed { background: rgba(30, 126, 66, 0.3); color: #7ed6a0; }
html.tm-dark .tm-infr-status-ReadyToSend,
html.tm-dark .tm-infr-status-Sent,
html.tm-dark .tm-infr-status-Sending,
html.tm-dark .tm-infr-status-Viewed { background: rgba(28, 95, 158, 0.35); color: #8fc2f2; }
html.tm-dark .tm-infr-severity-NeedsReview,
html.tm-dark .tm-infr-confidence-InsufficientData,
html.tm-dark .tm-infr-status-Withdrawn,
html.tm-dark .tm-infr-status-Closed,
html.tm-dark .tm-infr-status-Preview { background: rgba(85, 96, 107, 0.35); color: #b8c2cc; }


/* The tm.ui.nav.js date enhancer wraps date inputs in a .tm-dateui-wrap with an inline
   width:100%; inside the tachograph filter toolbars that must stay a compact fixed width. */
.tm-tacho-filters .tm-dateui-wrap { width: 150px !important; flex: 0 0 150px; }

/* Empty-state hint line rendered by TM.EmptyState.html() — tells the user that
   records may still exist for another driver/company/range than the selected one. */
.tm-empty-hint {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    opacity: .75;
}

/* =========================================================
   Global number stepper (wwwroot/tm/tm.ui.stepper.js)
   Chrome's native spin buttons are effectively invisible on the dark theme, so
   every number field is given this pair of arrows instead.
   ========================================================= */
.tm-stepper {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

    .tm-stepper > input,
    .tm-stepper > [contenteditable] {
        width: 100%;
        -moz-appearance: textfield;
    }

        .tm-stepper > input[type="number"]::-webkit-inner-spin-button,
        .tm-stepper > input[type="number"]::-webkit-outer-spin-button {
            margin: 0;
            -webkit-appearance: none;
        }

    .tm-stepper-buttons {
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: 1px;
        width: 20px;
        display: grid;
        grid-template-rows: 1fr 1fr;
        overflow: hidden;
        border-left: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 0 2px 2px 0;
        background: transparent;
    }

    /* Disabled / read-only / permission-locked fields keep the padding but lose the arrows. */
    .tm-stepper.tm-stepper-locked .tm-stepper-buttons {
        display: none;
    }

    .tm-stepper-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
    }

        .tm-stepper-btn + .tm-stepper-btn {
            border-top: 1px solid var(--tm-border-soft, #c9d3e6);
        }

        .tm-stepper-btn:hover,
        .tm-stepper-btn:focus-visible {
            background: rgba(70, 130, 180, 0.14);
            outline: none;
        }

    /* `.tm-modal, .tm-modal *` forces `color` with !important, so the arrows
       cannot be drawn with currentColor -- they read this variable instead. */
    .tm-stepper-icon {
        --tm-stepper-arrow: #5b657a;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
    }

    .tm-stepper-up .tm-stepper-icon {
        border-bottom: 5px solid var(--tm-stepper-arrow);
    }

    .tm-stepper-down .tm-stepper-icon {
        border-top: 5px solid var(--tm-stepper-arrow);
    }

    .tm-stepper-btn:hover .tm-stepper-icon {
        --tm-stepper-arrow: #4682B4;
    }

html.tm-dark .tm-stepper-buttons {
    border-left-color: rgba(160, 178, 206, 0.28);
}

    html.tm-dark .tm-stepper-btn + .tm-stepper-btn {
        border-top-color: rgba(160, 178, 206, 0.28);
    }

    html.tm-dark .tm-stepper-btn:hover,
    html.tm-dark .tm-stepper-btn:focus-visible {
        background: rgba(120, 170, 220, 0.20);
    }

    html.tm-dark .tm-stepper-icon {
        --tm-stepper-arrow: #a9bcd6;
    }

    html.tm-dark .tm-stepper-btn:hover .tm-stepper-icon {
        --tm-stepper-arrow: #ffffff;
    }

/* ======================================================
   TOPBAR BRAND (logo lockup, always visible)
   ====================================================== */
header.tm-topbar[data-tm-topbar] .tm-topbar-brand {
    order: 0;
    flex: 0 0 auto;
    /* nav mygtukai remiasi i header padding-top, o ne i flex-end (nes .tm-top-actions
       apacioje rezervuoja vietos horizontaliai slinkties juostai) - lygiuojam i juos */
    align-self: flex-start;
    display: flex;
    align-items: center;
    height: var(--tm-topbar-h);
    padding: 0 10px 0 2px;
    margin-right: 8px;
    border-right: 1px solid rgba(0,0,0,.12);
    border-radius: 6px 0 0 6px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity .12s ease;
}

    header.tm-topbar[data-tm-topbar] .tm-topbar-brand:hover {
        opacity: .78;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-brand:focus-visible {
        outline: 2px solid rgba(47,111,166,.45);
        outline-offset: 2px;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img {
        display: block;
        /* paveiksliukas apkarpytas be permatomu parasciu, tad sie matmenys = realus logotipo dydis */
        width: 121px;
        height: 30px;
        background: url("/assets/brand/topbar-logo-registered.png") left center / contain no-repeat;
    }

html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-brand {
    border-right-color: var(--tm-border-soft, rgba(255,255,255,.14));
}

    html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img {
        background-image: url("/assets/brand/topbar-logo-registered-dark.png");
    }

/* Pilnas logotipas su uzrasu rodomas visur, kur bent kiek prasminga.
   Tik labai siauruose ekranuose (planseses/telefonai) liekame prie zenklo -
   ten nav eilute vis tiek slenka horizontaliai ir kiekvienas pikselis svarbus. */
@media (max-width: 900px) {
    header.tm-topbar[data-tm-topbar] .tm-topbar-brand {
        padding: 0 8px 0 2px;
        margin-right: 6px;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img,
    html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img {
        width: 30px;
        height: 30px;
        background-image: url("/assets/brand/topbar-mark.png");
    }
}

/* =========================================================
   DRIVER LICENCE CHECK HISTORY MODAL
   Opens on top of the driver form, so it sits above both the
   driver modal (10055) and the upload modal (10070).
   ========================================================= */
#tm-driver-history-backdrop.tm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10075;
    padding: 16px;
    box-sizing: border-box;
}

    #tm-driver-history-backdrop.tm-backdrop[hidden] {
        display: none !important;
    }

#tm-driver-history-backdrop .tm-modal {
    width: min(880px, 96vw);
    max-width: calc(100vw - 32px);
    background: var(--tm-bg-card, #fff);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
    overflow: hidden;
}

#tm-driver-history-backdrop .tm-modal-head {
    background: var(--tm-primary, #4c84b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

#tm-driver-history-backdrop .tm-title {
    font-size: 14px;
    font-weight: 800;
}

#tm-driver-history-backdrop .tm-x {
    width: 30px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

    #tm-driver-history-backdrop .tm-x:hover {
        background: rgba(255,255,255,0.25);
    }

/* One fixed height: Record a check opens the form inside it and the list gives up the room,
   so the dialog never grows or jumps when the form opens or closes. */
#tm-driver-history-backdrop .tm-modal-body {
    padding: 14px 16px 16px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

html:not(.tm-mobile) #tm-driver-history-backdrop .tm-modal-body {
    height: min(470px, calc(100vh - 190px));
    max-height: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    html:not(.tm-mobile) #tm-driver-history-backdrop .tm-modal-body > * {
        flex: 0 0 auto;
    }

    html:not(.tm-mobile) #tm-driver-history-backdrop .tm-modal-body > .tm-driver-history-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

#tm-driver-history-backdrop .tm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--tm-border-soft, #c9d3e6);
    background: var(--tm-bg-card, #fff);
}

.tm-driver-history-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-text-main, #1f2933);
    margin-bottom: 10px;
}

.tm-driver-history-error {
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid #c62828;
    border-radius: 3px;
    background: rgba(198,40,40,0.08);
    color: #c62828;
    font-size: 12px;
    font-weight: 700;
}

html.tm-dark .tm-driver-history-error {
    border-color: #ff7b7b;
    color: #ff7b7b;
    background: rgba(255,123,123,0.10);
}

.tm-driver-history-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.tm-driver-history-form {
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--tm-bg-soft, #f7f9fd);
}

html.tm-dark .tm-driver-history-form {
    background: rgba(255,255,255,0.04);
    border-color: rgba(201,211,230,0.16);
}

.tm-driver-history-form-grid {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 130px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 10px;
    align-items: center;
}

    .tm-driver-history-form-grid label {
        font-size: 12px;
        color: var(--tm-text-main, #1f2933);
        margin: 0;
    }

    .tm-driver-history-form-grid .tm-input {
        width: 100%;
        min-width: 0;
    }

.tm-driver-history-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

/* A min-height keeps the modal the same size whether the driver has one check or twenty, so
   opening it does not snap the dialog between a sliver and a full panel. */
.tm-driver-history-list {
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: min(300px, 40vh);
    max-height: min(440px, 60vh);
    background: var(--tm-bg-card, #fff);
}

.tm-driver-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

    .tm-driver-history-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        text-align: left;
        white-space: nowrap;
        padding: 8px 10px;
        background: var(--tm-bg-soft, #eef3fa);
        color: var(--tm-text-main, #1f2933);
        border-bottom: 1px solid var(--tm-border-soft, #c9d3e6);
        font-weight: 700;
    }

    .tm-driver-history-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--tm-border-soft, #e2e8f0);
        color: var(--tm-text-main, #1f2933);
        white-space: nowrap;
        vertical-align: top;
    }

    .tm-driver-history-table tr:last-child td {
        border-bottom: 0;
    }

html.tm-dark .tm-driver-history-list {
    background: var(--tm-bg-card, #0f1a2d);
}

html.tm-dark .tm-driver-history-table th {
    background: rgba(255,255,255,0.06);
    border-bottom-color: rgba(201,211,230,0.16);
}

html.tm-dark .tm-driver-history-table td {
    border-bottom-color: rgba(201,211,230,0.16);
}

.tm-driver-history-date {
    font-weight: 700;
}

.tm-driver-history-files {
    white-space: normal !important;
    max-width: 220px;
}

.tm-driver-history-file {
    display: block;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tm-primary, #4c84b6);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .tm-driver-history-file + .tm-driver-history-file {
        margin-top: 2px;
    }

    .tm-driver-history-file:hover {
        opacity: .8;
    }

html.tm-dark .tm-driver-history-file {
    color: #8ab4e8;
}

.tm-driver-history-muted {
    color: var(--tm-text-muted, #64748b);
}

.tm-driver-history-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--tm-text-muted, #64748b);
}

.tm-driver-history-form-actions-spacer {
    flex: 1 1 auto;
}

.tm-driver-history-pending-file {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 7px 10px;
    border: 1px solid rgba(76,132,182,.25);
    border-radius: 3px;
    background: rgba(76,132,182,.08);
    font-size: 12px;
    color: var(--tm-text-main, #1f2933);
}

    .tm-driver-history-pending-file[hidden] {
        display: none !important;
    }

html.tm-dark .tm-driver-history-pending-file {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}

.tm-driver-history-pending-label {
    font-weight: 700;
}

.tm-driver-history-pending-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.tm-driver-history-pending-hint {
    color: var(--tm-text-muted, #64748b);
}

.tm-driver-history-pending-remove {
    margin-left: auto;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    background: transparent;
    color: var(--tm-text-muted, #64748b);
    border-radius: 3px;
    width: 24px;
    height: 22px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

    .tm-driver-history-pending-remove:hover {
        background: rgba(0,0,0,.06);
    }

html.tm-dark .tm-driver-history-pending-remove {
    border-color: rgba(201,211,230,0.20);
}

    html.tm-dark .tm-driver-history-pending-remove:hover {
        background: rgba(255,255,255,.08);
    }

/* What a DVLA PDF import read: same frame as the licence check history modal, and opens on top
   of it, so it sits one layer higher. */
#tm-dvla-result-bd.tm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10085;
    padding: 16px;
    box-sizing: border-box;
}

#tm-dvla-result-bd .tm-modal {
    width: min(440px, 96vw);
    max-width: calc(100vw - 32px);
    background: var(--tm-bg-card, #fff);
    color: var(--tm-text-main, #1f2933);
    border: 1px solid var(--tm-border-soft, #c9d3e6);
    border-radius: 3px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.22);
    overflow: hidden;
}

#tm-dvla-result-bd .tm-modal-head {
    background: var(--tm-primary, #4c84b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

#tm-dvla-result-bd .tm-title {
    font-size: 14px;
    font-weight: 800;
}

#tm-dvla-result-bd .tm-x {
    width: 30px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

    #tm-dvla-result-bd .tm-x:hover {
        background: rgba(255,255,255,0.25);
    }

#tm-dvla-result-bd .tm-modal-body {
    padding: 14px 16px 16px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    font-size: 12px;
}

#tm-dvla-result-bd .tm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--tm-border-soft, #c9d3e6);
    background: var(--tm-bg-card, #fff);
}

.tm-dvla-result-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tm-border-soft, #c9d3e6);
}

    .tm-dvla-result-table th,
    .tm-dvla-result-table td {
        padding: 7px 10px;
        text-align: left;
        border-bottom: 1px solid var(--tm-border-soft, #e2e8f0);
    }

    .tm-dvla-result-table th {
        width: 45%;
        font-weight: 700;
        background: var(--tm-bg-soft, #eef3fa);
        white-space: nowrap;
    }

    .tm-dvla-result-table tr:last-child th,
    .tm-dvla-result-table tr:last-child td {
        border-bottom: 0;
    }

.tm-dvla-result-row.is-due td {
    color: #b45309;
    font-weight: 700;
}

.tm-dvla-result-row.is-expired td {
    color: #c62828;
    font-weight: 700;
}

.tm-dvla-result-changes {
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid #f3d48a;
    border-radius: 3px;
    background: #fff8e6;
    line-height: 1.6;
}

.tm-dvla-result-changes-title,
.tm-dvla-result-changes-label {
    font-weight: 700;
}

.tm-dvla-result-note {
    margin-top: 12px;
    line-height: 1.5;
    color: var(--tm-text-muted, #64748b);
}

html.tm-dark #tm-dvla-result-bd .tm-modal {
    background: var(--tm-bg-card, #111a2e);
    color: var(--tm-text-main, #e6edf7);
    border-color: rgba(201,211,230,0.2);
    box-shadow: 0 18px 40px rgba(0,0,0,0.42);
}

html.tm-dark #tm-dvla-result-bd .tm-actions {
    background: var(--tm-bg-card, #111a2e);
    border-top-color: rgba(201,211,230,0.16);
}

html.tm-dark .tm-dvla-result-table {
    border-color: rgba(201,211,230,0.16);
}

    html.tm-dark .tm-dvla-result-table th {
        background: rgba(255,255,255,0.06);
    }

    html.tm-dark .tm-dvla-result-table th,
    html.tm-dark .tm-dvla-result-table td {
        border-bottom-color: rgba(201,211,230,0.16);
    }

html.tm-dark .tm-dvla-result-row.is-due td {
    color: #fbbf24;
}

html.tm-dark .tm-dvla-result-row.is-expired td {
    color: #ff7b7b;
}

html.tm-dark .tm-dvla-result-changes {
    border-color: rgba(251,191,36,0.35);
    background: rgba(251,191,36,0.10);
}

html.tm-dark .tm-dvla-result-note {
    color: #9fb0c9;
}

/* =========================================================
   Mobile planner layout
   ========================================================= */
@media (max-width: 760px) {
    html,
    body {
        height: auto !important;
        min-height: 100%;
        -webkit-text-size-adjust: 100%;
    }

    html {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: auto;
    }

    body {
        width: 100%;
        min-width: 0 !important;
    }

    /* The topbar is a direct child of BODY and sticks to it. Giving BODY its
       own overflow makes BODY the scrollport, and since BODY is as tall as its
       content it never scrolls -- so the sticky header just scrolled away.
       Leave scrolling to HTML alone and the header stays put.
       Written as `html.tm-mobile body` to outrank the per-page
       `html, body { overflow-x: hidden !important }` several pages declare. */
    html.tm-mobile body,
    html body {
        overflow: visible !important;
    }

    #app-root {
        width: 100%;
        min-height: 100vh;
        /* `overflow: hidden` here made #app-root the sticky containing block,
           so the topbar scrolled away with the page. `clip` keeps stray
           horizontal overflow contained without creating a scroll container,
           which is what sticky positioning needs. */
        overflow: clip;
    }

    header.tm-topbar[data-tm-topbar] {
        min-height: 48px;
        padding: 6px 8px !important;
        gap: 6px;
        align-items: center;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-brand {
        align-self: center;
        height: 36px;
        padding: 0 7px 0 0;
        margin-right: 2px;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img,
    html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img {
        width: 30px;
        height: 30px;
        background-image: url("/assets/brand/topbar-mark.png");
    }

    header.tm-topbar[data-tm-topbar] .tm-top-actions {
        align-items: center;
        padding-bottom: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    header.tm-topbar[data-tm-topbar] .tm-top-actions::-webkit-scrollbar {
        display: none;
    }

    header.tm-topbar[data-tm-topbar] .tm-btn {
        height: 36px;
        min-height: 36px;
        padding: 0 10px !important;
        border-radius: 6px;
        font-size: 13px;
        flex: 0 0 auto;
    }

    header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-active {
        border-bottom-width: 3px;
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-right {
        gap: 6px;
    }

    header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-icon,
    header.tm-topbar[data-tm-topbar] #tm-user-settings,
    header.tm-topbar[data-tm-topbar] #tm-notifications-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    .tm-nav-badge {
        min-width: 15px;
        height: 15px;
        margin-left: 4px;
        padding: 0 4px;
        font-size: 9px;
        line-height: 15px;
    }

    main.tm-main:has(#tm-calendar) {
        display: flex !important;
        flex-direction: column;
        grid-template-columns: none !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 10px;
        padding: 8px;
        overflow: visible !important;
    }

    main.tm-main:has(#tm-calendar) .tm-column {
        width: 100%;
        min-width: 0 !important;
        height: auto !important;
        border-top: 1px solid var(--tm-border-soft);
        border-radius: 4px;
    }

    main.tm-main:has(#tm-calendar) .tm-column-center {
        order: 1;
        overflow: visible;
        background: transparent;
    }

    main.tm-main:has(#tm-calendar) .tm-column-right {
        order: 2;
        height: min(38vh, 320px) !important;
        min-height: 220px;
    }

    main.tm-main:has(#tm-calendar) .tm-column-left {
        order: 3;
        height: min(38vh, 320px) !important;
        min-height: 220px;
    }

    main.tm-main:has(#tm-calendar) .tm-column-resizer {
        display: none !important;
    }

    main.tm-main:has(#tm-calendar) .tm-column-header {
        padding: 7px 8px;
    }

    main.tm-main:has(#tm-calendar) .tm-column-title {
        font-size: 14px;
    }

    main.tm-main:has(#tm-calendar) .tm-search-wrapper {
        padding: 6px 8px;
    }

    main.tm-main:has(#tm-calendar) .tm-search {
        min-height: 36px;
        padding: 7px 34px 7px 9px;
        font-size: 16px;
    }

    main.tm-main:has(#tm-calendar) .tm-search-clear {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    #tm-past-list .tm-list-item,
    #tm-upcoming-list .tm-list-item {
        min-height: 34px;
        padding: 7px 8px;
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    main.tm-main:has(#tm-calendar) #tm-calendar {
        width: 100%;
        min-width: 0;
        padding: 4px 0 0;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    main.tm-main:has(#tm-calendar) #tm-calendar > .tm-month-grid,
    main.tm-main:has(#tm-calendar) #tm-calendar > .tm-month-row-view,
    main.tm-main:has(#tm-calendar) #tm-calendar > .tm-week-view,
    main.tm-main:has(#tm-calendar) #tm-calendar > .tm-day-view {
        left: 0 !important;
    }

    main.tm-main:has(#tm-calendar) #tm-calendar.tm-calendar-view-year,
    main.tm-main:has(#tm-calendar) #tm-calendar.tm-calendar-view-month {
        overflow: visible !important;
    }

    main.tm-main:has(#tm-calendar) .tm-month-grid:not(.tm-month-grid-single) {
        width: min(430px, 100%) !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 12px !important;
        justify-content: stretch;
        margin: 0 auto !important;
    }

    main.tm-main:has(#tm-calendar) .tm-month {
        min-height: 0;
        padding: 0 4px 8px;
        overflow: visible;
    }

    main.tm-main:has(#tm-calendar) .tm-month-header {
        padding-bottom: 5px;
        font-size: 14px;
    }

    main.tm-main:has(#tm-calendar) .tm-weekdays-row,
    main.tm-main:has(#tm-calendar) .tm-week-row {
        grid-template-columns: 24px repeat(7, minmax(0, 1fr));
        gap: 3px;
    }

    main.tm-main:has(#tm-calendar) .tm-week-row {
        margin-bottom: 4px;
    }

    main.tm-main:has(#tm-calendar) .tm-weeknum-header,
    main.tm-main:has(#tm-calendar) .tm-weeknum,
    main.tm-main:has(#tm-calendar) .tm-weekdays-row {
        font-size: 10px;
    }

    main.tm-main:has(#tm-calendar) .tm-day {
        min-height: 30px;
        border-radius: 5px;
        font-size: 11px;
        touch-action: manipulation;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    main.tm-main:has(#tm-calendar) .tm-day-number {
        font-size: 11px;
    }

    main.tm-main:has(#tm-calendar) .tm-day-bars {
        width: 5px;
        min-width: 5px;
        max-width: 5px;
    }

    main.tm-main:has(#tm-calendar) .tm-calendar-header.tm-calendar-nav-final {
        gap: 6px;
        justify-content: center;
        padding: 8px 2px 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    main.tm-main:has(#tm-calendar) .tm-calendar-header.tm-calendar-nav-final::-webkit-scrollbar {
        display: none;
    }

    main.tm-main:has(#tm-calendar) #tm-year-prev,
    main.tm-main:has(#tm-calendar) #tm-year-next,
    main.tm-main:has(#tm-calendar) #tm-year-zoom-in,
    main.tm-main:has(#tm-calendar) #tm-year-zoom-out {
        width: 38px;
        min-width: 38px;
        height: 32px;
        min-height: 32px;
        flex-basis: 38px;
    }

    main.tm-main:has(#tm-calendar) #tm-year-label,
    main.tm-main:has(#tm-calendar) .tm-year-today {
        min-width: 68px;
        height: 32px;
        min-height: 32px;
        padding: 0 12px;
        font-size: 12px;
    }

    main.tm-main:has(#tm-calendar) .tm-week-view,
    main.tm-main:has(#tm-calendar) .tm-day-view {
        width: 100% !important;
        padding: 4px 0 6px;
    }

    main.tm-main:has(#tm-calendar) .tm-day-task-item {
        min-height: 36px;
        padding: 7px 8px;
    }

    main.tm-main:has(#tm-calendar) .tm-day-task-item .tm-week-task-text,
    main.tm-main:has(#tm-calendar) .tm-week-task-text {
        font-size: 12px;
        line-height: 1.2;
    }

    .tm-backdrop {
        /* Clears the sticky topbar without wasting height: the modal sizes to
           this padded box (max-height:100%), so every pixel spent here comes
           straight off the space the modal has for its content. */
        padding: max(60px, calc(env(safe-area-inset-top) + 54px)) 10px max(14px, calc(env(safe-area-inset-bottom) + 12px)) !important;
        align-items: flex-start !important;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .tm-backdrop .tm-modal,
    .tm-backdrop .tm-small-modal,
    .tm-backdrop .tm-modalbox {
        width: min(100%, calc(100vw - 20px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 104px) !important;
    }

    .tm-backdrop .tm-modal-body {
        overflow: auto;
    }

    .tm-actions,
    .tm-modal-actions,
    .tm-driver-modal-actions,
    .tm-driver-upload-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ======================================================
   Mobile app pages final overrides
   Keep this after legacy "paste at END" planner blocks.
   ====================================================== */
@media (max-width: 760px) {
    .tm-page,
    .tm-billing-page,
    .tm-referral-page,
    .tm-users-shell,
    .tm-driver-admin-page,
    .tm-driver-template-page,
    .tm-admin-billing-page,
    .tm-admin-support-page {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: calc(100dvh - var(--tm-nav-h, 52px)) !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .tm-page:not(:has(#tm-calendar)),
    .tm-billing-header-card,
    .tm-billing-overview,
    .tm-billing-main-grid,
    .tm-billing-dashboard-grid,
    .tm-referral-overview,
    .tm-referral-content,
    .tm-driver-admin-grid,
    .tm-admin-detail-grid,
    .tm-admin-ticket-grid,
    .tm-admin-usage-grid,
    .tm-admin-summary-grid,
    .tm-support-grid,
    .tm-plan-grid,
    .tm-form-grid,
    .tm-fixed-grid,
    .tm-driver-access-modal-grid,
    .tm-driver-grid-row,
    .tm-driver-history-form-grid,
    .tm-inv-editor-body,
    .tm-inv-editor-grid,
    .tm-infr-detail-grid,
    .tm-tacho-rt-columns,
    .tm-tacho-cards,
    .tmd-grid,
    .tmd-kpis {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tm-panel,
    .tm-panel-nohead,
    .tm-panel-body,
    .tm-panel-body-nohead,
    .tm-users-page-card,
    .tm-users-page-body,
    .tm-driver-admin-card,
    .tm-driver-admin-card-body,
    .tm-driver-template-card,
    .tm-driver-template-card-body,
    .tm-admin-panel,
    .tm-billing-panel,
    .tm-referral-panel,
    .tm-referral-card,
    .tm-support-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .tm-toolbar,
    .tm-defects-toolbar,
    .tm-vor-toolbar,
    .tm-inv-toolbar,
    .tm-admin-toolbar,
    .tm-admin-panel-head,
    .tm-admin-panel-actions,
    .tm-billing-panel-head,
    .tm-billing-header-actions,
    .tm-plan-toolbar,
    .tm-users-page-head,
    .tm-team-toolbar,
    .tm-team-editor-head,
    .tm-team-editor-actions,
    .tm-driver-admin-toolbar,
    .tm-driver-admin-card-head,
    .tm-driver-admin-template-toolbar,
    .tm-driver-upload-toolbar,
    .tm-driver-history-toolbar,
    .tm-driver-admin-report-image-toolbar,
    .tm-tacho-filters,
    .tm-actions,
    .tm-modal-actions,
    .tm-driver-modal-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .tm-toolbar-left,
    .tm-toolbar-right,
    .tm-defects-toolbar-left,
    .tm-defects-toolbar-right,
    .tm-vor-toolbar-left,
    .tm-vor-toolbar-right,
    .tm-inv-toolbar-left,
    .tm-inv-toolbar-right,
    .tm-admin-panel-actions > *,
    .tm-billing-header-actions > *,
    .tm-driver-admin-card-head-main,
    .tm-driver-admin-card-head-side,
    .tm-driver-admin-template-toolbar-main,
    .tm-plan-toolbar-title {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .tm-search-wrap,
    .tm-search-wrapper,
    .tm-search,
    .tm-input,
    .tm-select,
    .tm-textarea,
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.tm-dateui-wrap > input[type="date"]),
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
    }

    .tm-tablewrap,
    .tm-table-wrap,
    .tm-defects-table-wrap,
    .tm-vor-table-wrap,
    .tm-inv-table-wrap,
    .tm-admin-table-wrap,
    .tm-billing-table-wrap,
    .tm-referral-table-wrap,
    .tm-driver-admin-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    .tm-tablewrap > table,
    .tm-table-wrap > table,
    .tm-defects-table-wrap > table,
    .tm-vor-table-wrap > table,
    .tm-inv-table-wrap > table,
    .tm-admin-table-wrap > table,
    .tm-billing-table-wrap > table,
    .tm-referral-table-wrap > table,
    .tm-driver-admin-table-wrap > table,
    table.tm-table,
    table.tm-admin-table,
    table.tm-billing-table,
    table.tm-referral-table {
        width: max-content !important;
        min-width: 680px !important;
        max-width: none !important;
        table-layout: auto !important;
    }

    .tm-table th,
    .tm-table td,
    .tm-admin-table th,
    .tm-admin-table td,
    .tm-billing-table th,
    .tm-billing-table td,
    .tm-referral-table th,
    .tm-referral-table td {
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    html body.tm-users-standalone .tm-users-shell,
    html body.tm-users-standalone .tm-users-page-card,
    html body.tm-users-standalone .tm-users-page-body,
    html body.tm-users-standalone #tm-team-section,
    html body.tm-users-standalone .tm-team-layout,
    html body.tm-users-standalone .tm-team-panel,
    html body.tm-users-standalone .tm-team-panel-right,
    html body.tm-users-standalone #tm-team-editor:not([hidden]) {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html body.tm-users-standalone .tm-team-layout {
        flex-direction: column !important;
    }

    html body.tm-users-standalone .tm-team-panel-left {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 240px !important;
        overflow: hidden !important;
    }

    html body.tm-users-standalone #tm-team-editor .tm-team-form,
    html body.tm-users-standalone .tm-team-form,
    html body.tm-users-standalone .tm-team-perm-row,
    html body.tm-users-standalone .tm-team-choice-grid,
    html body.tm-users-standalone #tm-team-features-list,
    html body.tm-users-standalone #tm-team-companies-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .tm-tacho-tabs {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tm-tacho-tabs::-webkit-scrollbar {
        display: none;
    }

    .tm-tacho-tabs-list {
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
        flex-wrap: nowrap !important;
    }

    .tm-tacho-panel.active {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .tm-tacho-panel .tm-tablewrap {
        max-height: 52dvh !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .tm-billing-checkout-backdrop {
        align-items: flex-start !important;
        padding: max(72px, calc(env(safe-area-inset-top) + 52px)) 8px max(14px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
    }

    .tm-billing-checkout-modal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 100px) !important;
        transform: none !important;
    }

    .tm-billing-checkout-body {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* =========================================================
   UNIFIED MOBILE SYSTEM  (tm.mobile.js companion)
   Must stay the LAST block in this file - it is the
   authority for phone layout on every app page.
   ========================================================= */

/* Fill colour for a table row rendered as a card on a phone. */
:root,
html.tm-light {
    --tm-mcard-bg: #ffffff;
}

html.tm-dark {
    --tm-mcard-bg: #1b222e;
}

/* Hidden on desktop; the drawer only exists on phones. */
.tm-mnav-toggle,
.tm-mnav-title,
.tm-mnav-panel,
.tm-mnav-backdrop {
    display: none;
}

@media (max-width: 760px) {

    /* ---------------------------------------------------
       1. Topbar: hamburger + page title, strip retired
       --------------------------------------------------- */
    header.tm-topbar[data-tm-topbar] .tm-top-actions {
        display: none !important;
    }

    header.tm-topbar[data-tm-topbar] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 8px !important;
        min-height: 52px;
        padding: 6px 10px !important;
        /* The topbar shipped at z-index 200000, above every modal backdrop
           (10080) and the context menu (10060). On a phone the modal starts
           right under the header, so the header intercepted taps meant for the
           modal's close button - that is why User Settings could not be shut.
           It stays above the page and below any overlay. */
        z-index: 1000 !important;
    }

    html.tm-mobile .tm-mnav-toggle {
        display: inline-flex !important;
        order: 0;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        /* Same identity as the topbar it sits in: steel blue on a light
           blue tint, not a neutral white box. */
        border: 1px solid rgba(47, 111, 166, .28);
        border-radius: 8px;
        background: var(--tm-topbar-hover, rgba(47, 111, 166, .12));
        color: var(--tm-topbar-blue, #2f6fa6);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tm-mnav-toggle:active {
        background: rgba(47, 111, 166, .24);
    }

    .tm-mnav-toggle-bars,
    .tm-mnav-toggle-bars::before,
    .tm-mnav-toggle-bars::after {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

    .tm-mnav-toggle-bars {
        position: relative;
    }

    .tm-mnav-toggle-bars::before,
    .tm-mnav-toggle-bars::after {
        content: "";
        position: absolute;
        left: 0;
    }

    .tm-mnav-toggle-bars::before {
        top: -6px;
    }

    .tm-mnav-toggle-bars::after {
        top: 6px;
    }

    /* Fixed width so the logo always sits in the same place instead of
       sliding with the page name. Most section names fit; the few that do not
       are cut with an ellipsis, never abbreviated to something invented. */
    .tm-mnav-title {
        display: block !important;
        order: 1;
        /* gives way (never grows) when the help lorry docks beside the bell */
        flex: 0 1 100px;
        width: 100px;
        min-width: 0;
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Topbar order on a phone: [menu] [page title] [full logo] [bell] [avatar].
       The logo sits between the title and the bell, so the title takes
       whatever width is left and ellipsises. */
    header.tm-topbar[data-tm-topbar] .tm-topbar-brand {
        display: flex !important;
        order: 2;
        flex: 0 0 auto;
        align-self: center;
        align-items: center;
        justify-content: flex-start;
        height: 40px;
        min-height: 40px;
        /* auto right margin pushes the bell/avatar group to the far edge and
           keeps the logo tucked in beside the title */
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
    }

    /* The full wordmark, not the compact square. Both themes are set here
       because the older mobile block above pins the mark image for each. */
    header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img {
        width: 92px !important;
        height: 24px !important;
        background-image: url("/assets/brand/topbar-logo-registered.png") !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-brand .tm-topbar-brand-img {
        background-image: url("/assets/brand/topbar-logo-registered-dark.png") !important;
    }

    html.tm-dark header.tm-topbar[data-tm-topbar] .tm-topbar-brand {
        border-right-color: rgba(255, 255, 255, .16);
    }

    header.tm-topbar[data-tm-topbar] .tm-topbar-right {
        order: 3;
        flex: 0 0 auto;
        gap: 6px;
    }

    header.tm-topbar[data-tm-topbar] .tm-btn.tm-btn-icon,
    header.tm-topbar[data-tm-topbar] #tm-user-settings,
    header.tm-topbar[data-tm-topbar] #tm-notifications-btn {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    /* ---------------------------------------------------
       2. Drawer panel
       --------------------------------------------------- */
    .tm-mnav-backdrop {
        display: block !important;
        position: fixed;
        inset: 0;
        z-index: 4000;
        background: rgba(12, 20, 33, .48);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .tm-mnav-backdrop.tm-mnav-visible {
        opacity: 1;
    }

    .tm-mnav-panel {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 4001;
        flex-direction: column;
        width: min(280px, 80vw);
        /* A faint blue wash rather than flat white, so the panel reads as
           part of the app instead of a browser sheet. */
        background:
            linear-gradient(180deg, rgba(70, 130, 180, .07), rgba(70, 130, 180, .02) 220px),
            var(--tm-bg-card, #fff);
        border-right: 1px solid var(--tm-border-soft, #c9d3e6);
        box-shadow: 0 0 34px rgba(12, 20, 33, .28);
        transform: translateX(-102%);
        transition: transform .22s ease;
        overscroll-behavior: contain;
    }

    .tm-mnav-panel.tm-mnav-visible {
        transform: translateX(0);
    }

    .tm-mnav-panel[hidden] {
        display: none !important;
    }

    .tm-mnav-backdrop[hidden] {
        display: none !important;
    }

    .tm-mnav-head {
        display: flex;
        position: relative;
        flex: 0 0 auto;
        align-items: center;
        gap: 8px;
        min-height: 52px;
        /* 10px left matches the topbar padding, so the hamburger does not
           shift when the drawer opens over it. */
        padding: 6px 10px;
        padding-top: max(6px, env(safe-area-inset-top));
        justify-content: flex-start;
        /* No yellow here: that colour means "this is the section you are on",
           and it belongs under the active row alone. */
        border-bottom: 1px solid rgba(0, 0, 0, .18);
        background: linear-gradient(180deg, var(--tm-primary, #4682B4), var(--tm-primary-dark, #225ca2));
        color: #fff;
    }

    /* Sits where the topbar hamburger is, so it lands under the same thumb.
       On the blue header it is light-on-blue rather than blue-on-tint. */
    html.tm-mobile .tm-mnav-panel .tm-mnav-head-toggle {
        flex: 0 0 auto;
        border-color: rgba(255, 255, 255, .38) !important;
        background: rgba(255, 255, 255, .14) !important;
        color: #fff !important;
    }

    html.tm-mobile .tm-mnav-panel .tm-mnav-head-toggle:active {
        background: rgba(255, 255, 255, .26) !important;
    }

    /* The drawer header carries the brand instead of the word "Menu".
       Its background is the blue gradient in both themes, so the light-on-dark
       artwork is the right one either way. */
    html.tm-mobile .tm-mnav-panel .tm-mnav-head-logo {
        /* Centred on the panel itself, not on the strip left over beside the
           hamburger. Absolute, because as a flex item the toggle would push
           it off centre. */
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 118px;
        height: 28px;
        background: url("/assets/brand/topbar-logo-registered-dark.png") center center / contain no-repeat;
        text-decoration: none;
    }

    .tm-mnav-scroll {
        flex: 1 1 auto;
        min-height: 0;
        padding: 8px 0 max(16px, env(safe-area-inset-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tm-mnav-group + .tm-mnav-group {
        margin-top: 6px;
        border-top: 1px solid var(--tm-border-soft, #c9d3e6);
        padding-top: 6px;
    }

    .tm-mnav-group-title {
        padding: 10px 14px 4px;
        color: var(--tm-text-muted, #5b657a);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .8px;
        text-transform: uppercase;
        opacity: .8;
    }

    html.tm-mobile .tm-mnav-panel .tm-mnav-row {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px !important;
        height: auto !important;
        padding: 10px 14px !important;
        border: 0;
        /* The active row is marked by a yellow underline, mirroring the
           topbar tab - so every row reserves the same 3px below it. */
        border-bottom: 3px solid transparent;
        background: transparent;
        /* Rows read as topbar buttons do: steel blue, not near-black. */
        color: var(--tm-topbar-blue, #2f6fa6);
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* These must match the specificity of the base row rule above, or the
       base rule's `transparent` border and background win. */
    html.tm-mobile .tm-mnav-panel .tm-mnav-row:active {
        background: var(--tm-topbar-hover, rgba(47, 111, 166, .12));
    }

    /* Underlined, exactly like the active tab in the topbar - the yellow
       appears under the current section and nowhere else. */
    html.tm-mobile .tm-mnav-panel .tm-mnav-row-active {
        border-bottom-color: #fcdb6c;
        background: rgba(47, 111, 166, .10);
        color: var(--tm-topbar-blue-strong, #1f5f96);
        font-weight: 700;
    }

    .tm-mnav-row-icon {
        flex: 0 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        opacity: .85;
    }

    .tm-mnav-row-icon svg {
        display: block;
    }

    html.tm-mobile .tm-mnav-panel .tm-mnav-row-active .tm-mnav-row-icon {
        opacity: 1;
    }

    .tm-mnav-row-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .tm-mnav-row-badge {
        flex: 0 0 auto;
        min-width: 20px;
        padding: 2px 7px;
        border-radius: 999px;
        background: var(--tm-danger, #c0392b);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
    }

    html.tm-mnav-open,
    html.tm-mnav-open body {
        overflow: hidden !important;
    }

    /* The trial banner floats far above the drawer and would sit on its
       last rows (Add New Task, ...) - it steps aside while the menu is open. */
    html.tm-mnav-open .tm-trial-banner {
        visibility: hidden;
    }

    /* ---------------------------------------------------
       3. Data tables -> stacked cards
       Beats the min-width/nowrap rules further up this file
       and the per-page "overflow-x:hidden" ID rules, because
       a card table never exceeds its wrapper.
       --------------------------------------------------- */
    html.tm-mobile table.tm-mcards,
    html.tm-mobile table.tm-mcards > thead,
    html.tm-mobile table.tm-mcards > tbody,
    html.tm-mobile table.tm-mcards > tfoot,
    html.tm-mobile table.tm-mcards > tbody > tr,
    html.tm-mobile table.tm-mcards > tbody > tr > td {
        display: block !important;
        width: auto !important;
        max-width: none !important;
    }

    html.tm-mobile table.tm-mcards {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
        table-layout: auto !important;
    }

    html.tm-mobile table.tm-mcards > thead {
        display: none !important;
    }

    html.tm-mobile table.tm-mcards > tbody > tr {
        margin: 0 0 10px;
        padding: 4px 0;
        border: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 10px;
        background: var(--tm-mcard-bg, #fff) !important;
        /* Several pages pin their rows with `background: transparent
           !important` from an id selector, which outranks the line above.
           A spread inset shadow paints the same fill through a property
           those rules never touch, so a card looks the same everywhere. */
        box-shadow: inset 0 0 0 9999px var(--tm-mcard-bg, #fff),
                    0 1px 2px rgba(12, 20, 33, .06);
        overflow: hidden;
    }

    html.tm-mobile table.tm-mcards > tbody > tr:last-child {
        margin-bottom: 0;
    }

    /* The label sits in the left 40% as an absolutely placed ::before and the
       value keeps the rest as ordinary block flow. A flex row here would make
       every top-level node on the value side its own flex item, so a cell like
       "Card inserted - <name> [Infringement detected]" put the text and the
       nowrap badge in competition: with `overflow-wrap: anywhere` the text's
       min-content width is one character, so it collapsed to a single-letter
       column while the badge kept its full width. In block flow the text and
       the badge are one inline run and wrap together. */
    html.tm-mobile table.tm-mcards > tbody > tr > td {
        display: block !important;
        position: relative;
        min-height: 0 !important;
        height: auto !important;
        padding: 8px 12px 8px calc(40% + 22px) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--tm-border-faint, rgba(201, 211, 230, .5)) !important;
        background: transparent !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere;
        text-overflow: clip !important;
    }

    /* a hidden column stays hidden */
    html.tm-mobile table.tm-mcards > tbody > tr > td[hidden] {
        display: none !important;
    }

    html.tm-mobile table.tm-mcards > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    /* empty cells add nothing on a phone */
    html.tm-mobile table.tm-mcards > tbody > tr > td:empty,
    html.tm-mobile table.tm-mcards > tbody > tr > td.tm-mcard-blank {
        display: none !important;
    }

    html.tm-mobile table.tm-mcards > tbody > tr > td::before {
        content: attr(data-tm-label);
        position: absolute;
        left: 12px;
        top: 8px;
        width: 40%;
        color: var(--tm-text-soft, #6b7a90);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3px;
        line-height: 1.35;
        text-transform: uppercase;
        overflow-wrap: anywhere;
    }

    /* no label -> the value takes the whole card width */
    html.tm-mobile table.tm-mcards > tbody > tr > td[data-tm-label=""],
    html.tm-mobile table.tm-mcards > tbody > tr > td:not([data-tm-label]) {
        padding-left: 12px !important;
    }

    html.tm-mobile table.tm-mcards > tbody > tr > td[data-tm-label=""]::before,
    html.tm-mobile table.tm-mcards > tbody > tr > td:not([data-tm-label])::before {
        display: none;
    }

    /* Selected card: a faint tint and a blue edge, not a solid blue block.
       Filling a whole card with --tm-primary reads as an error state on a
       phone, where the card is most of the screen. The fill rides the same
       --tm-mcard-bg the card already paints with, so only the token changes. */
    html.tm-mobile table.tm-mcards > tbody > tr.active,
    html.tm-mobile table.tm-mcards > tbody > tr.tm-selected,
    html.tm-mobile table.tm-mcards > tbody > tr[aria-selected="true"] {
        --tm-mcard-bg: #eef4fb;
        border-color: rgba(70, 130, 180, .55);
        box-shadow: inset 4px 0 0 0 var(--tm-primary, #4682B4),
                    inset 0 0 0 9999px var(--tm-mcard-bg);
    }

    /* Each page pins the selected cells blue with an id rule, so the ids have
       to be named here to be outranked. Cells go back to plain text on the
       tint above. */
    html.tm-mobile #tm-driver-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile #tm-driver-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile #tm-driver-table.tm-mcards > tbody > tr[aria-selected="true"] > td,
    html.tm-mobile #tm-veh-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile #tm-veh-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile #tm-veh-table.tm-mcards > tbody > tr[aria-selected="true"] > td,
    html.tm-mobile #tm-defects-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile #tm-defects-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile #tm-defects-table.tm-mcards > tbody > tr[aria-selected="true"] > td,
    html.tm-mobile #tm-vor-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile #tm-vor-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile #tm-vor-table.tm-mcards > tbody > tr[aria-selected="true"] > td,
    html.tm-mobile #tm-inv-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile #tm-inv-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile #tm-inv-table.tm-mcards > tbody > tr[aria-selected="true"] > td,
    html.tm-mobile #tm-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile #tm-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile #tm-table.tm-mcards > tbody > tr[aria-selected="true"] > td,
    html.tm-mobile table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile table.tm-mcards > tbody > tr[aria-selected="true"] > td {
        background: transparent !important;
        color: var(--tm-text-main, #1f2933) !important;
        font-weight: inherit !important;
    }

    /* The sliding row underline is a hover affordance; tm.underline.js keeps
       it off a phone, and this makes sure nothing is left painted. */
    html.tm-mobile .tm-uline-table {
        display: none !important;
    }

    /* Long press must open our menu, not the browser's "select / copy" popup.
       `user-select: none` alone does not stop it on iOS - the callout has to
       be switched off as well, on the row and everything inside it. */
    html.tm-mobile .tm-list-item,
    html.tm-mobile .tm-list-item *,
    html.tm-mobile .tm-day[data-date],
    html.tm-mobile .tm-day[data-date] *,
    html.tm-mobile .tm-week-task-item,
    html.tm-mobile .tm-day-task-item,
    html.tm-mobile .tm-month-row-task-item,
    html.tm-mobile .tm-completed-planner-item,
    html.tm-mobile .tm-completed-planner-item *,
    html.tm-mobile .tm-scheduler-side-item,
    html.tm-mobile .tm-scheduler-driver-item,
    html.tm-mobile .tm-scheduler-driver-item *,
    html.tm-mobile table.tm-mcards > tbody > tr,
    html.tm-mobile table.tm-mcards > tbody > tr > td,
    html.tm-mobile .tm-infr-row,
    html.tm-mobile .tm-infr-row * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Fields inside those rows must still be selectable and editable. */
    html.tm-mobile .tm-list-item input,
    html.tm-mobile .tm-list-item textarea,
    html.tm-mobile table.tm-mcards > tbody > tr input,
    html.tm-mobile table.tm-mcards > tbody > tr textarea,
    html.tm-mobile [contenteditable="true"] {
        -webkit-touch-callout: default;
        -webkit-user-select: text;
        user-select: text;
    }

    /* the value half of the row */
    html.tm-mobile table.tm-mcards > tbody > tr > td > * {
        max-width: 100%;
    }

    /* full-width rows: empty state / group headers */
    html.tm-mobile table.tm-mcards > tbody > tr.tm-mcard-full {
        border-style: dashed;
        background: transparent !important;
        box-shadow: none;
    }

    html.tm-mobile table.tm-mcards > tbody > tr.tm-mcard-full > td {
        display: block !important;
        padding: 14px 12px !important;
        text-align: center !important;
    }

    html.tm-mobile table.tm-mcards > tbody > tr.tm-mcard-full > td::before {
        display: none;
    }

    /* column resizers are meaningless without a header */
    html.tm-mobile table.tm-mcards .tm-col-resizer,
    html.tm-mobile table.tm-mcards .tm-th-resizer {
        display: none !important;
    }

    /* the wrappers no longer need to scroll sideways */
    html.tm-mobile .tm-tablewrap:has(> table.tm-mcards),
    html.tm-mobile .tm-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-defects-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-vor-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-inv-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-admin-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-billing-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-referral-table-wrap:has(> table.tm-mcards),
    html.tm-mobile .tm-driver-admin-table-wrap:has(> table.tm-mcards) {
        padding: 8px !important;
        border-radius: 8px;
        background-image: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* ---------------------------------------------------
       4. Touch targets - nothing actionable below 40px
       --------------------------------------------------- */
    html.tm-mobile .tm-page .tm-btn,
    html.tm-mobile .tm-toolbar .tm-btn,
    html.tm-mobile .tm-searchbar .tm-btn,
    html.tm-mobile .tm-actions .tm-btn,
    html.tm-mobile .tm-modal-actions .tm-btn,
    html.tm-mobile .tm-panel .tm-btn,
    html.tm-mobile .tm-backdrop .tm-btn,
    html.tm-mobile .tm-defects-toolbar .tm-btn,
    html.tm-mobile .tm-vor-toolbar .tm-btn,
    html.tm-mobile .tm-inv-toolbar .tm-btn,
    html.tm-mobile .tm-admin-toolbar .tm-btn,
    html.tm-mobile .tm-tacho-filters .tm-btn,
    html.tm-mobile .tm-driver-admin-toolbar .tm-btn {
        min-height: 40px !important;
        height: auto !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    /* Catch-all: every remaining button on a phone is thumb-sized.
       Topbar icons (42px) and calendar day cells are handled on
       their own below, so they opt out here. */
    /* Height applies to every button; padding only to the ones that
       carry a text label, so icon squares keep their own box.
       Kept at low specificity so the per-control rules below win. */
    html.tm-mobile button {
        min-height: 40px !important;
        height: auto !important;
    }

    html.tm-mobile .tm-btn:not(.tm-btn-icon),
    html.tm-mobile .tm-scheduler-multi-select-button,
    html.tm-mobile .tm-multi-select-button,
    html.tm-mobile .tm-driver-admin-head-btn,
    html.tm-mobile .tmd-action {
        padding: 8px 14px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    /* Stepper arrows fill their field rather than growing it */
    html.tm-mobile .tm-stepper-btn {
        min-height: 0 !important;
        height: 100% !important;
    }

    html.tm-mobile header.tm-topbar[data-tm-topbar] button.tm-btn {
        min-height: 42px !important;
    }

    /* iOS magnifies the whole page when focus lands on an editable control
       whose font is smaller than 16px, and it never zooms back out - you are
       left scrolling a zoomed layout. Safari ignores `user-scalable=no`, so the
       font size is the only lever, and pinning the viewport would cost real
       pinch-zoom. Every editable control therefore gets 16px on a phone.
       `!important` because some are styled inline (the invoice editor's
       contenteditable proxies ship `font-size: 12px` from tm.invoices.js).
       Buttons are deliberately absent: several draw their glyph in ::before
       over a `font-size: 0` text node, and sizing them brings the raw glyph
       back - see the double-cross bug on the search clear button. */
    html.tm-mobile input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]),
    html.tm-mobile select,
    html.tm-mobile textarea,
    html.tm-mobile [contenteditable]:not([contenteditable="false"]) {
        font-size: 16px !important;
    }

    /* The native input behind an enhanced date field is a deliberately
       collapsed, transparent proxy for showPicker() - never resize it. */
    html.tm-mobile input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.tm-dateui-wrap > input[type="date"]),
    html.tm-mobile select,
    html.tm-mobile .tm-scheduler-search,
    html.tm-mobile .tm-input,
    html.tm-mobile .tm-select,
    html.tm-mobile .tm-stepper > [contenteditable] {
        min-height: 40px !important;
    }

    /* Shift Planner driver list. The stacked layout pins every panel at
       340px, and the left one spends ~245px of that on Assign Shift, the
       two dropdowns and the search box - which left the list (`flex: 1 1 0%`)
       about one and a half drivers, too short to scroll by thumb. On a phone
       the left panel grows with its list instead, and the list only scrolls
       once its drivers pass most of the screen. */
    html.tm-mobile .tm-main:has(#tm-scheduler-driver-list) > :has(> #tm-scheduler-driver-list) {
        height: auto !important;
    }

    html.tm-mobile #tm-scheduler-driver-list {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.tm-mobile input[type="checkbox"],
    html.tm-mobile input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
    }

    html.tm-mobile .tm-nav-pill,
    html.tm-mobile .tm-year-btn,
    html.tm-mobile .tm-year-today,
    html.tm-mobile .tm-tab,
    html.tm-mobile .tm-tacho-tab {
        min-height: 38px !important;
        height: auto !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Number steppers: arrows go side by side at full field height,
       instead of two 19px slivers stacked in a 20px column.
       tm.ui.stepper.js reserves the matching 68px of padding. */
    html.tm-mobile .tm-stepper-buttons {
        width: 68px !important;
        grid-template-rows: none !important;
        grid-template-columns: 1fr 1fr !important;
    }

    html.tm-mobile .tm-stepper-btn {
        padding: 0 !important;
    }

    html.tm-mobile .tm-stepper-btn + .tm-stepper-btn {
        border-top: 0 !important;
        border-left: 1px solid var(--tm-border-soft, #c9d3e6);
    }

    /* `.tm-x` is the app-wide modal close button; every modal header
       control has to clear 40px on a phone. */
    html.tm-mobile .tm-x,
    html.tm-mobile .tm-modal-x,
    html.tm-mobile .tm-modal-print,
    html.tm-mobile .tm-trial-banner-close,
    html.tm-mobile #tm-driver-x,
    html.tm-mobile #tm-driver-print,
    html.tm-mobile [id$="-modal-x"],
    html.tm-mobile [id$="-print"][class*="btn"] {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
    }

    html.tm-mobile .tm-dateui-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    /* The calendar icon opens the picker through showPicker() on the collapsed
       proxy input. That does nothing on iOS - and every browser on an iPhone is
       WebKit - so on a phone the icon did nothing at all. iOS only opens its
       date wheel when the user taps the native input itself, so here the proxy
       stops being 1x1 and is laid transparently over the icon: the tap lands on
       the real <input type="date"> and the OS presents its own picker. Typing
       into the formatted field is untouched; the icon is now purely a label
       under the transparent input. */
    html.tm-mobile .tm-dateui-wrap > input[type="date"] {
        position: absolute !important;
        left: auto !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        opacity: 0 !important;
        pointer-events: auto !important;
        z-index: 3 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Keep the clear control reachable above the transparent input. */
    html.tm-mobile .tm-dateui-wrap > .tm-dateui-clear {
        z-index: 4 !important;
    }

    /* The clear control is a bordered 18px box on desktop. Blown up to a
       thumb-sized target inside a 40px field, that box sits right against the
       field's own border and reads as a second, doubled control. On a phone
       it becomes a plain glyph with a generous hit area instead.
       Wrapper in the selector so it outranks `html.tm-mobile button`, which
       otherwise stretches it to 40px tall. */
    html.tm-mobile .tm-searchwrap .tm-search-clear,
    html.tm-mobile .tm-search-wrapper .tm-search-clear,
    html.tm-mobile .tm-search-wrap .tm-search-clear {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--tm-text-muted, #5b657a) !important;
        line-height: 1 !important;
        /* NOT font-size: the button holds a literal "x" text node that the
           shipped style hides with `font-size: 0`, drawing the real glyph in
           ::before. Giving the button a font size brings the text node back
           and you see two crosses. Size the glyph below instead. */
    }

    html.tm-mobile .tm-searchwrap .tm-search-clear::before,
    html.tm-mobile .tm-search-wrapper .tm-search-clear::before,
    html.tm-mobile .tm-search-wrap .tm-search-clear::before {
        font-size: 17px !important;
    }

    html.tm-mobile .tm-searchwrap .tm-search-clear:active,
    html.tm-mobile .tm-search-wrapper .tm-search-clear:active,
    html.tm-mobile .tm-search-wrap .tm-search-clear:active {
        background: rgba(47, 111, 166, .12) !important;
    }

    /* The search box inside a dropdown list is a 30px field, so the thumb-sized
       cross above overflows it. Same exception the invoice receiver field needs;
       tm.mobile.js skips this wrapper too, or it would re-grow it inline. */
    html.tm-mobile .tm-scheduler-multi-select-search .tm-search-wrap .tm-search-clear {
        width: 24px !important;
        min-width: 24px !important;
        height: 22px !important;
        min-height: 22px !important;
    }

    html.tm-mobile .tm-scheduler-multi-select-search .tm-search-wrap .tm-search-clear::before {
        font-size: 14px !important;
    }

    /* Belt and braces: if any field is ever switched to type="search", the
       browser adds its own cancel button on top of ours - a real double. */
    html.tm-mobile .tm-search::-webkit-search-cancel-button,
    html.tm-mobile .tm-search::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    /* ---------------------------------------------------
       5. Search + inputs: full width, no iOS zoom
       --------------------------------------------------- */
    html.tm-mobile .tm-searchbar,
    html.tm-mobile .tm-searchwrap,
    html.tm-mobile .tm-search-wrap,
    html.tm-mobile .tm-search-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* A filter select beside the search (Companies "All types") would take the
       whole row and squeeze the search to a sliver - stack them instead. */
    html.tm-mobile .tm-defects-toolbar-right {
        flex-wrap: wrap !important;
    }

    html.tm-mobile .tm-defects-toolbar-right > * {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    html.tm-mobile .tm-defects-toolbar-right > .tm-select {
        min-height: 40px !important;
    }

    html.tm-mobile .tm-search,
    html.tm-mobile input.tm-search {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 9px 36px 9px 10px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    /* ---------------------------------------------------
       6. Long labels must wrap, never be cut off
       --------------------------------------------------- */
    html.tm-mobile .tm-team-perms-note,
    html.tm-mobile .tmd-feed-msg,
    html.tm-mobile .tmd-feed-msg *,
    html.tm-mobile .tmd-item-title,
    html.tm-mobile .tmd-item-sub,
    html.tm-mobile .tmd-item-sub *,
    html.tm-mobile .tmd-item-main,
    html.tm-mobile .tm-hint,
    html.tm-mobile .tm-note,
    html.tm-mobile .tm-subtitle,
    html.tm-mobile .tm-panel-subtitle,
    html.tm-mobile .tm-toolbar-title,
    html.tm-mobile .tm-column-subtitle {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-overflow: clip !important;
    }

    /* ---------------------------------------------------
       7. Completed-tasks planner: stack, never squeeze
       --------------------------------------------------- */
    html.tm-mobile .tm-completed-planner,
    html.tm-mobile .tm-completed-planner-body {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    html.tm-mobile .tm-completed-planner-center,
    html.tm-mobile .tm-completed-planner-list-panel,
    html.tm-mobile .tm-completed-planner .tm-column {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    html.tm-mobile .tm-completed-planner-list-panel {
        max-height: 46vh !important;
        overflow-y: auto !important;
    }

    html.tm-mobile .tm-completed-planner .tm-column-resizer,
    html.tm-mobile .tm-completed-planner-resizer {
        display: none !important;
    }

    html.tm-mobile .tm-completed-planner-line {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Any page-level grid collapses to one column on a phone.
       The older block above deliberately skips pages that own a
       #tm-calendar, which left completed.html stuck on a
       "260px sidebar + 91px content" grid. */
    html.tm-mobile .tm-page {
        display: block !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        overflow-x: hidden !important;
    }

    html.tm-mobile .tm-page > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html.tm-mobile .tm-page > * + * {
        margin-top: 10px;
    }

    /* Year calendar must use the full page width once stacked */
    html.tm-mobile #tm-calendar,
    html.tm-mobile .tm-completed-planner-center {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    /* One calendar treatment for every page that shows one
       (planner + completed tasks): months stack, never squeeze. */
    html.tm-mobile .tm-month-grid:not(.tm-month-grid-single) {
        width: min(430px, 100%) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 12px !important;
        margin: 0 auto !important;
        justify-content: stretch;
    }

    html.tm-mobile .tm-month {
        min-width: 0 !important;
        min-height: 0;
        overflow: visible;
    }

    html.tm-mobile .tm-weekdays-row,
    html.tm-mobile .tm-week-row {
        grid-template-columns: 24px repeat(7, minmax(0, 1fr)) !important;
        gap: 3px;
    }

    html.tm-mobile .tm-day {
        min-height: 38px !important;
        touch-action: manipulation;
    }

    /* ---------------------------------------------------
       9. Tab strips wrap instead of hiding behind a scroll
       --------------------------------------------------- */
    html.tm-mobile .tm-tacho-tabs,
    html.tm-mobile .tm-tabs,
    html.tm-mobile .tm-tabstrip {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    /* A fixed 3-column grid instead of flex-wrap: nine tabs land in exactly
       three even rows, rather than four ragged ones ending in a single
       full-width tab. */
    html.tm-mobile .tm-tacho-tabs-list,
    html.tm-mobile .tm-tabs-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
    }

    /* `:not([hidden])` matters: a bare `display` override would un-hide the
       tabs permissions have switched off. */
    html.tm-mobile .tm-tacho-tabs-list > *:not([hidden]),
    html.tm-mobile .tm-tabs-list > *:not([hidden]) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 6px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: center !important;
    }

    /* ---------------------------------------------------
       8. Shift planner: keep the board reachable
       --------------------------------------------------- */
    html.tm-mobile .tm-scheduler-center-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html.tm-mobile .tm-scheduler-cell,
    html.tm-mobile .tm-scheduler-day,
    html.tm-mobile .tm-sched-cell {
        min-height: 38px !important;
    }

    /* ---------------------------------------------------
       10. Modals: the footer is never allowed off-screen
       The shells were `display: block` with a fixed pixel budget for the
       head and footer. As soon as a title or a row of buttons wrapped, the
       parts added up to more than the clamped height and the action buttons
       hung out below the modal. A flex column makes the body absorb whatever
       is left instead, so Save/Cancel are always reachable.
       --------------------------------------------------- */
    html.tm-mobile .tm-backdrop > .tm-modal,
    html.tm-mobile .tm-backdrop > .tm-small-modal,
    html.tm-mobile .tm-backdrop > .tm-modalbox,
    html.tm-mobile .tm-backdrop > .tm-reports-modal,
    html.tm-mobile .tm-backdrop > .tm-defects-modal,
    html.tm-mobile [id*="backdrop"] > .tm-modal,
    html.tm-mobile [id*="backdrop"] > .tm-modalbox {
        display: flex !important;
        flex-direction: column !important;
        /* 100% of the backdrop content box = viewport minus its own padding,
           so the modal can never be pushed past the bottom edge. */
        max-height: 100% !important;
        overflow: hidden !important;
    }

    html.tm-mobile .tm-backdrop > * > .tm-modal-body,
    html.tm-mobile .tm-backdrop > * > .tm-modalbox-body,
    html.tm-mobile .tm-backdrop > * > .tm-reports-body,
    html.tm-mobile [id*="backdrop"] > * > .tm-modal-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html.tm-mobile #tm-inv-settings .tm-modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    html.tm-mobile #tm-inv-settings .tm-inv-editor-body {
        padding-bottom: 10px !important;
    }

    html.tm-mobile #tm-inv-settings .tm-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: 0 !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--tm-border-soft, #c9d3e6);
        background: var(--tm-bg-card, #fff);
    }

    /* head and action rows keep their natural height and never shrink away */
    html.tm-mobile .tm-backdrop > * > .tm-modal-head,
    html.tm-mobile .tm-backdrop > * > .tm-modal-header,
    html.tm-mobile .tm-backdrop > * > .tm-modal-actions,
    html.tm-mobile .tm-backdrop > * > .tm-actions,
    html.tm-mobile .tm-backdrop > * > .tm-driver-modal-actions,
    html.tm-mobile .tm-backdrop > * > .tm-driver-upload-footer,
    html.tm-mobile [id*="backdrop"] > * > .tm-modal-head,
    html.tm-mobile [id*="backdrop"] > * > .tm-modal-actions {
        flex: 0 0 auto !important;
    }

    /* Tachograph activities: Prev / date / Next on one row.
       The buttons carry `min-width: 108px`, so two of them plus the date
       could not fit and Next wrapped onto its own line. A three-track grid
       keeps them together and lets the date take the slack. */
    html.tm-mobile .tm-tacho-chart-nav-center {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    html.tm-mobile .tm-tacho-chart-nav-button {
        min-width: 0 !important;
        width: auto !important;
        padding: 0 10px !important;
        white-space: nowrap !important;
    }

    html.tm-mobile #tm-tacho-chart-date {
        min-width: 0;
        text-align: center;
        overflow-wrap: anywhere;
    }

    /* ---------------------------------------------------
       Invoice editor
       The form is a two-column sheet designed for a desktop dialog. On a
       phone those columns are ~140px wide, which is unusable, and the line
       grid's column headings stack into six meaningless full-width rows
       above the items.
       --------------------------------------------------- */
    html.tm-mobile .tm-inv-editor-top,
    html.tm-mobile .tm-inv-editor-col,
    html.tm-mobile .tm-inv-editor-body,
    html.tm-mobile .tm-inv-editor-grid {
        display: block !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html.tm-mobile .tm-inv-editor-col > * + * {
        margin-top: 10px;
    }

    /* The heading row only makes sense beside the columns it labels. */
    html.tm-mobile .tm-inv-line-head {
        display: none !important;
    }

    /* Each line becomes a labelled stack, with its own caption per field. */
    html.tm-mobile .tm-inv-line {
        display: block !important;
        grid-template-columns: minmax(0, 1fr) !important;
        position: relative;
        margin-bottom: 12px;
        padding: 10px 10px 12px;
        border: 1px solid var(--tm-border-soft, #c9d3e6);
        border-radius: 10px;
    }

    html.tm-mobile .tm-inv-line > input,
    html.tm-mobile .tm-inv-line > select,
    html.tm-mobile .tm-inv-line > .tm-stepper,
    html.tm-mobile .tm-inv-line > .tm-inv-amount {
        display: block !important;
        width: 100% !important;
        margin: 0 0 8px !important;
    }

    html.tm-mobile .tm-inv-line-label {
        display: block !important;
        margin: 0 0 3px;
        color: var(--tm-text-muted, #5b657a);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

    html.tm-mobile .tm-inv-line > .tm-inv-amount {
        font-weight: 700;
    }

    /* Remove belongs to the line action area, after Line Total.
       It must stay POSITIONED: the button draws its X as two absolutely
       positioned pseudo-elements. With `position: static` they resolved
       against `.tm-inv-line` instead, so the cross was painted in the middle
       of the card - a stray red X floating over the Unit Price field - and the
       button itself rendered as an empty red square. */
    html.tm-mobile .tm-inv-line > .tm-inv-remove {
        position: relative !important;
        display: grid !important;
        place-items: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 2px 0 0 auto !important;
    }

    html.tm-mobile #tm-inv-menu {
        min-width: 220px !important;
        max-width: calc(100vw - 16px) !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        box-shadow: 0 16px 34px rgba(0,0,0,.18) !important;
    }

    html.tm-mobile #tm-inv-menu .tm-ctx-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        min-height: 44px !important;
        padding: 11px 14px !important;
        line-height: 1.25 !important;
    }

    html.tm-mobile #tm-inv-menu .tm-ctx-ico {
        flex: 0 0 22px !important;
        width: 22px !important;
        min-width: 22px !important;
        font-size: 15px !important;
    }

    /* The editor pins the totals block with `margin-right: 120px` and
       `width: fit-content` from an id rule - a desktop nicety that leaves it
       140px wide and floating mid-row on a phone. Needs the id to outrank. */
    html.tm-mobile #tm-inv-editor .tm-inv-totals,
    html.tm-mobile .tm-inv-totals {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        width: 100% !important;
        margin: 10px 0 0 !important;
        column-gap: 12px !important;
        row-gap: 6px !important;
    }

    /* ---------------------------------------------------
       11. Rows built for a wide screen: let them wrap
       --------------------------------------------------- */
    html.tm-mobile .tm-driver-template-row-body,
    html.tm-mobile .tm-driver-admin-template-field {
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    html.tm-mobile .tm-driver-admin-template-field.question,
    html.tm-mobile .tm-driver-admin-template-field.type {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    html.tm-mobile .tm-driver-template-question-view {
        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    html.tm-mobile .tm-driver-template-question-rename {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
    }
}

/* ---------------------------------------------------------
   Dark theme for the drawer
   --------------------------------------------------------- */
@media (max-width: 760px) {
    html.tm-dark .tm-mnav-panel {
        background: var(--tm-surface, #161c26);
        border-right-color: rgba(201, 211, 230, .18);
    }

    html.tm-dark .tm-mnav-head {
        border-bottom-color: rgba(201, 211, 230, .18);
    }

    html.tm-dark .tm-mnav-group + .tm-mnav-group {
        border-top-color: rgba(201, 211, 230, .18);
    }

    html.tm-dark.tm-mobile .tm-mnav-panel .tm-mnav-row {
        color: var(--tm-topbar-blue, rgba(210, 225, 255, .85));
    }

    html.tm-dark.tm-mobile .tm-mnav-panel .tm-mnav-row:active {
        background: rgba(255, 255, 255, .10);
    }

    html.tm-dark.tm-mobile .tm-mnav-panel .tm-mnav-row-active {
        background: rgba(255, 255, 255, .10);
        border-bottom-color: #fcdb6c;
        color: var(--tm-topbar-blue-strong, #e6f0ff);
    }

    html.tm-dark.tm-mobile .tm-mnav-toggle {
        border-color: rgba(201, 211, 230, .28);
        background: rgba(255, 255, 255, .10);
        color: var(--tm-topbar-blue-strong, #e6f0ff);
    }

    html.tm-dark.tm-mobile table.tm-mcards > tbody > tr {
        border-color: rgba(201, 211, 230, .20);
        box-shadow: inset 0 0 0 9999px var(--tm-mcard-bg);
    }

    /* Needs to outrank the rule above, which would otherwise repaint the
       selected card with the plain dark fill and drop the blue edge - and
       the light tint would sit under near-white text. */
    html.tm-dark.tm-mobile table.tm-mcards > tbody > tr.active,
    html.tm-dark.tm-mobile table.tm-mcards > tbody > tr.tm-selected,
    html.tm-dark.tm-mobile table.tm-mcards > tbody > tr[aria-selected="true"] {
        --tm-mcard-bg: #1e2c40;
        border-color: rgba(70, 130, 180, .55);
        box-shadow: inset 4px 0 0 0 var(--tm-primary, #4682B4),
                    inset 0 0 0 9999px var(--tm-mcard-bg);
    }

    html.tm-dark.tm-mobile table.tm-mcards > tbody > tr > td {
        border-bottom-color: rgba(201, 211, 230, .14) !important;
    }
}

/* A hidden tab stays hidden even inside the mobile tab grid. */
@media (max-width: 760px) {
    /* The tacho Settings button sits after the tab grid; without wrapping it was pushed
       off the right edge of the phone screen. */
    html.tm-mobile .tm-tacho-tabs {
        flex-wrap: wrap !important;
    }

    html.tm-mobile .tm-tacho-settings-open {
        width: 100% !important;
        justify-content: center !important;
        margin: 6px 0 6px !important;
        padding: 9px 14px !important;
    }

    html.tm-mobile .tm-tacho-tabs-list > [hidden],
    html.tm-mobile .tm-tabs-list > [hidden] {
        display: none !important;
    }
}

/* The per-field captions in an invoice line exist only for the phone layout;
   on a wide screen the .tm-inv-line-head row does the labelling. */
.tm-inv-line-label {
    display: none;
}

@media (max-width: 760px) {
    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr > td {
        display: grid !important;
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr) !important;
        column-gap: 10px !important;
        align-items: start !important;
        padding: 8px 12px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr > td::before {
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr > td[data-tm-label=""],
    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr > td:not([data-tm-label]) {
        grid-template-columns: minmax(0, 1fr) !important;
        padding-left: 12px !important;
    }

    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr.active > td,
    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr[aria-selected="true"] > td {
        background: transparent !important;
        color: var(--tm-text-main, #1f2933) !important;
    }

    html.tm-dark.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr.active > td,
    html.tm-dark.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr.tm-selected > td,
    html.tm-dark.tm-mobile body #tm-inv-table.tm-mcards > tbody > tr[aria-selected="true"] > td {
        color: var(--tm-text-main, #e6edf7) !important;
    }

    /* ---------------------------------------------------
       File pickers do not talk about dropping on a phone
       There is nothing to drag from and nothing to drop onto -
       the only gesture is a tap that opens the system picker.
       Both wordings in the app are replaced here, and the photo
       tile grows from a 92x62 chip with an 8px caption into
       something a thumb can hit.
       --------------------------------------------------- */
    html.tm-mobile #tm-defects-modal .tm-photo.tm-photo-add-tile,
    html.tm-mobile #tm-vor-modal .tm-photo.tm-photo-add-tile,
    html.tm-mobile #tm-qfix-backdrop .tm-photo.tm-photo-add-tile {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 84px !important;
    }

    html.tm-mobile #tm-defects-modal .tm-photo.tm-photo-add-tile::before,
    html.tm-mobile #tm-vor-modal .tm-photo.tm-photo-add-tile::before,
    html.tm-mobile #tm-qfix-backdrop .tm-photo.tm-photo-add-tile::before {
        top: 16px !important;
        width: 26px !important;
        height: 26px !important;
        background-size: 26px 26px !important;
    }

    html.tm-mobile #tm-defects-modal .tm-photo.tm-photo-add-tile::after,
    html.tm-mobile #tm-vor-modal .tm-photo.tm-photo-add-tile::after,
    html.tm-mobile #tm-qfix-backdrop .tm-photo.tm-photo-add-tile::after {
        content: "Add photos" !important;
        top: auto !important;
        bottom: 16px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        transform: none !important;
        font-size: 14px !important;
        white-space: normal !important;
    }

    /* The other picker in the app spells the same thing out in markup.
       `font-size: 0` hides the shipped words without removing the nodes the
       page's own scripts read; the replacement is the only glyph either
       element draws, so there is no double-text. */
    html.tm-mobile .tm-driver-upload-dropzone-inner > strong,
    html.tm-mobile .tm-driver-upload-dropzone-inner > span {
        font-size: 0 !important;
    }

    html.tm-mobile .tm-driver-upload-dropzone-inner > strong::after {
        content: "Add files";
        font-size: 16px;
        font-weight: 700;
    }

    html.tm-mobile .tm-driver-upload-dropzone-inner > span::after {
        content: "Tap to pick from your device";
        font-size: 13px;
        font-weight: 400;
    }

    /* ---------------------------------------------------
       A stacked "label | field" grid
       fitOverflowingGrids in tm.mobile.js collapses these to one
       column and tags them. Children pinned to the second column
       (`grid-column: 2 / -1` on a checkbox bar, for one) would
       otherwise re-create the column it just removed - that is why
       the defect editor still measured two tracks after the
       collapse, with its captions shaved to 4px.
       --------------------------------------------------- */
    html.tm-mobile [data-tm-mrepair="grid"] > * {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
    }

    html.tm-mobile [data-tm-mrepair="grid"] > label {
        margin: 4px 0 -4px !important;
        text-align: left !important;
        white-space: normal !important;
    }

    /* Held still while a modal is open - see syncModalScrollLock in
       tm.mobile.js. HTML is the phone scroller, so this is what stops a drag
       on a modal's head or footer from sliding the page underneath it. */
    html.tm-mobile.tm-modal-scrolllock {
        overflow: hidden !important;
    }

    /* The trial banner is pinned to the bottom of the screen above every
       backdrop, which on a phone is exactly where a modal's Save/Cancel row
       lands. It steps aside while a modal is open. */
    html.tm-mobile.tm-modal-scrolllock .tm-trial-banner {
        display: none !important;
    }

    /* ---------------------------------------------------
       No double-tap zoom
       Safari zooms the page when two taps land in the same
       spot inside ~300ms. Tapping a stepper arrow twice to
       count up does exactly that, and the zoomed page then
       has to be panned around under a `position: fixed`
       dialog. `manipulation` drops the double-tap gesture
       and keeps ordinary panning and pinch zoom.
       --------------------------------------------------- */
    html.tm-mobile body,
    html.tm-mobile .tm-backdrop,
    html.tm-mobile .tm-modal,
    html.tm-mobile .tm-modal *,
    html.tm-mobile a,
    html.tm-mobile label,
    html.tm-mobile button,
    html.tm-mobile [role="button"],
    html.tm-mobile .tm-btn,
    html.tm-mobile input,
    html.tm-mobile select,
    html.tm-mobile textarea {
        touch-action: manipulation;
    }

    /* Safari inflates text in some blocks after a rotation; the field sizes
       below are chosen against the real value, not an inflated one. */
    html.tm-mobile {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Pinned to the small viewport and not itself scrollable: the backdrop
       used to be `inset: 0` (the layout viewport, which on iOS is taller than
       what you can see) with `overflow: auto`, so the dialog could be dragged
       up and down inside it and sat partly under the browser toolbar. The
       form's own scroller is `.tm-inv-editor-body`; nothing else scrolls. */
    html.tm-mobile body #tm-inv-editor-backdrop.tm-backdrop {
        padding: max(56px, calc(env(safe-area-inset-top) + 52px)) 8px max(8px, env(safe-area-inset-bottom)) !important;
        height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden !important;
    }

    /* `svh`, not `dvh`. On iOS the Safari toolbar collapses and re-expands as
       the form is scrolled; `dvh` follows it, so the dialog resized and
       re-laid out under the finger on every scroll - the modal "floating"
       around the screen. `svh` is the small viewport and never changes. */
    html.tm-mobile body #tm-inv-editor {
        width: min(100%, calc(100vw - 16px)) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100svh - 64px) !important;
        overflow: hidden !important;
    }

    /* The form scrolls straight under the head, and the head is painted in the
       same blue as `.tm-btn` - so a blue "Add line" arriving at the top read
       as one merged block with the title bar. The head now closes with a hard
       edge and casts a shadow over the form, the mirror of what the action row
       already does at the bottom. It needs its own stacking context, or the
       shadow would be painted beneath the body that follows it. */
    html.tm-mobile body #tm-inv-editor .tm-modal-head,
    html.tm-mobile body #tm-inv-settings .tm-modal-head,
    html.tm-mobile body #tm-inv-email .tm-modal-head,
    html.tm-mobile body #tm-inv-ext .tm-modal-head,
    html.tm-mobile body #tm-inv-extadd .tm-modal-head {
        position: relative !important;
        z-index: 2 !important;
        border-bottom: 2px solid rgba(12, 20, 33, .45) !important;
        box-shadow: 0 8px 16px rgba(12, 20, 33, .30) !important;
    }

    html.tm-dark.tm-mobile body #tm-inv-editor .tm-modal-head,
    html.tm-dark.tm-mobile body #tm-inv-settings .tm-modal-head,
    html.tm-dark.tm-mobile body #tm-inv-email .tm-modal-head,
    html.tm-dark.tm-mobile body #tm-inv-ext .tm-modal-head,
    html.tm-dark.tm-mobile body #tm-inv-extadd .tm-modal-head {
        border-bottom-color: rgba(0, 0, 0, .60) !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .45) !important;
    }

    html.tm-mobile body #tm-inv-editor .tm-modal-head {
        min-height: 54px !important;
        padding: 10px 12px !important;
    }

    html.tm-mobile body #tm-inv-editor .tm-modal-body {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    html.tm-mobile body #tm-inv-editor #tm-inv-editor-msg {
        flex: 0 0 auto !important;
        padding: 8px 12px 0 !important;
    }

    html.tm-mobile body #tm-inv-editor .tm-inv-editor-body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 12px !important;
    }

    html.tm-mobile body #tm-inv-editor .tm-modal-actions {
        flex: 0 0 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid var(--tm-border-soft, #c9d3e6);
        background: var(--tm-bg-card, #fff);
        box-shadow: 0 -6px 14px rgba(12, 20, 33, .06);
    }

    html.tm-dark.tm-mobile body #tm-inv-editor .tm-modal-actions {
        background: var(--tm-bg-card, #111a2e);
        border-top-color: rgba(201, 211, 230, .18);
        box-shadow: 0 -8px 18px rgba(0, 0, 0, .22);
    }

    html.tm-mobile body #tm-inv-editor .tm-inv-editor-top,
    html.tm-mobile body #tm-inv-editor .tm-inv-editor-col,
    html.tm-mobile body #tm-inv-editor .tm-inv-editor-full {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html.tm-mobile body #tm-inv-editor .tm-inv-editor-full > div:first-child {
        align-items: center !important;
        margin-top: 2px !important;
    }

    html.tm-mobile body #tm-inv-editor #tm-inv-add-line {
        min-width: 92px !important;
        width: auto !important;
    }

    /* NO per-editor sizing for the stepper arrows. Forcing them to 40px each
       put 80px of buttons inside the 68px `.tm-stepper-buttons` track that
       tm.ui.stepper.js reserves padding for, so the down arrow hung past the
       right edge of its field. They use the shared phone layout (68px split
       in two) like every other number field in the app. */

    html.tm-mobile body #tm-inv-editor .tm-inv-line .tm-inv-remove {
        border-radius: 8px !important;
    }

    /* A 24px button blown up to 40px kept its 9px cross, so the control read
       as an empty red square. Size the strokes to the box. */
    html.tm-mobile body #tm-inv-editor .tm-inv-line .tm-inv-remove::before,
    html.tm-mobile body #tm-inv-editor .tm-inv-line .tm-inv-remove::after {
        width: 15px !important;
        height: 2px !important;
    }

    /* iOS zooms the page whenever a field smaller than 16px takes focus, and
       the zoom is what threw this modal around the screen. `.tm-modal input`
       pins 13px with !important, so every control has to be named here. */
    html.tm-mobile body #tm-inv-editor input:not([type="checkbox"]):not([type="radio"]),
    html.tm-mobile body #tm-inv-editor select,
    html.tm-mobile body #tm-inv-editor textarea,
    html.tm-mobile body #tm-inv-editor .tm-input,
    html.tm-mobile body #tm-inv-editor .tm-dateui-text {
        font-size: 16px !important;
    }

    /* A drag that runs past the end of the form used to carry on into the
       page behind the modal, sliding the whole screen under it. */
    html.tm-mobile body #tm-inv-editor-backdrop.tm-backdrop,
    html.tm-mobile body #tm-inv-editor .tm-inv-editor-body {
        overscroll-behavior: contain;
    }

    /* Invoice Receiver field: the caret was a 10px glyph and the clear cross a
       22px button sitting 18px from it - two targets no thumb can separate.
       Each gets a full-height zone of its own, the caret hard against the
       right edge. `.tm-modal .tm-ac2-clear` (app.css ~9863) pins the cross at
       22px with !important, so these have to shout back. */
    html.tm-mobile body .tm-modal .tm-ac2-input {
        padding-right: 88px !important;
    }

    html.tm-mobile body .tm-modal .tm-ac2-caret {
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        font-size: 20px !important;
    }

    html.tm-mobile body .tm-modal .tm-ac2-clear {
        right: 44px !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 40px !important;
        min-width: 40px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html.tm-mobile body .tm-modal .tm-ac2-clear::before {
        font-size: 15px !important;
    }
    /* Handbook & policies (Driver App Center). */
    html.tm-mobile body .tm-driver-admin-policies-scope {
        white-space: normal;
        line-height: 1.4;
    }

    /* Attachment rows - completed tasks, clients, drivers, handbook & policies. The name, the
       size and three buttons cannot share one phone line: the name column is a minmax(0,1fr)
       and collapsed to nothing, so the row read "1017.6 KB · Saved" and nothing else. Stack. */
    html.tm-mobile body .tm-driver-upload-item {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
    }

    html.tm-mobile body .tm-driver-upload-item .tm-driver-upload-name > span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* Phone card tables, second pass (2026-10-13). Reported on Companies +
   Vehicles: the cards ran together ("where does one record end?") and some
   showed two lines at the bottom. The doubled line came from the last cell
   rule: when the trailing cells are blank or hidden, the last VISIBLE cell is
   not :last-child, so its divider sat right on top of the card border. */
@media (max-width: 760px) {
    /* Plain neutral edge (2026-11-02): a blue left bar on every card read as
       "already selected". Blue edging is kept for the selected card only. */
    html.tm-mobile table.tm-mcards > tbody > tr {
        margin-bottom: 14px;
        border: 1px solid var(--tm-mcard-edge, #c3ccd9);
        box-shadow: inset 0 0 0 9999px var(--tm-mcard-bg, #fff),
                    0 2px 6px rgba(12, 20, 33, .10);
    }

    html.tm-mobile table.tm-mcards > tbody > tr.active,
    html.tm-mobile table.tm-mcards > tbody > tr.tm-selected,
    html.tm-mobile table.tm-mcards > tbody > tr[aria-selected="true"] {
        border-color: var(--tm-primary, #4682B4);
    }

    html.tm-mobile table.tm-mcards > tbody > tr > td:not(:has(~ td:not([hidden]):not(.tm-mcard-blank):not(:empty))) {
        border-bottom: 0 !important;
    }

    /* Company picker (clients, defects, VOR ...): 12px rows on a 30px pitch
       were too small to read or tap on a phone. */
    html.tm-mobile .tm-company-list .tm-company-item,
    html.tm-mobile .tm-company-list .tm-sidepanel-item,
    html.tm-mobile .tm-company-list .tm-list-item {
        font-size: 15px !important;
        line-height: 1.3;
        padding: 10px 12px !important;
    }
}

html.tm-dark {
    --tm-mcard-edge: #3b4b64;
}