@import url("shared/tokens.css");
@import url("shared/chips.css");
@import url("zato_action_button.css");

@keyframes zato-spin {
    to { transform: rotate(360deg); }
}

html,
body,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: sans-serif;
    vertical-align: baseline
}

:focus {
    outline: 0
}

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    color: black;
    background: #f4f5f5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

ol,
ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0
}

caption,
th,
td {
    text-align: left;
    font-weight: normal
}

.sf-menu {
    float: left;
    margin-bottom: 0
}

.sf-menu li {
    background: #363636
}

.sf-menu li li {
    background: #363636
}

.sf-menu li li li {
    background: #363636
}

.sf-menu li:hover,
.sf-menu li.sfHover,
.sf-menu a:focus,
.sf-menu a:hover,
.sf-menu a:active {
    background: #464646;
    outline: 0
}

.sf-menu a {
    border-left: 1px solid #fff;
    border-top: 1px solid #CFDEFF;
    padding: .75em 1em;
    text-decoration: none;
    display: block;
    position: relative
}

span.like-a {
    color: #fff
}

.sf-menu a,
.sf-menu a:visited,
span.like-a {
    font-size: 11px;
    font-family: sans-serif;
    border: none;
    text-decoration: none;
    background-image: none;
    padding-bottom: 0
}

.sf-sub-indicator {
    display: none
}

#console-header {
    background-color: var(--zato-seablue);
    box-shadow: 0px 0px 4px #333;
    min-height: 41px;
    display: flex;
    align-items: center;
}

#logo {
    font-size: 140%;
    padding-left: 5px;
    padding-bottom: 13px;
    color: #999;
    font-weight: 600;
    font-family: sans-serif;
    vertical-align: middle
}

#logout {
    color: #fff;
    margin-left: auto;
    font-size: 0.77rem;
    padding-right: 7.5px
}

#main-menu {
    background-color: #363636;
    border-bottom: 3px solid #aaa
}

#main-menu ul,
span.like-a {
    float: left;
    font-size: 11px;
    font-family: sans-serif
}

#main-menu ul li,
span.like-a {
    display: inline
}

#main-menu ul li a,
span.like-a {
    float: left;
    text-decoration: none;
    color: white;
    padding: 10.5px 5px
}

#main-menu ul li a.spaced {
    line-height: 1rem;
}

#main-menu ul li.wide {
    width: 120px
}

#user-message-div {
    padding-top: 16px;
    font-size: 12px;
    margin-left: 4px;
    margin-right: 4px
}

.user-message {
    padding: 6px;
    border-style: dotted;
    color: #333333;
    text-align: left
}

.user-message-success {
    border-color: #333333;
    border-width: 1px;
    background-color: #bbdd55
}

.user-message-failure {
    padding-top: 9px !important;
    padding-bottom: 10px !important;
    border-color: red;
    border-width: 2px;
    background-color: #eeee33
}

.error-message {
    background-color: #ffccbb;
    padding: 6px;
    margin-bottom: 12px;
    border: 1px dotted #999999;
    font-weight: 600;
    color: #933
}

.loading {
    background: url(/static/gfx/ajax-loader.gif) no-repeat;
    height: 16px
}

.loading:after {
    content: "Please wait ...";
    padding-left: 30px
}

/* #data-table layout — visual styling comes from .zato-table */

#data-table {
    width: 96%;
    margin-left: 2%;
    counter-reset: data_table_counter;
}


#data-table tr.updated {
    background-color: rgba(255, 243, 205, 0.7);
}

#data-table tr.attention td,
#data-table tr.updated td {
    border-bottom: 1px solid rgba(169, 162, 68, 0.5);
}


:root {
    --zato-sort-arrow-room: 15px;
}

#data-table th {
    white-space: nowrap;
    position: relative;
}

#data-table th.header:not(.ignore):nth-child(n+3):hover {
    background: var(--zato-row-hover);
    cursor: pointer;
}

#data-table th a {
    display: block;
    position: relative;
    padding-right: var(--zato-sort-arrow-room);
}

#data-table th a:after {
    content: '';
    display: none;
}

/* Column alignment */
#data-table tr th:has(a[href='#']:contains('Active')) ~ td:nth-child(4),
#data-table tr td:nth-child(4) {
    text-align: center;
}

