/*
 * EMS design system.
 * Everything sits under body.ems-shell (signed-in layout) or .ui (a page adopted to the
 * new design), so screens that have not been redesigned keep their existing styles.
 * To adopt it on another screen: wrap the content in <div class="ui ui-page"> and use
 * the ui-* classes and the x-ui.* components.
 */

:root {
    /* Colour */
    --ui-bg: #f6f7f9;
    --ui-surface: #ffffff;
    --ui-surface-muted: #f9fafb;
    --ui-border: #e4e7ec;
    --ui-border-strong: #d0d5dd;
    --ui-text: #101828;
    --ui-text-2: #475467;
    --ui-text-3: #667085;
    --ui-accent: #1668a7;
    --ui-accent-hover: #115687;
    --ui-accent-soft: #eaf3fa;
    --ui-success: #067647;
    --ui-success-soft: #ecfdf3;
    --ui-danger: #b42318;
    --ui-danger-soft: #fef3f2;

    /* Chart series, in a fixed order checked for colour-blind separation. */
    --ui-s1: #2a78d6;
    --ui-s2: #eb6834;
    --ui-s3: #1baf7a;
    --ui-s4: #eda100;
    --ui-s5: #e87ba4;
    --ui-s6: #008300;
    --ui-s7: #6250d6;

    /* Type */
    --ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --ui-text-xs: 12px;
    --ui-text-sm: 13px;
    --ui-text-md: 14px;
    --ui-text-lg: 16px;
    --ui-text-xl: 22px;

    /* Space, shape */
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 10px;
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --ui-shadow-md: 0 8px 24px rgba(16, 24, 40, .12);

    --ui-sidebar-width: 240px;
    --ui-topbar-height: 56px;
}

/* ---------- Shell: page, sidebar, top navigation ---------- */

body.ems-shell {
    background: var(--ui-bg);
}

/* The theme's overflow:hidden would stop the top bar from sticking. */
body.ems-shell #wrapper,
body.ems-shell .content-page {
    overflow: clip;
}

body.ems-shell.enlarged {
    min-height: 100vh;
}

/* Sidebar */
body.ems-shell .ui-sidebar {
    width: var(--ui-sidebar-width);
    padding: 0;
    background: var(--ui-surface);
    border-right: 1px solid var(--ui-border);
    z-index: 1030 !important;
    font-family: var(--ui-font);
    display: flex;
    flex-direction: column;
    transition: none;
}

body.ems-shell #side-menu,
body.ems-shell #side-menu > li {
    list-style: none;
}

body.ems-shell .ui-sidebar .slimScrollDiv {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
}

body.ems-shell .ui-sidebar .slimscroll-menu {
    height: 100% !important;
    overflow-y: auto !important;
}

.ui-brand {
    display: flex;
    align-items: center;
    flex: 0 0 var(--ui-topbar-height);
    height: var(--ui-topbar-height);
    padding: 0 var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
}

.ui-brand img {
    display: block;
    width: 168px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
    object-position: left center;
}

body.ems-shell #sidebar-menu {
    padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
}

body.ems-shell #sidebar-menu .menu-title {
    padding: var(--ui-space-4) var(--ui-space-3) var(--ui-space-1);
    color: var(--ui-text-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}

body.ems-shell #sidebar-menu > ul > li > a {
    display: flex;
    align-items: center;
    margin: 1px 0;
    padding: 7px var(--ui-space-3);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-2);
    font-size: var(--ui-text-md);
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

body.ems-shell #sidebar-menu > ul > li > a:hover,
body.ems-shell #sidebar-menu > ul > li > a:focus {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

body.ems-shell #sidebar-menu > ul > li > a.active {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

body.ems-shell #sidebar-menu > ul > li > a span.icon {
    flex: 0 0 18px;
    width: 18px;
    margin: 0 10px 0 0;
    font-size: 14px;
    line-height: 1;
}

body.ems-shell #sidebar-menu > ul > li > a span.icon i {
    margin: 0;
    width: auto;
}

/* Icon rail on tablets: the theme adds .enlarged between 768px and 1028px. */
body.ems-shell.enlarged #wrapper .ui-sidebar {
    position: fixed;
    width: 64px !important;
    z-index: 1030 !important;
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li > a span.icon {
    display: block;
    font-size: 15px;
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li > a span.icon i {
    margin: 0;
    font-size: 15px;
}

body.ems-shell.enlarged #wrapper .content-page {
    margin-left: 64px;
}

body.ems-shell.enlarged #wrapper .footer {
    left: 64px;
}

/* Shows only the mark at the left of the logo image. */
body.ems-shell.enlarged .ui-brand {
    padding: 0 0 0 21px;
}

body.ems-shell.enlarged .ui-brand img {
    width: 22px;
    height: 30px;
    max-height: 30px;
    object-fit: cover;
    object-position: left center;
}

body.ems-shell.enlarged #wrapper .ui-sidebar .slimScrollDiv,
body.ems-shell.enlarged #wrapper .ui-sidebar .slimscroll-menu {
    overflow: visible !important;
}

