/* ============================================================================
   TIM refresh — design tokens + components ("refined enterprise")
   Exemplar: Reports listing. Loads AFTER bootstrap.min.css and style.css so
   equal-specificity rules here win. All new classes are namespaced tim-* to
   avoid colliding with Bootstrap 4 (.dropdown/.btn/.badge/.active) and the
   legacy style.css.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../../fonts/inter-var-latin.woff2') format('woff2');
}

:root {
    --tim-blue: #014C97; /* brand primary (logo / style.css .btn-info) */
    --tim-blue-hover: #013a75;
    --tim-blue-dark: #01356B;
    --tim-blue-tint: #E8F1FA;
    --tim-nav-active: #1d5bbf;
    --tim-orange: #ee750f; /* brand accent (logo dot) */
    /* blue-cast neutrals — all text tokens pass WCAG AA on white and hover rows */
    --tim-text-1: #1a1d21;
    --tim-text-2: #4d5761;
    --tim-text-3: #66707d;
    --tim-text-head: #667085;
    --tim-border: #e3e8ee; /* decorative: dividers, card edges */
    --tim-border-control: #b9c1ca; /* control borders: inputs, buttons, chips */
    --tim-surface: #ffffff;
    --tim-surface-alt: #f6f8fa;
    --tim-hover: #f7f9fb;
    --tim-ok: #067647;
    --tim-warn: #B45309;
    /* destructive / error — one role with several consumers (danger action items, the Remove
       logo button, alert panels, and the legacy .btn-danger reskin), so it is tokenised.
       The per-report-type pill colours below are deliberately NOT tokens: each is used once,
       and naming them would add fourteen aliases without giving anything a shared meaning. */
    --tim-danger: #b3261e;
    --tim-danger-hover: #9a1f18;
    --tim-danger-tint: #fdf0ef;
    --tim-danger-border: #e3b6b2;
    --tim-danger-border-soft: #f3d4d1;
    --tim-danger-ink: #842029;
    --tim-radius-control: 8px;
    --tim-radius-card: 12px;
    --tim-radius-pill: 999px;
    --tim-radius: var(--tim-radius-control);
    --tim-form-control-height: 44px;
    --tim-form-label-gap: 8px;
    --tim-form-field-gap: 16px;
    --tim-form-group-gap: 24px;
    --tim-header-h: 60px;
    --tim-font: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --tim-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --tim-shadow-menu: 0 8px 24px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.05);
}

/* The authenticated/shared shell needs a 3:1+ non-text boundary against both white controls and
   the light page ground. Standalone Login surfaces intentionally retain their completed styling. */
body.tim-app-shell {
    --tim-border-control: #7c8794;
}

/* style.css historically brightens Bootstrap's normal-sized .text-danger to
   #f32f53 (3.93:1 on white). Reuse the established destructive token so inline
   errors and helper copy meet WCAG AA while retaining the TIM red family. */
.text-danger {
    color: var(--tim-danger) !important;
}

/* ---------------------------------------------------------------------------
   Breakpoint ladder
   ---------------
   Custom properties cannot be used in media query conditions, so these cannot be
   tokens — they are documented here instead, and new pages should reuse a value
   from this list rather than introducing a neighbouring one.

   Each breakpoint is the width at which one component runs out of room, not a
   device class. The table sheds columns progressively, least useful first:

     1240px  signature-enabled report table folds Client into property metadata
     1120px  standard report table drops the Client column
     1100px  account email truncates while the full navigation remains inline
     1080px  signature-enabled report table folds Prepared by
     1024px  report table switches layout; legacy table-rep-plugin neutralised
      960px  standard report table drops Report type and Prepared by
     940px  main nav collapses to the hamburger
      900px  settings layout stacks
      760px  report table folds the Report no. column into the property meta line
     700px  header padding tightens
     640px  form grids go single-column
     520px  account email truncates further to preserve the phone layout

   Plus two non-width queries: prefers-reduced-motion, and print.
   ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Global integration: new single-strip fixed header replaces the old
   two-strip #topnav; content offset shrinks accordingly.
   ------------------------------------------------------------------------- */
/* The page ground is painted on BOTH html and body. body alone is only as tall as its content,
   so on a short page (Activity and stats, Change password, the error pages) it stopped partway
   down and the white html background showed through as a seam above the footer. min-height
   makes body fill the viewport; the html rule additionally covers macOS/iOS overscroll. */
html {
    background: var(--tim-surface-alt);
}

body {
    font-family: var(--tim-font);
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
    min-height: 100vh;
}

/* Accessible feedback regions are appended as the last children of <body>.
   Bootstrap's absolute .sr-only positioning otherwise anchors them just below
   a 100vh page and creates a one-pixel scrollbar on short/full-height views. */
.tim-accessible-live {
    position: fixed !important;
    top: 0;
    left: 0;
}

.tim-skip-link {
    position: fixed;
    top: 8px;
    left: 16px;
    z-index: 1100;
    padding: 9px 14px;
    border-radius: 6px;
    background: var(--tim-surface);
    color: var(--tim-blue-dark);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--tim-shadow-menu);
    transform: translateY(calc(-100% - 16px));
    transition: transform 0.15s ease;
}

.tim-skip-link:focus,
.tim-skip-link:focus-visible {
    color: var(--tim-blue-dark);
    text-decoration: none;
    transform: translateY(0);
}

.tim-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

#timPageLoader {
    display: grid;
    place-items: center;
    background: rgba(246, 248, 250, 0.9);
}

.tim-page-loader-visual {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--tim-border);
    border-radius: 7px;
    background: var(--tim-surface);
}

.tim-loading-indicator {
    z-index: 1080;
    text-align: center;
    pointer-events: none;
}

.tim-loading-indicator-fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 18px;
    border: 1px solid var(--tim-border);
    border-radius: 7px;
    background: var(--tim-surface);
}

.tim-loading-indicator-contained {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 16px;
    border: 1px solid var(--tim-border);
    border-radius: 7px;
    background: var(--tim-surface);
}

.tim-loading-indicator-inline {
    position: relative;
}

.tim-loading-indicator img {
    display: none !important;
}

.tim-loader-mark {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.tim-loader-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--tim-blue-tint);
    border-top-color: var(--tim-blue);
    border-right-color: var(--tim-blue);
    animation: tim-loader-rotate 1s linear infinite;
}

.tim-loader-label {
    margin-left: 12px;
    vertical-align: middle;
    color: var(--tim-text-2);
    font-size: 14px;
}

button[data-tim-saving] {
    min-width: 110px;
}

.tim-saving-button {
    position: relative;
}

.tim-saving-original {
    visibility: hidden;
}

.tim-saving-feedback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tim-saving-feedback .tim-loader-mark {
    width: 16px;
    height: 16px;
}

.tim-saving-feedback .tim-loader-mark::before {
    border-color: currentColor;
    border-bottom-color: transparent;
    border-left-color: transparent;
}

.tim-loading-indicator.tim-loading-in-button,
.tim-saving-without-background #divWait.tim-loading-indicator-fixed {
    visibility: hidden;
}

@keyframes tim-loader-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* Bootstrap and legacy plugin controls inherit the same visible boundary as refreshed fields. */
.tim-app-shell .form-control,
.tim-app-shell .custom-select,
.tim-app-shell select,
.tim-app-shell textarea,
.tim-app-shell input[type="text"],
.tim-app-shell input[type="email"],
.tim-app-shell input[type="password"],
.tim-app-shell input[type="search"],
.tim-app-shell input[type="number"],
.tim-app-shell input[type="date"],
.tim-app-shell input[type="tel"] {
    border-color: var(--tim-border-control);
}

/* Keep validation meaning visible after the stronger neutral boundary above. */
.tim-app-shell .has-success .form-control {
    border-color: #2e7d32;
}

.tim-app-shell .has-warning .form-control {
    border-color: #8a5a00;
}

.tim-app-shell .has-error .form-control {
    border-color: #c62828;
}

/* The native checkbox/radio is transparent in these legacy patterns; strengthen its proxy. */
.tim-app-shell .custom-control-label::before,
.tim-app-shell .table-rep-plugin .checkbox-row label::before,
.tim-app-shell .checkmark {
    border: 1px solid var(--tim-border-control);
}

.wrapper {
    padding-top: calc(var(--tim-header-h) + 20px);
}

#topnav.tim-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--tim-header-h);
    min-height: var(--tim-header-h); /* override legacy #topnav min-height: 62px */
    padding: 0 24px;
    background: var(--tim-surface);
    border-bottom: 1px solid var(--tim-border);
    box-shadow: none;
    transition: box-shadow 0.15s;
}

#topnav.tim-header.tim-scrolled {
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.07);
}

.tim-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    min-width: 0;
}

.tim-logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tim-logo {
    display: block;
    height: 28px;
    width: auto;
}

/* ---------------- Nav ---------------- */
.tim-nav {
    display: flex;
    gap: 4px;
    height: 100%;
}

.tim-nav .tim-nav-item {
    display: flex;
    height: 100%;
    position: relative;
}

.tim-nav a.tim-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    color: var(--tim-text-2);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    background: none;
}

.tim-nav a.tim-nav-link:hover,
.tim-nav a.tim-nav-link:focus {
    color: var(--tim-text-1);
    text-decoration: none;
}

.tim-nav a.tim-nav-link.tim-active {
    color: var(--tim-nav-active);
    border-bottom-color: var(--tim-nav-active);
}

.tim-nav-chevron {
    opacity: 0.55;
    flex-shrink: 0;
}

/* suppress Bootstrap's generated caret inside tim components (we draw our own) */
.tim-header .dropdown-toggle::after,
.tim-menu .dropdown-toggle::after,
.tim-chip .dropdown-toggle::after,
.tim-action-split .dropdown-toggle::after {
    display: none;
}

/* ---------------- Account ---------------- */
.tim-account .tim-avatar-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--tim-text-2);
    font-size: 13px;
    min-height: 44px;
    padding: 4px 6px;
    border-radius: var(--tim-radius-control);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tim-account .tim-avatar-btn:hover,
.tim-account .tim-avatar-btn:focus {
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
}

.tim-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--tim-blue-tint);
    color: var(--tim-blue-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
}

.tim-acct-email {
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 941px) and (max-width: 1100px) {
    .tim-acct-email {
        max-width: 132px;
    }
}

@media (max-width: 520px) {
    .tim-acct-email {
        max-width: 104px;
    }
}

/* ---------------------------------------------------------------------------
   Shared menu style — applied to Bootstrap .dropdown-menu via .tim-menu
   ------------------------------------------------------------------------- */
.dropdown-menu.tim-menu {
    min-width: 214px;
    background: var(--tim-surface);
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-card);
    padding: 5px;
    box-shadow: var(--tim-shadow-menu);
    font-size: 13px;
    margin-top: 4px;
    /* style.css puts a hardcoded translate3d(-150px,-201px) on ALL .dropdown-menu
       (legacy nested-menu positioning). Popper-managed menus override it inline;
       CSS-positioned ones (the Signatures flyout) must cancel it explicitly. */
    transform: none;
    /* style.css also scrolls .dropdown-menu (overflow auto) — that clips the
       Signatures flyout, which lives outside its parent menu's box. Chip menus
       re-enable scrolling below with a more specific rule. */
    overflow: visible;
}

.tim-menu .dropdown-item,
.tim-menu .tim-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: var(--tim-radius-control);
    font-size: 13px;
    color: var(--tim-text-1);
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tim-menu .dropdown-item:hover,
.tim-menu .dropdown-item:focus,
.tim-menu .tim-menu-item:hover {
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
}

/* Destructive menu item. The guide allows red as text or an outline, never a fill, so the row
   only warms its ground on hover. */
.tim-menu .dropdown-item.tim-menu-danger {
    color: var(--tim-danger);
}

.tim-menu .dropdown-item.tim-menu-danger:hover,
.tim-menu .dropdown-item.tim-menu-danger:focus {
    background: var(--tim-danger-tint);
    color: var(--tim-danger);
}

.tim-menu .dropdown-item.tim-menu-danger i {
    color: var(--tim-danger) !important;
}

.tim-menu .dropdown-item i,
.tim-menu .dropdown-item svg,
.tim-menu .tim-menu-item i {
    color: var(--tim-text-3) !important; /* one quiet icon colour replaces the old multicoloured icons */
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 13px;
}

.tim-menu .dropdown-divider,
.tim-menu .tim-menu-divider {
    height: 1px;
    background: var(--tim-border);
    border: none;
    margin: 4px 8px;
}

/* nested flyout (Signatures) — custom toggle (.tim-submenu-open), since
   Bootstrap 4 has no native nested dropdowns; opens leftward so it never
   clips the viewport from a right-aligned parent menu */
.tim-menu .tim-submenu {
    position: relative;
}

.tim-menu .tim-submenu > .dropdown-menu {
    position: absolute;
    top: -6px;
    left: auto;
    right: calc(100% + 2px);
    margin: 0;
    display: none;
}

.tim-menu .tim-submenu.tim-submenu-open > .dropdown-menu {
    display: block;
}

.tim-submenu-arrow {
    margin-left: auto;
    opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Page scaffolding
   ------------------------------------------------------------------------- */
.tim-page-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.tim-page-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--tim-text-1);
    margin: 0;
}

.tim-page-subtitle {
    font-size: 13px;
    color: var(--tim-text-2);
    margin: 3px 0 0;
    font-variant-numeric: tabular-nums;
}

.tim-page-subtitle b {
    color: var(--tim-text-1);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.tim-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    background: var(--tim-surface);
    border: 1px solid var(--tim-border-control);
    border-radius: var(--tim-radius);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tim-text-1);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tim-btn:hover,
.tim-btn:focus {
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
    text-decoration: none;
}

.tim-btn-primary {
    background: var(--tim-blue);
    border-color: var(--tim-blue);
    color: #fff;
}

.tim-btn-primary:hover,
.tim-btn-primary:focus {
    background: var(--tim-blue-hover);
    border-color: var(--tim-blue-hover);
    color: #fff;
}

.tim-btn .tim-badge {
    background: var(--tim-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: var(--tim-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Search toolbar
   ------------------------------------------------------------------------- */
.tim-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.tim-search-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--tim-surface);
    border: 1px solid var(--tim-border-control);
    border-radius: var(--tim-radius);
    padding: 0 14px;
    height: 40px;
    min-width: 0;
}

.tim-search-box:focus-within {
    border-color: var(--tim-blue);
    box-shadow: 0 0 0 3px var(--tim-blue-tint);
}

.tim-search-box i {
    color: var(--tim-text-3);
    flex-shrink: 0;
}

.tim-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    background: transparent;
    color: var(--tim-text-1);
    min-width: 0;
    height: auto;
    padding: 0;
    box-shadow: none;
}

.tim-search-box input::placeholder {
    color: var(--tim-text-3);
}

/* ---------------------------------------------------------------------------
   Filter chips — chip is a container; label and × are separate real buttons
   ------------------------------------------------------------------------- */
.tim-chips-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.tim-chip-dd {
    display: inline-flex;
    position: relative;
}

.tim-chip {
    display: inline-flex;
    align-items: stretch;
    height: 32px;
    border-radius: var(--tim-radius-pill);
    border: 1px solid var(--tim-border-control);
    background: var(--tim-surface);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tim-text-2);
}

.tim-chip:hover {
    border-color: var(--tim-text-3);
    color: var(--tim-text-1);
}

