/*
 * Custom RAL status colours for Service / WorkQueue status enum labels.
 * EspoCRM 9.0.4 enum fields only support named styles, so the entityDefs
 * status "style" map points each status value at a unique custom style name
 * (ralPlanned, ralInProgress, ...). These rules apply the exact RAL hex.
 * Injected app-wide via custom metadata app.client.cssList.
 */

/*
 * One colour per Service status, the same in the Stav label, the Plán práce tiles (week, day,
 * month), the Roční přehled rows and the legend (Task 37664, call 7. 10. 2026):
 *   Naplánováno blue · Probíhá yellow · Dokončeno / předáno ke kontrole orange ·
 *   K fakturaci purple (also "čeká na další výjezd") · Uzavřeno / vyfakturováno green · Zrušeno red.
 * An invoiced order counts as green even before it is closed; schedule.js cardStatusClass()
 * maps it to "closed". Before, the label, the tile and the overview each had their own scheme
 * and an invoiced order showed red.
 */
.label-ralPlanned           { background-color: #007cb0 !important; color: #fff !important; border-color: #007cb0 !important; }
.label-ralInProgress        { background-color: #ffd600 !important; color: #2b2100 !important; border-color: #ffd600 !important; }
.label-ralCompleted         { background-color: #ff8000 !important; color: #2b1600 !important; border-color: #ff8000 !important; }
.label-ralReadyForInvoicing { background-color: #6c4675 !important; color: #fff !important; border-color: #6c4675 !important; }
.label-ralNextTrip          { background-color: #6c4675 !important; color: #fff !important; border-color: #6c4675 !important; }
.label-ralClosed            { background-color: #57a639 !important; color: #fff !important; border-color: #57a639 !important; }
.label-ralCancelled         { background-color: #b0001e !important; color: #fff !important; border-color: #b0001e !important; }

.work-queue-service-card.status-planned,           .work-queue-month-card.status-planned           { background: rgba(0,124,176,.10);  border-left: 4px solid #007cb0; }
.work-queue-service-card.status-inprogress,        .work-queue-month-card.status-inprogress        { background: rgba(255,214,0,.20);  border-left: 4px solid #ffd600; }
.work-queue-service-card.status-completed,         .work-queue-month-card.status-completed,
.work-queue-service-card.status-customerapproved,  .work-queue-month-card.status-customerapproved  { background: rgba(255,128,0,.14);   border-left: 4px solid #ff8000; }
.work-queue-service-card.status-readyforinvoicing, .work-queue-month-card.status-readyforinvoicing,
.work-queue-service-card.status-nexttrip,          .work-queue-month-card.status-nexttrip          { background: rgba(108,70,117,.16); border-left: 4px solid #6c4675; }
.work-queue-service-card.status-closed,            .work-queue-month-card.status-closed            { background: rgba(87,166,57,.15);  border-left: 4px solid #57a639; }
.work-queue-service-card.status-cancelled,         .work-queue-month-card.status-cancelled         { background: rgba(176,0,30,.10);  border-left: 4px solid #b0001e; opacity: .8; }
/* Yellow, orange and red read as one red-orange band on the plan (SUP-1970): the three steps differ in
   lightness too (light yellow, mid orange, dark red), and a cancelled tile is striped. */
.work-queue-service-card.status-cancelled,         .work-queue-month-card.status-cancelled         { background-image: repeating-linear-gradient(135deg, rgba(176,0,30,.16) 0 6px, transparent 6px 12px); }

/* Legend of the colours above, shown on Plán práce and printable for the technicians. */
.work-queue-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; }
.work-queue-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.work-queue-legend-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.work-queue-legend-line { display: inline-block; width: 18px; height: 0; border-top: 2px solid #555; }
.work-queue-legend-line.is-dashed { border-top-style: dashed; }

/* multi-line name in the Servis panel */
.panel[data-name^="services"] td.cell[data-name="name"],
.panel[data-name^="services"] td.cell[data-name="name"] a{white-space:normal;word-break:break-word;}

/* Merged Servis panel - 3 sections */
.service-combined-panel .sc-section{margin-bottom:18px;}
.service-combined-panel .sc-section:last-child{margin-bottom:0;}
.service-combined-panel .sc-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;opacity:.75;padding:4px 0 6px;margin-bottom:4px;border-bottom:1px solid rgba(0,0,0,.08);}
.service-combined-panel .sc-add{padding:0 4px;line-height:1;opacity:.8;text-decoration:none;}
.service-combined-panel .sc-add:hover{opacity:1;}

/* Tab panels without fields (Servis, formerly Zařízení too) must not show an empty frame -
   the tab content is made of the bottom panels. A panel with fields shows normally, hence :has(.cell).
   Fotodokumentace and Přílohy are in the Zařízení tab since 30. 7. 2026. */
.detail[data-scope="ServiceOrder"] .panel[data-name^="panel-"]:not(:has(.cell)){display:none;}

/* === Yearly overview (Roční přehled) === */
.yearly-overview{padding:12px 16px;}
.yo-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.yo-title{font-size:20px;font-weight:700;}
.yo-total{margin-left:6px;font-size:13px;}
.yo-loading{padding:24px 4px;}
.yo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.yo-month{border:1px solid rgba(0,0,0,.1);border-radius:6px;padding:8px 10px;background:rgba(0,0,0,.012);}
.yo-month-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.yo-month-name{font-weight:700;font-size:14px;}
.yo-month-stat{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums;}
.yo-load{height:4px;background:rgba(0,0,0,.07);border-radius:2px;overflow:hidden;margin-bottom:8px;}
.yo-load-bar{height:100%;background:#007cb0;width:0;transition:width .3s ease;}
.yo-items{display:flex;flex-direction:column;gap:4px;}
.yo-item{display:block;padding:4px 7px;border-radius:4px;border-left:3px solid #ccc;background:rgba(0,0,0,.02);text-decoration:none;color:inherit;}
.yo-item:hover{background:rgba(0,0,0,.06);text-decoration:none;}
.yo-item-name{display:block;font-size:12.5px;font-weight:600;line-height:1.25;}
.yo-item-meta{display:block;font-size:11px;opacity:.65;}
.yo-empty{opacity:.35;text-align:center;padding:6px;}
.yo-item.status-planned{border-left-color:#007cb0;}
.yo-item.status-inprogress{border-left-color:#ffd600;}
.yo-item.status-completed,.yo-item.status-customerapproved{border-left-color:#ff8000;}
.yo-item.status-readyforinvoicing,.yo-item.status-nexttrip{border-left-color:#6c4675;}
.yo-item.status-closed{border-left-color:#57a639;}
.yo-item.status-cancelled{border-left-color:#b0001e;opacity:.7;}

/* === Yearly overview v2: months under each other === */
.yearly-overview .yo-monthfilter{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:0 0 16px;}
.yearly-overview .yo-monthfilter-label{font-size:12px;opacity:.7;margin-right:4px;}
.yearly-overview .yo-chip{border:1px solid rgba(0,0,0,.15);background:transparent;border-radius:20px;
  padding:2px 10px;font-size:12px;color:inherit;opacity:.45;cursor:pointer;line-height:1.6;}
.yearly-overview .yo-chip:hover{opacity:.8;}
.yearly-overview .yo-chip.is-on{opacity:1;border-color:#007cb0;background:rgba(0,124,176,.10);font-weight:600;}
.yearly-overview .yo-chip-count{opacity:.55;font-variant-numeric:tabular-nums;margin-left:2px;}
.yearly-overview .yo-chip-all{border-style:dashed;opacity:.85;}

.yearly-overview .yo-months{display:flex;flex-direction:column;gap:18px;}
.yearly-overview .yo-month-block{border:1px solid rgba(0,0,0,.1);border-radius:8px;overflow:hidden;}
.yearly-overview .yo-month-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 12px;background:rgba(0,0,0,.035);border-bottom:1px solid rgba(0,0,0,.08);}
.yearly-overview .yo-month-name{margin:0;font-size:15px;font-weight:700;}
.yearly-overview .yo-month-stat{font-size:12px;opacity:.7;font-variant-numeric:tabular-nums;}

.yearly-overview .yo-rows{display:flex;flex-direction:column;}
/* The status stripe on the left is much thicker since 7. 8. 2026 - in the list the green
   got lost among the blue [Markéta: „ta zelená mezi modrýma se docela ztrácí"]. */
.yearly-overview .yo-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:8px 12px 8px 16px;border-bottom:1px solid rgba(0,0,0,.06);
  border-left:7px solid rgba(0,0,0,.10);text-decoration:none;color:inherit;}
.yearly-overview .yo-row:last-child{border-bottom:none;}
.yearly-overview .yo-row:hover{background:rgba(0,0,0,.035);text-decoration:none;}
.yearly-overview .yo-row-main{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;}
/* Emphasis goes to the building, not the service name - in one month all rows
   are named the same ("PS - Leden 2026") and only the service order tells them apart
   [Markéta 4. 9. 2026: „prohodit tučnost a podbarvení písma PS-Leden x SPŠ Gočár
   — aby to bylo přehlednější, lépe vidět. Samozřejmě u všech akcí."]. */
.yearly-overview .yo-row-order{font-weight:600;font-size:13.5px;line-height:1.3;}
.yearly-overview .yo-row-name{font-size:11.5px;opacity:.6;}
.yearly-overview .yo-row-tags{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 260px;}
.yearly-overview .yo-row-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:11.5px;opacity:.75;
  margin-left:auto;font-variant-numeric:tabular-nums;}

.yearly-overview .yo-tag,
.service-tags .yo-tag{font-size:10.5px;padding:1px 7px;border-radius:20px;border:1px solid rgba(0,0,0,.14);white-space:nowrap;}
.yearly-overview .yo-tag-device,
.service-tags .yo-tag-device{background:rgba(0,124,176,.12);border-color:rgba(0,124,176,.3);}
.yearly-overview .yo-tag-kind,
.service-tags .yo-tag-kind{background:rgba(108,70,117,.12);border-color:rgba(108,70,117,.3);}
/* Revisions differ by colour from the other tags [Markéta 3. 9. 2026]. */
.yearly-overview .yo-tag-rch,
.service-tags .yo-tag-rch{background:rgba(0,150,136,.16);border-color:rgba(0,150,136,.45);color:#00695c;font-weight:600;}
.yearly-overview .yo-tag-chuc,
.service-tags .yo-tag-chuc{background:rgba(216,67,21,.14);border-color:rgba(216,67,21,.4);color:#bf360c;font-weight:600;}
.yearly-overview .yo-tag-ppk,
.service-tags .yo-tag-ppk{background:rgba(57,73,171,.14);border-color:rgba(57,73,171,.4);color:#283593;font-weight:600;}
.yearly-overview .yo-tag-task,
.service-tags .yo-tag-task{background:rgba(201,138,0,.14);border-color:rgba(201,138,0,.35);}
.yearly-overview .yo-time{font-weight:600;}
.yearly-overview .yo-empty{padding:10px 12px;opacity:.4;font-size:12.5px;}

.yearly-overview .yo-row.status-planned{border-left-color:#007cb0;}
.yearly-overview .yo-row.status-inprogress{border-left-color:#ffd600;}
.yearly-overview .yo-row.status-completed,.yearly-overview .yo-row.status-customerapproved{border-left-color:#ff8000;}
.yearly-overview .yo-row.status-readyforinvoicing,.yearly-overview .yo-row.status-nexttrip{border-left-color:#6c4675;}
.yearly-overview .yo-row.status-closed{border-left-color:#57a639;}
.yearly-overview .yo-row.status-cancelled{border-left-color:#b0001e;opacity:.65;}

.yearly-overview .yo-tag-count,
.service-tags .yo-tag-count{background:rgba(0,0,0,.05);}

.yearly-overview .yo-deadline{color:#b0001e;font-weight:600;}

/* Wider main content on service details - a narrower side panel (Markéta's wish).
   .record-grid is a CSS grid (.left | .side), so the columns are reset. */
.detail[data-scope="ServiceOrder"] .record-grid,
.detail[data-scope="Service"] .record-grid,
.detail[data-scope="ServiceProtocol"] .record-grid{ grid-template-columns:79% 21% !important; }

/* === Calendar of a date field === */
/* The realization map (Leaflet) keeps a high z-index on its layers, so the
   expanded calendar ended under it and from the 16th of the month no day could be picked
   [Markéta 7. 8. 2026 – „nezobrazuje se mi celý kalendář, nemůžu vybrat
   termín 16+"]. The map on the detail gets its own context with a low z-index,
   the calendar is lifted above it. */
.detail .leaflet-container,
.record .leaflet-container { z-index: 1; }

.datepicker.datepicker-dropdown,
.datepicker.dropdown-menu,
.bootstrap-datetimepicker-widget.dropdown-menu { z-index: 1100 !important; }


/* === Revision deadline in the yearly overview - coloured by urgency ===
   [Markéta 7. 8. 2026: „pokud by byl aktuální, tak ho nechat zelenej, a kdyby
   se to blížilo třeba 14 dní před ukončením, tak aby začal bejt červenej".
   With several devices on a service the nearest deadline counts.] */
.yearly-overview .yo-deadline{font-weight:600;padding:1px 7px;border-radius:20px;
  border:1px solid transparent;white-space:nowrap;}
.yearly-overview .yo-deadline.is-ok{color:#3d7a2c;background:rgba(87,166,57,.12);
  border-color:rgba(87,166,57,.35);}
.yearly-overview .yo-deadline.is-soon{color:#a13a00;background:rgba(255,128,0,.13);
  border-color:rgba(255,128,0,.4);}
.yearly-overview .yo-deadline.is-expired{color:#fff;background:#b0001e;border-color:#b0001e;}

/* === Device panel on a service action - filter by type ===
   [Markéta 7. 8. 2026: „buď to bude vše, a nebo bude klimatizace, vzduchotechnika,
   PPK, CHÚC a bude se to řídit tady tím typem zařízení". On actions with 20-50 devices
   a technician on a tablet would scroll endlessly otherwise.] */
.device-type-filter{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;}
.device-type-chip{border-radius:20px;padding:2px 11px;opacity:.55;}
.device-type-chip:hover{opacity:.85;}
.device-type-chip.is-on{opacity:1;font-weight:600;border-color:#007cb0;
  background:rgba(0,124,176,.10);color:#00587c;}


/* The "datum poslední revize" fields - Markéta writes here, so they must stand out
   [Markéta 4. 9. 2026: „podbarvit pole u Revize CHÚC, PPK, RCH
   (Půlroční revize poslední a Roční revize poslední)"].
   Espo in this version does not carry `css` from the layout to the cell, hence the data-name selectors. */
[data-scope="ProductSerial"] .field[data-name="datumPoslednRevizePulrocni"],
[data-scope="ProductSerial"] .field[data-name="datumPoslednRevizeRocni"],
[data-scope="ServiceOrder"] .field[data-name="datumPoslednRevizePPK"],
[data-scope="ServiceOrder"] .field[data-name="datumPoslednRevizeCHC"],
[data-scope="ServiceOrder"] .field[data-name="datumPoslednRevizeChladiv"] {
    background: rgba(201, 138, 0, .13);
    border-left: 3px solid rgba(201, 138, 0, .55);
    border-radius: 3px;
    padding: 3px 6px;
    margin-left: -6px;
}

/* Fotodokumentace revize chladiva — jedna fotka = jedna revize, pod sebou s datem. */
.revision-photos { display: flex; flex-direction: column; gap: 6px; }
.revision-photo { display: flex; align-items: center; gap: 9px; padding: 3px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .06); }
.revision-photo:last-child { border-bottom: none; }
.revision-photo-preview img { display: block; max-width: 74px; max-height: 56px;
    border: 1px solid rgba(0, 0, 0, .14); border-radius: 3px; }
.revision-photo-name { flex: 1 1 auto; word-break: break-word; }
.revision-photo .attachment-date { flex: 0 0 auto; white-space: nowrap;
    font-variant-numeric: tabular-nums; }

/* A customer with a service contract - blue background on the whole row
   [Markéta 4. 9. 2026: „Podbarvit třeba celý řádek? Jako to máme u seznamu
   servisních akcí? Tam to máme podbarvené modře."].
   The left stripe stays with the status, so the background is coloured. */
.yearly-overview .yo-row.yo-row-contract { background: rgba(0, 124, 176, .085); }
.yearly-overview .yo-row.yo-row-contract:hover { background: rgba(0, 124, 176, .15); }

/* On the right of the row goes the person who goes on the job - the service technician
   [Markéta 4. 9. 2026: „Pole přiřazený uživatel je jaké pole, co říká?
   Kdo tu akci jezdí z techniků?"]. When no technician is filled in yet,
   the record owner is shown, but styled differently so it is not confused. */
.yearly-overview .yo-technician { font-weight: 600; }
.yearly-overview .yo-user-owner { font-style: italic; opacity: .55; }

/* --- Photo zoom in the preview (Markéta 3. 9. 2026) --- */

.photo-zoom-frame {
    position: relative;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.photo-zoom-frame.is-zoomed {
    cursor: grab;
}

.photo-zoom-frame.is-zoomed:active {
    cursor: grabbing;
}

.photo-zoom-layer {
    will-change: transform;
}

.photo-zoom-layer img {
    user-select: none;
    -webkit-user-drag: none;
}

.photo-zoom-controls {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    gap: 4px;
}

.photo-zoom-controls button {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: #333;
    font-size: 13px;
    line-height: 1;
}

.photo-zoom-controls button:hover {
    background: #fff;
}

/* SUP-2727: previous / next photo arrows, orange like the arrows in Markéta's mail of 9. 11. 2026. */
.photo-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 2px solid #8a3c00;
    border-radius: 50%;
    background: #f47b20;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    opacity: .9;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    cursor: pointer;
}

.photo-nav:hover {
    opacity: 1;
    background: #ff8c32;
}

.photo-nav-left {
    left: 10px;
}

.photo-nav-right {
    right: 10px;
}

.photo-nav-counter {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 13px;
}

/* --- Customer signature full screen (Markéta 3. 9. 2026) --- */

.signature-box {
    position: relative;
}

.signature-trigger {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, .01);
}

.signature-trigger-prompt {
    padding: 4px 10px;
    border: 1px dashed rgba(0, 0, 0, .25);
    border-radius: 4px;
    background: rgba(255, 255, 255, .85);
    color: #777;
    font-size: 12px;
}

.signature-trigger img {
    max-width: 100%;
    max-height: 100%;
}

/* The printed signature in read mode: the same PNG as on the service sheet (mail 298729). */
.signature-print-image {
    display: block;
    max-width: 100%;
    max-height: 110px;
}

body.signature-overlay-open {
    overflow: hidden;
}

.signature-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.signature-overlay-header {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 15px;
    font-weight: 600;
}

.signature-overlay-area {
    flex: 1 1 auto;
    min-height: 0;
    margin: 12px;
    border: 1px dashed #bbb;
    border-radius: 4px;
    touch-action: none;
}

.signature-overlay-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid #e5e5e5;
}

.signature-overlay-footer .btn {
    min-width: 110px;
    min-height: 44px;
}

/* A tall photo would otherwise run past the screen edge together with the zoom controls. */
.photo-zoom-frame img {
    max-height: calc(100vh - 200px);
}

/* --- Search in the yearly overview (Markéta 7. 9. 2026) --- */

.yearly-overview .yo-search {
    position: relative;
    display: inline-block;
    margin: 0 0 8px;
    width: 320px;
    max-width: 100%;
}

.yearly-overview .yo-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 12px;
    pointer-events: none;
}

.yearly-overview .yo-search-input {
    width: 100%;
    height: 32px;
    padding: 0 28px 0 30px;
    border: 1px solid rgba(127, 127, 127, .35);
    border-radius: 16px;
    background: transparent;
    font-size: 13px;
    color: inherit;
}

.yearly-overview .yo-search-input:focus {
    outline: none;
    border-color: #2080f0;
}

.yearly-overview .yo-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #999;
    font-size: 16px;
    line-height: 1;
}

.yearly-overview .yo-search-clear:hover {
    color: #333;
}

/* Tags in the service order detail (Markéta 8. 9. 2026) */
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Visits of a service order (Výjezd A, B, C) under the order header (Task 37655). */
.service-visits .sv-visit { border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
.service-visits .sv-visit:last-child { margin-bottom: 0; }
.service-visits .sv-visit.is-current { border-color: #007cb0; box-shadow: inset 4px 0 0 #007cb0; }
.service-visits .sv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.service-visits .sv-letter { font-weight: 700; font-size: 14px; }
.service-visits .sv-actions { margin-left: auto; display: flex; gap: 4px; }
.service-visits .sv-fields { width: 100%; }
.service-visits .sv-fields th { width: 140px; padding: 2px 12px 2px 0; vertical-align: top; font-weight: 600; opacity: .7; white-space: nowrap; }
.service-visits .sv-fields td { padding: 2px 0; }
.service-visits .sv-text { white-space: pre-wrap; }
/* The visit's own service sheets inside its frame (SUP-1813). */
.service-visits .sv-protocols td { padding: 2px 12px 2px 0; vertical-align: middle; }
.service-visits .sv-protocols td:last-child { padding-right: 0; }
/* The visit's fields edited in place and its steps on the right (Tasks 37939, 37941). */
.service-visits .sv-record .panel { border: 0; box-shadow: none; margin: 0; background: none; }
.service-visits .sv-record .panel-body { padding: 0; }
.service-visits .sv-protocols { width: 100%; }
.service-visits .sv-no-sheet { display: flex; align-items: center; }
.service-visits .sv-step { margin-left: auto; text-align: right; }
/* Navigovat above the job's address map on the right (SUP-1813, Task 37947, Task 39818). */
.map-navigate { margin: 0 0 6px; text-align: right; }