@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


/* ── 1. CSS Custom Properties ────────────────────────────── */
:root {
    --rz-fieldset-padding: .5rem .75rem !important;
    --rz-tabs-padding: .5rem .75rem !important;
    --rz-menu-top-item-padding: 1px !important;
    --rz-grid-header-font-weight: normal !important;
    --rz-input-placeholder-color: #b0c4de !important;
    --rz-text-disabled-color: #f5f7fa !important;
    --rz-grid-filter-color: #c1c9cb !important;
    --rz-grid-header-filter-icon-active-color: #28363c !important;
    --rz-grid-sort-icon-color: var(--rz-grid-filter-color) !important;
    --rz-tooltip-background-color: #ebeff0 !important;
    --rz-tooltip-color: #151c1f !important;
}


/* ── 2. Base ─────────────────────────────────────────────── */
html, body {
    font-family: 'Bookman Old Style', 'dubai', sans-serif !important;
    color: #232b38;
    -webkit-font-smoothing: antialiased;
    font-size: 14px !important;
}

    body.waiting * {
        cursor: progress;
    }

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.text-default {
    color: #232b38 !important;
}


/* ── 3. Page layout ──────────────────────────────────────── */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main {
    flex: 1;
}

.content {
    padding-top: 1.1rem;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
}

    .main .top-row > a,
    .main .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .main .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* ── 4. Sidebar ──────────────────────────────────────────── */
.sidebar {
    background-image: linear-gradient(180deg, #232b38 0%, #3c4759 70%);
}

    .sidebar .top-row {
        background-color: rgba(0,0,0,0.4);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }


/* ── 5. Navigation & branding ────────────────────────────── */
.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.company-name {
    height: 40px;
    padding-top: 10px;
}

.app-logo {
    height: 40px;
    width: 200px;
}

.nav-menu {
    margin-bottom: .5rem !important;
    line-height: 1.6 !important;
}

    .nav-menu a {
        color: #232b38 !important;
    }

nav ul li i {
    cursor: pointer;
}

ul[role=tablist] {
    flex-wrap: wrap;
}

.top-right {
    position: absolute;
    top: 1%;
    right: 0%;
}

.menu-item {
    cursor: pointer;
    width: 100%;
}

    .menu-item:hover .bookmark {
        opacity: 1 !important;
    }


/* ── 6. Forms & inputs ───────────────────────────────────── */
.form-control {
    font-size: 90% !important;
    font-weight: 400 !important;
}

.g-input,
input[disabled],
input[readonly],
textarea[disabled],
textarea[readonly] {
    background-color: var(--rz-text-disabled-color) !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: var(--rz-input-placeholder-color) !important;
    font-size: small !important;
}

/* Hide number spinners — WebKit */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide number spinners — Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.hide-num-spinner button {
    display: none !important;
}

.swal2-input {
    height: 2rem !important;
    font-size: 0.875rem !important;
}

.w-date {
    max-width: 125px !important;
    min-width: 115px !important;
}

.ui-dropdown .ui-dropdown-panel .ui-dropdown-items-wrapper ul li,
.ui-dropdown-panel .ui-dropdown-filter-container input,
.ui-dropdown label {
    font-size: .95rem !important;
}

.rz-calendar .rz-calendar-today {
    font-weight: 900 !important;
}

.mr-score input {
    width: 100%;
    border-style: none !important;
    text-align: center !important;
    font-size: 0.875rem !important;
}


/* ── 7. Validation ───────────────────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    list-style: none !important;
    margin-left: -40px !important;
    color: #f9777f !important;
    font-size: 90% !important;
    font-weight: 300 !important;
}

.err-message {
    list-style: none !important;
    padding-top: .5rem !important;
    color: #f9777f !important;
    font-size: 90% !important;
    font-weight: 300 !important;
    white-space: pre-wrap !important;
    display: block !important;
    overflow: auto !important;
}

.validation-summary-errors ul,
.validation-summary-errors li {
    list-style: none !important;
    margin-left: -40px !important;
}


/* ── 8. Tables ───────────────────────────────────────────── */
table tbody,
table tbody tr td a {
    color: #232b38 !important;
    font-size: .95rem !important;
}

table thead tr th {
    color: #232b38 !important;
    font-weight: 400 !important;
}

    table thead tr th span {
        cursor: pointer;
    }

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: #f3f5f7;
}