.tim-chip.tim-chip-active {
    background: var(--tim-blue-tint);
    border-color: var(--tim-blue-tint);
    color: var(--tim-blue-dark);
}

.tim-chip-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0 13px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--tim-radius-pill);
    white-space: nowrap;
}

.tim-chip.tim-chip-active .tim-chip-main {
    padding-right: 4px;
    border-radius: var(--tim-radius-pill) 0 0 var(--tim-radius-pill);
}

.tim-chip-x {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 11px 0 3px;
    font-size: 15px;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    border-radius: 0 var(--tim-radius-pill) var(--tim-radius-pill) 0;
}

.tim-chip-x:hover {
    opacity: 1;
}

.tim-clear-all {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--tim-blue);
    padding: 4px 6px;
}

.tim-clear-all:hover {
    text-decoration: underline;
}

/* chip dropdown menus reuse .tim-menu via Bootstrap */
.tim-chip-dd .dropdown-menu.tim-menu {
    max-height: 320px;
    overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   Filters panel
   ------------------------------------------------------------------------- */
.tim-filters-panel {
    display: none;
    background: var(--tim-surface);
    border: 1px solid var(--tim-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.tim-filters-panel.tim-open {
    display: block;
}

.tim-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.tim-field label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--tim-text-2);
    margin-bottom: 5px;
}

.tim-field input,
.tim-field select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tim-border-control);
    border-radius: var(--tim-radius-control, 8px);
    font-family: inherit;
    font-size: 15px;
    background: var(--tim-surface);
    color: var(--tim-text-1);
}

.tim-field input:focus,
.tim-field select:focus {
    outline: none;
    border-color: var(--tim-blue);
    box-shadow: 0 0 0 3px var(--tim-blue-tint);
}

.tim-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.tim-filters-actions .tim-btn {
    height: 34px;
}

.tim-panel-note {
    font-size: 12px;
    color: var(--tim-text-3);
    margin: -6px 0 14px;
}

/* ---------------------------------------------------------------------------
   Table card
   ------------------------------------------------------------------------- */
.tim-card {
    background: var(--tim-surface);
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-card);
    box-shadow: none; /* design guide: cards carry no elevation */
    overflow: visible; /* row action menus must not be clipped */
}

.tim-table {
    width: 100%;
    border-collapse: separate; /* required: sticky thead + rounded corners */
    border-spacing: 0;
    margin: 0;
}

/* `width: 100%` is only a floor for a table: it still grows to its min-content width, and a
   property name with no spaces makes that larger than the card. .tim-card is deliberately
   overflow:visible so row action menus are not clipped, so the excess pushed the PAGE sideways
   instead of scrolling — measured on the Signature dashboard (8 columns) at 1252px of table in
   a 1216px card. Allowing a break as a last resort lets the table shrink to fit; cells that
   already fit are unaffected, which is why `anywhere` and not `break-word` (only `anywhere`
   feeds into min-content sizing). */
.tim-table th,
.tim-table td {
    overflow-wrap: anywhere;
}

.tim-table thead th {
    position: sticky;
    top: var(--tim-header-h);
    z-index: 10;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tim-text-head);
    padding: 10px 16px;
    border-bottom: 1px solid var(--tim-border-control);
    border-top: none;
    background: var(--tim-surface);
    white-space: nowrap;
}

.tim-table thead th:first-child {
    border-top-left-radius: 12px;
}

.tim-table thead th:last-child {
    border-top-right-radius: 12px;
}

.tim-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--tim-border);
    border-top: none;
    vertical-align: middle;
    font-size: 13.5px;
    color: var(--tim-text-1);
}

.tim-table tbody tr:last-child td {
    border-bottom: none;
}

.tim-table tbody tr {
    transition: background 0.1s;
}

.tim-table tbody tr:hover {
    background: var(--tim-hover);
}

.tim-table tbody tr:hover .tim-action-btn {
    border-color: var(--tim-text-3);
}

.tim-col-action {
    text-align: right;
}

.tim-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Grouped rows (one report sent to several recipients): rows inside a group
   drop their divider so the group reads as one visual block */
.tim-table tr.tim-row-mid td {
    border-bottom: none;
}

.tim-cell-sub {
    font-size: 11.5px;
    color: var(--tim-text-3);
    margin-top: 2px;
}

.tim-col-action .tim-action-btn + .tim-action-btn {
    margin-left: 6px;
}

.tim-action-btn.tim-action-danger {
    color: var(--tim-danger);
}

.tim-action-btn.tim-action-danger:hover,
.tim-action-btn.tim-action-danger:focus,
.tim-table tbody tr:hover .tim-action-btn.tim-action-danger:hover {
    background: var(--tim-danger-tint);
    border-color: var(--tim-danger-border);
    color: var(--tim-danger);
}

/* Table variant for modals — no sticky-header offset */
.tim-table-flat thead th {
    position: static;
}

/* ---------------------------------------------------------------------------
   Tabs (Signature dashboard) — Bootstrap nav-tabs restyled as underline tabs
   ------------------------------------------------------------------------- */
.tim-tabs.nav-tabs {
    border-bottom: 1px solid var(--tim-border);
    gap: 22px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
}

.tim-tabs.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 2px;
    margin-bottom: -1px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tim-text-2);
    background: none;
}

.tim-tabs.nav-tabs .nav-link:hover {
    color: var(--tim-text-1);
    border-color: transparent;
    border-bottom-color: var(--tim-border-control);
}

.tim-tabs.nav-tabs .nav-link.active {
    color: var(--tim-blue);
    background: none;
    border: none;
    border-bottom: 2px solid var(--tim-blue);
}

/* Customise drives active-state via .active on the <li> (CompanyTabClicked) */
.tim-tabs.nav-tabs .nav-item {
    cursor: pointer;
}

.tim-tabs.nav-tabs .nav-item.active .nav-link {
    color: var(--tim-blue);
    background: none;
    border: none;
    border-bottom: 2px solid var(--tim-blue);
}

/* nested sub-tabs (e.g. Integrations: Fixflo / SME) — slightly smaller */
.tim-tabs-sub.nav-tabs {
    gap: 18px;
    margin-bottom: 14px;
}

.tim-tabs-sub.nav-tabs .nav-link {
    font-size: 13px;
    padding: 8px 2px;
}

/* Customise page: centered content column + padded tab cards */
.tim-customise-wrap {
    max-width: 1160px;
    margin: 0 auto;
}

/* Settings layout: vertical section nav + content column */
.tim-settings {
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.tim-settings-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 0 0 218px;
    position: sticky;
    top: calc(var(--tim-header-h) + 20px);
}

.tim-settings-nav li {
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 2px;
}

.tim-settings-nav li a.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--tim-text-2);
    text-decoration: none;
    border-radius: 8px;
}

.tim-settings-nav li a.nav-link i {
    width: 16px;
    text-align: center;
    color: var(--tim-text-3);
    font-size: 13px;
}

.tim-settings-nav li:hover a.nav-link {
    background: var(--tim-hover);
    color: var(--tim-text-1);
}

.tim-settings-nav li.active a.nav-link {
    background: var(--tim-blue-tint);
    color: var(--tim-blue);
}

.tim-settings-nav li.active a.nav-link i {
    color: var(--tim-blue);
}

.tim-settings-content {
    flex: 1;
    min-width: 0;
}

/* non-clickable group labels inside the settings nav */
.tim-settings-nav li.tim-snav-group {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tim-text-3);
    padding: 16px 12px 5px;
    cursor: default;
}

.tim-settings-nav li.tim-snav-group:first-child {
    padding-top: 2px;
}

.tim-settings-nav li.tim-snav-group:hover {
    background: none;
}

@media (max-width: 900px) {
    .tim-settings {
        flex-direction: column;
        gap: 16px;
    }

    .tim-settings-nav {
        position: static;
        flex: none;
        width: 100%;
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .tim-settings-nav li {
        margin-bottom: 0;
        flex-shrink: 0;
    }
}

.tim-tab-card {
    padding: 20px;
    margin-bottom: 24px;
}

/* Options-tab panels (formerly hardcoded aliceblue blocks) */
.tim-opt-panel {
    background: var(--tim-surface-alt);
    border: 1px solid var(--tim-border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 18px;
}

.tim-opt-panel h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--tim-text-1);
    margin: 0 0 6px;
}

.tim-opt-panel .label {
    font-size: 13px;
    color: var(--tim-text-2);
}

.tim-opt-panel .form-group > label.label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--tim-text-2);
    margin-bottom: 5px;
}

.tim-opt-panel .form-control {
    height: 36px;
    border: 1px solid var(--tim-border-control);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    color: var(--tim-text-1);
    background: var(--tim-surface);
}

.tim-opt-panel .form-control:focus {
    border-color: var(--tim-blue);
    box-shadow: 0 0 0 3px var(--tim-blue-tint);
    outline: none;
}

.tim-opt-panel .form-control[readonly] {
    background: var(--tim-surface-alt);
    color: var(--tim-text-3);
}

.tim-btn.disabled,
.tim-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* destructive button (e.g. Remove logo): red outline, never filled */
.tim-btn.tim-btn-remove {
    background: var(--tim-surface);
    border-color: var(--tim-danger);
    color: var(--tim-danger);
}

.tim-btn.tim-btn-remove:hover,
.tim-btn.tim-btn-remove:focus {
    background: var(--tim-danger-tint);
    border-color: var(--tim-danger-hover);
    color: var(--tim-danger-hover);
}

/* Reminders area in the Signature dashboard title row (content injected by JS) */
.tim-reminder-area {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.tim-reminder-area a {
    font-size: 13px !important;
    text-decoration: none;
}

.bell-icon-class {
    color: #2e844a !important;
}

.tim-report-no {
    font-family: inherit;
    font-size: 12.5px;
    color: var(--tim-text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tim-prop-primary {
    font-weight: 500;
    color: var(--tim-text-1);
}

.tim-prop-meta {
    font-size: 12px;
    color: var(--tim-text-3);
    margin-top: 2px;
}

.tim-col-date {
    color: var(--tim-text-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tim-col-client {
    color: var(--tim-text-2);
}

/* meta-line fallbacks — appear only when their column is hidden */
.tim-meta-client,
.tim-meta-prepared {
    display: none;
}

/* !important: must beat the display:table-cell neutraliser below at ≤1024px */
@media (max-width: 1120px) {
    .tim-table .tim-col-client {
        display: none !important;
    }

    .tim-meta-client {
        display: inline;
    }
}

@media (max-width: 960px) {
    .tim-table .tim-col-type {
        display: none !important;
    }

    .tim-table .tim-col-preparedby {
        display: none !important;
    }

    .tim-meta-prepared {
        display: inline;
    }
}

/* phone-only meta fallbacks — hidden until their column folds at ≤760px */
.tim-meta-repno,
.tim-cell-substatus {
    display: none;
}

/* Phone layout (≤760px): fold the report-number column into the property meta
   line and the status column under the person's name; release the inline
   min-width/nowrap hints so the remaining columns share the viewport. */
@media (max-width: 760px) {
    .tim-table .tim-col-repno {
        display: none !important;
    }

    .tim-meta-repno {
        display: inline;
    }

    .tim-table .tim-col-status {
        display: none !important;
    }

    .tim-cell-substatus {
        display: block;
        margin-top: 3px;
    }

    .tim-table thead th {
        min-width: 0 !important;
        padding: 10px 10px;
    }

    .tim-table tbody td {
        padding: 10px 10px;
    }

    .tim-table .tim-col-action {
        white-space: normal !important;
    }

    .tim-table tbody td {
        padding: 10px 8px;
    }

    .tim-table thead th {
        padding: 10px 8px;
    }

    /* .tim-table prefix: the base definitions of these classes sit LATER in
       this file, so bare selectors here lose on source order */
    .tim-table .tim-action-btn {
        height: 30px;
        padding: 0 8px;
        font-size: 12px;
    }

    .tim-table .tim-action-split .tim-action-caret {
        padding: 0 6px;
    }

    .tim-table .tim-col-date,
    .tim-table .tim-status {
        white-space: normal;
    }

    .tim-page-title {
        font-size: 20px;
    }
}

/* style.css applies a global stacked-table treatment (td, th { display: block })
   below 1024px — neutralise it for tim tables, which handle small widths by
   collapsing columns into the property meta line instead */
@media only screen and (max-width: 1024px) {
    .tim-table {
        display: table;
    }

    .tim-table thead {
        display: table-header-group;
    }

    .tim-table tbody {
        display: table-row-group;
    }

    .tim-table tr {
        display: table-row;
    }

    .tim-table th,
    .tim-table td {
        display: table-cell;
        clear: none;
        text-align: left !important;
    }

    .tim-table thead th:not(:first-child) {
        display: table-cell;
    }

    .tim-table .tim-col-action {
        text-align: right !important;
    }
}

/* status — quiet second line under the completed date */
.tim-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    margin-top: 3px;
    white-space: nowrap;
}

.tim-status i {
    font-size: 10px;
}

.tim-status.tim-status-awaiting {
    color: var(--tim-warn);
}

.tim-status.tim-status-signed {
    color: var(--tim-ok);
}

.tim-status.tim-status-locked {
    color: var(--tim-text-3);
}

a.tim-status.tim-status-awaiting:hover {
    color: var(--tim-warn);
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Report type pills — shared palette, unique colours; unknown/custom -> neutral
   ------------------------------------------------------------------------- */
.tim-pill {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: var(--tim-radius-pill);
    white-space: nowrap;
}

/* Inventory */
.tim-pill-inventory {
    background: #EDE9FE;
    color: #5B21B6;
}

/* Schedule of condition */
.tim-pill-schedule-condition {
    background: #E8C3D7;
    color: #6B2548;
}

/* Inspection */
.tim-pill-inspection {
    background: #BFDBFE;
    color: #1E40AF;
}

/* HMO inspection */
.tim-pill-hmo-inspection {
    background: #335C81;
    color: #FFFFFF;
}

/* Check out */
.tim-pill-checkout {
    background: #FED7AA;
    color: #9A3412;
}

/* Check in */
.tim-pill-checkin {
    background: #DCFCE7;
    color: #166534;
}

/* Inventory + check in */
.tim-pill-inventory-checkin {
    background: #28734B;
    color: #FFFFFF;
}

/* Mid term */
.tim-pill-midterm {
    background: #D9E2EC;
    color: #334E68;
}

/* Legionella risk assessment */
.tim-pill-riskassess {
    background: #88DDD3;
    color: #134E4A;
}

/* Fire safety */
.tim-pill-fire-safety {
    background: #FECACA;
    color: #991B1B;
}

/* Custom / unknown */
.tim-pill-neutral {
    background: #F2F4F7;
    color: #475467;
}

/* ---------------------------------------------------------------------------
   Row action: split button (Download | caret -> full menu)
   ------------------------------------------------------------------------- */
.tim-action-split {
    display: inline-flex;
}

.tim-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--tim-border-control);
    border-radius: 6px;
    background: var(--tim-surface);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--tim-blue);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.tim-action-btn:hover,
.tim-action-btn:focus {
    background: var(--tim-blue-tint);
    border-color: var(--tim-blue-tint);
    color: var(--tim-blue);
    text-decoration: none;
}

.tim-action-split .tim-action-main {
    border-radius: 6px 0 0 6px;
}

.tim-action-split .tim-pdf-unavailable,
.tim-action-split .tim-pdf-unavailable:hover,
.tim-action-split .tim-pdf-unavailable:focus {
    color: var(--tim-text-3);
    background: var(--tim-surface-2, #F2F4F7);
    border-color: var(--tim-border-control);
    cursor: not-allowed;
}

.tim-action-split .dropdown {
    display: inline-flex;
}

.tim-action-split .tim-action-caret {
    border-radius: 0 6px 6px 0;
    border-left: none;
    padding: 0 7px;
}

/* ---------------------------------------------------------------------------
   Empty states
   ------------------------------------------------------------------------- */
.tim-empty {
    text-align: center;
    padding: 72px 24px;
}

.tim-empty h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--tim-text-1);
}

.tim-empty p {
    font-size: 13px;
    color: var(--tim-text-3);
    margin: 0 0 18px;
}

.tim-empty .tim-empty-icon {
    color: var(--tim-text-3);
    opacity: 0.5;
    margin-bottom: 14px;
    font-size: 34px;
}

.tim-empty .tim-btn {
    margin: 0 auto;
    display: inline-flex;
}

/* ---------------------------------------------------------------------------
   Table footer / pagination
   ------------------------------------------------------------------------- */
.tim-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--tim-border);
    background: var(--tim-surface);
    border-radius: 0 0 12px 12px;
    flex-wrap: wrap;
}

