@keyframes wb-fade-in{0%{opacity:0}to{opacity:.85}}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,left .3s,top .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);contain:layout size;text-align:left;touch-action:none}.wb-body,.wb-header{position:absolute;left:0}.wb-header{top:0;width:100%;height:35px;line-height:35px;color:#fff;overflow:hidden;z-index:1}.wb-body{top:35px;right:0;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:contents;background:#fff;margin-top:0!important;contain:strict;z-index:0}.wb-control *,.wb-icon{background-repeat:no-repeat}.wb-drag{height:100%;padding-left:10px;cursor:move}.wb-title{font-family:Arial,sans-serif;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-icon{display:none;width:20px;height:100%;margin:-1px 8px 0-3px;float:left;background-size:100%;background-position:center}.wb-e,.wb-w{width:10px;top:0}.wb-n,.wb-s{left:0;height:10px;position:absolute}.wb-n{top:-5px;right:0;cursor:n-resize;z-index:2}.wb-e{position:absolute;right:-5px;bottom:0;cursor:w-resize;z-index:2}.wb-s{bottom:-5px;right:0;cursor:n-resize;z-index:2}.wb-nw,.wb-sw,.wb-w{left:-5px}.wb-w{position:absolute;bottom:0;cursor:w-resize;z-index:2}.wb-ne,.wb-nw,.wb-sw{width:15px;height:15px;z-index:2;position:absolute}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize}.wb-ne{top:-5px;right:-5px}.wb-se,.wb-sw{bottom:-5px}.wb-se{position:absolute;right:-5px;width:15px;height:15px;cursor:nw-resize;z-index:2}.wb-control{float:right;height:100%;max-width:100%;text-align:center}.wb-control *{display:inline-block;width:30px;height:100%;max-width:100%;background-position:center;cursor:pointer}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.wb-body .wb-hide,.wb-show,.winbox.hide,.winbox.min .wb-body>*,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min,.wb-full{display:none}.winbox.max .wb-drag,.winbox.min .wb-drag{cursor:default}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center calc(50% + 6px)}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjMgMC0xMiA1LjM3LTEyIDEydjQwYzAgNi42MyA1LjM3IDEyIDEyIDEyaDQwYzYuNjMgMCAxMi01LjM3IDEyLTEyem0tNTIgNGMtMi4yMSAwLTQtMS43OS00LTRWMzZjMC0yLjIxIDEuNzktNCA0LTRoNDBjMi4yMSAwIDQgMS43OSA0IDR2NDBjMCAyLjIxLTEuNzkgNC00IDRINDB6Ii8+PC9zdmc+);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto;background-position:5px center}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.max .wb-body~div,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-drag,body.wb-lock iframe{pointer-events:none}.winbox.max{box-shadow:none}.winbox.max .wb-body{margin:0!important}.winbox iframe{position:absolute;width:100%;height:100%;border:0}body.wb-lock .winbox{will-change:left,top,width,height;transition:none}.winbox.modal:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;border-radius:inherit}.winbox.modal:after{content:"";position:absolute;top:-50vh;left:-50vw;right:-50vw;bottom:-50vh;background:#0d1117;animation:wb-fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-shadow{box-shadow:none}.no-header .wb-body{top:0}.no-move:not(.min) .wb-title{pointer-events:none}.wb-body .wb-show{display:revert}

/* Context Menu Styles */
.context-menu{background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,0.2);padding:4px 0;min-width:200px}.context-menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;color:#333;transition:background-color 0.15s}.context-menu-item:hover{background-color:#f0f0f0}.context-menu-item i{font-size:16px}.context-menu-divider{height:1px;background-color:#e0e0e0;margin:4px 0}

