/* Site-wide theme following the TELUS PharmaConnect design system (https://pharmaconnect.ca/styles/index).
   Loaded after Kroll.css and the jQuery UI theme, it restyles the existing markup (header, navigation, tables, forms, cards,
   buttons) without changing the page structure. Admin.css adds the layout of the admin pages on top of this. */
:root {
    --pc-primary: #4a286d;
    --pc-primary-light: #ece9f0;
    --pc-primary-dark: #311a48;
    --pc-green: #248700;
    --pc-green-dark: #1b5e00;
    --pc-danger: #c12335;
    --pc-danger-dark: #8f1a28;
    --pc-warning: #b65c0c;
    --pc-text: #2c2e30;
    --pc-text-light: #54595f;
    --pc-form-border: #54595f;
    --pc-focus: #80bdff;
    --pc-focus-shadow: rgba(0, 123, 255, 0.25);
    --pc-separator: #d8d8d8;
    --pc-separator-light: #eeeeee;
    --pc-bg-light: #f7f7f8;
    --pc-bg-medium: #f2f2f2;
    --pc-table-border: #cecece;
    --pc-table-data-border: #ecedef;
    --pc-card-shadow: rgba(176, 176, 176, 0.5);
    --pc-font: "Helvetica Now for TELUS", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --pc-font-display: "Helvetica Now for TELUS Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- base ---------- */
html { background: #fff; }

body {
    margin: 0;
    font-family: var(--pc-font);
    font-size: 16px;
    line-height: 24px;
    color: var(--pc-text);
    text-align: left;
    background: #fff;
}

a { color: var(--pc-primary); }
a:hover { color: var(--pc-primary-dark); }
a:focus-visible { outline: 2px solid var(--pc-focus); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--pc-font-display); color: var(--pc-text); }
h1 { font-size: 32px; line-height: 40px; font-weight: 400; text-align: left; color: var(--pc-primary); }
h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
h3 { font-size: 20px; line-height: 32px; font-weight: 700; }
h4 { font-size: 18px; line-height: 24px; font-weight: 700; }
h5, h6 { font-size: 16px; line-height: 24px; font-weight: 700; }
p { margin: 0 0 16px; }
strong, .bold { font-weight: 700; }

#content {
    clear: both;
    max-width: none;
    margin: 0;
    padding: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

/* ---------- header ---------- */
div#pageHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    height: auto;
    margin: 0;
    padding: 12px 24px;
    border-bottom: 1px solid var(--pc-separator);
    background: #fff;
}

div#pageHeader > div { display: flex; align-items: center; gap: 16px; }
div#pageHeader img { float: none; max-height: 48px; width: auto; }

#siteTitle {
    position: static;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--pc-primary);
}

#userNavigation {
    display: flex;
    align-items: center;
    gap: 16px;
    float: none;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 16px;
}

#userNavigation li { float: none; display: flex; align-items: center; }
#userNavigation a, #userNavigation A, #userNavigation .LinkButton {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pc-primary);
    font: inherit;
    text-decoration: none;
}

#userNavigation a:hover, #userNavigation .LinkButton:hover { text-decoration: underline; color: var(--pc-primary); }

/* ---------- navigation tabs ---------- */
#globalNavigation {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    float: none;
    width: auto;
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--pc-separator);
    background: #fff;
    line-height: 24px;
}

#globalNavigation li { float: none; }
#globalNavigation:first-child { padding-left: 24px; }
#globalNavigation li:first-child a { margin-left: 0; }
#globalNavigation li.floatRight { margin-left: auto; align-self: center; }
#globalNavigation li:last-child.floatRight { margin-right: 0; }

#globalNavigation A, #globalNavigation a {
    display: block;
    margin: 0;
    padding: 12px 16px 9px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--pc-text);
    font-weight: 400;
    text-decoration: none;
}

#globalNavigation a:hover, #globalNavigation a:active { background: var(--pc-bg-light); border-bottom-color: var(--pc-underline, #bcbbc1); color: var(--pc-primary); }
#globalNavigation a.selected:link, #globalNavigation a.selected:visited { position: static; background: transparent; border-bottom-color: var(--pc-primary); color: var(--pc-primary); font-weight: 700; }

/* secondary navigation of a section */
#globalNavigation ul {
    position: static;
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    order: 3;
    float: none;
    width: auto;
    margin: 0 -24px;
    padding: 0 24px;
    border-top: 1px solid var(--pc-separator-light);
    background: var(--pc-bg-light);
}