body.ems-shell.enlarged #wrapper #sidebar-menu {
    padding: var(--ui-space-3) var(--ui-space-2);
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li {
    position: relative;
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li > a {
    justify-content: center;
    width: auto;
    padding: 10px 0;
    min-height: 0;
    background: transparent;
    color: var(--ui-text-2);
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li > a.active {
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li > a span.icon {
    margin: 0;
}

/* The label appears as a small flyout next to the icon. */
body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li > a > span:not(.icon) {
    display: none;
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li:hover > a {
    width: auto;
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

body.ems-shell.enlarged #wrapper #sidebar-menu > ul > li:hover > a > span:not(.icon) {
    display: block;
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-md);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    white-space: nowrap;
}

/* Top navigation */
body.ems-shell .ui-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    height: var(--ui-topbar-height);
    padding: 0 var(--ui-space-5);
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-border);
    box-shadow: none;
    font-family: var(--ui-font);
}

.ui-topbar__left {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
}

body.ems-shell .ui-topbar .button-menu-mobile {
    display: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: 15px;
    line-height: 34px;
}

.ui-topbar__user {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 4px 6px;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: transparent;
    color: var(--ui-text);
    cursor: pointer;
}

.ui-topbar__user:hover,
.ui-topbar__user:focus {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    text-decoration: none;
    outline: none;
}

.ui-topbar__user img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.ui-topbar__who {
    display: flex;
    flex-direction: column;
    max-width: 180px;
    line-height: 1.25;
    text-align: left;
}

.ui-topbar__name {
    overflow: hidden;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-topbar__role {
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
}

.ui-topbar__chevron {
    color: var(--ui-text-3);
    font-size: 10px;
}

/* Action dropdown, also used by the user menu */
.ui-menu.dropdown-menu {
    min-width: 180px;
    margin-top: var(--ui-space-1);
    padding: var(--ui-space-1);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-md);
    font-family: var(--ui-font);
    font-size: var(--ui-text-sm);
}

.ui-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 7px 10px;
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text-2);
}

.ui-menu .dropdown-item:hover,
.ui-menu .dropdown-item:focus {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

.ui-menu .dropdown-item i {
    width: 14px;
    color: var(--ui-text-3);
    text-align: center;
}

.ui-menu .dropdown-divider {
    margin: var(--ui-space-1) 0;
    border-color: var(--ui-border);
}

/* Breadcrumbs */
.ui-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--ui-text-3);
    font-size: var(--ui-text-sm);
    list-style: none;
    white-space: nowrap;
}

.ui-breadcrumb li + li::before {
    content: "/";
    margin-right: 6px;
    color: var(--ui-border-strong);
}

.ui-breadcrumb li[aria-current] {
    overflow: hidden;
    color: var(--ui-text);
    font-weight: 500;
    text-overflow: ellipsis;
}

/* ---------- Page content ---------- */

.ui {
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: var(--ui-text-md);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.ui-page {
    max-width: 1560px;
    margin: 0 auto;
    padding: var(--ui-space-6) var(--ui-space-1) var(--ui-space-6);
}

.ui a {
    color: var(--ui-accent);
}

.ui a:hover {
    color: var(--ui-accent-hover);
}

.ui-stack > * + * {
    margin-top: var(--ui-space-4);
}

/* Page header */
.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-5);
}

.ui-page-header__eyebrow {
    margin: 0 0 2px;
    color: var(--ui-text-3);
    font-size: var(--ui-text-sm);
}

.ui-page-header__title {
    margin: 0;
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-text-xl);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.ui-page-header__description {
    margin: var(--ui-space-1) 0 0;
    color: var(--ui-text-2);
}

.ui-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}

/* Buttons */
.ui .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.ui .ui-btn:hover {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    text-decoration: none;
}

.ui .ui-btn:focus-visible,
.ui .ui-input:focus {
    outline: 2px solid rgba(22, 104, 167, .35);
    outline-offset: 1px;
}

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

.ui .ui-btn--primary:hover {
    border-color: var(--ui-accent-hover);
    background: var(--ui-accent-hover);
    color: #fff;
}

.ui .ui-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Form fields, including dropdowns */
.ui-label {
    display: block;
    margin: 0 0 var(--ui-space-1);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
}

.ui .ui-input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
}

.ui .ui-input::placeholder {
    color: var(--ui-text-3);
}

.ui .ui-input--inline {
    display: inline-block;
    width: auto;
    min-width: 150px;
}

.ui-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

.ui-filter__actions {
    display: flex;
    gap: var(--ui-space-2);
}

/* Card */
.ui-card {
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2) var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
}

.ui-card__title {
    margin: 0;
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-text-md);
    font-weight: 600;
    line-height: 1.4;
}

.ui-card__subtitle {
    margin: 1px 0 0;
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
}

.ui-card__body {
    padding: var(--ui-space-4);
}

.ui-card__footer {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: 1px solid var(--ui-border);
}

/* Statistics */
.ui-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
}

.ui-stat {
    min-width: 0;
    padding: var(--ui-space-3) var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-stat__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    color: var(--ui-text-2);
    font-size: var(--ui-text-sm);
    font-weight: 500;
}

.ui-stat__chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ui-radius);
    background: var(--ui-tone-soft);
    color: var(--ui-tone);
    font-size: 12px;
}