.tim-footer-count {
    font-size: 12.5px;
    color: var(--tim-text-2);
}

.tim-pager {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tim-page-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--tim-text-3);
    padding-right: 14px;
    margin-right: 8px;
    border-right: 1px solid var(--tim-border);
}

.tim-page-size select {
    height: 30px;
    width: auto;
    padding: 0 6px;
    border: 1px solid var(--tim-border-control);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    background: var(--tim-surface);
    color: var(--tim-text-1);
    display: inline-block;
}

.tim-pg-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--tim-text-2);
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.tim-pg-info label {
    margin: 0;
    font-weight: inherit;
}

.tim-page-number {
    flex: 0 0 calc(5ch + 14px);
    width: calc(5ch + 14px);
    height: 30px;
    margin: 0;
    padding: 0 6px;
    border: 1px solid var(--tim-border-control);
    border-radius: 6px;
    background: var(--tim-surface);
    color: var(--tim-text-1);
    font-family: inherit;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    line-height: 28px;
    text-align: center;
    appearance: textfield;
}

.tim-page-number::-webkit-inner-spin-button,
.tim-page-number::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.tim-page-number:invalid {
    border-color: var(--tim-danger);
}

.tim-pg-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tim-border-control);
    border-radius: 6px;
    background: var(--tim-surface);
    cursor: pointer;
    color: var(--tim-text-2);
    font-family: inherit;
    font-size: 13px;
    padding: 0;
}

.tim-pg-btn:hover {
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
}

.tim-pg-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ---------------------------------------------------------------------------
   Form card (single-purpose form pages: Activity & stats, Change password)
   ------------------------------------------------------------------------- */
.tim-form-card {
    max-width: 640px;
    padding: 24px;
}

.tim-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tim-form-grid .tim-field-full {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .tim-form-grid {
        grid-template-columns: 1fr;
    }
}

.tim-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--tim-border);
    flex-wrap: wrap;
}

.tim-form-hint {
    font-size: 12.5px;
    color: var(--tim-text-3);
}

.tim-form-card-narrow {
    max-width: 440px;
}

.tim-form-stack {
    display: grid;
    gap: 16px;
}

.tim-form-stack .tim-btn {
    margin-top: 6px;
}

.tim-btn-block {
    width: 100%;
    justify-content: center;
}

.tim-field-error {
    display: block;
    font-size: 12px;
    color: var(--tim-danger);
    margin-top: 5px;
}

.tim-form-msg {
    font-size: 13px;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 16px;
}

.tim-form-msg-error {
    color: var(--tim-danger-ink);
    background: var(--tim-danger-tint);
    border: 1px solid var(--tim-danger-border-soft);
}

.tim-form-msg-success {
    color: #0f5132;
    background: #eefaf3;
    border: 1px solid #cfeadd;
}

/* Prose content inside a form card (e.g. Make a payment) */
.tim-prose p {
    font-size: 13.5px;
    color: var(--tim-text-2);
    line-height: 1.6;
    margin: 0 0 12px;
}

.tim-prose h2 {
    font-size: 15px;
    font-weight: 600;
    color: var(--tim-text-1);
    margin: 22px 0 8px;
}

.tim-prose > p:first-child {
    margin-top: 0;
}

.tim-prose ul {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 13.5px;
    color: var(--tim-text-2);
    line-height: 1.7;
}

.tim-prose a {
    color: var(--tim-blue);
}

.tim-prose .tim-form-grid {
    margin: 14px 0;
    max-width: 480px;
}

.tim-paypal-row {
    margin: 0 0 6px;
}

.tim-paypal-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Mobile nav (below 940px the inline nav collapses behind a hamburger)
   ------------------------------------------------------------------------- */
.tim-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--tim-radius-control);
    color: var(--tim-text-2);
    font-size: 18px;
}

@media (max-width: 940px) {
    .tim-nav-toggle {
        display: inline-flex;
    }

    .tim-nav {
        display: none;
        position: absolute;
        top: var(--tim-header-h);
        left: 0;
        right: 0;
        background: var(--tim-surface);
        border-bottom: 1px solid var(--tim-border);
        box-shadow: var(--tim-shadow-menu);
        flex-direction: column;
        height: auto;
        padding: 6px 12px 10px;
        gap: 0;
        max-height: calc(100vh - var(--tim-header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #topnav.tim-header.tim-nav-open .tim-nav {
        display: flex;
    }

    .tim-nav .tim-nav-item {
        height: auto;
        display: block;
    }

    .tim-nav a.tim-nav-link {
        padding: 11px 8px;
        border-bottom: none;
        margin-bottom: 0;
    }

    .tim-nav a.tim-nav-link.tim-active {
        border-bottom: none;
        color: var(--tim-nav-active);
    }

    .tim-nav .dropdown-menu.tim-menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0 0 4px;
        border-radius: 8px;
        box-shadow: none;
        transform: none !important;
    }
}

@media (max-width: 700px) {
    #topnav.tim-header {
        padding: 0 16px;
    }
}

/* ---------------------------------------------------------------------------
   Login page (standalone — rendered without the app shell)
   ------------------------------------------------------------------------- */
.tim-login-body {
    margin: 0;
    font-family: var(--tim-font);
    background: var(--tim-surface);
}

.tim-login-form {
    width: 100%;
    max-width: 360px;
}

.tim-login-logo-small {
    width: 74px;
    height: auto;
    display: none;
    margin: 0 auto 30px;
}

.tim-login-sub {
    font-size: 13.5px;
    color: var(--tim-text-3);
    margin: 0 0 26px;
}

.tim-login-form .tim-field input {
    height: 44px;
}

.tim-login-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.tim-login-link {
    font-size: 13px;
    color: var(--tim-blue);
    text-decoration: none;
}

.tim-login-row > .tim-login-link,
.tim-login-trial-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
}

.tim-login-link:hover {
    color: var(--tim-blue-hover);
    text-decoration: underline;
}

.tim-login-btn {
    height: 44px;
    font-size: 14px;
    margin-top: 4px;
}

/* single-card variant for auth utility pages (reset password / confirm) */
.tim-login-single {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--tim-surface-alt);
}

.tim-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--tim-surface);
    border: 1px solid var(--tim-border);
    border-top: 4px solid var(--tim-blue);
    border-radius: 14px;
    box-shadow: none;
    padding: 32px;
}

.tim-login-card .tim-login-logo-small {
    display: block;
}

.tim-login-card .tim-field input {
    min-height: 44px;
    font-size: 15px;
}

.tim-login-card .tim-field > label {
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
}

.tim-login-card .tim-btn {
    min-height: 44px;
}

.tim-login-card .tim-field input[aria-invalid="true"] {
    border-color: var(--tim-danger);
    box-shadow: 0 0 0 3px var(--tim-danger-tint);
}

.tim-reset-summary:focus {
    outline: 3px solid var(--tim-orange);
    outline-offset: 3px;
}

.tim-reset-summary ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.tim-auth-state {
    margin: 0;
    text-align: left;
}

.tim-auth-state p {
    margin: 0 0 12px;
    line-height: 1.55;
}

.tim-auth-state .tim-btn {
    margin-top: 4px;
}

/* Every auth card (sign in, trial, reset, confirm) shares one title scale. */
.tim-login-card h1 {
    color: var(--tim-text-1);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0 0 8px;
}

.tim-login-card-signin {
    max-width: 424px;
    border-top: 4px solid var(--tim-blue);
    padding-top: 36px;
}

.tim-login-card-signin .tim-login-form {
    max-width: none;
}

.tim-login-card-signin h1 {
    color: var(--tim-text-1);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0 0 28px;
}

.tim-login-card-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.tim-login-logo-mark {
    display: block;
    width: 112px;
    max-width: 36%;
    height: auto;
}

.tim-login-trial {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--tim-border);
    color: var(--tim-text-3);
    font-size: 13.5px;
    text-align: center;
}

.tim-login-trial-link {
    margin-left: 4px;
    font-weight: 600;
}

.tim-signup-page {
    padding-top: 40px;
    padding-bottom: 40px;
}

.tim-signup-card {
    max-width: 480px;
}

.tim-signup-card .tim-login-form {
    max-width: none;
}

.tim-login-card-signin.tim-signup-card h1 {
    margin-bottom: 12px;
    text-align: center;
}

.tim-signup-sub {
    margin: 0 0 28px;
    color: var(--tim-text-3);
    font-size: 13.5px;
    line-height: 1.55;
    text-align: center;
}

.tim-signup-form .tim-field input {
    height: 44px;
}

.tim-signup-form .tim-password-toggle {
    top: 0;
    right: 0;
}

.tim-signup-summary.validation-summary-valid {
    display: none;
}

.tim-signup-summary[hidden] {
    display: none;
}

.tim-signup-summary {
    overflow-wrap: anywhere;
}

.tim-signup-summary:focus {
    outline: 3px solid var(--tim-orange);
    outline-offset: 3px;
}

.tim-signup-summary ul {
    margin: 0;
    padding-left: 18px;
}

.tim-signup-summary li + li {
    margin-top: 4px;
}

.tim-password-control {
    position: relative;
}

.tim-password-control input {
    padding-right: 48px;
}

.tim-password-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--tim-text-3);
    cursor: pointer;
}

.tim-password-toggle:hover {
    color: var(--tim-blue);
    background: var(--tim-blue-tint);
}

.tim-password-toggle:focus-visible {
    outline: 2px solid var(--tim-blue) !important;
    outline-offset: -3px !important;
}

.tim-password-toggle svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.tim-password-hint {
    display: block;
    margin-top: 7px;
    color: var(--tim-text-3);
    font-size: 12px;
}

.tim-password-hint-icon {
    margin-right: 3px;
    color: var(--tim-border-control);
    font-weight: 700;
}

.tim-password-hint-icon::before {
    content: "\2022";
}

.tim-password-hint-valid,
.tim-password-hint-valid .tim-password-hint-icon {
    color: var(--tim-ok);
}

.tim-password-hint-valid .tim-password-hint-icon::before {
    content: "\2713";
}

.tim-signup-btn {
    margin-top: 10px !important;
}

.tim-signup-terms {
    margin: 22px 0 0;
    color: var(--tim-text-3);
    font-size: 13px;
    text-align: center;
}

.tim-signup-terms .tim-login-link {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
}

.tim-signup-signin {
    margin-top: 24px;
}

.tim-signup-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.tim-login-card h1,
.tim-login-card h2,
.tim-login-card .tim-login-sub {
    text-align: center;
}

@media (max-height: 800px) {
    .tim-signup-page {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

@media (max-width: 420px) {
    .tim-login-card-signin {
        padding: 28px 22px;
    }

    .tim-signup-page {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .tim-login-card-signin.tim-signup-card h1 {
        font-size: 22px;
    }
}

@media (max-width: 340px) {
    .tim-login-card-signin .tim-login-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}

.tim-login-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.tim-login-actions .tim-btn {
    flex: 1;
    justify-content: center;
    height: 44px;
}

/* ---------------------------------------------------------------------------
   Focus visibility + reduced motion + print
   ------------------------------------------------------------------------- */
.tim-header a:focus-visible,
.tim-header button:focus-visible,
.tim-btn:focus-visible,
.tim-chip-main:focus-visible,
.tim-chip-x:focus-visible,
.tim-action-btn:focus-visible,
.tim-density-btn:focus-visible,
.tim-sort-control select:focus-visible,
select.tim-sort-control:focus-visible,
.tim-page-number:focus-visible,
.tim-pg-btn:focus-visible,
.tim-submenu-toggle:focus-visible {
    /* !important is load-bearing, not defensive: style.css:118 carries a blanket
       `* { outline: none !important }`. Without a matching !important here the whole of this
       block loses to it and NOTHING in the refreshed UI shows a focus ring — verified in
       Chrome, where the rule resolved to `outline-style: none` while :focus-visible matched.
       Both declarations are !important, so the higher specificity (0,2,0 vs *'s 0,0,0) wins. */
    outline: 2px solid var(--tim-blue) !important;
    outline-offset: 2px;
}

/* Every keyboard-focusable control in the authenticated shell gets a visible ring, including
   legacy links and plugin controls that are not part of the refreshed tim-* component set. */
.tim-app-shell *:focus-visible:not([tabindex="-1"]) {
    outline: 3px solid var(--tim-blue) !important;
    outline-offset: 2px;
}

/* Clicking a control (including returning from a dialog) keeps focus for the next action,
   but only keyboard navigation should leave a focus ring on buttons and links. */
.tim-app-shell :is(button, a, [role="button"], input[type="button"], input[type="submit"]):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* The skip target is intentionally programmatically focusable and must remain visibly located
   for keyboard users. Pointer clicks can also focus its tabindex=-1 container, so limit the
   full-landmark ring to keyboard focus instead of boxing the page after a background click. */
.tim-app-shell #main-content:focus-visible {
    outline: 3px solid var(--tim-blue) !important;
    outline-offset: -3px;
}

/* These composite fields paint focus on their bordered container via :focus-within.
   An inner outline is clipped by the rounded wrapper into stray vertical lines. */
.tim-app-shell .tim-search-box input:focus-visible,
.tim-app-shell .tim-reports-index .tim-filter-field :is(input, select):focus-visible,
.tim-app-shell .tim-report-list-page .tim-report-list-filters .tim-field :is(input, select):focus-visible {
    outline: none !important;
    box-shadow: none;
}

/* Legacy table checkboxes hide the native input, so paint the general focus ring on the visible
   proxy instead of the transparent control. */
.tim-app-shell .custom-control-input:focus ~ .custom-control-label::before,
.tim-app-shell .custom-control-input:focus-visible ~ .custom-control-label::before,
.tim-app-shell .table-rep-plugin .checkbox-row input[type="checkbox"]:focus + label::before,
.tim-app-shell .table-rep-plugin .checkbox-row input[type="checkbox"]:focus-visible + label::before {
    outline: 3px solid var(--tim-blue) !important;
    outline-offset: 2px;
}

.tim-app-shell .container input:focus ~ .checkmark,
.tim-app-shell .container input:focus-visible ~ .checkmark {
    outline: 3px solid var(--tim-blue) !important;
    outline-offset: 2px;
}

/* Photo-upload inputs fill their visible button at opacity:0. Paint keyboard focus on that
   visible wrapper, not on the transparent native control. */
.tim-app-shell .file:focus-within,
.tim-app-shell .btn-file:focus-within {
    outline: 3px solid var(--tim-blue) !important;
    outline-offset: 2px;
}

.tim-app-shell .file input[type="file"]:focus,
.tim-app-shell .file input[type="file"]:focus-visible,
.tim-app-shell .btn-file input[type="file"]:focus,
.tim-app-shell .btn-file input[type="file"]:focus-visible {
    outline: none !important;
}

/* These arrow controls sit on the same brand-blue surface as the general blue ring. */
.tim-app-shell .btn-arrowLeftRight:focus,
.tim-app-shell .btn-arrowLeftRight:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--tim-blue-dark) !important;
}

