/* Hand-written, and modelled on the legacy application's look: Metronic's "dark blue" theme, with its colours and
   measurements taken from the legacy pages as they render. Only what these screens use is carried over; none of the
   legacy stylesheets is loaded. */

/* The legacy application's font, served from here rather than from Google as the legacy one was (font: SIL OFL 1.1).
   One variable file covers every weight the pages use, 300 to 700; the second holds the letters beyond Latin-1, among
   them Slovene's č, š and ž, and is fetched only by a page that has one. */
@font-face {
    font-family: "Open Sans";
    src: url("/fonts/opensans-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
        U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    src: url("/fonts/opensans-latin-ext.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
        U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The icons the legacy menu shows, from its own copy of Font Awesome 4.4 (font: SIL OFL 1.1). Only the glyphs used
   here are defined. */
@font-face {
    font-family: "FontAwesome";
    src: url("/fonts/fontawesome-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.fa-book::before { content: "\f02d"; }
.fa-list::before { content: "\f03a"; }
.fa-table::before { content: "\f0ce"; }
.fa-globe::before { content: "\f0ac"; }
.fa-language::before { content: "\f1ab"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-envelope-o::before { content: "\f003"; }
.fa-th-large::before { content: "\f009"; }
.fa-users::before { content: "\f0c0"; }
.fa-user::before { content: "\f007"; }
.fa-angle-down::before { content: "\f107"; }
.fa-sign-out::before { content: "\f08b"; }
.fa-filter::before { content: "\f0b0"; }
.fa-times::before { content: "\f00d"; }
.fa-plus::before { content: "\f067"; }
.fa-file-excel-o::before { content: "\f1c3"; }
.fa-columns::before { content: "\f0db"; }
.fa-print::before { content: "\f02f"; }
.fa-history::before { content: "\f1da"; }
.fa-edit::before { content: "\f044"; }
.fa-bars::before { content: "\f0c9"; }
.fa-undo::before { content: "\f0e2"; }
.fa-floppy-o::before { content: "\f0c7"; }
.fa-angle-double-left::before { content: "\f100"; }
.fa-angle-double-right::before { content: "\f101"; }
.fa-angle-left::before { content: "\f104"; }
.fa-angle-right::before { content: "\f105"; }
.fa-chevron-left::before { content: "\f053"; }
.fa-calendar::before { content: "\f073"; }

:root {
    --line: #e7ecf1;
    --field: #c2cad8;
    --muted: #737f8c;
    --head: #f5f7fa;
    --text: #333;
    --title: #2f353b;
    --accent: #337ab7;
    --teal: #32c5d2;
    --bad: #b42318;
    --good: #15653d;

    /* The shell. */
    --header-bg: #2b3643;
    --header-hover: #3f4f62;
    --sidebar-bg: #364150;
    --sidebar-hover: #2c3542;
    --sidebar-sub-hover: #3e4b5c;
    --sidebar-line: #3d4957;
    --sidebar-text: #b4bcc8;
    --sidebar-icon: #606c7d;
    --sidebar-heading: #708096;
    --sidebar-active: #36c6d3;
    --sidebar-width: 235px;
    --sidebar-folded: 45px;
    --sidebar-flyout: 210px;
    --quick-sidebar-width: min(320px, 100vw);
    --header-height: 50px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    /* The legacy application's font (above); Segoe UI only while it loads. */
    font: 14px/1.43 "Open Sans", "Segoe UI", system-ui, Arial, sans-serif;
    color: var(--text);
    /* Stated explicitly: without it a browser in dark mode keeps its own dark background and these dark colours
       become unreadable. The application is light only, as the legacy one is. */
    background: #fff;
}

/* The pages without the shell (sign-in, the mailed links, the error pages). */
main { padding: 1.25rem 1.5rem 3rem; }

@media (max-width: 40rem) {
    main { padding: 1rem 1rem 2rem; }
}

h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; color: var(--title); }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.75rem 0 .5rem; color: var(--title); }

a { color: var(--accent); text-decoration: none; }
a:hover, a:focus { color: #23527c; text-decoration: underline; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Prose only: a line of text running the whole width of a wide screen is hard to read, but the tables and the forms
   need every pixel they can get, so the measure is capped on paragraphs rather than on the page. */
p { max-width: 46rem; }

/* Out of the way until it has focus, and then unmissable: the first stop in the tab order is a way past the header. */
.skip {
    position: absolute;
    left: -100vw;
    top: 0;
    z-index: 10;
    padding: .5rem .9rem;
    background: var(--head);
    border: 1px solid var(--line);
}

.skip:focus { left: 0; }

/* ---- The shell: header, sidebar, page panel, footer ------------------------------------------------------------ */

/* The dark column on the left runs the full height of the window, as the legacy one does: the shell is dark and the
   page is a white block laid over it. */
.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sidebar-bg);
}

.page-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: stretch;
    height: var(--header-height);
    background: var(--header-bg);
}

.page-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--sidebar-width);
    padding: 0 20px;
    flex: none;
}

.page-logo .logo { display: flex; }
.page-logo img { display: block; height: 32px; width: auto; }

/* Three lines, drawn rather than taken from a font, as the legacy toggle is. */
.page-header .sidebar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.page-header .sidebar-toggler:hover, .page-header .sidebar-toggler:focus-visible { background: none; }

.sidebar-toggler .bars, .sidebar-toggler .bars::before, .sidebar-toggler .bars::after {
    display: block;
    width: 19px;
    height: 1px;
    background: #a7b5c6;
}