#data-table tr th:has(a[href='#']:contains('Internal')) ~ td:nth-child(6),
#data-table tr td:nth-child(6) {
    text-align: center;
}

#data-table[data-center-columns="Active,Internal"] tr td:nth-child(4),
#data-table[data-center-columns="Active,Internal"] tr td:nth-child(6) {
    text-align: center;
}

/* Every column centred, except those marked .text-left */
#data-table.center-all-columns th,
#data-table.center-all-columns td {
    text-align: center;
}

#data-table.center-all-columns th.text-left,
#data-table.center-all-columns td.text-left {
    text-align: left;
}

/* A cell spanning the table is not centred */
#data-table.center-all-columns td[colspan] {
    text-align: left;
}

/* The sort arrow reserves room on the right, a centred label needs the same on the left */
#data-table.center-all-columns th:not(.text-left) a {
    padding-left: var(--zato-sort-arrow-room);
}

#data-table td.inline_header {
    background: rgba(6, 60, 101, 0.05);
}

#data-table tbody tr:not(.ignore):not(.updated):nth-child(even) {
    background-color: rgba(6, 60, 101, 0.025);
}

#data-table tbody tr:not(.ignore):not(.updated):hover {
    background-color: var(--zato-row-hover);
}

#data-table td.numbering {
    position: relative;
    text-align: center;
}

#data-table td.numbering:before {
    content: counter(data_table_counter);
    counter-increment: data_table_counter;
    font-weight: 500;
}

#data-table td.impexp,
#data-table th:nth-child(2) {
    display: none
}

.form-data {
    width: 100%;
    border: 1px solid #666;
    padding: 10px;
    font-size: 12px;
    background-color: #ccc;
    color: #000;
}

#login-form .form-data {
    max-width: 620px;
    margin: 0 auto;
    background-color: var(--zato-seablue);
    color: white;
}

.form-data td {
    border: none;
    padding: 4px;
    padding-right: 0px
}

/* A label column is sized to its own text rather than to a share of the table's
   remaining width. */

.form-data td.label-column {
    width: 1%;
    padding-right: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Every label in the first column stays on one line, and the column is exactly as wide
   as its longest label. Inline widths on these cells would override it. */

.form-data.fit-labels > tbody > tr > td:first-child:not([colspan]) {
    width: 1%;
    padding-right: 10px;
    white-space: nowrap;
}

/* The action row spans the full width so that its contents do not determine a column width. */

.form-data td.form-actions {
    vertical-align: middle;
    text-align: left;
}

.form-data td.form-actions .form-buttons {
    float: right;
}

#login-form .form-data td {
    padding: 8px
}

#login-form .form-data td[colspan="2"] {
    text-align: right !important;
    padding: 15px 0 0 0
}

/* Position the login button */
#login-form #login {
    float: right;
    margin-right: 0;
    margin-top: 0
}

#login-form .form-data td:first-child {
    width: 30%;
    text-align: right;
    padding-right: 23px;
    padding-left: 15px
}

#login-form .form-data td:nth-child(2) {
    width: 80%;
    padding-left: 0px;
    padding-right: 70px
}

/* Override any inline styling that might interfere with button positioning */
#login-form .form-data tr:last-child td[style*="text-align:left"] {
    text-align: right !important
}

.ui-dialog-titlebar {
    padding: 10px;
    background-color: #999;
    font-size: 13px;
    border: 1px solid #666;
    border-bottom: none;
    text-align: left;
}

.form_hint {
    font-size: smaller;
    color: #333
}

.disabled {
    font-size:0.78rem;
    color: #888;
}

.attention {
    background-color: #f7f089
}

div.bd {
    box-shadow: 3px 3px 10px #666
}

div.ui-dialog {
    width: 38em;
    z-index: 10000 !important;
}

.ui-dialog-content {
    min-height: 0 !important;
}

p.big-notice {
    background-color: #ccc;
    width: 50%;
    margin: 0 auto;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    font-size: large;
    border: 1px solid #999
}

.ui-dialog-titlebar {
    background-color: var(--zato-seablue-light1);
    font-size: 13px;
    border-bottom: none;
    text-align: left;
    color: #eee;
}