.ui-tone-blue { --ui-tone: #1f65b8; --ui-tone-soft: #e8f1fc; }
.ui-tone-aqua { --ui-tone: #0f8a5f; --ui-tone-soft: #e3f7ef; }
.ui-tone-yellow { --ui-tone: #b37a00; --ui-tone-soft: #fdf3dc; }
.ui-tone-violet { --ui-tone: #5243c4; --ui-tone-soft: #eeecfb; }
.ui-tone-green { --ui-tone: #007300; --ui-tone-soft: #e5f4e5; }
.ui-tone-red { --ui-tone: #c93a39; --ui-tone-soft: #fdecec; }
.ui-tone-magenta { --ui-tone: #c2477a; --ui-tone-soft: #fcedf3; }

.ui-stat__value {
    margin-top: var(--ui-space-1);
    color: var(--ui-text);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.ui-stat__hint {
    margin-top: 2px;
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
}

/* Layout */
.ui-columns {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.ui-columns--wide {
    grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
}

.ui-columns--even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Charts */
.ui-chart {
    padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4);
}

.ui-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1) var(--ui-space-4);
    margin-bottom: var(--ui-space-3);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
}

.ui-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ui-legend__key {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.ui-tip {
    position: fixed;
    z-index: 2000;
    display: none;
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-md);
    font-family: var(--ui-font);
    font-size: var(--ui-text-xs);
    line-height: 1.35;
    pointer-events: none;
}

.ui-tip.is-visible {
    display: block;
}

.ui-tip strong {
    display: block;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 600;
}

.ui-tip span {
    color: var(--ui-text-3);
}

/* Line chart. SVG text is styled here so it follows the design tokens. */
.ui-line-chart {
    height: 240px;
}

.ui-line-chart svg {
    display: block;
    overflow: visible;
    font-family: var(--ui-font);
}

.ui-grid { stroke: #eef0f3; stroke-width: 1; }
.ui-axis { stroke: var(--ui-border-strong); stroke-width: 1; }
.ui-tick { fill: var(--ui-text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.ui-value-label { fill: var(--ui-text); font-size: 12px; font-weight: 600; }
.ui-area { fill: var(--ui-s1); opacity: .1; }
.ui-line { fill: none; stroke: var(--ui-s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-dot-mark { fill: var(--ui-s1); stroke: var(--ui-surface); stroke-width: 2; }
.ui-crosshair { stroke: var(--ui-border-strong); stroke-width: 1; visibility: hidden; }
.ui-crosshair-dot { visibility: hidden; }
.is-hover .ui-crosshair,
.is-hover .ui-crosshair-dot { visibility: visible; }

.ui-chart-table {
    margin-top: var(--ui-space-2);
    font-size: var(--ui-text-xs);
}

.ui-chart-table summary {
    color: var(--ui-text-3);
    cursor: pointer;
}

.ui-chart-table table {
    margin-top: var(--ui-space-2);
}

.ui-chart-table .ui-table th,
.ui-chart-table .ui-table td {
    padding: 5px var(--ui-space-2);
}

/* Donut */
.ui-donut-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-4);
}

.ui-donut {
    flex: 0 0 164px;
    width: 164px;
    height: 164px;
}

.ui-donut__seg {
    fill: none;
    stroke-width: 5.5;
    outline: none;
    cursor: default;
}

.ui-donut__seg:hover,
.ui-donut__seg:focus {
    stroke-width: 6.5;
}

.ui-donut__value {
    fill: var(--ui-text);
    font-family: var(--ui-font);
    font-size: 6px;
    font-weight: 600;
    text-anchor: middle;
}

.ui-donut__caption {
    fill: var(--ui-text-3);
    font-family: var(--ui-font);
    font-size: 2.8px;
    text-anchor: middle;
}

.ui-donut-legend {
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ui-text-sm);
}

.ui-donut-legend li {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 5px 0;
}

.ui-donut-legend__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ui-text-2);
}

.ui-donut-legend__value {
    color: var(--ui-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ui-donut-legend__share {
    width: 32px;
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Horizontal stacked bars */
.ui-stack-row {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 5px 0;
    font-size: var(--ui-text-xs);
}

.ui-stack-row__label {
    overflow: hidden;
    color: var(--ui-text-2);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-stack-row__track {
    display: block;
    height: 14px;
}

.ui-stack-row__bar {
    display: flex;
    gap: 2px;
    height: 100%;
    min-width: 6px;
}

.ui-stack-row__seg {
    flex-basis: 0;
    min-width: 2px;
    outline: none;
    transition: opacity .1s ease;
}

.ui-stack-row__seg:first-child {
    border-radius: 2px 0 0 2px;
}

.ui-stack-row__seg:last-child {
    border-radius: 0 4px 4px 0;
}

.ui-stack-row__seg:only-child {
    border-radius: 2px 4px 4px 2px;
}

.ui-stack-row__bar:hover .ui-stack-row__seg:not(:hover) {
    opacity: .55;
}

.ui-stack-row__seg:focus-visible {
    outline: 2px solid var(--ui-text);
    outline-offset: 1px;
}

.ui-stack-row__total {
    color: var(--ui-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ui-section {
    margin-bottom: var(--ui-space-4);
    scroll-margin-top: calc(var(--ui-topbar-height) + var(--ui-space-3));
}

/* Status badge. A coloured badge is a tint of its colour with a darker step of the same
   colour as text, because some master_status colours are not readable at full strength. */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.ui-badge__dot,
.ui-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-dot, var(--ui-text-3));
}

.ui-badge--color {
    border-color: color-mix(in srgb, var(--ui-badge) 35%, white);
    background: color-mix(in srgb, var(--ui-badge) 14%, white);
    color: color-mix(in srgb, var(--ui-badge) 60%, black);
}

.ui-badge + .ui-badge {
    margin-top: var(--ui-space-1);
}

.ui-badge--success {
    border-color: #abefc6;
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.ui-badge--danger {
    border-color: #fecdca;
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

/* Tables. .ui-table-host also styles tables returned by the existing AJAX filters. */
.ui-table-host {
    overflow-x: auto;
}

.ui-table,
.ui-table-host table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
}

.ui-table th,
.ui-table-host table th {
    padding: 9px var(--ui-space-4);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

.ui-table td,
.ui-table-host table td {
    padding: 10px var(--ui-space-4);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    background: transparent;
    text-align: left;
    vertical-align: top;
}

.ui-table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-table tbody tr:hover td {
    background: var(--ui-surface-muted);
}

.ui-table .ui-num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ui-table th.ui-num {
    text-align: right;
}

/* Columns returned by the existing AJAX filters */
.ui-table-host .hide-column {
    display: none;
}

.ui-table-host table td.id_box,
.ui-table-host table th.id_box {
    white-space: nowrap;
}

.ui-table-host table td.id_box a {
    font-weight: 500;
}

.ui-nowrap {
    white-space: nowrap;
}

.ui-cell-id {
    font-weight: 500;
    white-space: nowrap;
}

.ui-cell-title {
    min-width: 260px;
    max-width: 560px;
    overflow-wrap: anywhere;
    font-weight: 500;
    line-height: 1.4;
}

.ui-cell-title a {
    color: var(--ui-text) !important;
}

.ui-cell-sub {
    display: block;
    margin-top: 3px;
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
    font-weight: 400;
    white-space: nowrap;
}

.ui-cell-title .ui-cell-sub {
    white-space: normal;
}

/* Compact lists: status summary, work queue, shortcuts */
.ui-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: 9px var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
}

.ui-list > li:last-child {
    border-bottom: 0;
}

.ui-list__main {
    min-width: 0;
    font-size: var(--ui-text-sm);
}

.ui-list__title {
    display: block;
    overflow: hidden;
    color: var(--ui-text);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-list__meta {
    display: block;
    overflow: hidden;
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-list__side {
    flex: 0 0 auto;
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
    white-space: nowrap;
}

.ui-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ui-space-6);
    padding: var(--ui-space-2) var(--ui-space-4) var(--ui-space-3);
}

.ui-status-row {
    padding: 9px 0;
    font-size: var(--ui-text-sm);
}

.ui-status-row__bar {
    height: 4px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 2px;
    background: #f0f2f5;
}

.ui-status-row__bar span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--ui-s1);
}

.ui-status-row__top {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

.ui-status-row__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--ui-text-2);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-status-row__count {
    color: var(--ui-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ui-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-2);
    padding: var(--ui-space-3);
}

.ui .ui-shortcut {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    padding: var(--ui-space-2) 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 500;
}

.ui .ui-shortcut:hover {
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-muted);
    color: var(--ui-text);
    text-decoration: none;
}

.ui-shortcut .ui-stat__chip {
    width: 24px;
    height: 24px;
    font-size: 11px;
}

/* Empty and loading states */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--ui-space-6) var(--ui-space-4);
    color: var(--ui-text-3);
    font-size: var(--ui-text-sm);
    text-align: center;
}

.ui-empty__icon {
    margin-bottom: var(--ui-space-2);
    color: var(--ui-border-strong);
    font-size: 20px;
}

.ui-empty__title {
    display: block;
    color: var(--ui-text);
    font-weight: 500;
}

.ui-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ui-border);
    border-top-color: var(--ui-accent);
    border-radius: 50%;
    animation: ui-spin .7s linear infinite;
}

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

/* Pagination, for the existing Laravel bootstrap-5 links */
.ui-pagination {
    font-size: var(--ui-text-sm);
}

.ui-pagination nav > .d-flex {
    align-items: center;
    gap: var(--ui-space-3);
}

.ui-pagination p {
    margin: 0;
    color: var(--ui-text-3);
}

.ui-pagination .pagination {
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
}

.ui-pagination .page-link {
    min-width: 32px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-sm) !important;
    background: transparent;
    color: var(--ui-text-2) !important;
    line-height: 20px;
    text-align: center;
    box-shadow: none;
}

.ui-pagination .page-link:hover {
    border-color: var(--ui-border);
    background: var(--ui-surface-muted);
}

.ui-pagination .page-item.active .page-link {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: #fff !important;
}

.ui-pagination .page-item.disabled .page-link {
    color: var(--ui-border-strong) !important;
    background: transparent;
}

/* Modal dialogs, for the existing Bootstrap modal markup: <div class="modal ui"> */
.modal.ui .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.modal.ui .modal-header,
.modal.ui .modal-footer {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-color: var(--ui-border);
}

.modal.ui .modal-title {
    font-size: var(--ui-text-lg);
    font-weight: 600;
}

/* Footer */
body.ems-shell .footer {
    border-top: 1px solid var(--ui-border);
    background: transparent;
    color: var(--ui-text-3);
    font-family: var(--ui-font);
    font-size: var(--ui-text-xs);
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
    .ui-columns,
    .ui-columns--wide,
    .ui-columns--even {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .ui-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body.ems-shell .ui-sidebar {
        box-shadow: var(--ui-shadow-md);
    }

    body.ems-shell .ui-sidebar:not(.x) {
        display: none;
    }

    body.ems-shell.sidebar-enable .ui-sidebar:not(.x) {
        display: flex;
    }

    body.ems-shell .ui-topbar {
        padding: 0 var(--ui-space-3);
    }

    body.ems-shell .ui-topbar .button-menu-mobile {
        display: inline-block;
    }

    .ui-topbar__who,
    .ui-topbar__chevron {
        display: none;
    }

    .ui-page {
        padding: var(--ui-space-4) 2px;
    }

    .ui-page-header__actions,
    .ui-page-header__actions .ui-btn {
        flex: 1 1 auto;
    }

    .ui-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-filter {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-filter__actions .ui-btn {
        flex: 1 1 0;
    }

    .ui-status-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui .ui-input--inline {
        width: 100%;
    }

    .ui-card__header > * {
        min-width: 0;
    }

    /* Rows become small blocks so nothing needs sideways scrolling. */
    .ui-table--stack thead {
        display: none;
    }

    .ui-table--stack,
    .ui-table--stack tbody,
    .ui-table--stack tr,
    .ui-table--stack td {
        display: block;
        width: 100%;
    }

    .ui-table--stack tr {
        padding: var(--ui-space-2) 0;
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-table--stack tr:last-child {
        border-bottom: 0;
    }

    .ui-table--stack td,
    .ui-table--stack tbody tr:last-child td {
        padding: 4px var(--ui-space-4);
        border: 0;
    }

    .ui-table--stack td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--ui-text-3);
        font-size: 11px;
    }

    .ui-table--stack .ui-cell-title {
        min-width: 0;
        max-width: none;
    }

    .ui-pagination nav > .d-flex {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-spinner {
        animation-duration: 2s;
    }

    .ui .ui-btn,
    body.ems-shell #sidebar-menu > ul > li > a {
        transition: none;
    }
}

/* ---------- Existing Bootstrap markup inside an adopted page ----------
   Popups and forms shared with older screens keep their markup and take the new look here.
   Summernote's own toolbar buttons (.note-btn) are left alone. */

.ui .ui-stats--fixed {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ui .form-control {
    height: 36px;
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    box-shadow: none;
}

.ui textarea.form-control {
    height: auto;
}

.ui .form-control:focus {
    border-color: var(--ui-accent);
    box-shadow: 0 0 0 3px rgba(22, 104, 167, .14);
}

.ui .form-control:disabled {
    background: var(--ui-surface-muted);
    color: var(--ui-text-3);
}

.ui .form-group > label,
.ui .form-group label.col-form-label {
    margin-bottom: var(--ui-space-1);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
}

.ui .btn:not(.note-btn) {
    height: 36px;
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 500;
}

.ui .btn:not(.note-btn):hover {
    background: var(--ui-surface-muted);
}

.ui .btn-primary:not(.note-btn),
.ui .btn-blue:not(.note-btn) {
    border-color: var(--ui-accent);
    background: var(--ui-accent);
    color: #fff;
}

.ui .btn-primary:not(.note-btn):hover,
.ui .btn-blue:not(.note-btn):hover {
    border-color: var(--ui-accent-hover);
    background: var(--ui-accent-hover);
    color: #fff;
}

.ui .btn-danger:not(.note-btn) {
    border-color: var(--ui-danger);
    background: var(--ui-danger);
    color: #fff;
}

.ui .btn-danger:not(.note-btn):hover {
    background: #912018;
    color: #fff;
}

/* Popups */
.ui .modal-content {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    text-align: left;
    white-space: normal;
}

.ui .modal-header,
.ui .modal-footer {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-color: var(--ui-border);
}

.ui .modal-footer {
    gap: var(--ui-space-2);
}

.ui .modal-footer > * {
    margin: 0;
}

.ui .modal-body {
    padding: var(--ui-space-4);
}

.ui .modal-title,
.ui .modal-body h3,
.ui .modal-body h4 {
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-text-lg);
    font-weight: 600;
}

.ui .modal-body .text-highlight {
    color: var(--ui-text-3);
}

.ui .modal .close {
    color: var(--ui-text-3);
    text-shadow: none;
    opacity: 1;
}

/* Flash messages */
.ui .alert {
    margin-bottom: var(--ui-space-4);
    padding: 10px var(--ui-space-4);
    border-radius: var(--ui-radius);
    font-size: var(--ui-text-sm);
}

.ui .alert.bg-success {
    border: 1px solid #abefc6 !important;
    background: var(--ui-success-soft) !important;
    color: var(--ui-success) !important;
}

.ui .alert.bg-danger {
    border: 1px solid #fecdca !important;
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger) !important;
}

.ui .alert ul {
    margin: 0;
    padding-left: var(--ui-space-4);
}

.ui .alert .close {
    color: inherit;
    text-shadow: none;
}

/* Tabs and nested cards on the settings pages */
.ui .nav-tabs {
    gap: var(--ui-space-1);
    margin-bottom: var(--ui-space-4) !important;
    border-bottom: 1px solid var(--ui-border);
}

.ui .nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ui-text-2);
    font-size: var(--ui-text-sm);
    font-weight: 500;
}

.ui .nav-tabs .nav-link:hover {
    color: var(--ui-text);
}

.ui .nav-tabs .nav-link.active {
    border-bottom-color: var(--ui-accent);
    color: var(--ui-accent);
}

.ui .card {
    margin-bottom: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

.ui .card-header {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
    background: transparent;
}

.ui .header-title {
    margin: 0;
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-text-md);
    font-weight: 600;
}

/* Action buttons, avatars and tinted labels */
.ui .ui-icon-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-tone-soft);
    color: var(--ui-tone);
    font-size: 12px;
    cursor: pointer;
    transition: filter .12s ease;
}