.hide-table-header table thead tr {
    display: none !important;
}

.narrow-table table td {
    padding: 5px;
}

.narrow-table table thead th div span {
    font-weight: 400 !important;
}

.table-menu {
    cursor: pointer;
}

    .table-menu:hover {
        text-decoration: underline;
    }

.mr-table-auto table {
    table-layout: auto !important;
}

.mr-hide-headers thead {
    display: none;
}

.mr-header th,
.mr-header td {
    background-color: var(--rz-grid-header-background-color) !important;
}

.mr-group-label {
    background-color: var(--rz-grid-header-background-color) !important;
    max-width: 30px !important;
    opacity: .8;
}

.mr-journal-child {
    margin: 0 !important;
    border: 1px solid #b8bec2 !important;
    border-collapse: collapse !important;
    color: #48606c !important;
}

    .mr-journal-child tbody tr td {
        border: none !important;
        padding-right: 0.5rem !important;
        text-align: right !important;
        font-size: 80%;
        font-weight: 400;
        color: #48606c !important;
    }

    .mr-journal-child thead tr th {
        border-top: none !important;
        font-weight: 400 !important;
        padding-right: 0.5rem !important;
        text-align: right !important;
        font-size: 80%;
        color: #48606c !important;
    }

    .mr-journal-child tfoot tr td {
        padding-right: 0.5rem !important;
        text-align: right !important;
        font-size: 80%;
        font-weight: bold;
        color: #48606c !important;
        border-bottom: none !important;
        border-right: none !important;
    }


/* ── 9. Misc components ──────────────────────────────────── */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

#mr-print-hidden-area {
    display: none;
}

.mr-attachment-box {
    overflow-y: scroll !important;
    max-height: 200px !important;
    width: 100% !important;
}

.mr-today {
    background-color: #ebf0f2 !important;
}

.mr-inactive {
    opacity: 0.5 !important;
}

.mr-tooltip {
    font-size: 80% !important;
    opacity: 0.9 !important;
}

.mr-dragdrop-area {
    cursor: pointer;
    position: relative;
}

    .mr-dragdrop-area input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

.mr-dragdrop-highlight {
    font-weight: 500;
    background-color: lightblue;
}

.env {
    z-index: 100;
    font-size: 2rem;
    font-weight: bold;
    text-align: center !important;
    margin-top: 1rem;
    width: 100%;
}

.env-md {
    margin-top: 1.5rem !important;
    font-size: 1.2rem !important;
    width: 130px;
}

.comments {
    white-space: pre-wrap !important;
    display: block !important;
    overflow: auto !important;
    opacity: .75 !important;
    font-size: 90% !important;
    font-weight: 400 !important;
}

.kpi-sec {
    padding: 1.25rem;
    border-bottom: 1px solid var(--g-border);
}

.scroll {
    max-height: 350px;
    overflow-y: auto;
}

.img-md {
    max-height: 300px;
    max-width: 400px;
}

.run-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #778899;
    border-radius: 4px;
    color: #778899;
    background-color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    transition: all 0.15s ease;
    user-select: none;
}

    .run-btn:hover {
        background-color: #17a2b8;
        color: #fff;
    }

/* ── 10. Typography utilities ────────────────────────────── */
.font-title {
    font-size: 1.5rem !important;
}

.font-label {
    opacity: .7 !important;
    font-weight: 400 !important;
}

.font-link {
    font-size: 0.88rem !important;
}

.medium {
    font-size: 90% !important;
    font-weight: 400 !important;
}

.xsmall {
    font-size: 70% !important;
    font-weight: 300 !important;
}

.opacity-0 {
    opacity: 0;
    font-size: 11px !important;
}

.text-sky {
    color: #a9a9a9 !important;
}

.text-message {
    color: #72597d !important;
}