.ui-dialog-titlebar.ui-helper-clearfix::before,
.ui-dialog-titlebar.ui-helper-clearfix::after {
    display: none;
}

.ui-dialog-title-text {
    user-select: text;
    cursor: text;
}

/* The system colours are the browser's own selection colours. */
.ui-dialog-title-text::selection {
    background-color: Highlight;
    color: HighlightText;
}

.ui-icon-closethick {
    display: none
}

.ui-dialog-buttonset {
    text-align: right
}

.ui-icon-closethick {
    display: none
}

select {
    -webkit-appearance: listbox !important;
}

.ui-widget {
    box-shadow: 3px 3px 10px #666
}

.ui-slider .ui-slider-handle {
    border: 1px solid #999
}

#popup_container {
    border-radius: 0 0 0 0
}

h2.zato {
    font-size: 80%;
    padding: var(--zato-page-heading-padding-block) var(--zato-page-heading-padding-inline-end) var(--zato-page-heading-padding-block) var(--zato-page-heading-padding-inline-start);
    margin-left: var(--zato-page-heading-margin-inline);
    margin-right: var(--zato-page-heading-margin-inline);
    color: #222;
    border-bottom: 1px dotted #767676
}

div.prompt {
    font-size: 11px;
    padding: 10px;
    padding-left: 2%
}

div.prompt form {
    padding-top: 4px
}

/* The standard link face - also available as .zato-link-face for a span
   inside a larger anchor, when only part of the anchor's text is meant
   to carry the link look. A dashboard action badge that happens to be a
   link keeps the badge's own face instead, so it is left out here. The
   exclusions live in :where(), which weighs nothing, so this face always
   sits at the bottom of the cascade and anything more specific - a table
   header's own link rule, a badge's - wins by mere existence, never by
   out-shooting it.

   A link that wants nothing from these rules - no face, no hover - carries
   .zato-link-unstyled and is left entirely alone, no edits here needed. */
a:where(:not(.menu-link, .dashboard-panel-action-badge, .zato-link-unstyled)),
.zato-link-face {
    color: rgb(17, 17, 17);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-weight: 400;
    background-image: repeating-linear-gradient(
        90deg,
        var(--zato-link-dash) 0px,
        var(--zato-link-dash) 3px,
        transparent 3px,
        transparent 6px
    );
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 2px;
}

a:where(:not(.menu-link):not(.chosen-single):not(.status-badge, .dashboard-panel-action-badge, .audit-log-pane-frame a, .zato-link-unstyled)):hover,
a:where(:not(.menu-link)):hover .zato-link-face {
    color: var(--zato-link-hover) !important;
    background-color: transparent;
    text-decoration: none;
}

/* Default (dark) Tippy tooltips: light link text + dashed underline via same variable */
.tippy-box .tippy-content {
    --zato-link-dash: rgba(255, 255, 255, 0.38);
}

.tippy-box .tippy-content a:not(.menu-link) {
    color: #e8e8e8;
}

.tippy-box .tippy-content a:not(.menu-link):hover {
    color: #fff !important;
    --zato-link-dash: rgba(255, 255, 255, 0.85);
}

th.header a:hover {
    background-color: initial !important;
}

a.top,
a.top:hover {
    color: #fff !important;
    text-decoration: none;
    background-image: none;
    background-color: rgb(1, 40, 69) !important;
    padding-bottom: 0;
}

a:not(.menu-link):not(.chosen-single):not(.status-badge):is(.top):hover {
    color: #fff !important;
    background-color: rgb(1, 40, 69) !important;
}

.header-link-styled {
    display: inline;
    padding: 3px;
    background: rgb(1, 40, 69);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    font-size: 12.32px;
    font-weight: 400;
    font-family: arial, helvetica, clean, sans-serif;
    text-decoration: none !important;
    vertical-align: baseline;
}

a.top.header-link-styled {
    padding-bottom: 3px;
}

a.hint {
    color: #333;
    font-size: 10px
}

#footer {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    margin: 5px 5px 0px 0px;
    padding: 5px;
    background-color: #e0e0e0;
    text-align: right
}

.validation-advice {
    color: #c00
}

