html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

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

.title-bar {
    background: green;
    text-align: center;
    padding-top: 10px;
    color: antiquewhite;
    padding-bottom: 5px;
    font-weight: 700 !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
    padding-right: 0 !important;
    padding-left: 0 !important;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

table .invoice-changed,
table .invoice-changed > td {
    background-color: rgba(61, 159, 255, 0.3) !important;
}

.td-padding-modify td {
    /*padding: 0 !important;*/
}

.td-padding-modify th, .td-padding-modify td {
    padding: 4px !important;
}

.span-padding-modify {
    padding: .5rem !important;
    padding-top: 0rem !important;
}

.size-screen-visible-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.w-15vw {
    width: 15vw !important;
    min-width: 120px !important;
    max-width: 300px !important;
}
.w-12vw {
    width: 12vw !important;
    min-width: 120px !important;
    max-width: 250px !important;
}
.w-10vw {
    width: 10vw !important;
    min-width: 100px !important;
    max-width: 200px !important;
}
.w-8vw {
    width: 8vw !important;
    min-width: 80px !important;
    max-width: 150px !important;
}
.w-6vw {
    width: 6vw !important;
    min-width: 60px !important;
    max-width: 120px !important;
}

.env-info {
    position: absolute !important;
    top: 0;
    left: 0;
    z-index: 100;
}

.navbar-bg {
    background-image: linear-gradient( rgba(0, 55, 55, 0.6) 3%, rgba(33, 140, 140, 0.8) 12%, rgba(83, 140, 61, 0.3) 40%, rgba(33, 140, 140, 0.6) 96% ) !important;
}

main {
    max-width: 100vw;
}

.logo-bg {
    background-image: linear-gradient(180deg, transparent 10%, rgba(255, 255, 255, 1) 43%,rgba(255, 255, 255, 1) 67%, transparent 100%);
    padding-top: 9px;
    padding-bottom: 2px;
}

.td-action-hover {
    cursor: pointer;
    transition: background 0.2s;
}

.td-action-hover:hover {
    background-color: rgba(61, 159, 255, 0.15) !important;
}

.nowrap {
    white-space: nowrap;
    min-width: 110px; /* Adjust as needed */
}

.compact-col {
    white-space: nowrap;
    width: 1%;
}

/* --- Table style similar to WorkVSDrive --- */
.shift-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.98rem;
    min-width: unset;
    table-layout: auto;
}

    .shift-table th, .shift-table td {
        border: 1px solid #dee2e6;
        padding: 3px 8px;
        text-align: left;
        vertical-align: middle;
        background: #fff;
        /* Remove max-width and text-overflow for natural sizing */
        /* Remove white-space: nowrap if you want wrapping, or keep it for single-line */
    }

.shift-table th {
    background: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    /*z-index: 2;*/
}

/* Darker thead background */
.shift-table thead th {
    background: #d1d5db; /* or #e0e0e0, adjust as needed */
    color: #222;
    font-weight: 600;
}

/* Top border for every row */
.first-row-border {
    border-top: 2px solid #b0b0b0;
}



/* Optional: keep alternating row background for readability */
.shift-table tbody tr:nth-child(even) td {
    background: #f6f6f6;
}

/* Optional: highlight changed rows */
.shift-table tr.invoice-changed td {
    background: #fffbe6;
}

.shift-table tr:nth-child(even) td {
    background: #f6f6f6;
}

.shift-table tr.invoice-changed td {
    background: #fffbe6;
}

.shift-table .nowrap {
    white-space: nowrap;
}

.shift-table th.compact-col {
    white-space: nowrap;
    width: 1%;
}

.shift-table td.compact-col {
    white-space: nowrap;
    width: 1%;
}

.table-copy-borders th,
.table-copy-borders td {
    border: 2px solid #dee2e6 !important;
    vertical-align: middle;
    background-color: #fff;
}

/* Limit width of Extra Info column and truncate overflow */
    .table-copy-borders td.extra-info-col,
    .table-copy-borders th.extra-info-col {
        max-width: 22vw;
        min-width: 250px; 
    }

/* Make table compact and auto-sized */
.table-compact {
    width: auto !important;
    max-width: 100%;
    min-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.95rem;
}

.table-compact th,
.table-compact td {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6 !important;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    border: none;
    padding: 3px;
    background-color: transparent;
}

.float-right{
        float: right !important;
}

.blurred {
    filter: blur(5px);
    pointer-events: none;
    opacity: 0.6;
}

