@font-face {
	font-family: "Inter Variable";
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@5.3.0/latin-wght-normal.woff2) format(woff2) tech(variations);
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--default-font-family: "Inter Variable", sans-serif;
	--bs-font-sans-serif: var(--default-font-family);
	--default-font-size: 14px;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;
	--bs-primary: #00b4d8;
	--bs-secondary: #e87722;

	--bs-primary-rgb: 44, 95, 111;
	--bs-secondary-rgb: 232, 119, 34;
	--txt: #83bfcd;
	--docx: #0067b3;
	--pdf: #d81e00;
	--xlsx: #016e38;
	--orange: #e87722 !important;
	--blue: #33647e;
	--color-background: #0d1117;
	--color-foreground: #e6edf3;
	--color-card: #161b22;
	--color-card-foreground: #e6edf3;
	--color-popover: #1c2128;
	--color-popover-foreground: #e6edf3;
	--color-primary: #00b4d8;
	--color-primary-foreground: #0d1117;
	--color-secondary: #21262d;
	--color-secondary-foreground: #c9d1d9;
	--color-muted: #21262d;
	--color-muted-foreground: #8b949e;
	--color-accent: #00b4d8;
	--color-accent-foreground: #0d1117;
	--color-destructive: #f85149;
	--color-destructive-foreground: #fff;
	--color-border: #ffffff14;
	--color-input: transparent;
	--color-input-background: #21262d;
	--color-switch-background: #30363d;
	--color-cyan-400: #00d3f2;
	--color-active: #06b6d4;
	--color-form-label: #9ea7b1;
	--font-weight-medium: 500;
	--font-weight-normal: 400;
	--color-ring: #00b4d8;
	--color-chart-1: #00b4d8;
	--color-chart-2: #3fb950;
	--color-chart-3: #d29922;
	--color-chart-4: #f85149;
	--color-chart-5: #bc8cff;
	--color-primary-hover: #01a4c5;
	--color-disabled: #0d586a;
	--border-radius: 0.375rem;
	--color-table-header: #181d24;
	--bs-border-color: var(--color-border);
	--bs-secondary-bg: #1a1f26;
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* global */
html {
	color-scheme: dark;
	font-size: var(--default-font-size);
}

body {
	background: var(--color-background);
	color: var(--color-foreground);
	font-family: var(--default-font-family);
	--bs-body-bg: var(--color-background);
	--bs-body-color: var(--color-foreground);
}

#application,
main {
	min-height: 90vh;
	position: relative;
}

label {
	display: block;
	margin-bottom: 12px;
}

#application {
	position: relative;
	display: grid;
	grid-template-areas:
		"app-header  app-header"
		"app-sidebar app-main"
		"app-sidebar app-footer";
	grid-template-rows: min-content 1fr min-content;
	grid-template-columns: auto 1fr;
	grid-gap: 0;
	align-content: stretch;
	align-items: stretch;
	max-width: 100vw;
	height: 100vh;
}

#application>section[data-subview] {
	grid-area: app-main;
	overflow: auto;
	max-width: 100vw;
}

nav.mainNav {
	grid-area: app-header;
	position: sticky;
    top: 0;
    z-index: 1000;
}

.app-sidebar {
	grid-area: app-sidebar;
	height: 100%;
}

/* forms */
.form-check-input:checked {
	background-color: var(--color-accent);
	border-color: var(--color-border);
}

.form-check-input:focus {
	border-color: var(--color-border);
	box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.15);
}

.form-check-input {
	--bs-body-bg: var(--color-foreground);
}

.multi-select2-wrapper {
	position: relative;
	min-height: 80px;
}
.multi-select2-wrapper .result-wrapper {
	position: absolute;
	z-index: 10;
	display: none;
	flex-direction: column;
	width: auto;
	top: 0;
	background-color: var(--color-popover);
	margin-top: 36px;
	margin-bottom: 1rem;
	border: 1px solid var(--color-border);
	border-radius: calc(var(--border-radius) - 2px);
	max-height: 140px;
    overflow-y: auto;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}
.multi-select2-wrapper .result-wrapper.active {
	display: flex;
	width: 100%;
}
.multi-select2-wrapper .result-wrapper button {
	flex: 1;
	text-align: left;
}

.result-wrapper button:hover {
	background-color: #21262d;
}

label span.req {
	color: var(--color-red-400, #f87171);
	font-weight: 500;
}

.field__item-sku .input-wrapper {
	position: relative;
	margin-right: 5px;
}

.field__item-sku .field-result {
	border: 1px solid #ccc;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 35px;
	background-color: #fff;
}

.field__item-sku .field-result li {
	padding: 5px;
	cursor: pointer;
}

.field__item-sku .field-result li:hover {
	background-color: #eee;
}

.field-item-quantity__preview {
	background: #f9f9f9;
	padding: 30px;
	border: 1px solid #ddd;
	margin-top: 20px;
}

.field-item-quantity__preview .label-wrapper {
	border: 1px solid #d1d5dc;
	margin-bottom: 5px;
	display: inline-block;
}

.field-item-quantity__preview img {
	display: block;
	max-width: 400px;
}

/* bootstrap */
.modal {
	--bs-modal-footer-bg: var(--color-card);
}

.modal-header {
	background: var(--color-card);
	--bs-modal-header-border-color: var(--color-border);
}

.modal-title {
	color: var(--color-card-foreground);
	font-weight: bold;
	font-size: 1rem;
}

.btn-close {
	--bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
	--bs-btn-close-color: var(--color-foreground);
}

.bg-dark a {
	color: white;
}

.border {
	border-color: var(--color-border) !important;
}

.border-top {
	--bs-border-color: var(--color-border);
}

.border-bottom {
	--bs-border-color: var(--color-border);
}

.border.bg-light {
	background: var(--color-background) !important;
}

.btn-white {
	background-color: #fff;
	border-color: #ced4da;
	color: #212529;
}

.btn-white:hover {
	background-color: #f8f9fa;
	border-color: #bfc5ca;
}

.btn-primary {
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--color-primary-hover);
	--bs-btn-hover-border-color: var(--color-primary);
	--bs-btn-hover-color: var(--color-accent-foreground) !important;
	--bs-btn-active-bg: var(--color-primary-hover);
	--bs-btn-active-border-color: var(--color-primary-hover);
	--bs-btn-active-color: var(--color-accent-foreground) !important;
	--bs-btn-color: var(--color-accent-foreground) !important;
	--bs-btn-font-weight: 600;
}

.btn-primary.disabled,
.btn-primary:disabled {
	--bs-btn-disabled-color: var(--color-accent-foreground);
	--bs-btn-disabled-bg: var(--color-disabled);
	--bs-btn-disabled-border-color: var(--color-disabled);
	--bs-btn-disabled-opacity: 0.9;
}

.btn-secondary {
	--bs-btn-bg: var(--color-secondary);
	--bs-btn-border-color: var(--color-border);
	--bs-btn-hover-bg: color-mix(in srgb, var(--color-secondary) 90%, white 10%);
	--bs-btn-hover-border-color: #ffffff26;
	--bs-btn-active-bg: color-mix(in srgb, var(--color-secondary) 80%, black 20%);
	--bs-btn-active-border-color: #ffffff3d;
}

.btn-link-primary {
	color: var(--color-primary) !important;
}

.text-primary {
	color: var(--bs-primary) !important;
}

.text-secondary {
	color: #e87722 !important;
}

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

.text-foreground {
	color: var(--color-foreground);
}

.text-cyan-400 {
	color: var(--color-cyan-400);
}

.text-10px {
	font-size: 10px;
}

.text-12-5px {
	font-size: 12.5px;
}

.text-\[11px\] {
	font-size: 11px;
}

.bg-primary {
	background-color: var(--color-primary) !important;
}

.bg-secondary {
	background-color: #e87722 !important;
}

.border-primary {
	border-color: #2c5f6f !important;
}

.border-secondary {
	border-color: #e87722 !important;
}

.link-primary {
	color: #2c5f6f !important;
}

.link-primary:hover {
	color: #244f5d !important;
}

.link-secondary {
	color: #e87722 !important;
}

.link-secondary:hover {
	color: #c9651d !important;
}

.form-control,
.form-select {
	border-radius: var(--border-radius);
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	padding-left: 0.75rem;
	padding-right: 1.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	background-size: 10px 12px;
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.input-icon input {
	padding-left: 2rem;
}

dt-length>select.form-select {
	--bs-form-select-bg-img: unset;
}

label.formField span.fieldLabel {
	display: block;
}

label.formField.required span.fieldLabel::after,
label.formField:has(input[required]) span.fieldLabel::after,
label:has(+ select.form-select[required])::after,
label:has(+ input.form-control[required])::after {
	content: " *";
	color: red;
}

.quantum-form label {
	font-size: 0.875rem;
}

.btn-dark {
	--bs-btn-bg: #6a7282;
	--bs-btn-border-color: #6a7282;
	--bs-btn-hover-bg: #59606e;
	--bs-btn-hover-border-color: #59606e;
	--bs-btn-active-bg: #4f5662;
	--bs-btn-active-border-color: #4f5662;
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
}

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

.processing {
	position: relative;
}
.processing-blocker {
	background-color: rgba(13, 17, 23, 0.55);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.table {
	--bs-table-bg: #0d1117;
	--bs-table-color: #c9d1d9;
	--bs-table-border-color: #ffffff14;
}

.table-hover>tbody>tr:hover>* {
	--bs-table-color-state: var(--color-foreground);
}

/* DataTables*/
table.dataTable.nowrap th,
table.dataTable.nowrap td {
	white-space: nowrap;
}

table.dataTable thead th {
	background-color: var(--color-table-header) !important;
	color: var(--color-muted-foreground) !important;
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-weight: var(--font-weight-normal);
}

table.dataTable tbody td {
	background-color: var(--color-table-header) !important;
	color: var(--color-muted-foreground);
}

.pagination {
	--bs-pagination-active-bg: var(--color-primary);
	--bs-pagination-active-border-color: var(--color-primary);
	--bs-pagination-color: var(--color-primary);
	--bs-pagination-hover-color: var(--color-accent);
}

table.dataTable {
	border: 1px solid var(--color-border) !important;
	border-collapse: collapse !important;
	font-size: 13px;
}

.dataTable tbody tr {
	border: 1px solid var(--color-border);
}

.dataTables_wrapper {
	border: 1px solid #d5dce0;
	border-radius: 0.375rem;
	padding: 1rem;
	background: #fff;
}

.dt-layout-start {
	display: flex !important;
	align-items: center;
	gap: 0.75rem;
}

.dt-length {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.dt-info {
	padding-top: 0 !important;
}

.dt-length label {
	margin-bottom: 0;
}

.dt-length {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.dt-info {
	padding-top: 0.35rem !important;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
}

.dt-length {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
}

.dt-info {
	padding-top: 0 !important;
}

.dt-length::after {
	content: "|";
	margin-left: 0.5rem;
	color: #999;
}

#recordsTable th:first-child,
#recordsTable td:first-child {
	width: 36px;
	text-align: center;
}

#recordsTable col:first-child {
	width: 36px !important;
}

#recordsTable th:first-child,
#recordsTable td:first-child {
	min-width: 36px !important;
	max-width: 36px !important;
	text-align: center;
}

#recordsTable th:first-child .dt-column-order {
	display: none !important;
}

#recordsTable th:first-child,
#recordsTable td:first-child {
	text-align: left;
}

#recordsTable th.select-cell,
#recordsTable td.select-cell {
	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;
	padding-left: 0.35rem !important;
	padding-right: 0.25rem !important;
	text-align: left !important;
}

#recordsTable td.select-cell .form-check-input {
	margin: 0;
	vertical-align: middle;
	margin-bottom: 4px;
}

label[for="dt-length-0"] {
	white-space: pre;
}

.DTTT_selected>* {
	background: #026fcc !important;
	color: #fff !important;
}

.DTTT_selected a {
	color: #fff !important;
}

.dt-length label {
	margin-bottom: 0;
	white-space: pre;
}

/* home */
[data-view="home"][data-method="search"] .modal-backdrop.show {
	opacity: 1;
}

[data-view="home"][data-method="search"] .modal-header {
	background: var(--color-card);
}

[data-view="home"][data-method="search"] .modal-content {
	border-radius: var(--border-radius);
}

[data-view="home"][data-method="search"] .modal-content {
	border: 1px solid var(--color-border);
}

[data-view="home"][data-method="search"] #modal .btn-primary {
	background: var(--color-secondary);
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.2rem;
	border-color: var(--color-secondary);
}

#form {
	background: white;
	padding: 30px;
	border: 1px solid #ddd;
}

/* CrudApp */
[data-subview="CrudApp"] #recordToolbarC {
	background: var(--color-secondary);
	grid-area: app-main;
}

[data-subview="CrudApp"] #recordToolbarC .btn {
	border: none;
}