@media (prefers-reduced-motion: reduce) {
    .tim-skip-link,
    #topnav.tim-header,
    .tim-table tbody tr {
        transition: none;
    }

    .tim-loader-mark::before {
        animation: none;
    }
}

@media (forced-colors: active) {
    .tim-loader-mark::before {
        border: 2px solid CanvasText;
        border-top-color: Highlight;
        border-right-color: Highlight;
    }
}

@media print {
    #topnav.tim-header,
    .tim-toolbar,
    .tim-chips-row,
    .tim-filters-panel,
    .tim-col-action,
    .tim-page-title-row .tim-btn {
        display: none !important;
    }

    .tim-table thead th {
        position: static;
    }

    .tim-card {
        box-shadow: none;
    }
}

/* ============================================================================
   LEGACY RESKIN — pages not yet hand-rebuilt (report editor, Review, Fixflo,
   remaining modals) keep their original markup; these overrides restyle the
   legacy component classes into the tim look. This section loads last so it
   wins on source order against both style.css and earlier tim sections.
   ========================================================================== */

/* ---- page furniture ---- */
.page-title-box .page-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--tim-text-1);
    text-transform: none;
}

.breadcrumb,
.breadcrumb a {
    font-size: 12.5px;
    color: var(--tim-text-3);
}

.card {
    border: 1px solid var(--tim-border);
    border-radius: 12px;
    box-shadow: none;
}

/* ---- legacy tables: neutral zebra instead of the strong blue ---- */
.table-striped tbody tr:nth-of-type(odd),
.thead-default th {
    background-color: var(--tim-surface-alt);
}

.table-hover tbody tr:hover {
    background-color: var(--tim-hover);
}

/* section bars in the report editor / review — keep white-on-blue (inner
   markup relies on light text) but calm the size and weight */
.tbl-header {
    background: var(--tim-blue);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.tbl-header th {
    padding-top: 9px;
    padding-bottom: 9px;
}

.tbl-subheader {
    background: var(--tim-blue-tint);
    color: var(--tim-blue-dark);
    font-size: 13px;
    font-weight: 600;
}

/* ---- legacy buttons → tim geometry + palette (fills preserved: their inner
   icons are text-white) ---- */
.btn {
    border-radius: 8px;
    font-weight: 500;
    box-shadow: none;
}

.btn-info,
.btn-primary-Inv,
.btn-Login {
    background-color: var(--tim-blue);
    border-color: var(--tim-blue);
    color: #fff;
}

.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-primary-Inv:hover, .btn-primary-Inv:focus, .btn-primary-Inv:active,
.btn-Login:hover, .btn-Login:focus {
    background-color: var(--tim-blue-hover);
    border-color: var(--tim-blue-hover);
    color: #fff;
}

.btn-Edit,
.btn-Summury {
    background-color: var(--tim-blue);
    border: 1px solid var(--tim-blue);
    color: #fff;
}

.btn-Edit:hover, .btn-Edit:focus, .btn-Edit:active,
.btn-Summury:hover, .btn-Summury:focus, .btn-Summury:active {
    background-color: var(--tim-blue-hover);
    border-color: var(--tim-blue-hover);
    color: #fff;
}

.btn-danger {
    background-color: var(--tim-surface);
    border-color: var(--tim-danger);
    color: var(--tim-danger);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    background-color: var(--tim-danger-tint);
    border-color: var(--tim-danger-hover);
    color: var(--tim-danger-hover);
}

/* Legacy markup pairs btn-danger with .text-white; keep the label readable on the outline. */
.btn-danger.text-white {
    color: var(--tim-danger) !important;
}

.btn-warning {
    background-color: #B45309;
    border-color: #B45309;
    color: #fff;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
    background-color: #92430a;
    border-color: #92430a;
    color: #fff;
}

.btn-success {
    background-color: var(--tim-ok);
    border-color: var(--tim-ok);
}

.btn-FirstLast,
.btn-NextPrevious {
    background-color: var(--tim-surface);
    border: 1px solid var(--tim-border-control);
    color: var(--tim-text-2);
}

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

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--tim-border);
}

.modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--tim-text-1);
}

.modal-header .close {
    color: var(--tim-text-3);
    opacity: 1;
    text-shadow: none;
    font-weight: 400;
    border-radius: 8px;
}

/* Bootstrap gives every focused button a native square outline. Modal close controls can be
   focused automatically when a dialog opens, so that outline appears for pointer users too.
   Remove only that native treatment, then provide a rounded indicator for genuine keyboard
   focus. The higher specificity and !important override the shell-wide focus rule above and
   Signature dashboard's page-specific button rule without weakening any other control. */
.tim-app-shell .modal-header button.close:focus {
    outline: none !important;
    box-shadow: none !important;
}

.tim-app-shell .modal-header button.close:focus-visible {
    outline: none !important;
    background: var(--tim-blue-tint);
    box-shadow: inset 0 0 0 2px var(--tim-blue) !important;
}

.modal-footer {
    border-top: 1px solid var(--tim-border);
    padding: 12px 20px;
}

/* Create report is a two-step shared flow. Keep its style-guide palette and component geometry
   scoped to these dialogs so unrelated legacy Bootstrap modals are unchanged. */
#modelCreateNewReport.tim-create-report-modal,
#modelAddPropDetail.tim-create-report-property-modal {
    --tim-blue: #1d5bbf;
    --tim-blue-hover: #164a9c;
    --tim-blue-tint: #e8effc;
    --tim-text-1: #1f2937;
    --tim-text-2: #374151;
    --tim-text-3: #6b7280;
    --tim-border: #e5e7eb;
    --tim-border-control: #d1d5db;
    --tim-surface-alt: #fafbfc;
    --tim-danger: #b42318;
}

#modelCreateNewReport.tim-create-report-modal .modal-dialog {
    width: calc(100% - 32px);
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
}

#modelCreateNewReport.tim-create-report-modal .modal-body {
    min-height: 100px;
}

#modelCreateNewReport.tim-create-report-modal #CreateNewReportResult {
    width: 100%;
}

/* ---- legacy form controls ---- */
.form-control {
    border: 1px solid var(--tim-border-control);
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--tim-text-1);
}

.form-control:focus {
    border-color: var(--tim-blue);
    box-shadow: 0 0 0 3px var(--tim-blue-tint);
}

/* ---- edit-report surface ---- */
/* card headings: sentence case instead of the legacy ALL-CAPS treatment */
.header-title {
    text-transform: none;
    letter-spacing: -0.2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--tim-text-1);
}

/* Review item grid: focused row was bright cyan #0f9cf3 */
table.focus-on tbody tr.focused th,
table.focus-on tbody tr.focused td {
    background-color: var(--tim-blue);
    color: #fff;
}

/* section-name "badge" in photo modals rendered as bare text */
.modal-content span.label {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--tim-radius-pill);
    background: var(--tim-blue-tint);
    color: var(--tim-blue-dark);
    font-size: 11.5px;
    font-weight: 600;
}

/* room/item reorder arrows (inline #0d6eb6 removed from markup) */
.order i {
    color: var(--tim-blue);
}

/* SME self-cert form: logo panel without the grey jumbotron slab */
.jumbotron {
    background: transparent;
    padding: 24px 0;
    margin-bottom: 8px;
}

/* photo gallery thumbnails (tenant portal, editor photo modals) */
.popup-gallery img,
.zoom-gallery img {
    border-radius: 8px;
    border: 1px solid var(--tim-border);
    background: #fff;
}

/* shared notice banners — replace the per-page inline palettes */
.tim-banner-info {
    background: var(--tim-blue-tint);
    border: 1px solid #c7dcf0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: var(--tim-blue-dark);
}

.tim-banner-warn {
    background: #fff7e6;
    border: 1px solid #f0dcae;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #7a4b06;
}

/* ---- stacked-table card treatment (≤1024px) ----
   style.css turns legacy tables into label:value stacks on small screens;
   these rules reshape that stack into item cards for the edit-report lists
   (_ReviewList rv-*, _TemplateData tpl-*, _FixfloIssueList fx-*). */
@media only screen and (max-width: 1024px) {
    .table-rep-plugin table.table tbody tr {
        display: block;
        position: relative;
        background: var(--tim-surface);
        border: 1px solid var(--tim-border);
        border-radius: 10px;
        padding: 12px 14px;
        margin: 0 0 10px;
    }

    .table-rep-plugin table.table tbody td {
        display: block;
        border: none;
        background: transparent;
        padding: 0;
        text-align: left !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .table-rep-plugin table.table tbody td[data-th]:before {
        content: none;
    }

    .table-rep-plugin table.table tbody td > div {
        width: auto !important;
        min-width: 0 !important;
        overflow: visible !important;
        display: inline;
    }

    /* keep the blue section/type bars; hide only the column-header rows */
    .table-rep-plugin table.table thead tr:not(.tbl-header):not(.tbl-subheader) {
        display: none;
    }

    /* Review item list */
    .table-rep-plugin tr:has(td.rv-check) {
        padding-right: 44px;
    }

    .table-rep-plugin table.table tbody td.rv-check {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .table-rep-plugin table.table tbody td.rv-ref {
        display: inline-block;
        font-family: inherit;
        font-variant-numeric: tabular-nums;
        font-size: 12px;
        color: var(--tim-text-3);
        margin-right: 6px;
    }

    .table-rep-plugin table.table tbody td.rv-name {
        display: inline;
        font-weight: 600;
        font-size: 14px;
        color: var(--tim-text-1);
        word-break: break-word;
    }

    .table-rep-plugin table.table tbody td.rv-qty,
    .table-rep-plugin table.table tbody td.rv-colour {
        display: inline-block;
        font-size: 12.5px;
        color: var(--tim-text-2);
        margin: 3px 8px 0 0;
    }

    .table-rep-plugin table.table tbody td.rv-cond {
        font-size: 13px;
        color: var(--tim-text-2);
        margin-top: 4px;
    }

    .table-rep-plugin table.table tbody td.rv-action,
    .table-rep-plugin table.table tbody td.rv-photos {
        display: inline-block;
        margin: 10px 6px 0 0;
    }

    .table-rep-plugin table.table tbody td.rv-filler {
        display: none;
    }

    /* inspection/legionella item list */
    .table-rep-plugin table.table tbody td.firstTh {
        display: none !important;
    }

    .table-rep-plugin table.table tbody td.tpl-arrows {
        position: absolute;
        top: 10px;
        right: 12px;
        width: auto !important;
    }

    .table-rep-plugin table.table tbody td.tpl-name {
        padding-right: 56px;
        font-size: 13.5px;
    }

    .table-rep-plugin table.table tbody td.tpl-actions {
        margin-top: 10px;
    }

    /* Fixflo issue list */
    .table-rep-plugin table.table tbody td.fx-ref {
        font-family: inherit;
        font-variant-numeric: tabular-nums;
        font-size: 12px;
        color: var(--tim-text-3);
    }

    .table-rep-plugin table.table tbody td.fx-title {
        font-weight: 600;
        font-size: 14px;
        color: var(--tim-text-1);
    }

    .table-rep-plugin table.table tbody td.fx-fault {
        font-size: 13px;
        color: var(--tim-text-2);
        margin-top: 3px;
    }

    .table-rep-plugin table.table tbody td.fx-date {
        font-size: 12.5px;
        color: var(--tim-text-3);
        margin-top: 3px;
    }

    .table-rep-plugin table.table tbody td.fx-photos,
    .table-rep-plugin table.table tbody td.fx-action {
        display: inline-block;
        margin: 10px 6px 0 0;
    }
}

/* ============================================================================
   Edit report — the reskinned editing surface, brought up to the refreshed design.

   Done from the stylesheet rather than by rewriting EditReportHome.cshtml: that view is
   ~4,000 lines and its Bootstrap column classes are load-bearing for the modals and the
   partial reloads that re-render into them. `.tim-editreport` is the only markup change.
   ========================================================================== */

/* ---- Reclaim the width -----------------------------------------------------
   The legacy markup centres content in a col-xl-6 between two EMPTY col-xl-3 spacers,
   so a 25-room report scrolled inside a 575px column on a 1280px display with 55% of
   the screen unused. Drop the spacers and give the content the same measure the
   listing pages use. */
.tim-editreport .row > [class*="col-xl-3"]:empty {
    display: none;
}

.tim-editreport .row > [class*="col-xl-6"] {
    flex: 0 0 100%;
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Cards ---------------------------------------------------------------- */
.tim-editreport .card {
    border: 1px solid var(--tim-border);
    border-radius: 12px;
    box-shadow: none;
}

/* ---- Tables: drop the legacy zebra for the refreshed row treatment --------- */
.tim-editreport .table.table-striped > tbody > tr:nth-of-type(odd),
.tim-editreport .table.table-striped > tbody > tr:nth-of-type(even) {
    background: transparent;
}

/* Separators BETWEEN rows only. A border-top on every tr put a line hard against the header's own
   border-bottom, drawing a 2px double rule under the column headings, and another line under the
   final row that closed the table off against the card's padding. */
.tim-editreport .table > tbody > tr + tr {
    border-top: 1px solid var(--tim-border);
}

.tim-editreport .table > tbody > tr:hover {
    background: var(--tim-hover);
}

/* Column headings only. .tbl-header and .tbl-subheader are full-width SECTION BARS that happen to
   be built from thead rows ("Decor", "Ceiling" on Review), and they carry their own colour pair.
   Without this exclusion the rule below repainted their text --tim-text-head grey — on the brand
   blue bar that is 2.4:1, unreadable, and it is why that bar looked washed out. */
.tim-editreport .table > thead > tr:not(.tbl-header):not(.tbl-subheader) > th {
    /* Bootstrap puts border-top on EVERY th and td. On a thead that draws a line above the column
       headings — which, under a card title, read as a stray rule floating below the heading. */
    border-top: 0;
    border-bottom: 1px solid var(--tim-border);
    color: var(--tim-text-head);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tim-editreport .table > tbody > tr > td {
    vertical-align: middle;
    color: var(--tim-text-1);
}

/* ---- Row actions ----------------------------------------------------------
   Three saturated fills per row (blue / red / blue) meant 75 loud buttons on a
   25-room report, with a red destructive control shouting on every line. Same
   geometry and restraint as .tim-action-btn on the listings; destructive intent
   is carried on hover, where it matters, rather than at rest. */
.tim-editreport .btn.btn-sm.btn-Edit,
.tim-editreport .btn.btn-sm.btn-danger,
.tim-editreport .btn.btn-sm.btn-Summury {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--tim-border-control) !important;
    border-radius: 6px;
    background: var(--tim-surface) !important;
    background-image: none !important;
    color: var(--tim-blue) !important;
    box-shadow: none !important;
}

.tim-editreport .btn.btn-sm.btn-Edit:hover,
.tim-editreport .btn.btn-sm.btn-Summury:hover {
    background: var(--tim-blue-tint) !important;
    border-color: var(--tim-blue-tint) !important;
}

.tim-editreport .btn.btn-sm.btn-danger {
    color: var(--tim-danger) !important;
}

.tim-editreport .btn.btn-sm.btn-danger:hover {
    background: var(--tim-danger-tint) !important;
    border-color: var(--tim-danger-border) !important;
    color: var(--tim-danger-hover) !important;
}

.tim-editreport .btn.btn-sm i {
    font-size: 13px;
    line-height: 1;
}

/* ---- Reorder arrows -------------------------------------------------------
   Structural controls, not primary actions: quiet at rest, brand colour on hover. */
.tim-editreport .order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 48px;
    height: 26px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tim-text-3);
    font-family: inherit;
    font-size: 11.5px;
    text-decoration: none;
    cursor: pointer;
}

.tim-editreport .order:hover,
.tim-editreport .order:focus {
    background: var(--tim-blue-tint);
    color: var(--tim-blue);
}

.tim-editreport .tim-room-order {
    display: flex;
    gap: 4px;
}

/* ---- Card head ------------------------------------------------------------
   A card's title and its action belong on one row. The legacy markup emitted a block-level h4
   followed by a floated control, so the action dropped onto its own line below the title with a
   band of empty card between them. */
.tim-editreport .tim-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.tim-editreport .tim-card-head > .header-title {
    margin: 0;
}

/* ---- The report-details block ---------------------------------------------
   Five label/value pairs, emitted as a <dl> by _PropertyDetails.cshtml. Labels are supporting
   text, the value is the content. Deliberately no rule between rows: this is a record header,
   not a data table, and a line under each pair is what made the card read as dated. */
.tim-detail-list {
    display: grid;
    grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
    margin: 0;
}

/* Lets each dt/dd pair sit on one grid row while keeping the wrapper for markup sanity. */
.tim-detail-row {
    display: contents;
}

.tim-detail-list dt,
.tim-detail-list dd {
    margin: 0;
    padding: 9px 0;
    overflow-wrap: anywhere;
}

.tim-detail-list dt {
    color: var(--tim-text-2);
    font-weight: 500;
}

.tim-detail-list dd {
    color: var(--tim-text-1);
    font-weight: 500;
}

@media (max-width: 575.98px) {
    /* A 140px label column beside a wrapping address leaves the value two words wide. Stack. */
    .tim-detail-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .tim-detail-list dt {
        padding-bottom: 0;
        font-size: 12.5px;
    }

    .tim-detail-list dd {
        padding-top: 2px;
    }
}

/* ---- Rooms table columns ---------------------------------------------------
   Scoped to .tim-rooms-table, NOT to ".tim-editreport .table". EditReportHome contains no table
   of its own — every one arrives from a partial, including the six modals — so a rule written
   against the generic .table matched all of them and forced their first column to 84px/nowrap. */
.tim-editreport .tim-rooms-table > tbody > tr > td:last-child {
    text-align: right;
}

.tim-editreport .tim-item-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto !important;
    padding: 0 9px !important;
    white-space: nowrap;
}