.diagnostics-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    border-radius: 8px;
    overflow: hidden;
}

    .diagnostics-table th, .diagnostics-table td {
        padding: 1rem;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .diagnostics-table th {
        background: #f5f6fa;
        font-weight: 600;
    }

.action-btn {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .action-btn:disabled {
        background: #a5b4fc;
        cursor: not-allowed;
    }

.loader {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2563eb;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

.loader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.status-pill {
    display: inline-block;
    margin-left: 1rem;
    padding: 0.2em 0.9em;
    font-size: 0.95em;
    font-weight: 600;
    border-radius: 999px;
    background: #e6f9ed;
    color: #198754;
    border: 1px solid #b6eccb;
    vertical-align: middle;
    transition: background 0.2s, color 0.2s;
}

.status-pill-success {
    background: #e6f9ed;
    color: #198754;
    border-color: #b6eccb;
}

.status-pill-warning {
    background: #fff4e5; 
    color: #d97706;
    border-color: #fcd34d;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.expand-row {
    transition: background 0.3s;
    background: #f0f6ff;
}

.result-content {
    animation: fadeIn 0.5s;
    padding: 1rem 0.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page container: centers content and limits width to viewport */
.page-container {
    max-width: 100vw;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* Table responsive: horizontal scroll on small screens, auto width on large */
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Optional: add a subtle border or background for clarity */
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    padding-bottom: 0.5rem;
}


.mrugaj_me {
    animation: blinker 2s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}




.scrollable-content {
    max-height: calc(100vh - 160px); /* Adjust 160px if your header/footer is larger/smaller */
    overflow-y: auto;
    overflow-x: hidden;
}

.w-responsive-ellipsis {
    width: 70vw;
    max-width: 98vw;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fit-content-column {
    min-width: 220px;
}

.project-selected {
    background-color: #e3f2fd !important; /* Light blue */
    color: #0d6efd !important; /* Bootstrap primary */
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 0 0 2px #0d6efd33;
}

.modal.fade.show.d-block {
    display: block;
    background: rgba(0,0,0,0.3);
    z-index: 1050;
}

/* Modal overlay for Blazor modal */
.modal.fade.show.d-block {
    display: block;
    background: rgba(0,0,0,0.3);
    z-index: 1050;
}

/* Modal content styling */
.modal-content {
    border-radius: 8px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.18);
    border: none;
    background-color: #f8f9fa; /* matches Bootstrap's light background */
}

/* Modal header styling */
.modal-header.bg-primary {
    background-color: #1b6ec2 !important; /* your app's primary */
    color: #fff !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #e3e3e3;
}

/* Modal close button */
.modal-header .close-primary {
    color: #fff;
    opacity: 0.8;
    font-size: 1.5rem;
    font-weight: 400;
    border: none;
    background: transparent;
    transition: opacity 0.2s;
}

    .modal-header .close-primary:hover {
        opacity: 1;
    }

/* Modal body for scrollable content */
.modal-body {
    overflow-y: auto;
}

/* Notification row styling */
#notifItem- {
    background-color: whitesmoke;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 8px 0;
}


.notification-card {
    background: #f8f9fa;
    border-left: 4px solid #1b6ec2;
    transition: box-shadow 0.2s;
}

    .notification-card:hover {
        box-shadow: 0 4px 24px rgba(30, 80, 180, 0.10);
    }

.notif-img-thumb {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    background: #fff;
}

.dropdown-menu.scrollable-dropdown {
    max-height: 60vh;
    overflow-y: auto;
}

.print-button {
    border: solid;
    border-radius: 8px;
    border-color: darkblue;
    display: flex;
    align-items: center;
}

    .print-button:hover {
        background-color: lightblue;
    }

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

    .active, .collapsible:hover {
        background-color: #555;
    }

.modal-xxl {
    max-width: 95vw !important;
}

.pdf-in-modal {
    width: 100%;
    height: 60vh;
}

.modal-fullscreen-on-xxl {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100% !important;
    margin: 0 !important;
}

.invoice-expand-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

    .invoice-expand-container.expanded {
        max-height: 500px; /* Large enough for your content */
        padding-top: 8px;
        padding-bottom: 8px;
        opacity: 1;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s, opacity 0.3s;
    }

/* Totals table reuses the responsive table so its columns collapse identically to the
   cost summary table above, keeping the two perfectly aligned on every screen width. */
.cost-summary-totals-wrapper {
    margin-top: 1rem;
}

    /* Hide the duplicated header of the totals table visually, but keep it in the table
       layout. With table-layout: fixed the first row defines the column widths, so the
       header must stay present (just collapsed) for the totals columns to size exactly
       like the detail table above. Using display:none here would shift sizing to the
       first body row and throw the expand-toggle column out of alignment. */
    .cost-summary-totals-wrapper .cost-summary-totals-x1 thead {
        visibility: collapse;
        line-height: 0;
    }

        .cost-summary-totals-wrapper .cost-summary-totals-x1 thead th {
            padding-top: 0;
            padding-bottom: 0;
            border: 0;
            height: 0;
        }

    /* Hide pagination / search controls the responsive table may render for the totals. */
    .cost-summary-totals-wrapper .pagination,
    .cost-summary-totals-wrapper .page-of-text,
    .cost-summary-totals-wrapper .search-box-wrap,
    .cost-summary-totals-wrapper input[type="search"] {
        display: none !important;
    }

    .cost-summary-totals-wrapper .cost-summary-totals-x1 tbody tr {
        background-color: var(--bs-info-bg-subtle, #cff4fc);
    }

/* ---- Fixed (content-independent) column widths shared by both cost summary tables ----
   table-layout: fixed makes column widths depend on these rules instead of the cell
   content, so the detail table and the totals table line up regardless of their data.

   Column order is stable left-to-right: [optional 2.5rem expand-toggle] Name, then the
   six numeric columns. The responsive component only hides trailing columns at each
   priority breakpoint, so we fix the toggle + numeric widths and let Name flex (auto). */
.cost-summary-table-x1,
.cost-summary-totals-x1 {
    table-layout: fixed;
    width: 100%;
}

    /* Default: every column gets the same fixed numeric width. */
    .cost-summary-table-x1 > thead > tr > th,
    .cost-summary-table-x1 > tbody > tr > td,
    .cost-summary-totals-x1 > thead > tr > th,
    .cost-summary-totals-x1 > tbody > tr > td {
        width: 8.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The responsive expand-toggle column is always exactly 2.5rem. */
    .cost-summary-table-x1 .d-xl-none,
    .cost-summary-totals-x1 .d-xl-none {
        width: 2.5rem;
    }

    /* The Name column flexes to fill the remaining space (never fixed):
       - when the toggle column exists, Name is its adjacent sibling;
       - when the toggle column is absent, Name is the first cell. */
    .cost-summary-table-x1 .d-xl-none + th,
    .cost-summary-table-x1 .d-xl-none + td,
    .cost-summary-totals-x1 .d-xl-none + th,
    .cost-summary-totals-x1 .d-xl-none + td,
    .cost-summary-table-x1 > thead > tr > th:first-child:not(.d-xl-none),
    .cost-summary-table-x1 > tbody > tr > td:first-child:not(.d-xl-none),
    .cost-summary-totals-x1 > thead > tr > th:first-child:not(.d-xl-none),
    .cost-summary-totals-x1 > tbody > tr > td:first-child:not(.d-xl-none) {
        width: auto;
    }


/* Responsive adjustments */


@media (max-width: 1700px) {
    .users-col {
        display: none !important;
    }

    .users-row {
        display: table-row !important;
    }

    .shift-table {
        /* min-width: 1200px; */ /* <-- Removed this line */
        font-size: 0.95rem;
    }
}

@media (max-width: 1300px) {
    .dates-col {
        display: none !important;
    }

    .dates-row {
        display: table-cell !important;
    }
}

@media (max-width: 600px) {
    .logo-container {
        width: 100%;
    }
}



@media (min-width:576px) {
    .fit-content-column {
        max-width: fit-content;
    }

    .w-responsive-ellipsis {
        width: clamp(120px, 15vw, 300px);
        max-width: 90vw;
        min-width: 80px;
    }
}

@media (min-width:768px) {
}


@media (min-width: 800px) {
    main {
        max-width: calc(100vw - 251px);
    }
}
@media (min-width:992px) {
    .modal-fullscreen-on-xxl {
        width: 950px !important;
        max-width: 950px !important;
        height: 95% !important;
        margin: auto !important;
    }
}

@media (min-width:1200px) {
    .modal-fullscreen-on-xxl {
        width: 1150px !important;
        max-width: 1150px !important;
        height: 95% !important;
        margin: auto !important;
    }
}

@media (min-width: 1301px) {
    .dates-col {
        display: table-cell !important;
    }
    .dates-row {
        display: none !important;
    }
}

@media (min-width:1400px) {
}

@media (min-width: 1440px) {
    .modal-xxl {
        max-width: 90vw !important;
    }
    .modal-fullscreen-on-xxl {
        width: 1400px;
        max-width: 1400px;
        height: 95%;
        margin: 0;
    }

    .td-padding-text {
        padding-right: 30px !important;
    }

    .td-padding-number {
        padding-left: 30px !important;
        text-align: right !important;
    }

}

@media (min-width: 1701px) {
    .users-col {
        display: table-cell !important;
    }
    .users-row {
        display: none !important;
    }
}

@media (min-width:1920px) {
    .w-responsive-ellipsis {
        width: 100%;
        max-width: 500px;
    }

    .details-columns-container {
        display: flex;
        flex-direction: row;
        gap: 24px; /* adjust as needed */
        max-height: 100vh; /* fallback for all browsers */
        max-height: -webkit-fill-available; /* Chrome, Safari */
        max-height: -moz-available; /* Firefox */
        max-height: fill-available; /* Spec, not widely supported */
    }

    .details-column {
        flex: 1 1 0;
        overflow-y: auto;
        min-width: 0; /* prevents overflow */
        max-height: 100vh;
        max-height: -webkit-fill-available;
        max-height: -moz-available;
        max-height: fill-available;
    }

    .pdf-in-modal {
        min-width: 0; /* prevents overflow */
        height: calc(100vh - 200px);
    }

    .modal-fullscreen-on-xxl {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .modal-xxl{
        max-width: 1900px !important;
    }
}


/* ------------------------------------------------------------------
   Window info widgets (KWindowInfoWidgets)
   A chip bar with one inline panel underneath, replacing the old
   dropdown row that clipped inside its container.
   ------------------------------------------------------------------ */

.kwi {
    --kwi-border: #dbe2ea;
    --kwi-surface: #ffffff;
    --kwi-text: #33415c;
    --kwi-muted: #7b8794;
    background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
    border: 1px solid var(--kwi-border);
    border-radius: 12px;
    padding: 8px;
}

.kwi-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.kwi-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--kwi-border);
    border-radius: 999px;
    background-color: var(--kwi-surface);
    color: var(--kwi-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .kwi-chip:hover {
        border-color: #adb9c7;
        box-shadow: 0 2px 8px rgba(27, 110, 194, 0.12);
        transform: translateY(-1px);
    }

    .kwi-chip:focus-visible {
        outline: 2px solid #1b6ec2;
        outline-offset: 2px;
    }

    .kwi-chip.is-active {
        background-color: #1b6ec2;
        border-color: #1b6ec2;
        color: #fff;
        box-shadow: 0 2px 10px rgba(27, 110, 194, 0.28);
    }

        .kwi-chip.is-active .kwi-chip-count {
            background-color: rgba(255, 255, 255, 0.25);
            color: #fff;
        }

.kwi-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: #eef2f7;
    color: var(--kwi-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.kwi-chip--static {
    cursor: default;
}

    .kwi-chip--static:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--kwi-border);
    }

.kwi-chip--ok {
    background-color: #e8f6ed;
    border-color: #b7e0c6;
    color: #1a7f42;
}

.kwi-chip--info {
    background-color: #e9f2fd;
    border-color: #b9d5f5;
    color: #14589e;
}

.kwi-chip--warn {
    background-color: #fff6e5;
    border-color: #f7dca6;
    color: #96650a;
}

.kwi-chip--danger {
    background-color: #fdecec;
    border-color: #f5bcbc;
    color: #a52222;
}

.kwi-chip--neutral {
    background-color: #f1f4f8;
    color: var(--kwi-muted);
}

.kwi-chip--muted {
    color: var(--kwi-muted);
}

.kwi-chip--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--kwi-muted);
}

.kwi-chip--skeleton {
    width: 116px;
    height: 32px;
    background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
    background-size: 400% 100%;
    animation: kwi-shimmer 1.3s ease infinite;
}

@keyframes kwi-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.kwi-divider {
    width: 1px;
    height: 24px;
    margin: 0 4px;
    background-color: var(--kwi-border);
}

.kwi-print {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    /* The print components bring their own oversized icon; scale them into the chip bar. */
    .kwi-print .print-button {
        border-radius: 999px;
        border-width: 1px;
        padding: 2px 10px !important;
        margin: 0 !important;
    }

        .kwi-print .print-button span[style] {
            font-size: 1.1rem !important;
        }

/* ---------- inline panel ---------- */

.kwi-panel {
    margin-top: 8px;
    background-color: var(--kwi-surface);
    border: 1px solid var(--kwi-border);
    border-radius: 10px;
    animation: kwi-panel-in .16s ease-out;
}

@keyframes kwi-panel-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.kwi-panel-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--kwi-border);
}

.kwi-panel-title {
    font-weight: 600;
    color: var(--kwi-text);
}

.kwi-panel-close {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--kwi-muted);
    line-height: 1;
    padding: 4px 6px;
    border-radius: 6px;
    cursor: pointer;
}

    .kwi-panel-close:hover {
        background-color: #eef2f7;
        color: var(--kwi-text);
    }

.kwi-panel-body {
    padding: 10px 12px;
    max-height: 42vh;
    overflow-y: auto;
}

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

.kwi-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px dashed #e6ebf1;
}

    .kwi-list-item:last-child {
        border-bottom: none;
    }