.CrudApp .dt-scroll-head table {
	margin-bottom: 0 !important;
}

/* Queue */
[data-view="queue_events"] main {
	min-height: 90vh !important;
}

.CrudApp .dt-scroll-head thead th {
	border-bottom-width: 1px;
}

.CrudApp .dt-scroll-body thead {
	visibility: collapse;
}

.CrudApp .dt-scroll-body thead th {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
}

table.dataTable thead th,
table.dataTable tbody td {
	padding: 0.4rem 0.5rem;
}

/* apps */
#uploader {
	display: none;
}

#loginForm {
	grid-area: app-main;
}

#LoginApp .row.justify-content-center {
	min-height: calc(100vh - 100px);
}

/* NotificationsApp */
#NotificationsApp .my-table {
	display: table;
	width: 100%;
}

#NotificationsApp .table-cell {
	display: table-cell;
	vertical-align: middle;
	padding: 8px 10px;
}

#NotificationsApp .table-row {
	display: table-row;
	vertical-align: middle;
}

#NotificationsApp [data-read="false"] {
	font-weight: bold;
}

#NotificationsApp .single-notification {
	border-bottom: 1px solid #eee;
}

#NotificationsApp .single-notification .checkbox-cell {
	width: 4%;
}

#NotificationsApp .single-notification:hover {
	box-shadow: 0px 0px 4px 0px #ddd;
	cursor: pointer;
}

#NotificationsApp .single-notification button {
	background: none;
	border: none;
}

#NotificationsApp .single-notification .subject-cell {
	width: 35%;
}

#NotificationsApp .single-notification .content-cell span {
	width: 530px;
	display: block;
	overflow: hidden;
	white-space: pre;
	text-overflow: ellipsis;
}

#NotificationsApp .single-notification .date-cell {
	width: 10%;
}

#NotificationsApp .single-notification .time-cell span {
	width: 8%;
}

#NotificationsApp .btn-toolbar {
	border-bottom: 2px solid #ddd;
}

#NotificationsApp .btn-toolbar .btn {
	background: none;
	padding: 10px 18px;
	color: black;
	border: none;
	font-size: medium;
	font-weight: normal;
	text-transform: none;
}

#NotificationsApp .btn-toolbar [type="search"] {
	height: 35px;
}

#NotificationsApp .btn-toolbar .input-group-text {
	height: 35px;
	border-radius: 0;
	background-color: var(--color-primary-foreground);
}

#NotificationsApp .single-notification.active {
	background: #b1e0ec;
}

#NotificationsApp .h1 {
	font-size: x-large;
	font-weight: bold;
	margin-top: 12px;
}

#btnGroupAddon2 button {
	border: none;
	background: none;
}

/* plugins */
#activePlugins {
	padding-bottom: 100px;
}

/* navigation */

.mainNav .navbar-brand .navbar-brand-img {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.25rem;
	width: 1.5rem;
	height: 1.5rem;
	background-color: var(--color-primary);
}

.navbar-brand .navbar-brand-img svg {
	color: var(--color-primary-foreground);
	fill: var(--color-primary-foreground);
}

.navbar-brand .navbar-brand-text {
	font-size: 0.875rem;
	font-weight: 500;
}

.navbar-brand .navbar-brand-subtext {
	font-size: 0.625rem;
	color: var(--color-muted-foreground);
	font-family: var(--font-mono);
}

.bg-primary {
	background-color: #2c5f6f;
}

.mainNav small {
	color: #ddd;
	font-size: 10px;
	letter-spacing: 0.02em;
	opacity: 0.9;
}

.mainNav img {
	height: 30px;
	margin-left: 12px;
}

.pagination {
	margin: 0;
}

.mainNav {
	background-color: #0d1117 !important;
	border-color: var(--color-border) !important;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: 0.25rem 1rem;
	gap: 1rem;
	position: relative;
	z-index: 20;
}

.mainNav-logo {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 13rem;
	flex-shrink: 0;
}

.brand-icon {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.25rem;
	background: var(--color-active);
	color: #0d1117;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.brand-icon svg {
	width: 13px;
	height: 13px;
	stroke-width: 2;
}

.brand-text {
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--color-foreground, #fff);
	letter-spacing: -0.01em;
}