.tim-editreport .tim-rooms-table > tbody > tr > td:last-child {
    white-space: normal;
}

.tim-editreport .tim-rooms-table .tim-room-order-col {
    width: 116px;
    white-space: nowrap;
}

.tim-editreport .tim-room-empty {
    width: auto !important;
    white-space: normal !important;
}

.tim-editreport .tim-room-empty .tim-empty,
.tim-editreport .tim-room-items-empty {
    padding: 40px 20px;
}

.tim-report-dialogs .tim-move-room-toggle,
.tim-review-dialogs .tim-move-room-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    text-align: left;
    text-decoration: none;
}

.tim-report-dialogs .tim-move-item-btn,
.tim-review-dialogs .tim-move-item-btn {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tim-text-1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tim-report-dialogs .tim-move-item-btn:hover,
.tim-report-dialogs .tim-move-item-btn:focus,
.tim-review-dialogs .tim-move-item-btn:hover,
.tim-review-dialogs .tim-move-item-btn:focus {
    background: var(--tim-blue-tint);
    color: var(--tim-blue);
}

/* ---- The report Menu ------------------------------------------------------
   The control that opens every report-level action; it used to render as a bare text link.
   Targeted by its own class rather than by "a.nav-link.dropdown-toggle", which matches the
   header user menu and any other legacy dropdown that ends up inside this wrapper. */
.tim-editreport .tim-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tim-border-control);
    border-radius: 8px;
    background: var(--tim-surface);
    color: var(--tim-text-1);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.tim-editreport .tim-menu-btn:hover,
.tim-editreport .tim-menu-btn:focus {
    background: var(--tim-hover);
    border-color: var(--tim-text-3);
    color: var(--tim-text-1);
    text-decoration: none;
}

.tim-editreport .tim-menu-btn i {
    font-size: 16px;
    color: var(--tim-text-2);
}

.tim-editreport .tim-menu-anchor {
    display: inline-flex;
}

.tim-editreport .tim-menu-group {
    margin: 5px 0 2px;
    padding: 6px 16px 4px;
    color: var(--tim-text-3);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.tim-editreport .tim-menu-group:not(:first-child) {
    border-top: 1px solid var(--tim-border);
    padding-top: 10px;
}

.tim-editreport .tim-category-jump {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.tim-editreport .tim-category-jump:hover,
.tim-editreport .tim-category-jump:focus {
    background: rgba(255, 255, 255, .12);
}

@media (max-width: 640px) {
    .tim-editreport .page-title-box {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        padding-bottom: 12px;
    }

    .tim-editreport .page-title-box .page-title {
        order: 1;
        margin: 0;
    }

    .tim-editreport .tim-breadcrumb-wrap {
        order: 2;
        float: none !important;
        display: block;
        min-width: 0;
        max-width: 100%;
    }

    .tim-editreport .tim-breadcrumb-wrap nav {
        min-width: 0;
        max-width: 100%;
    }

    .tim-editreport .tim-breadcrumb-wrap .breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    .tim-editreport .tim-breadcrumb-wrap .breadcrumb-item {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tim-editreport .tim-breadcrumb-wrap .breadcrumb-item:last-child {
        flex: 1;
    }
}

/* ---- Signature dashboard toolbar ------------------------------------------
   This listing has no smart-search field, so its Filters/Search pair sits on its own
   row above the chips rather than beside a search box as on Reports. Tighten the gap
   so the two rows read as one control block instead of two detached ones. */
.tim-toolbar + .tim-chips-row {
    margin-top: 10px;
}

/* ---- Review: the item toolbar ---------------------------------------------
   Delete Items and Add Item were bare text links sitting above the table — the destructive one
   rendered in plain red text with no boundary. Given button geometry so they read as controls,
   with Add Item as the primary action of the surface.

   Targeted by an explicit class on the toolbar. The previous selector was positional —
   ".tim-editreport .card-body > .pull-right > a" — and .card-body/.pull-right are legacy wrappers
   reused across the whole app, so it also matched the report Menu button on Edit Report and gave
   it a brand-blue fill. That control carried an inline colour:var(--tim-blue), which beat this
   rule's white, and it shipped as blue text on a blue fill: an invisible button. */
.tim-item-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 14px;
}

.tim-item-toolbar > a,
.tim-item-toolbar > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--tim-border-control);
    border-radius: 8px;
    background: var(--tim-surface);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
}

.tim-item-toolbar > a.text-danger,
.tim-item-toolbar > button.text-danger {
    color: var(--tim-danger) !important;
}

.tim-item-toolbar > a.text-danger:hover,
.tim-item-toolbar > button.text-danger:hover {
    background: var(--tim-danger-tint);
    border-color: var(--tim-danger-border);
}

.tim-item-toolbar > a:not(.text-danger),
.tim-item-toolbar > button:not(.text-danger) {
    background: var(--tim-blue);
    border-color: var(--tim-blue);
    color: #fff;
}

.tim-item-toolbar > a:not(.text-danger):hover,
.tim-item-toolbar > button:not(.text-danger):hover {
    background: var(--tim-blue-hover);
    border-color: var(--tim-blue-hover);
    color: #fff;
}

/* The item table carries seven columns inside what used to be a half-width column. It sits in
   a .table-responsive, so let that do its job rather than letting the card clip the Action
   column — which left the row's edit and delete controls half-drawn and unclickable. */
.tim-editreport .table-rep-plugin .table-responsive {
    overflow-x: auto;
}

/* Item description and comments are prose, and were centred by an inline style — every wrapped
   cell came out ragged down both edges. The cells carry rv-* classes, so they can be targeted
   without disturbing the inline widths, which the table's column sizing depends on.
   !important is required only because the competing declaration is inline. */
/* One alignment rule for the whole item table: text reads from the left, counts and controls
   centre. Header and body cell are named as a pair (rv-th-x / rv-x) so they can never drift apart
   — which is exactly what happened when the header was matched by attribute substring instead.
   !important is required only because the competing declaration is inline on every cell. */
.tim-editreport .rv-th-ref,
.tim-editreport .rv-ref,
.tim-editreport .rv-th-name,
.tim-editreport .rv-name,
.tim-editreport .rv-th-colour,
.tim-editreport .rv-colour,
.tim-editreport .rv-th-cond,
.tim-editreport .rv-cond {
    text-align: left !important;
}

.tim-editreport .rv-th-qty,
.tim-editreport .rv-qty,
.tim-editreport .rv-th-action,
.tim-editreport .rv-action,
.tim-editreport .rv-th-photos,
.tim-editreport .rv-photos {
    text-align: center !important;
}

/* word-break:break-word splits a word the moment the column is tight, so a 50px Colour column
   rendered "Stainless steel" as "Stainles s steel". Give these columns a usable minimum and
   break only when a token genuinely cannot fit. */
.tim-editreport .rv-name,
.tim-editreport .rv-cond,
.tim-editreport .rv-colour {
    word-break: normal !important;
    overflow-wrap: anywhere;
}

.tim-editreport .rv-colour {
    min-width: 96px !important;
}

/* The report Menu sits at the right edge of the details card, and its widest label ("Fitness For
   Human Habitation") is ~290px, so wherever it opens leftward it runs past the viewport and gives
   the whole page a horizontal scrollbar.

   Three things position this menu, and all three have to be answered together — getting only some
   of them is what produced the two earlier broken states:
     1. Popper writes inline `top:0; left:0` plus a `transform`. Inline beats any plain rule, so
        every property below needs !important.
     2. Cancelling ONLY the transform (an earlier attempt) leaves Popper's inline top:0/left:0, and
        the menu lands on the top-left of its anchor — covering the very button that opened it.
        `top` and `left` must be answered too.
     3. style.css sets `transform: translate3d(-150px,-201px,0)` on EVERY .dropdown-menu, so the
        transform cannot merely be left alone once Popper stops writing one.
   Bootstrap's own .dropdown-menu-right was tried first and is not sufficient: Popper still chose a
   bottom-start placement, and data-display="static" had no observable effect on this markup.
   Measured after this rule: menu right edge flush with the button, document width == viewport. */
.tim-editreport .tim-menu-btn + .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    margin-top: 6px;
    max-width: calc(100vw - 24px);
}

/* ============================================================================
   Reports index workflow

   These rules are intentionally rooted at .tim-reports-index. Signature Dashboard
   shares the generic toolbar/table vocabulary and owns its own responsive treatment.
   ========================================================================== */

.tim-reports-index .tim-filters-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tim-reports-index .tim-filters-grid > .tim-field {
    grid-column: auto;
    min-width: 0;
}

.tim-reports-index .tim-menu .tim-submenu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tim-reports-index .tim-submenu-toggle:focus-visible {
    outline: 2px solid var(--tim-blue) !important;
    outline-offset: -2px;
}

@media (max-width: 900px) {
    .tim-reports-index .tim-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tim-reports-index .tim-filters-grid > .tim-field {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .tim-reports-index .tim-toolbar {
        display: grid;
        grid-template-columns: auto minmax(104px, 1fr) auto;
        gap: 8px;
    }

    .tim-reports-index .tim-search-box {
        grid-column: 1 / -1;
        width: 100%;
    }

    .tim-reports-index .tim-toolbar > .tim-btn {
        width: 100%;
        min-height: 40px;
        justify-content: center;
    }

    .tim-reports-index .tim-toolbar > .tim-sort-control {
        width: 100%;
        min-height: 40px;
    }

    .tim-reports-index .tim-chips-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        padding: 2px 2px 8px;
        scrollbar-width: thin;
    }

    .tim-reports-index .tim-filters-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tim-reports-index .tim-filters-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .tim-reports-index .tim-filters-actions .tim-btn {
        width: 100%;
        justify-content: center;
    }

    .tim-reports-index .tim-card {
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .tim-reports-index .tim-reports-table,
    .tim-reports-index .tim-reports-table tbody {
        display: block;
        width: 100%;
    }

    .tim-reports-index .tim-reports-table thead {
        display: none;
    }

    .tim-reports-index .tim-reports-table tbody {
        display: grid;
        gap: 12px;
    }

    .tim-reports-index .tim-reports-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px 16px;
        padding: 16px;
        border: 1px solid var(--tim-border);
        border-radius: 12px;
        background: var(--tim-surface);
        box-shadow: var(--tim-shadow-card);
    }

    .tim-reports-index .tim-reports-table tbody td {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .tim-reports-index .tim-reports-table .tim-col-repno,
    .tim-reports-index .tim-reports-table .tim-col-preparedby,
    .tim-reports-index .tim-reports-table .tim-col-client {
        display: none !important;
    }

    .tim-reports-index .tim-reports-table .tim-col-property {
        grid-column: 1 / -1;
    }

    .tim-reports-index .tim-reports-table .tim-col-type {
        display: block !important;
        grid-column: 1;
    }

    .tim-reports-index .tim-reports-table .tim-col-date {
        grid-column: 2;
        text-align: right !important;
        white-space: normal;
    }

    .tim-reports-index .tim-reports-table .tim-col-type::before,
    .tim-reports-index .tim-reports-table .tim-col-date::before,
    .tim-reports-index .tim-reports-table .tim-col-action::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--tim-text-3);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .tim-reports-index .tim-reports-table .tim-col-action {
        grid-column: 1 / -1;
        text-align: left !important;
    }

    .tim-reports-index .tim-reports-table .tim-action-split {
        display: flex;
        width: 100%;
    }

    .tim-reports-index .tim-reports-table .tim-action-main {
        flex: 1;
        justify-content: center;
    }

    .tim-reports-index .tim-reports-table .tim-action-split > .dropdown:only-child,
    .tim-reports-index .tim-reports-table .tim-action-split > .dropdown:only-child > .tim-action-btn {
        width: 100%;
        justify-content: center;
    }

    .tim-reports-index .tim-table-footer {
        margin-top: 12px;
        border: 1px solid var(--tim-border);
        border-radius: 10px;
        background: var(--tim-surface);
    }
}

/* ============================================================================
   Report workflow feedback

   The report editor and Review page contain a large number of SweetAlert and
   Alertify call sites. Keeping their visual hierarchy here prevents each modal
   from choosing a different colour order while preserving the existing callback
   contracts. Warning confirmations are destructive: Cancel is the quiet first
   action and the confirming action uses the shared danger palette.
   ========================================================================== */
