/* Every JSP loads this file, so legacy pages receive the same shell geometry too. */
@import url("matrix-shell-v2.css?v=7");

:root {
    --matrix-theme-canvas: #cedde8;
    --matrix-theme-panel: #f4f8fb;
    --matrix-theme-panel-strong: #e7f0f6;
    --matrix-theme-control: #ffffff;
    --matrix-theme-border: #b8c7d3;
    --matrix-theme-grid-head: #e8eef4;
    --matrix-theme-grid-alt: #edf3f7;
}

html,
body,
body #PageFrame {
    min-height: 100%;
    background-color: var(--matrix-theme-canvas) !important;
}

/* Application surfaces use a low-glare tint. Controls remain white. */
body .FormPanel,
body [id^="FormPanel"],
body .card,
body .panel,
body .well,
body .matrix-report-card,
body .matrix-tool-card,
body .matrix-query-card,
body .matrix-login__card,
body .modal-content,
body .ui-dialog,
body .tab-content {
    background-color: var(--matrix-theme-panel) !important;
}

body input:not([type="button"]):not([type="submit"]):not([type="reset"]),
body select,
body textarea,
body .form-control,
body .form-select {
    background-color: var(--matrix-theme-control) !important;
}

/* Replace the clipped legacy bitmap arrow with one consistent dropdown affordance. */
body .divselect {
    height: auto !important;
    min-height: 27px;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}

body select:not([multiple]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 27px;
    padding: 2px 30px 2px 7px !important;
    border: 1px solid var(--matrix-theme-border) !important;
    border-radius: 3px !important;
    background-color: var(--matrix-theme-control) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23485f73' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 9px center !important;
    background-size: 10px 7px !important;
    cursor: pointer;
}

body select:not([multiple]):hover {
    border-color: #71879a !important;
}

body select:not([multiple]):focus {
    border-color: #2b6498 !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(43, 100, 152, 0.16) !important;
}

body .modal-header,
body .ui-dialog-titlebar {
    background-color: var(--matrix-theme-panel-strong) !important;
    border-color: #91a6b7 !important;
}

body .modal-body,
body .modal-footer,
body .ui-dialog-content,
body .ui-dialog-buttonpane {
    background-color: var(--matrix-theme-panel) !important;
}

/* Legacy notifications are appended to body and must sit above shell menus/dialogs. */
body #msgdiv,
body .ajaxmsg {
    position: fixed !important;
    z-index: 12000 !important;
    max-width: min(90vw, 680px);
    box-sizing: border-box;
    box-shadow: 0 5px 18px rgba(31, 52, 72, .22);
}

body #dialdiv,
body [id$="Dialog"] {
    z-index: 11000 !important;
}

/* Menus deliberately retain a white navigation surface. */
body .matrix-shell__navigation,
body .matrix-shell__navigation #MenuBar,
body #MenuForm,
body ul#master_0,
body ul#master_0 > li,
body ul#master_0 ul,
body ul#master_0 ul > li,
body .dropdown-menu,
body .navbar,
body .nav-menu {
    background-color: #ffffff !important;
}

body.matrix-error-page {
    min-height: 100vh;
    margin: 0;
    color: #263746;
    background: var(--matrix-theme-canvas) !important;
    font-family: Arial, sans-serif;
}

.matrix-error-layout {
    min-height: calc(100vh - 84px);
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: clamp(24px, 5vw, 64px) 20px;
}

.matrix-error-card {
    width: min(100%, 760px);
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--matrix-theme-border);
    border-radius: 10px;
    background: var(--matrix-theme-panel);
    box-shadow: 0 8px 24px rgba(31, 52, 72, .12);
}

.matrix-error-card__status {
    min-height: 290px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #a4473f;
}

.matrix-error-page--401 .matrix-error-card__status,
.matrix-error-page--403 .matrix-error-card__status {
    background: #a66a19;
}

.matrix-error-page--404 .matrix-error-card__status,
.matrix-error-page--405 .matrix-error-card__status {
    background: #376b94;
}