.ui .ui-icon-btn:hover {
    color: var(--ui-tone);
    filter: brightness(.94);
    text-decoration: none;
}

.ui .ui-icon-btn:focus-visible {
    outline: 2px solid var(--ui-tone);
    outline-offset: 1px;
}

.ui-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ui-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ui-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ui-tone-soft);
    color: var(--ui-tone);
    font-size: var(--ui-text-xs);
    font-weight: 600;
}

.ui-avatar--lg {
    width: 48px;
    height: 48px;
    font-size: var(--ui-text-lg);
}

.ui-person__name {
    display: block;
    color: var(--ui-text);
    font-weight: 500;
}

.ui-muted {
    color: var(--ui-text-3);
}

.ui-table-host table .ui-link-list a {
    display: block;
    white-space: nowrap;
}

.ui-filter--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ui-form-card {
    padding: var(--ui-space-4);
}

/* Admin sidebar: each link gets a tinted icon. Other roles keep the plain sidebar. */
body.ems-shell .ui-sidebar--admin #sidebar-menu > ul > li > a span.icon {
    display: inline-flex;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ui-tone-soft);
    color: var(--ui-tone);
    font-size: 12px;
}

body.ems-shell .ui-sidebar--admin #sidebar-menu > ul > li > a {
    padding: 5px var(--ui-space-2);
    color: var(--ui-text-2);
}