.kwi-list-item--stacked {
    flex-direction: column;
    align-items: stretch;
}

/* The document row is a wrapping flex line, so the preview takes a full basis to land under the name and button. */
.kwi-doc-preview {
    flex-basis: 100%;
    width: 100%;
}

/* ReynaPro comments are shown as they arrived, so their line breaks and spacing have to survive. */
.kwi-doc-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 30vh;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid #e6ebf1;
    border-radius: 6px;
    background-color: #fbfcfd;
    color: var(--kwi-text);
    font-size: 0.85rem;
}

.kwi-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    background-color: #eef2f7;
    color: var(--kwi-text);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.kwi-tag--ok {
    background-color: #e8f6ed;
    color: #1a7f42;
}

.kwi-tag--info {
    background-color: #e9f2fd;
    color: #14589e;
}

.kwi-tag--warn {
    background-color: #fff6e5;
    color: #96650a;
}

.kwi-tag--danger {
    background-color: #fdecec;
    color: #a52222;
}

.kwi-path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--kwi-text);
}

.kwi-path-part--strong {
    font-weight: 600;
}

    .kwi-path .bi {
        color: #b6c0cc;
        font-size: 0.7rem;
    }

.kwi-muted {
    color: var(--kwi-muted);
    font-size: 0.85rem;
}