.matrix-error-card__status span {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.matrix-error-card__content {
    padding: 34px 38px 28px;
}

.matrix-error-card__eyebrow {
    color: #607587;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matrix-error-card h1 {
    margin: 8px 0 10px;
    font-size: 25px;
}

.matrix-error-card__message {
    margin: 0 0 8px;
    color: #344b5e;
    font-size: 15px;
    font-weight: 600;
}

.matrix-error-card__description {
    margin: 0;
    color: #536779;
    line-height: 1.55;
}

.matrix-error-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.matrix-error-card__actions form {
    margin: 0;
}

.matrix-error-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 16px;
    color: #fff;
    border: 1px solid #245a91;
    border-radius: 4px;
    background: #245a91;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.matrix-error-card__action:hover,
.matrix-error-card__action:focus {
    color: #fff;
    background: #1d4e7d;
}

.matrix-error-card__action--secondary {
    color: #334b5e;
    border-color: #aebdca;
    background: transparent;
}

.matrix-error-card__action--secondary:hover,
.matrix-error-card__action--secondary:focus {
    color: #263746;
    background: #e4edf4;
}

.matrix-error-card__reference {
    margin: 22px 0 0;
    padding-top: 14px;
    color: #6b7e8e;
    border-top: 1px solid #d5e0e8;
    font-size: 11px;
}

.matrix-error-card__reference code {
    color: inherit;
}

@media (max-width: 620px) {
    .matrix-error-card {
        grid-template-columns: 1fr;
    }

    .matrix-error-card__status {
        min-height: 82px;
    }

    .matrix-error-card__status span {
        font-size: 30px;
    }

    .matrix-error-card__content {
        padding: 26px 24px;
    }
}

/* Compact toolbars for legacy forms that place controls in their title bar. */
body .title.matrix-form-title,
body .title:has(input:not([type="hidden"])),
body .title:has(select) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-height: 38px;
    height: auto !important;
    padding: 5px 10px !important;
}

body .title.matrix-form-title > .matrix-title-icon,
body .title:has(input:not([type="hidden"]), select) > .matrix-title-icon {
    flex: 0 0 auto;
    margin: 0 !important;
}

body .title .matrix-form-title__heading,
body .title .matrix-form-title__field,
body .title .matrix-form-title__check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    white-space: nowrap;
}

body .title .matrix-form-title__field,
body .title .matrix-form-title__check {
    font-weight: 600;
}

body .title:has(input:not([type="hidden"]), select) > span:has(input:not([type="hidden"]), select),
body .title:has(input:not([type="hidden"]), select) > .divchk {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
    line-height: normal !important;
    white-space: nowrap;
}

body .title:has(input:not([type="hidden"]), select) > div:not(.divselect) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    float: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .title:has(input:not([type="hidden"]), select) > input.button,
body .title:has(input:not([type="hidden"]), select) > button,
body .title:has(input:not([type="hidden"]), select) > .toolbaricon {
    position: static !important;
    float: none !important;
    min-height: 27px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .title:has(input:not([type="hidden"]), select) > input.button,
body .title:has(input:not([type="hidden"]), select) > button {
    width: auto !important;
    padding: 3px 10px !important;
    border: 1px solid #9aabb9 !important;
    border-radius: 3px !important;
    background: #e7edf2 !important;
    color: #24313d !important;
    font-weight: 600;
}

body .title:has(input:not([type="hidden"]), select) > .toolbaricon {
    display: inline-flex !important;
    width: 28px !important;
    height: 27px !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid #aebdca !important;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
}

body .title:has(input:not([type="hidden"]), select) > .divchk {
    margin-left: auto !important;
}

body .title > .matrix-title-action {
    margin-left: auto !important;
}

/* Upload Cases: compact workflow card with a clear primary action. */
.matrix-upload-cases .matrix-upload-cases__panel {
    padding: 18px !important;
}

.matrix-upload-cases .matrix-upload-cases__panel .matrix-form-controls {
    border-spacing: 0;
}

.matrix-upload-cases .matrix-upload-cases__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 14px 20px;
    padding: 0 !important;
}

.matrix-upload-cases .matrix-upload-cases__fields > .widget {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
}