body.ems-shell .ui-sidebar--admin #sidebar-menu > ul > li > a.active {
    background: var(--ui-tone-soft);
    color: var(--ui-text);
    font-weight: 600;
}

body.ems-shell .ui-sidebar--admin #sidebar-menu > ul > li > a.active span.icon {
    background: var(--ui-tone);
    color: #fff;
}

body.ems-shell.enlarged #wrapper .ui-sidebar--admin #sidebar-menu > ul > li > a {
    padding: 6px 0;
}

body.ems-shell.enlarged #wrapper .ui-sidebar--admin #sidebar-menu > ul > li > a span.icon {
    display: inline-flex;
    margin: 0;
    font-size: 12px;
}

body.ems-shell.enlarged #wrapper .ui-sidebar--admin #sidebar-menu > ul > li > a span.icon i {
    font-size: 12px;
}

.ui-tone-orange { --ui-tone: #c4501f; --ui-tone-soft: #fdeee7; }
.ui-tone-gray { --ui-tone: #475467; --ui-tone-soft: #eef0f3; }

@media (max-width: 767.98px) {
    .ui-filter--three {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Follow-up refinements for adopted pages */
.ui-table-host table.ui-table--middle td {
    vertical-align: middle;
}

.ui .header-title {
    text-transform: none;
    letter-spacing: 0;
}

/* The submissions journal filter returns its own header row inside the list: keep only that one. */
#basic-datatable:has(#table th) > thead {
    display: none;
}

.ui-table-host #table td:first-child,
.ui-table-host #table td.hide-column + td,
.ui-table-host #table td:last-child {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ui-table-host .ui-table--stack td,
    .ui-table-host .ui-table--stack tbody tr:last-child td {
        padding: 4px var(--ui-space-4);
        border: 0;
    }

    .ui-table--stack td[data-label="No"],
    .ui-table--stack td[data-label="S.No"] {
        display: none;
    }
}

/* ---------- Paper details page ---------- */

.ui-paper {
    max-width: 1560px;
}

.ui-paper-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-4) var(--ui-space-5);
}