.brand-sub {
	font-size: 10px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;
	color: var(--color-muted-foreground, #8b949e);
	margin-left: 0.125rem;
	margin-top: 0.125rem;
}

/* search */
.mainNav-search-wrap {
	position: relative;
	flex: 1 1 auto;
	max-width: 28rem;
}

.mainNav-search-icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	stroke-width: 2;
	color: var(--color-muted-foreground, #8b949e);
	pointer-events: none;
}

.mainNav-search-input {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	font-size: 0.875rem;
	padding: 0.25rem 0.75rem 0.25rem 2.25rem;
	color: var(--color-foreground, #fff);
	cursor: pointer;
}

.mainNav-search-input::placeholder {
	color: var(--color-muted-foreground, #8b949e);
}

.mainNav-search-input:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--color-ring, var(--color-active));
	border-color: var(--color-ring, var(--color-active));
}

.mainNav-spacer {
	flex: 1 1 auto;
}

/* right cluster */
.mainNav-right {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

/* RFID LIVE badge */
.rfid-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 11px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;
	color: var(--color-emerald-400, #34d399);
	background: color-mix(in oklab,
			var(--color-emerald-500, #10b981) 10%,
			transparent);
	border: 1px solid color-mix(in oklab, var(--color-emerald-500, #10b981) 20%, transparent);
	border-radius: 0.375rem;
	padding: 0.25rem 0.5rem;
	white-space: nowrap;
}

.rfid-live-badge .dot {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--color-emerald-400, #34d399);
	flex-shrink: 0;
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

/* warehouse indicator */
.warehouse-indicator {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 11px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;
	color: var(--color-muted-foreground, #8b949e);
	white-space: nowrap;
}

.warehouse-indicator svg {
	width: 11px;
	height: 11px;
	stroke-width: 2;
}

/* notification bell */
.notif-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted-foreground, #8b949e);
	transition: color 0.15s ease;
}

.notif-btn:hover {
	color: var(--color-foreground, #fff);
}

.notif-btn svg {
	width: 15px;
	height: 15px;
	stroke-width: 2;
}

.notif-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 999px;
	background: #f43f5e;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}

/* user dropdown */
.user-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--color-foreground, #fff) !important;
	white-space: nowrap;
}

.user-toggle::after {
	display: none;
}

.user-toggle-chevron {
	width: 13px;
	height: 13px;
	stroke-width: 2;
	color: var(--color-muted-foreground, #8b949e);
	margin-left: -0.15rem;
}

.user-avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: color-mix(in oklab,
			var(--color-active) 15%,
			transparent);
	color: var(--color-cyan-400, #22d3ee);
	border: 1px solid var(--color-active);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.68rem;
	font-weight: 700;
	flex-shrink: 0;
}

.user-name {
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		monospace;
	color: var(--color-muted-foreground, #8b949e);
	white-space: nowrap;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu .dropdown-menu {
	top: 0 !important;
	right: 100%;
	left: auto;
	margin-right: 0.125rem !important;
	width: 12rem !important;
}

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

.dropdown-submenu.dropdown-item {
	padding: 0;
}

/* footer */
[data-subview="CrudApp"]+#mainFooter {
	display: none;
}

.main-footer .text-center {
	font-size: 0.875rem;
}

/* permissions */
.permission {
	display: none !important;
}

[data-actualuser="b"] .permission.b,
[data-actualuser="b"] .permission.c,
[data-actualuser="c"] .permission.c,
[data-actualuser="b"] .permission.d,
[data-actualuser="c"] .permission.d,
[data-actualuser="d"] .permission.d,
[data-actualuser="b"] .permission.e,
[data-actualuser="c"] .permission.e,
[data-actualuser="d"] .permission.e,
[data-actualuser="e"] .permission.e,
[data-actualuser="b"] .permission.f,
[data-actualuser="c"] .permission.f,
[data-actualuser="d"] .permission.f,
[data-actualuser="e"] .permission.f,
[data-actualuser="f"] .permission.f,
[data-actualuser="b"] .permission.g,
[data-actualuser="c"] .permission.g,
[data-actualuser="d"] .permission.g,
[data-actualuser="e"] .permission.g,
[data-actualuser="f"] .permission.g,
[data-actualuser="g"] .permission.g,
[data-actualuser="b"] .permission.h,
[data-actualuser="c"] .permission.h,
[data-actualuser="d"] .permission.h,
[data-actualuser="e"] .permission.h,
[data-actualuser="f"] .permission.h,
[data-actualuser="g"] .permission.h,
[data-actualuser="h"] .permission.h,
[data-actualuser="b"] .permission.i,
[data-actualuser="c"] .permission.i,
[data-actualuser="d"] .permission.i,
[data-actualuser="e"] .permission.i,
[data-actualuser="f"] .permission.i,
[data-actualuser="g"] .permission.i,
[data-actualuser="h"] .permission.i,
[data-actualuser="i"] .permission.i,
[data-actualuser="b"] .permission.j,
[data-actualuser="c"] .permission.j,
[data-actualuser="d"] .permission.j,
[data-actualuser="e"] .permission.j,
[data-actualuser="f"] .permission.j,
[data-actualuser="g"] .permission.j,
[data-actualuser="h"] .permission.j,
[data-actualuser="i"] .permission.j,
[data-actualuser="j"] .permission.j,
[data-actualuser="b"] .permission.k,
[data-actualuser="c"] .permission.k,
[data-actualuser="d"] .permission.k,
[data-actualuser="e"] .permission.k,
[data-actualuser="f"] .permission.k,
[data-actualuser="g"] .permission.k,
[data-actualuser="h"] .permission.k,
[data-actualuser="i"] .permission.k,
[data-actualuser="j"] .permission.k,
[data-actualuser="k"] .permission.k,
[data-actualuser="b"] .permission.l,
[data-actualuser="c"] .permission.l,
[data-actualuser="d"] .permission.l,
[data-actualuser="e"] .permission.l,
[data-actualuser="f"] .permission.l,
[data-actualuser="g"] .permission.l,
[data-actualuser="h"] .permission.l,
[data-actualuser="i"] .permission.l,
[data-actualuser="j"] .permission.l,
[data-actualuser="k"] .permission.l,
[data-actualuser="l"] .permission.l,
[data-actualuser="b"] .permission.m,
[data-actualuser="c"] .permission.m,
[data-actualuser="d"] .permission.m,
[data-actualuser="e"] .permission.m,
[data-actualuser="f"] .permission.m,
[data-actualuser="g"] .permission.m,
[data-actualuser="h"] .permission.m,
[data-actualuser="i"] .permission.m,
[data-actualuser="j"] .permission.m,
[data-actualuser="k"] .permission.m,
[data-actualuser="l"] .permission.m,
[data-actualuser="m"] .permission.m,
[data-actualuser="b"] .permission.n,
[data-actualuser="c"] .permission.n,
[data-actualuser="d"] .permission.n,
[data-actualuser="e"] .permission.n,
[data-actualuser="f"] .permission.n,
[data-actualuser="g"] .permission.n,
[data-actualuser="h"] .permission.n,
[data-actualuser="i"] .permission.n,
[data-actualuser="j"] .permission.n,
[data-actualuser="k"] .permission.n,
[data-actualuser="l"] .permission.n,
[data-actualuser="m"] .permission.n,
[data-actualuser="n"] .permission.n,
[data-actualuser="b"] .permission.o,
[data-actualuser="c"] .permission.o,
[data-actualuser="d"] .permission.o,
[data-actualuser="e"] .permission.o,
[data-actualuser="f"] .permission.o,
[data-actualuser="g"] .permission.o,
[data-actualuser="h"] .permission.o,
[data-actualuser="i"] .permission.o,
[data-actualuser="j"] .permission.o,
[data-actualuser="k"] .permission.o,
[data-actualuser="l"] .permission.o,
[data-actualuser="m"] .permission.o,
[data-actualuser="n"] .permission.o,
[data-actualuser="o"] .permission.o,
[data-actualuser="b"] .permission.p,
[data-actualuser="c"] .permission.p,
[data-actualuser="d"] .permission.p,
[data-actualuser="e"] .permission.p,
[data-actualuser="f"] .permission.p,
[data-actualuser="g"] .permission.p,
[data-actualuser="h"] .permission.p,
[data-actualuser="i"] .permission.p,
[data-actualuser="j"] .permission.p,
[data-actualuser="k"] .permission.p,
[data-actualuser="l"] .permission.p,
[data-actualuser="m"] .permission.p,
[data-actualuser="n"] .permission.p,
[data-actualuser="o"] .permission.p,
[data-actualuser="p"] .permission.p,
[data-actualuser="b"] .permission.q,
[data-actualuser="c"] .permission.q,
[data-actualuser="d"] .permission.q,
[data-actualuser="e"] .permission.q,
[data-actualuser="f"] .permission.q,
[data-actualuser="g"] .permission.q,
[data-actualuser="h"] .permission.q,
[data-actualuser="i"] .permission.q,
[data-actualuser="j"] .permission.q,
[data-actualuser="k"] .permission.q,
[data-actualuser="l"] .permission.q,
[data-actualuser="m"] .permission.q,
[data-actualuser="n"] .permission.q,
[data-actualuser="o"] .permission.q,
[data-actualuser="p"] .permission.q,
[data-actualuser="q"] .permission.q,
[data-actualuser="b"] .permission.r,
[data-actualuser="c"] .permission.r,
[data-actualuser="d"] .permission.r,
[data-actualuser="e"] .permission.r,
[data-actualuser="f"] .permission.r,
[data-actualuser="g"] .permission.r,
[data-actualuser="h"] .permission.r,
[data-actualuser="i"] .permission.r,
[data-actualuser="j"] .permission.r,
[data-actualuser="k"] .permission.r,
[data-actualuser="l"] .permission.r,
[data-actualuser="m"] .permission.r,
[data-actualuser="n"] .permission.r,
[data-actualuser="o"] .permission.r,
[data-actualuser="p"] .permission.r,
[data-actualuser="q"] .permission.r,
[data-actualuser="r"] .permission.r,
[data-actualuser="b"] .permission.s,
[data-actualuser="c"] .permission.s,
[data-actualuser="d"] .permission.s,
[data-actualuser="e"] .permission.s,
[data-actualuser="f"] .permission.s,
[data-actualuser="g"] .permission.s,
[data-actualuser="h"] .permission.s,
[data-actualuser="i"] .permission.s,
[data-actualuser="j"] .permission.s,
[data-actualuser="k"] .permission.s,
[data-actualuser="l"] .permission.s,
[data-actualuser="m"] .permission.s,
[data-actualuser="n"] .permission.s,
[data-actualuser="o"] .permission.s,
[data-actualuser="p"] .permission.s,
[data-actualuser="q"] .permission.s,
[data-actualuser="r"] .permission.s,
[data-actualuser="s"] .permission.s,
[data-actualuser="b"] .permission.t,
[data-actualuser="c"] .permission.t,
[data-actualuser="d"] .permission.t,
[data-actualuser="e"] .permission.t,
[data-actualuser="f"] .permission.t,
[data-actualuser="g"] .permission.t,
[data-actualuser="h"] .permission.t,
[data-actualuser="i"] .permission.t,
[data-actualuser="j"] .permission.t,
[data-actualuser="k"] .permission.t,
[data-actualuser="l"] .permission.t,
[data-actualuser="m"] .permission.t,
[data-actualuser="n"] .permission.t,
[data-actualuser="o"] .permission.t,
[data-actualuser="p"] .permission.t,
[data-actualuser="q"] .permission.t,
[data-actualuser="r"] .permission.t,
[data-actualuser="s"] .permission.t,
[data-actualuser="t"] .permission.t,
[data-actualuser="b"] .permission.u,
[data-actualuser="c"] .permission.u,
[data-actualuser="d"] .permission.u,
[data-actualuser="e"] .permission.u,
[data-actualuser="f"] .permission.u,
[data-actualuser="g"] .permission.u,
[data-actualuser="h"] .permission.u,
[data-actualuser="i"] .permission.u,
[data-actualuser="j"] .permission.u,
[data-actualuser="k"] .permission.u,
[data-actualuser="l"] .permission.u,
[data-actualuser="m"] .permission.u,
[data-actualuser="n"] .permission.u,
[data-actualuser="o"] .permission.u,
[data-actualuser="p"] .permission.u,
[data-actualuser="q"] .permission.u,
[data-actualuser="r"] .permission.u,
[data-actualuser="s"] .permission.u,
[data-actualuser="t"] .permission.u,
[data-actualuser="u"] .permission.u,
[data-actualuser="b"] .permission.v,
[data-actualuser="c"] .permission.v,
[data-actualuser="d"] .permission.v,
[data-actualuser="e"] .permission.v,
[data-actualuser="f"] .permission.v,
[data-actualuser="g"] .permission.v,
[data-actualuser="h"] .permission.v,
[data-actualuser="i"] .permission.v,
[data-actualuser="j"] .permission.v,
[data-actualuser="k"] .permission.v,
[data-actualuser="l"] .permission.v,
[data-actualuser="m"] .permission.v,
[data-actualuser="n"] .permission.v,
[data-actualuser="o"] .permission.v,
[data-actualuser="p"] .permission.v,
[data-actualuser="q"] .permission.v,
[data-actualuser="r"] .permission.v,
[data-actualuser="s"] .permission.v,
[data-actualuser="t"] .permission.v,
[data-actualuser="u"] .permission.v,
[data-actualuser="v"] .permission.v,
[data-actualuser="b"] .permission.w,
[data-actualuser="c"] .permission.w,
[data-actualuser="d"] .permission.w,
[data-actualuser="e"] .permission.w,
[data-actualuser="f"] .permission.w,
[data-actualuser="g"] .permission.w,
[data-actualuser="h"] .permission.w,
[data-actualuser="i"] .permission.w,
[data-actualuser="j"] .permission.w,
[data-actualuser="k"] .permission.w,
[data-actualuser="l"] .permission.w,
[data-actualuser="m"] .permission.w,
[data-actualuser="n"] .permission.w,
[data-actualuser="o"] .permission.w,
[data-actualuser="p"] .permission.w,
[data-actualuser="q"] .permission.w,
[data-actualuser="r"] .permission.w,
[data-actualuser="s"] .permission.w,
[data-actualuser="t"] .permission.w,
[data-actualuser="u"] .permission.w,
[data-actualuser="v"] .permission.w,
[data-actualuser="w"] .permission.w,
[data-actualuser="b"] .permission.x,
[data-actualuser="c"] .permission.x,
[data-actualuser="d"] .permission.x,
[data-actualuser="e"] .permission.x,
[data-actualuser="f"] .permission.x,
[data-actualuser="g"] .permission.x,
[data-actualuser="h"] .permission.x,
[data-actualuser="i"] .permission.x,
[data-actualuser="j"] .permission.x,
[data-actualuser="k"] .permission.x,
[data-actualuser="l"] .permission.x,
[data-actualuser="m"] .permission.x,
[data-actualuser="n"] .permission.x,
[data-actualuser="o"] .permission.x,
[data-actualuser="p"] .permission.x,
[data-actualuser="q"] .permission.x,
[data-actualuser="r"] .permission.x,
[data-actualuser="s"] .permission.x,
[data-actualuser="t"] .permission.x,
[data-actualuser="u"] .permission.x,
[data-actualuser="v"] .permission.x,
[data-actualuser="w"] .permission.x,
[data-actualuser="x"] .permission.x,
[data-actualuser="b"] .permission.y,
[data-actualuser="c"] .permission.y,
[data-actualuser="d"] .permission.y,
[data-actualuser="e"] .permission.y,
[data-actualuser="f"] .permission.y,
[data-actualuser="g"] .permission.y,
[data-actualuser="h"] .permission.y,
[data-actualuser="i"] .permission.y,
[data-actualuser="j"] .permission.y,
[data-actualuser="k"] .permission.y,
[data-actualuser="l"] .permission.y,
[data-actualuser="m"] .permission.y,
[data-actualuser="n"] .permission.y,
[data-actualuser="o"] .permission.y,
[data-actualuser="p"] .permission.y,
[data-actualuser="q"] .permission.y,
[data-actualuser="r"] .permission.y,
[data-actualuser="s"] .permission.y,
[data-actualuser="t"] .permission.y,
[data-actualuser="u"] .permission.y,
[data-actualuser="v"] .permission.y,
[data-actualuser="w"] .permission.y,
[data-actualuser="x"] .permission.y,
[data-actualuser="y"] .permission.y,
.permission.z,
[data-actualuser="a"] .permission {
	display: inherit !important;
}

/* sidebar */
.app-sidebar {
	background-color: var(--color-background);
	color: var(--color-foreground);
	border-color: var(--color-border);
	border-right-width: 1px;
	border-right-style: solid;
	width: 13rem;
}

.app-sidebar .sidebar-wrapper {
	font-size: 0.875rem;
}

.app-sidebar .navbar {
	padding: 0;
}

.app-sidebar .nav-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.2;
	color: var(--color-muted-foreground);
	font-weight: var(--font-weight-medium);
}

.bg-light {
	background-color: var(--color-background) !important;
	color: var(--color-foreground) !important;
}

.bg-white {
	background-color: var(--color-background) !important;
	color: var(--color-foreground) !important;
}

.form-control {
	background: var(--color-input-background);
	color: var(--color-foreground);
	border-color: var(--color-border);
}

.form-control::placeholder {
	color: var(--color-muted-foreground);
}

.form-control:focus {
	outline: none;
	box-shadow: 0 0 0 1px var(--color-ring);
	border-color: var(--color-ring);
}

.form-control[type="file"]::file-selector-button {
	background-color: var(--color-secondary);
	color: var(--color-secondary-foreground);
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
}

select.form-control {
	appearance: none;
	background-image: var(--bs-form-select-bg-img);
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
	padding-right: 2.5rem;
}

.input-group .input-group-text {
	background: var(--color-primary-foreground);
}

.text-dark {
	color: var(--color-foreground) !important;
}

#FormBuilderApp #droppable {
	background: linear-gradient(135deg, var(--color-ring) 0%, var(--color-background) 100%);
}

#FormBuilderApp #droppable:before {
	color: white !important;
}

.text-muted {
	color: var(--color-muted-foreground) !important;
}

#FormBuilderApp #builder.active {
	background-color: var(--color-secondary) !important;
	color: var(--color-secondary-foreground) !important;
}

.modal-dialog .modal-body {
	background-color: var(--color-card);
}

/* Crud App */
.CrudApp .crud-table-footer {
	background-color: var(--color-background);
	grid-area: app-main;
}

.CrudApp .tableControls {
	background-color: var(--color-background);
}

.tableControls button {
	font-size: 0.875rem;
}

.fieldLabelText {
	color: var(--color-foreground);
	display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color-form-label);
    font-family: var(--font-mono);
}

.btn {
	--bs-btn-color: var(--color-foreground);
	--bs-btn-hover-color: var(--color-foreground);
	--bs-btn-active-color: var(--color-foreground);
	--bs-btn-font-size: 0.875rem;
	--bs-btn-border-radius: var(--border-radius);
	--bs-btn-font-weight: 500;
	--bs-btn-padding-x: 0.75rem;
	--bs-btn-padding-y: 0.375rem;
}

.form-select {
	background-color: var(--color-input-background);
	color: var(--color-foreground);
	border-color: var(--color-input);
}

.pagination {
	--bs-pagination-bg: var(--color-background);
	--bs-pagination-border-color: var(--color-border);
	--bs-pagination-hover-bg: var(--color-background);
	--bs-pagination-hover-border-color: var(--color-border);
	--bs-pagination-color: var(--color-primary);
	--bs-pagination-disabled-bg: var(--color-background);
	--bs-pagination-disabled-border-color: var(--color-border);
	--bs-pagination-disabled-color: var(--color-muted-foreground);
}

#form {
	background-color: var(--color-card);
}

.card {
	--bs-body-bg: var(--color-background);
	--bs-body-color: var(--color-foreground);
}

.card-statistics {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-radius: 0.375rem;
	border-width: 1px;
	background-color: var(--color-card);
	border-color: var(--color-border);
}

.font-monospace {
	font-family: var(--font-mono);
}

.card-statistics .card-value {
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: bold;
}

.card-statistics .card-title {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.card-statistics .card-text {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
}

.card-statistics .card-text svg {
	width: 11px;
	height: 11px;
	margin-right: 0.25rem;
}

.page-title {
	font-size: 1.25rem;
	font-weight: 600;
	padding-bottom: 1rem;
}

.breadcrumbs {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-color: var(--color-border);
	position: sticky;
    top: 0;
    z-index: 999;	
	background-color: var(--color-background);
}

.breadcrumbs .breadcrumb-wrapper {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	position: sticky;
	top: 0;
	z-index: 10;
}

.breadcrumbs .breadcrumb-item {
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

.breadcrumbs .date-time {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.app-sidebar .nav-link svg,
.app-sidebar .nav-link i {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	stroke-width: 2.1;
	color: var(--color-muted-foreground) !important;
}

.app-sidebar .nav-item {
	margin: 0;
}

.app-sidebar .nav-link.active {
	background-color: color-mix(in oklab,
			var(--color-active) 15%,
			transparent);
	color: var(--color-cyan-400, #22d3ee);
	border-radius: 0.25rem;
	border: 1px solid var(--color-active);
}

.app-sidebar .nav-link.active svg,
.app-sidebar .nav-link.active i {
	color: var(--color-cyan-400, #22d3ee) !important;
}

.app-sidebar .nav-link.active:hover svg,
.app-sidebar .nav-link.active:hover i {
	color: var(--color-cyan-400, #22d3ee) !important;
}

.app-sidebar .nav-link:hover {
	background: transparent;
	color: #fff;
}

.app-sidebar .nav-link.active:hover,
.app-sidebar .nav-link.active:hover svg,
.app-sidebar .nav-link.active:hover i {
	background-color: color-mix(in oklab,
			var(--color-active) 15%,
			transparent);
	color: var(--color-cyan-400, #22d3ee);
	border-color: var(--color-active);
}

.app-sidebar .sidebar-menu {
	padding: 0.35rem 0.5rem;
}

.app-sidebar .sidebar-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: calc(100vh - 42px);
}

.app-sidebar nav {
	flex: 1;
}

.sidebar-status {
	margin: auto 0.5rem 0;
	padding: 0.6rem 0.6rem 0.6rem;
	border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	background: transparent;
}

.sidebar-status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
	font-size: 10px;
	line-height: 1.8;
	color: #a8b3bf;
}

.sidebar-status-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.sidebar-status-label-day {
	color: var(--color-emerald-400, #34d399);
}

.sidebar-status-value {
	color: #a8b3bf;
}

/* user dropdown menu */
.mainNav .dropdown-menu {
	background-color: #0d1117;
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	/* rounded-md */
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
		0 8px 10px -6px rgba(0, 0, 0, 0.4);
	width: 10rem;
	min-width: 0;
	position: absolute;
	top: calc(100% + 10px);
	transform: none;
	margin: 0;
}

.mainNav .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--color-foreground, #fff);
	background: transparent;
	transition: background-color 0.15s ease;
}

.mainNav .dropdown-item svg {
	width: 13px;
	height: 13px;
	stroke-width: 2;
	flex-shrink: 0;
	color: inherit;
}

/* separator + Sign Out section */
.dropdown-divider-wrap {
	border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	margin-top: 0.25rem;
	padding-top: 0.25rem;
}

.dropdown-item-danger {
	color: var(--color-red-400, #f87171) !important;
}

.mainNav .nav-item.dropdown {
	position: relative;
}

.card-dashboard {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	border-radius: 0.375rem;
	border-width: 1px;
	background-color: var(--color-card);
	border-color: var(--color-border);
}

.chart-container {
	position: relative;
	height: 253px;
	width: 100%;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	--bs-card-border-color: var(--color-border);
}

.card-title-left {
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.786rem;
	color: var(--color-muted-foreground);
}

.card-title-right {
	font-weight: 400;
	font-size: 0.786rem;
	color: var(--color-muted-foreground);
}

.activity-container {
	position: relative;
	height: 253px;
	width: 100%;
	overflow-y: auto;
	font-size: 0.786rem;
}

.activity-status {
	color: var(--color-primary);
}

.activity-item {
	padding: 0.5rem;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-foreground);
}

#assembliesTable {
	border-radius: var(--border-radius);
	overflow: hidden;
}

#assembliesTable thead tr {
	font-size: 0.875rem;
}

#assembliesTable tbody tr {
	font-size: 0.875rem;
}

.status-badge {
	display: inline-flex;
	padding-top: 0.125rem;
	padding-bottom: 0.125rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	align-items: center;
	border-radius: 0.25rem;
	border-width: 1px;
	font-weight: 500;
	font-size: 0.786rem;
	border-width: 1px;
	border-style: solid;
}

.status-badge.bg-primary {
	background-color: #00b7d726 !important;
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.status-badge.bg-warning {
	background-color: #f99c0026 !important;
	color: #ffb900;
	border-color: #ffb900;
}

.status-badge.bg-danger {
	background-color: #fb2c3626 !important;
	color: #ff6467;
	border-color: #ff6467;
}

.status-badge.bg-success {
	background-color: #00bb7f26 !important;
	color: #00d492;
	border-color: #00d492;
}

.status-badge.bg-info {
	background-color: #3080ff26 !important;
	color: #51a2ff;
	border-color: #51a2ff;
}

.status-badge.bg-purple {
	background-color: #ac4bff26 !important;
	color: #c27aff;
	border-color: #c27aff;
}

/* ===== Parts Inventory ===== */

.page-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-foreground, #fff);
}

/* toolbar */
.parts-toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--color-background, #161b22);
}

.parts-search {
	position: relative;
	flex: 1 1 auto;
}

.parts-search svg {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	stroke-width: 2;
	color: var(--color-muted-foreground, #8b949e);
	pointer-events: none;
}

.parts-search input {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	font-size: 0.85rem;
	padding: 0.375rem 0.75rem 0.375rem 2.25rem;
	color: var(--color-foreground, #fff);
}

.parts-search input::placeholder {
	color: var(--color-muted-foreground, #8b949e);
}

.parts-search input:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.btn-toolbar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	white-space: nowrap;
	font-size: 0.85rem;
	padding: 0.375rem 0.75rem;
	border-radius: 0.375rem;
	color: var(--color-foreground, #fff);
	transition: background-color 0.15s ease;
}

.btn-toolbar svg {
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

.btn-toolbar-ghost {
	background: var(--color-card, #161b22);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.btn-toolbar-disabled {
	color: var(--color-muted-foreground, #8b949e);
	opacity: 0.55;
	cursor: not-allowed;
}

.btn-toolbar-primary {
	background: var(--color-active);
	border: 1px solid var(--color-active);
	color: #06232a;
	font-weight: 600;
}

.btn-toolbar-primary:hover {
	background: var(--color-cyan-400, #22d3ee);
	border-color: var(--color-cyan-400, #22d3ee);
}

/* stat cards */
.parts-stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}

.stat-card {
	background: var(--color-card, #161b22);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.5rem;
	padding: 0.9rem 1rem;
}

.stat-card-title {
	font-size: 0.8rem;
	font-family: var(--font-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.4rem;
}

.stat-card-value {
	font-size: 1.875rem;
	font-weight: 700;
	font-family: var(--default-font-family);
	color: var(--color-foreground, #fff);
}

.stat-card-available .stat-card-value {
	color: #00d492;
}

.stat-card-linked .stat-card-value {
	color: #51a2ff;
}

.stat-card-qchold .stat-card-value {
	color: #ffb900;
}

/* table */
.parts-table-card {
	background: var(--color-card, #161b22);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.5rem;
	overflow: hidden;
}

.parts-table {
	border-collapse: collapse;
	font-size: 0.75rem;
	font-family: var(--default-font-family);
}

.parts-table thead th {
	text-align: left;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
	font-weight: 400;
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	white-space: nowrap;
	overflow: hidden;
	background: var(--color-table-header, #181d24);
	text-overflow: ellipsis;
}

.parts-table tbody td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
	color: var(--color-foreground, #fff);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.825rem;
}

.parts-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.02);
}

.parts-table .col-check {
	width: 2.25rem;
	color: var(--color-foreground, #fff);
}

.parts-table .col-actions {
	width: 2rem;
	text-align: center;
}

.parts-table tbody td.text-mono {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-muted-foreground, #8b949e);
}

.parts-table tbody td.text-default {
	font-size: 0.8rem;
	color: var(--color-foreground, #fff);
}

.parts-link {
	color: var(--color-cyan-400, #22d3ee);
	font-weight: 500;
	text-decoration: none;
	font-size: 0.8rem;
	font-family: var(--font-mono);
}

.parts-link:hover {
	color: var(--color-foreground, #fff);
	text-decoration: underline;
}

.col-muted {
	color: var(--color-muted-foreground, #8b949e);
}

.parts-table tbody td.col-muted {
	color: var(--color-muted-foreground, #8b949e);
}

/* component code pills */
.pill-code-group {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}

.pill-code {
	font-size: 0.65rem;
	font-family: var(--font-mono);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
	border-radius: 0.25rem;
	padding: 0.1rem 0.35rem;
	color: var(--color-muted-foreground, #8b949e);
}

/* status badges */


.badge-available {
	background: color-mix(in oklab, var(--color-emerald-500, #10b981) 15%, transparent);
	color: var(--color-emerald-400, #34d399);
	border-color: color-mix(in oklab, var(--color-emerald-500, #10b981) 30%, transparent);
}

.badge-linked {
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-muted-foreground, #8b949e);
	border-color: var(--color-border, rgba(255, 255, 255, 0.1)) !important;
}

.badge-qchold {
	background: color-mix(in oklab, var(--color-amber-500, #f59e0b) 15%, transparent);
	color: var(--color-amber-400, #fbbf24);
	border-color: color-mix(in oklab, var(--color-amber-500, #f59e0b) 30%, transparent);
}

.badge-reserved {
	background: color-mix(in oklab, var(--color-blue-500, #3b82f6) 15%, transparent);
	color: var(--color-blue-400, #60a5fa);
	border-color: color-mix(in oklab, var(--color-blue-500, #3b82f6) 30%, transparent);
}

/* row action button */
.row-action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 0.25rem;
	color: var(--color-muted-foreground, #8b949e);
	background: transparent;
	border: none;
}

.row-action-btn:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-foreground, #fff);
}

.row-action-btn svg {
	width: 14px;
	height: 14px;
	stroke-width: 2;
}

/* ================= CHECKBOX STYLE (cyan) ================= */
.parts-table input[type="checkbox"],
#partsSelectAll {
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	background: #fff;
	border: none;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
}

#partsSelectAll:indeterminate {
	background: var(--color-active);
}

#partsSelectAll:indeterminate::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
}

.parts-table input[type="checkbox"]:checked,
#partsSelectAll:checked {
	background: var(--color-active);
}

.parts-table input[type="checkbox"]:checked::after,
#partsSelectAll:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 2px;
	width: 4px;
	height: 8px;
	border: solid #06232a;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.parts-table input[type="checkbox"]:focus-visible,
#partsSelectAll:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

/* Key RFID button count state */
.btn-toolbar-ghost:not(.btn-toolbar-disabled) {
	color: var(--color-foreground, #fff);
}

/* ===== Filter Offcanvas ===== */
.filter-parts-panel {
	background-color: #161b22;
	color: var(--color-foreground, #fff);
	background: var(rgb(22, 27, 34));
	--bs-offcanvas-width: 280px;
	width: 280px !important;
	max-width: 100%;
	border-left: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

.filter-parts-panel .offcanvas-header {
	border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	padding: 1rem 1.25rem;
}

.filter-parts-panel .offcanvas-title {
	font-size: 1rem;
	font-weight: 600;
}

.filter-parts-panel .offcanvas-body {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.offcanvas-backdrop {
	background-color: rgba(0, 0, 0, 0.7);
}

.offcanvas-backdrop.show {
	opacity: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.filter-field label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
}

.filter-field select,
.filter-field input {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	padding: 0.5rem 0.65rem;
	font-size: 0.85rem;
	color: var(--color-foreground, #fff);
}

.filter-field select:focus,
.filter-field input:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.filter-panel-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.filter-panel-footer .btn-toolbar {
	white-space: normal;
	text-align: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}

.filter-panel-footer .btn-toolbar-ghost {
	background: rgba(255, 255, 255, 0.04);
	;
}

.filter-date-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.5rem;
}

.filter-date-row:last-child {
	margin-bottom: 0;
}

.filter-date-label {
	width: 32px;
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
}


.filter-date-row input[type="date"] {
	background: var(--color-input-background, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	padding: 0.5rem 0.65rem;
	font-size: 0.85rem;
	color: var(--color-foreground, #fff);
}

.filter-date-row input[type="date"]:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.filter-date-row input[type="date"]::-webkit-calendar-picker-indicator {
	filter: none;
	cursor: pointer;
}

/* ===== Add Part Modal ===== */
.modal-backdrop {
	background-color: rgba(0, 0, 0, 0.4);
}

.modal-backdrop.show {
	opacity: 1;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.add-part-modal .modal-dialog {
	max-width: 504px;
	max-height: 90vh;
}

.add-part-modal .modal-header {
	padding: 1rem 1.25rem;
	background: rgb(22, 27, 34);
}

.add-part-modal .modal-title {
	font-size: 1rem;
	font-weight: 600;
}

.add-part-modal .modal-body {
	padding: 1.25rem;
	background: rgb(22, 27, 34);
}

.add-part-modal .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.add-part-modal .form-field,
.add-part-modal .form-field-mono {
	margin-top: 0.85rem;
}


.add-part-modal input[type="text"],
.add-part-modal select {
	padding: 0.5rem 0.65rem;
	font-size: 0.8rem;
}

.add-part-modal .modal-footer {
	padding: 0.85rem 1.25rem;
	background: rgb(22, 27, 34);
}

.file-upload-box {
	text-transform: none;
	letter-spacing: normal;
	padding: 0.85rem 0.5rem;
	font-size: 0.78rem;
}

.add-part-modal .modal-content {
	background-color: #161b22;
	color: var(--color-foreground, #fff);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.04));
}

.add-part-modal .modal-header,
.add-part-modal .modal-footer {
	border-color: var(--color-border, rgba(255, 255, 255, 0.08));
}

.add-part-modal .form-row-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.add-part-modal .req {
	color: var(--color-red-400, #f87171);
	font-weight: 500;
	font-size: 0.5rem;
}

.add-part-modal .opt {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.75rem;
	font-weight: 500;
	font-family: ui-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: var(--color-muted-foreground, #8b949e);
	opacity: 0.6;
}

.add-part-modal input[type="text"],
.add-part-modal select {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.08));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.85rem;
	color: var(--color-foreground, #fff);
}

.add-part-modal .form-field-mono input[type="text"] {
	font-family: var(--font-mono);
}

.form-field-mono .form-control {
	font-family: var(--font-mono);
}

.add-part-modal input[type="text"]:focus,
.add-part-modal select:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.add-part-modal .form-field input[type="text"]::placeholder {
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
}

.add-part-modal .form-field-mono input[type="text"]::placeholder {
	color: var(--color-muted-foreground, #8b949e);
}

.add-part-modal .input-icon {
	position: relative;
}

.add-part-modal .input-icon svg {
	position: absolute;
	left: 0.65rem;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	color: var(--color-muted-foreground, #8b949e);
	pointer-events: none;
}

.add-part-modal .input-icon input {
	padding-left: 2rem;
}

.add-part-modal .form-field label:not(.file-upload-box),
.add-part-modal .form-field-mono label:not(.file-upload-box) {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
}

.file-upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.15));
	border-radius: 0.5rem;
	padding: 1.15rem 0.5rem;
	background: rgba(255, 255, 255, 0.015);
	font-size: 0.78rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-muted-foreground, #8b949e);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.file-upload-box svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.75;
	stroke: currentColor;
	color: inherit;
	transition: color 0.15s ease, stroke 0.15s ease;
}

.file-upload-box span {
	transition: color 0.15s ease;
}

.file-upload-box:hover {
	/* border-color: var(--color-active); */
	color: var(--color-foreground, #fff);
}

.file-upload-box:hover svg {
	stroke: var(--color-foreground, #fff);
	color: var(--color-foreground, #fff);
}

.file-upload-box:hover span {
	color: var(--color-foreground, #fff);
}

.filter-banner {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.75rem;
}

.filter-banner svg {
	width: 13px;
	height: 13px;
	stroke-width: 2;
}

.filter-banner b {
	color: var(--color-foreground, #fff);
	font-weight: 600;
}

.parts-table-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	font-size: 0.75rem;
	color: var(--color-muted-foreground, #8b949e);
}

#partsTableContainer {
	overflow-x: auto;
}

#partsTable {
	width: max-content;
	min-width: 100%;
	table-layout: auto;
}

#partsTable th,
#partsTable td {
	white-space: nowrap;
}

#partsTable th:nth-child(1),
#partsTable td:nth-child(1) {
	min-width: 36px;
}

/* checkbox */
#partsTable th:nth-child(2),
#partsTable td:nth-child(2) {
	min-width: 90px;
}

/* ASSEMBLIES */
#assemblyTable_wrapper div.dt-scroll {
	border-radius: .375rem;
	overflow: hidden;
}
#assemblyTable_wrapper tbody td {
	padding: 0.5rem 0.75rem;
	border-style: none;
}
#assemblyTable_wrapper table.dataTable {
	table-layout: fixed;
}
#assemblyTable_wrapper .dt-scroll-body table {
	border-top-width: 0 !important;
	border-top-style: none !important;
}
#assemblyTable_wrapper .dt-scroll-head thead th .sort-icon-wrap svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.5;
}
.hover-text-info:hover {
	color: #0dcaf0 !important;
}
.hover-opacity-100:hover {
	opacity: 1 !important;
}
.transition-opacity {
	transition: opacity 0.2s ease;
}
.transition-colors {
	transition: color 0.2s ease;
}
.bg-border {
	background-color: var(--bs-border-color);
}
.bg-cyan {
	background-color: #06b6d4;
}

/* INTAKE */
#intakeTable_wrapper div.dt-scroll {
	border-radius: .375rem;
	overflow: hidden;
}
#intakeTable_wrapper tbody td {
	padding: 0.5rem 0.75rem;
	border-style: none;
}
#intakeTable_wrapper table.dataTable {
	table-layout: fixed;
}
#intakeTable_wrapper .dt-scroll-body table {
	border-top-width: 0 !important;
	border-top-style: none !important;
}
#intakeTable_wrapper .dt-scroll-head thead th .sort-icon-wrap svg,
.dataTable thead th .sort-icon-wrap svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.5;
}
#intakeTable_wrapper .row {
	--bs-gutter-x: 0;
}
.text-date-received {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
}
.card-intake-detail {
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
}
.card-intake-detail .card-header {
	border-color: 1px solid var(--color-border);
}
.card-intake-detail .card-header span {
	font-size: 0.72rem;
	font-family: var(--font-mono);
	text-transform: text-uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted-foreground);
}
.card-intake-detail .card-title {
	font-size: 0.72rem;
	font-family: var(--font-mono);
	color: var(--color-muted-foreground);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0;
}
.card-intake-detail .card-text {
	font-size: 0.875rem;
	color: var(--color-foreground);
}
.card-intake-detail .card-attachments {
	border-radius: 0.25rem; 
	border: 1px dashed var(--color-border);
	color: var(--color-muted-foreground);
}
.card-attachments svg {
	width: 13px;
	height: 13px;
}
.card-intake-detail .card-value {
	font-size: 1rem;
	color: var(--color-foreground);
	font-weight: 500;
}
.card-intake-detail .card-text-summary {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
}
.activity-history-item svg	{
	width: 13px;
	height: 13px;
}
.activity-history-item .timestamp {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
	font-family: var(--font-mono);
}
.activity-history-item .event-type {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-foreground);
}
.activity-history-item .description {
	font-size: 0.75rem;
	color: var(--color-muted-foreground);
}
.activity-history-item .history-line-item {
	width: 1px;
	min-height: 12px;
	background: var(--color-border);
}
.text-purple {
	color: #a684ff;
}
.status-badge svg {
	width: 9px;
	height: 9px;
	margin-right: 0.25rem;
}
.white-space-normal {
	white-space: normal;
}
.pricing-status {
	font-size: 0.75rem;
	font-family: var(--font-mono);
}
.pricing-status svg {
	width: 9px;
	height: 9px;
	margin-right: 0.25rem;
}
.text-sku {
	font-size: 0.75rem;
	font-family: var(--font-mono);
}
.hr-divider {
	border-top: 1px solid var(--color-border);
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
/* ===== New Intake Modal ===== */
.modal .modal-dialog {
	max-width: 588px;
	width: 100%;
}
#search-modal.modal .modal-dialog {
	max-width: var(--bs-modal-width);
	width: auto;
}

.modal .modal-content {
	max-height: 85vh;
	display: flex;
	flex-direction: column;
}

.modal .modal-body {
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

.modal .modal-content {
	background: #1d242c;
	border: 1px solid #39434e;
	color: #d9dee3;
}

.modal .modal-header {
	padding: 16px 18px;
	background: rgb(22, 27, 34);
	border-bottom: 1px solid #39434e;
}

.modal .modal-title {
	font-size: 16px;
	font-weight: 600;
	color: #d9dee3;
}

body[data-method="add"][data-view="intake"] .modal .modal-body {
	padding: 0 !important;
	background: rgb(22, 27, 34);
}

.modal .modal-footer {
	padding: 12px 16px;
	background: rgb(22, 27, 34);
	border-color: #39434e;
}

.modal .modal-body > .p-4 > p.small {
	color: var(--color-muted-foreground, #8b949e);
	font-size: 0.9rem;
	letter-spacing: 0.05em;
}

.modal .intake-option {
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)) !important;
	border-radius: 0.5rem !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.modal .intake-option:hover {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
}

.modal .intake-option:has(input:checked) {
	background: rgba(6, 182, 212, 0.08) !important;
	border-color: var(--color-active) !important;
}

.modal .intake-option svg {
	color: rgb(139, 148, 158);
	stroke-width: 1.5;
	transition: color 0.15s ease;
}

.modal .intake-option:has(input:checked) svg {
	color: var(--color-cyan-400, #22d3ee);
}

.modal .intake-option .fw-medium,
.modal .intake-option span.small.fw-medium {
	color: oklab(0.942533 -0.00486067 -0.00988358 / 0.8) !important;
	font-size: 0.9rem !important;
	opacity: 1 !important;
	transition: color 0.15s ease;
}

.modal .intake-option:has(input:checked) .fw-medium,
.modal .intake-option:has(input:checked) span.small.fw-medium {
	color: var(--color-foreground, #fff) !important;
}

.modal .intake-option > div > span:last-child {
	color: var(--color-muted-foreground, #8b949e) !important;
}

.modal .intake-radio {
	width: 18px;
	height: 18px;
	border-color: var(--color-border, rgba(255, 255, 255, 0.2)) !important;
	position: relative;
}

.intake-radio-button {
	position: relative;
}

.intake-radio-button input[type="radio"] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.intake-radio-button>input:checked ~ .intake-radio {
	border-color: var(--color-active) !important;
}

.intake-radio-button>input:checked ~ .intake-radio::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-active);
	transform: translate(-50%, -50%);
}

.modal .modal-footer .btn-toolbar-primary:disabled,
.modal .modal-footer .btn-toolbar-primary.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--color-active);
	border-color: var(--color-active);
	color: #06232a;
}

.order-form-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9ea7b1;
	font-family: var(--font-mono);
}

.modal .form-control,
.modal .form-select,
.modal .form-control:disabled,
.modal .input-group-text {
	background-color: #272f37;
	border-color: #3b4651;
	color: #d9dee3;
}

.modal .form-control::placeholder {
	color: #8e98a3;
}

.modal .form-control:focus,
.modal .form-select:focus {
	background-color: #272f37;
	border-color: #3b8294;
	color: #fff;
	box-shadow: none;
}

.modal .input-group-text {
	border-left: 0;
}

.modal input[type="date"].field-input-native-datetime,
.modal input[type="time"].field-input-native-datetime {
	color-scheme: dark;
}

.modal input[type="date"].field-input-native-datetime::-webkit-calendar-picker-indicator,
.modal input[type="time"].field-input-native-datetime::-webkit-calendar-picker-indicator {
	opacity: 0;
	-webkit-appearance: none;
	width: 0;
	height: 0;
}

.modal .field-input-icon-trigger {
	cursor: pointer;
}

.modal .field-input-icon-trigger:hover {
	color: #22d3ee;
}

.vehicle-step-desc {
	color: #9ea7b1;
	line-height: 1.5;
	max-width: 90%;
	letter-spacing: normal;
}

/* ===== Stepper ===== */
.customer-order-stepper {
	width: 100%;
	gap: 10px;
	font-size: 12px;
}

.stepper-item {
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	color: #7e8994;
}

.stepper-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid #3b4651;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 600;
	font-family: var(--font-mono);
}

.stepper-item.active {
	color: #d9dee3;
}

.stepper-item.active .stepper-number {
	border-color: #27a9d6;
	color: #27a9d6;
}

.stepper-item.completed {
	color: #7e8994;
}

.stepper-item.completed .stepper-number {
	border-color: #27a9d6;
	background: #27a9d6;
	color: #fff;
}

.stepper-item.completed .stepper-number svg {
	stroke-width: 3;
	color: #fff;
}

.stepper-label {
	font-size: 11px;
	letter-spacing: 0.5px;
	font-family: var(--font-mono);
}

.stepper-line {
	width: 20px;
	height: 1px;
	background: #39434e;
}

.stepper-line.completed {
	background: #27a9d6;
	opacity: 0.5;
}

/* Intake selection */
.intake-option.active {
	border-color: #27a9d6 !important;
}

.intake-option .intake-radio {
	width: 16px;
	height: 16px;
}

.intake-option .intake-radio-sm {
	width: 14px;
	height: 14px;
}

.intake-option.active .intake-radio {
	border-color: #27a9d6 !important;
	background: #27a9d6;
}

/* ===== Items / Gaylord / HLP step lists ===== */
.modal .items-step-list,
.modal .gaylord-step-list,
.modal .purchased-hlp-step-list {
	border-color: #39434e !important;
}

.modal .demo-row {
	border-color: #39434e !important;
	font-size: 0.875rem;
}

.modal .demo-row:last-child {
	border-bottom: 0 !important;
}

/* ===== Review step ===== */
.modal .review-section {
	border-color: #39434e !important;
}

.modal .review-section-title {
	letter-spacing: 0.08em;
	font-size: 0.7rem;
}

.modal .review-field-label {
	font-size: 0.7rem;
	text-transform: uppercase;
}

.modal .review-item-row {
	border-color: #39434e !important;
}

.modal .review-item-row:last-child {
	border-bottom: 0 !important;
}


/* Label */
.order-form-label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	color: #9ea7b1;
	font-family:  var(--font-mono);
}

.order-form-label .text-danger {
	margin-left: 2px;
}

/* Wrapper */
.field-input-wrapper {
	position: relative;
	width: 100%;
}

/* Main input */
.field-input-wrapper .field-input {
	width: 100%;
	height: 32px;
	padding: 6px 12px;

	background: #272f37;
	border: 1px solid #3b4651;
	border-radius: 4px;

	color: #d9dee3;
	font-size: 13px;

	box-shadow: none;
}

/* Placeholder */
.field-input-wrapper .field-input::placeholder {
	color: #8e98a3;
	opacity: 1;
}

/* Focus */
.field-input-wrapper .field-input:focus {
	background: #272f37;
	border-color: #4a8fa5;
	color: #d9dee3;
	box-shadow: none;
}

/* Prefix: $ */
.field-input-wrapper.has-prefix .field-input {
	padding-left: 28px;
}

.field-input-prefix {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	z-index: 2;

	color: #aeb7c0;
	font-size: 13px;
	font-weight: 500;

	pointer-events: none;
}

/* Custom trailing icon */
.field-input-wrapper.has-icon .field-input {
	padding-right: 36px;
}

.field-input-icon-trigger {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 20px;
	height: 20px;
	padding: 0;

	background: transparent;
	border: 0;
	color: #8e98a3;
	cursor: pointer;
}

.field-input-wrapper.has-native-datetime .field-input {
	padding-right: 10px;
}

.field-input[type="date"]::-webkit-calendar-picker-indicator,
.field-input[type="time"]::-webkit-calendar-picker-indicator {
	filter: brightness(0);
	opacity: 1;
}

.field-select {
	height: 32px;
	padding: 6px 36px 6px 12px;
	background-color: #272f37;
	border: 1px solid #3b4651;
	border-radius: 4px;
	color: #d9dee3;
}

.field-input[type="number"] {
	appearance: auto;
	-webkit-appearance: auto;
	-moz-appearance: auto;
}

.field-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.field-radio-card {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	background: #272f37;
	border: 1px solid #3b4651;
	border-radius: 4px;
	color: #d9dee3;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.field-radio-card:hover {
	border-color: #4a8fa5;
}

.field-radio-card.selected {
	border-color: #27a9d6;
	background: rgba(39, 169, 214, 0.08);
	box-shadow: 0 0 0 1px #27a9d6;
}

.field-radio-dot {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #5a6570;
	position: relative;
}

.field-radio-card.selected .field-radio-dot {
	border-color: #27a9d6;
}

.field-radio-card.selected .field-radio-dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #27a9d6;
	transform: translate(-50%, -50%);
}

.field-radio-conditional:not(:empty) {
	margin-top: 8px;
}

.field-alert {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 4px;
	font-size: 13px;
	font-family: var(--font-mono);
}

.field-alert-warning {
	background: rgba(255, 193, 7, 0.08);
	border: 1px solid rgba(255, 193, 7, 0.35);
	color: #ffc107;
}

.field-alert svg {
	flex-shrink: 0;
}

.component-empty-action {
	text-decoration: none !important;
	font-size: 11px;
	font-weight: 500;
	color: #22d3ee;
	font-family: var(--font-mono);
}

.component-empty-action:hover {
	text-decoration: underline !important;
	color: #22d3ee;
}
.border-dashed {
	border: 1px dashed #3b4651 !important;
	border-radius: 6px;
}
.empty-state-icon {
	color: #4a5560;

}

.empty-state-title {
	color: #8b949e;
	font-size: 12px;
	font-family: var(--font-mono);
}
.empty-state-description {
	color: var(--color-muted-foreground, #8b949e);
	font-size: 10px;
	opacity: 0.6;
}

.add-item-form-card {				
	box-shadow: 0 0 0 1px rgba(39, 169, 214, 0.15);
	overflow: hidden;
	background-color: var(--color-active);
	color: #22d3ee;
	border-radius: 0.25rem;
	border: 1px solid var(--color-active);				
}

.add-item-form-header {
	padding: 10px 17px 0px 17px;
}

.add-item-form-title {
	font-size: 14px;
	font-weight: 600;
	color: #fff;
}

.btn-close-form {
	background: transparent;
	border: 0;
	color: #8b949e;
	padding: 2px;
}

.btn-close-form:hover {
	color: #d9dee3;
}

.add-item-form-body {
	padding: 16px;
}

.add-item-form-footer {
	padding: 0px 16px 12px 16px;
}

.item-row {
	border-bottom: 1px solid #39434e;
}

.item-row:last-child {
	border-bottom: 0;
}

.item-type-badge {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 4px;
	font-family: var(--font-mono);
	flex-shrink: 0;
}

.badge-assembly {
	background: rgba(39, 169, 214, 0.12);
	color: #27a9d6;
}

.badge-part {
	background: rgba(63, 185, 80, 0.12);
	color: #3fb950;
}

.item-description {
	font-size: 13px;
	color: #d9dee3;
	font-weight: 500;
}

.item-subtitle {
	font-size: 11px;
	color: #27a9d6;
	font-family: var(--font-mono);
}

.btn-item-remove {
	background: transparent;
	border: 0;
	color: #8b949e;
	padding: 4px;
}

.btn-item-remove:hover {
	color: #e5484d;
}
.modal .btn-toolbar-ghost:disabled,
.modal .btn-toolbar-ghost.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}
.sku-search-field {
	position: relative;
}

.sku-search-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 280px;
	overflow-y: auto;
	background: #1d242c;
	border: 1px solid #3b4651;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.sku-search-dropdown.open {
	display: block;
}

.sku-result-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #2b333c;
	text-align: left;
}

.sku-result-item:last-child {
	border-bottom: 0;
}

.sku-result-item:hover {
	background: rgba(39, 169, 214, 0.08);
}

.sku-result-thumb {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #272f37;
	border: 1px solid #3b4651;
	border-radius: 4px;
	color: #5a6570;
}

.sku-result-info {
	min-width: 0;
}

.sku-result-top {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.sku-result-code {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: #27a9d6;
}

.sku-result-make {
	font-size: 12px;
	font-weight: 600;
	color: #d9dee3;
}

.sku-result-model {
	font-size: 11px;
	color: #8b949e;
}

.sku-result-desc {
	font-size: 12px;
	color: #aeb7c0;
	margin-top: 2px;
}

.sku-result-empty {
	padding: 12px;
	font-size: 12px;
	color: #8b949e;
	text-align: center;
}

/* Selected SKU chip */
.sku-selected-chip {
	padding: 8px 12px;
	background: rgba(39, 169, 214, 0.1);
	border: 1px solid #27a9d6;
	border-radius: 4px;
}

.sku-selected-code {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: #22d3ee;
}

.sku-selected-make,
.sku-selected-desc {
	font-size: 13px;
	font-weight: 600;
	color: #d9dee3;
}

.sku-selected-model {
	font-size: 12px;
	color: #8b949e;
}

.btn-sku-clear {
	background: transparent;
	border: 0;
	color: #8b949e;
	padding: 2px;
	flex-shrink: 0;
}

.btn-sku-clear:hover {
	color: #e5484d;
}

.sku-selected-wrap {
	width: 100%;
}

.sku-selected-thumb {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #272f37;
	border: 1px solid #3b4651;
	border-radius: 4px;
	color: #5a6570;
}

.sku-selected-card {
	padding: 8px 12px;
	background: rgba(39, 169, 214, 0.08);
	border: 1px solid #27a9d6;
	border-radius: 4px;
}

.sku-selected-code {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: #22d3ee;
}

.sku-selected-make {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
}

.sku-selected-desc {
	font-size: 13px;
	color: #d9dee3;
}

.sku-selected-model {
	font-size: 12px;
	color: #8b949e;
}

.btn-sku-clear {
	background: transparent;
	border: 0;
	color: #8b949e;
	padding: 2px;
}

.btn-sku-clear:hover {
	color: #e5484d;
}
.field-input.field-input-part-sku:disabled {
	color: var(--color-violet-400) !important;
	background: #1d242c;
	opacity: 0.85;
}

.field-input:disabled,
.field-select:disabled {
	background: #1d242c;
	color: #5a6570;
	cursor: not-allowed;
	opacity: 0.7;
}

/* Intake row actions dropdown */
.intake-row-actions .btn-link {
	color: var(--color-muted-foreground);
}
.intake-row-actions .btn-link:hover,
.intake-row-actions.show .btn-link {
	color: var(--color-foreground);
}
.intake-row-actions .dropdown-toggle::after {
	display: none;
}
.intake-row-actions .dropdown-menu {
	min-width: 9rem;
	padding: 0.25rem;
	background-color: var(--color-popover);
	border: 1px solid var(--color-border);
	border-radius: 0.375rem;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
}
.intake-row-actions .dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	font-size: 0.8rem;
	border-radius: 0.25rem;
	color: var(--color-popover-foreground);
}
.intake-row-actions .dropdown-item svg {
	width: 14px;
	height: 14px;
}
.intake-row-actions .dropdown-item:hover,
.intake-row-actions .dropdown-item:focus {
	background-color: var(--color-muted);
	color: var(--color-popover-foreground);
}
.intake-row-actions .dropdown-item.dropdown-item-danger {
	color: var(--color-destructive) !important;
}
.intake-row-actions .dropdown-item.dropdown-item-danger:hover,
.intake-row-actions .dropdown-item.dropdown-item-danger:focus {
	background-color: color-mix(in srgb, var(--color-destructive) 16%, transparent);
	color: var(--color-destructive) !important;
}

/* Intake delete confirm dialog (shared #modal, scoped) */
.modal-dialog.intake-delete-dialog {
	max-width: 420px;
}
.intake-delete-dialog .modal-header {
	padding: 1rem 1.75rem;
}
.intake-delete-dialog .modal-body {
	padding: 1.75rem !important;
}
.intake-delete-dialog .delete-intake-lead {
	margin: 0;
	font-size: 0.95rem;
	color: var(--color-foreground);
}
.intake-delete-dialog .delete-intake-note {
	margin: 0.85rem 0 0;
	font-size: 0.825rem;
	color: var(--color-muted-foreground);
}
.intake-delete-dialog .modal-footer {
	padding: 1rem 1.75rem;
	gap: 0.5rem;
}
.intake-delete-dialog .modal-footer .btn {
	padding-inline: 1rem;
}

/* PART ID */
#partsTable th:nth-child(3),
#partsTable td:nth-child(3) {
	min-width: 130px;
}

/* RFID EPC */
#partsTable th:nth-child(4),
#partsTable td:nth-child(4) {
	min-width: 90px;
}

/* PART TYPE */
#partsTable th:nth-child(5),
#partsTable td:nth-child(5) {
	min-width: 200px;
}

/* DESCRIPTION */
#partsTable th:nth-child(6),
#partsTable td:nth-child(6) {
	min-width: 140px;
}

/* COMPONENT CODES */
#partsTable th:nth-child(7),
#partsTable td:nth-child(7) {
	min-width: 80px;
}

/* MAKE */
#partsTable th:nth-child(8),
#partsTable td:nth-child(8) {
	min-width: 80px;
}

/* MODEL */
#partsTable th:nth-child(9),
#partsTable td:nth-child(9) {
	min-width: 90px;
}

/* STARTING YEAR */
#partsTable th:nth-child(10),
#partsTable td:nth-child(10) {
	min-width: 55px;
}

/* SIDE */
#partsTable th:nth-child(11),
#partsTable td:nth-child(11) {
	min-width: 90px;
}

/* LOCATION */
#partsTable th:nth-child(12),
#partsTable td:nth-child(12) {
	min-width: 90px;
}

/* STATUS */
#partsTable th:nth-child(13),
#partsTable td:nth-child(13) {
	min-width: 100px;
}

/* ASSOC. INTAKE */
#partsTable th:nth-child(14),
#partsTable td:nth-child(14) {
	min-width: 110px;
}

/* ASSOC. ASSEMBLY */
#partsTable th:nth-child(15),
#partsTable td:nth-child(15) {
	min-width: 100px;
}

/* DATE RECEIVED */
#partsTable th:nth-child(16),
#partsTable td:nth-child(16) {
	min-width: 50px;
}

/* actions */

/* ===== Key RFID Modal ===== */
.key-rfid-modal .modal-content {
	background-color: #161b22;
	color: var(--color-foreground, #fff);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	background: var(rgb(22, 27, 34));

}

.key-rfid-modal .modal-dialog {
	max-width: 460px;
}

.key-rfid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-color: var(--color-border, rgba(255, 255, 255, 0.08));
}

.key-rfid-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	font-size: 0.8rem;
}

.key-rfid-title svg {
	width: 16px;
	height: 16px;
	color: var(--color-cyan-400, #22d3ee);
}

.key-rfid-step-indicator {
	font-size: 0.75rem;
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
}

.key-rfid-modal .modal-body {
	padding: 1.25rem;
	background: var(--color-input-background, rgba(255, 255, 255, 0.08));
}

.key-rfid-part-card {
	background: var(--color-input-background, rgba(255, 255, 255, 0.08));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	margin-bottom: 1rem;
}

.key-rfid-part-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.key-rfid-part-label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
}

.key-rfid-part-processed {
	font-size: 0.75rem;
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
}

.key-rfid-part-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}

.key-rfid-part-name .parts-link {
	font-weight: 500;
	font-size: 0.8rem;
}

.key-rfid-current-epc {
	font-size: 0.78rem;
	font-family: var(--font-mono);
	color: var(--color-muted-foreground, #8b949e);
}

.key-rfid-modal .form-field label {
	display: block;
	font-size: 0.8rem;
	font-family: var(--font-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.35rem;
	font-weight: 500;
}

.key-rfid-modal .form-field input {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.85rem;
	color: var(--color-foreground, #fff);
	font-family: var(--font-mono);
	margin-bottom: 0.9rem;
}

.key-rfid-modal .form-field input:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.key-rfid-modal .form-field input.input-error {
	border-color: var(--color-red-400, #f87171);
	box-shadow: 0 0 0 1px var(--color-red-400, #f87171);
}

.key-rfid-progress-bar {
	display: flex;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

.key-rfid-progress-seg {
	flex: 1 1 0;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
}

.key-rfid-progress-seg.active {
	background: var(--color-active);
}

.key-rfid-footer {
	display: flex;
	justify-content: space-between;
	padding: 0.85rem 1.25rem;
	border-color: var(--color-border, rgba(255, 255, 255, 0.08));
}

.key-rfid-footer-left,
.key-rfid-footer-right {
	display: flex;
	gap: 0.5rem;
}

/* completion screen */
.key-rfid-complete {
	text-align: center;
	padding: 0.5rem 0 0.25rem;
}

.key-rfid-complete-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--color-emerald-500, #10b981) 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}

.key-rfid-complete-icon svg {
	width: 22px;
	height: 22px;
	color: var(--color-emerald-400, #34d399);
}

.key-rfid-complete-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.key-rfid-complete-sub {
	font-size: 0.85rem;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 1.25rem;
}

.key-rfid-complete-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}

.key-rfid-stat {
	background: var(--color-input-background, rgba(255, 255, 255, 0.03));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.5rem;
	padding: 0.75rem 0.5rem;
}

.key-rfid-stat-updated {
	background: color-mix(in oklab, var(--color-emerald-500, #10b981) 10%, transparent);
	border-color: color-mix(in oklab, var(--color-emerald-500, #10b981) 30%, transparent);
}

.key-rfid-stat-value {
	font-size: 1.4rem;
	font-weight: 700;

	color: var(--color-foreground, #fff);
}

.key-rfid-stat-updated .key-rfid-stat-value {
	color: var(--color-emerald-400, #34d399);
}

.key-rfid-stat-label {
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--color-muted-foreground, #8b949e);
	margin-top: 0.2rem;
	font-family: var(--font-mono);
}

.key-rfid-done-btn {
	margin-top: 1.25rem;
	padding: 0.75rem 0.5rem;
	width: 100%;
	justify-content: center;
}

/* ===== SKU Matrix ===== */
.status-active {
	background: color-mix(in oklab, var(--color-emerald-500, #10b981) 15%, transparent);
	color: var(--color-emerald-400, #34d399);
	border-color: color-mix(in oklab, var(--color-emerald-500, #10b981) 30%, transparent);
}

.status-inactive {
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-muted-foreground, #8b949e);
	border-color: var(--color-border, rgba(255, 255, 255, 0.1));
}

.inv-ok {
	color: #2ecc71;
	font-weight: 600;
}

.inv-low {
	color: #f0ad4e;
	font-weight: 600;
}

.inv-out {
	color: #e74c3c;
	font-weight: 600;
}

.image-upload-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.15));
	border-radius: 0.5rem;
	padding: 1.15rem 0.5rem;
	background: rgba(255, 255, 255, 0.015);
	font-size: 0.78rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-muted-foreground, #8b949e);
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.image-upload-box svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.75;
	stroke: currentColor;
	color: inherit;
	transition: color 0.15s ease, stroke 0.15s ease;
}

.image-upload-box.image-upload-box,
.image-upload-box span {
	text-transform: none !important;
	transition: color 0.15s ease;
}

.image-upload-box:hover {
	border-color: var(--color-active);
	color: var(--color-foreground, #fff);
}

.image-upload-box:hover svg {
	stroke: var(--color-foreground, #fff);
	color: var(--color-foreground, #fff);
}

.image-upload-box:hover span {
	color: var(--color-foreground, #fff);
}

.add-sku-modal .modal-header {
	padding: 1rem 1.25rem;
	background: rgb(22, 27, 34);
}

.add-sku-modal .modal-title {
	font-size: 1rem;
	font-weight: 600;
}

.add-sku-modal .modal-body {
	padding: 1.25rem;
	background: rgb(22, 27, 34);
}

.add-sku-modal .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.add-sku-modal .form-field,
.add-sku-modal .form-field-mono {
	margin-top: 0.85rem;
}


.add-sku-modal input[type="text"],
.add-sku-modal select {
	padding: 0.5rem 0.65rem;
	font-size: 0.8rem;
}

.add-sku-modal .modal-footer {
	padding: 0.85rem 1.25rem;
	background: rgb(22, 27, 34);
}

.add-sku-modal .modal-content {
	background-color: #161b22;
	color: var(--color-foreground, #fff);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.04));
}

.add-sku-modal .modal-header,
.add-sku-modal .modal-footer {
	border-color: var(--color-border, rgba(255, 255, 255, 0.08));
}

.add-sku-modal .form-row-3 {
	grid-template-columns: 1fr 1fr 1fr;
}

.add-sku-modal .req {
	color: var(--color-red-400, #f87171);
	font-weight: 500;
	/* font-size: 0.5rem; */
}

.add-sku-modal .opt {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.75rem;
	font-weight: 500;
	font-family: ui-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	color: var(--color-muted-foreground, #8b949e);
	opacity: 0.6;
}

.add-sku-modal input[type="text"],
.add-sku-modal input[type="number"],
.add-sku-modal select {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.08));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.85rem;
	color: var(--color-foreground, #fff);
}

.add-sku-modal .form-field-mono input[type="text"] .add-sku-modal .form-field-mono input[type="number"] {
	font-family: var(--font-mono);
}


.add-sku-modal input[type="text"]:focus,
.add-sku-modal input[type="number"]:focus,
.add-sku-modal select:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.add-sku-modal .form-field input[type="text"]::placeholder {
	color: var(--color-muted-foreground, #8b949e);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

.add-sku-modal .form-field-mono input[type="text"]::placeholder,
.add-sku-modal .form-field-mono input[type="number"]::placeholder {
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
}

.add-sku-modal .input-icon {
	position: relative;
}

.add-sku-modal .input-icon svg {
	position: absolute;
	left: 0.65rem;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	color: var(--color-muted-foreground, #8b949e);
	pointer-events: none;
}

.add-sku-modal .input-icon input {
	padding-left: 2rem;
}

.add-sku-modal .form-field label:not(.image-upload-box),
.add-sku-modal .form-field-mono label:not(.image-upload-box) {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.35rem;
	font-family: var(--font-mono);
}


.parts-table.dataTable thead .dt-column-order::before,
.parts-table.dataTable thead .dt-column-order::after {
	content: none !important;
	display: none !important;
}

.parts-table.dataTable thead th.dt-orderable-asc,
.parts-table.dataTable thead th.dt-orderable-desc {
	cursor: pointer;
}

.parts-table.dataTable thead th .th-inner {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.parts-table.dataTable thead th .col-title {
	color: inherit;
}

.parts-table.dataTable thead th.dt-ordering-asc .col-title,
.parts-table.dataTable thead th.dt-ordering-desc .col-title {
	color: #fff;
}

.parts-table.dataTable thead th .sort-icon-wrap {
	display: inline-flex;
	align-items: center;
	opacity: 0.35;
}

.parts-table.dataTable thead th.dt-ordering-asc .sort-icon-wrap,
.parts-table.dataTable thead th.dt-ordering-desc .sort-icon-wrap {
	opacity: 1;
	color: #fff;
}

.parts-table.dataTable thead th .sort-icon-wrap svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.5;
}

#skuTable_info {
	display: flex;
	font-size: 0.875rem;
	flex: 1 1 auto;
	font-family: var(--font-mono);
}

.dataTables_info {
	display: flex !important;
	align-items: center;
	flex: 1;
	font-size: 13px;
}

.dt-info-total {
	color: rgba(255, 255, 255, 0.55);
}

.dt-info-low {
	margin-left: auto;
	margin-right: 24px;
	color: #e74c3c;
	font-weight: 500;
}

.dt-info-total {
	color: rgba(255, 255, 255, 0.55);
}

#skuTableContainer {
	overflow-x: auto;
}

#skuTable {
	width: max-content;
	min-width: 100%;
	table-layout: auto;
}

#skuTable th,
#skuTable td {
	white-space: nowrap;
}

#skuTable th:nth-child(1),
#skuTable td:nth-child(1) {
	min-width: 70px;
}

/* MAKE */
#skuTable th:nth-child(2),
#skuTable td:nth-child(2) {
	min-width: 70px;
}

/* SEQUENCE # */
#skuTable th:nth-child(3),
#skuTable td:nth-child(3) {
	min-width: 70px;
}

/* SKU */
#skuTable th:nth-child(4),
#skuTable td:nth-child(4) {
	min-width: 55px;
}

/* GRADE */
#skuTable th:nth-child(5),
#skuTable td:nth-child(5) {
	min-width: 80px;
}

/* FINAL SKU */
#skuTable th:nth-child(6),
#skuTable td:nth-child(6) {
	min-width: 100px;
}

/* DESCRIPTION */
#skuTable th:nth-child(7),
#skuTable td:nth-child(7) {
	min-width: 70px;
}

/* MODEL */
#skuTable th:nth-child(8),
#skuTable td:nth-child(8) {
	min-width: 80px;
}

/* STARTING YEAR */
#skuTable th:nth-child(9),
#skuTable td:nth-child(9) {
	min-width: 60px;
}

/* INVENTORY */
#skuTable th:nth-child(10),
#skuTable td:nth-child(10) {
	min-width: 60px;
}

/* THRESHOLD */
#skuTable th:nth-child(11),
#skuTable td:nth-child(11) {
	min-width: 60px;
}

/* ACTIVE */
#skuTable th:nth-child(12),
#skuTable td:nth-child(12) {
	min-width: 50px;
}

/* actions */

/* =====  DAMAGE CODES ===== */
.dt-app-table.dataTable thead .dt-column-order::before,
.dt-app-table.dataTable thead .dt-column-order::after {
	content: none !important;
	display: none !important;
}

.dt-app-table.dataTable thead th.dt-orderable-asc,
.dt-app-table.dataTable thead th.dt-orderable-desc {
	cursor: pointer;
}

.dt-app-table.dataTable thead th .th-inner {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.dt-app-table.dataTable thead th .col-title {
	color: inherit;
}

.dt-app-table.dataTable thead th .col-title:hover {
	color: #fff;
}

.dt-app-table.dataTable thead th.dt-ordering-asc .col-title,
.dt-app-table.dataTable thead th.dt-ordering-desc .col-title {
	color: #22d3ee;
}

.dt-app-table.dataTable thead th .sort-icon-wrap {
	display: inline-flex;
	align-items: center;
	opacity: 0.35;
}

.dt-app-table.dataTable thead th.dt-ordering-asc .sort-icon-wrap,
.dt-app-table.dataTable thead th.dt-ordering-desc .sort-icon-wrap {
	opacity: 1;
	color: #22d3ee;
}

.dt-app-table.dataTable thead th .sort-icon-wrap svg {
	width: 12px;
	height: 12px;
	stroke-width: 2.5;
}

.dt-app-table-container {
	overflow-x: auto;
}

.dt-app-table {
	width: max-content;
	min-width: 100%;
	table-layout: auto;
}

.dt-app-table th,
.dt-app-table td {
	white-space: nowrap;
}

#damageCodesTable th:nth-child(1),
#damageCodesTable td:nth-child(1) {
	min-width: 110px;
}

/* DAMAGE CODE */
#damageCodesTable th:nth-child(2),
#damageCodesTable td:nth-child(2) {
	min-width: 220px;
}

/* DEFINITION */
#damageCodesTable th:nth-child(3),
#damageCodesTable td:nth-child(3) {
	min-width: 140px;
}

/* DESIGNATION */
#damageCodesTable th:nth-child(4),
#damageCodesTable td:nth-child(4) {
	min-width: 90px;
}

/* ACTIVE */
#damageCodesTable th:nth-child(5),
#damageCodesTable td:nth-child(5) {
	min-width: 50px;
}

/* actions */

.add-sku-modal .toggle-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 0.85rem;
}

.add-sku-modal .toggle-field label:not(.toggle-switch) {
	margin-bottom: 0;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-slider {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	transition: background-color 0.15s ease;
}

.toggle-slider::before {
	content: '';
	position: absolute;
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 3px;
	background-color: #fff;
	border-radius: 50%;
	transition: transform 0.15s ease;
}

.toggle-switch input:checked+.toggle-slider {
	background-color: var(--color-active);
}

.toggle-switch input:checked+.toggle-slider::before {
	transform: translateX(18px);
}

.dt-app-table.dataTable thead th .sort-icon-wrap {
	display: inline-flex;
	align-items: center;
	opacity: 0;
	transition: opacity 0.12s ease;
}

.dt-app-table.dataTable thead th.dt-orderable-asc:hover .sort-icon-wrap,
.dt-app-table.dataTable thead th.dt-orderable-desc:hover .sort-icon-wrap {
	opacity: 0.5;
}

/* ===== Part Detail ===== */
.part-detail-page {
	padding-top: 1rem;
	padding-bottom: 2rem;
}

.breadcrumb-item .breadcrumb-link {
	color: var(--color-muted-foreground, #8b949e);
	text-decoration: none;
}

.breadcrumb-item .breadcrumb-link:hover {
	color: var(--color-foreground, #fff);
	text-decoration: underline;
}

.breadcrumb-item .breadcrumb-sep {
	margin: 0 0.4rem;
	color: var(--color-muted-foreground, #8b949e);
	opacity: 0.6;
}

.breadcrumb-item .breadcrumb-current {
	color: var(--color-foreground, #fff);
	font-weight: 500;
}

.part-detail-back-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-family: var(--font-mono);
	color: var(--color-muted-foreground, #8b949e);
}

.part-detail-back-link {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	color: var(--color-muted-foreground, #8b949e);
	text-decoration: none;
}

.part-detail-back-link:hover {
	color: var(--color-foreground, #fff);
}

.part-detail-back-link svg {
	width: 14px;
	height: 14px;
}

.part-detail-back-sep {
	opacity: 0.5;
}

.part-detail-back-current {
	color: var(--color-cyan-400, #22d3ee);
	font-weight: 500;
}

.part-detail-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.part-detail-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-mono);
}

.part-detail-title h1 {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
	color: var(--color-foreground, #fff);
}

.part-detail-subtitle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-mono);
	margin-top: 0.3rem;
	font-size: 0.82rem;
	color: var(--color-muted-foreground, #8b949e);
}

.part-detail-subtitle .text-mono {
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-muted-foreground, #8b949e);
	padding: 0.2rem 0.3rem;
}

.part-detail-item {
	font-size: 0.82rem;
	color: var(--color-muted-foreground);
	text-transform: uppercase;
	font-family: var(--font-mono);
}

.part-detail-grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 1rem;
	align-items: start;
}

.part-detail-card {
	background: rgba(17, 22, 30, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 0.5rem;
}

.part-detail-card .form-field label,
.part-detail-card .part-detail-idcol-header span {
	display: block;
	font-size: 0.8rem;
	font-family: var(--font-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.35rem;
	font-weight: 500;
}

.part-detail-card input,
.part-detail-card select {
	width: 100%;
	background: var(--input-background);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.375rem;
	padding: 0.74rem 0.8rem;
	font-size: 0.87rem;
	line-height: 1.4;
	color: var(--color-foreground, #fff);
}

.part-detail-card input:focus,
.part-detail-card select:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.part-detail-card .form-field label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
	margin-bottom: 0.35rem;
}

.part-detail-card .req {
	color: var(--color-red-400, #f87171);
	font-weight: 500;
}

.part-detail-readonly {
	color: var(--color-muted-foreground, #8b949e) !important;
	cursor: not-allowed;
	background: rgba(12, 16, 22, 0.94) !important;
}

.part-detail-hint {
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--color-muted-foreground, #8b949e);
	margin-top: 0.55rem;
	font-family: var(--font-mono);
}

.pill-code-removable {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	cursor: default;
}

.pill-code-remove {
	width: 10px;
	height: 10px;
	cursor: pointer;
}

.pill-code-remove:hover {
	color: var(--color-red-400, #f87171);
}

.part-detail-images-docs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.part-detail-idcol-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground, #8b949e);
}

.part-detail-add-link {
	color: var(--color-cyan-400, #22d3ee);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.78rem;
	cursor: pointer;
}

.part-detail-file-list {
	margin-top: 0.5rem;
}

.part-detail-file-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.78rem;
	color: var(--color-muted-foreground, #8b949e);
	padding: 0.3rem 0;
}

.part-detail-file-item svg {
	width: 12px;
	height: 12px;
}

.part-detail-summary-row,
.part-detail-card-title-summary {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.8rem;
	padding: 0.4rem 0;
	font-family: var(--font-mono);
}

.part-detail-card-title-summary {
	font-size: 0.8rem;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted-foreground, #8b949e);
	padding: 1rem 1.25rem 0.75rem;
}

.part-detail-summary-row:last-child {
	border-bottom: none;
}

.part-detail-summary-row span {
	color: var(--color-muted-foreground, #8b949e);
}

.part-detail-summary-row b {
	font-weight: 500;
	text-align: right;
}

.part-detail-audit-entry {
	display: flex;
	gap: 0.6rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.06));
}

.part-detail-audit-entry:last-child {
	border-bottom: none;
}

.part-detail-audit-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-active);
	margin-top: 0.4rem;
	flex-shrink: 0;
}

.part-detail-audit-meta {
	font-size: 0.7rem;
	color: var(--color-muted-foreground, #8b949e);
	font-family: var(--font-mono);
	margin-bottom: 0.15rem;
}

.part-detail-audit-text {
	font-size: 0.82rem;
	color: var(--color-foreground, #fff);
}

.part-detail-card {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
}

.part-detail-card:last-child {
	margin-bottom: 0;
}

.part-detail-card-title {
	font-size: 0.8rem;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted-foreground, #8b949e);
	padding: 1rem 1.25rem 0.75rem;
	margin: 0 0 1rem;
	border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.part-detail-card>.form-row,
.part-detail-card>.pill-code-group,
.part-detail-card>.part-detail-images-docs,
.part-detail-card>.part-detail-sidebar-body {
	padding: 0 1.25rem;
}

.part-detail-card>.form-row:last-child {
	padding-bottom: 0;
}

.part-detail-card .form-field {
	margin-top: 0.85rem;
}


.part-detail-search {
	position: relative;
	margin: 0 1.25rem;
}

.part-detail-search svg {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	stroke-width: 2;
	color: var(--color-muted-foreground, #8b949e);
	pointer-events: none;
}

.part-detail-search input {
	width: 100%;
	background: var(--color-input-background, rgba(255, 255, 255, 0.04));
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	font-size: 0.85rem;
	padding: 0.55rem 0.75rem 0.55rem 2.25rem;
	color: var(--color-foreground, #fff);
}

.part-detail-search input::placeholder {
	color: var(--color-muted-foreground, #8b949e);
}

.part-detail-search input:focus {
	outline: none;
	border-color: var(--color-active);
	box-shadow: 0 0 0 1px var(--color-active);
}

.part-detail-search-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 220px;
	overflow-y: auto;
	background: rgb(22, 27, 34);
	border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
	border-radius: 0.375rem;
	z-index: 20;
	display: none;
}

.part-detail-search-results.show {
	display: block;
}

.part-detail-search-result-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.82rem;
	cursor: pointer;
	font-family: var(--font-mono);
}

.part-detail-search-result-item:hover {
	background: rgba(255, 255, 255, 0.06);
}

.part-detail-search-result-code {
	color: var(--color-cyan-400, #22d3ee);
	font-weight: 600;
	flex-shrink: 0;
}

.part-detail-search-result-desc {
	color: var(--color-foreground, #fff);
}

.part-detail-search-empty {
	padding: 0.6rem 0.75rem;
	font-size: 0.8rem;
	color: var(--color-muted-foreground, #8b949e);
}

.pill-code-label {
	color: #7dd3fc;
}

.pill-code-definition {
	color: #a0a0a0;
}

.pill-code-remove {
	margin-left: 0.25rem;
}

.part-detail-actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.btn-toolbar-secondary {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--color-foreground, #fff);
}

.btn-toolbar-secondary:hover {
	background: rgba(255, 255, 255, 0.06);
}

.hidden {
	display: none !important;
}

/* ===== Confirm Modal ===== */
.confirm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.confirm-modal {
	width: 360px;
	max-width: calc(100vw - 2rem);
	background: rgb(22, 27, 34);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0.5rem;
	overflow: hidden;
}

.confirm-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.9rem 1.1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.confirm-modal-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-foreground, #fff);
}

.confirm-modal-close {
	cursor: pointer;
	color: var(--color-muted-foreground, #8b949e);
	width: 16px;
	height: 16px;
}

.confirm-modal-body {
	padding: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--color-muted-foreground, #8b949e);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.confirm-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.6rem;
	padding: 0.8rem 1.1rem;
}

.confirm-modal-btn {
	padding: 0.5rem 0.9rem;
	border-radius: 0.375rem;
	font-size: 0.83rem;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-foreground, #fff);
}

.confirm-modal-btn-danger {
	background: var(--color-red-500, #ef4444);
	border-color: var(--color-red-500, #ef4444);
	color: #fff;
}

.dt-paging-button .page-link svg {
	width: 13px;
	height: 13px;
}

#modal label.__LinkedRecordField {
	display: block;
	margin-bottom: 1rem;
}

#modal label.__LinkedRecordField > .fieldLabelText {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #9ea7b1;
	font-family: var(--font-mono);
}

#modal label.__LinkedRecordField > br {
	display: none;
}

#modal label.__LinkedRecordField .btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-right: 0.5rem;
	border-color: #3b4651;
}

#modal label.__LinkedRecordField .btn:last-of-type {
	margin-right: 0;
}

#modal label.__LinkedRecordField .btn i {
	font-size: 0.8125rem;
	line-height: 1;
}

#modal label.__LinkedRecordField .btn .fa-chevron-right {
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	border-style: solid;
	border-color: currentColor;
	border-width: 0 0.14em 0.14em 0;
	transform: rotate(-45deg);
	margin-left: 0.05em;
}

#modal label.__LinkedRecordField .btn .fa-chevron-right::before {
	content: "";
}

#modal label.__LinkedRecordField .linkedRecordDisplay:not(:empty) {
	display: block;
	margin-top: 0.6rem;
	padding: 0.5rem 0.65rem;
	background: #272f37;
	border: 1px solid #3b4651;
	border-radius: 4px;
	font-size: 0.8125rem;
}

/* "Link Record" modal (#largeModal) */
#largeModal .modal-dialog {
	max-width: 900px;
}

#largeModal .modal-content {
	height: 85vh;
}

#largeModal .modal-body {
	padding: 16px 18px !important;
}

#largeModal .linkedRecordDisplay .wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 1rem;
	row-gap: 0.4rem;
}

#largeModal .linkedRecordDisplay .wrapper > .dt-scroll {
	flex: 1 1 100%;
	min-width: 0;
	margin-bottom: 0.6rem;
}

#largeModal .linkedRecordDisplay .wrapper > .dt-length {
	margin: 0;
	padding: 0 !important;
	flex: 0 0 auto;
}

#largeModal .linkedRecordDisplay .wrapper > .dt-info {
	margin: 0 auto 0 0;
	padding: 0 !important;
	flex: 0 1 auto;
}

#largeModal .linkedRecordDisplay .wrapper > .dt-paging {
	margin-left: auto;
	flex: 0 1 auto;
}

#largeModal .linkedRecordDisplay .wrapper > .dt-paging .pagination {
	margin: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
	row-gap: 0.25rem;
}

#largeModal .linkedRecordDisplay .wrapper > .dt-paging .page-link {
	padding: 0.3rem 0.6rem;
}

#largeModal .linkedRecordDisplay .dt-layout-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}

#largeModal .linkedRecordDisplay .dt-layout-row .dt-paging .pagination {
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
}

#largeModal .linkedRecordDisplay .dt-layout-end {
	margin-left: auto;
}

#largeModal .modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* columns here are auto-width, not fixed like Intake's, so keep icons flush right */
#largeModal .linkedRecordDisplay table.parts-table.dataTable thead th .th-inner {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

#searchDisplay .result dt {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--color-muted-foreground);
}

#searchDisplay .result dd {
	font-weight: normal;
	font-size: 0.875rem;
}

#searchDisplay .result dl {
	border-bottom: 1px solid var(--color-border);
}

#searchDisplay .result .dl {
	margin-top: .5rem;
}