.options-button {
    cursor: pointer
}

#markup {
    width: 94%;
    margin: 0 auto
}

#markup.columns {
    display: flex;
    width: 100%;
}

body {
    counter-reset: left-column-counter;
    counter-reset: right-column-counter;
}

.left-column {
    background-color: #fff;
    flex-grow: 1;
    max-width: 50%;
    max-height: 88vh;
    overflow: scroll;
}

.right-column {
    background-color: #fff;
    flex-grow: 1;
    max-width: 50%;
    max-height: 88vh;
    overflow: scroll;
}

.column-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-content:stretch;
}

.column-header {
    text-align: left;
    padding-left: 0.7rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #eee;
}

.column-header.left {
    padding-left: 0.3rem;
    border-right: 1px solid #bbb
}

.column-body.left {
    border-right: 1px solid #bbb
}

.listing {
    min-height: 80vh;
}

#listing-left-empty,
#listing-right-empty
{
    margin-top: 1rem;
    font-size: 0.91rem !important;
}

.handle {
    cursor: move;
}

.list-group-item {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: #f6f6f6;
    margin: 0.3rem;
    padding-top: 0.05rem;
    padding-bottom: 0.05rem;
    padding-left: 0.4rem;
    text-align: left;
    font-size: 0.76rem !important;
    font-family: monospace;
    display: flex;
    align-items: center;
    transition: background-color 0.05s ease;
}

.list-group-item .sec-type {
    text-transform: uppercase;
    font-size: 0.56rem;
    letter-spacing: 0.05rem;
    background-color: #ddd;
    padding: 0.3rem;
    margin-left: 0.4rem;
    margin-right: 0.1rem;
    min-width: 5rem;
    text-align: center;
}

.list-group-item a {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-top: 0.18rem;
    padding-bottom: 0.2rem;
    display: inline-block;
}

.list-group-item .handle {
    flex: 1;
}

.list-group-item .handle:after {
    content: '\2807';
    font-size: 1.2rem;
    float: right;
    color: #666;
}

.list-group-item.left {
    counter-increment: left-column-counter;
}

.list-group-item.right {
    counter-increment: right-column-counter;
}

.list-group-item.left::before {
    content: counter(left-column-counter) ". ";
}

.list-group-item.right::before {
    content: counter(right-column-counter) ". ";
}

.list-group-item:hover {
    background-color: #f1f178;
}

.list-group-item.selected {
    background-color: #e3e3e3;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    transition: background-color 0.3s ease;
}

.list-group-item.selected a {
    background-color: #ff9;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-top: 0.18rem;
    padding-bottom: 0.2rem;
}

.list-group-item.selected .sec-type {
    background-color: #c9c9c9;
}

.list-group-item.left.selected::before,
.list-group-item.right.selected::before
{
    font-weight: 600;
}

.list-group-item.left.selected::before {
    content: counter(left-column-counter) ". ";
}

.list-group-item.right.selected::before {
    content: counter(right-column-counter) ". ";
}

#column-header-right-menu {
    float: right;
    font-size: 0.78rem;
    padding-top: 0.1rem;
    padding-right: 0.5rem;
}

th.ignore,
td.ignore,
div.ignore {
    display: none
}

div.page_prompt {
    padding: 4px;
    padding-left: 2%;
    font-size: 12px;
    margin-bottom: 16px;
    --zato-action-button-text: #000;
    --zato-action-button-gradient-start: #ffd84a;
    --zato-action-button-gradient-end: #ffc311;
    --zato-action-button-border: #d4a00a;
    --zato-action-button-border-bottom: #b8860b;
}

div.page_prompt a:not(.common):not(.common):not(.common),
div.page_prompt a:not(.common):not(.common):not(.common):hover,
div.page_prompt a:not(.common):not(.common):not(.common):active {
    text-transform: none !important;
    font-size: 12px !important;
    letter-spacing: normal !important;
    color: #000 !important;
    text-decoration: none;
}

div.page_prompt a.common:hover {
    color: var(--zato-link-hover) !important;
}

div.page_prompt a.current {
    font-weight: bolder;
}

#id_file {
    width: 100%
}

.hidden {
    visibility: hidden;
    display: none
}

.visible {
    visibility: visible
}