.ui-paper-head__main {
    flex: 1 1 420px;
    min-width: 0;
}

.ui-paper-head__id {
    display: inline-block;
    margin-bottom: var(--ui-space-1);
    padding: 2px var(--ui-space-2);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: var(--ui-text-xs);
    font-weight: 600;
}

.ui .ui-paper-head__title {
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ui-paper-head__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-paper-head__badges .ui-badge + .ui-badge {
    margin-top: 0;
}

.ui-paper-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1) var(--ui-space-4);
    margin-top: var(--ui-space-2);
    color: var(--ui-text-3);
    font-size: var(--ui-text-sm);
}

.ui-paper-head__meta i {
    margin-right: 2px;
}

.ui-paper-head__nav {
    display: flex;
    gap: var(--ui-space-2);
}

.ui-paper-card {
    overflow: clip;
}

.ui-paper .ibox,
.ui-paper .ibox-content {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Tabs, one colour each */
.ui-paper-tabs {
    padding: var(--ui-space-1) var(--ui-space-3) 0;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
}

.ui-paper #nav-tab {
    flex-wrap: nowrap;
    margin: 0 !important;
    overflow-x: auto;
    border-bottom: 0;
    scrollbar-width: thin;
}

.ui-paper #nav-tab .nav-item {
    flex: 0 0 auto;
}

.ui-paper #nav-tab .nav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 10px var(--ui-space-3);
    white-space: nowrap;
}

.ui-paper #nav-tab .nav-link i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ui-tone-soft);
    color: var(--ui-tone);
    font-size: 10px;
}

.ui-paper #nav-tab .nav-link.active {
    border-bottom-color: var(--ui-tone);
    color: var(--ui-text);
    font-weight: 600;
}

.ui-paper #nav-tab .nav-link.active i {
    background: var(--ui-tone);
    color: #fff;
}

.ui-paper-body {
    padding: var(--ui-space-5);
}

/* Section headings inside the tabs */
.ui-paper .tab-pane h4:not(.modal-title),
.ui-paper .tab-pane h5,
.ui-paper .tab-pane h6 {
    margin-bottom: var(--ui-space-3);
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-text-md);
    font-weight: 600;
    text-transform: none;
}

.ui-paper .tab-pane h6 i {
    color: var(--ui-accent);
}

.ui-paper .tab-pane hr {
    margin: var(--ui-space-5) 0;
    border-color: var(--ui-border);
}

/* Read-only detail tiles */
.ui-paper .tab-pane .rounded.border.p-2 {
    height: 100%;
    padding: 10px var(--ui-space-3) !important;
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface-muted) !important;
}

.ui-paper .tab-pane .rounded.border.p-2 small.text-muted {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-text-3) !important;
    font-size: 11px;
    letter-spacing: .02em;
}

.ui-paper .tab-pane .rounded.border.p-2 .font-weight-bold {
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 500 !important;
}

/* The status change box stands out because changing it can send mail */
.ui-paper .form-group[style*="fff3cd"] {
    padding: var(--ui-space-3) !important;
    border: 1px solid #fde8b0;
    border-radius: var(--ui-radius) !important;
    background: #fffaeb !important;
}

.ui-paper .form-group label,
.ui-paper .tab-pane > .row label {
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
}

/* Upload rows: heading on the left, button on the right */
.ui-paper .panel {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ui-paper .panel-body {
    padding: 0;
}

.ui-paper .panel-body:has(> h4):not(:has(form)),
.ui-paper .panel-body:has(> a.btn):not(:has(form)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-3);
}

.ui-paper .panel-body > h4 {
    margin: 0 !important;
}

.ui-paper .panel-body > a.btn {
    margin: 0 !important;
}

.ui-paper .panel-body:has(> form) ,
.ui-paper .panel-body:has(#certificate_generate_form) {
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-muted);
}

/* Tables */
.ui-paper .table {
    margin-bottom: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
}

.ui-paper .table th {
    padding: 9px var(--ui-space-3);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-muted);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
    white-space: nowrap;
}

.ui-paper .table td {
    padding: 10px var(--ui-space-3);
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    vertical-align: middle;
}

.ui-paper .table tbody tr:last-child td {
    border-bottom: 0;
}

.ui-paper .table-hover tbody tr:hover {
    background: var(--ui-surface-muted);
}

.ui-paper .table td ul {
    margin: var(--ui-space-1) 0 0;
    padding-left: var(--ui-space-4);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
}

/* Inline dropdowns that save as soon as they change */
.ui-paper .custom-select,
.ui-paper .form-select {
    width: auto;
    min-width: 130px;
    max-width: 100%;
    height: 32px;
    padding: 0 26px 0 var(--ui-space-2);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
}

.ui-paper #due_date {
    width: 100%;
    max-width: 240px;
    height: 36px;
}

/* Small and soft buttons */
.ui .btn-sm:not(.note-btn) {
    height: 30px;
    padding: 0 10px;
    font-size: var(--ui-text-xs);
}