/* Manually Edited Cell */
.manually-edited-cell{background-color:#add8e6!important}
.tabulator {
    font-size: 80%;
}
/* CSS Variables for Theme Management */
:root {
    /* Blue Theme (Default) */
    --bg-primary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --bg-secondary: rgba(255, 255, 255, 0.95);
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-inverse: #ffffff;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --navbar-bg: #0d6efd;
    --btn-primary: linear-gradient(45deg, #0d6efd, #0984e3);
    --btn-primary-hover: linear-gradient(45deg, #0b5ed7, #0770d1);
    --dropdown-bg: #ffffff;
    --dropdown-hover: #e3f2fd;
    --table-header: linear-gradient(135deg, #e3f2fd, #f8f9fa);
    --table-border: #0d6efd;
    --focus-ring: rgba(13, 110, 253, 0.25);
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --alert-bg: rgba(0, 0, 0, 0.25);
    --dirty-bg: #fff3cd;
    --bs-accordion-btn-active-bg: rgba(207, 226, 255);
    --ims-floating-label-bg: #ffffff; /* the window background behind a floating label */
    --ims-panel-bg: #f8f9fa; /* a tinted panel inside a window (.ims-panel) */
    --ims-form-row-gap: 0.75rem; /* the space under each form row (.mb-3) in every window */
}

/* Light Mode */
[data-theme="light"] {
    --bg-primary: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --bg-secondary: rgba(255, 255, 255, 0.98);
    --text-primary: #495057;
    --text-secondary: #6c757d;
    --text-inverse: #495057;
    --border-color: #e9ecef;
    --card-bg: #ffffff;
    --navbar-bg: #f8f9fa;
    --btn-primary: linear-gradient(45deg, #6c757d, #495057);
    --btn-primary-hover: linear-gradient(45deg, #5a6268, #3e444a);
    --dropdown-bg: #ffffff;
    --dropdown-hover: #f8f9fa;
    --table-header: linear-gradient(135deg, #f8f9fa, #ffffff);
    --table-border: #dee2e6;
    --focus-ring: rgba(108, 117, 125, 0.25);
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --alert-bg: #f8f9fa;
    --dirty-bg: #fff3cd;
    --bs-accordion-btn-active-bg: rgb(207, 226, 255);
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-primary: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
    --bg-secondary: rgba(33, 37, 41, 0.95);
    --text-primary: #f8f9fa;
    --text-secondary: #adb5bd;
    --text-inverse: #f8f9fa;
    --border-color: #495057;
    --card-bg: #343a40;
    --navbar-bg: #212529;
    --btn-primary: linear-gradient(45deg, #375a7f, #2c4866);
    --btn-primary-hover: linear-gradient(45deg, #2e4a66, #24394d);
    --dropdown-bg: #343a40;
    --dropdown-hover: #495057;
    --table-header: linear-gradient(135deg, #495057, #343a40);
    --table-border: #6c757d;
    --focus-ring: rgba(55, 90, 127, 0.5);
    --input-bg: #495057;
    --input-border: #6c757d;
    --alert-bg: #343a40;
    --dirty-bg: #6c5d2e;
    --bs-secondary-color: #adb5bd;
    --ims-floating-label-bg: #212529;
    --ims-panel-bg: #2b3035;
}

/* Visual feedback for modified fields */
.ims-dirty {
    background-color: var(--dirty-bg) !important;
}

/* Status pills (purchase requests, requisition picker).
   One width for every state, so a column of them reads as a band rather than a ragged edge,
   and a size in rem so the 80% font-size of .tabulator does not shrink them further.
   The colour pair comes from Bootstrap's text-bg-*, which stays readable in both themes. */
.ims-status-badge {
    display: inline-block;
    min-width: 5.25rem;
    padding: 0.3em 0.6em;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    border-radius: 50rem;
}

/* The light pill is the "not one of ours" state, and needs an edge to read as a pill at all. */
.ims-status-badge.text-bg-light {
    border: 1px solid var(--border-color);
}

/* Login Page Styles */
.login-body {
    background: var(--bg-primary);
    min-height: 100vh;
    color: var(--text-primary);
}

.card {
    border: none;
    border-radius: 15px;
}

.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.card-body {
    background: var(--bg-secondary);
    border-radius: 15px;
}

.input-group-text {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    border-right: none;
    color: var(--text-primary);
}

.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus {
    border-left: none;
    box-shadow: 0 0 0 0.25rem var(--focus-ring);
    border-color: var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control :read-only {
    color: rgb(73, 80, 87) !important;
}

[data-theme="dark"] .form-control:disabled {
    background-color: rgb(73, 80, 87);
}

/* data-theme does not flip Bootstrap, so a select would stay white in the dark theme - and the
   light floating label over its top edge unreadable. Paint it like an input, arrow included. */
[data-theme="dark"] .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath fill=%27none%27 stroke=%27%23dee2e6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3e%3c/svg%3e");
}

.btn-primary {
    background: var(--btn-primary);
    border: none;
    border-radius: 25px;
    padding: 12px 0;
    font-weight: 600;
    color: var(--text-inverse);
}

.btn-primary:hover {
    background: var(--btn-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--text-inverse);
}

/* Dashboard Styles */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.dropdown-item {
    padding: 10px 20px;
    transition: background-color 0.2s;
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* Stats Cards */
.bg-primary {
    background: linear-gradient(45deg, #0d6efd, #0984e3) !important;
    color: #000000 !important;
}

.bg-primary .card-title,
.bg-primary h2,
.bg-primary i {
    color: #000000 !important;
}

.bg-success {
    background: linear-gradient(45deg, #198754, #20c997) !important;
    color: #000000 !important;
}

.bg-success .card-title,
.bg-success h2,
.bg-success i {
    color: #000000 !important;
}

.bg-warning {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
    color: #000000 !important;
}

.bg-warning .card-title,
.bg-warning h2,
.bg-warning i {
    color: #000000 !important;
}

.bg-info {
    background: linear-gradient(45deg, #4facfe, #00f2fe) !important;
    color: #000000 !important;
}

.bg-info .card-title,
.bg-info h2,
.bg-info i {
    color: #000000 !important;
}

/* Table Styles */
.tabulator {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    background-color: var(--card-bg);
}

.tabulator-header {
    background: var(--table-header);
    border-bottom: 2px solid var(--table-border);
    color: var(--text-primary);
}

.tabulator-col-title {
    color: var(--text-primary);
}

/* Dark mode specific header text fix */
[data-theme="dark"] .tabulator-header {
    color: #000000;
}

[data-theme="dark"] .tabulator-col-title {
    color: #000000;
}

.tabulator-cell {
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
    background-color: transparent;
}

/* Tabulator stretches every cell to the height of the row's tallest one, and the content of an
   inline-block cell starts at its top edge. align-content centres it while the cell stays a block
   container - an inline-flex cell (Tabulator's vertAlign) loses ellipsis and hozAlign.
   align-items keeps a cell that some formatter turns into a flex box centred as well. */
.tabulator-row .tabulator-cell {
    align-content: center;
    align-items: center;
}

.tabulator-row {
    color: var(--text-primary);
    background-color: var(--card-bg);
}

.tabulator-row:nth-child(even) {
    background-color: var(--alert-bg);
    color: var(--text-primary);
}

.tabulator-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Dark mode specific tabulator fixes */
[data-theme="dark"] .tabulator-row:nth-child(even) {
    background-color: rgba(73, 80, 87, 0.3);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-row:nth-child(even) .tabulator-cell {
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-row:nth-child(odd) .tabulator-cell {
    color: var(--text-primary);
}

/* Pagination controls for dark mode */
[data-theme="dark"] .tabulator-page {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .tabulator-page:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-page.active {
    background-color: var(--btn-primary);
    color: var(--text-inverse);
}

/* Light mode specific tabulator fixes */
[data-theme="light"] .tabulator-row:nth-child(even) {
    background-color: var(--alert-bg);
    color: var(--text-primary);
}

[data-theme="light"] .tabulator-row:nth-child(even) .tabulator-cell {
    color: var(--text-primary);
}

[data-theme="light"] .tabulator-row:nth-child(odd) {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="light"] .tabulator-row:nth-child(odd) .tabulator-cell {
    color: var(--text-primary);
}

/* Additional tabulator controls styling */
.tabulator-tableHolder {
    background-color: var(--card-bg);
}

.tabulator-footer {
    background-color: var(--card-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Tabulator sorting arrows and controls */
.tabulator-col-sorter {
    color: var(--text-secondary);
}

.tabulator-col-sorter.tabulator-col-sorter-asc,
.tabulator-col-sorter.tabulator-col-sorter-desc {
    color: var(--text-primary);
}

/* Header filter funnel (FILTER_ICON): an outline, filled in while the column is filtered -
   src/lib/tabulatorFilterIndicator.ts marks such a column's header. */
.ims-filter-icon__fill {
    display: none;
}

.tabulator-col.ims-header-filter-active .ims-filter-icon__outline {
    display: none;
}

.tabulator-col.ims-header-filter-active .ims-filter-icon__fill {
    display: inline;
}

/* Tabulator loading and empty states */
.tabulator-loader {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

.tabulator-placeholder {
    color: var(--text-secondary);
    background-color: var(--card-bg);
}

/* Tabulator selection highlighting */
.tabulator-row.tabulator-selected {
    background-color: var(--focus-ring) !important;
    color: var(--text-primary) !important;
}

.tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Dark mode tabulator controls */
[data-theme="dark"] .tabulator-col-sorter {
    color: var(--text-secondary);
}

[data-theme="dark"] .tabulator-col-sorter.tabulator-col-sorter-asc,
[data-theme="dark"] .tabulator-col-sorter.tabulator-col-sorter-desc {
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-loader {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-placeholder {
    color: var(--text-secondary);
    background-color: var(--card-bg);
}

[data-theme="dark"] .tabulator-row.tabulator-selected {
    background-color: rgba(55, 90, 127, 0.3) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Light mode tabulator controls */
[data-theme="light"] .tabulator-row.tabulator-selected {
    background-color: rgba(108, 117, 125, 0.15) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .tabulator-row.tabulator-selected .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Tabulator hover effects */
.tabulator-row:hover {
    background-color: var(--dropdown-hover) !important;
    color: var(--text-primary) !important;
}

.tabulator-row:hover .tabulator-cell {
    color: var(--text-primary) !important;
}

/* Timesheets — running row (no end time) */
.tabulator-row.tse-row-running,
.tabulator-row.tse-row-running:nth-child(odd) {
    background-color: rgba(0, 128, 0, 0.75) !important;
    color: var(--text-primary) !important;
}
.tabulator-row.tse-row-running:nth-child(odd) .tabulator-cell {
    color: var(--text-inverse) !important;
}

.tabulator-row.tse-row-running:nth-child(even) {
    background-color: rgba(0, 128, 0, 0.95) !important;
}

.tabulator-row.tse-row-running:nth-child(even) .tabulator-cell {
    color: var(--text-inverse) !important;
}

.tabulator-row.tse-row-running:hover {
    color: var(--text-secondary) !important;
}

.tabulator-row.tse-row-running:hover .tabulator-cell {
    color: black !important;
}

[data-theme="dark"] .tabulator-row:hover {
    background-color: rgba(73, 80, 87, 0.5) !important;
}

[data-theme="dark"] .tabulator-row.tse-row-running,
[data-theme="dark"].tabulator-row.tse-row-running:nth-child(odd) {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .tabulator-row.tse-row-running .tabulator-cell {
    color: var(--text-primary) !important;
}

[data-theme="light"] .tabulator-row.tse-row-running,
[data-theme="light"] .tabulator-row.tse-row-running:nth-child(even),
[data-theme="light"] .tabulator-row.tse-row-running:nth-child(odd) {
    color: var(--text-primary) !important;
}

[data-theme="light"] .tabulator-row.tse-row-running .tabulator-cell {
    color: var(--text-primary) !important;
}

[data-theme="light"] .tabulator-row:hover {
    background-color: rgba(73, 80, 87, 0.604) !important;
}

/* Column titles wrap to multiple lines when no filter input is present */
.ims-wrap-col-titles .tabulator-col:not(:has(.tabulator-header-filter)) .tabulator-col-title {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    text-wrap-mode: wrap !important;
    text-align: center;
}

/* Tabulator header filter styling */
.tabulator-header-filter input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--input-border);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    width: 100%;
}

.tabulator-header-filter input:focus {
    outline: none;
    border-color: var(--table-border);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

.tabulator-header-filter input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Dark mode header filter styling */
[data-theme="dark"] .tabulator-header-filter input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

[data-theme="dark"] .tabulator-header-filter input:focus {
    border-color: var(--table-border);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

[data-theme="dark"] .tabulator-header-filter input::placeholder {
    color: var(--text-secondary);
}

/* Light mode header filter styling */
[data-theme="light"] .tabulator-header-filter input {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--input-border);
}

[data-theme="light"] .tabulator-header-filter input:focus {
    border-color: var(--table-border);
    box-shadow: 0 0 0 2px var(--focus-ring);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-nav .dropdown-menu {
        border: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.95);
    }

    .card-body {
        padding: 2rem;
    }

    /* Dark theme mobile menu adjustments */
    [data-theme="dark"] .navbar-nav .dropdown-menu {
        background: rgba(52, 58, 64, 0.95);
        color: var(--text-primary);
    }

    [data-theme="dark"] .navbar-nav .dropdown-item {
        color: var(--text-primary);
    }

    [data-theme="dark"] .navbar-nav .dropdown-item:hover,
    [data-theme="dark"] .navbar-nav .dropdown-item:focus {
        background-color: var(--dropdown-hover);
        color: var(--text-primary);
    }

    /* Dark theme mobile submenu adjustments */
    [data-theme="dark"] .navbar-nav .dropdown-submenu .dropdown-menu {
        background: rgba(52, 58, 64, 0.95);
    }

    [data-theme="dark"] .navbar-nav .dropdown-submenu .dropdown-item {
        color: var(--text-primary);
    }

    [data-theme="dark"] .navbar-nav .dropdown-submenu .dropdown-item:hover {
        background-color: var(--dropdown-hover);
        color: var(--text-primary);
    }

    /* Light theme mobile menu adjustments */
    [data-theme="light"] .navbar-nav .dropdown-menu {
        background: rgba(248, 249, 250, 0.95);
        color: var(--text-primary);
    }

    [data-theme="light"] .navbar-nav .dropdown-item {
        color: var(--text-primary);
    }

    [data-theme="light"] .navbar-nav .dropdown-item:hover,
    [data-theme="light"] .navbar-nav .dropdown-item:focus {
        background-color: var(--dropdown-hover);
        color: var(--text-primary);
    }
}

/* Loading spinner */
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Alert styles */
.alert {
    border: none;
    border-radius: 10px;
}

/* Quick actions */
.btn-outline-primary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
    border-width: 2px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Navbar Theme Styles */
.navbar {
    background-color: var(--navbar-bg) !important;
}

.navbar-brand {
    color: var(--text-inverse) !important;
}

.nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.nav-link:hover {
    color: var(--text-inverse) !important;
}

/* Restore readable colors for nav-tabs inside modals/cards (blue theme sets all nav-links to white) */
.nav-tabs .nav-link {
    color: #495057 !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    color: #212529 !important;
}

/* Dark mode navbar adjustments */
[data-theme="dark"] .nav-link {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .nav-link:hover {
    color: var(--text-primary) !important;
}

/* Light mode navbar adjustments */
[data-theme="light"] .navbar-brand,
[data-theme="light"] .nav-link {
    color: var(--text-primary) !important;
}

.breadcrumb-item.active {
    color: #0d6efd;
}

.breadcrumb-item a {
    color: #6c757d;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: #0d6efd;
}

/* Focus states for accessibility */
.btn:focus,
.form-control:focus,
.btn-check:focus + .btn {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Custom blue accent for alerts */
.alert-info {
    background-color: #d1ecf1;
    border-color: #b8daff;
    color: #055160;
}

.alert-primary {
    background-color: #cff4fc;
    border-color: #b6effb;
    color: #0c4a6e;
}

/* Theme Widget Styles */
.theme-widget-buttons {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
    min-width: 52px;
    line-height: 1;
}

.theme-btn:hover {
    border-color: var(--btn-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.theme-btn.active {
    border-color: var(--btn-primary);
    background: var(--btn-primary);
    color: var(--text-inverse);
}

.theme-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.theme-icon.blue {
    background: linear-gradient(45deg, #0d6efd, #0984e3);
}

.theme-icon.light {
    background: linear-gradient(45deg, #f8f9fa, #e9ecef);
    border: 1px solid #dee2e6;
}

.theme-icon.dark {
    background: linear-gradient(45deg, #343a40, #495057);
}

/* Theme transition */
* {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* Additional theme adjustments */
.breadcrumb-item.active {
    color: var(--text-primary);
}

.breadcrumb-item a {
    color: var(--text-secondary);
}

.breadcrumb-item a:hover {
    color: var(--text-primary);
}

/* Modal theme support */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

.btn-close {
    filter: var(--bs-btn-close-white-filter, none);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dark mode specific adjustments */
[data-theme="dark"] body {
    background-color: #1a1a1a;
    color: var(--text-primary);
}

[data-theme="dark"] .bg-body {
    --bs-bg-opacity: 0;
}

.ims-accordion-button-compact {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Dark mode accordion */
[data-theme="dark"] .accordion-item {
    background-color: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-theme="dark"] .accordion-button {
    background-color: #2d3748;
    color: #f8f9fa;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: #343a40;
    color: #adb5bd;
    box-shadow: inset 0 -1px 0 #495057;
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .accordion-body {
    background-color: #343a40;
    --ims-floating-label-bg: #343a40;
}

[data-theme="dark"] .accordion .ims-floating-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .bg-primary {
    background: linear-gradient(45deg, #375a7f, #2c4866) !important;
}

[data-theme="dark"] .bg-success {
    background: linear-gradient(45deg, #28a745, #20c997) !important;
}

[data-theme="dark"] .bg-warning {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
}

[data-theme="dark"] .bg-info {
    background: linear-gradient(45deg, #17a2b8, #20c997) !important;
}

/* Dark theme widget text should remain white (override the black from base styles) */
[data-theme="dark"] .bg-primary,
[data-theme="dark"] .bg-success,
[data-theme="dark"] .bg-warning,
[data-theme="dark"] .bg-info {
    color: #ffffff !important;
}

[data-theme="dark"] .bg-primary .card-title,
[data-theme="dark"] .bg-primary h2,
[data-theme="dark"] .bg-primary i,
[data-theme="dark"] .bg-success .card-title,
[data-theme="dark"] .bg-success h2,
[data-theme="dark"] .bg-success i,
[data-theme="dark"] .bg-warning .card-title,
[data-theme="dark"] .bg-warning h2,
[data-theme="dark"] .bg-warning i,
[data-theme="dark"] .bg-info .card-title,
[data-theme="dark"] .bg-info h2,
[data-theme="dark"] .bg-info i {
    color: #ffffff !important;
}

/* Light theme widget text overrides */
[data-theme="light"] .bg-primary,
[data-theme="light"] .bg-success,
[data-theme="light"] .bg-warning,
[data-theme="light"] .bg-info {
    color: #000000 !important;
}

[data-theme="light"] .bg-primary .card-title,
[data-theme="light"] .bg-primary h2,
[data-theme="light"] .bg-primary i,
[data-theme="light"] .bg-success .card-title,
[data-theme="light"] .bg-success h2,
[data-theme="light"] .bg-success i,
[data-theme="light"] .bg-warning .card-title,
[data-theme="light"] .bg-warning h2,
[data-theme="light"] .bg-warning i,
[data-theme="light"] .bg-info .card-title,
[data-theme="light"] .bg-info h2,
[data-theme="light"] .bg-info i {
    color: #000000 !important;
}

/* ===== DASHBOARD GRID SYSTEM ===== */
:root {
    --dw-cell-w: 220px;
    --dw-cell-h: 160px;
    --dw-gap: 10px;
    --dw-cols: 12;
}

.dashboard-grid-wrapper {
    overflow: auto;
    padding-bottom: 40px;
}

.dashboard-grid {
    position: relative;
    min-width: calc(var(--dw-cols) * (var(--dw-cell-w) + var(--dw-gap)));
}

.dashboard-widget {
    position: absolute;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

.dashboard-widget.is-dragging {
    opacity: 0.25;
    pointer-events: none;
}

/* Widget sizes: rows × cols */
.dashboard-widget[data-size="1x1"] {
    width: var(--dw-cell-w);
    height: var(--dw-cell-h);
}
.dashboard-widget[data-size="1x3"] {
    width: calc(3 * var(--dw-cell-w) + 2 * var(--dw-gap));
    height: var(--dw-cell-h);
}
.dashboard-widget[data-size="2x3"] {
    width: calc(3 * var(--dw-cell-w) + 2 * var(--dw-gap));
    height: calc(2 * var(--dw-cell-h) + 1 * var(--dw-gap));
}
.dashboard-widget[data-size="3x2"] {
    width: calc(2 * var(--dw-cell-w) + 1 * var(--dw-gap));
    height: calc(3 * var(--dw-cell-h) + 2 * var(--dw-gap));
}
.dashboard-widget[data-size="3x3"] {
    width: calc(3 * var(--dw-cell-w) + 2 * var(--dw-gap));
    height: calc(3 * var(--dw-cell-h) + 2 * var(--dw-gap));
}
.dashboard-widget[data-size="6x6"] {
    width: calc(6 * var(--dw-cell-w) + 5 * var(--dw-gap));
    height: calc(6 * var(--dw-cell-h) + 5 * var(--dw-gap));
}

/* Size picker in context menu */
.size-picker-container {
    padding: 6px 12px 8px;
}

.size-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 18px);
    grid-template-rows: repeat(6, 18px);
    gap: 3px;
    cursor: pointer;
}

.size-picker-cell {
    border-radius: 3px;
    background: var(--border-color);
    transition: background 0.06s;
}

.size-picker-cell.spc-current {
    background: #0d6efd;
}

.size-picker-cell.spc-hover {
    background: rgba(13, 110, 253, 0.35);
}

.size-picker-label {
    text-align: center;
    font-size: 11px;
    margin-top: 5px;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ===== WIDGET SURFACE =====
   Every widget is drawn on the same card - one background, one border, one shadow - and
   says what it is through a coloured icon rather than a coloured block. The six Bootstrap
   fills the tiles used to carry (bg-primary, bg-success, two bg-info, ...) are gone; what
   differs between tiles now is only the --widget-accent each one sets below. */
.dashboard-widget .card {
    margin: 0;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.18s ease;
}

.dashboard-widget .card:hover {
    box-shadow:
        0 2px 4px rgba(15, 23, 42, 0.08),
        0 10px 24px rgba(15, 23, 42, 0.12);
}

/* A shadow that reads on a dark surface has to be darker than the surface itself. */
[data-theme="dark"] .dashboard-widget .card {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 4px 14px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .dashboard-widget .card:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 10px 26px rgba(0, 0, 0, 0.55);
}

/* The base .card-body paints a surface of its own; inside a widget the card is it. */
.dashboard-widget .card-body {
    background: transparent;
    border-radius: 0;
}

/* Stat tile: icon and caption on the top line, the figure alone on the bottom one. */
.dashboard-widget .widget-stat-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
}

.widget-stat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* The panel widgets (Recent Activity, Quick Actions) wear the same head row. */
.dashboard-widget .card-header.widget-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border-bottom: 1px solid var(--border-color);
}

/* Widget typography */
.widget-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--text-secondary);
    /* "Not Invoiced Orders" does not fit beside the icon on one line in a 1x1 tile, so it
       wraps to a second and is cut off only past that - an ellipsis on the first line
       leaves two captions reading "Purchase Reques...". */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.widget-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    white-space: nowrap;
}

/* The urgent share of a figure, e.g. the "3" in "3 / 12" on the Purchase Requests tile. */
.widget-value-urgent {
    color: #d92d20;
}

[data-theme="dark"] .widget-value-urgent {
    color: #ff7b72;
}

/* Icon tile: the accent colour on a wash of itself, so the card stays neutral.
   Both come from the widget-accent-* class on the card, with a grey fallback for a tile
   that was added without one. */
.widget-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--widget-accent, var(--text-secondary));
    background: var(--widget-accent-soft, rgba(108, 117, 125, 0.12));
}

.widget-accent-blue {
    --widget-accent: #0d6efd;
    --widget-accent-soft: rgba(13, 110, 253, 0.12);
}

.widget-accent-green {
    --widget-accent: #198754;
    --widget-accent-soft: rgba(25, 135, 84, 0.12);
}

.widget-accent-amber {
    --widget-accent: #c77700;
    --widget-accent-soft: rgba(199, 119, 0, 0.12);
}

.widget-accent-cyan {
    --widget-accent: #0a97b0;
    --widget-accent-soft: rgba(10, 151, 176, 0.12);
}

.widget-accent-purple {
    --widget-accent: #6f42c1;
    --widget-accent-soft: rgba(111, 66, 193, 0.12);
}

.widget-accent-indigo {
    --widget-accent: #4263eb;
    --widget-accent-soft: rgba(66, 99, 235, 0.12);
}

.widget-accent-slate {
    --widget-accent: #5c6b7a;
    --widget-accent-soft: rgba(92, 107, 122, 0.12);
}

[data-theme="dark"] .widget-accent-blue {
    --widget-accent: #6ea8fe;
    --widget-accent-soft: rgba(110, 168, 254, 0.18);
}

[data-theme="dark"] .widget-accent-green {
    --widget-accent: #4ad991;
    --widget-accent-soft: rgba(74, 217, 145, 0.18);
}

[data-theme="dark"] .widget-accent-amber {
    --widget-accent: #ffc861;
    --widget-accent-soft: rgba(255, 200, 97, 0.18);
}

[data-theme="dark"] .widget-accent-cyan {
    --widget-accent: #4dd4ea;
    --widget-accent-soft: rgba(77, 212, 234, 0.18);
}

[data-theme="dark"] .widget-accent-purple {
    --widget-accent: #b197fc;
    --widget-accent-soft: rgba(177, 151, 252, 0.18);
}

[data-theme="dark"] .widget-accent-indigo {
    --widget-accent: #8da2fb;
    --widget-accent-soft: rgba(141, 162, 251, 0.18);
}

[data-theme="dark"] .widget-accent-slate {
    --widget-accent: #adb5bd;
    --widget-accent-soft: rgba(173, 181, 189, 0.18);
}

.widget-body-scroll {
    overflow: auto;
}

/* ===== ACTION WIDGETS =====
   A card whose buttons the user picked out of the navbar (src/actionWidgets.ts). The
   list is as long as they made it, so the card scrolls rather than growing past the
   grid cell it was given, and the buttons are one per row: a stack reads as a menu,
   which is what it is, and a two-column grid would break every label in half. */
.action-widget-body {
    padding: 12px 14px;
    overflow-y: auto;
    min-height: 0;
}

/* The gap is set here rather than with Bootstrap's .gap-2 so that the condensed style
   below can tighten it: a utility class carries !important and nothing would win. 8px is
   what .gap-2 was, so the default card is unchanged. */
.action-widget-buttons {
    grid-template-columns: 1fr;
    gap: 8px;
}

/* Left-aligned with the icon, and wrapping rather than clipping: "New Inventory
   Request" does not fit on one line in a two-column-wide card. The padding is Bootstrap's
   own .btn padding, written out for the same reason as the gap above. */
.action-widget-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    text-align: left;
    white-space: normal;
}

.action-widget-empty {
    line-height: 1.4;
}

/* ── The three styles a card can be drawn in ───────────────────────────────────
   A stack of buttons is exactly as tall as the number of them, so a card somebody has put
   a dozen of their windows on either takes half the dashboard or scrolls. Condensed is
   the same card with less room around and inside each button; links drop the control
   entirely and leave a list of places to go. The style is on the card element
   (data-action-style, see src/actionWidgets.ts) and nothing but this reads it. */
[data-action-style="condensed"] .action-widget-body {
    padding: 8px 10px;
}

[data-action-style="condensed"] .action-widget-buttons {
    gap: 3px;
}

[data-action-style="condensed"] .action-widget-button {
    padding: 2px 8px;
    gap: 6px;
    font-size: 0.85rem;
}

/* A line of text, not a control: the icon and the caption on one row, so a long caption
   wraps under itself rather than under the icon. The card's own accent colours it -
   the same variable the widget icon in its header uses, which is themed both ways. */
.action-widget-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: var(--widget-accent, #0d6efd);
    text-decoration: none;
    cursor: pointer;
}

.action-widget-link:hover,
.action-widget-link:focus-visible {
    color: var(--widget-accent, #0d6efd);
    text-decoration: underline;
}

[data-action-style="links"] .action-widget-buttons {
    gap: 2px;
}

/* The checklist in the configuration dialog. Sixty-odd menu items is more than fits on
   screen at once, so it scrolls inside the dialog body. */
.action-widget-picker {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.action-widget-picker .action-widget-group {
    padding: 6px 12px 2px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--input-bg, transparent);
    position: sticky;
    top: 0;
    z-index: 1;
}

.action-widget-picker .action-widget-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    cursor: pointer;
}

.action-widget-picker .action-widget-option:hover {
    background: var(--widget-accent-soft, rgba(13, 110, 253, 0.1));
}

.action-widget-picker .action-widget-option .action-widget-trail {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.action-widget-picker .action-widget-none {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* The chosen buttons, in the order the card will stack them: the dialog's other half,
   above the checklist the items are picked from. Rows are short, and the list is only as
   long as the user made it, so it scrolls on its own rather than pushing the checklist
   out of the dialog. */
.action-widget-order {
    max-height: 30vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
}

.action-widget-order-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    background: var(--card-bg);
}

.action-widget-order-item + .action-widget-order-item {
    margin-top: 2px;
}

/* The row is draggable anywhere, but the grip is what says so. */
.action-widget-order-handle {
    cursor: grab;
    color: var(--text-secondary);
}

.action-widget-order-item.is-dragging {
    opacity: 0.45;
    cursor: grabbing;
}

/* Where the row would land if it were let go now. */
.action-widget-order-item.is-drop-target {
    box-shadow: inset 0 2px 0 var(--bs-primary, #0d6efd);
}

.action-widget-order-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The caption is edited in the row it is ordered by, so the field takes the width the
   handle, the icon, the trail and the arrows leave it. Growing from nothing rather than
   from its own width is what makes that true: a form-control is 100% wide by default,
   which would have the field claim the row and squeeze the trail beside it to an
   ellipsis. The floor is for the other direction, a very long trail. */
input.action-widget-order-label {
    flex: 1 1 0;
    min-width: 8ch;
}

.action-widget-order-item .action-widget-trail {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Never more than a third of the row: past that, the trail is worth an ellipsis and
       the caption the user is typing is not. */
    flex: 0 1 auto;
    max-width: 33%;
}

/* Pushed to the right edge, so the arrows line up down the list however long the labels
   beside them are. */
.action-widget-order-controls {
    margin-left: auto;
    flex: 0 0 auto;
}

.action-widget-order-none {
    padding: 10px 12px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* The two halves of the configuration dialog, side by side once the dialog is wide
   enough for it (Bootstrap's lg breakpoint, where modal-xl stops being full width).
   Below that the columns stack and each list keeps the height it has above.

   Side by side, the dialog takes a height of its own rather than growing with the
   sixty-item checklist: the body fills the dialog, the row fills the body, and each list
   scrolls inside its own column - so the two lists end on the same line just above the
   footer, however long either of them is. */
@media (min-width: 992px) {
    #actionWidgetModal .modal-content {
        height: min(720px, calc(100vh - 3.5rem));
    }

    #actionWidgetModal .modal-body {
        display: flex;
        flex-direction: column;
    }

    .action-widget-columns {
        flex: 1 1 auto;
        min-height: 0;
        /* A wrapping row sizes its line to the taller column and overflows the dialog;
           side by side there are only ever the two, so nothing has to wrap. */
        flex-wrap: nowrap;
    }

    .action-widget-columns > [class*="col-"] {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .action-widget-columns .action-widget-order {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }

    .action-widget-columns .action-widget-picker {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
    }
}

/* The Configure / Remove column of the Customize Dashboard dialog.

   The table lays itself out automatically, so a long widget name takes the width it
   wants and leaves this column whatever is over. Without the no-wrap that floor is one
   button, and the Remove button drops onto a second line under Configure; with it the
   column can never be squeezed below the pair. */
.widget-edit-col {
    width: 110px;
    white-space: nowrap;
}

/* Drag indicator (snapped target cell) */
.grid-drop-indicator {
    position: absolute;
    background: rgba(13, 110, 253, 0.12);
    border: 2px dashed #0d6efd;
    border-radius: 8px;
    pointer-events: none;
    z-index: 50;
    transition:
        left 0.08s ease,
        top 0.08s ease;
}

/* Floating ghost during drag */
.grid-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.75;
    transform: rotate(2deg) scale(1.02);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

/* Widget draggable styles */
.widget-draggable {
    cursor: move;
    position: relative;
}

.widget-draggable:hover::before {
    opacity: 1;
}

/* Drag handle indicator dots */
.widget-draggable::before {
    content: "⋮⋮";
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--text-secondary);
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* Context Menu */
.context-menu {
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 4px 0;
}

.context-menu-item {
    padding: 8px 16px;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 14px;
    transition: background 0.15s;
    white-space: nowrap;
}

.context-menu-item:hover {
    background: var(--dropdown-hover);
}

.context-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* WinBox Theme Styling */
.winbox {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.winbox .wb-header {
    background: var(--navbar-bg) !important;
    color: var(--text-inverse) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.winbox .wb-title {
    color: var(--text-inverse) !important;
}

.winbox .wb-control span {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.winbox .wb-control span:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.winbox .wb-body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Dark theme specific WinBox styling */
[data-theme="dark"] .winbox .wb-header {
    background: var(--navbar-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .winbox .wb-title {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .winbox .wb-control span {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="dark"] .winbox .wb-control span:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Light theme specific WinBox styling */
[data-theme="light"] .winbox .wb-header {
    background: var(--navbar-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .winbox .wb-title {
    color: var(--text-primary) !important;
}

[data-theme="light"] .winbox .wb-control span {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .winbox .wb-control span:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* Modal window styles */
.modal-window {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 400px;
    min-height: 300px;
    z-index: 1000;
}

.modal-window-header {
    background: var(--bg-primary);
    color: white;
    padding: 10px 15px;
    border-radius: 8px 8px 0 0;
    cursor: move;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-window-title {
    flex-grow: 1;
    margin: 0;
    font-size: 16px;
}

.modal-window-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
}

.modal-window-body {
    padding: 20px;
    height: calc(100% - 50px);
    overflow: auto;
}

.modal-window-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}

/* Dropdown Submenu Styles */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
    display: none;
}

.dropdown-submenu:hover .dropdown-menu,
.dropdown-submenu.show .dropdown-menu {
    display: block;
}

.dropdown-submenu .dropdown-toggle::after {
    display: none;
}

.dropdown-submenu .dropdown-toggle {
    position: relative;
}

.dropdown-submenu .dropdown-toggle .bi-chevron-right {
    transition: transform 0.2s ease;
}

.dropdown-submenu:hover .dropdown-toggle .bi-chevron-right,
.dropdown-submenu.show .dropdown-toggle .bi-chevron-right {
    transform: rotate(90deg);
}

/* Dark mode submenu adjustments */
[data-theme="dark"] .dropdown-submenu .dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .dropdown-submenu .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-submenu .dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* Light mode submenu adjustments */
[data-theme="light"] .dropdown-submenu .dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .dropdown-submenu .dropdown-item {
    color: var(--text-primary);
}

[data-theme="light"] .dropdown-submenu .dropdown-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* File Control Compact Component Styles */
.file-control-compact {
    display: inline-block;
}

.file-dropzone-compact {
    transition: all 0.3s ease;
    border-color: var(--border-color) !important;
    background-color: var(--input-bg);
    min-height: 40px;
    cursor: pointer;
}

.file-dropzone-compact:hover {
    border-color: var(--table-border) !important;
    background-color: var(--dropdown-hover);
}

.file-dropzone-compact.border-primary {
    border-color: var(--table-border) !important;
    background-color: var(--dropdown-hover) !important;
}

.document-list-compact .dropdown-item-text {
    white-space: normal;
    border-bottom: 1px solid var(--border-color);
}

.document-list-compact .dropdown-item-text:last-child {
    border-bottom: none;
}

.document-list-compact .btn-group-sm .btn {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    line-height: 1;
}

.document-list-compact .btn-group-sm .btn i {
    font-size: 0.75rem;
}

/* Dropdown menu styling */
.file-control-compact .dropdown-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.file-control-compact .dropdown-menu .btn-link {
    color: var(--table-border);
    text-decoration: none;
    font-weight: 500;
}

.file-control-compact .dropdown-menu .btn-link:hover {
    color: var(--text-primary);
    text-decoration: none;
}

/* Progress bar in compact mode */
.file-control-compact .progress {
    background-color: var(--alert-bg);
}

.file-control-compact .progress-bar {
    background-color: var(--table-border);
}

/* Dark mode compact file control adjustments */
[data-theme="dark"] .file-dropzone-compact {
    background-color: var(--input-bg);
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .file-dropzone-compact:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .file-control-compact .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .file-control-compact .dropdown-menu .btn-link {
    color: var(--table-border);
}

[data-theme="dark"] .file-control-compact .dropdown-menu .btn-link:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .document-list-compact .dropdown-item-text {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Light mode compact file control adjustments */
[data-theme="light"] .file-dropzone-compact {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

[data-theme="light"] .file-dropzone-compact:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="light"] .file-control-compact .dropdown-menu {
    background-color: var(--dropdown-bg);
}

[data-theme="light"] .document-list-compact .dropdown-item-text {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Button hover effects */
.file-control-compact .btn-outline-primary:hover .bi-download,
.file-control-compact .btn-outline-success:hover .bi-eye,
.file-control-compact .btn-outline-danger:hover .bi-trash {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Compact button styling */
.file-control-compact .btn-sm {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

.file-control-compact .dropdown-toggle::after {
    margin-left: 0.5rem;
}

/* File drop target styling for main button */
.file-drop-target {
    transition: all 0.3s ease;
}

.file-drop-target.file-drop-active {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
    border-color: var(--table-border) !important;
}

.file-drop-target.file-drop-active .bi-paperclip {
    animation: paperclip-bounce 0.6s ease-in-out infinite;
}

/* Paperclip animation for active drop state */
@keyframes paperclip-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .file-drop-target.file-drop-active {
    box-shadow: 0 4px 12px rgba(55, 90, 127, 0.4);
}

.ims-modal-header {
    background-color: var(--navbar-bg);
    color: var(--text-inverse);
}

/* Light mode adjustments */
[data-theme="light"] .file-drop-target.file-drop-active {
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

/* Tabulator Menu Items (Context Menu, Dropdown) */
.tabulator-menu {
    background-color: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tabulator-menu-item {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

.tabulator-menu-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

/* Dark mode Tabulator menu styling */
[data-theme="dark"] .tabulator-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-menu-item {
    background-color: var(--dropdown-bg);
    color: var(--text-primary);
}

[data-theme="dark"] .tabulator-menu-item:hover {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

.tabulator-menu-separator {
    border-top: 1px solid var(--border-color);
}

[data-theme="dark"] .tabulator-menu-separator {
    border-top-color: var(--border-color);
}

/* Form rows: Bootstrap's mb-3 (1rem) under each field or row of fields, closed up to one value
   for every form. A window that needs other spacing sets --ims-form-row-gap on its root. */
.mb-3 {
    margin-bottom: var(--ims-form-row-gap) !important;
}

/* Floating field labels: a caption sitting on a field's top border, in a position-relative
   wrapper right after the field. The label has no background box - that also covered whatever
   sits inside the field under the caption (the counting-list chips, say). Only a narrow band in
   the surrounding background colour is painted over the border and the focus ring behind the
   text, so the border looks broken there and the field shows through everywhere else.
   --ims-floating-label-offset is how far the label rises above the field; the band follows it.
   A container in another colour sets --ims-floating-label-bg (see .bg-light, .ims-panel,
   .accordion-body). */
.ims-floating-label,
.ims-floating-label-sm {
    --ims-floating-label-offset: 8px;
    position: absolute;
    top: calc(-1 * var(--ims-floating-label-offset));
    left: 20px;
    z-index: 10;
    padding: 0 0.5rem;
    font-size: 0.775rem;
    font-weight: 700;
    background: linear-gradient(
        to bottom,
        transparent calc(var(--ims-floating-label-offset) - 0.25rem),
        var(--ims-floating-label-bg) calc(var(--ims-floating-label-offset) - 0.25rem),
        var(--ims-floating-label-bg) calc(var(--ims-floating-label-offset) + 1px),
        transparent calc(var(--ims-floating-label-offset) + 1px)
    );
}

.ims-floating-label-sm {
    --ims-floating-label-offset: 10px;
    left: 12px;
    font-size: 0.875rem;
    font-weight: normal;
}

.bg-light {
    --ims-floating-label-bg: var(--bs-light);
}

/* A tinted panel inside a window, e.g. the inventory item's stock details. Use it rather than
   bg-light, which data-theme does not flip: that stays #f8f9fa in the dark theme, under captions
   the theme has turned light grey. (bg-light itself must stay light - badges pair it with
   text-dark.) */
.ims-panel {
    background-color: var(--ims-panel-bg);
    --ims-floating-label-bg: var(--ims-panel-bg);
}

/* Bootstrap's .border is #dee2e6 in every theme, a hard white edge around a dark panel. */
[data-theme="dark"] .ims-panel {
    --bs-border-color: var(--border-color);
}

/* btn-outline-secondary's grey icon fades into the dark panel; draw it like the fields beside it. */
[data-theme="dark"] .ims-panel .btn-outline-secondary {
    --bs-btn-color: var(--text-primary);
    --bs-btn-border-color: var(--input-border);
}

/* Product Edit Form */

.prod-edit-id-display {
    font-size: 0.85rem;
}

.prod-edit-new-id-input {
    width: 200px;
}

.prod-edit-html-editor {
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
}

.prod-edit-no-resize {
    resize: none;
}

.prod-edit-image-drop-zone {
    width: 180px;
    height: 180px;
    border: 2px dashed var(--border-color);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--alert-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

.prod-edit-image-drop-zone.drag-over {
    border-color: #0d6efd;
    background: #e8f0fe;
}

[data-theme="dark"] .prod-edit-image-drop-zone.drag-over {
    background: rgba(13, 110, 253, 0.15);
}

.prod-edit-image-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prod-edit-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.72rem;
    text-align: center;
    padding: 3px 0;
    pointer-events: none;
}

.prod-edit-image-spinner {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    align-items: center;
    justify-content: center;
}

[contenteditable].form-control:focus {
    outline: none;
}

.prod-edit-image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.cost-analysis-date-input {
    width: 110px;
}

.customers-active-filter {
    width: auto;
}

/* Product Fields Panel - Ensure text is always black on light background */
#productFieldsPanel label {
    color: #000 !important;
}

#productFieldsPanel .bi-info-circle {
    color: #6c757d !important;
}

/* Lighter placeholder text for better visibility */
#productFieldsPanel input::placeholder,
#productFieldsPanel select::placeholder,
#productFieldsPanel textarea::placeholder {
    color: #adb5bd !important;
    opacity: 1;
}

#productFieldsPanel input::-webkit-input-placeholder {
    color: #adb5bd !important;
}

#productFieldsPanel input::-moz-placeholder {
    color: #adb5bd !important;
}

#productFieldsPanel input:-ms-input-placeholder {
    color: #adb5bd !important;
}

#widgetCustomizeModal .widget-visible-col {
    width: 80px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Large File Control (FileControlLarge)
   ═══════════════════════════════════════════════════════════════════════════ */

.fcl-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 0;
    overflow: hidden;
}

/* Demo card body height for the test sandbox */
.fcl-demo-card-body {
    height: 280px;
}

/* ── Drop panel ──────────────────────────────────────────────────────────── */

.fcl-drop-panel {
    flex: 1 1 auto; /* Expands to fill space when list is hidden */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border-color);
    border: 2px dashed var(--border-color);
    border-radius: 0.375rem;
    background-color: var(--input-bg);
    cursor: pointer;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        flex 0.25s ease;
    min-width: 160px;
}

.fcl-drop-panel:hover {
    background-color: var(--dropdown-hover);
    border-color: var(--table-border);
}

.fcl-drop-panel.fcl-drag-over {
    background-color: rgba(13, 110, 253, 0.07);
    border-color: #0d6efd;
    border-style: dashed;
}

.fcl-drop-icon {
    font-size: 2.5rem;
    color: var(--text-muted, #6c757d);
    line-height: 1;
    pointer-events: none;
}

.fcl-drop-label {
    color: var(--text-muted, #6c757d);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    pointer-events: none;
}

.fcl-progress {
    width: 100%;
    height: 4px;
    margin-top: 0.5rem;
}

/* ── List panel ──────────────────────────────────────────────────────────── */

.fcl-list-panel {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    margin-left: 0.5rem;
    background-color: var(--card-bg, var(--bs-body-bg));
    transition: border-color 0.2s;
}

/* Read-only control: the list is the whole control, so it needs no gap to a drop panel */
.fcl-list-panel-only {
    margin-left: 0;
}

.fcl-list-panel.fcl-drag-over {
    border-color: #0d6efd;
    border-style: dashed;
    background-color: rgba(13, 110, 253, 0.04);
}

.fcl-table-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
}

.fcl-thead th {
    position: sticky;
    top: 0;
    background-color: var(--table-header-bg, var(--bs-light-bg-subtle, #f8f9fa));
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    z-index: 1;
}

.fcl-filename-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Description inline input — looks like plain text until focused */
.fcl-desc-input {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.8rem !important;
    transition:
        border-color 0.15s,
        background-color 0.15s;
    min-width: 120px;
}

.fcl-desc-input:hover {
    border-color: var(--border-color) !important;
    background-color: var(--input-bg) !important;
}

.fcl-desc-input:focus {
    border-color: #86b7fe !important;
    background-color: var(--input-bg) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
    outline: none;
}

/* Document type dropdown — same quiet treatment as the description input */
.fcl-type-select {
    border: 1px solid transparent !important;
    background-color: transparent !important;
    color: var(--text-primary) !important;
    padding: 0.2rem 1.5rem 0.2rem 0.4rem !important;
    font-size: 0.8rem !important;
    transition:
        border-color 0.15s,
        background-color 0.15s;
    min-width: 110px;
    width: auto;
}

.fcl-type-select:hover {
    border-color: var(--border-color) !important;
    background-color: var(--input-bg) !important;
}

.fcl-type-select:focus {
    border-color: #86b7fe !important;
    background-color: var(--input-bg) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15) !important;
    outline: none;
}

/* Dark mode overrides */
[data-theme="dark"] .fcl-drop-panel {
    background-color: var(--input-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .fcl-drop-panel:hover,
[data-theme="dark"] .fcl-drop-panel.fcl-drag-over {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .fcl-list-panel {
    background-color: var(--card-bg, var(--bs-dark-bg-subtle));
    border-color: var(--border-color);
}

[data-theme="dark"] .fcl-thead th {
    background-color: var(--table-header-bg, #2c3034);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .fcl-desc-input,
[data-theme="dark"] .fcl-type-select {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .fcl-desc-input:hover,
[data-theme="dark"] .fcl-desc-input:focus,
[data-theme="dark"] .fcl-type-select:hover,
[data-theme="dark"] .fcl-type-select:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}

/* The collapsed <select> shows its options on the dropdown background, not the row's */
[data-theme="dark"] .fcl-type-select option {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

/* Light mode overrides */
[data-theme="light"] .fcl-thead th {
    background-color: #f8f9fa;
    color: #212529;
}

.start-25 {
    left: 25% !important;
}

.select-width-auto {
    width: auto;
}

/* Customer Order Form */
.cof-file-control-wrapper {
    height: 160px;
}

.cof-file-control-wrapper > div {
    height: 100%;
}

/* ── Inventory > Item edit: notes on the left half, the item's files on the right ── */

.item-edit-notes-files > [class*="col-"] {
    height: 150px;
}

.item-edit-notes-files .fcl-drop-panel {
    padding: 0.5rem;
}

/* ── Purchasing > Receiving: the PO's attachments above the items grid ──────── */

.po-receiving-attachments > div {
    height: 130px;
}

/* ── AI Assistant chat window ───────────────────────────────────────────────── */

.ai-chat {
    --ai-accent: #d97757;
}

.ai-chat-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ai-accent);
    flex: 0 0 auto;
}

.ai-chat-brand svg {
    width: 100%;
    height: 100%;
}

.ai-chat-brand-lg {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0.75rem;
}

.ai-chat-messages {
    overflow-y: auto;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--card-bg);
    min-height: 0;
}

.ai-chat-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: var(--text-primary);
}

.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    max-width: 26rem;
}

.ai-chat-message {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.75rem 0.5rem;
}

.ai-chat-message-user {
    justify-content: flex-end;
}

.ai-chat-avatar {
    margin-top: 0.4rem;
}

.ai-chat-avatar-busy svg {
    animation: ai-chat-spin 1.6s linear infinite;
}

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

.ai-chat-bubble {
    max-width: 85%;
    padding: 0.5rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.ai-chat-message-user .ai-chat-bubble {
    background-color: var(--dropdown-hover);
    border-color: transparent;
}

.ai-chat-bubble > *:first-child {
    margin-top: 0;
}

.ai-chat-bubble > *:last-child {
    margin-bottom: 0;
}

.ai-chat-bubble p {
    margin-bottom: 0.5rem;
}

.ai-chat-bubble ul,
.ai-chat-bubble ol {
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
}

.ai-chat-bubble pre {
    background-color: var(--alert-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

.ai-chat-bubble code {
    font-size: 0.85em;
}

.ai-chat-bubble .ai-md-table {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

.ai-chat-bubble .ai-md-table table {
    margin-bottom: 0;
    color: var(--text-primary);
}

.ai-chat-tools {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.ai-chat-tools summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.ai-chat-tools ul {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0 0;
}

.ai-chat-tools li + li {
    margin-top: 0.5rem;
}

.ai-chat-sql {
    white-space: pre-wrap;
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
}

.ai-chat-cost {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ai-chat-typing {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
}

.ai-chat-typing span {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background-color: var(--text-secondary);
    animation: ai-chat-bounce 1.2s infinite ease-in-out;
}

.ai-chat-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.ai-chat-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes ai-chat-bounce {
    0%,
    80%,
    100% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
}

.ai-chat-input {
    resize: none;
    max-height: 160px;
}

.ai-chat-send {
    height: 38px;
}

/* Nav menu entries that use an inline SVG brand mark instead of a bootstrap icon */
.nav-icon-svg {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.125em;
}

/* ── Order Mailbox follow-up flag ──────────────────────────────────────────────
   The flag icon is a button in all but name: clicking it opens the popover that
   says when it was set. The popover body is written as one line per date, so the
   newlines in it have to survive - Bootstrap renders content as text, not HTML.
   The popover is appended to <body> rather than into the window, because a
   WinBox body is `contain: strict` and would clip it; the z-index puts it above
   the windows and the toast container it then shares the page with. */
.mail-flag {
    cursor: pointer;
}

.mail-flag-popover {
    z-index: 12000;
}

.mail-flag-popover .popover-body {
    white-space: pre-line;
}

/* Recipient tag input: a text input inside a form-control look-alike, every entry a chip in
   front of it, suggestions dropping down below. The email composer's To/CC/BCC fields
   (modules/emailComposer.ts) and components/chipSelect.ts (the inventory item's counting
   lists) both build on it, so they look and handle alike. */
.recipient-field-wrapper {
    position: relative;
}

.recipient-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    height: auto;
    padding: 4px 8px;
    cursor: text;
}

.recipient-field:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #0d6efd;
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px 2px 8px;
    font-size: 13px;
    max-width: 220px;
    white-space: nowrap;
}

.recipient-chip .chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipient-chip .chip-remove {
    cursor: pointer;
    opacity: 0.75;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.recipient-chip .chip-remove:hover {
    opacity: 1;
}

.recipient-field .recipient-input {
    border: none;
    outline: none;
    flex: 1 1 120px;
    min-width: 120px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    padding: 0;
}

.recipient-dropdown {
    position: absolute;
    z-index: 1050;
    width: 100%;
    background: var(--dropdown-bg);
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 220px;
    overflow-y: auto;
}

.recipient-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.recipient-dropdown-item:hover,
.recipient-dropdown-item:focus {
    background-color: #f0f4ff;
    outline: none;
}

.recipient-dropdown-item .person-name {
    font-weight: 500;
    line-height: 1.3;
}

.recipient-dropdown-item .person-email {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.3;
}

[data-theme="dark"] .recipient-dropdown {
    border-color: var(--border-color);
}

[data-theme="dark"] .recipient-dropdown-item:hover,
[data-theme="dark"] .recipient-dropdown-item:focus {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .recipient-dropdown-item .person-email {
    color: var(--text-secondary);
}

/* Record picker (components/recordPicker.ts): the menu under a box that picks one entry of a
   known list. Bootstrap's .dropdown-menu, opened with .show and hung from the field's
   positioned container, as wide as the field. The highlighted row looks like a hovered one,
   plus a bar on its edge: the light theme's hover colour is too faint to follow on its own
   while walking the menu with the arrow keys. */
.record-picker-menu {
    top: 100%;
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
}

.record-picker-menu .dropdown-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 6px 12px;
    cursor: pointer;
}

.record-picker-menu .dropdown-item.active {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.record-picker-menu .record-picker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-picker-menu .record-picker-detail {
    flex-shrink: 0;
    font-size: 0.85em;
    color: var(--text-secondary);
    white-space: nowrap;
}

[data-theme="dark"] .tabulator-popup-container {
    background: var(--dropdown-bg);
}

/* air-datepicker calendars in the dark theme. A calendar pops up on <body>, outside the window
   that opened it, so this cannot be scoped to one. The date range filter below colours its own
   inline calendar from the theme; its rule has the same specificity and comes later, so it wins. */
[data-theme="dark"] .air-datepicker {
    --adp-background-color: #2b2f36;
    --adp-color: #e2e2e2;
    --adp-color-secondary: #9c9c9c;
    --adp-border-color: #454b54;
    --adp-border-color-inner: #3a3f47;
    --adp-background-color-hover: #3a3f47;
    --adp-background-color-active: #454b54;
    --adp-color-other-month: #5a5f66;
    --adp-color-disabled: #5a5f66;
}

[data-theme="dark"] .air-datepicker--pointer:after {
    background: var(--adp-background-color);
}

/* Date range header filter (src/lib/dateRangeSelectFilter.ts): the popup with the named-range
   dropdown, From/To fields and an inline air-datepicker, and the summary field under the column
   title. air-datepicker ships its own light-blue-on-white palette; here every colour of it comes
   from the theme. Per theme:
     --ims-date-range-accent        background of a picked day, under white text
     --ims-date-range-accent-hover  the same, hovered
     --ims-date-range-in-range      the days between the two picked ones
     --ims-date-range-mark          today, the day names, an active summary - on the theme's own
                                    background, so it has to read against that rather than white */
.ims-date-range-filter,
.ims-date-range-filter__summary {
    --ims-date-range-accent: #0d6efd;
    --ims-date-range-accent-hover: #0b5ed7;
    --ims-date-range-in-range: rgba(13, 110, 253, 0.12);
    --ims-date-range-in-range-hover: rgba(13, 110, 253, 0.22);
    --ims-date-range-mark: #0d6efd;
    --ims-date-range-muted: #adb5bd;
}

[data-theme="light"] .ims-date-range-filter,
[data-theme="light"] .ims-date-range-filter__summary {
    --ims-date-range-accent: #495057;
    --ims-date-range-accent-hover: #343a40;
    --ims-date-range-in-range: rgba(73, 80, 87, 0.1);
    --ims-date-range-in-range-hover: rgba(73, 80, 87, 0.2);
    --ims-date-range-mark: #495057;
    --ims-date-range-muted: #adb5bd;
}

[data-theme="dark"] .ims-date-range-filter,
[data-theme="dark"] .ims-date-range-filter__summary {
    --ims-date-range-accent: #3f73ad;
    --ims-date-range-accent-hover: #4a80bd;
    --ims-date-range-in-range: rgba(110, 168, 254, 0.18);
    --ims-date-range-in-range-hover: rgba(110, 168, 254, 0.3);
    --ims-date-range-mark: #8bb9fe;
    --ims-date-range-muted: #6c757d;
}

.ims-date-range-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 272px;
    padding: 8px;
    font-size: 13px;
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.ims-date-range-filter__title {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.ims-date-range-filter__fields {
    display: flex;
    gap: 8px;
}

.ims-date-range-filter__field {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin: 0;
}

.ims-date-range-filter__caption {
    font-size: 11px;
    color: var(--text-secondary);
}

/* The global .form-control:focus drops the left border (it is styled for input groups). */
.ims-date-range-filter .form-control:focus,
.ims-date-range-filter .form-select:focus {
    border: 1px solid var(--ims-date-range-mark);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

.ims-date-range-filter .form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
}

.ims-date-range-filter .air-datepicker {
    --adp-width: 100%;
    box-sizing: border-box;
    --adp-font-family: inherit;
    --adp-font-size: 13px;
    --adp-background-color: var(--dropdown-bg);
    --adp-background-color-hover: var(--dropdown-hover);
    --adp-background-color-active: var(--dropdown-hover);
    --adp-background-color-in-range: var(--ims-date-range-in-range);
    --adp-background-color-in-range-focused: var(--ims-date-range-in-range-hover);
    --adp-background-color-selected-other-month: var(--ims-date-range-accent);
    --adp-background-color-selected-other-month-focused: var(--ims-date-range-accent-hover);
    --adp-color: var(--text-primary);
    --adp-color-secondary: var(--text-secondary);
    --adp-accent-color: var(--ims-date-range-mark);
    --adp-color-current-date: var(--ims-date-range-mark);
    --adp-color-other-month: var(--ims-date-range-muted);
    --adp-color-other-month-hover: var(--text-secondary);
    --adp-color-disabled: var(--ims-date-range-muted);
    --adp-color-disabled-in-range: var(--ims-date-range-muted);
    --adp-border-color: var(--border-color);
    --adp-border-color-inner: var(--border-color);
    --adp-border-color-inline: var(--border-color);
    --adp-day-name-color: var(--ims-date-range-mark);
    --adp-day-name-color-hover: var(--ims-date-range-accent-hover);
    --adp-cell-background-color-selected: var(--ims-date-range-accent);
    --adp-cell-background-color-selected-hover: var(--ims-date-range-accent-hover);
    --adp-cell-background-color-in-range: var(--ims-date-range-in-range);
    --adp-cell-background-color-in-range-hover: var(--ims-date-range-in-range-hover);
    --adp-cell-border-color-in-range: var(--ims-date-range-accent);
    --adp-nav-arrow-color: var(--text-secondary);
    --adp-nav-color-secondary: var(--text-secondary);
    --adp-btn-color: var(--ims-date-range-mark);
}

/* Today is bold as well as coloured: in the light theme its colour is the text colour. */
.ims-date-range-filter .air-datepicker-cell.-current- {
    font-weight: 700;
}

/* A picked day that is today keeps the white text of a picked day. */
.ims-date-range-filter .air-datepicker-cell.-current-.-selected- {
    color: #ffffff;
}

.ims-date-range-filter__footer {
    display: flex;
    justify-content: flex-end;
}

/* btn-outline-secondary's grey text is unreadable on the dark popup; the theme's colours are not. */
.ims-date-range-filter__clear {
    --bs-btn-color: var(--text-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: var(--dropdown-hover);
    --bs-btn-hover-border-color: var(--input-border);
    --bs-btn-active-color: var(--text-primary);
    --bs-btn-active-bg: var(--dropdown-hover);
    --bs-btn-active-border-color: var(--input-border);
    --bs-btn-focus-box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* The summary under the column title is a header filter input like any other (and is
   coloured by those rules); it only adds what makes it read as something to click. */
.tabulator-header-filter input.ims-date-range-filter__summary {
    cursor: pointer;
    caret-color: transparent;
    text-overflow: ellipsis;
}

.tabulator-header-filter input.ims-date-range-filter__summary.is-active {
    border-color: var(--ims-date-range-mark);
    font-weight: 600;
}

/* ── View picker beside a grid's Refresh button (src/lib/tabulatorViewSelect.ts) ──────────
   The menu opens without Bootstrap's dropdown JS, so it is placed here: under the button,
   right edges lined up, since the button sits at the right of a window's toolbar.
   Its colours come from the theme tokens, plus:
     --ims-view-select-mark    the tick of the current view, and its name
     --ims-view-select-danger  Remove view */
.ims-view-select {
    --ims-view-select-mark: #0d6efd;
    --ims-view-select-danger: #dc3545;
    position: relative;
    display: inline-flex;
}

[data-theme="light"] .ims-view-select {
    --ims-view-select-mark: #495057;
}

[data-theme="dark"] .ims-view-select {
    --ims-view-select-mark: #8bb9fe;
    --ims-view-select-danger: #ea868f;
}

.ims-view-select__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 14rem;
}

/* Bootstrap's grey text all but disappears on the dark window; the border stays the grey of
   the Refresh button beside it. */
[data-theme="dark"] .ims-view-select__toggle {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-hover-color: var(--text-primary);
    --bs-btn-hover-bg: var(--dropdown-hover);
    --bs-btn-hover-border-color: var(--input-border);
    --bs-btn-active-color: var(--text-primary);
    --bs-btn-active-bg: var(--dropdown-hover);
    --bs-btn-active-border-color: var(--input-border);
}

.ims-view-select__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ims-view-select__caret {
    font-size: 0.7em;
    transition: transform 0.15s ease;
}

.ims-view-select__toggle[aria-expanded="true"] .ims-view-select__caret {
    transform: rotate(180deg);
}

.ims-view-select__menu {
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: 1060; /* over the grid's header and frozen columns */
    min-width: 15rem;
    max-width: 22rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.35rem 0;
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* The menu-wide .dropdown-item padding is sized for the navbar; this menu is a toolbar's. */
.ims-view-select__menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.9rem;
    color: var(--text-primary);
}

.ims-view-select__menu .dropdown-item:hover,
.ims-view-select__menu .dropdown-item:focus-visible {
    background-color: var(--dropdown-hover);
    color: var(--text-primary);
}

.ims-view-select__menu .dropdown-item:disabled {
    background-color: transparent;
    color: var(--text-secondary);
    opacity: 0.55;
}

.ims-view-select__action .bi {
    width: 1rem;
    text-align: center;
}

.ims-view-select__menu .ims-view-select__action--remove:not(:disabled) {
    color: var(--ims-view-select-danger);
}

.ims-view-select__menu .dropdown-divider {
    border-color: var(--border-color);
    margin: 0.35rem 0;
}

.ims-view-select__header {
    padding: 0.25rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ims-view-select__check {
    width: 1rem;
    visibility: hidden;
    color: var(--ims-view-select-mark);
}

.ims-view-select__view.is-current .ims-view-select__check {
    visibility: visible;
}

.ims-view-select__view.is-current .ims-view-select__view-name {
    color: var(--ims-view-select-mark);
    font-weight: 600;
}

.ims-view-select__view-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

.ims-view-select__view-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ims-view-select__owner {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.ims-view-select__shared {
    color: var(--text-secondary);
}

.ims-view-select__state {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    font-style: italic;
    color: var(--text-secondary);
}

.ims-view-select__error {
    font-style: normal;
    color: var(--ims-view-select-danger);
}

/* ===== WINDOW STYLES =====
   Rules for single windows, one section per template (src/templates/<path>.html), headed
   "Window: <path>", or "Windows: <a>, <b>" for rules several windows share. They used to sit in a
   \3c style> block in the template, which the dashboard inserts with the window and keeps while it
   is open - so an unscoped rule there restyled every other window too (with Vendor Edit open,
   every form's rows closed up and its fonts changed). Here a section reaches only its own
   windows: a generic selector (.form-control, .card, .tabulator, ...) starts with the window's
   root class, wrapped in :where() so the scope adds no specificity and the window looks as it
   did. IDs and the window's own class names need no scope. tests/windowStyles.test.ts checks
   that no section reaches another window. Keep these sections at the end of the file. */

/* ----- Windows: purchasing/vendorEdit, coreData/customerEdit ----- */

/* iPhone-style toggle switches: red off, green on */
:where(.vendor-edit-container, .customer-edit-container) .form-check-input {
    width: 3rem;
    height: 1.5rem;
    cursor: pointer;
    border: none;
    background-color: #dc3545;
    transition: background-color 0.3s ease;
}

:where(.vendor-edit-container, .customer-edit-container) .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

:where(.vendor-edit-container, .customer-edit-container) .form-check-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

:where(.vendor-edit-container, .customer-edit-container) .form-check-label {
    margin-left: 0.5rem;
    font-weight: 500;
    color: #495057;
}

:where(.vendor-edit-container, .customer-edit-container) .form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27white%27/%3e%3c/svg%3e");
}

:where(.vendor-edit-container, .customer-edit-container) .form-switch .form-check-input:checked {
    background-position: right center;
}

/* Payment term inputs */
:where(.vendor-edit-container, .customer-edit-container) .payment-term-input {
    text-align: center;
    font-weight: 500;
}

/* ----- Windows: inventory/adjustmentCounts, inventory/adjustmentListEdit, inventory/adjustmentLists, inventory/countEdit, inventory/itemSelect ----- */

/* The grids of the inventory list windows */
:where(.adjustment-counts-container) .tabulator,
:where(.adjustment-list-edit-container) .tabulator,
:where(.adjustment-lists-container) .tabulator,
:where(.count-edit-container) .tabulator,
:where(.inventory-item-select-container) .tabulator {
    background-color: white;
}

:where(.adjustment-counts-container) .tabulator-header,
:where(.adjustment-list-edit-container) .tabulator-header,
:where(.adjustment-lists-container) .tabulator-header,
:where(.count-edit-container) .tabulator-header,
:where(.inventory-item-select-container) .tabulator-header {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

:where(.adjustment-counts-container) .tabulator-row:hover,
:where(.adjustment-list-edit-container) .tabulator-row:hover,
:where(.adjustment-lists-container) .tabulator-row:hover,
:where(.count-edit-container) .tabulator-row:hover,
:where(.inventory-item-select-container) .tabulator-row:hover {
    background-color: #f1f3f5 !important;
}

/* ----- Window: common/createTicket ----- */

.create-ticket-container {
    max-width: 700px;
    margin: 0 auto;
}

:where(.create-ticket-container) .form-label {
    font-weight: 500;
}

:where(.create-ticket-container) .form-control:focus,
:where(.create-ticket-container) .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#stepsToReproduceContainer {
    transition: opacity 0.3s ease;
}

@media (max-width: 576px) {
    .create-ticket-container {
        padding: 1rem !important;
    }
}

/* ----- Window: common/emailComposer ----- */

:where(.email-composer-container) .form-label {
    font-weight: 500;
}

:where(.email-composer-container) .form-control:focus,
:where(.email-composer-container) .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

#attachmentsList .attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    margin-bottom: 5px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

#attachmentsList .attachment-item:hover {
    background-color: #e9ecef;
}

/* The dark theme turns the text light but leaves Bootstrap's palette alone, so the rows take
   the dashboard's dark surfaces (css/style.css) - on the light grey the names were unreadable. */
[data-theme="dark"] #attachmentsList .attachment-item {
    background-color: #343a40;
}

[data-theme="dark"] #attachmentsList .attachment-item:hover {
    background-color: #495057;
}

#attachmentsList .remove-attachment {
    cursor: pointer;
    color: #dc3545;
}

#attachmentsList .remove-attachment:hover {
    color: #bb2d3b;
}

#attachmentsList .view-attachment {
    cursor: pointer;
    color: #0d6efd;
}

#attachmentsList .view-attachment:hover {
    color: #0a58ca;
}

/*
 * The mail a reply is answering, quoted below where the answer gets typed. Set apart
 * rather than styled richly: the quote carries the original mail's own markup (see
 * modules/orders/mailReply.ts), and anything heavier here would fight with it. Muted
 * and scaled down so the part being written is the part that reads as the message.
 */
#emailBody .ims-mail-quote {
    margin-top: 1rem;
    padding-left: 0.75rem;
    border-left: 3px solid #dee2e6;
    color: #495057;
    font-size: 0.9375rem;
}

#emailBody .ims-mail-quote hr {
    margin: 0 0 0.5rem;
    border-top-color: #dee2e6;
}

/* A quoted mail can be far wider than the editor - a table of line items usually is. */
#emailBody .ims-mail-quote img,
#emailBody .ims-mail-quote table {
    max-width: 100%;
}

/* HTML Editor Styles */
.html-editor-toolbar {
    background-color: #f8f9fa;
    padding: 8px;
    border-radius: 4px 4px 0 0;
    border: 1px solid #dee2e6;
    border-bottom: none;
}

.html-editor-content {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.6;
    padding: 12px;
    border-radius: 0 0 4px 4px;
}

.html-editor-content:empty:before {
    content: attr(data-placeholder);
    color: #6c757d;
    pointer-events: none;
}

.html-editor-content:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.html-editor-content p {
    margin-bottom: 0.5rem;
}

.html-editor-content ul,
.html-editor-content ol {
    margin-bottom: 0.5rem;
    padding-left: 2rem;
}

.html-editor-content a {
    color: #0d6efd;
    text-decoration: underline;
}

@media (max-width: 576px) {
    .email-composer-container {
        padding: 1rem !important;
    }

    .html-editor-toolbar {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ----- Window: coreData/customerEdit ----- */

.customer-edit-container {
    width: 100%;
}

.cust-edit-toggle-wrapper {
    min-height: 38px;
}

.cust-edit-table-container {
    min-height: 150px;
}

.cust-edit-spinner {
    width: 3rem;
    height: 3rem;
}

:where(.customer-edit-container) .ims-modal-header {
    background: #0050ff;
    color: #fff;
    border-bottom: none;
}

.cust-edit-contact-modal-overlay {
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
}

.cust-edit-contact-modal-card {
    width: 75%;
    max-width: 95%;
}

:where(.customer-edit-container) .accordion-button.ims-accordion-button-compact.collapsed {
    background-color: var(--bs-accordion-btn-active-bg);
    color: var(--bs-accordion-btn-active-color);
}

:where(.customer-edit-container) .ims-floating-label.ims-floating-label-always {
    --ims-floating-label-offset: 10px;
    font-size: 0.75rem;
}

.cust-edit-date-input {
    padding-top: 0.6rem;
}

.cust-edit-address-modal-card {
    width: 490px;
    max-width: 95%;
}

.cust-edit-shipping-modal-card {
    width: 560px;
    max-width: 95%;
}

.cust-edit-press-frame-wrapper {
    display: grid;
}

.cust-edit-press-frame-wrapper > div {
    grid-area: 1 / 1;
}

.cust-edit-press-frame-hidden {
    opacity: 0;
    pointer-events: none;
}

.cust-edit-press-modal-card {
    width: 75%;
    max-width: 95%;
    height: 85%;
    display: flex;
    flex-direction: column;
}

.cust-edit-press-modal-card > .card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#custEdit_pRemarks {
    resize: vertical;
}

/* intl-tel-input sizing */
#custEdit_contactModal .iti {
    width: 100%;
    display: block;
}

@media (max-width: 768px) {
    .customer-edit-container {
        padding: 1rem !important;
    }
}

/* ----- Window: inventory/adjustmentCounts ----- */

#adjustmentCountsTable {
    background-color: white;
}

:where(.adjustment-counts-container) .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
}

/* ----- Window: inventory/adjustmentListEdit ----- */

.adjustment-list-edit-container {
    background-color: #f8f9fa;
}

:where(.adjustment-list-edit-container) .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.items-table-body {
    min-height: 0;
}

#itemsTable {
    background-color: white;
}

/* Row handle styling */
:where(.adjustment-list-edit-container) .tabulator-row-handle {
    cursor: grab;
}

:where(.adjustment-list-edit-container) .tabulator-row-handle:active {
    cursor: grabbing;
}

/* Button styling */
:where(.adjustment-list-edit-container) .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
}

:where(.adjustment-list-edit-container) .btn-outline-success:hover {
    background-color: #198754;
    color: white;
}

:where(.adjustment-list-edit-container) .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

/* ----- Window: inventory/adjustmentLists ----- */

.adjustment-lists-container {
    background-color: #f8f9fa;
}

#adjustmentListsTable {
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Button styling */
:where(.adjustment-lists-container) .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
}

:where(.adjustment-lists-container) .btn-outline-success:hover {
    background-color: #198754;
    color: white;
}

/* ----- Window: inventory/countEdit ----- */

#countEditTable {
    background-color: white;
}

:where(.count-edit-container) .btn-outline-success:hover {
    background-color: #198754;
    color: white;
}

:where(.count-edit-container) .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

/* ----- Window: inventory/createCount ----- */

.create-count-container {
    background-color: #f8f9fa;
}

:where(.create-count-container) .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.selected-list-badge {
    background-color: #e7f1ff;
    border: 1px solid #b6d4fe;
    padding: 8px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.selected-list-badge i {
    color: #0d6efd;
}

:where(.create-count-container) .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
}

:where(.create-count-container) .btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}

/* ----- Window: inventory/itemSelect (modules/inventory/itemSelect.ts) ----- */

.inventory-item-select-container {
    background-color: #f8f9fa;
}

#inventoryItemSelectTable {
    background-color: white;
}

:where(.inventory-item-select-container) .tabulator-row:hover {
    cursor: pointer;
}

:where(.inventory-item-select-container) .tabulator-row.tabulator-selected {
    background-color: #e7f3ff !important;
}

/* ----- Window: inventory/printLabels ----- */

/* Each pane gets half the window and never pushes the other off screen. */
.print-labels-panes > div {
    min-width: 0;
    flex-basis: 50%;
}

#printLabelsAvailableTable,
#printLabelsSelectedTable {
    background-color: white;
}

/* The drop target reads as one while a row is being dragged over it. */
.print-labels-container .tabulator.tabulator-block-select {
    outline: 2px dashed #0d6efd;
    outline-offset: -2px;
}

.print-labels-container .tabulator-row.tabulator-moving {
    opacity: 0.8;
}

/* ----- Window: inventory/reorderAmounts ----- */

.inventoryReorderAmounts .inventoryReorderAmounts-vendor {
    width: 320px;
}
/* A suggested amount that has a cost to show: underlined like an abbreviation, so
   the pointer knows there is more to read. */
.inventoryReorderAmounts .inventoryReorderAmounts-hasCost {
    font-weight: 600;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}
.inventoryReorderAmounts .inventoryReorderAmounts-none {
    color: var(--text-secondary);
}
/* The popover is attached to <body>, outside this window, so its rules cannot be
   scoped to .inventoryReorderAmounts the way everything else here is. */
.inventoryReorderAmounts-costPopover {
    max-width: 22rem;
}
.inventoryReorderAmounts-cost {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.15rem 1.25rem;
    white-space: nowrap;
}
.inventoryReorderAmounts-cost .inventoryReorderAmounts-costLabel {
    color: var(--bs-secondary-color, #6c757d);
}
.inventoryReorderAmounts-cost .inventoryReorderAmounts-costValue {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.inventoryReorderAmounts-cost .inventoryReorderAmounts-costTotal {
    font-weight: 600;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    padding-top: 0.15rem;
}

/* ----- Window: orders/shipping ----- */

.ordersShipping .ordersShipping-orderSearch {
    width: 320px;
}
/* Every picker in this window — the order search, "Service" and "Shipped With" —
   drops the same menu under its box, so they share it. */
.ordersShipping .ordersShipping-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1055;
    max-height: 320px;
    overflow-y: auto;
    display: none;
}
.ordersShipping .ordersShipping-autocomplete .dropdown-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    white-space: nowrap;
}
.ordersShipping .ordersShipping-autocomplete .dropdown-item.active,
.ordersShipping .ordersShipping-autocomplete .dropdown-item:hover {
    background-color: var(--bs-primary-bg-subtle, #cfe2ff);
    color: inherit;
}
/* The slip form scrolls inside its card, which clips anything hanging out of it,
   so the menus of its fields stay short enough to sit in the space below them. */
.ordersShipping .ordersShipping-fieldDropdown {
    max-height: 200px;
    min-width: 16rem;
}
/* The box gives up just enough width for the "i" beside it. The slot keeps its
   width whether or not the icon is in it, so the field does not resize under the
   cursor the moment a package number is typed. */
.ordersShipping .ordersShipping-shippedWithRow {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.ordersShipping .ordersShipping-shippedWithRow .form-control {
    flex: 1 1 auto;
    min-width: 0;
}
.ordersShipping .ordersShipping-linkedInfo {
    flex: 0 0 1rem;
    width: 1rem;
    line-height: 1;
    text-align: center;
    cursor: help;
    color: var(--bs-primary, #0d6efd);
}
.ordersShipping .ordersShipping-linkedInfo[hidden] {
    /* Hidden, but still holding its place in the row. */
    display: block;
    visibility: hidden;
}
/* The popover is attached to <body>, outside this window, so its rules cannot be
   scoped to .ordersShipping the way everything else here is. */
.ordersShipping-linkedPopover {
    max-width: 26rem;
}
.ordersShipping-linkedOrders {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 0.15rem 1rem;
    white-space: nowrap;
}
.ordersShipping-linkedOrders .ordersShipping-linkedHead {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
}
.ordersShipping-linkedOrders .ordersShipping-orderNo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.ordersShipping .ordersShipping-orderNo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* Left rail: wide enough for the slip form's two columns and a priced contents
   grid, never squeezes the grid. */
.ordersShipping .ordersShipping-slipPane {
    width: 500px;
    min-width: 420px;
    flex: 0 0 auto;
}
.ordersShipping .ordersShipping-slipForm label {
    margin-bottom: 0.1rem;
}
/* One strip of order facts, spread across the card so each reads on its own
   rather than running into its neighbour. Wraps to a second line when narrow. */
.ordersShipping .ordersShipping-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 3.5rem;
}
.ordersShipping .ordersShipping-summary dt {
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}
.ordersShipping .ordersShipping-summary dd {
    margin-bottom: 0;
    font-weight: 600;
}
/* The ship-to line reads like the other summary values, only clickable. */
.ordersShipping .ordersShipping-shipTo {
    font-size: inherit;
    font-weight: inherit;
    text-decoration: none;
    border: 0;
}
.ordersShipping .ordersShipping-shipTo:not(:disabled):hover {
    text-decoration: underline;
}
.ordersShipping .ordersShipping-shipTo:disabled {
    color: inherit;
    opacity: 1;
}
/* Grows with its text, but never past a third of the window - the products
   grid above it is what the shipper works in. */
.ordersShipping .ordersShipping-instructions .card-body {
    max-height: 30vh;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* Instructions are typed as free text; honour the line breaks they were
   entered with rather than reflowing them into one paragraph. */
.ordersShipping .ordersShipping-instructionText {
    white-space: pre-wrap;
}
.ordersShipping .ordersShipping-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--bs-secondary-color, #6c757d);
}

/* ----- Window: purchasing/newRequest ----- */

.new-request-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Match the pill-shaped global .btn-primary to the other buttons in this window */
.new-request-container .btn-primary {
    border-radius: 0.375rem;
}

#inventoryList .list-group-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

#inventoryList .list-group-item:hover {
    background-color: #f8f9fa;
}

@media (max-width: 576px) {
    .new-request-container {
        padding: 1rem !important;
    }

    :where(.new-request-container) .btn-group {
        flex-direction: column;
    }

    :where(.new-request-container) .btn-group .btn {
        border-radius: 0.25rem !important;
        margin-bottom: 0.5rem;
    }
}

/* ----- Window: purchasing/purchaseOrderEdit ----- */

/* Validation error styling */
:where(.po-edit-container) .is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

:where(.po-edit-container) .has-validation-error .form-control,
:where(.po-edit-container) .has-validation-error .form-select {
    border-color: #dc3545 !important;
}

#POEdit_lineItemsTableContainer.is-invalid {
    border: 2px solid #dc3545 !important;
    border-radius: 4px;
}

/* The footer holds only the Total Cost row; with no line items (the grid shows its
   placeholder) there is nothing to total. */
#POEdit_lineItemsTableContainer:has(.tabulator-placeholder) .tabulator-footer {
    display: none;
}

/* Quarter-width fields: the default 20px inset leaves too little room, so these labels
   would wrap across the value */
#POEdit_quoteNumber + .ims-floating-label,
#POEdit_paymentMethod + .ims-floating-label {
    left: 8px;
    white-space: nowrap;
}

/* Compact fields: 3px top/bottom instead of Bootstrap's 6px, to fit more on the page. The
   input-group buttons follow, or they would stretch the field next to them back up. */
.po-edit-container .form-control:not(.form-control-sm),
.po-edit-container .form-select:not(.form-select-sm),
.po-edit-container .input-group > .btn:not(.btn-sm) {
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Internal Notes show only their first line until the field has focus, when
   lib/expandOnFocus.ts grows it to the note. Bootstrap's textarea min-height is sized for 6px
   padding, so it would keep the field taller than one line at 3px. */
#POEdit_internalNotes {
    min-height: 0;
    overflow: hidden;
    resize: none;
}

/* ----- Window: purchasing/vendorEdit ----- */

.vendor-edit-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Compact form styling */
:where(.vendor-edit-container) .form-label {
    font-weight: 500;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

:where(.vendor-edit-container) .form-control,
:where(.vendor-edit-container) .form-select {
    padding: 0.375rem 0.5rem;
    font-size: 0.9rem;
}

:where(.vendor-edit-container) .form-control:focus,
:where(.vendor-edit-container) .form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.2);
}

:where(.vendor-edit-container) .card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

:where(.vendor-edit-container) .card-body {
    padding: 1rem;
}

:where(.vendor-edit-container) h6 {
    color: #495057;
    font-weight: 600;
    font-size: 0.95rem;
}

:where(.vendor-edit-container) .border-bottom {
    border-color: #dee2e6 !important;
    padding-bottom: 0.4rem !important;
}

/* Section spacing (the rows themselves use the common --ims-form-row-gap) */
:where(.vendor-edit-container) .mt-4 {
    margin-top: 1.25rem !important;
}

:where(.vendor-edit-container) .mb-4 {
    margin-bottom: 1rem !important;
}

/* Remit Address Copy Button */
.remit-copy-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
}

.remit-copy-btn i {
    font-size: 0.75rem;
    margin-left: 0.25rem;
}

/* International Phone Input Styling */
:where(.vendor-edit-container) .iti {
    width: 100%;
    display: block;
}

:where(.vendor-edit-container) .iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    left: 0;
}

:where(.vendor-edit-container) .iti__selected-flag {
    padding: 0 0 0 8px;
}

:where(.vendor-edit-container) .iti input {
    padding-left: 52px;
    width: 100%;
}

@media (max-width: 768px) {
    .vendor-edit-container {
        padding: 1rem !important;
    }
}

/* ----- Window: time/taskEventMaterial ----- */

/* Label/value pairs describing the task event the materials belong to */
.tem-context {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    align-items: baseline;
    font-size: 0.875rem;
    min-width: 0;
}
@media (min-width: 768px) {
    .tem-context {
        grid-template-columns: repeat(3, auto minmax(0, 1fr));
    }
}
.tem-context-label {
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
}
.tem-context-value {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- Window: time/timeClock ----- */

/* ========== Theme tokens ========== */
/* Every colour below is read from these tokens. The dashboard's theme switch
   (data-theme on <html>) does not flip Bootstrap, so --bs-body-bg stays white
   in the dark theme — the dark block therefore sets the dashboard's dark
   palette (css/style.css) itself. The phone/tablet page is appended to <body>,
   outside .timeclock-container, so it carries the tokens as well. */
.timeclock-container,
#timeclock-mobile-page {
    --timeclock-bg: #fff;
    --timeclock-surface: #fff;
    --timeclock-text: #212529;
    --timeclock-text-strong: rgba(0, 0, 0, 0.85);
    --timeclock-text-secondary: rgba(0, 0, 0, 0.65);
    --timeclock-text-muted: rgba(0, 0, 0, 0.55);
    --timeclock-text-faint: rgba(0, 0, 0, 0.35);
    --timeclock-border: rgba(0, 0, 0, 0.12);
    --timeclock-border-strong: rgba(0, 0, 0, 0.15);
    --timeclock-divider: rgba(0, 0, 0, 0.07);
    --timeclock-chip-bg: rgba(0, 0, 0, 0.08);
    --timeclock-grip: rgba(0, 0, 0, 0.2);
    --timeclock-backdrop: rgba(0, 0, 0, 0.35);
    --timeclock-menu-hover: rgba(0, 0, 0, 0.05);
    --timeclock-accent: var(--bs-primary, #0d6efd);
    --timeclock-accent-solid: var(--bs-primary, #0d6efd);
    --timeclock-hover: rgba(13, 110, 253, 0.06);
    --timeclock-selected: rgba(13, 110, 253, 0.1);
    --timeclock-new-bg: rgba(13, 110, 253, 0.03);
    --timeclock-new-border: rgba(13, 110, 253, 0.35);
    --timeclock-danger-text: #b02a37;
    --timeclock-success-text: #146c43;
    --timeclock-header-bg: var(--bs-primary, #0d6efd);
    --timeclock-header-border: transparent;

    /* Run-state rows: green = running, yellow = paused, and the booked vs
       estimated warnings (orange = close, red = over) */
    --timeclock-running-bg: #d1e7dd;
    --timeclock-running-border: #a3cfbb;
    --timeclock-paused-bg: #fff3cd;
    --timeclock-paused-border: #ffe69c;
    --timeclock-est-warn-bg: #ffe0b2;
    --timeclock-est-over-bg: #f5c2c7;

    /* Product grouping chrome */
    --timeclock-product-border: rgba(13, 110, 253, 0.55);
    --timeclock-product-header-bg: rgba(13, 110, 253, 0.1);
    --timeclock-product-shadow: rgba(13, 110, 253, 0.18);
}

[data-theme="light"] .timeclock-container,
[data-theme="light"] #timeclock-mobile-page {
    --timeclock-product-border: rgba(0, 0, 0, 0.5);
    --timeclock-product-header-bg: rgba(0, 0, 0, 0.06);
    --timeclock-product-shadow: rgba(0, 0, 0, 0.14);
}

[data-theme="dark"] .timeclock-container,
[data-theme="dark"] #timeclock-mobile-page {
    color-scheme: dark;

    --timeclock-bg: #212529;
    --timeclock-surface: #343a40;
    --timeclock-text: #f8f9fa;
    --timeclock-text-strong: #f8f9fa;
    --timeclock-text-secondary: #ced4da;
    --timeclock-text-muted: #adb5bd;
    --timeclock-text-faint: #6c757d;
    --timeclock-border: #495057;
    --timeclock-border-strong: #495057;
    --timeclock-divider: rgba(255, 255, 255, 0.08);
    --timeclock-chip-bg: rgba(255, 255, 255, 0.12);
    --timeclock-grip: rgba(255, 255, 255, 0.25);
    --timeclock-backdrop: rgba(0, 0, 0, 0.55);
    --timeclock-menu-hover: #495057;
    --timeclock-accent: #6ea8fe;
    --timeclock-accent-solid: #375a7f;
    --timeclock-hover: rgba(255, 255, 255, 0.06);
    --timeclock-selected: #495057;
    --timeclock-new-bg: rgba(110, 168, 254, 0.06);
    --timeclock-new-border: rgba(110, 168, 254, 0.4);
    --timeclock-danger-text: #ea868f;
    --timeclock-success-text: #75b798;
    --timeclock-header-bg: #212529;
    --timeclock-header-border: #495057;

    --timeclock-running-bg: #1e3a2f;
    --timeclock-running-border: #2f6b4f;
    --timeclock-paused-bg: #3b3818;
    --timeclock-paused-border: #7a7020;
    --timeclock-est-warn-bg: #55300f;
    --timeclock-est-over-bg: #4d2227;

    --timeclock-product-border: #6c757d;
    --timeclock-product-header-bg: #343a40;
    --timeclock-product-shadow: rgba(0, 0, 0, 0.4);

    /* Bootstrap utilities used inside the panel (.border-bottom, .text-muted,
       .form-select, badges' surroundings) follow the panel, not Bootstrap's
       light defaults */
    --bs-body-bg: var(--timeclock-bg);
    --bs-body-color: var(--timeclock-text);
    --bs-border-color: var(--timeclock-border);
    --bs-secondary-color: var(--timeclock-text-muted);
}

/* ========== Base ========== */
.timeclock-container {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    /* The panel paints its own background, so it must also set its own text
       colour rather than inherit the WinBox body's. */
    background: var(--timeclock-bg);
    color: var(--timeclock-text);
}

.timeclock-section-title {
    font-size: 0.875rem;
}

.timeclock-refresh-btn,
.timeclock-fullwindow-btn {
    line-height: 1;
    min-width: 32px;
}

/* ========== Full-window mode ========== */
body.timeclock-fullwindow .navbar {
    display: none !important;
}

.timeclock-empty-state {
    font-size: 0.9rem;
}

.timeclock-content {
    -webkit-overflow-scrolling: touch;
}

/* ========== Active task cards ========== */
.timeclock-active-section {
    display: flex;
    flex-direction: column;
    max-height: 45%;
    flex-shrink: 0;
}

.timeclock-active-list {
    overflow-y: auto;
}

.timeclock-active-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    border: 1px solid var(--timeclock-divider);
}

.timeclock-active-card.running {
    background-color: var(--timeclock-running-bg);
    border-color: var(--timeclock-running-border);
}

.timeclock-active-card.paused {
    background-color: var(--timeclock-paused-bg);
    border-color: var(--timeclock-paused-border);
}

.timeclock-active-info {
    flex: 1;
    min-width: 0;
}

.timeclock-active-task {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Task name shrinks before the product does, but never past legibility */
.timeclock-active-task-name {
    flex: 0 1 auto;
    min-width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeclock-active-task .timeclock-rework-badge {
    flex: 0 0 auto;
}

.timeclock-active-task .timeclock-machine-badge {
    flex: 0 1 auto;
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeclock-active-product {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--timeclock-text-secondary);
}

.timeclock-active-product::before {
    content: "· ";
}

.timeclock-active-meta {
    font-size: 0.78rem;
    color: var(--timeclock-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeclock-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    text-align: right;
}

.timeclock-active-card.paused .timeclock-clock {
    font-weight: 500;
    color: var(--timeclock-text-secondary);
}

.timeclock-active-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.timeclock-active-actions .btn {
    min-width: 38px;
    min-height: 38px;
    padding: 0.25rem;
}

.timeclock-machine-badge {
    display: inline-block;
    font-size: 0.72rem;
    background: var(--timeclock-chip-bg);
    border-radius: 0.25rem;
    padding: 0 0.3rem;
}

/* ========== Order list ========== */
.timeclock-list-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--timeclock-text-muted);
    padding: 0.5rem 0.75rem 0.25rem;
}

.timeclock-order-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    min-height: 48px;
    border-bottom: 1px solid var(--timeclock-divider);
    cursor: pointer;
}

.timeclock-order-row:active,
.timeclock-order-row:hover {
    background: var(--timeclock-hover);
}

.timeclock-order-number {
    font-weight: 700;
    min-width: 4.5rem;
}

.timeclock-order-customer {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--timeclock-text-secondary);
}

.timeclock-order-row .bi-chevron-right {
    color: var(--timeclock-text-faint);
}

/* ========== Order detail ========== */
.timeclock-detail-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--timeclock-divider);
    position: sticky;
    top: 0;
    background: var(--timeclock-bg);
    z-index: 5;
}

.timeclock-back-to-list {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    min-width: 44px;
    min-height: 40px;
    font-size: 1.2rem;
    color: var(--timeclock-accent);
    cursor: pointer;
}

.timeclock-detail-title {
    flex: 1;
    min-width: 0;
}

.timeclock-detail-title .order-no {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.timeclock-print-label-btn {
    background: none;
    border: none;
    padding: 0 0.5rem;
    min-width: 40px;
    min-height: 32px;
    font-size: 1.1rem;
    color: var(--timeclock-accent);
    cursor: pointer;
}

.timeclock-print-label-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

.timeclock-detail-title .customer {
    font-size: 0.8rem;
    color: var(--timeclock-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Each product is one visual group of task rows: a heavy outline plus a
   tinted header, so the rows inside clearly belong to the product above. */
.timeclock-product-card {
    margin: 0.625rem 0.5rem;
    border: 2px solid var(--timeclock-product-border);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 4px var(--timeclock-product-shadow);
}

.timeclock-product-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: var(--timeclock-product-header-bg);
    border-bottom: 2px solid var(--timeclock-product-border);
}

.timeclock-product-header-main {
    flex: 1;
    min-width: 0;
}

.timeclock-addtask-btn {
    flex-shrink: 0;
    min-width: 34px;
    min-height: 32px;
    padding: 0.15rem 0.4rem;
}

.timeclock-product-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.timeclock-product-meta {
    font-size: 0.78rem;
    color: var(--timeclock-text-muted);
}

.timeclock-task-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    min-height: 46px;
    border-bottom: 1px solid var(--timeclock-divider);
}

.timeclock-task-row:last-child {
    border-bottom: none;
}

.timeclock-task-row.running {
    background-color: var(--timeclock-running-bg);
}

.timeclock-task-row.paused {
    background-color: var(--timeclock-paused-bg);
}

/* Booked vs estimated time - declared after running/paused so the
   over-estimate warning wins over the run-state colour. */
.timeclock-task-row.est-warn {
    background-color: var(--timeclock-est-warn-bg);
}

.timeclock-task-row.est-over {
    background-color: var(--timeclock-est-over-bg);
}

.timeclock-task-row.mine {
    box-shadow: inset 3px 0 0 var(--timeclock-accent);
}

.timeclock-task-time {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--timeclock-text-secondary);
}

.timeclock-task-time .booked {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--timeclock-text-strong);
}

.timeclock-task-time .estimate {
    display: block;
    color: var(--timeclock-text-muted);
}

.timeclock-task-count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--timeclock-text-muted);
}

.timeclock-task-info {
    flex: 1;
    min-width: 0;
}

.timeclock-task-name {
    font-size: 0.9rem;
    font-weight: 500;
}

.timeclock-task-meta {
    font-size: 0.76rem;
    color: var(--timeclock-text-muted);
}

/* Up to three buttons sit here (pause/stop/complete), so they are packed
   tighter than the row's own gap and shrink before the task name does. */
.timeclock-task-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.timeclock-task-row .btn {
    min-width: 40px;
    min-height: 40px;
    padding: 0.25rem 0.4rem;
    flex-shrink: 0;
}

.timeclock-start-btn {
    white-space: nowrap;
}

/* Split start button: the rework half stays narrow so the row keeps its layout */
.timeclock-start-group {
    flex-shrink: 0;
}

.timeclock-start-group .dropdown-toggle-split {
    min-width: 26px;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.timeclock-rework-badge {
    font-size: 0.68rem;
}

/* ========== Machine picker sheet ========== */
.timeclock-sheet {
    position: absolute;
    inset: 0;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#timeclock-mobile-page .timeclock-sheet {
    position: fixed;
}

.timeclock-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: var(--timeclock-backdrop);
}

.timeclock-sheet-panel {
    position: relative;
    background: var(--timeclock-surface);
    color: var(--timeclock-text);
    border-radius: 0.75rem 0.75rem 0 0;
    padding: 0.5rem 0.75rem 0.75rem;
    max-height: 70%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.timeclock-sheet-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--timeclock-grip);
    margin: 0 auto 0.5rem;
}

.timeclock-sheet-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.timeclock-machine-list {
    overflow-y: auto;
    flex: 1;
}

.timeclock-machine-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: none;
    color: inherit;
    border: 1px solid var(--timeclock-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 52px;
    margin-bottom: 0.375rem;
    cursor: pointer;
}

.timeclock-machine-row:active,
.timeclock-machine-row:hover {
    background: var(--timeclock-hover);
}

.timeclock-machine-name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.timeclock-machine-busy {
    font-size: 0.75rem;
    color: var(--timeclock-danger-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
}

.timeclock-machine-free {
    font-size: 0.75rem;
    color: var(--timeclock-success-text);
}

/* ========== Mobile / tablet full page ========== */
#timeclock-mobile-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--timeclock-bg);
    color: var(--timeclock-text);
    display: flex;
    flex-direction: column;
}

.timeclock-mobile-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    padding-top: env(safe-area-inset-top, 0);
    min-height: 56px;
    flex-shrink: 0;
    background: var(--timeclock-header-bg);
    border-bottom: 1px solid var(--timeclock-header-border);
    color: #fff;
}

.timeclock-back-btn {
    background: none;
    border: none;
    color: #fff;
    padding: 0.25rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.timeclock-mobile-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.timeclock-mobile-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.timeclock-mobile-body .timeclock-container {
    height: 100%;
}

/* ========== Touch upscaling ========== */
@media (max-width: 1024px), (pointer: coarse) {
    .timeclock-input-group .form-control {
        font-size: 1.05rem;
        padding: 0.75rem 1rem;
        min-height: 48px;
    }

    .timeclock-input-group .input-group-text,
    .timeclock-input-group .btn {
        padding: 0.75rem 1rem;
        font-size: 1.1rem;
    }

    .timeclock-section-title {
        font-size: 0.95rem;
    }

    .timeclock-active-card {
        padding: 0.5rem 0.625rem;
    }

    .timeclock-active-task {
        font-size: 1rem;
    }

    .timeclock-active-meta {
        font-size: 0.85rem;
    }

    .timeclock-clock {
        font-size: 1.15rem;
    }

    .timeclock-active-actions .btn {
        min-width: 44px;
        min-height: 44px;
    }

    .timeclock-active-actions .btn i {
        font-size: 1.2rem;
    }

    .timeclock-order-row {
        min-height: 56px;
        font-size: 1.05rem;
    }

    .timeclock-task-row {
        min-height: 56px;
    }

    .timeclock-task-name {
        font-size: 1rem;
    }

    .timeclock-task-meta {
        font-size: 0.85rem;
    }

    .timeclock-task-time {
        font-size: 0.85rem;
    }

    .timeclock-task-time .booked {
        font-size: 1rem;
    }

    .timeclock-task-row .btn {
        min-width: 48px;
        min-height: 44px;
    }

    .timeclock-task-row .btn i {
        font-size: 1.2rem;
    }

    .timeclock-machine-row {
        min-height: 60px;
        font-size: 1.05rem;
    }

    .timeclock-sheet-panel {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    }

    .timeclock-content::-webkit-scrollbar,
    .timeclock-active-list::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}

@media (max-width: 480px) {
    .timeclock-order-number {
        min-width: 4rem;
    }

    /* Narrowest phones: keep the 44px touch target but give the width back
       to the task name, which now shares the row with three buttons. */
    .timeclock-task-row .btn {
        min-width: 44px;
        padding-left: 0.3rem;
        padding-right: 0.3rem;
    }
}

/* ========== Search + task type filter bar ========== */
.timeclock-filter-bar {
    flex-shrink: 0;
}

/* Search and task filter share one line; phones stack them (below). */
.timeclock-filter-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.timeclock-filter-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Desktop pointer devices: trim the bar down — the touch upscaling below
   1025px / on coarse pointers keeps the tap targets full size there. */
@media (min-width: 1025px) and (pointer: fine) {
    .timeclock-filter-bar .timeclock-input-group .form-control {
        font-size: 0.8125rem;
        padding: 0.2rem 0.45rem;
        min-height: 0;
    }

    .timeclock-filter-bar .timeclock-input-group .input-group-text,
    .timeclock-filter-bar .timeclock-input-group .btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.8125rem;
    }
}

@media (max-width: 575.98px) {
    .timeclock-filter-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.timeclock-taskfilter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.timeclock-taskfilter-tags:empty {
    display: none;
}

.timeclock-taskfilter-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--timeclock-accent-solid);
    color: #fff;
    border-radius: 1rem;
    padding: 0.1rem 0.5rem 0.1rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.timeclock-taskfilter-tag-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.timeclock-taskfilter-tag-remove:hover {
    color: #fff;
}

.timeclock-taskfilter-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* The input is only half the bar wide now — keep task names readable. */
    min-width: 11rem;
    z-index: 200;
    background: var(--timeclock-surface);
    color: var(--timeclock-text);
    border: 1px solid var(--timeclock-border-strong);
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 180px;
    overflow-y: auto;
}

.timeclock-taskfilter-dropdown li {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.timeclock-taskfilter-dropdown li:hover,
.timeclock-taskfilter-dropdown li[aria-selected="true"] {
    background: var(--timeclock-selected);
    color: var(--timeclock-accent);
}

/* ========== Material usage sheet ========== */
.timeclock-material-list {
    overflow-y: auto;
    flex: 1;
}

.timeclock-material-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--timeclock-divider);
}

.timeclock-material-row:last-child {
    border-bottom: none;
}

.timeclock-material-info {
    flex: 1;
    min-width: 0;
}

.timeclock-material-name {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeclock-material-meta {
    font-size: 0.75rem;
    color: var(--timeclock-text-muted);
}

.timeclock-material-qty-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.timeclock-material-input {
    width: 84px;
    text-align: right;
}

.timeclock-material-unit {
    font-size: 0.8rem;
    color: var(--timeclock-text-secondary);
    min-width: 2.5rem;
}

/* Two rows: "Add material" next to "BSI Import", then Save/Cancel. All four
   on one row never fits on a phone. */
.timeclock-material-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

/* Dropping a workbook on the button is the same import as clicking it, so the
   button says so while a file is dragged over it. */
.timeclock-bsi-import.timeclock-bsi-dragover {
    border-style: dashed;
    background: var(--timeclock-selected);
}

.timeclock-material-footer-row {
    display: flex;
    gap: 0.5rem;
}

/* Equal halves, and the labels stay on one line rather than wrapping the row */
.timeclock-material-footer-row .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

@media (max-width: 1024px), (pointer: coarse) {
    .timeclock-material-input {
        min-height: 44px;
        font-size: 1.05rem;
    }
}

/* ========== Inventory item picker sheet ========== */
/* Opens on top of the material usage sheet, so it has to outrank it. */
.timeclock-picker-sheet {
    z-index: 1061;
}

/* Taller than the other sheets: a search box plus a list of hits needs the room. */
.timeclock-picker-panel {
    max-height: 85%;
}

.timeclock-picker-search {
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.timeclock-picker-list {
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
}

.timeclock-picker-row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    color: inherit;
    border: 1px solid var(--timeclock-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 52px;
    margin-bottom: 0.375rem;
    cursor: pointer;
}

.timeclock-picker-row:active,
.timeclock-picker-row:hover {
    background: var(--timeclock-hover);
}

.timeclock-picker-part {
    display: block;
    font-weight: 600;
}

.timeclock-picker-desc {
    display: block;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeclock-picker-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--timeclock-text-muted);
}

.timeclock-picker-note {
    font-size: 0.8rem;
}

@media (max-width: 1024px), (pointer: coarse) {
    .timeclock-picker-row {
        min-height: 60px;
    }

    .timeclock-picker-part {
        font-size: 1.05rem;
    }
}

/* ========== Subcontract service sheet ========== */
.timeclock-sc-list {
    overflow-y: auto;
    flex: 1;
    container-type: inline-size;
    container-name: sc-list;
}

.timeclock-sc-card {
    border: 1px solid var(--timeclock-border);
    border-radius: 0.5rem;
    padding: 0.625rem;
    margin-bottom: 0.5rem;
}

.timeclock-sc-card-new {
    border-color: var(--timeclock-new-border);
    background: var(--timeclock-new-bg);
}

.timeclock-sc-field-row {
    margin-bottom: 0.375rem;
}

.timeclock-sc-price-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.timeclock-sc-price-row .tc-sc-qty {
    width: 72px;
    text-align: right;
}

.timeclock-sc-price-row .tc-sc-price {
    flex: 1;
    text-align: right;
}

.tc-sc-label {
    font-size: 0.8rem;
    color: var(--timeclock-text-muted);
    margin-bottom: 0;
    flex-shrink: 0;
}

.tc-sc-sep {
    font-size: 0.8rem;
    color: var(--timeclock-text-muted);
    flex-shrink: 0;
}

/* Keep qty/price and the action button on one line (narrow view too) */
.timeclock-sc-price-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeclock-sc-price-actions .timeclock-sc-price-row {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.timeclock-sc-actions {
    display: flex;
    justify-content: flex-end;
}

.timeclock-sc-price-actions .timeclock-sc-actions {
    flex: 0 0 auto;
}

.timeclock-sc-btn-group {
    position: relative;
    display: inline-flex;
}

.timeclock-sc-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1070;
    min-width: 150px;
    background: var(--timeclock-surface);
    border: 1px solid var(--timeclock-border-strong);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
    list-style: none;
    margin: 0;
    margin-top: 2px;
}

.timeclock-sc-menu.show {
    display: block;
}

.timeclock-sc-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    white-space: nowrap;
}

.timeclock-sc-menu .dropdown-item:hover {
    background: var(--timeclock-menu-hover);
}

.timeclock-sc-empty {
    font-size: 0.875rem;
}

/* Always-visible action row below the scrollable card list */
.timeclock-sc-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.timeclock-sc-footer .btn {
    flex: 1 1 0;
}

@media (max-width: 1024px), (pointer: coarse) {
    .timeclock-sc-card .form-select,
    .timeclock-sc-card .form-control {
        min-height: 44px;
        font-size: 1rem;
    }

    .timeclock-sc-price-row .tc-sc-qty {
        width: 80px;
    }
}

/* Wide layout: lay each service out on a single row incl. actions.
   Keyed to the containing window's width (container query), not the
   viewport, so a narrow sub-window on a wide screen stays stacked. */
@container sc-list (min-width: 1001px) {
    .timeclock-sc-card {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .timeclock-sc-field-row {
        margin-bottom: 0;
        flex: 1 1 0;
        min-width: 0;
    }

    /* Give the reclaimed price width to the description field */
    .timeclock-sc-field-row:has(.tc-sc-desc) {
        flex: 2 1 0;
    }

    /* Price + action wrapper sits at the row end at natural width */
    .timeclock-sc-price-actions {
        flex: 0 0 auto;
    }

    .timeclock-sc-price-row {
        flex: 0 0 auto;
    }

    /* Half-width unit price on a single line */
    .timeclock-sc-price-row .tc-sc-price {
        flex: 0 0 60px;
        width: 60px;
    }

    .timeclock-sc-actions {
        margin-top: 0;
        flex: 0 0 auto;
    }
}

/* ========== Add task sheet ========== */
.timeclock-addtask-list {
    overflow-y: auto;
    flex: 1;
    margin-bottom: 0.25rem;
}

.timeclock-addtask-row {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    color: inherit;
    border: 1px solid var(--timeclock-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-height: 48px;
    margin-bottom: 0.375rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.timeclock-addtask-row:active,
.timeclock-addtask-row:hover {
    background: var(--timeclock-hover);
}

@media (max-width: 1024px), (pointer: coarse) {
    .timeclock-addtask-btn {
        min-width: 44px;
        min-height: 40px;
        padding: 0.25rem 0.5rem;
    }

    .timeclock-addtask-row {
        min-height: 56px;
        font-size: 1rem;
    }
}

/* ----- Window: time/timeEntryEdit ----- */

.tse-entry-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: transparent;
}
.tse-entry-card .card-body {
    overflow-y: auto;
    min-height: 0;
}