.sidebar-toggler .bars { position: relative; }
.sidebar-toggler .bars::before, .sidebar-toggler .bars::after { content: ""; position: absolute; left: 0; }
.sidebar-toggler .bars::before { top: -6px; }
.sidebar-toggler .bars::after { top: 6px; }
.sidebar-toggler:hover .bars, .sidebar-toggler:hover .bars::before, .sidebar-toggler:hover .bars::after { background: #fff; }

.top-menu { display: flex; align-items: stretch; margin-left: auto; padding-right: 10px; }

.user-menu { position: relative; }

.user-menu > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 8px;
    color: #79869a;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary .who { color: #c6cfda; font-size: 13px; font-weight: 300; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--header-hover); color: #a4aebb; }

.user-menu > ul {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
    min-width: 175px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 5px 5px rgb(102 102 102 / 10%);
}

.user-menu > ul a, .user-menu > ul button {
    display: block;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    background: none;
    color: #6f6f6f;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.user-menu > ul a:hover, .user-menu > ul button:hover, .user-menu > ul a:focus, .user-menu > ul button:focus {
    background: #f6f6f6;
    color: #555;
}

.user-menu > ul .divider { height: 1px; margin: 0; background: #eee; }
.user-menu > ul form { margin: 0; }
.user-menu > ul .fa { width: 18px; color: #aaa; }

.page-header .quick-sidebar-toggler {
    display: flex;
    align-items: center;
    padding: 0 10px 0 12px;
    border: 0;
    background: none;
    color: #79869a;
    font-size: 18px;
}

/* Only a page with a side panel has anything for it to open. */
.shell:not(:has(#filtri)) .page-header .quick-sidebar-toggler { display: none; }

.page-header .quick-sidebar-toggler:hover, .page-header .quick-sidebar-toggler:focus-visible,
.page-header .quick-sidebar-toggler[aria-expanded="true"] { background: var(--header-hover); color: #a4aebb; }

.page-container { display: flex; flex: 1; align-items: stretch; }

.page-sidebar {
    flex: none;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
}

.sidebar-menu { margin: 0; padding: 20px 0 0; list-style: none; }
.sidebar-menu ul { margin: 0; padding: 0; list-style: none; }

.sidebar-menu > li.heading { padding: 15px 15px 10px; }

.sidebar-menu > li.heading h3 {
    margin: 0;
    color: var(--sidebar-heading);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.1;
    text-transform: uppercase;
}

.sidebar-menu .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 10px 15px;
    border: 0;
    border-top: 1px solid var(--sidebar-line);
    border-radius: 0;
    background: none;
    color: var(--sidebar-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

/* A heading, then the first entry: no line between them, as in the legacy menu. */
.sidebar-menu > li.heading + li > .nav-link { border-top-color: transparent; }

.sidebar-menu > li > .nav-link > .fa { width: 20px; margin-right: 5px; font-size: 16px; text-align: left; color: var(--sidebar-icon); }
.sidebar-menu .nav-link .title { flex: 1; }

.sidebar-menu > li > .nav-link:hover, .sidebar-menu > li.open > .nav-link {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    text-decoration: none;
}

/* The page being shown, and the group it is in: the legacy teal, with the notch that points at the page. */
.sidebar-menu > li.active > .nav-link, .sidebar-menu > li.active > .nav-link:hover {
    border-top-color: transparent;
    background: var(--sidebar-active);
    color: #fff;
}

.sidebar-menu > li.active > .nav-link > .fa { color: #fff; }
.sidebar-menu > li.active + li > .nav-link { border-top-color: transparent; }

.sidebar-menu > li.active > .nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid #fff;
}

.sidebar-menu .sub-menu { display: none; margin: 8px 0; }
.sidebar-menu li.open > .sub-menu { display: block; }

.sidebar-menu .sub-menu .nav-link {
    padding: 6px 15px 6px 20px;
    border-top: 0;
    font-size: 14px;
}

.sidebar-menu .sub-menu .nav-link > .fa { width: 20px; margin-right: 3px; font-size: 14px; color: var(--sidebar-icon); }

.sidebar-menu .sub-menu > li > .nav-link:hover, .sidebar-menu .sub-menu > li.active > .nav-link {
    background: var(--sidebar-sub-hover);
    color: var(--sidebar-text);
    text-decoration: none;
}

.sidebar-menu .sub-menu > li > .nav-link:hover > .fa, .sidebar-menu .sub-menu > li.active > .nav-link > .fa { color: #959fae; }

.sidebar-menu .nav-link:focus-visible { outline: 2px solid var(--sidebar-active); outline-offset: -2px; }

.page-content {
    flex: 1;
    /* A wide table scrolls inside its own box rather than pushing the sidebar off the screen. */
    min-width: 0;
    padding: 25px 20px 10px;
    background: #fff;
}

/* The legacy "portlet": the white panel with a faint border that every legacy page sits in, its title in capitals
   above a hairline. */
.portlet {
    margin: 0 0 25px;
    padding: 12px 20px 15px;
    border: 1px solid var(--line);
    background: #fff;
}

.portlet h1 {
    margin: 0 0 15px;
    padding: 10px 0 14px;
    border-bottom: 1px solid #eef1f5;
    color: var(--title);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}

.page-footer { padding: 8px 20px 5px; color: #98a6ba; font-size: 13px; }

/* ---- The side panel (the legacy "quick sidebar"), which holds a listing's filter ---------------------------------- */

/* A page's tool buttons sit on the title line, at the right, as the legacy ones do; the title keeps clear of them. */
.portlet { position: relative; }
.portlet:has(.portlet-actions) h1 { padding-right: 530px; }

.portlet-actions {
    position: absolute;
    top: 14px;
    right: 20px;
    display: flex;
    gap: 5px;
}

/* Each tool in its own legacy colour — the Metronic outline buttons the legacy title line uses: teal Filter, blue
   Stolpci, red for a new order, yellow for the Excel export. The outline is the colour, and it fills on hover, and while
   the button's panel is open. */
.portlet-actions .button, .portlet-actions button {
    padding: 6px 10px;
    border-color: var(--tone, var(--teal));
    color: var(--tone, var(--teal));
}
.portlet-actions .button:hover, .portlet-actions .button:focus-visible,
.portlet-actions button:hover, .portlet-actions button:focus-visible,
.portlet-actions button[aria-expanded="true"] { background: var(--tone, var(--teal)); color: #fff; }

.tone-teal { --tone: var(--teal); }
.tone-blue { --tone: #3598dc; }
.tone-red { --tone: #e7505a; }
.tone-yellow { --tone: #c49f47; }
.tone-dark { --tone: #2f353b; }
.tone-purple { --tone: #8e44ad; }

/* On a phone the title needs the whole line, so the buttons go under it. */
@media (max-width: 40rem) {
    .portlet:has(.portlet-actions) h1 { padding-right: 0; }
    .portlet-actions { position: static; flex-wrap: wrap; margin: 0 0 12px; }
}

/* A link that does what a button does looks like one: the same teal outline. */
a.button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--teal);
    color: var(--teal);
    line-height: inherit;
    text-decoration: none;
    white-space: nowrap;
}

a.button:hover, a.button:focus-visible { background: var(--teal); color: #fff; text-decoration: none; }

/* Nothing to do: shown where it always is, but plainly not available. */
a.button[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.quick-sidebar {
    position: fixed;
    z-index: 50;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--quick-sidebar-width));
    width: var(--quick-sidebar-width);
    overflow-y: auto;
    background: #21282e;
    color: #99a8b5;
    transition: right .3s;
}

.quick-sidebar.open { right: 0; }

@media (prefers-reduced-motion: reduce) {
    .quick-sidebar { transition: none; }
}

.quick-sidebar-head { position: relative; text-align: center; }

.quick-sidebar-head .tab {
    display: block;
    padding: 45px 15px 8px;
    border-bottom: 3px solid #f3565d;
    color: #fff;
    text-transform: uppercase;
}

.quick-sidebar .quick-sidebar-close {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 9px;
    border: 0;
    background: none;
    color: #99a8b5;
    font-size: 18px;
}

.quick-sidebar .quick-sidebar-close:hover, .quick-sidebar .quick-sidebar-close:focus-visible { background: none; color: #fff; }

.quick-sidebar form, .quick-sidebar-body { padding: 25px 15px 20px; }
.quick-sidebar h3 { margin: 0 0 12px; color: #6c8296; font-size: 16px; font-weight: 400; }
.quick-sidebar form label { margin: 0 0 14px; color: #99a8b5; font-weight: 600; }

.quick-sidebar form label input:not([type="checkbox"]), .quick-sidebar form label select {
    width: 100%;
    min-width: 0;
    margin-top: 5px;
    font-weight: 400;
}

.quick-sidebar .hint { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: #6c8296; }
.quick-sidebar-actions { display: flex; align-items: center; gap: 12px; }
.quick-sidebar-actions a { color: #fff; }

/* ---- The columns panel: the sort in two levels, then every column with its box, its width and a handle to move it */

/* A little wider than the filter's, for a name, a slider and a number on one line. */
#stolpci { --quick-sidebar-width: min(380px, 100vw); }

.sort-levels { display: grid; gap: 10px; margin: 0 0 26px; }
.sort-level { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 4px 6px; }
.sort-level label { grid-column: 1 / -1; margin: 0; color: #99a8b5; font-weight: 600; }
.sort-level select { width: 100%; min-width: 0; padding: 6px 8px; }
.sort-level select:disabled { opacity: .5; }

.quick-sidebar h3 .count { float: right; font-size: 12px; line-height: 22px; color: #99a8b5; }

.column-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid #2d363d; }

.column-list li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 104px 30px;
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    border-bottom: 1px solid #2d363d;
    background: #21282e;
}

.column-list li.dragging { position: relative; z-index: 1; background: #2b3643; outline: 1px dashed var(--teal); }

.column-list .col-handle {
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #6c8296;
    cursor: grab;
    touch-action: none;
}

.column-list li.dragging .col-handle { cursor: grabbing; }
.column-list .col-handle:hover, .column-list .col-handle:focus-visible { background: none; color: #fff; }
.column-list .col-handle:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

.column-list .col-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: #d4dce3;
    cursor: pointer;
}

.column-list .col-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-list .col-name input { flex: none; margin: 0; accent-color: var(--teal); }
.column-list li.off .col-name { color: #6c8296; }

.column-list input[type="range"] { width: 100%; min-width: 0; padding: 0; border: 0; background: none; accent-color: var(--teal); }
.column-list input[type="range"]:disabled { opacity: .3; }
.column-list output { font-size: 12px; color: #99a8b5; text-align: right; font-variant-numeric: tabular-nums; }
.column-list li.off output { visibility: hidden; }

#stolpci .quick-sidebar-actions { flex-wrap: wrap; gap: 8px; }

#stolpci .quick-sidebar-actions button {
    padding: 5px 10px;
    border: 1px solid #4b5a68;
    background: none;
    color: #d4dce3;
}

#stolpci .quick-sidebar-actions button:hover, #stolpci .quick-sidebar-actions button:focus-visible { border-color: var(--teal); color: #fff; }
#stolpci-stanje { font-size: 12px; color: var(--teal); }


/* Folded: a strip of icons. Pointing at one (or tabbing to it) shows its name and its group beside it, over the page,
   as the legacy strip does. Wide screens only: a narrow one hides the menu altogether instead (below). */
@media (min-width: 992px) {
    .sidebar-closed .page-logo { width: var(--sidebar-folded); padding: 0; justify-content: center; }
    .sidebar-closed .page-logo .logo { display: none; }
    .sidebar-closed .sidebar-toggler { margin: 0; }
    .sidebar-closed .page-sidebar { width: var(--sidebar-folded); }
    .sidebar-closed .sidebar-menu > li.heading { display: none; }
    .sidebar-closed .sidebar-menu > li { position: relative; }
    .sidebar-closed .sidebar-menu > li > .nav-link { border-top-color: transparent; }
    .sidebar-closed .sidebar-menu > li > .nav-link .title,
    .sidebar-closed .sidebar-menu > li > .nav-link::after,
    .sidebar-closed .sidebar-menu > li > .sub-menu { display: none; }

    .sidebar-closed .sidebar-menu > li:is(:hover, :focus-within) > .nav-link {
        z-index: 25;
        width: calc(var(--sidebar-folded) + var(--sidebar-flyout));
        background: var(--sidebar-hover);
        color: var(--sidebar-text);
    }

    .sidebar-closed .sidebar-menu > li.active:is(:hover, :focus-within) > .nav-link { background: var(--sidebar-active); color: #fff; }
    .sidebar-closed .sidebar-menu > li:is(:hover, :focus-within) > .nav-link .title { display: block; padding-left: 15px; }

    .sidebar-closed .sidebar-menu > li:is(:hover, :focus-within) > .sub-menu {
        display: block;
        position: absolute;
        z-index: 25;
        top: 40px;
        left: var(--sidebar-folded);
        width: var(--sidebar-flyout);
        margin: 0;
        padding: 8px 0;
        background: var(--sidebar-bg);
    }

    .sidebar-closed .sidebar-menu > li:is(:hover, :focus-within) > .sub-menu .nav-link { padding-left: 15px; }
}

/* Narrow: no room for a sidebar beside the page. The menu is hidden, and the toggle shows it above the page. */
@media (max-width: 991px) {
    .page-container { flex-direction: column; }
    .page-sidebar { display: none; width: auto; }
    .sidebar-open .page-sidebar { display: block; }
    .sidebar-menu { padding-top: 0; }
    .sidebar-menu > li > .nav-link::after { display: none; }
    .page-logo { width: auto; gap: 20px; }
    .page-content { padding: 15px 10px 10px; }
    .portlet { padding: 10px 12px 12px; }
}

@media (max-width: 40rem) {
    .user-menu > summary .who { display: none; }
}

/* ---- Tables ----------------------------------------------------------------------------------------------------- */

/* The user list has six columns and can hold several roles per row, so it needs room and a scroller rather than
   silently running off the side of the page. */
.table-scroll { overflow-x: auto; }

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 72rem;
}

/* Bordered, striped and lit on hover, as the legacy lists are. */
th, td {
    text-align: left;
    vertical-align: top;
    padding: 8px 10px;
    border: 1px solid var(--line);
    font-size: 13px;
}

thead th { font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(odd) { background: #fbfcfd; }

/* The sort arrow is drawn from the attribute a screen reader already announces, rather than put in the text where it
   would be read out as a shape. */
thead th[aria-sort="ascending"] a::after { content: " \25B4"; }
thead th[aria-sort="descending"] a::after { content: " \25BE"; }

/* An open order whose final deadline has gone by. These listings exist to make exactly this visible. */
td.late { color: var(--bad); }
tbody tr:hover { background: #f3f4f6; }
/* break-word, not anywhere: only a word that cannot fit at all is broken, so ordinary addresses and role names stay
   whole while a freakishly long one (the characterization suite leaves some) no longer runs over the next column. */
td.wrap { max-width: 22rem; overflow-wrap: break-word; }
td.state { min-width: 11rem; }
td.nowrap { white-space: nowrap; }

/* A work-order title is a machine-built string of client, product and numbers, often over eighty characters. Wrapped,
   one row grew to eight lines; cut to one line with the whole of it on hover, twenty rows can be read at a glance. */
td.title { max-width: 26rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The work-order listing: its columns are as wide as the user has made them (the column stylesheet on the page), so
   the layout is fixed and every cell is one line, cut with an ellipsis. A fixed table is as wide as its columns or as
   its box, whichever is more: the filler column takes what the columns leave, and a table wider than the screen
   scrolls in its box. */
#seznam { table-layout: fixed; width: 100%; min-width: 0; }
#seznam th, #seznam td { box-sizing: border-box; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#seznam .num { text-align: right; font-variant-numeric: tabular-nums; }
/* A message that could not be sent however often it was tried, and an event of the level of an error or worse. */
#seznam tr.error td { color: var(--bad); }
#seznam .filler { width: auto; padding: 0; border-left: 0; border-right: 0; }
#seznam th { position: relative; }

/* The second level of the sort, drawn smaller beside the first, with its number. */
#seznam th[data-sort2] a::after { content: " \00B2\25B4"; color: var(--muted); font-size: 11px; }
#seznam th[data-sort2="descending"] a::after { content: " \00B2\25BE"; }
#seznam:has(th[data-sort2]) th[aria-sort="ascending"] a::after { content: " \00B9\25B4"; }
#seznam:has(th[data-sort2]) th[aria-sort="descending"] a::after { content: " \00B9\25BE"; }

/* A heading's right edge, to be dragged: a thin teal line shows where it is when pointed at. */
#seznam .col-resize { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; touch-action: none; }
#seznam .col-resize:hover, #seznam .col-resize.active { background: linear-gradient(var(--teal), var(--teal)) right / 2px 100% no-repeat; }
body.resizing { cursor: col-resize; user-select: none; }
/* While a column is dragged in the panel, nothing on the page is selected by the moving pointer. */
body.dragging-column { cursor: grabbing; user-select: none; }

/* ---- The listing's page size and paging, placed and drawn as the legacy listing's ------------------------------- */

.page-length { margin: 0 0 10px; }
.page-length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.page-length select { width: 75px; height: 30px; padding: 5px 10px; }

.table-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 10px 0 0; }
.table-footer p { margin: 0; }

.pagination ul { display: flex; margin: 0; padding: 0; list-style: none; }
.pagination li > a, .pagination li > span {
    display: block;
    min-width: 34px;
    margin-left: -1px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: #fff;
    color: #777;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
}
.pagination li:first-child > * { margin-left: 0; }
.pagination li > a:hover, .pagination li > a:focus-visible { position: relative; background: #eee; color: #555; }
.pagination li.active > span { position: relative; z-index: 1; border-color: #337ab7; background: #337ab7; color: #fff; }
.pagination li > span[aria-disabled="true"] { color: #bbb; cursor: not-allowed; }
.pagination li.gap > span { color: #999; }

/* ---- Forms ------------------------------------------------------------------------------------------------------ */

form label {
    display: block;
    margin: 0 0 .6rem;
}

form label input:not([type="checkbox"]), form label select {
    display: block;
    margin-top: .15rem;
    min-width: 18rem;
}

/* The legacy fields: square, with the blue-grey border that darkens on focus. */
input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea {
    padding: 6px 12px;
    border: 1px solid var(--field);
    border-radius: 0;
    background: #fff;
    color: #555;
    font: inherit;
}

input:not([type="checkbox"], [type="radio"], [type="file"]):focus, select:focus, textarea:focus {
    border-color: #93a1bb;
    outline: none;
}

/* A search or filter row reads better on one line. */
form.inline { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
form.inline label { margin: 0; }

/* A form with twenty-odd fields in one column runs to three screens, and the work-order form has twenty-two. In
   columns it is one, and the fields stay in the same order for anyone tabbing through them. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .25rem 1.5rem; align-items: start; }
.grid label input:not([type="checkbox"]), .grid label select, .grid label textarea { width: 100%; min-width: 0; }
/* The buttons belong to the whole form, not to the column they happen to fall in. */
.grid > button, .grid > a, .grid > .actions { grid-column: 1 / -1; justify-self: start; margin-top: .75rem; }

/* A fieldset that is the grid carries no frame of its own: it is there to be disabled all at once. */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

/* Looking, not editing: the legacy read-only fields, every value in its place on a pale grey ground. Disabled fields
   would otherwise be drawn faint, which is hard to read for a screen whose whole point is to be read. */
fieldset:disabled input:not([type="checkbox"], [type="radio"]), fieldset:disabled select, fieldset:disabled textarea {
    background: #eef1f5;
    color: #555;
    -webkit-text-fill-color: #555;
    opacity: 1;
    cursor: default;
}

/* The form's own buttons, above and below it at the right, as on the legacy form, and in its colours: "Uredi" blue,
   "Prekliči" red, "Shrani" green. */
.form-buttons { display: flex; justify-content: flex-end; gap: 5px; margin: 0 0 15px; }
.form-buttons:last-child { margin: 15px 0 0; }

button.edit, a.button.edit, button.cancel, a.button.cancel, button.save {
    border-color: transparent;
    color: #fff;
}

button.edit, a.button.edit { background: #659be0; }
button.cancel, a.button.cancel { background: #e7505a; }
button.save { background: #1bbc9b; }
button.edit:hover, a.button.edit:hover, a.button.edit:focus-visible { background: #3f83d9; color: #fff; }
button.cancel:hover, a.button.cancel:hover, button.cancel:focus-visible { background: #e12330; color: #fff; }
button.save:hover, button.save:focus-visible { background: #158f76; color: #fff; }

/* The legacy tool buttons: an outline in teal, filled on hover. */
button {
    padding: 6px 12px;
    border: 1px solid var(--teal);
    border-radius: 0;
    background: transparent;
    color: var(--teal);
    font: inherit;
    cursor: pointer;
}

button:hover, button:focus-visible { background: var(--teal); color: #fff; }

/* Each administration action is its own form (one anti-forgery token each), which would otherwise stack them
   vertically as blocks. */
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.actions form { margin: 0; }

/* ---- Messages and details ---------------------------------------------------------------------------------------- */

[role="alert"] { color: var(--bad); font-weight: 500; }

/* The "saved" line every screen shows after an action, and the same line on the pages a mailed link opens. It read as
   ordinary body text, which is not what a confirmation should look like next to a refusal that is coloured and weighted. */
#sporocilo, #uspesno { color: var(--good); font-weight: 500; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1rem; }
dt { color: var(--muted); }
/* A value can be one long word — a code path, an address — and must break rather than push the page sideways. */
dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

ul.roles { list-style: none; padding: 0; margin: .25rem 0 1rem; }
ul.roles li { display: flex; align-items: center; gap: .6rem; padding: .2rem 0; }

.muted { color: var(--muted); }

/* The generated QR carries no size of its own, and at its natural scale it is either a postage stamp or a wall poster.
   Sixty-five modules across (the code plus its quiet zone) at this size is a little over four pixels each, which is
   about the smallest a phone camera reads comfortably off a screen — and it still fits a narrow one. */
.qr { margin: .5rem 0 1rem; }
.qr svg { display: block; width: min(16rem, 100%); height: auto; }

/* The typed-in key: a monospace font is what makes 0 and O, 1 and l tell each other apart. */
code { font: .95em ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }

/* ---- Billing import ---------------------------------------------------------------------------------------------- */

/* The listing's table is nine columns wide and is given a minimum width and a scrolling box to hold it. A table of
   three short columns is not, and left at 72rem it grows a horizontal scrollbar of its own for no reason. Fixed,
   because a thirty-six character identifier would otherwise demand its own width and push the reason off the screen. */
table.narrow { table-layout: fixed; width: 100%; min-width: 0; max-width: 56rem; }
table.narrow td { overflow-wrap: anywhere; }

/* How far an import has got. Full width would suggest more precision than "so many of so many" has. */
.uvoz-stanje progress { width: min(24rem, 100%); height: 1rem; }

/* A message or a stack trace is shown as written, but never wider than the page. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; margin: 0 0 1rem; font-size: .875rem; }

/* A form row that takes the whole width: a section heading, or a list long enough to need the room. */
.grid > .span { grid-column: 1 / -1; }
.grid > h3.span { margin: 1rem 0 0; }
.grid select[multiple] { width: 100%; }
/* Adding a colour or a paper format on the spot: the field, its button, and what came of it. */
.grid > .quick { display: flex; flex-wrap: wrap; align-items: end; gap: .25rem .75rem; }
.grid > .quick label { flex: 1 1 12rem; }
.grid > .quick p { flex-basis: 100%; margin: 0; min-height: 1.25rem; color: var(--muted); }

/* ---- The order screen: the legacy form, row for row ---------------------------------------------------------------
   The legacy form is Bootstrap: rows of twelve columns with a 30px gutter, and each field a label over a 34px box. Its
   columns are the large-screen ones, so below 1200px every field takes the whole row, as it does there. The spacing
   is the legacy screen's, measured: a field is 15px from the next, a section 25px, and a note under a field sits in
   that same 15px. */

.portlet h1 .fa { margin-right: 2px; font-size: 14px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The legacy title bar is 55px high with 20px under it, where the shared title here is 43px; the space above the bar
   of buttons (which takes the place of the title's own 15px under it) makes up the difference, so the form starts
   where the legacy one does. */
.form-actions.top { margin: 32px 0 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.form-actions.bottom { padding: 20px 0; border-top: 1px solid var(--line); }
.form-actions .actions { margin: 0; }
.form-actions .form-buttons, .form-actions .form-buttons:last-child { margin: 0 0 0 auto; }

#nalog > .form-body { padding: 20px 0; }
.form-section { margin: 0 0 25px; }
/* The legacy CTP and approval sections have no space of their own under them: the last field's is enough. */
.form-section.flush { margin-bottom: 0; }
.form-section > legend {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    color: #34495e;
    font-size: 18px;
    line-height: 26px;
}

.form-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 30px; }
.form-row > .c3 { grid-column: span 3; }
.form-row > .c4 { grid-column: span 4; }
.form-row > .c6 { grid-column: span 6; }
.form-row > .c8 { grid-column: span 8; }
.form-row > .c12 { grid-column: 1 / -1; }

@media (max-width: 74.99rem) {
    .form-row > * { grid-column: 1 / -1 !important; }
    .form-row > .empty { display: none; }
}

/* The legacy product title keeps half the row at every width; on a phone that half is too narrow to read. */
@media (min-width: 40.01rem) and (max-width: 74.99rem) {
    .form-row > .xs6 { grid-column: span 6 !important; }
}

/* On a phone the buttons are already under the title, so the bar needs no room of its own above it. */
@media (max-width: 40rem) {
    .form-actions.top { margin-top: 0; }
}

@media (min-width: 62rem) and (max-width: 74.99rem) {
    .form-row > .md6 { grid-column: span 6 !important; }
}

.field { min-width: 0; margin: 0 0 15px; }
.field > label { display: block; margin: 0 0 5px; color: #333; font-weight: 600; line-height: 20px; }

.field input:not([type="checkbox"], [type="radio"]), .field select, .field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    height: 34px;
    margin: 0;
    padding: 6px 12px;
    line-height: 20px;
}

.field textarea { height: auto; resize: vertical; }
.field select[multiple] { height: auto; }

/* The legacy pickers: a flat box with a small grey arrow at the right. */
.field select:not([multiple]) {
    padding-right: 24px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z' fill='%23999'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An empty choice reads as the legacy placeholder does, in grey. */
#nalog .field select:has(> option:checked[value=""]) { color: #999; -webkit-text-fill-color: #999; }

/* Only looking: an empty day says nothing, as on the legacy form, rather than how it would be written. */
fieldset:disabled input::placeholder { color: transparent; }

/* The date is written as the legacy form writes it, 17.10.2025, and picked from the calendar button at its left: the
   script opens the browser's own calendar from a date field that is there only for that, out of sight. */
.input-group { position: relative; }
.input-group > input.date-picker {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px !important;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* A box that is only shown — the title while it is composed, and the approval, which only the API sets — is grey
   whether or not the form is being edited. */
#nalog input[readonly], #nalog input:disabled:not([type="checkbox"]), #nalog select:disabled {
    background-color: #eef1f5;
    color: #555;
    -webkit-text-fill-color: #555;
    opacity: 1;
}

.help-block { display: block; margin: 5px 0 0; color: #737373; font-size: 12px; font-style: italic; line-height: 17px; }

/* A check box stands a little lower than the labels around it, as the legacy iCheck ones do, and looks like them: a
   plain square with a grey tick. */
.field.check { margin: 10px 0 25px; }
.field.check.lower { margin: 19px 0 20px; }
.field.check > label { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin: 0; font-weight: 600; line-height: 20px; }
.field.check > .help-block { margin-top: 10px; }

.field.check input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #b4b4b4;
    border-radius: 3px;
    appearance: none;
    background: #fff center / 12px no-repeat;
    cursor: pointer;
}

.field.check input[type="checkbox"]:checked {
    border-color: #919191;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23777' stroke-width='2'/%3E%3C/svg%3E");
}

.field.check input[type="checkbox"]:disabled { border-color: #e1e1e1; cursor: default; }
.field.check input[type="checkbox"]:disabled:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23ccc' stroke-width='2'/%3E%3C/svg%3E");
}

.field.check input[type="checkbox"]:focus-visible { outline: 2px solid #93a1bb; outline-offset: 1px; }

/* A box with something fixed at its side: the calendar, the euro sign, the button that adds a paper or a colour. */
.input-group { display: flex; align-items: stretch; }
.input-group > input, .input-group > select, .input-group > .tags-box { flex: 1 1 auto; width: auto !important; min-width: 0; }

.input-group > .addon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid #e1e5ec;
    background: #e1e5ec;
    color: #666;
}

.input-group > .addon:first-child { margin-right: -1px; }
.input-group > .addon:last-child { margin-left: -1px; }
.input-group > .addon.date { width: 39px; padding: 0; cursor: pointer; }
fieldset:disabled .input-group > .addon.date { cursor: default; }

.input-group > button.add {
    flex: none;
    width: 44px;
    min-height: 34px;
    padding: 0;
    border: 1px solid #95a5a6;
    background: #95a5a6;
    color: #fff;
}

.input-group > button.add:hover, .input-group > button.add:focus-visible { border-color: #7f8c8d; background: #7f8c8d; }
fieldset:disabled .input-group > button.add { cursor: default; }
fieldset:disabled .input-group > button.add:hover { border-color: #95a5a6; background: #95a5a6; }

.field .quick { display: flex; flex-wrap: wrap; align-items: end; gap: 5px 10px; margin-top: 10px; }
.field .quick label { flex: 1 1 12rem; margin: 0; font-weight: 600; }
.field .quick label input { min-width: 0; width: 100%; }
.field .quick p { flex-basis: 100%; min-height: 1.25rem; margin: 0; color: var(--muted); }
.field button.end-document { margin-top: 5px; }

/* The choices of several, as the legacy select2 tags: grey chips in the box, and a list to pick from as one types. */
.tags-native { display: none !important; }

.tags-box { position: relative; min-height: 34px; border: 1px solid var(--field); background: #fff; cursor: text; }
.tags-box:focus-within { border-color: #93a1bb; }
.tags-box.disabled { background: #eef1f5; cursor: default; }

.tags-list { display: flex; flex-wrap: wrap; align-items: center; min-height: 32px; margin: 0; padding: 0 5px 5px 0; list-style: none; }

.tag {
    max-width: calc(100% - 6px);
    margin: 5px 0 0 6px;
    padding: 0 6px;
    overflow: hidden;
    border: 1px solid #eee;
    background: #eee;
    color: #555;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-remove { margin: 0 4px 0 0; padding: 0; border: 0; background: none; color: #999; font-weight: 700; line-height: 1; }
.tag-remove:hover, .tag-remove:focus-visible { background: none; color: #333; }

.tags-input { flex: 1 0 4rem; margin: 5px 0 0 6px; }
.field .tags-box input.tags-search { height: 20px; padding: 0; border: 0; background: transparent; }

.tags-menu {
    position: absolute;
    z-index: 20;
    top: 100%;
    right: -1px;
    left: -1px;
    max-height: 200px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    border: 1px solid #93a1bb;
    background: #fff;
    list-style: none;
}

.tags-menu li { padding: 6px 12px; cursor: pointer; }
.tags-menu li[aria-selected="true"] { background: #5897fb; color: #fff; }
.tags-menu li.none { color: #999; cursor: default; }

/* ---- The sign-in pages: the legacy ones, measured off them -------------------------------------------------------
   The logo 100px down on the dark slate ground, and under it a column 400px wide: the heading, the fields in a lighter
   slate with their names inside them, the red button, and "Zapomni se me" with the links beside it. The other pages on
   the way in (the code, a forgotten password, an unlock, a new address) are the same frame (LoginFrame), each with the
   legacy blue button back to the sign-in under its red one. */
body:has(main.login) { background: #364150; }

main.login { padding: 0 16px; color: #edf4f8; }

.login-logo { margin: 100px 0 0; padding: 15px; text-align: center; }
.login-logo img { display: block; width: 256px; height: auto; margin: 0 auto; }

.login-content { width: 100%; max-width: 400px; margin: 40px auto; text-align: center; }
.login-content h1 { margin: 20px 0 10px; color: #edf4f8; font-size: 22px; font-weight: 400; line-height: 24.2px; }
.login-content > p { max-width: none; margin: 20px 0; }

.login-content form input:not([type="checkbox"]) {
    display: block;
    width: 100%;
    height: 43px;
    margin: 0 0 15px;
    padding: 6px 12px;
    border: 1px solid #536379;
    background: #536379;
    color: #d9ecf9;
}

.login-content form input:not([type="checkbox"])::placeholder { color: #a6b6c7; opacity: 1; }
.login-content form input:not([type="checkbox"]):focus { border-color: #8aa4c1; outline: none; }

.login-content .login-button {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    margin: 16px 0 0;
    padding: 10px 25px;
    border: 1px solid #e7505a;
    background: #e7505a;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.login-content .login-button:hover, .login-content .login-button:focus-visible { border-color: #e12330; background: #e12330; color: #fff; }

/* The way back, and a second thing to do: the legacy blue, 21px under the red. */
.login-content .login-button.secondary { margin-top: 21px; border-color: #5995bb; background: #5995bb; color: #edf4f8; }
.login-content .login-button.secondary:hover, .login-content .login-button.secondary:focus-visible { border-color: #447ea3; background: #447ea3; color: #fff; text-decoration: none; }

/* A way out that is not the point of the page: text, not a third big button. */
.login-signout { margin: 20px 0 0; }
.login-content .login-link { padding: 0; border: 0; background: none; color: #c9dce9; text-decoration: underline; }
.login-content .login-link:hover, .login-content .login-link:focus-visible { background: none; color: #fff; }

/* Where to set the app up, said on the way in to someone who has none. */
.login-hint { max-width: none; margin: 25px 0 0; color: #c9dce9; font-size: 13px; }

.login-others { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.login-content strong { color: #fff; }

.login-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin: 33px 0 15px; }

.login-content .remember { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #c9dce9; cursor: pointer; }

/* The legacy outlined square, white tick when ticked. */
.login-content .remember input {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #d9d9d9;
    appearance: none;
    background: transparent center / 12px no-repeat;
    cursor: pointer;
}

.login-content .remember input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23edf4f8' stroke-width='2'/%3E%3C/svg%3E");
}

.login-content .remember input:focus-visible { outline: 2px solid #8aa4c1; outline-offset: 2px; }

.login-links { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.login-content a { color: #edf4f8; }
.login-content a:hover, .login-content a:focus { color: #fff; }

/* The legacy alerts: red for what went wrong, and green for what went through. */
.login-alert { max-width: none; margin: 0 0 15px; padding: 10px 12px; background: #fbe1e3; color: #e73d4a; text-align: left; }
.login-alert.success { background: #abe7ed; color: #27a4b0; }

/* 60px: the legacy line's own margin inside its box adds 20px to the 40px under the form. */
.login-copyright { max-width: none; margin: 60px 0 30px; padding: 10px; color: #c9dce9; font-size: 13px; text-align: center; }

/* ---- The user profile: the legacy page's sections -----------------------------------------------------------------
   Each section a title over a hairline; the forms in the legacy horizontal rows, the label at the right of a narrow
   column and its field beside it; the actions as the legacy filled buttons. */
.fa-link::before { content: "\f0c1"; }
.fa-unlink::before { content: "\f127"; }
.fa-paper-plane::before { content: "\f1d8"; }
.fa-check::before { content: "\f00c"; }
.fa-exclamation-triangle::before { content: "\f071"; }
.fa-minus::before { content: "\f068"; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--tone); background: var(--tone); color: #fff; }
.btn:hover, .btn:focus-visible { border-color: var(--tone-dark); background: var(--tone-dark); color: #fff; }
.btn.red { --tone: #e7505a; --tone-dark: #e12330; }
.btn.blue { --tone: #3598dc; --tone-dark: #217ebd; }
.btn.green { --tone: #32c5d2; --tone-dark: #26a1ab; }

.alert { max-width: 48rem; padding: 10px 15px; }
.alert.success { background: #abe7ed; color: #27a4b0; }
.alert.danger { background: #fbe1e3; color: #e73d4a; }

.profile-who { margin: 0 0 20px; }

.profile-section { margin: 0 0 30px; }

.profile-section > h2.form-title {
    margin: 0 0 20px;
    padding: 0 0 5px;
    border-bottom: 1px solid #e5e5e5;
    color: #34495e;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

.profile-note { color: var(--muted); }

table.methods { width: auto; min-width: min(36rem, 100%); margin: 0 0 20px; }
table.methods td { vertical-align: middle; font-size: 14px; }
table.methods td:last-child { width: 1%; white-space: nowrap; }
table.methods form { margin: 0; }
.badge { margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #e1e5ec; color: #555; font-size: 11px; }

.authenticator-setup { max-width: 48rem; margin: 0 0 10px; padding: 15px 20px; border: 1px solid var(--line); background: #fbfcfd; }
.authenticator-setup h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.authenticator-setup ol { margin: 0 0 10px; padding-left: 1.25rem; }

/* The legacy horizontal form: 180px of label, then the field at the width of a third of the page. */
.form-horizontal .h-row { display: grid; grid-template-columns: 180px minmax(0, 24rem); gap: 5px 20px; align-items: center; margin: 0 0 15px; }
.form-horizontal .h-row > label, .form-horizontal .h-label { margin: 0; font-weight: 600; text-align: right; }
.form-horizontal .h-row > input { display: block; width: 100%; min-width: 0; height: 34px; margin: 0; }
.form-horizontal .help { display: block; margin-top: 5px; color: #737373; font-size: 12px; font-style: italic; }

@media (max-width: 40rem) {
    .form-horizontal .h-row { grid-template-columns: minmax(0, 1fr); }
    .form-horizontal .h-row > label, .form-horizontal .h-label { text-align: left; }
}

/* ---- The record history: the legacy grid of every field against every version -----------------------------------
   The legacy page has no panel: a light title with the record's kind beside it, and under it the table, which scrolls
   sideways once there are more versions than fit. */
.portlet:has(> h1.page-title) { padding: 0; border: 0; }

.portlet h1.page-title {
    margin: 0 0 25px;
    padding: 0;
    border: 0;
    color: #666;
    font-size: 24px;
    font-weight: 300;
    line-height: 26.4px;
    text-transform: none;
}

.page-title small { color: #666; font-size: 14px; font-weight: 300; line-height: 14px; }

/* 35px under the title: the legacy table's 10px do not run into the title's 25px there, as they would here.
   The box is no taller than the window leaves room for (the header, the title and the margins above it, the footer
   below it: ~205px), so its sideways scrollbar is on screen from the start rather than at the foot of a long table;
   it never shrinks below 20rem. Inside it the versions' row and the fields' column stay put while the rest scrolls
   under them. */
.table-scrollable {
    margin: 35px 0 10px;
    overflow: auto;
    max-height: max(20rem, calc(100vh - 205px));
    max-height: max(20rem, calc(100dvh - 205px));
    border: 1px solid var(--line);
}

table.audit-versions { width: 100%; min-width: 0; margin: 0; }
table.audit-versions th, table.audit-versions td { padding: 4px 8px; font-size: 12.25px; line-height: 17.5px; white-space: pre; }
table.audit-versions thead th { font-weight: 600; }
table.audit-versions tbody th { font-weight: 400; }
/* The frame is the box's: the cells at its edges draw none of their own. */
table.audit-versions tr > :first-child { border-left: 0; }
table.audit-versions tr > :last-child { border-right: 0; }
table.audit-versions thead th { border-top: 0; }
table.audit-versions tbody tr:last-child > * { border-bottom: 0; }

/* The sticky row and column. A sticky cell needs a background of its own, or the cells scrolling under it show
   through; the rows get theirs (the stripes and the hover as everywhere else) for the field names to take on. A
   collapsed border does not travel with a sticky cell, so the edge it keeps is drawn as a shadow. */
table.audit-versions tbody tr:nth-child(even) { background: #fff; }
table.audit-versions tbody tr:hover { background: #f3f4f6; }
table.audit-versions thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
table.audit-versions tbody th { position: sticky; left: 0; z-index: 1; background: inherit; box-shadow: inset -1px 0 0 var(--line); }
table.audit-versions thead th:first-child { left: 0; z-index: 3; box-shadow: inset -1px -1px 0 var(--line); }

/* What happened to the field in that version, in the legacy colours. */
table.audit-versions td.insert { color: #31b26b; }
table.audit-versions td.update { color: #e87e04; }
table.audit-versions td.delete { color: #d91e18; font-weight: 700; text-align: center; }
table.audit-versions td.unchanged { color: #94a0b2; font-style: italic; }
table.audit-versions td.strong { font-weight: 700; }

/* ---- The print page: the legacy sheet, measured off it ----------------------------------------------------------
   No shell: a white sheet 1,170px wide in the middle of the window, the logo and the stamps above a blue rule, the
   title, and the fields in a striped table of four columns. On paper there is no button and no link colour. */
main.report { padding: 0; }

.report-sheet { width: 100%; max-width: 1170px; margin: 0 auto; padding: 25px 50px 20px 100px; color: #333; }

@media (max-width: 75rem) {
    .report-sheet { padding: 25px 20px 20px; }
}

.report-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    min-height: 79.5px;
    margin: 0 -15px 27px;
    padding: 0 15px;
    border-bottom: 2px solid #4b77be;
}

.report-header img { width: 250px; height: auto; }

.report-header table { width: auto; min-width: 0; font-size: 12px; line-height: 17px; }
.report-header tr, .report-header tr:nth-child(odd), .report-header tr:hover { background: none; }
.report-header th, .report-header td { padding: 0; border: 0; font-size: 12px; }
.report-header th { width: 150px; padding-right: 10px; font-weight: 700; text-align: right; }

.report-label {
    max-width: none;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    line-height: 17px;
}

.report-sheet h1 { margin: 0 0 27px; color: #333; font-size: 24px; font-weight: 700; line-height: 26.4px; overflow-wrap: anywhere; }

.report-table { min-width: 0; margin: 0 0 20px; font-size: 14px; }
.report-table col.label { width: 160px; }
.report-table col.value { width: 200px; }
.report-table th, .report-table td { padding: 6px; border: 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.report-table tr:first-child > * { border-top: 0; }
.report-table th { font-weight: 700; }
/* Notes keep their lines, as the legacy sheet shows them. */
.report-table td { white-space: pre-line; overflow-wrap: anywhere; }
/* The job's own number, larger, as the workshop looks for it first. */
.report-table tr.large > :nth-child(-n+2) { font-size: 16px; font-weight: 700; line-height: 22.9px; }

/* 70px: the legacy table's own 20px under it and the bar's 50px above, which do not run together there. */
.report-actions { display: flex; justify-content: flex-end; margin: 70px 0 0; padding: 15px 15px 0; border-top: 1px solid #4b77be; }

.report-actions .print-button { display: inline-flex; align-items: center; gap: 10px; border-color: #3598dc; background: #3598dc; color: #fff; }
.report-actions .print-button:hover, .report-actions .print-button:focus-visible { border-color: #217ebd; background: #217ebd; color: #fff; }

@media print {
    .page-header, .page-sidebar, .page-footer, .skip, .no-print { display: none !important; }
    body, .shell { background: #fff; color: #000; }
    main, .page-content { padding: 0; }
    .portlet { padding: 0; border: 0; }
    a { color: inherit; text-decoration: none; }
    .report-sheet { max-width: none; padding: 0; }
}

/* ---- A user's mail, on their account's page ---------------------------------------------------------------------- */

/* A row per message, opened by its "+": the date, the subject and how it went, in columns that line up. */
#posta { margin-top: 25px; }
#posta .mail-head, #posta .mail summary {
    display: grid; grid-template-columns: 22px 150px minmax(0, 1fr) 200px; gap: 10px; align-items: center; padding: 7px 8px;
}
#posta .mail-head { background: var(--head); border-bottom: 1px solid var(--line); color: var(--title); font-weight: 600; font-size: 13px; }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list > li { border-bottom: 1px solid var(--line); }
#posta .mail summary { cursor: pointer; list-style: none; }
#posta .mail summary::-webkit-details-marker { display: none; }
#posta .mail summary:hover { background: #f9fafc; }
#posta .mail summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mail-toggle::before {
    content: "+"; display: inline-block; width: 18px; height: 18px; line-height: 16px; text-align: center;
    border: 1px solid var(--field); border-radius: 3px; color: var(--accent); font-weight: 700;
}
.mail[open] .mail-toggle::before { content: "\2212"; }
.mail-subject, .mail-when, .mail-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-state.sent { color: var(--good); }
.mail-state.failed { color: var(--bad); }

/* ---- The mail check (D252): the verdict in a line, then each step in its colour ----------------------------------- */
.mail-check { margin: 0 0 25px; }
.mail-check .verdict { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid; font-weight: 600; }
.mail-check .verdict.ok { border-color: var(--good); background: #eef8f2; color: var(--good); }
.mail-check .verdict.warn { border-color: #c77c02; background: #fdf6e7; color: #8a5a00; }
.mail-check .verdict.fail { border-color: var(--bad); background: #fdf0ef; color: var(--bad); }
.mail-check .verdict span { font-weight: 400; }
/* Not a listing: no listing's minimum width, the step, outcome and time as narrow as they are, the details wrapping. */
.mail-check table { width: 100%; min-width: 0; }
.mail-check tbody th { width: 1%; font-weight: 600; white-space: nowrap; }
.mail-check td.outcome { width: 1%; white-space: nowrap; font-weight: 600; }
.mail-check td.nowrap { width: 1%; }
.mail-check td.wrap { max-width: none; overflow-wrap: anywhere; }
.mail-check tr.ok td.outcome { color: var(--good); }
.mail-check tr.warn td.outcome { color: #8a5a00; }
.mail-check tr.fail td.outcome { color: var(--bad); }
.mail-check tr.skip td { color: #94a0b2; }
.mail-check-form { max-width: 48rem; }
.mail-check-form label.check { display: flex; align-items: center; gap: 8px; }
.mail-state.pending { color: var(--muted); }
.mail-detail { padding: 4px 8px 14px 40px; }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; background: var(--head); border: 1px solid var(--line); padding: 10px; margin: 0; }
@media (max-width: 700px) {
    #posta .mail-head { display: none; }
    #posta .mail summary { grid-template-columns: 22px minmax(0, 1fr); }
    #posta .mail summary .mail-when, #posta .mail summary .mail-state { grid-column: 2; }
    .mail-detail { padding-left: 8px; }
}