.ui .btn-success:not(.note-btn) {
    border-color: #abefc6;
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

.ui .btn-success:not(.note-btn):hover {
    background: #d1fadf;
    color: var(--ui-success);
}

.ui .btn-sm.btn-danger:not(.note-btn) {
    border-color: #fecdca;
    background: var(--ui-danger-soft);
    color: var(--ui-danger);
}

.ui .btn-sm.btn-danger:not(.note-btn):hover {
    background: #fee4e2;
    color: var(--ui-danger);
}

/* Badges that still use Bootstrap colour classes */
.ui-paper .badge {
    padding: 3px var(--ui-space-2);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-muted);
    color: var(--ui-text-2);
    font-size: var(--ui-text-xs);
    font-weight: 500;
}

.ui-paper .badge.bg-danger,
.ui-paper .badge.badge-danger {
    border-color: #fecdca;
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger) !important;
}

.ui-paper .badge.bg-primary,
.ui-paper .badge.badge-primary {
    border-color: #b9d6f5;
    background: #e8f1fc !important;
    color: #1f65b8 !important;
}

.ui-paper .badge.bg-success,
.ui-paper .badge.badge-success {
    border-color: #abefc6;
    background: var(--ui-success-soft) !important;
    color: var(--ui-success) !important;
}

.ui-paper .badge.bg-warning {
    border-color: #f6dc9a;
    background: #fdf3dc !important;
    color: #8a5e00 !important;
}

.ui-paper .badge.bg-secondary {
    border-color: var(--ui-border);
    background: #eef0f3 !important;
    color: var(--ui-text-2) !important;
}

/* Cards inside tabs */
.ui-paper .tab-pane .card {
    overflow: hidden;
}

.ui-paper .tab-pane .card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    background: var(--ui-surface-muted) !important;
    color: var(--ui-text) !important;
}

.ui-paper .tab-pane .card-header h5 {
    margin: 0;
}

.ui-paper .list-group-item {
    padding: 9px var(--ui-space-3);
    border-color: var(--ui-border);
    color: var(--ui-text-2);
    font-size: var(--ui-text-sm);
}

/* Workflow boards */
.ui-paper .kanban-board {
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-4);
    padding-bottom: var(--ui-space-1);
}

.ui-paper .kanban-column {
    flex: 1 1 0;
    min-width: 170px;
    margin: 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface-muted);
    box-shadow: none;
    text-align: left;
}

.ui-paper [class*="kanban-column-header-"] {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 9px var(--ui-space-3);
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-kanban-soft);
    color: var(--ui-kanban-text);
    font-size: var(--ui-text-xs);
    font-weight: 600;
}

.ui-paper .kanban-column-header-not-started { --ui-kanban-soft: #fdecec; --ui-kanban-text: #b42318; }
.ui-paper .kanban-column-header-in-progress { --ui-kanban-soft: #e8f1fc; --ui-kanban-text: #1f65b8; }
.ui-paper .kanban-column-header-completed { --ui-kanban-soft: #ecfdf3; --ui-kanban-text: #067647; }
.ui-paper .kanban-column-header-deferred { --ui-kanban-soft: #fdf3dc; --ui-kanban-text: #8a5e00; }
.ui-paper .kanban-column-header-editor-approval { --ui-kanban-soft: #eeecfb; --ui-kanban-text: #5243c4; }

.ui-paper .kanban-column-cards {
    padding: var(--ui-space-2);
}

.ui-paper .kanban-card {
    margin-bottom: var(--ui-space-2);
    padding: var(--ui-space-2) 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow-sm);
    cursor: grab;
}

.ui-paper .kanban-card-title {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 500;
}

.ui-paper .kanban-card-description {
    color: var(--ui-text-3);
    font-size: var(--ui-text-xs);
}

.ui-paper .kanban-card hr {
    display: none;
}

/* Phones: every table row stacks, with its column name from the table header */
@media (max-width: 768px) {
    .ui-paper-head {
        padding: var(--ui-space-3) var(--ui-space-4);
    }

    .ui-paper-head__nav {
        flex: 1 1 100%;
    }

    .ui-paper-head__nav .ui-btn {
        flex: 1 1 0;
    }

    .ui-paper-body {
        padding: var(--ui-space-3);
    }

    .ui-paper .table {
        border: 0;
        background: transparent;
    }

    .ui-paper .table tr {
        margin-bottom: var(--ui-space-2);
        padding: var(--ui-space-2) var(--ui-space-3);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius);
        box-shadow: none;
    }

    .ui-paper .table td {
        min-height: 32px;
        padding: 6px 0 6px 40%;
        border: 0;
        text-align: right !important;
        overflow-wrap: anywhere;
    }

    .ui-paper .table td:not([data-label]) {
        padding-left: 0;
        text-align: left !important;
    }

    .ui-paper .table td::before {
        top: 6px;
        left: 0;
        max-width: 38%;
        color: var(--ui-text-3);
        font-size: 11px;
        font-weight: 500;
    }

    .ui-paper .kanban-board {
        padding-bottom: var(--ui-space-2);
    }
}

/* FontAwesome's script swaps <i> for <svg>, so tab icons are styled as svg. */
.ui-paper #nav-tab .nav-link .svg-inline--fa {
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    padding: 5px;
    border-radius: 6px;
    background: var(--ui-tone-soft);
    color: var(--ui-tone);
}

.ui-paper #nav-tab .nav-link.active .svg-inline--fa {
    background: var(--ui-tone);
    color: #fff;
}

.ui-paper .tab-pane h6.text-primary,
.ui-paper .tab-pane h6.text-secondary {
    color: var(--ui-text) !important;
}

.ui-paper .shadow,
.ui-paper .shadow-sm {
    box-shadow: none !important;
}

.ui-paper .panel-body > hr {
    flex: 1 1 100%;
    margin: 0;
    border: 0;
}

.ui-paper .panel-body > div {
    flex: 1 1 100%;
    min-width: 0;
}

.ui .btn:not(.note-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ---------- Sign-in pages ---------- */

body:has(.ui-auth) .navbar-custom,
body:has(.ui-auth) .footer,
body:has(.ui-auth) .ui-sidebar {
    display: none;
}

.ui-auth {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    overflow-y: auto;
    background: var(--ui-surface);
}

.ui-auth__aside {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-6);
    padding: 32px 48px;
    border-right: 1px solid var(--ui-border);
    background: var(--ui-bg);
}

.ui-auth__logo img {
    display: block;
    width: 200px;
    height: auto;
}

.ui-auth__pitch {
    margin: auto 0;
    padding-bottom: 40px;
}

.ui .ui-auth__headline {
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.ui-auth__lead {
    margin: 0 0 var(--ui-space-6);
    color: var(--ui-text-2);
    font-size: 15px;
}

.ui-auth__features {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-auth__features li {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-2) 0;
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    font-weight: 500;
}

.ui-auth__journal {
    display: block;
    max-width: 100%;
    max-height: 230px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.ui-auth__journal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-4);
    font-size: var(--ui-text-sm);
}

.ui-auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px var(--ui-space-5);
}