.swal2-popup,
.swal2-modal {
    width: min(430px, calc(100vw - 32px)) !important;
    padding: 24px !important;
    border: 1px solid var(--tim-border) !important;
    border-radius: 14px !important;
    background: var(--tim-surface) !important;
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.24) !important;
    font-family: var(--tim-font) !important;
}

.swal2-title {
    color: var(--tim-text-1) !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

.swal2-content,
.swal2-html-container {
    color: var(--tim-text-2) !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
}

.swal2-actions,
.swal2-buttonswrapper {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 22px !important;
}

.swal2-confirm,
.swal2-cancel {
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    font-family: var(--tim-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

/* SweetAlert2 v6 renders action buttons directly inside the modal. */
.swal2-modal > .swal2-confirm,
.swal2-modal > .swal2-cancel {
    margin: 22px 4px 0 !important;
}

.swal2-cancel {
    order: 1;
    border: 1px solid var(--tim-border-control) !important;
    background: var(--tim-surface) !important;
    color: var(--tim-text-1) !important;
}

.swal2-confirm {
    order: 2;
    border: 1px solid var(--tim-blue) !important;
    background: var(--tim-blue) !important;
    color: #fff !important;
}

.swal2-icon.swal2-warning ~ .swal2-actions .swal2-confirm,
.swal2-icon.swal2-warning ~ .swal2-buttonswrapper .swal2-confirm {
    border-color: var(--tim-danger) !important;
    background: var(--tim-surface) !important;
    color: var(--tim-danger) !important;
}

.swal2-modal > .swal2-icon.swal2-warning ~ .swal2-confirm {
    border-color: var(--tim-danger) !important;
    background: var(--tim-surface) !important;
    color: var(--tim-danger) !important;
}

.swal2-cancel:focus,
.swal2-confirm:focus {
    outline: 3px solid var(--tim-blue-tint) !important;
    outline-offset: 2px !important;
}

#alertify-logs,
.alertify-logs {
    width: min(380px, calc(100vw - 36px)) !important;
}

#alertify-logs.top,
.alertify-logs.top {
    top: calc(var(--tim-header-h) + 14px) !important;
}

#alertify-logs.right,
.alertify-logs.right {
    right: 18px !important;
}

#alertify-logs .alertify-log,
.alertify-logs > * {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 18px !important;
    border: 1px solid var(--tim-border) !important;
    border-radius: 7px !important;
    background: var(--tim-surface) !important;
    color: var(--tim-text-2) !important;
    box-shadow: var(--tim-shadow-card) !important;
    font-family: var(--tim-font) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    text-shadow: none !important;
}

/* Match the loader's 24px mark; status is carried by the symbol, not an accent rail.
   Older call sites include a Font Awesome cross even for success messages. */
#alertify-logs .alertify-log > .fa,
.alertify-logs > * > .fa {
    display: none !important;
}

#alertify-logs .alertify-log::before,
.alertify-logs > *::before {
    content: "";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tim-blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230056a6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 11v6M12 7v.1'/%3E%3C/svg%3E") center no-repeat;
}

#alertify-logs .alertify-log-success::before,
.alertify-logs > .success::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230056a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12 3.3 3.3L17 8.5'/%3E%3C/svg%3E");
}

#alertify-logs .alertify-log-error::before,
.alertify-logs > .error::before {
    background-color: var(--tim-danger-tint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b3261e' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17v.1'/%3E%3C/svg%3E");
}

@media (max-width: 575.98px) {
    .swal2-popup,
    .swal2-modal {
        padding: 20px !important;
    }

    #alertify-logs,
    .alertify-logs {
        width: calc(100vw - 24px) !important;
    }

    #alertify-logs.right,
    .alertify-logs.right {
        right: 12px !important;
    }

    #alertify-logs.left,
    .alertify-logs.left {
        left: 12px !important;
    }
}

@media (max-width: 700px) {
    /* The legacy shell scrolls the root element rather than body. Lock both
       while a mobile dialog is open so only the dialog body has a scrollbar. */
    html:has(> body.tim-app-shell.modal-open) {
        overflow: hidden !important;
    }
}

/* ============================================================================
   Wave 1D: viewport-safe interaction primitives

   These rules deliberately sit after the legacy bridge. They address geometry
   shared by old Bootstrap partials and refreshed screens without changing any
   controller or feature state: one dialog scroll owner, contained feedback,
   and practical touch targets at phone/tablet widths.
   ========================================================================== */

/* Many legacy dialogs carry inline overflow-y:auto on the modal root. That creates
   an outer page-like scrollbar around the intended scrolling .modal-body. Keep the
   viewport fixed and let the body be the only scroll owner. */
.tim-app-shell .modal {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.tim-app-shell .modal:not(.tim-editor-modal) .modal-dialog {
    width: calc(100% - 32px);
    margin: 16px auto;
}

.tim-app-shell .modal:not(.tim-editor-modal) .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.tim-app-shell .modal:not(.tim-editor-modal) .modal-header,
.tim-app-shell .modal:not(.tim-editor-modal) .modal-footer {
    flex: 0 0 auto;
}

.tim-app-shell .modal:not(.tim-editor-modal) .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Both create-report steps use the new compact, top-aligned 680px modal. */
#modelCreateNewReport.tim-create-report-modal .modal-dialog,
#modelAddPropDetail.tim-create-report-property-modal .modal-dialog {
    display: block;
    width: calc(100% - 32px);
    max-width: 680px;
    min-height: 0;
    margin: 140px auto 24px;
}

#modelCreateNewReport.tim-create-report-modal .modal-content,
#modelAddPropDetail.tim-create-report-property-modal .modal-content {
    max-height: calc(100vh - 164px);
    max-height: calc(100dvh - 164px);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

body:has(#modelCreateNewReport.tim-create-report-modal.show) .modal-backdrop.show,
body:has(#modelAddPropDetail.tim-create-report-property-modal.show) .modal-backdrop.show {
    background-color: #0f172a;
    opacity: .45;
}

#modelAddPropDetail.tim-create-report-property-modal .modal-content > .tim-create-report-property-form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#modelCreateNewReport.tim-create-report-modal .modal-header,
#modelAddPropDetail.tim-create-report-property-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--tim-border);
}

#modelCreateNewReport.tim-create-report-modal .tim-modal-heading,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-heading {
    min-width: 0;
    padding-right: 16px;
}

#modelCreateNewReport.tim-create-report-modal .modal-title,
#modelAddPropDetail.tim-create-report-property-modal .modal-title {
    color: var(--tim-text-1);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

#modelCreateNewReport.tim-create-report-modal .tim-modal-subtitle,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-subtitle {
    margin: 4px 0 0;
    color: var(--tim-text-3);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

#modelCreateNewReport.tim-create-report-modal .modal-header .close,
#modelAddPropDetail.tim-create-report-property-modal .modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    margin: -4px -8px 0 0;
    padding: 0;
    color: var(--tim-text-3);
    font-size: 24px;
    line-height: 1;
}

#modelCreateNewReport.tim-create-report-modal .modal-body,
#modelAddPropDetail.tim-create-report-property-modal .modal-body {
    padding: 20px 24px;
}

#modelCreateNewReport.tim-create-report-modal .modal-footer,
#modelAddPropDetail.tim-create-report-property-modal .modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--tim-surface-alt);
    border-top: 1px solid #eef0f3;
}

#modelCreateNewReport.tim-create-report-modal .modal-footer > *,
#modelAddPropDetail.tim-create-report-property-modal .modal-footer > * {
    margin: 0;
}

#modelCreateNewReport.tim-create-report-modal .tim-modal-primary,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-primary,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

#modelCreateNewReport.tim-create-report-modal .tim-modal-primary,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-primary {
    margin-left: auto;
    background: var(--tim-blue);
    border: 1px solid var(--tim-blue);
    color: #fff;
}

#modelCreateNewReport.tim-create-report-modal .tim-modal-primary:hover,
#modelCreateNewReport.tim-create-report-modal .tim-modal-primary:focus,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-primary:hover,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-primary:focus {
    background: var(--tim-blue-hover);
    border-color: var(--tim-blue-hover);
    color: #fff;
}

#modelAddPropDetail.tim-create-report-property-modal .tim-modal-secondary {
    margin-right: auto;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--tim-border-control);
    color: var(--tim-text-2);
    font-size: 14px;
}

#modelAddPropDetail.tim-create-report-property-modal .tim-modal-secondary:hover,
#modelAddPropDetail.tim-create-report-property-modal .tim-modal-secondary:focus {
    background: var(--tim-blue-tint);
    border-color: var(--tim-blue);
    color: var(--tim-blue);
}

#modelCreateNewReport.tim-create-report-modal .tim-create-report-field,
#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

#modelCreateNewReport.tim-create-report-modal .tim-create-report-field label,
#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-field label {
    margin: 0;
    color: var(--tim-text-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

#modelCreateNewReport.tim-create-report-modal .tim-create-report-field .form-control,
#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-field .form-control {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tim-border-control);
    border-radius: 8px;
    color: var(--tim-text-1);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
}

#modelCreateNewReport.tim-create-report-modal .tim-create-report-field .form-control::placeholder,
#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-field .form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}

#modelCreateNewReport.tim-create-report-modal .tim-create-report-field .form-control:focus,
#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-field .form-control:focus {
    border-color: var(--tim-blue);
    box-shadow: none;
    outline: 3px solid var(--tim-blue-tint) !important;
    outline-offset: 0;
}

#modelAddPropDetail.tim-create-report-property-modal .tim-field-help {
    margin: 0 0 18px;
    color: var(--tim-text-3);
    font-size: 13px;
}

#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-property-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 16px;
}

#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-property-form > .modal-header,
#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-property-form > .modal-footer {
    flex: 0 0 auto;
}

#modelAddPropDetail.tim-create-report-property-modal .tim-create-report-property-form > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-height: 720px) {
    #modelCreateNewReport.tim-create-report-modal .modal-dialog,
    #modelAddPropDetail.tim-create-report-property-modal .modal-dialog {
        margin-top: 16px;
    }

    #modelCreateNewReport.tim-create-report-modal .modal-content,
    #modelAddPropDetail.tim-create-report-property-modal .modal-content {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
}

.tim-report-dialogs .tim-editor-modal,
.tim-review-dialogs .tim-review-modal {
    overflow: hidden !important;
}

/* Long server messages must wrap inside the viewport. Alertify's stock animation
   positions hidden children beyond the right edge, so the fixed stack itself owns
   the safe inset and clipping. */
#alertify-logs,
.alertify-logs {
    z-index: 1090 !important;
    box-sizing: border-box;
    max-width: calc(100vw - 24px) !important;
    overflow: hidden;
    overflow-wrap: anywhere;
}

#alertify-logs.top,
.alertify-logs.top {
    top: max(calc(var(--tim-header-h) + 14px), env(safe-area-inset-top)) !important;
}

#alertify-logs.right,
.alertify-logs.right {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
}

#alertify-logs.left,
.alertify-logs.left {
    right: auto !important;
    left: max(12px, env(safe-area-inset-left)) !important;
}