#logo-link {
    text-decoration: none;
}

#logo-link:hover {
    background-color: var(--zato-seablue);
}

.form-data tr td a {
    color: #000;
    font-weight: 400;
}

.form-data tr td a:not(.chosen-single):hover {
    color: var(--zato-link-hover) !important;
}

.multirow-button {
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
}

table.multi-select-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

.ui-icon {
    display: none !important;
}

.chosen-container {
    min-width:100%;
}

.chosen-container a,
.chosen-container a:hover {
    font-weight: 400;
    color: #000 !important;
    background-image: none;
    padding-bottom: 0;
}

.chosen-container .chosen-results li {
    font-weight: 400;
}

.chosen-container .chosen-results li.highlighted {
    background-color: rgba(0, 0, 0, 0.03);
    background-image: none;
    color: #000;
}

.chosen-container .chosen-results li:hover {
    color: #000 !important;
}

.chosen-container .chosen-results li.result-selected {
    color: #000;
}

input[data-zato-validator-required="required"]::placeholder {
    opacity: 0.64;
    color: #000;
  }

.zato-validator-attention {
    border: 2px dotted red !important;
    background-color: #fffcc8 !important;
}

.zato-toggle-hidden,
.zato-toggle-hidden-edit {
    display: none;
}

.zato-toggle-visible,
.zato-toggle-visible-edit
 {
    visibility: visible;
}

.zato-blinking {
    animation: blink 0.5s linear 1;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* The honey pulse that asks the reader to look here - the version the updates
   page has just found, the answer a refused save is waiting for. It lives here
   rather than next to either of them so that both wear the very same pulse.
   It fits the words it is put on, never the box around them, which is what
   the inline-block is for - a transform passes an inline element by. */
@keyframes pulsate {
    0%, 100% { transform: scale(1); background-color: transparent; }
    50% { transform: scale(1.1); background-color: #fffacd; }
}

.pulsate {
    animation: pulsate 0.5s ease-in-out 3;
    display: inline-block;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.options-expanded {
    background-color:#e3e3e0;
}
.options-expanded td.to-ignore {
    background-color: #ccc;
}

.menu-link {
    cursor: pointer;
}

div.action-panel {
    text-align:center;
    padding: 10px;
    padding-top: 14px;
    padding-right: 30px;
    font-size: 1rem;
    float: right;
    z-index: 5300
}

div.action-panel span.form_hint {
    vertical-align: middle;
    display: inline-block
}

div.action-panel span.previous-next,
div.action-panel a {
    font-size: 0.85rem;
    vertical-align: middle;
    display: inline-block;
    padding: 3px 3px 2px 3px;
    position: relative;
    top: 0px;
    text-align: center;
}

div.action-panel span.previous-next.prev-slot,
div.action-panel a.prev-slot {
    min-width: 61px;
}

div.action-panel span.previous-next.next-slot,
div.action-panel a.next-slot {
    min-width: 36px;
}

div.action-panel span.previous-next {
    color: #666;
}

.status-badge {
    display: inline;
    padding: 3px;
    background: var(--zato-seablue);
    color: #fff !important;
    border: 1px solid var(--zato-badge-border);
    border-radius: 3px;
    font-size: 12.32px;
    font-weight: 400;
    font-family: arial, helvetica, clean, sans-serif;
    text-decoration: none !important;
    vertical-align: baseline;
    transition: color 0.3s ease, background 0.3s ease;
    visibility: hidden;
}

.status-badge.loaded {
    visibility: visible;
    padding-left: 6.5px;
}

.status-badge::before {
    display: none;
}

.status-badge.with-shine {
    color: var(--zato-badge-gold) !important;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 40%,
            var(--zato-badge-shine) 50%,
            transparent 60%,
            transparent 100%
        ),
        var(--zato-seablue);
    background-size: 200% 100%, 100% 100%;
    transition: all 0.25s ease;
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        background-position: 200% 0, 0 0;
    }
    100% {
        background-position: -200% 0, 0 0;
    }
}

.status-badge.with-shine:hover {
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 40%,
            var(--zato-badge-shine) 50%,
            transparent 60%,
            transparent 100%
        ),
        var(--zato-seablue);
    background-size: 200% 100%, 100% 100%;
    color: var(--zato-badge-gold) !important;
}