.kwi-file-icon {
    color: #14589e;
}

.kwi-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 4px;
    color: var(--kwi-muted);
}

    .kwi-empty .bi {
        font-size: 1.2rem;
    }

.kwi-hold-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kwi-hold-target {
    font-weight: 600;
    color: var(--kwi-text);
}

.kwi-hold-comment {
    margin-top: 4px;
    padding: 6px 10px;
    border-left: 3px solid #f5bcbc;
    background-color: #fcf7f7;
    border-radius: 0 6px 6px 0;
    white-space: pre-line;
}

/* ---------- shelf assignment ---------- */

.kwi-frame {
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--kwi-border);
    border-radius: 8px;
    background-color: #fbfcfe;
}

    .kwi-frame:last-child {
        margin-bottom: 0;
    }

.kwi-frame-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.kwi-frame-shelf {
    color: var(--kwi-muted);
    font-size: 0.85rem;
}

.kwi-frame-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .kwi-frame-picker .form-select {
        width: auto;
        min-width: 130px;
    }

/* Warning block inside the SweetAlert that confirms a shelf move. */
.kwi-swal-warning {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    border-left: 4px solid #e0a800;
    background-color: #fff8e6;
    color: #7a5300;
    text-align: left;
    font-size: 0.95rem;
}

    .kwi-swal-warning p {
        margin: 0;
    }

        .kwi-swal-warning p + p {
            margin-top: 8px;
        }