.matrix-upload-cases .matrix-upload-cases__fields .lblcontainer,
.matrix-upload-cases .matrix-upload-cases__fields .inputcontainer {
    width: auto !important;
    height: auto;
    padding: 0 !important;
    float: none;
}

.matrix-upload-cases .matrix-upload-cases__fields input[type="text"],
.matrix-upload-cases .matrix-upload-cases__fields input[type="file"] {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 32px;
}

.matrix-upload-cases .matrix-upload-cases__fields > input.button {
    grid-column: 1 / -1;
    justify-self: end;
    min-width: 110px;
    color: #fff;
    border-color: #245a91;
    background: #245a91;
}

/* Change Password: readable help and consistently aligned secure fields. */
.matrix-change-password .matrix-password-form {
    padding: 18px !important;
}

.matrix-change-password .matrix-password-form__fields {
    display: grid;
    gap: 12px;
    padding: 0 !important;
}

.matrix-change-password .matrix-password-form__fields > .widget {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(170px, .8fr) minmax(190px, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
}

.matrix-change-password .matrix-password-form__fields .lblcontainer,
.matrix-change-password .matrix-password-form__fields .inputcontainer {
    width: auto !important;
    height: auto;
    padding: 0 !important;
    float: none;
}

.matrix-change-password .matrix-password-form__fields input[type="password"] {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--matrix-theme-border);
    border-radius: 3px;
}

.matrix-change-password .matrix-password-form__help {
    grid-template-columns: 1fr !important;
    margin-bottom: 4px !important;
    padding: 10px 12px;
    color: #365269;
    border: 1px solid #bfd0dd;
    border-radius: 4px;
    background: #e7f0f6;
    line-height: 1.45;
}

.matrix-form-actions {
    display: flex;
    justify-content: flex-end;
    padding: 12px 18px 18px;
}

.matrix-form-actions input.button {
    min-width: 130px;
    min-height: 32px;
    margin: 0 !important;
    color: #fff !important;
    border-color: #245a91 !important;
    background: #245a91 !important;
}

.matrix-change-password .matrix-form-actions #btnsave {
    padding: 6px 16px !important;
    color: #fff !important;
    background-color: #245a91 !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
}

@media (max-width: 720px) {
    .matrix-upload-cases .matrix-upload-cases__fields {
        grid-template-columns: 1fr;
    }

    .matrix-change-password .matrix-password-form__fields > .widget {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

body .title input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body .title select {
    box-sizing: border-box !important;
    height: 27px !important;
    min-height: 27px !important;
    margin: 0 !important;
    padding: 2px 7px !important;
    border: 1px solid var(--matrix-theme-border) !important;
    border-radius: 3px !important;
    background-color: var(--matrix-theme-control) !important;
    line-height: 21px !important;
}

body .title input[type="checkbox"],
body .title input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 !important;
}

/* Shared compact button system. This is intentionally last in the global
   theme so page-specific legacy button gradients cannot produce a different
   Save button on each screen. Background images are retained for old icons. */
body.matrix-v2 input.button,
body.matrix-v2 button.button,
body.matrix-v2 input[type="button"]:not(.form-control),
body.matrix-v2 input[type="submit"]:not(.form-control),
body.matrix-v2 input[type="reset"]:not(.form-control) {
    box-sizing: border-box;
    min-height: 28px;
    padding: 4px 12px;
    color: #294052 !important;
    background-color: #f8fafc !important;
    border: 1px solid #9aabb9 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-shadow: none !important;
    cursor: pointer;
}

body.matrix-v2 a.matrix-button {
    display: inline-flex;
    box-sizing: border-box;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1px solid #9aabb9;
    border-radius: 4px;
    background: #f8fafc;
    color: #294052;
    font: 700 12px/18px Arial, sans-serif;
    text-decoration: none;
}

body.matrix-v2 a.matrix-button--primary {
    border-color: #245a91;
    background: #245a91;
    color: #fff;
}

body.matrix-v2 a.matrix-button--primary:hover {
    border-color: #1c4b79;
    background: #1c4b79;
    color: #fff;
}

body.matrix-v2 a.matrix-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 100, 152, .2);
}