.status-badge.header-badge {
    margin-left: 8px;
    margin-right: 4px;
}

.status-badge.white {
    color: #fff !important;
}

@keyframes zatoFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.zato-unique-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    cursor: default;
    animation: zatoFadeIn 0.25s ease-in;
    transition: opacity 0.2s ease-out;

    /* Above the field it annotates - formalize.css raises every focused
       input to z-index 1 and inside a flex wrapper, like the wizard's name
       field, that actually takes effect and would cover the indicator */
    z-index: 2;
}

.zato-unique-ok {
    color: #2e7d32;
    font-weight: bold;
    font-size: 0.65rem;
    background-color: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.3);
    width: 0.9rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    border-radius: 50%
}

.zato-unique-taken {
    font-family: monospace;
    font-size: 0.55rem;
    font-weight: bold;
    line-height: 1.2;
    background-color: rgba(220, 53, 69, 0.15);
    color: #b71c1c;
    border: 1px solid rgba(220, 53, 69, 0.25);
    padding: 0.08rem 0.4rem;
    border-radius: 3px
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Live form updates - golden puff animation for elements updated via SSE                                                       */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@keyframes zato-live-puff {
    0%   { background-color: rgba(255, 193, 7, 0.35); }
    100% { background-color: transparent; }
}

.zato-live-updated {
    animation: zato-live-puff 1.5s ease-out;
}
.text-center { text-align: center; }
.collapsible-toggle { padding-top: 0.62rem !important; }

/* ------------------------------------------------------------ */
/* Inline spinner overlay                                        */
/* ------------------------------------------------------------ */

.zato-spinner-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    z-index: 9999;
}

.zato-spinner-overlay-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: zato-spinner-spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes zato-spinner-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ------------------------------------------------------------ */
/* Checkbox slider - every checkbox renders as a toggle switch   */
/* ------------------------------------------------------------ */

:root {
    --toggle-width: 48px;
    --toggle-height: 24px;
    --toggle-knob-size: 18px;
    --toggle-knob-offset: 3px;
    --toggle-travel: 24px;
    --toggle-off-background: #ccc;
    --toggle-on-background: var(--primary-dark);
    --toggle-knob-color: white;
}

/* Excluded from the slider look: row-selection checkboxes in list tables (td.impexp),
   tri-state checkboxes (.tri-state), item pickers in multi-select tables and any checkbox
   that says so itself (.zato-plain-checkbox). */
input[type="checkbox"]:not(td.impexp input):not(.tri-state):not(.multi-select-table input):not(.zato-plain-checkbox) {
    display: inline-block;
    position: relative;
    top: 0;
    width: var(--toggle-width);
    height: var(--toggle-height);
    margin: 0;
    border: none;
    vertical-align: middle;
    background-color: var(--toggle-off-background);
    border-radius: var(--toggle-height);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.24s;
}

input[type="checkbox"]:not(td.impexp input):not(.tri-state):not(.multi-select-table input):not(.zato-plain-checkbox):before {
    content: "";
    position: absolute;
    left: var(--toggle-knob-offset);
    bottom: var(--toggle-knob-offset);
    width: var(--toggle-knob-size);
    height: var(--toggle-knob-size);
    background-color: var(--toggle-knob-color);
    border-radius: 50%;
    transition: transform 0.24s;
}

input[type="checkbox"]:not(td.impexp input):not(.tri-state):not(.multi-select-table input):not(.zato-plain-checkbox):checked {
    background-color: var(--toggle-on-background);
}

input[type="checkbox"]:not(td.impexp input):not(.tri-state):not(.multi-select-table input):not(.zato-plain-checkbox):checked:before {
    transform: translateX(var(--toggle-travel));
}

/* Smaller slider inside dialog forms. The off-state track
   uses a darker shade so it stands out against the form background. */
.data-popup {
    --toggle-width: 32px;
    --toggle-height: 16px;
    --toggle-knob-size: 12px;
    --toggle-knob-offset: 2px;
    --toggle-travel: 16px;
    --toggle-off-background: #999;
    --toggle-on-background: #2d6392;
}