#alertify-logs .alertify-log,
.alertify-logs > * {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.tim-required-marker {
    margin-left: 3px;
    color: var(--tim-danger);
    font-weight: 700;
}

.tim-inline-field-error {
    display: block;
    margin-top: 5px;
    color: var(--tim-danger);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.tim-inline-field-error[hidden] {
    display: none !important;
}

.tim-field-help {
    display: block;
    margin-top: 5px;
    color: var(--tim-text-3);
    font-size: 12px;
    line-height: 1.4;
}

.tim-app-shell [aria-invalid="true"] {
    border-color: var(--tim-danger) !important;
    box-shadow: 0 0 0 3px var(--tim-danger-tint) !important;
}

.tim-dictionary-empty {
    display: block;
    min-width: 220px;
    padding: 10px 12px;
    color: var(--tim-text-2);
    font-size: 12.5px;
    line-height: 1.45;
    white-space: normal;
}

.tim-photo-card-legacy,
.rv-photo-card {
    position: relative;
    width: min(100%, 400px);
    margin: 0 auto 12px;
    padding: 8px;
    border: 1px solid var(--tim-border);
    border-radius: 10px;
    background: var(--tim-surface);
}

.tim-photo-card-legacy__select,
.rv-photo-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 44px;
    margin: 0 0 7px;
    color: var(--tim-text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tim-photo-card-legacy__select input,
.rv-photo-check input {
    width: 20px;
    height: 20px;
    margin: 0;
}

.tim-photo-card-legacy__preview,
.rv-photo-open {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: var(--tim-hover);
    cursor: pointer;
}

.tim-photo-card-legacy__preview img,
.rv-photo-open img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

.tim-photo-card-legacy__preview:focus-visible,
.tim-photo-card-legacy__select:focus-within,
.rv-photo-open:focus-visible,
.rv-photo-check:focus-within {
    outline: 3px solid var(--tim-blue);
    outline-offset: 3px;
}

.tim-photo-empty,
.rv-inline-empty {
    margin: 6px 0;
    padding: 18px;
    border: 1px dashed var(--tim-border-control);
    border-radius: 10px;
    background: var(--tim-bg);
    color: var(--tim-text-2);
    text-align: center;
}

.rv-inline-error {
    border-color: var(--tim-danger);
    background: var(--tim-danger-tint);
    color: var(--tim-text-1);
}

.tim-editreport .order:disabled,
.tim-editreport .order[aria-disabled="true"] {
    background: transparent;
    color: var(--tim-text-3);
    cursor: not-allowed;
    opacity: .45;
}

@media (max-width: 640px) {
    #modelAddPropDetail.tim-create-report-property-modal .tim-create-report-property-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #modelCreateNewReport.tim-create-report-modal .modal-header,
    #modelAddPropDetail.tim-create-report-property-modal .modal-header,
    #modelCreateNewReport.tim-create-report-modal .modal-body,
    #modelAddPropDetail.tim-create-report-property-modal .modal-body,
    #modelCreateNewReport.tim-create-report-modal .modal-footer,
    #modelAddPropDetail.tim-create-report-property-modal .modal-footer {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (pointer: coarse), (max-width: 760px) {
    .tim-action-btn,
    .tim-pg-btn,
    .tim-density-btn,
    .tim-chip-x,
    .tim-editreport .order,
    .tim-editreport .btn.btn-sm.btn-Edit,
    .tim-editreport .btn.btn-sm.btn-danger,
    .tim-editreport .btn.btn-sm.btn-Summury,
    .tim-review-dialogs .btn,
    .tim-report-dialogs .btn,
    .tim-report-dialogs .tim-editor-modal .modal-header .close,
    .tim-report-dialogs .tim-editor-modal .panel-heading .close,
    .tim-review-dialogs .tim-review-modal .modal-header .close {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
    }

    /* A Bootstrap Toggle's handle is a span.btn drawn inside the switch, not a control of its own:
       the whole .toggle.btn above is the 44px tap target. Floored to 44px wide it covered the end of
       the active label ("Yes") in the Review and editor photo dialogs, so it keeps the plugin's size. */
    .tim-review-dialogs .btn.toggle-handle,
    .tim-report-dialogs .btn.toggle-handle {
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    .tim-action-split .tim-action-caret {
        min-width: 44px;
        padding-right: 12px;
        padding-left: 12px;
    }

    .tim-editreport .tim-room-order {
        gap: 8px;
    }

    .tim-app-shell .modal:not(.tim-editor-modal) .modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }

    .tim-app-shell .modal:not(.tim-editor-modal) .modal-content {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    #modelCreateNewReport.tim-create-report-modal .modal-dialog,
    #modelAddPropDetail.tim-create-report-property-modal .modal-dialog {
        width: calc(100% - 16px);
        margin: 8px auto;
    }

    #modelCreateNewReport.tim-create-report-modal .modal-content,
    #modelAddPropDetail.tim-create-report-property-modal .modal-content {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .tim-app-shell .modal:not(.tim-editor-modal) .modal-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .tim-app-shell .modal:not(.tim-editor-modal) .modal-footer .btn,
    .tim-app-shell .modal:not(.tim-editor-modal) .modal-footer .tim-btn {
        min-height: 44px;
        margin: 0;
    }

    #modelCreateNewReport.tim-create-report-modal .tim-modal-primary,
    #modelAddPropDetail.tim-create-report-property-modal .tim-modal-primary,
    #modelAddPropDetail.tim-create-report-property-modal .tim-modal-secondary {
        min-height: 44px;
        height: 44px;
    }

    .tim-photo-card-legacy__select,
    .tim-photo-card-legacy__preview {
        min-height: 44px;
    }
}

/* Context-preserving collection tables and controls. */
.tim-collection-add,
.tim-sme-select-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--tim-blue);
    border-radius: 8px;
    background: var(--tim-blue);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.tim-collection-add {
    min-height: 44px;
}

/* Standalone portable-appliance actions fit their visible Edit/View labels and retain a 44px target. */
.tim-context-table .tim-portable-edit {
    width: auto;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.tim-sme-select-button {
    min-width: 44px;
    min-height: 44px;
}

.tim-collection-add:hover,
.tim-collection-add:focus,
.tim-sme-select-button:hover,
.tim-sme-select-button:focus {
    border-color: var(--tim-blue-hover);
    background: var(--tim-blue-hover);
    color: #fff;
}

.tim-collection-add:focus-visible,
.tim-sme-select-button:focus-visible {
    outline: 3px solid var(--tim-blue);
    outline-offset: 3px;
}

.tim-sme-select-button[aria-pressed="true"] {
    border-color: #fff;
    background: #fff;
    color: var(--tim-blue-dark);
}

/* Selection is a real table column. Legacy .firstTh is deliberately hidden on desktop by style.css,
   so SME actions must never reuse it. The explicit header keeps the column understandable visually
   and to assistive technology. */
.tim-context-table > thead > tr > th.tim-sme-selection-heading,
.tim-context-table > tbody > tr > td.tim-sme-selection-cell {
    display: table-cell !important;
    width: 1%;
    min-width: 92px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* A responsive td is itself a two-column grid. Keep related actions in one grid item so Edit/Delete
   remain adjacent instead of auto-flowing into separate stretched tracks. */
.tim-context-table .tim-context-actions {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
    width: max-content !important;
    max-width: 100%;
}

/* Row actions in these tables are now a single split button, which brings its own geometry and
   already sits inside the coarse-pointer 44px floor below. */
.tim-context-table .tim-context-actions > .tim-action-split {
    flex: 0 0 auto;
}

.tim-context-table .tim-context-actions > .btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
}

.tim-collection-empty {
    padding: 18px !important;
    color: var(--tim-text-2);
    background: var(--tim-bg) !important;
    text-align: center !important;
}

.tim-app-shell .modal.tim-customise-dialog .modal-content {
    display: flex;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.tim-customise-dialog .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.tim-customise-dialog .modal-content > form > .modal-body {
    flex: 1 1 auto;
}

.tim-customise-dialog .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tim-customise-dialog .tim-customise-scroll-content,
.tim-customise-dialog #CompanyLogoResult {
    max-height: none !important;
    overflow: visible !important;
}

@media only screen and (max-width: 1024px) {
    table.tim-context-table {
        display: block;
        width: 100%;
    }

    table.tim-context-table > tbody {
        display: block;
        width: 100%;
    }

    table.tim-context-table > tbody > tr {
        display: block;
        margin: 0 0 12px;
        padding: 12px 14px;
        border: 1px solid var(--tim-border);
        border-radius: 10px;
        background: var(--tim-surface);
    }

    table.tim-context-table > tbody > tr > td {
        display: grid !important;
        grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        width: auto !important;
        min-width: 0 !important;
        padding: 7px 0 !important;
        border: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere;
    }

    table.tim-context-table > tbody > tr > td[data-th]::before {
        display: block !important;
        content: attr(data-th) !important;
        color: var(--tim-text-3);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        text-transform: none;
    }

    table.tim-context-table > tbody > tr > td.tim-sme-selection-cell {
        display: grid !important;
        width: auto;
        min-width: 0;
        text-align: left;
        white-space: normal;
    }

    .tim-context-table .tim-context-actions {
        justify-content: flex-start;
    }

    .tim-context-table .tim-context-actions > .btn {
        min-width: 44px;
        min-height: 44px;
    }

    table.tim-context-table > tbody > tr > td.tim-collection-empty,
    table.tim-context-table > tbody > tr > td.tim-context-table-detail {
        display: block !important;
    }

    table.tim-context-table > tbody > tr > td.tim-collection-empty::before,
    table.tim-context-table > tbody > tr > td.tim-context-table-detail::before {
        content: none !important;
    }

    .tim-context-table .btn.btn-sm,
    .tim-context-table .tim-sme-select-button,
    .tim-collection-add {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    table.tim-context-table > tbody > tr > td {
        grid-template-columns: minmax(92px, 36%) minmax(0, 1fr);
    }
}

/* ============================================================================
   Final surface sweep

   A small set of report-list and public-portal dialogs are returned as Ajax
   fragments, so they cannot rely on a page-specific wrapper being present.
   Give those fragments one shared visual contract and cover the framework
   overlays (confirmations, hints and pickers) that live outside Razor markup.
   ========================================================================== */

.tim-workflow-dialog,
.tim-portal-dialog {
    overflow-y: auto;
}

.tim-workflow-dialog .modal-dialog,
.tim-portal-dialog .modal-dialog {
    width: calc(100% - 32px);
    margin-right: auto;
    margin-left: auto;
}

.tim-workflow-dialog .modal-content,
.tim-portal-dialog .modal-content {
    display: flex;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.tim-workflow-dialog .modal-header,
.tim-portal-dialog .modal-header {
    display: flex !important;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.tim-workflow-dialog .modal-header .close,
.tim-portal-dialog .modal-header .close {
    position: static !important;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -7px -8px -7px 0;
    padding: 0;
}

.tim-workflow-dialog .modal-body,
.tim-portal-dialog .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tim-dialog-heading {
    min-width: 0;
}

.tim-workflow-dialog .modal-title,
.tim-portal-dialog .modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    font-size: 17px;
}

.tim-workflow-dialog .modal-title > i,
.tim-portal-dialog .modal-title > i {
    color: var(--tim-blue);
}

.tim-dialog-subtitle {
    margin: 3px 0 0;
    color: var(--tim-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

.tim-message-dialog .modal-dialog {
    max-width: 700px;
}

.tim-sme-dialog .modal-dialog {
    max-width: 900px;
}

.tim-signature-data-dialog .modal-dialog {
    max-width: 950px;
}

.tim-workflow-dialog .modal-body > .tab-content > .col-sm-12,
.tim-workflow-dialog .tab-pane > .col-sm-12,
.tim-workflow-dialog .tab-pane .signatureForm,
.tim-workflow-dialog .modal-body .form-group.row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}

.tim-message-dialog .modal-body .form-group.row {
    display: block;
    margin-bottom: 18px;
}

.tim-message-dialog .modal-body .form-group.row > label,
.tim-message-dialog .modal-body .form-group > label {
    display: block;
    margin-bottom: 6px;
    color: var(--tim-text-1);
    font-size: 13px;
    font-weight: 600;
}

.tim-message-dialog .form-control {
    width: 100%;
    min-height: 40px;
}

.tim-dialog-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.tim-dialog-check label,
.tim-message-dialog .form-group.row > div > label {
    margin: 0;
    color: var(--tim-text-1);
    font-size: 13px;
    font-weight: 500;
}

.tim-dialog-tabs.nav-tabs {
    margin: -4px 0 8px;
}

.tim-dialog-tabs.nav-tabs .nav-link {
    min-height: 42px;
}

.tim-dialog-inline-action {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 14px;
}

.tim-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.tim-dialog-summary {
    display: grid;
    grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-control);
    background: var(--tim-surface-alt);
}

.tim-dialog-summary-item {
    min-width: 0;
    overflow-wrap: anywhere;
}

.tim-dialog-summary-item .form-label {
    display: block;
    margin-bottom: 2px;
    color: var(--tim-text-3);
    font-size: 11.5px;
    font-weight: 600;
}

.tim-dialog-section {
    padding: 16px;
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-card);
    background: var(--tim-surface);
}

.tim-dialog-section-title {
    margin: 0 0 12px;
    color: var(--tim-text-1);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.tim-dialog-table-scroll,
.tim-sme-dialog .table-rep-plugin,
.tim-sme-lookup-dialog .table-rep-plugin {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.tim-dialog-table-scroll {
    max-height: 250px;
    padding: 0;
}

.tim-dialog-table-scroll .signaturetable {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.tim-dialog-table-scroll .signaturetable thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tim-surface-alt);
}

.tim-dialog-table-scroll .signaturetable th {
    padding: 10px 12px;
    border-bottom: 1px solid var(--tim-border-control);
    color: var(--tim-text-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.tim-signature-data-dialog .modal-body > .row {
    row-gap: 16px;
}

.tim-signature-card {
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-card);
    background: var(--tim-surface);
}

.tim-signature-card-header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--tim-border);
    background: var(--tim-surface-alt);
}

.tim-signature-card-header .panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    color: var(--tim-text-1);
    font-size: 14px;
    font-weight: 600;
}

.tim-signature-card-action {
    float: none !important;
    flex: 0 0 auto;
}

.tim-signature-card-action > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--tim-border-control);
    border-radius: var(--tim-radius-control);
    background: var(--tim-surface);
    color: var(--tim-blue);
}

.tim-signature-card-body {
    min-height: 164px;
    padding: 16px;
    background: var(--tim-surface);
}

.tim-signature-preview img {
    display: block;
    width: 100% !important;
    max-width: 320px;
    height: 110px !important;
    object-fit: contain;
    border: 1px solid var(--tim-border);
    border-radius: 8px;
    background: #fff;
}

.tim-signature-name {
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 7px;
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
}

.tim-portal-dialog .modal-dialog {
    max-width: 720px;
}

.tim-portal-dialog textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.tim-portal-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

.tim-portal-dialog-footer--split {
    justify-content: space-between;
}

.tim-portal-comment-photos {
    margin: 8px 0 0;
}

.tim-portal-comment-photo-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
    max-height: 300px;
    margin: 4px 0;
    overflow: auto;
}

/* A preview is a grid item, so it takes the width of its column. Sizing the thumbnail
   to that cell instead of a fixed 180px keeps it from being painted over its neighbour,
   and keeps the remove button on the corner of the photo it removes. */
.tim-portal-comment-photo {
    position: relative;
    min-width: 0;
}

.tim-portal-comment-photo-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: scale-down;
}

.tim-portal-comment-photo-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
}

.tim-portal-btn--danger {
    border-color: var(--tim-danger);
    background: var(--tim-surface);
    color: var(--tim-danger);
}

.tim-portal-btn--danger:hover,
.tim-portal-btn--danger:focus {
    border-color: var(--tim-danger-hover);
    background: var(--tim-danger-tint);
    color: var(--tim-danger-hover);
}

.tim-portal-item-title {
    font-weight: 600;
}

.tim-portal-item-subtext {
    display: block;
    margin-top: 2px;
    color: var(--tim-text-3);
    font-size: 12px;
    font-weight: 400;
}

.tim-portal-table--emphasis {
    border: 1px solid var(--tim-border-control) !important;
}

.tim-signature-method-label {
    font-size: inherit;
}

.tim-modal-footer-borderless {
    border-top: 0;
}

.tim-panel-note-inline {
    display: inline;
    font-weight: 400;
}

.tim-form-footer-borderless {
    padding-top: 0;
    border-top: 0;
}

.tim-table-footer-embedded {
    padding: 12px 0;
    border-top: 0;
    border-radius: 0;
}

.tim-dialog-question {
    margin-bottom: 0;
    color: var(--tim-text-1);
    font-weight: 600;
}

.tim-diagnostic-detail {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--tim-danger-border-soft);
    border-radius: 7px;
    background: var(--tim-danger-tint);
    color: var(--tim-danger-ink);
    font-size: 11px;
    white-space: pre-wrap;
}

.tim-sme-lookup-dialog .modal-dialog {
    width: min(1080px, calc(100% - 32px));
    max-width: none !important;
}