body.matrix-v2 :is(input.button, button.button, input[type="button"], input[type="submit"], input[type="reset"]):hover:not(:disabled):not(.buttondisabled) {
    color: #17324a !important;
    background-color: #e7eef4 !important;
    border-color: #71879a !important;
}

body.matrix-v2 :is(input.button, button.button, input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(43, 100, 152, .2) !important;
}

body.matrix-v2 :is(input, button):is(
    #btnsave,
    #btncompsave,
    #btnok,
    #btnfilter,
    #btnfind,
    #btngenreport,
    #btnupload,
    #btnsend,
    #btntransfer,
    #btnadd,
    #btnlogin,
    [value^="Save" i],
    [value^="Submit" i],
    [value^="Apply" i],
    [value^="Generate" i],
    [value^="Upload" i]
) {
    color: #fff !important;
    background-color: #245a91 !important;
    border-color: #245a91 !important;
}

body.matrix-v2 :is(input, button):is(
    #btnsave,
    #btncompsave,
    #btnok,
    #btnfilter,
    #btnfind,
    #btngenreport,
    #btnupload,
    #btnsend,
    #btntransfer,
    #btnadd,
    #btnlogin,
    [value^="Save" i],
    [value^="Submit" i],
    [value^="Apply" i],
    [value^="Generate" i],
    [value^="Upload" i]
):hover:not(:disabled):not(.buttondisabled) {
    color: #fff !important;
    background-color: #1c4b79 !important;
    border-color: #1c4b79 !important;
}

body.matrix-v2 :is(input, button):is(#btndelete, [value^="Delete" i]) {
    color: #fff !important;
    background-color: #b42318 !important;
    border-color: #b42318 !important;
}

body.matrix-v2 :is(input, button)#btnsave[value^="Delete" i] {
    color: #fff !important;
    background-color: #b42318 !important;
    border-color: #b42318 !important;
}

body.matrix-v2 :is(input, button):disabled,
body.matrix-v2 .buttondisabled {
    opacity: .58;
    cursor: not-allowed !important;
}

body .title > .divselect,
body .title .matrix-form-title__end {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body .title > .divselect select {
    width: 100% !important;
}

/* Scanning is the visual baseline for data-heavy tables. */
body table#casetable,
body .matrix-data-grid,
body .tableContainer > table {
    color: #263746;
    background: var(--matrix-theme-panel);
    border-color: var(--matrix-theme-border);
}

body table#casetable > thead,
body .matrix-data-grid > thead,
body .tableContainer > table > thead,
body .flexigrid div.hDiv,
body .flexigrid div.hDiv th {
    color: #31475b;
    background: var(--matrix-theme-grid-head) !important;
    border-color: #c3ced9 !important;
}

body table#casetable > thead th,
body .matrix-data-grid > thead th,
body .tableContainer > table > thead th,
body .tableContainer > table > thead td {
    padding: 7px 8px;
    color: #31475b;
    background: var(--matrix-theme-grid-head) !important;
    border-color: #c3ced9 !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

body table#casetable > tbody td,
body .matrix-data-grid > tbody td,
body .tableContainer > table > tbody td,
body .flexigrid div.bDiv td {
    color: #263746;
    background: var(--matrix-theme-control) !important;
    border-color: #d9e2ea !important;
}

body table#casetable > tbody tr:nth-child(even) td,
body .matrix-data-grid > tbody tr:nth-child(even) td,
body .tableContainer > table > tbody tr:nth-child(even) td,
body .flexigrid div.bDiv tr.erow td {
    background: var(--matrix-theme-grid-alt) !important;
}

body table#casetable > tbody tr:hover td,
body .matrix-data-grid > tbody tr:hover td,
body .tableContainer > table > tbody tr:hover td,
body .flexigrid div.bDiv tr:hover td {
    background: #dcecf8 !important;
}

body .flexigrid,
body .flexigrid div.bDiv,
body .matrix-report-grid,
body .tableContainer {
    background-color: var(--matrix-theme-panel) !important;
    border-color: var(--matrix-theme-border) !important;
}