/* ------------------------------------------------------------ */
/* Time ago - tooltip table                                      */
/* ------------------------------------------------------------ */

.zato-time-ago-tooltip {
    margin: 2px;
    border-collapse: collapse;
}

.zato-time-ago-tooltip-title {
    margin: 2px 2px 4px 2px;
    padding: 3px 6px;
    font-weight: bold;
    text-align: left;
}

.zato-time-ago-tooltip th,
.zato-time-ago-tooltip td {
    padding: 3px 6px;
    text-align: left;
    white-space: nowrap;
}

.zato-time-ago-tooltip th {
    padding-right: 12px;
    font-weight: bold;
}

:root {
    --zato-highlight-badge-top: #ffd84a;
    --zato-highlight-badge-bottom: #ffc311;
    --zato-highlight-badge-edge: #d4a00a;

    /* How far the honey reaches past the text, and how its corners are taken off */
    --zato-highlight-badge-spread: 3px;
    --zato-highlight-badge-radius: 3px;
}

/* The badge worn by whatever the reader is being pointed at - a name cell with an
   inline form open, a review group an Edit link goes to. Everything outside the text
   is drawn rather than added to the box, so the badge moves nothing when it goes on. */
.zato-highlight-badge {
    background: linear-gradient(to bottom, var(--zato-highlight-badge-top), var(--zato-highlight-badge-bottom));
    border-radius: var(--zato-highlight-badge-radius);
    box-shadow: 0 0 0 var(--zato-highlight-badge-spread) var(--zato-highlight-badge-bottom);
    outline: 1px dashed var(--zato-highlight-badge-edge);
    outline-offset: var(--zato-highlight-badge-spread);
}

/* ------------------------------------------------------------ */
/* Time ago - refresh spinner                                    */
/* ------------------------------------------------------------ */

/* The value keeps a fixed minimum width so that texts of different lengths,
   e.g. "9 seconds ago" and "14 seconds ago", never resize the whole column.
   Changed values dim slightly, swap their text and come back - a subtle dip
   rather than a full fade-out, so refreshes never pull the eye. Both the
   duration and the dip opacity are set from the time_ago config in JavaScript. */
.zato-time-ago-value {
    display: inline-block;
    min-width: 8em;
    opacity: 1;
    transition: opacity var(--zato-time-ago-value-fade-ms) ease;
}

.zato-time-ago-value.zato-time-ago-fading {
    opacity: var(--zato-time-ago-value-fade-opacity);
}

/* The humanized age that trails a timestamp is the lesser of the two readings,
   so it is a touch smaller and a touch dimmer than the timestamp it follows. */
.zato-time-ago-suffix {
    font-size: 80%;
    opacity: 0.8;
}

/* The column takes no spare width - with left-aligned values, any room the table
   hands this column piles up to the right of the values and pushes the columns
   after it away, so the column stays as wide as its header and no wider. The values
   never wrap, so the narrow column is safe. */
#data-table th.zato-time-ago-header {
    width: 1%;

    /* The narrow column must not break a multi-word name or push the countdown to a line of its own. */
    white-space: nowrap;
}

#data-table td.zato-time-ago {
    white-space: nowrap;
}

/* An action link pulled towards the link after it - the table distributes its spare
   width in proportion to content, so a long link draws the most room and drifts away
   from its neighbour. The cell keeps its width untouched, since changing it would move
   every other column, and the text alone sits at the cell's right edge, then steps back
   by a fixed gap so it is not glued to the next link. Relative positioning is used on
   purpose - it moves the text without changing any width the table lays out. */
:root {
    --zato-action-gap: 40px;
}

#data-table td.action {
    text-align: right;
}

#data-table td.action > a {
    position: relative;
    right: var(--zato-action-gap);
}

/* The header link is a block element by default, which would push the spinner
   to its own line - inline-block keeps them side by side, and dropping
   the built-in right padding keeps the spinner close to the column name. */
#data-table th.zato-time-ago-header a {
    display: inline-block;
    padding-right: 0;
}

/* One shared slot next to the column name - the countdown and the spinner both live
   inside it and swap places through opacity, so the spinner appears exactly where
   the countdown text was and the layout never moves. */