/* A move that needs a decision - taking a window apart leaves frames behind in the window buffer. */
.kwi-warning {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 4px solid #e0a800;
    background-color: #fff8e6;
    color: #7a5300;
    font-size: 0.85rem;
}

.kwi-warning-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

    .kwi-warning-line + .kwi-warning-line {
        margin-top: 6px;
    }

    .kwi-warning-line .bi {
        flex-shrink: 0;
        margin-top: 2px;
    }

/* What a shelf move did to the production events. */
.kwi-progress-change {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background-color: #f7f9fc;
    border: 1px dashed var(--kwi-border);
    font-size: 0.85rem;
}

.kwi-frame-message {
    margin-top: 8px;
    font-size: 0.85rem;
}

    .kwi-frame-message.is-ok {
        color: #1a7f42;
    }

    .kwi-frame-message.is-error {
        color: #a52222;
    }

/* ---------- history and profiles modals ---------- */

.kwi-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.kwi-search {
    max-width: 320px;
}

/* Both tables scroll with the modal body, which is also what their sticky header sticks to. */
.kwi-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #eef2f7;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .kwi-chip-label {
        display: none;
    }

    .kwi-chip--static .kwi-chip-label {
        display: inline;
    }

    .kwi-panel-body {
        max-height: 50vh;
    }
}