.ui-auth__form {
    width: 100%;
    max-width: 380px;
}

.ui .ui-auth__title {
    margin: 0 0 var(--ui-space-1);
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-text-xl);
    font-weight: 600;
    letter-spacing: -.01em;
}

.ui-auth__subtitle {
    margin: 0 0 var(--ui-space-6);
    color: var(--ui-text-2);
}

.ui .ui-auth .form-control {
    height: 42px;
    font-size: var(--ui-text-md);
}

.ui-auth__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-5);
    font-size: var(--ui-text-sm);
}

.ui-auth__row .custom-control-label {
    color: var(--ui-text-2);
}

.ui .ui-auth__submit {
    width: 100%;
    height: 42px;
    font-size: var(--ui-text-md);
}

.ui-auth__back {
    margin: var(--ui-space-5) 0 0;
    font-size: var(--ui-text-sm);
    text-align: center;
}

.ui-auth .alert.alert-success {
    border: 1px solid #abefc6;
    background: var(--ui-success-soft);
    color: var(--ui-success);
}

@media (max-width: 860px) {
    .ui-auth {
        display: block;
    }

    .ui-auth__aside {
        padding: var(--ui-space-5);
        border-right: 0;
        border-bottom: 1px solid var(--ui-border);
    }

    .ui-auth__pitch {
        padding: 0;
    }

    .ui-auth__features,
    .ui-auth__lead {
        display: none;
    }

    .ui .ui-auth__headline {
        font-size: 20px;
    }

    .ui-auth__logo img {
        width: 160px;
    }

    .ui-auth__main {
        padding: var(--ui-space-6) var(--ui-space-5);
    }

    .ui-auth__form {
        max-width: 480px;
    }
}

/* ---------- Reviewer's peer review form ---------- */

.ui-review #reviewForm {
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.ui-review .section-box {
    margin-bottom: var(--ui-space-4);
    padding: var(--ui-space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: none;
}

.ui-review .section-box:hover {
    box-shadow: none;
}

.ui-review .tab-pane h4.section-title {
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-3);
    padding-bottom: var(--ui-space-2);
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-size: var(--ui-text-md);
    font-weight: 600;
}

.ui-review .section-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-s3);
}

.ui-review .question-item {
    margin-bottom: var(--ui-space-2);
    padding: var(--ui-space-3);
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-sm);
}

.ui-review .question-item:last-child {
    margin-bottom: 0;
}

.ui-review .question-text {
    margin-bottom: var(--ui-space-2);
    color: var(--ui-text);
    font-size: var(--ui-text-sm);
    font-weight: 500;
}

.ui-review .radio-group {
    gap: var(--ui-space-2);
    margin-top: 0;
}

.ui-review .radio-group label {
    margin: 0;
    padding: 5px var(--ui-space-3);
    border-color: var(--ui-border-strong);
    font-size: var(--ui-text-sm);
    font-weight: 400;
}

.ui-review .radio-group label:hover {
    background: var(--ui-surface-muted);
    border-color: var(--ui-accent);
    transform: none;
}

/* The answers' text stays dark, so a chosen answer needs a light background to be readable. */
.ui-review .radio-group label:has(input[type="radio"]:checked),
.ui-review .disabled-form .radio-group label:has(input[type="radio"]:checked) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    box-shadow: none;
    opacity: 1;
}

.ui-review .radio-group input[type="radio"] {
    accent-color: var(--ui-accent);
}

.ui-review .textarea-field {
    border-color: var(--ui-border-strong);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-text-sm);
}

.ui-review .btn-submit:not(.note-btn) {
    height: 42px;
    padding: 0 var(--ui-space-6) !important;
    border-color: var(--ui-accent);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-accent);
    color: #fff;
    font-size: var(--ui-text-md);
}

.ui-review .btn-submit:not(.note-btn):hover {
    border-color: var(--ui-accent-hover);
    background: var(--ui-accent-hover);
    color: #fff;
    box-shadow: none;
    transform: none;
}

.ui-review .bg-light {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface-muted) !important;
    font-size: var(--ui-text-sm);
}

.ui-review .alert-info {
    border: 1px solid #b9d6f5;
    border-radius: var(--ui-radius);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: var(--ui-text-sm);
}

/* The logo image has a white background, so the brand panel is white and the form sits on the page colour. */
.ui-auth__aside {
    background: var(--ui-surface);
}

.ui-auth__main {
    background: var(--ui-bg);
}

.ui-auth__form {
    padding: var(--ui-space-6);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}

.ui-review .d-flex.gap-2 {
    gap: var(--ui-space-2);
}

/* The row of the paper just opened from a list */
.ui-table-host tr.ui-row-return td {
    background: var(--ui-accent-soft);
}

.ui-table-host tr.ui-row-return td:first-child {
    box-shadow: inset 3px 0 0 var(--ui-accent);
}