.zato-time-ago-indicator {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    /* The slot must be exactly as tall as the countdown text inside it - otherwise
       the header's taller strut leaves empty space above the text and pushes both
       the text and the spinner below the middle of the header. */
    font-size: 10px;
    line-height: 10px;
    /* vertical-align: middle centers on the parent's x-height midpoint, which sits
       below the true middle of the 19px line box, so the slot is nudged back up. */
    top: -1px;
}

.zato-time-ago-indicator .zato-time-ago-countdown {
    /* Top-aligned inside the tight 10px slot, so no baseline gap can reappear below it. */
    vertical-align: top;
}

.zato-time-ago-indicator .zato-time-ago-spinner {
    position: absolute;
    left: 12px;
    top: 50%;
    margin: -1.5px 0 0 0;
}

/* A gentle hint - the tiny muted text that sits next to whatever it explains,
   like the "5s" countdown next to a column name or the
   "Click to edit" note after a summary link. */
.zato-soft-hint {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: normal;
    text-transform: none;
    letter-spacing: 0;
    color: #999;
}

/* The small print of a table cell - what a row says in passing rather than
   what it is about, like the MSH matchers an HL7 MLLP channel takes. */
.zato-table-note {
    font-size: 0.75rem;
}

/* The countdown to the next refresh - a soft hint that reads right after the
   column name and only toggles its opacity while the spinner is shown, so the
   spinner never shifts the layout around it. */
.zato-time-ago-countdown {
    --zato-time-ago-countdown-fade-ms: 350ms;
    opacity: 0;
    vertical-align: middle;
    transition: opacity var(--zato-time-ago-countdown-fade-ms) ease;

    /* The countdown doubles as a pause and resume toggle. */
    cursor: pointer;
}

.zato-time-ago-countdown.is-visible {
    opacity: 1;
}

/* The refresh progress bar - a thin line under the column name that drains
   over the refresh interval and refills when the refresh fires. It is
   absolutely positioned inside the header cell, so it never affects
   the layout around it. Its animation is started from JavaScript so that
   the duration always matches the configured refresh interval. */
.zato-time-ago-progress {
    --zato-time-ago-progress-fade-ms: 350ms;
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 52px;
    height: 2px;
    border-radius: 1px;
    background-color: #bbb;
    transform-origin: left center;
    opacity: 0;
    transition: opacity var(--zato-time-ago-progress-fade-ms) ease;
}

.zato-time-ago-progress.is-visible {
    opacity: 1;
}

@keyframes zato-time-ago-drain {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* The one shared spinner in the column header is a ring of eight dots drawn
   with box-shadows around the element, rotating in discrete steps so the
   brightest dot appears to march around the circle. The margins reserve the
   ring's full extent so the spinner never shifts the layout around it.
   Fade-in and fade-out have their own durations - set the fade-in one
   to zero to make the spinner appear instantly and only fade out. */
.zato-time-ago-spinner {
    --zato-time-ago-spinner-fade-in-ms: 350ms;
    --zato-time-ago-spinner-fade-out-ms: 350ms;
    display: inline-block;
    position: relative;
    top: -2px;
    opacity: 0;
    width: 3px;
    height: 3px;
    margin-left: 12px;
    margin-right: 9px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow:
        0 -6px 0 rgba(102, 102, 102, 1),
        4.2px -4.2px 0 rgba(102, 102, 102, 0.85),
        6px 0 0 rgba(102, 102, 102, 0.7),
        4.2px 4.2px 0 rgba(102, 102, 102, 0.55),
        0 6px 0 rgba(102, 102, 102, 0.4),
        -4.2px 4.2px 0 rgba(102, 102, 102, 0.3),
        -6px 0 0 rgba(102, 102, 102, 0.2),
        -4.2px -4.2px 0 rgba(102, 102, 102, 0.1);
    animation: zato-time-ago-dots 0.8s steps(8) infinite;
    transition: opacity var(--zato-time-ago-spinner-fade-out-ms) ease;
}

.zato-time-ago-spinner.is-visible {
    opacity: 1;
    transition: opacity var(--zato-time-ago-spinner-fade-in-ms) ease;
}

@keyframes zato-time-ago-dots {
    to { transform: rotate(360deg); }
}