#globalNavigation ul:empty { display: none; }
#globalNavigation ul li { float: none; display: block; margin: 0; }
#globalNavigation ul li:first-child a { margin-left: 0; }
#globalNavigation ul a, #globalNavigation ul A { display: block; margin: 0; padding: 8px 16px 5px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--pc-text); font-size: 14px; }
#globalNavigation ul a:hover, #globalNavigation ul a:active { background: transparent; color: var(--pc-primary); border-bottom-color: #bcbbc1; }
#globalNavigation ul a.selected:link, #globalNavigation ul a.selected:visited { color: var(--pc-primary); border-bottom-color: var(--pc-primary); font-weight: 700; }
#globalNavigationSearch { float: none; margin: 0; }

/* ---------- tables ---------- */
table { margin-top: 0; margin-left: 0; margin-right: 0; border-collapse: collapse; border-spacing: 0; }
/* the old pages fix column widths in pixels with width attributes; let the browser fit the columns to the window instead */
table.NoOverflow { table-layout: auto; max-width: 100%; }
table[width] { width: 100%; }
th[width], td[width] { width: auto; }

th {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--pc-primary-dark);
    background: var(--pc-primary);
    color: #fff;
    font-weight: 700;
    text-align: left;
    vertical-align: middle;
}

tr.TableHeaderRow { height: auto; background: var(--pc-primary); color: #fff; font-size: 16px; }
.TableHeaderRow th { margin: 0; padding: 12px 16px; vertical-align: middle; }
.TableSubHeaderRow th { padding: 8px 16px; }
tr.TableSubHeaderRow { background: var(--pc-primary-light); }
.TableSubHeaderRow th { background: var(--pc-primary-light); color: var(--pc-primary); border-bottom: 1px solid var(--pc-table-border); }

td { padding: 12px 16px; border: 0; border-bottom: 1px solid var(--pc-table-data-border); vertical-align: middle; }
tr:last-child > td { border-bottom: 0; }
tr.odd, tr.even { background: transparent; }
tbody tr:hover { background: var(--pc-bg-light); }
td a { color: var(--pc-primary); text-decoration: none; }
td a:hover { color: var(--pc-primary); text-decoration: underline; }
tr.UnpublishedUpdate, tr.UnpublishedUpdate td, tr.UnpublishedUpdate td a { color: var(--pc-text-light); }

table.sortable { width: 100%; border: 1px solid var(--pc-table-border); border-radius: 4px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.sortable th, table.sortable td { padding: 10px 12px; }
table.sortable thead tr .tablesorter-header { padding-right: 28px; background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=url],
input[type=date], input[type=datetime-local], input:not([type]), textarea, select {
    box-sizing: border-box;
    min-height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--pc-form-border);
    border-radius: 4px;
    background: #fff;
    color: var(--pc-text);
    font: 400 16px/24px var(--pc-font);
    vertical-align: middle;
}

input::placeholder, textarea::placeholder { font-style: italic; color: var(--pc-text-light); }
input:focus, textarea:focus, select:focus { border-color: var(--pc-focus); box-shadow: 0 0 0 3px var(--pc-focus-shadow); outline: 0; }
input:disabled, textarea:disabled, select:disabled { background: var(--pc-bg-medium); color: var(--pc-text-light); }
label { font-weight: 700; }
fieldset { margin-bottom: 16px; }

button, input[type=submit], input[type=button], input[type=reset], a.button, .ui-button, .ui-widget button {
    min-height: 40px;
    padding: 7px 20px;
    border: 2px solid var(--pc-primary);
    border-radius: 4px;
    background: var(--pc-primary);
    color: #fff;
    font: 500 16px/24px var(--pc-font);
    cursor: pointer;
    text-decoration: none;
}

button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .ui-button:hover { background: #fff; color: var(--pc-primary); border-color: var(--pc-primary); }
button:active, input[type=submit]:active, input[type=button]:active { background: var(--pc-primary-dark); border-color: var(--pc-primary-dark); color: #fff; }
button:focus-visible, input[type=submit]:focus-visible, input[type=button]:focus-visible { background: #fff; color: var(--pc-text); border-color: var(--pc-focus); box-shadow: 0 0 0 3px var(--pc-focus-shadow); outline: 0; }
button:disabled, input[type=submit]:disabled, input[type=button]:disabled { opacity: 0.6; cursor: not-allowed; }
/* design system: the submit button is the main action of a form (green); other buttons are secondary (purple) */
button[type=submit], input[type=submit] { border-color: var(--pc-green); background: var(--pc-green); }
button[type=submit]:hover, input[type=submit]:hover { border-color: var(--pc-green); background: #fff; color: var(--pc-green); }
button[type=submit]:active, input[type=submit]:active { border-color: var(--pc-green-dark); background: var(--pc-green-dark); color: #fff; }
a.button { box-sizing: border-box; }
/* list heading with the call-to-action button on the right */
.ListHeader { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.ListHeader h1 { margin: 0; }
/* a filter (label + select) above a list */
.FilterBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.FilterBar select { min-width: 240px; }
.ListHeader a.button { display: inline-block; text-align: center; }
/* a submit that is a lookup rather than the main action of a form stays secondary (purple) */
button[type=submit].btn-search { border-color: var(--pc-primary); background: var(--pc-primary); }
button[type=submit].btn-search:hover { border-color: var(--pc-primary); background: #fff; color: var(--pc-primary); }
button[type=submit].btn-search:active { border-color: var(--pc-primary-dark); background: var(--pc-primary-dark); color: #fff; }
button.LinkButton { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--pc-primary); font: inherit; }
button.LinkButton:hover { background: transparent; color: var(--pc-primary); text-decoration: underline; }
button.LinkButton:active { background: transparent; color: var(--pc-primary-dark); }

select {
    padding-right: 40px;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232c2e30' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}

select:disabled { background-color: var(--pc-bg-medium); }
textarea { min-height: 96px; }
input[type=file] { font: 400 16px/24px var(--pc-font); }

input[type=radio] { accent-color: var(--pc-green); width: 20px; height: 20px; vertical-align: middle; }

input[type=checkbox] {
    box-sizing: border-box;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0 8px 0 0;
    border: 1px solid var(--pc-form-border);
    border-radius: 4px;
    background: #fff;
    vertical-align: middle;
    appearance: none;
    cursor: pointer;
}

input[type=checkbox]:checked {
    border-color: var(--pc-green);
    background: var(--pc-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath d='M1.5 5.5l4 4 7-8' fill='none' stroke='white' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center;
}

input[type=checkbox]:focus-visible { border-color: var(--pc-focus); box-shadow: 0 0 0 3px var(--pc-focus-shadow); outline: 0; }
input[type=checkbox]:disabled { background-color: var(--pc-bg-medium); cursor: not-allowed; }
/* the design system's label next to a checkbox is regular weight */
input[type=checkbox] + label { font-weight: 400; vertical-align: middle; }

/* ---------- cards / panels ---------- */
.BoxPanel, .StoreInformation, div.Update, .ProblemItem, .ProblemItemOpen {
    margin: 0 0 24px;
    min-width: 0;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 6px 0 var(--pc-card-shadow);
}

.BoxPanel-Header, .StoreInformationHeader, .ProblemItemHeader, .Update-Header {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--pc-separator);
    border-radius: 4px 4px 0 0;
    background: var(--pc-primary-light);
    color: var(--pc-primary);
}

.StoreInformationHeader .StoreName h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--pc-primary); }
.StoreInformationHeader .StoreName a { color: var(--pc-primary); }
.StoreInformationHeader .KrollId h2 { margin: 4px 0 0; font-size: 16px; line-height: 24px; color: var(--pc-text-light); }
.StoreInformation fieldset { margin: 0; padding: 16px; border: 0; }
.StoreInformation fieldset dl { display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr); gap: 12px 24px; margin: 0; }
.StoreInformation fieldset dl dt { float: none; width: auto; margin: 0; padding: 0; font-family: var(--pc-font-display); font-weight: 700; }
.StoreInformation fieldset dl dd { float: none; margin: 0; padding: 0; color: var(--pc-text); overflow-wrap: anywhere; }
.StoreAddressInformation { font-size: 16px; padding: 12px 16px; }

.UpdateError, .ErrorMessage {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px;
    border-radius: 4px;
    background: #fff6f8;
    color: var(--pc-text);
    text-align: left;
}

.UpdateError::before, .ErrorMessage::before {
    content: "!";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--pc-danger);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.UpdateError ul, .UpdateError .validation-summary-errors ul { margin: 0; padding: 0; }
.UpdateError li { list-style: none; margin: 0; padding: 0; }
.UpdateStoreFailure { color: var(--pc-danger); }

/* the error/alert card of the design system: pale red card with a red "!" icon, regular text */
/* ---------- login ---------- */
div.Login {
    width: 440px;
    max-width: calc(100% - 32px);
    margin: 48px auto;
    border: 0;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 6px 0 var(--pc-card-shadow);
    font-size: 16px;
    text-align: left;
}

.Login h1 { margin: 0; padding: 16px 24px; border-bottom: 1px solid var(--pc-separator); background: var(--pc-primary-light); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--pc-primary); }
.Login table { width: 100%; margin: 0; }
.Login td { padding: 12px 24px; border: 0; }
.Login input { width: 100%; }
.Login input[type=submit] { width: auto; margin: 16px 0; }
/* Kroll.css shrinks the header Save button (padding 0, 30px); keep it the standard button size */
.Update-Header input[type=submit] { float: none; margin: 0; padding: 7px 20px; min-width: 70px; min-height: 40px; }

/* ---------- update pages (div.Update cards): Kroll.css centred them, grew the font to 110% and drew grey borders ---------- */
div.Update { width: auto; max-width: 100%; margin: 0 0 24px; font-size: 16px; text-align: left; }
div.Update.UpdateBoxWidthMedium { width: 720px; }
div.Update.UpdateBoxWidthWide { width: 1275px; }
.Update-Header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.Update-Header h1 { display: block; margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--pc-primary); }
.Update fieldset { margin: 0; padding: 0; border: 0; }
.Update fieldset > table { width: 100%; margin: 0; }
.Update td { border: 0; border-bottom: 1px solid var(--pc-table-data-border); }
.Update tr:last-child > td { border-bottom: 0; }
.Update fieldset > table td:first-child { width: 40%; font-family: var(--pc-font-display); font-weight: 700; }
.Update input[type=submit] { margin: 16px; }
/* distribution panels of the update edit page: card-style header, padded content */
div#updateUpdateStoreSelectRightHeader { height: auto; padding: 12px 16px; background: var(--pc-primary-light); }
div#updateUpdateStoreSelectRightHeader h2 { margin: 0; padding: 0; font-size: 20px; line-height: 32px; }
.AddComputerRow { display: flex; align-items: center; gap: 12px; padding: 16px; }
.AddComputerRow input[type=text] { width: 280px; max-width: 100%; }
.AddComputerRow ~ #selectedStoresBox { padding: 0 16px 16px; }
/* row actions of the update lists: a red text "Delete" like the admin lists, not a trash icon */
a.DeleteUpdate, a.DeleteUpdateCategory { display: inline-block; padding: 4px 8px; color: var(--pc-danger); font-weight: 400; text-decoration: none; }
a.DeleteUpdate:hover, a.DeleteUpdateCategory:hover { color: var(--pc-danger-dark); text-decoration: underline; }
table.sortable td:last-child:has(> a.DeleteUpdate), table.sortable td:last-child:has(> a.DeleteUpdateCategory) { width: 1%; white-space: nowrap; text-align: right; }
/* Save / Cancel bar at the bottom of a form, like the admin forms */
.FormActions { display: flex; align-items: center; gap: 16px; padding: 16px; border-top: 1px solid var(--pc-separator); }
.FormActions input[type=submit] { margin: 0; }
.Update input[type=file] { width: auto; max-width: 100%; }
.UpdateError { font-size: 16px; }

/* ---------- jQuery UI widgets used by the update pages ---------- */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea { font-family: var(--pc-font); font-size: 16px; }
.ui-widget-content { border-color: var(--pc-separator); color: var(--pc-text); }
.ui-widget-header { border: 0; background: var(--pc-primary-light); color: var(--pc-primary); }
.ui-dialog { padding: 0; border: 0; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
.ui-dialog .ui-dialog-titlebar { padding: 12px 16px; border: 0; border-radius: 4px 4px 0 0; background: var(--pc-primary); color: #fff; }
.ui-dialog .ui-dialog-title { font-weight: 700; }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid var(--pc-separator); }
.ui-state-active, .ui-widget-content .ui-state-active { border-color: var(--pc-primary); background: var(--pc-primary); color: #fff; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus { border-color: var(--pc-primary); background: var(--pc-primary-light); color: var(--pc-primary); }
.ui-tabs .ui-tabs-nav { padding: 0; border: 0; border-bottom: 1px solid var(--pc-separator); border-radius: 0; background: transparent; }
.ui-tabs .ui-tabs-nav li { margin: 0 4px -1px 0; border: 0; border-bottom: 3px solid transparent; background: transparent; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { border-bottom-color: var(--pc-primary); }
.ui-tabs .ui-tabs-nav li a { padding: 10px 16px; color: var(--pc-text); font-weight: 400; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--pc-primary); font-weight: 700; }
.jstree-default .jstree-clicked { background: var(--pc-primary-light); box-shadow: none; }
.jstree-default .jstree-hovered { background: var(--pc-bg-light); box-shadow: none; }

/* ---------- misc ---------- */
.AdminMessage { margin: 0 0 24px; padding: 16px; border-radius: 4px; background: var(--pc-primary-light); }

/* spinner (Salesforce sync): green like the design system's loading indicator */
.loader {
    width: 64px;
    height: 64px;
    margin: auto;
    border: 8px solid var(--pc-primary-light);
    border-top-color: var(--pc-green);
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
}

/* centred purple spinner for panels that load asynchronously */
.loading-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 5px solid var(--pc-primary-light);
    border-top-color: var(--pc-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.UpdateSuccess {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px;
    border-radius: 4px;
    background: #f4f9f2;
    color: var(--pc-text);
    text-align: left;
}

.UpdateSuccess::before {
    content: "\2713";
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--pc-green);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* tablesorter resizable widget (these rules used to be injected as an inline <style> element, which the CSP forbids) */
body.tablesorter-disableSelection { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; }
.tablesorter-resizable-container { position: relative; height: 1px; }
.tablesorter-resizable-handle { position: absolute; display: inline-block; width: 8px; top: 1px; cursor: ew-resize; z-index: 3; user-select: none; -moz-user-select: none; }

/* ---------- dashboard: four columns, compact rows, the Kroll Key calculator on the far right ---------- */
.Dashboard {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.Dashboard > div.StoreCountSummary, .Dashboard > div.ProblemCountSummary, .Dashboard > div.ProblemTypeCountSummary, .Dashboard > div#krollKeyCalculator {
    float: none;
    min-width: 0;
    margin: 0;
}

.Dashboard > div#krollKeyCalculator { grid-column: 4; }

.Dashboard table { width: 100%; margin: 0; border: 1px solid var(--pc-table-border); border-radius: 4px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.Dashboard th, .Dashboard td { padding: 6px 12px; font-size: 16px; line-height: 24px; }
.Dashboard .TableHeaderRow th { padding: 10px 12px; }
.Dashboard td:last-child, .Dashboard .TableSubHeaderRow th:last-child { width: 1%; text-align: right; white-space: nowrap; }
.Dashboard .TableHeaderRow th[colspan] { text-align: left; }
.Dashboard fieldset { margin: 0; padding: 0; border: 0; }
.Dashboard #krollKeyCalculator td:last-child { width: auto; text-align: left; white-space: normal; }
.Dashboard #krollKeyCalculator input[type=text] { width: 10em; max-width: 100%; }
.Dashboard #krollKeyCalculator input[type=submit] { margin: 8px 0; }

@media (max-width: 1100px) {
    .Dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .Dashboard > div#krollKeyCalculator { grid-column: auto; }
}

@media (max-width: 640px) {
    .Dashboard { grid-template-columns: minmax(0, 1fr); }
}

/* tablesorter headers: keep the purple header when sorted and draw the sort triangles in the header text colour (white) */
table.sortable thead tr th.tablesorter-header,
table.sortable thead tr th.tablesorter-headerUnSorted,
table.sortable thead tr th.tablesorter-headerAsc,
table.sortable thead tr th.tablesorter-headerDesc {
    background-color: var(--pc-primary);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 14px;
    color: #fff;
}

table.sortable thead tr th.tablesorter-header,
table.sortable thead tr th.tablesorter-headerUnSorted {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M5 0l4 5H1zM5 14L1 9h8z' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E");
}

table.sortable thead tr th.tablesorter-headerAsc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M5 0l4 5H1z' fill='%23fff'/%3E%3Cpath d='M5 14L1 9h8z' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E");
}

table.sortable thead tr th.tablesorter-headerDesc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M5 0l4 5H1z' fill='%23fff' fill-opacity='.3'/%3E%3Cpath d='M5 14L1 9h8z' fill='%23fff'/%3E%3C/svg%3E");
}

table.sortable thead tr th.sorter-false { background-image: none; padding-right: 12px; cursor: default; }
table.sortable thead tr th .tablesorter-header-inner { color: inherit; }

/* the header shows the title only (no logo graphic) */
div#pageHeader > div { gap: 0; }

/* the Problems search above the problem lists */
/* the search sits on the same row as the list heading that follows it */
.problem-search { float: right; margin: 0 0 16px 16px; }
.ProblemList h1 { margin: 0 0 16px; }
.ProblemList table { clear: both; }
.problem-search form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.problem-search label { font-family: var(--pc-font-display); font-weight: 700; }
.problem-search input[type=text] { width: 360px; max-width: 100%; }
/* ---------- problem (ticket) pages: design system fonts and cards instead of Georgia, tinted borders and 200% headings ---------- */
.ProblemItem, .ProblemItemOpen { display: flow-root; }
.ProblemItem *, .ProblemItemOpen * { font-family: var(--pc-font); }
.ProblemItemHeader { display: flow-root; box-shadow: none; border-left: 4px solid var(--pc-primary); border-radius: 4px 4px 0 0; background: var(--pc-primary-light); }
/* open tickets in the design system amber (its "offline"/warning colour), closed ones in the purple of the rest of the site */
.ProblemItemOpen .ProblemItemHeader { background: #fff6e5; border-left-color: #f5a623; }
.ProblemItemOpen .ProblemItemHeader .ProblemNumber h1, .ProblemItemOpen .ProblemItemHeader .ProblemNumber a { color: var(--pc-primary); }
.ProblemItemHeader .ProblemNumber h1 { float: left; margin: 0 0 0 4px; font-family: var(--pc-font-display); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--pc-primary); }
.ProblemItemHeader .ProblemNumber a { color: var(--pc-primary); text-decoration: none; }
.ProblemItemHeader .ProblemNumber a:hover { text-decoration: underline; }
.ProblemItemHeader .ProblemCategory h2 { float: right; margin: 4px 0 0; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--pc-text); }

.ProblemItemDetails { float: left; width: 240px; padding: 16px; }
.ProblemItemDetails dt, .ProblemItemProblemAndSolution dt { margin: 0; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--pc-text-light); }
.ProblemItemDetails dd { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--pc-text); }
.ProblemItemDetails b { font-weight: 700; color: var(--pc-text); }

.ProblemItemProblemAndSolution { float: left; width: calc(100% - 300px); margin: 0; padding: 16px 16px 16px 0; }
.ProblemItemProblemAndSolution dd { margin: 0 0 16px; padding: 0; font-size: 16px; line-height: 24px; color: var(--pc-text); }
dd.ProblemItemProblem, dd.ProblemItemSolution { font-family: var(--pc-font); }
a.ProblemCommentDisplayToggle { color: var(--pc-primary); text-decoration: none; font-weight: 400; }
a.ProblemCommentDisplayToggle:hover { text-decoration: underline; }

.ProblemCommentList li { width: auto; margin: 0 0 8px; padding: 12px 16px 4px; border: 0; border-left: 4px solid var(--pc-separator); border-radius: 4px; background: var(--pc-bg-light); color: var(--pc-text); }
.ProblemCommentList p { padding-bottom: 12px; font-family: var(--pc-font); font-size: 14px; line-height: 20px; }
.ProblemComment dt { font-size: 12px; font-weight: 700; color: var(--pc-text-light); }
.ProblemComment dd { font-size: 12px; font-variant: normal; color: var(--pc-text); }
.ProblemNotFound p { margin: 40px 0; font-size: 20px; text-align: left; }

@media (max-width: 760px) {
    .ProblemItemDetails { float: none; width: auto; }
    .ProblemItemProblemAndSolution { float: none; width: auto; padding: 0 16px 16px; }
}

/* box panels (terminals, databases): header like the store card, empty message aligned with the panel content */
.BoxPanel-Header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.BoxPanel-Header h1 { display: block; margin: 0; font-family: var(--pc-font-display); font-size: 24px; line-height: 32px; font-weight: 700; color: var(--pc-primary); }
.BoxPanel-Header .floatRight { float: none; display: flex; align-items: center; gap: 8px; margin: 0; }
.BoxPanel .ProblemNotFound p { margin: 0; padding: 24px 16px; font-size: 16px; line-height: 24px; text-align: left; color: var(--pc-text-light); }

/* status pill next to the ticket number: open tickets are a solid amber pill so they stand out */
.ProblemStatus { display: inline-block; margin-left: 12px; padding: 0 12px; border-radius: 12px; font-family: var(--pc-font); font-size: 12px; line-height: 24px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; vertical-align: middle; }
.ProblemStatusOpen { background: #f5a623; color: var(--pc-text); }