.text-lightgray {
    color: #d7d7d7 !important;
}

.text-link {
    color: #2275d4 !important;
}

    .text-link:hover {
        text-decoration: underline;
    }

.text-card-menu {
    font-size: .95rem !important;
}

.bg-color-app {
    background-color: #f3f5f7 !important;
}

.bg-sky {
    background-color: #a9a9a9 !important;
}

.custom-control-label:before {
    background-color: #f3f5f7 !important;
}


/* ── 11. Width utilities ─────────────────────────────────── */
.width-100 {
    width: 110px !important;
}

.w-max-400 {
    max-width: 400px !important;
}

.w-max-300 {
    max-width: 300px !important;
}

.w-max-250 {
    max-width: 250px !important;
}

.w-max-200 {
    max-width: 200px !important;
}

.w-max-150 {
    max-width: 150px !important;
}

.w-max-125 {
    max-width: 125px !important;
}

.w-max-120 {
    max-width: 120px !important;
}

.w-max-100 {
    max-width: 100px !important;
}

.w-max-90 {
    max-width: 90px !important;
}

.w-max-50 {
    max-width: 50px !important;
}

.w-max-60 {
    max-width: 60px !important;
}

/* ── 12. Misc utilities ──────────────────────────────────── */
.pointer {
    cursor: pointer !important;
}

.spinner-large {
    width: 50px !important;
    height: 50px !important;
    font-size: 15px !important;
}


/* ── 13. Animations ──────────────────────────────────────── */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.refresh-start {
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
}


/* ── 14. Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
    .menu-item {
        padding-bottom: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row a,
    .main .top-row .btn-link {
        margin-left: 0;
    }

    .breadcrumb {
        padding: 5px 15px !important;
        padding-left: .2rem !important;
        background-color: #f3f5f7 !important;
    }

    ol.breadcrumb {
        padding: 10px 16px;
        list-style: none;
        background-color: #eee;
    }

    .spinner-center {
        position: fixed;
        top: 15%;
        left: 42%;
        transform: translate(15%, 42%);
    }

    .main > div {
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }
}

@media (min-width: 768px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 230px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .main .top-row {
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .main > div {
        padding-left: 1rem !important;
        padding-right: 1.5rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        display: block;
    }

    .breadcrumb {
        position: fixed !important;
        padding-left: .2rem !important;
        top: 5px !important;
        z-index: 999 !important;
        background-color: #f7f7f7 !important;
    }

    .spinner-center {
        position: fixed;
        top: 15%;
        left: 44%;
        transform: translate(15%, 44%);
    }
}


/* Card wrapper: fluid up to a sensible cap. Replaces the inline */
.mr_form_card {
    width: 100%;
    max-width: 48rem; /* ~768px; shrink/grow this one value to taste */
}

/* The grid. Fields auto-flow into as many columns as fit and wrap
   to the next row on narrow screens. No fixed "N per row".
   auto-fill keeps lone fields at one column width (left-aligned)
   instead of stretching them across the whole card. */
.mr_field_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: start;
}

/* A single field cell laid out as: label on its own row, then the input
   and the (optional) MrAttentionNeeded alert icon side by side below it.
   Grid is used (not flex-wrap) so the icon can never be pushed onto a new
   line by the input growing to fill. */
.mr_field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* input | alert icon */
    align-items: center;
    column-gap: 0.35rem;
    row-gap: 0.1rem;
    min-width: 0;
}

    /* The label (first child <div>) spans both columns, so the input + icon
   share the row beneath it. */
    .mr_field > label,
    .mr_field > div:first-child {
        grid-column: 1 / -1;
    }

/* A cell that should occupy the full width of the grid row
   (e.g. a free-text field or an informational line). */
.mr_field_full {
    grid-column: 1 / -1;
}

/* Input fills its grid column; the alert icon keeps its natural width
   in the adjacent column. */
.mr_field .rz-numeric,
.mr_field .rz-datepicker,
.mr_field .rz-textbox,
.mr_field .rz-dropdown,
.mr_field .form-control {
    width: 100%;
    min-width: 0;
}