.tim-sme-dialog .panel,
.tim-sme-lookup-dialog .panel {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.tim-sme-dialog .card-body,
.tim-sme-lookup-dialog .card-body {
    padding: 0;
}

.tim-dictionary-heading {
    margin: 0 0 4px !important;
    padding: 7px 10px !important;
    border-radius: 6px;
    background: var(--tim-blue-tint) !important;
    color: var(--tim-blue-dark) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
    cursor: default;
}

.tim-move-destinations {
    display: grid;
    gap: 10px;
}

.tim-move-destination-title {
    margin: 0;
    color: var(--tim-text-1);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

.tim-move-destination-group {
    margin-top: 4px;
}

.tim-move-section-title {
    margin: 0;
    padding: 8px 10px;
    border-radius: 7px;
    background: var(--tim-blue-tint);
    color: var(--tim-blue-dark);
    font-size: 12px;
    font-weight: 700;
}

.tim-move-type-title {
    padding: 2px 10px 0;
    color: var(--tim-text-3);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.tim-move-item-list {
    display: grid;
    gap: 4px;
    padding: 0 4px 4px;
}

/* Alertify builds confirmation markup at runtime, outside the page component tree. */
.alertify {
    z-index: 1100 !important;
    background: rgba(16, 24, 40, .48) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.alertify .dialog {
    padding: 16px !important;
}

.alertify .dialog > div,
.alertify .alert > div {
    width: min(430px, calc(100vw - 32px)) !important;
    padding: 22px !important;
    border: 1px solid var(--tim-border) !important;
    border-radius: 14px !important;
    background: var(--tim-surface) !important;
    box-shadow: 0 24px 64px rgba(16, 24, 40, .24) !important;
    color: var(--tim-text-1) !important;
    font-family: var(--tim-font) !important;
    text-align: left !important;
}

.alertify .dialog .msg,
.alertify .alert .msg {
    margin: 0 0 20px !important;
    padding: 0 !important;
    color: var(--tim-text-2);
    font-size: 14px;
    line-height: 1.5;
}

.alertify .dialog nav,
.alertify .alert nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.alertify .dialog nav button,
.alertify .alert nav button {
    min-width: 88px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: var(--tim-radius-control) !important;
    font-family: var(--tim-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

.alertify .dialog nav .cancel,
.alertify .alert nav .cancel {
    border: 1px solid var(--tim-border-control) !important;
    background: var(--tim-surface) !important;
    color: var(--tim-text-1) !important;
}

.alertify .dialog nav .ok,
.alertify .alert nav .ok {
    border: 1px solid var(--tim-danger) !important;
    background: var(--tim-surface) !important;
    color: var(--tim-danger) !important;
}

.alertify .dialog nav .ok:hover,
.alertify .dialog nav .ok:focus,
.alertify .alert nav .ok:hover,
.alertify .alert nav .ok:focus {
    background: var(--tim-danger-tint) !important;
    color: var(--tim-danger-hover) !important;
}

/* Bootstrap and jQuery plugins append these surfaces directly to body. */
.tooltip {
    font-family: var(--tim-font);
}

.tooltip-inner {
    max-width: 260px;
    padding: 6px 9px;
    border-radius: 6px;
    background: #253342;
    font-size: 12px;
    line-height: 1.35;
}

.bs-tooltip-top .arrow::before { border-top-color: #253342; }
.bs-tooltip-right .arrow::before { border-right-color: #253342; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: #253342; }
.bs-tooltip-left .arrow::before { border-left-color: #253342; }

.popover {
    border: 1px solid var(--tim-border);
    border-radius: 10px;
    box-shadow: var(--tim-shadow-menu);
    font-family: var(--tim-font);
}

.popover-header {
    border-bottom-color: var(--tim-border);
    border-radius: 10px 10px 0 0;
    background: var(--tim-surface-alt);
    color: var(--tim-text-1);
    font-size: 13px;
    font-weight: 600;
}

.popover-body {
    color: var(--tim-text-2);
    font-size: 12.5px;
    line-height: 1.45;
}

.datepicker-dropdown,
.colorpicker.dropdown-menu {
    padding: 8px;
    border: 1px solid var(--tim-border);
    border-radius: 10px;
    background: var(--tim-surface);
    box-shadow: var(--tim-shadow-menu);
    font-family: var(--tim-font);
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: 6px;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--tim-blue) !important;
    color: #fff !important;
}

.mfp-bg {
    background: #101820;
    opacity: .82;
}

.mfp-figure::after {
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.mfp-close {
    width: 44px;
    height: 44px;
    color: #fff;
}

@media (max-width: 640px) {
    .tim-workflow-dialog .modal-dialog,
    .tim-portal-dialog .modal-dialog,
    .tim-sme-lookup-dialog .modal-dialog {
        width: calc(100% - 20px);
    }

    .tim-workflow-dialog .modal-content,
    .tim-portal-dialog .modal-content {
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .tim-workflow-dialog .modal-header,
    .tim-portal-dialog .modal-header,
    .tim-workflow-dialog .modal-body,
    .tim-portal-dialog .modal-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .tim-dialog-summary {
        grid-template-columns: 1fr;
    }

    .tim-dialog-footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tim-dialog-footer .btn,
    .tim-dialog-footer .tim-btn,
    .tim-dialog-footer .tim-portal-btn {
        width: 100%;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .tim-signature-data-dialog .modal-body > .row > [class*="col-"] + [class*="col-"] {
        margin-top: 16px;
    }
}

/* Shared SME lookup and integration fragments loaded into several dialogs. */
.tim-sme-lookup-surface {
    padding: 0;
}

.tim-sme-lookup-surface .panel {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.tim-sme-search-grid {
    display: grid;
    grid-template-columns: minmax(7rem, .7fr) repeat(4, minmax(8rem, 1fr)) auto;
    gap: .75rem;
    align-items: end;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-card);
    background: var(--tim-surface-alt);
}

.tim-sme-search-field,
.tim-sme-search-actions {
    min-width: 0;
}

.tim-sme-search-field .form-control {
    width: 100%;
    max-width: none !important;
}

.tim-sme-search-actions .btn {
    min-height: 2.55rem;
}

.tim-sme-id-heading {
    width: 6.5rem;
}

.tim-sme-dialog-content {
    position: relative;
}

.tim-sme-property-results {
    display: flex;
}

.tim-loading-dialog .modal-dialog {
    max-width: 25rem;
}

.tim-loading-dialog .modal-content {
    text-align: center;
}

.tim-sme-integration-card {
    padding: 1rem;
    border: 1px solid var(--tim-border);
    border-radius: var(--tim-radius-card);
    background: var(--tim-surface-alt);
}

.tim-sme-integration-row {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}

.tim-sme-connection-status {
    margin: 0;
}

.tim-sme-integration .sme-save-btn {
    min-width: 9.375rem;
    margin-left: auto;
}

.tim-template-actions {
    margin-right: .625rem;
}

.tim-template-select {
    min-height: 2.55rem;
}

@media (max-width: 900px) {
    .tim-sme-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tim-sme-search-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 490px) {
    .tim-sme-search-grid {
        grid-template-columns: 1fr;
    }

    .tim-sme-search-actions {
        grid-column: auto;
    }

    .tim-sme-integration .sme-save-btn,
    .tim-sme-integration .sme-disconnect {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

/* Nested dialogs present one active surface; the shell restores inert/focus on close. */
.modal.show[inert] > .modal-dialog { visibility: hidden; }
.tim-login-card-signin:not(.tim-signup-card) .tim-field-error:empty { display: none; }
.tim-login-password-field .tim-login-row { margin-top: 0; }
.tim-login-password-field .tim-login-link { align-items: flex-start; padding-top: 6px; }
.tim-login-card-signin:not(.tim-signup-card) .tim-login-btn { margin-top: 4px; }
.tim-date-value { min-width: 0; }
.tim-date-value > span { white-space: nowrap; }
.tim-dictionary-menu {
    width: 300px; min-width: 220px; max-width: calc(100vw - 40px);
    max-height: min(360px, 50dvh); overflow-y: auto; overflow-x: hidden;
}
.tim-dictionary-menu .dropdown-item { white-space: normal; overflow-wrap: break-word; word-break: normal; }

/* The popover stays inside its form in the DOM but paints above overflow clips.
   Override Popper's inline transform and the browser's centred popover defaults. */
.dropdown-menu.tim-floating-dictionary {
    position: fixed !important;
    width: 320px !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

.tim-floating-dictionary::backdrop { background: transparent; pointer-events: none; }

/* Record forms share one geometry without changing dense filters and list controls.
   The explicit form/field scope outranks legacy editor rules even when those assets
   load later. A group is a fieldset with a visible legend, not a decorative card. */
.tim-record-form.tim-editor-form {
    display: grid;
    gap: var(--tim-form-group-gap);
    min-width: 0;
    padding: 0;
}

.tim-record-form.tim-editor-form .tim-form-section {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tim-record-form.tim-editor-form .tim-form-section > .tim-form-section-title {
    float: none;
    width: 100%;
    margin: 0 0 var(--tim-form-field-gap);
    padding: 0;
    color: var(--tim-text-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
}

.tim-record-form.tim-editor-form .tim-form-section .tim-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tim-form-field-gap);
    align-items: start;
}

.tim-record-form.tim-editor-form .tim-form-section .tim-form-grid--sections {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    align-items: start;
}

.tim-record-form.tim-editor-form .tim-form-section .tim-form-field {
    min-width: 0;
    margin: 0;
    padding: 0;
}

.tim-record-form.tim-editor-form .tim-form-field--full {
    grid-column: 1 / -1;
}

/* A shared label track keeps paired inputs aligned when a dictionary name or
   field label wraps. Older browsers retain the usable two-column/stacked grid.
   Keep controls and their feedback together so validation cannot move a peer's
   input away from its label. Native choice fieldsets remain full-width groups. */
@supports (grid-template-rows: subgrid) {
    .tim-record-form.tim-editor-form .tim-form-field:has(> .tim-form-control-group) {
        grid-row: span 2;
        align-self: stretch;
    }

    .tim-record-form.tim-editor-form div.tim-form-field:has(> .tim-form-control-group) {
        display: grid;
        grid-template-rows: subgrid;
        row-gap: var(--tim-form-label-gap);
    }

    .tim-record-form.tim-editor-form div.tim-form-field:has(> .tim-form-control-group) > .tim-field-label-row {
        margin-bottom: 0;
    }
}

.tim-record-form.tim-editor-form .tim-form-control-group {
    min-width: 0;
}

.tim-record-form.tim-editor-form .tim-form-field > label,
.tim-record-form.tim-editor-form .tim-form-field > .tim-field-label-row {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
    margin: 0 0 var(--tim-form-label-gap);
    padding: 0;
    color: var(--tim-text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.tim-record-form.tim-editor-form .tim-form-field .tim-field-label-row > label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--tim-text-2);
    font-size: 13px;
    font-weight: 600;
}

/* Let longer labels wrap beside a single dictionary instead of pushing it below the label. */
.tim-record-form.tim-editor-form .tim-form-field > .tim-field-label-row:has(> .btn-group) > label {
    flex-basis: 0;
}

.tim-record-form.tim-editor-form .tim-field-label-row > span.label {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tim-text-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.tim-record-form.tim-editor-form .tim-form-field .form-control {
    width: 100%;
    min-width: 0;
    min-height: var(--tim-form-control-height);
    height: var(--tim-form-control-height);
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--tim-border-control);
    border-radius: var(--tim-radius-control);
    background-color: var(--tim-surface);
    color: var(--tim-text-1);
    font-family: var(--tim-font);
    font-size: 15px;
    line-height: 1.5;
}

.tim-record-form.tim-editor-form .tim-form-field select.form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: normal;
}

.tim-record-form.tim-editor-form .tim-form-field textarea.form-control {
    min-height: 88px;
    height: auto;
    padding: 12px 14px;
    resize: vertical;
}

.tim-record-form.tim-editor-form .tim-form-field .form-control:focus {
    border-color: var(--tim-blue);
    /* Override the shell's solid fallback ring and the legacy outline reset.
       One blue control border plus one tint ring remains visible for typing. */
    outline: 3px solid var(--tim-blue-tint) !important;
    outline-offset: 0;
    box-shadow: none;
}

.tim-record-form.tim-editor-form .tim-form-field .form-control:disabled,
.tim-record-form.tim-editor-form .tim-form-field .form-control[readonly] {
    background-color: var(--tim-surface-alt);
    color: var(--tim-text-2);
    opacity: 1;
}

.tim-record-form.tim-editor-form .tim-form-field .form-control:disabled {
    cursor: not-allowed;
}

.tim-record-form.tim-editor-form .tim-form-field .form-control:is([aria-invalid="true"], .is-invalid, .input-validation-error) {
    border-color: var(--tim-danger);
}

.tim-record-form.tim-editor-form .tim-form-field .form-control:is([aria-invalid="true"], .is-invalid, .input-validation-error):focus {
    outline-color: var(--tim-danger-tint) !important;
}

.tim-record-form.tim-editor-form .tim-form-field .tim-phrase-button {
    min-height: 32px;
    border-color: var(--tim-border-control);
    color: var(--tim-blue);
    font-family: var(--tim-font);
    font-size: 13px;
    line-height: 1.3;
}

.tim-record-form.tim-editor-form .tim-form-field .tim-phrase-button:focus-visible {
    outline: 2px solid var(--tim-blue);
    outline-offset: 2px;
}

.tim-record-form.tim-editor-form .tim-form-field .tim-phrase-button:disabled {
    background: var(--tim-surface-alt);
    color: var(--tim-text-3);
    cursor: not-allowed;
}

/* The shared Fixflo form uses a label-row dictionary in both report hosts. */
.tim-app-shell .rv-issue-panel .rv-modal-subtitle {
    margin: 6px 0 0;
    color: var(--tim-text-3);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.tim-app-shell .rv-issue-panel .tim-record-form .tim-field-label-row .rv-dictionary-trigger {
    position: static;
    inset: auto;
    z-index: auto;
    min-width: 0;
    min-height: 44px !important;
    height: auto;
    padding: 0 12px;
    border: 1px solid var(--tim-border-control);
    border-radius: 8px;
    background: var(--tim-surface);
}

.tim-record-form.tim-editor-form .tim-form-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.tim-record-form.tim-editor-form .tim-form-options .container {
    width: auto;
    max-width: 100%;
    min-height: var(--tim-form-control-height);
    margin: 0;
}

.tim-record-form.tim-editor-form .tim-form-photo-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}

.tim-record-form.tim-editor-form .tim-form-photo-row .tim-field-help {
    flex: 1 1 200px;
    margin: 0;
}

.tim-record-form.tim-editor-form .tim-form-photo-row .tim-btn,
.tim-app-shell .modal-footer .tim-btn,
.tim-app-shell .modal-footer .btn {
    min-height: var(--tim-form-control-height);
}

@media (max-width: 600px) {
    .tim-record-form.tim-editor-form .tim-form-section .tim-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px), (pointer: coarse) {
    .tim-record-form.tim-editor-form .tim-form-field > label,
    .tim-record-form.tim-editor-form .tim-form-field > .tim-field-label-row,
    .tim-record-form.tim-editor-form .tim-form-field .tim-phrase-button {
        min-height: var(--tim-form-control-height);
    }
}

/* Paired desktop fields reserve equal label rows. Once stacked, only a real
   dictionary control needs that touch-height space above its field. */
@media (max-width: 600px) {
    .tim-record-form.tim-editor-form .tim-form-field > label,
    .tim-record-form.tim-editor-form .tim-form-field > .tim-field-label-row:not(:has(.tim-phrase-button)) {
        min-height: 20px;
    }
}

/* Creation and recipient workflows keep their own steps with the shared form rhythm. */
.tim-create-report-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.tim-create-report-group + .tim-create-report-group { margin-top: var(--tim-form-group-gap); }
.tim-create-report-group > legend {
    width: auto;
    margin: 0 0 var(--tim-form-field-gap);
    padding: 0;
    color: var(--tim-text-1);
    font-size: 16px;
    font-weight: 600;
}
.tim-app-shell .tim-workflow-dialog .modal-header { padding: 20px 24px; }
.tim-app-shell .tim-workflow-dialog .modal-body { padding: 24px; }
.tim-app-shell .tim-workflow-dialog .modal-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.tim-app-shell .tim-workflow-dialog .modal-header .close {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}
.tim-app-shell .tim-workflow-dialog .modal-content > .modal-footer {
    flex: 0 0 auto;
    padding: 16px 24px;
    background: var(--tim-surface-alt);
}
.tim-app-shell .tim-message-dialog .modal-body .form-group.row { margin-bottom: 16px; }
.tim-app-shell .tim-message-dialog .modal-body .form-group > label { margin-bottom: 8px; }
.tim-app-shell .tim-message-dialog .form-control,
.tim-sme-search-field .form-control {
    height: var(--tim-form-control-height);
    min-height: var(--tim-form-control-height);
    font-size: 15px;
}
.tim-app-shell .tim-message-dialog .form-control:focus,
.tim-sme-search-field .form-control:focus {
    border-color: var(--tim-blue);
    box-shadow: none;
    outline: 3px solid var(--tim-blue-tint) !important;
    outline-offset: 0;
}
.tim-dialog-tabs.nav-tabs .nav-link,
.tim-dialog-inline-action .btn,
.tim-sme-search-actions .btn { min-height: 44px; }
.tim-sme-search-field .tim-sme-search-label {
    display: flex;
    align-items: flex-end;
    min-height: 36px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}
@media (max-width: 600px) {
    .tim-app-shell .tim-workflow-dialog .modal-header,
    .tim-app-shell .tim-workflow-dialog .modal-body,
    .tim-app-shell .tim-workflow-dialog .modal-content > .modal-footer { padding: 16px; }
}
@media (max-width: 490px) {
    .tim-sme-search-field .tim-sme-search-label { min-height: 0; }
}

.tim-sme-confirm {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
}