* {
    box-sizing: border-box;
}

:root {
    --font-sans: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --color-page: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f8fafc;
    --color-surface-soft: #eef4ff;
    --color-text: #172033;
    --color-heading: #0b1220;
    --color-muted: #64748b;
    --color-subtle: #94a3b8;
    --color-border: #dbe3ef;
    --color-border-soft: #eef2f7;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #dbeafe;
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-success-soft: #d1fae5;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;
    --color-info: #0891b2;
    --color-info-soft: #cffafe;
    --color-sidebar: #0f172a;
    --color-sidebar-hover: #1e293b;
    --color-sidebar-active: #38bdf8;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --sidebar-width: 288px;
    --sidebar-rail-width: 72px;
    --topbar-height: 56px;
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.16);
    --font-regular: 400;
    --font-medium: 400;
    --font-bold: 700;
    --data-table-header-color: #5b687b;
}

body {
    margin: 0;
    background: var(--color-page);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

body.sidebar-scroll-locked {
    overflow: hidden;
}

a {
    color: var(--color-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

a:hover {
    color: var(--color-primary-dark);
}

:focus-visible {
    box-shadow: var(--focus-ring);
    outline: 0;
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-heading);
}

.btn {
    border-radius: var(--radius-sm);
    font-weight: var(--font-regular);
    letter-spacing: 0;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

b,
strong,
.fw-bold,
.fw-semibold {
    font-weight: var(--font-regular) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-regular);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
}

.btn-light {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-light:hover,
.btn-light:focus {
    background: #eef2f7;
    border-color: var(--color-subtle);
    color: var(--color-heading);
}

.btn-warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}

.btn-outline-primary {
    border-color: #bfdbfe;
    color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.btn-outline-secondary {
    border-color: var(--color-border);
    color: var(--color-muted);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--color-surface-muted);
    border-color: var(--color-subtle);
    color: var(--color-heading);
}

.btn-outline-success {
    border-color: #a7f3d0;
    color: var(--color-success-dark);
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--color-success-soft);
    border-color: var(--color-success);
    color: var(--color-success-dark);
}

.btn-outline-danger {
    border-color: #fecaca;
    color: var(--color-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--color-danger-soft);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.form-control,
.form-select {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 13px;
    min-height: 32px;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.form-label {
    color: var(--color-text);
    font-size: 12px;
    font-weight: var(--font-regular);
    margin-bottom: 6px;
}

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

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--color-surface-muted);
    color: var(--color-muted);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.invalid-feedback {
    color: var(--color-danger);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 5px;
}

.alert {
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.45;
}

.alert-danger {
    background: var(--color-danger-soft);
    border-color: #fecaca;
    color: #991b1b;
}

.alert-warning {
    background: var(--color-warning-soft);
    border-color: #fde68a;
    color: #92400e;
}

.alert-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
}

.form-group:has(:required) > label::after,
.form-group:has(:required) > .form-label::after {
    color: var(--color-danger);
    content: " *";
}

.auth-page {
    align-items: flex-start;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(5, 150, 105, 0.08)),
        var(--color-page);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(28px, 7vh, 88px) 16px 32px;
}

.auth-card,
.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.auth-card {
    box-shadow: var(--shadow-md);
    max-width: 430px;
    padding: 30px;
    width: 100%;
}

.auth-brand-mark {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border-soft);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    height: 56px;
    justify-content: center;
    margin-bottom: 18px;
    overflow: hidden;
    padding: 5px;
    width: 56px;
}

.auth-brand-mark img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.auth-header {
    margin-bottom: 24px;
}

.eyebrow {
    color: var(--color-success-dark);
    font-size: 12px;
    font-weight: var(--font-regular);
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.auth-header h1,
.panel h2 {
    color: var(--color-heading);
    margin: 0;
}

.auth-header h1 {
    font-size: 24px;
}

.auth-subtitle {
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
    margin: 8px 0 0;
}

.form-stack {
    display: grid;
    gap: 16px;
}

.auth-form {
    gap: 15px;
}

.auth-form .form-check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 0;
}

.auth-form .form-check-input {
    cursor: pointer;
    margin: 0;
}

.auth-form .form-check-label {
    color: var(--color-muted);
    cursor: pointer;
    font-size: 13px;
}

.auth-submit {
    min-height: 34px;
}

.auth-page-login {
    align-items: flex-start;
    background:
        radial-gradient(circle at 50% 24%, rgba(99, 158, 169, 0.34), transparent 34%),
        linear-gradient(135deg, #2f6f78 0%, #123f47 52%, #052d34 100%);
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(170px, 18vh, 205px) 16px 48px;
}

.auth-page-login::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.04)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40%, rgba(0, 0, 0, 0.12));
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
}

.auth-login-wordmark {
    align-items: center;
    display: flex;
    left: 50%;
    position: fixed;
    top: clamp(20px, 3.4vh, 34px);
    transform: translateX(-50%);
    z-index: 3;
}

.auth-login-wordmark img {
    display: block;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.24));
    height: auto;
    object-fit: contain;
    width: clamp(250px, 24vw, 360px);
}

.auth-card-login {
    background: rgba(9, 55, 62, 0.74);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(219, 238, 238, 0.32);
    border-radius: 10px;
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24);
    max-width: 620px;
    min-height: 0;
    margin-top: 30px;
    padding: 34px 56px 42px;
    position: relative;
    z-index: 1;
}

.auth-card-login .auth-brand-mark {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(213, 235, 235, 0.46);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 30px rgba(0, 0, 0, 0.18);
    height: 86px;
    margin: 0 auto 26px;
    padding: 10px;
    width: 86px;
}

.auth-card-login .auth-brand-mark img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
}

.auth-card-login .auth-header {
    display: none;
}

.auth-login-form {
    display: grid;
    gap: 0;
    margin: 0 auto;
    max-width: 476px;
}

.auth-login-label {
    color: rgba(239, 249, 249, 0.92);
    font-size: 12px;
}

.auth-login-field .input-group-text,
.auth-login-field .form-control {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
    min-height: 40px;
}

.auth-login-field .input-group-text {
    background-color: var(--color-surface-muted);
    border-right: 0;
    color: var(--color-muted);
    justify-content: center;
    min-width: 44px;
}

.auth-login-field .form-control {
    border-left: 0;
    font-size: 13px;
}

.auth-login-field .form-control::placeholder {
    color: var(--color-subtle);
}

.auth-login-field:focus-within .input-group-text,
.auth-login-field:focus-within .form-control {
    border-color: var(--color-primary);
}

.auth-login-field:focus-within .input-group-text {
    box-shadow: -3px 0 0 0 rgba(37, 99, 235, 0.10), 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.auth-login-field:has(.is-invalid) .input-group-text,
.auth-login-field:has(.is-invalid) .form-control {
    border-color: var(--color-danger);
}

.auth-login-error {
    color: #fecaca;
    font-size: 11px;
    margin-top: 5px;
}

.auth-login-options {
    color: rgba(218, 237, 238, 0.74);
    font-size: 12px;
    margin-top: 10px;
}

.auth-login-options .form-check-input {
    accent-color: #73aeb8;
    height: 12px;
    margin-top: 0.18em;
    width: 12px;
}

.auth-login-options .form-check-label {
    color: rgba(218, 237, 238, 0.74);
    font-size: 12px;
}

.auth-forgot-link {
    color: rgba(218, 237, 238, 0.78);
    font-style: italic;
    text-decoration: none;
}

.auth-forgot-link:hover {
    color: #ffffff;
}

.auth-login-submit {
    font-size: 13px;
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    min-height: 40px;
    text-transform: uppercase;
}

.auth-register-form {
    gap: 14px;
}

.form-group label {
    color: var(--color-text);
    display: block;
    font-weight: var(--font-regular);
    margin-bottom: 6px;
}

.form-group input:not(.form-control),
.form-group select:not(.form-select) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    display: block;
    font: inherit;
    padding: 10px 12px;
    width: 100%;
}

.form-group input:not(.form-control):focus,
.form-group select:not(.form-select):focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

.form-group input[readonly] {
    background: var(--color-surface-muted);
    color: var(--color-muted);
}

.form-actions,
.form-footer {
    align-items: center;
    border-top: 1px solid var(--color-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
}

.form-actions .btn,
.form-footer .btn {
    min-height: 32px;
}

.modal-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.modal-header {
    border-bottom-color: var(--color-border-soft);
    padding: 16px 18px;
}

.modal-title {
    color: var(--color-heading);
    font-size: 16px;
}

.modal-body {
    padding: 18px;
}

.modal-footer {
    align-items: center;
    border-top-color: var(--color-border-soft);
    gap: 8px;
    justify-content: flex-end;
    padding: 14px 18px;
}

.modal-footer .btn {
    min-height: 32px;
}

.modal-body .alert:last-child {
    margin-bottom: 0;
}

.form-group select[multiple] {
    min-height: 150px;
}

.form-group > .select2.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height: 32px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.js-select2.is-invalid + .select2-container--default .select2-selection--multiple,
.js-select2.is-invalid + .select2-container--default .select2-selection--single,
.js-select2.is-invalid ~ .select2-container--default .select2-selection--multiple,
.js-select2.is-invalid ~ .select2-container--default .select2-selection--single,
.was-validated .js-select2:invalid + .select2-container--default .select2-selection--multiple,
.was-validated .js-select2:invalid + .select2-container--default .select2-selection--single,
.was-validated .js-select2:invalid ~ .select2-container--default .select2-selection--multiple,
.was-validated .js-select2:invalid ~ .select2-container--default .select2-selection--single {
    border-color: var(--color-danger);
}

.js-select2.is-invalid + .select2-container--default.select2-container--focus .select2-selection--multiple,
.js-select2.is-invalid + .select2-container--default.select2-container--focus .select2-selection--single,
.js-select2.is-invalid ~ .select2-container--default.select2-container--focus .select2-selection--multiple,
.js-select2.is-invalid ~ .select2-container--default.select2-container--focus .select2-selection--single,
.was-validated .js-select2:invalid + .select2-container--default.select2-container--focus .select2-selection--multiple,
.was-validated .js-select2:invalid + .select2-container--default.select2-container--focus .select2-selection--single,
.was-validated .js-select2:invalid ~ .select2-container--default.select2-container--focus .select2-selection--multiple,
.was-validated .js-select2:invalid ~ .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.js-select2.is-invalid ~ .invalid-feedback,
.was-validated .js-select2:invalid ~ .invalid-feedback {
    display: block;
}

.select2-container--default .select2-selection--multiple {
    align-items: center;
    display: flex;
    min-height: 32px;
    padding: 2px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text);
    font-size: 13px;
    line-height: 30px;
    padding-left: 10px;
    padding-right: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-subtle);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px;
    right: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-primary-soft);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    color: var(--color-primary-dark);
    font-size: 12px;
    line-height: 1.2;
    margin: 0;
    padding: 3px 8px 3px 22px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #bfdbfe;
    color: var(--color-primary-dark);
    padding: 0 5px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-family: inherit;
    height: 24px;
    margin: 0;
}

.select2-dropdown {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.select2-container--default .select2-results__option {
    font-size: 13px;
    padding: 7px 10px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--color-primary);
}

.field-hint {
    color: var(--color-muted);
    font-size: 12px;
    margin: 7px 0 0;
}

.product-autocomplete-menu .dropdown-item,
.product-autocomplete-menu .dropdown-item-text,
.raw-material-autocomplete-menu .dropdown-item,
.raw-material-autocomplete-menu .dropdown-item-text,
.stock-adjustment-autocomplete-menu .dropdown-item,
.stock-adjustment-autocomplete-menu .dropdown-item-text {
    font-size: 12px;
    line-height: 1.3;
    padding: 7px 10px;
}

.product-autocomplete-menu,
.raw-material-autocomplete-menu,
.stock-adjustment-autocomplete-menu {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

.product-autocomplete-menu .dropdown-item:hover,
.product-autocomplete-menu .dropdown-item:focus,
.raw-material-autocomplete-menu .dropdown-item:hover,
.raw-material-autocomplete-menu .dropdown-item:focus,
.stock-adjustment-autocomplete-menu .dropdown-item:hover,
.stock-adjustment-autocomplete-menu .dropdown-item:focus {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.dropdown-menu {
    border-color: var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 6px;
}

.dropdown-item {
    border-radius: 5px;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.35;
    padding: 7px 9px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.autocomplete-loading {
    align-items: center;
    display: flex;
    gap: 7px;
}

.inline-spinner {
    animation: inlineSpinner 0.7s linear infinite;
    border: 2px solid rgba(13, 110, 253, 0.18);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    display: inline-block;
    flex: 0 0 auto;
    height: 13px;
    width: 13px;
}

.is-uom-loading [data-bom-uom-choice] + .select2-container {
    position: relative;
}

.is-uom-loading [data-bom-uom-choice] + .select2-container::after {
    animation: inlineSpinner 0.7s linear infinite;
    border: 2px solid rgba(13, 110, 253, 0.18);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    content: "";
    height: 14px;
    position: absolute;
    right: 28px;
    top: 9px;
    width: 14px;
}

@keyframes inlineSpinner {
    to {
        transform: rotate(360deg);
    }
}

.stock-summary {
    display: inline-block;
    line-height: 1.45;
    white-space: pre-line;
}

.category-tree-table .category-parent-row td {
    background: var(--color-surface-muted);
}

.category-child-name {
    display: inline-block;
    padding-left: 18px;
    position: relative;
}

.category-child-name::before {
    color: var(--color-subtle);
    content: "-";
    left: 0;
    position: absolute;
}

.check-row {
    align-items: center;
    color: var(--color-muted);
    display: flex;
    gap: 8px;
}

.form-note {
    color: var(--color-muted);
    margin: 0;
    text-align: center;
}

.form-note a {
    color: var(--color-primary);
    font-weight: var(--font-regular);
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    background: var(--color-sidebar);
    bottom: 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    left: 0;
    max-width: min(340px, 88vw);
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition: transform 0.24s ease, width 0.24s ease;
    width: min(340px, 88vw);
    z-index: 1050;
}

.brand {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 14px;
}

.brand a {
    text-decoration: none;
}

.brand-link {
    align-items: center;
    color: #ffffff;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.brand-link:hover {
    color: #ffffff;
}

.brand-mark {
    align-items: center;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(56, 189, 248, 0.18);
    display: inline-flex;
    flex: 0 0 auto;
    height: 44px;
    justify-content: center;
    overflow: hidden;
    padding: 4px;
    width: 44px;
}

.brand-mark img {
    display: block;
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.brand-wordmark {
    display: block;
    max-width: 220px;
    transition: opacity 0.18s ease, max-width 0.24s ease;
    width: 100%;
}

.brand-wordmark img {
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.24));
    height: auto;
    object-fit: contain;
    width: 100%;
}

.brand-copy {
    display: grid;
    min-width: 0;
}

.brand-name,
.brand-subtitle {
    display: block;
}

.brand-name {
    font-size: 18px;
    font-weight: var(--font-medium);
    line-height: 1.1;
}

.brand-subtitle {
    color: var(--color-sidebar-active);
    font-size: 11px;
    font-weight: var(--font-regular);
    letter-spacing: 0.08em;
    margin-top: 4px;
    text-transform: uppercase;
}

.sidebar-close {
    align-items: center;
    color: #cbd5e1;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.sidebar-close:hover,
.sidebar-close:focus {
    color: #ffffff;
}

.sidebar-nav {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: 6px;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 12px 18px;
    scrollbar-color: #334155 var(--color-sidebar);
    scrollbar-width: thin;
}

.sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: var(--color-sidebar);
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

.sidebar-group {
    align-self: start;
    min-width: 0;
}

.sidebar-direct-link {
    margin-bottom: 4px;
}

.sidebar-group-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: #a8b7cc;
    display: flex;
    font: inherit;
    font-size: 11px;
    font-weight: var(--font-regular);
    justify-content: space-between;
    letter-spacing: 0.06em;
    min-height: 28px;
    padding: 4px 10px;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.sidebar-group-label {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    min-width: 0;
}

.sidebar-group-icon,
.sidebar-link-icon {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: 0.86;
    text-align: center;
    width: 18px;
}

.sidebar-group-toggle:hover {
    background: rgba(148, 163, 184, 0.10);
    color: #e2e8f0;
}

.sidebar-group-toggle.is-active {
    background: rgba(56, 189, 248, 0.10);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.85);
    color: #e2f6ff;
}

.sidebar-group-caret {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.15s ease;
}

.sidebar-group-toggle[aria-expanded="true"] .sidebar-group-caret {
    transform: rotate(90deg);
}

.sidebar-submenu {
    display: grid;
    gap: 2px;
    padding: 4px 0 6px 12px;
}

.sidebar-submenu.show {
    display: grid;
}

.sidebar-report-group {
    min-width: 0;
}

.sidebar-report-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: #b9c7d8;
    display: flex;
    font: inherit;
    font-size: 12px;
    justify-content: space-between;
    min-height: 26px;
    padding: 4px 10px;
    text-align: left;
    width: 100%;
}

.sidebar-report-toggle:hover,
.sidebar-report-toggle.is-active {
    background: rgba(148, 163, 184, 0.10);
    color: #ffffff;
}

.sidebar-report-toggle[aria-expanded="true"] .sidebar-group-caret {
    transform: rotate(90deg);
}

.sidebar-report-submenu {
    display: grid;
    gap: 2px;
    padding: 2px 0 5px 10px;
}

.sidebar-report-submenu.show {
    display: grid;
}

.sidebar-report-submenu .nav-link {
    font-size: 12px;
}

.nav-link {
    align-items: center;
    border-radius: var(--radius-sm);
    color: #cbd5e1;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    font-size: 13px;
    font-weight: var(--font-regular);
    line-height: 1.25;
    min-height: 20px;
    padding: 4px 10px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.nav-link:hover {
    background: rgba(148, 163, 184, 0.10);
    color: #ffffff;
}

.nav-link.is-active {
    background: rgba(56, 189, 248, 0.14);
    box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.92);
    color: #ffffff;
    font-weight: var(--font-medium);
}

.nav-link.is-active .sidebar-link-icon {
    color: var(--color-sidebar-active);
    opacity: 1;
}

.nav-link.is-disabled {
    color: #64748b;
    cursor: not-allowed;
}

.nav-link.is-disabled:hover {
    background: transparent;
    color: #64748b;
}

.sidebar-footer {
    align-items: center;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px 16px;
}

.sidebar-user {
    display: grid;
    line-height: 1.2;
    min-width: 0;
}

.sidebar-user-label {
    color: var(--color-subtle);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sidebar-user strong {
    color: #ffffff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout-form {
    flex: 0 0 auto;
    margin: 0;
}

.sidebar-logout {
    align-items: center;
    background: rgba(15, 23, 42, 0.22);
    border-color: rgba(148, 163, 184, 0.32);
    color: #e2e8f0;
    display: inline-flex;
    gap: 7px;
}

.sidebar-logout:hover,
.sidebar-logout:focus {
    background: var(--color-sidebar-hover);
    border-color: rgba(56, 189, 248, 0.42);
    color: #ffffff;
}

.main-shell {
    min-height: 100vh;
    min-width: 0;
    transition: margin-left 0.24s ease;
}

.app-topbar {
    align-items: center;
    background: rgba(244, 247, 251, 0.92);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(10px);
    display: flex;
    gap: 12px;
    height: var(--topbar-height);
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 900;
}

.sidebar-toggle {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    display: inline-flex;
    justify-content: center;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus {
    background: var(--color-primary-soft);
    border-color: rgba(37, 99, 235, 0.22);
    color: var(--color-primary);
}

.app-topbar-title {
    color: var(--color-muted);
    font-size: 12px;
    font-weight: var(--font-regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-backdrop {
    background: rgba(15, 23, 42, 0.52);
    inset: 0;
    opacity: 0;
    position: fixed;
    transition: opacity 0.24s ease;
    z-index: 1040;
}

body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
}

body.sidebar-mobile-open .sidebar-backdrop {
    opacity: 1;
}

.page-content {
    padding: 24px 20px;
}

.page-actions {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
    min-width: 0;
}

.page-actions > div {
    min-width: 0;
}

.page-actions h2 {
    color: var(--color-heading);
    font-size: 24px;
    font-weight: var(--font-medium);
    margin: 4px 0 0;
}

.page-kicker {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: var(--font-regular);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.alert {
    border-radius: var(--radius-md);
    font-weight: var(--font-regular);
    margin-bottom: 18px;
    padding: 12px 14px;
}

.alert-success {
    background: var(--color-success-soft);
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.panel {
    padding: var(--space-5);
}

.panel-spaced {
    margin-top: var(--space-6);
}

.kpi-label {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: var(--font-regular);
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
}

.kpi-value {
    color: var(--color-heading);
    font-size: 28px;
    font-weight: var(--font-medium);
    line-height: 1;
    margin: 10px 0 0;
}

.kpi-context {
    color: var(--color-muted);
    font-size: 12px;
    line-height: 1.35;
    margin: 8px 0 0;
}

.dashboard-card {
    border-top: 4px solid var(--color-border);
}

.dashboard-kpi-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 118px;
    text-align: center;
}

.dashboard-kpi-card > div:not(.kpi-icon) {
    min-width: 0;
    width: 100%;
}

.kpi-icon {
    align-items: center;
    background: var(--color-surface-soft);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.kpi-icon i {
    font-size: 17px;
    line-height: 1;
}

.dashboard-card-production .kpi-icon {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.dashboard-card-work-order .kpi-icon {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.dashboard-card-finished .kpi-icon {
    background: #e0e7ff;
    color: #4338ca;
}

.dashboard-refresh-shell {
    position: relative;
}

.dashboard-stack {
    display: grid;
    gap: var(--space-6);
}

.dashboard-stack [data-dashboard-content] {
    display: grid;
    gap: var(--space-6);
}

.dashboard-section {
    margin: 0;
}

.dashboard-stack .panel-spaced {
    margin-top: 0;
}

.dashboard-panel {
    padding: 22px;
}

.dashboard-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    margin: -2px 0 16px;
    padding-bottom: 12px;
}

.dashboard-panel-header + .responsive-table,
.dashboard-panel-header + .detail-grid {
    margin-top: 0 !important;
}

.dashboard-panel .detail-item span,
.dashboard-panel .detail-item small {
    display: block;
    text-align: center;
}

.dashboard-refresh-shell.is-refreshing [data-dashboard-content] {
    opacity: 0.55;
    transition: opacity 0.18s ease;
}

.dashboard-skeleton {
    background: rgba(243, 244, 246, 0.74);
    border-radius: 8px;
    display: none;
    inset: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    z-index: 3;
}

.dashboard-refresh-shell.is-refreshing .dashboard-skeleton {
    display: block;
}

.dashboard-skeleton-kpis {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-skeleton-card,
.dashboard-skeleton-panel {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    padding: 20px;
}

.dashboard-skeleton-panel {
    margin-top: 24px;
}

.dashboard-skeleton-card::before,
.dashboard-skeleton-panel::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    content: "";
    height: 100%;
    left: -45%;
    position: absolute;
    top: 0;
    width: 45%;
}

.dashboard-skeleton-card,
.dashboard-skeleton-panel {
    position: relative;
}

.dashboard-refresh-shell.is-refreshing .dashboard-skeleton-card::before,
.dashboard-refresh-shell.is-refreshing .dashboard-skeleton-panel::before {
    animation: dashboardSkeletonSweep 1.2s ease-in-out infinite;
}

.dashboard-skeleton span,
.dashboard-skeleton strong,
.dashboard-skeleton i {
    background: #e5e7eb;
    border-radius: 999px;
    display: block;
}

.dashboard-skeleton span {
    height: 12px;
    width: 68%;
}

.dashboard-skeleton strong {
    height: 24px;
    margin-top: 14px;
    width: 40%;
}

.dashboard-skeleton i {
    height: 12px;
    margin-top: 14px;
}

.dashboard-skeleton i:nth-child(2) {
    width: 92%;
}

.dashboard-skeleton i:nth-child(3) {
    width: 76%;
}

.dashboard-skeleton i:nth-child(4) {
    width: 84%;
}

@keyframes dashboardSkeletonSweep {
    from {
        left: -45%;
    }

    to {
        left: 100%;
    }
}

.dashboard-card .section-title-sm,
.dashboard-card .kpi-label {
    position: relative;
}

.dashboard-card-production {
    border-top-color: var(--color-primary);
}

.dashboard-card-work-order {
    border-top-color: var(--color-warning);
}

.dashboard-card-costing {
    border-top-color: var(--color-success);
}

.dashboard-card-inventory {
    border-top-color: var(--color-info);
}

.dashboard-card-wip {
    border-top-color: #6f42c1;
}

.dashboard-card-finished {
    border-top-color: #4f46e5;
}

.dashboard-card-alerts {
    border-top-color: var(--color-danger);
}

.dashboard-table {
    table-layout: auto;
}

.dashboard-table th {
    background: var(--color-surface-muted);
    border-bottom-color: var(--color-border);
    color: var(--color-muted);
    font-size: 10px;
    letter-spacing: 0.07em;
}

.dashboard-table td {
    height: 42px;
}

.dashboard-table th:nth-child(n+3),
.dashboard-table td:nth-child(n+3) {
    white-space: nowrap;
}

.dashboard-table td[data-label="Qty"],
.dashboard-table td[data-label="Balance"],
.dashboard-table td[data-label="Raw Items"],
.dashboard-table td[data-label="Semi-Finished Qty"],
.dashboard-table td[data-label="Unit Cost"],
.dashboard-table td[data-label="Total Cost"] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.dashboard-table td[data-label="Actions"] {
    text-align: right;
}

.dashboard-table .empty-state {
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 13px;
}

.dashboard-table .dashboard-actions-column {
    width: 92px;
}

.planning-summary-shell {
    position: relative;
}

.planning-summary-shell.is-loading > .row {
    opacity: 0.45;
    transition: opacity 0.16s ease;
}

.panel-overlay-loader {
    align-items: center;
    background: rgba(248, 250, 252, 0.78);
    border-radius: var(--radius-md);
    display: none;
    inset: 0;
    justify-content: center;
    min-height: 180px;
    padding: 18px;
    pointer-events: none;
    position: absolute;
    z-index: 4;
}

.planning-summary-shell.is-loading .panel-overlay-loader {
    display: flex;
}

.panel-overlay-loader-box {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 320px;
    padding: 18px 22px;
    text-align: center;
}

.panel-overlay-loader-box strong {
    font-size: 13px;
}

.panel-overlay-loader-box small {
    color: var(--color-muted);
    font-size: 11px;
}

.panel-overlay-spinner {
    animation: panelOverlaySpin 0.75s linear infinite;
    border: 3px solid var(--color-primary-soft);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    height: 28px;
    width: 28px;
}

@keyframes panelOverlaySpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1199px) {
    .dashboard-skeleton-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .dashboard-skeleton-kpis {
        grid-template-columns: 1fr;
    }
}

.status-grid {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.status-grid p {
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    margin: 0;
    padding: 12px;
}

.filter-actions {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.report-filter-form {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-5) !important;
    padding: var(--space-4);
    width: 100%;
}

.report-filter-form > .form-group {
    flex: 1 1 180px;
    min-width: 0;
}

.report-filter-form > .form-group:has(select[name="per_page"]) {
    flex: 0 0 140px;
}

.report-filter-form > .col-md-auto,
.report-filter-form > .col-lg-auto,
.report-filter-form > .col-xl-auto {
    flex: 0 0 auto;
}

.report-filter-form .form-label {
    color: var(--color-muted);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-filter-form .form-control,
.report-filter-form .form-select,
.report-filter-form .select2-container--default .select2-selection--multiple,
.report-filter-form .select2-container--default .select2-selection--single {
    background: var(--color-surface);
}

.report-filter-form .filter-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-filter-form .filter-actions .btn {
    min-height: 31px;
}

.table-section {
    margin-top: 20px;
    position: relative;
    width: 100%;
}

.table-section.is-loading {
    opacity: 0.55;
}

.bulk-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.bulk-actions form {
    margin: 0;
}

.bulk-select-all {
    align-items: center;
    color: var(--color-text);
    display: inline-flex;
    font-size: 12px;
    font-weight: var(--font-regular);
    gap: 6px;
}

.responsive-table {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    overflow: auto;
    scrollbar-color: var(--color-border) transparent;
    scrollbar-width: thin;
    width: 100%;
}

.responsive-table::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.responsive-table::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 999px;
}

.data-table {
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 0;
    width: 100%;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--color-border-soft);
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    background: var(--color-surface-muted);
    color: var(--data-table-header-color);
    font-size: 11px;
    font-weight: var(--font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.data-table td {
    color: var(--color-text);
    line-height: 1.35;
}

.data-table tbody tr {
    transition: background-color 0.14s ease;
}

.data-table tbody tr:hover {
    background: var(--color-surface-muted);
}

.data-table td[data-label*="Qty"],
.data-table td[data-label*="Quantity"],
.data-table td[data-label*="Balance"],
.data-table td[data-label*="Cost"],
.data-table td[data-label*="Rate"],
.data-table td[data-label*="Debit"],
.data-table td[data-label*="Credit"],
.data-table td[data-label*="Total"],
.data-table td[data-label*="Value"],
.data-table td[data-label*="Amount"] {
    font-variant-numeric: tabular-nums;
}

.responsive-table + .pagination-wrap,
.table-section .pagination-wrap {
    border-top: 0;
}

.actions-column {
    width: 210px;
}

.products-management-table {
    table-layout: fixed;
    width: 100%;
}

.products-management-table .product-select-col {
    width: 38px;
}

.products-management-table .product-serial-col {
    width: 54px;
}

.products-management-table .product-sku-col {
    width: 92px;
}

.products-management-table .product-name-col {
    width: 160px;
}

.products-management-table .product-category-col {
    width: auto;
}

.products-management-table .product-size-col {
    width: 78px;
}

.products-management-table .product-color-col {
    width: 88px;
}

.products-management-table .product-price-col,
.products-management-table .product-cost-col {
    width: 76px;
}

.products-management-table .product-warehouse-col {
    width: 150px;
}

.products-management-table .product-stock-col {
    width: 80px;
}

.products-management-table .product-actions-col {
    width: 126px;
}

.products-management-table th,
.products-management-table td {
    overflow-wrap: anywhere;
}

.products-management-table td[data-label="Name"] {
    font-weight: var(--font-medium);
}

.product-master-table {
    table-layout: fixed;
    width: 100%;
}

.product-master-table .product-master-name-col {
    width: auto;
}

.product-master-table .product-master-count-col {
    width: 150px;
}

.product-master-table .product-master-actions-col {
    width: 126px;
}

.product-master-table td[data-label="Name"] {
    font-weight: var(--font-medium);
}

.raw-material-master-table,
.category-tree-table,
.uom-master-table {
    table-layout: fixed;
    width: 100%;
}

.raw-material-master-table .raw-material-serial-col {
    width: 54px;
}

.raw-material-master-table .raw-material-name-col {
    width: auto;
}

.raw-material-master-table .raw-material-category-col {
    width: 220px;
}

.raw-material-master-table .raw-material-unit-col {
    width: 86px;
}

.raw-material-master-table .raw-material-stock-col,
.raw-material-master-table .raw-material-cost-col {
    width: 116px;
}

.raw-material-master-table .raw-material-actions-col {
    width: 86px;
}

.category-tree-table .raw-material-category-title-col {
    width: auto;
}

.category-tree-table .raw-material-category-count-col {
    width: 150px;
}

.category-tree-table .raw-material-category-actions-col {
    width: 126px;
}

.uom-master-table .uom-name-col {
    width: 220px;
}

.uom-master-table .uom-conversion-col {
    width: auto;
}

.uom-master-table .uom-count-col {
    width: 150px;
}

.uom-master-table .uom-actions-col {
    width: 126px;
}

.raw-material-master-table td[data-label="Name"],
.category-tree-table td[data-label="Title"],
.uom-master-table td[data-label="Unit"] {
    font-weight: var(--font-medium);
}

.raw-material-master-table th,
.raw-material-master-table td,
.category-tree-table th,
.category-tree-table td,
.uom-master-table th,
.uom-master-table td {
    overflow-wrap: anywhere;
}

.stock-adjustments-list-table,
.warehouses-list-table,
.parties-list-table,
.chart-accounts-list-table,
.fiscal-years-list-table,
.journal-vouchers-list-table {
    table-layout: fixed;
    width: 100%;
}

.bank-cash-accounts-list-table,
.bank-cash-vouchers-list-table,
.bom-groups-list-table,
.processes-list-table,
.additional-charges-list-table,
.contractors-list-table,
.process-routings-list-table,
.production-orders-list-table {
    table-layout: fixed;
    width: 100%;
}

.stock-adjustments-list-table .stock-adjustment-number-col {
    width: 118px;
}

.stock-adjustments-list-table .stock-adjustment-date-list-col,
.stock-adjustments-list-table .stock-adjustment-created-col {
    width: 104px;
}

.stock-adjustments-list-table .stock-adjustment-reason-col {
    width: auto;
}

.stock-adjustments-list-table .stock-adjustment-items-col {
    width: 76px;
}

.stock-adjustments-list-table .stock-adjustment-user-col {
    width: 140px;
}

.stock-adjustments-list-table .stock-adjustment-actions-list-col {
    width: 82px;
}

.warehouses-list-table .warehouse-name-col,
.warehouses-list-table .warehouse-location-col {
    width: auto;
}

.warehouses-list-table .warehouse-type-col {
    width: 170px;
}

.warehouses-list-table .warehouse-status-col {
    width: 92px;
}

.warehouses-list-table .warehouse-ledger-col {
    width: 120px;
}

.warehouses-list-table .warehouse-actions-col {
    width: 126px;
}

.parties-list-table .party-name-col {
    width: auto;
}

.parties-list-table .party-contact-col {
    width: 170px;
}

.parties-list-table .party-phone-col {
    width: 130px;
}

.parties-list-table .party-email-col {
    width: 220px;
}

.parties-list-table .party-balance-col {
    width: 135px;
}

.parties-list-table .party-status-col {
    width: 100px;
}

.parties-list-table .party-actions-col {
    width: 126px;
}

.chart-accounts-list-table .coa-code-col {
    width: 116px;
}

.chart-accounts-list-table .coa-name-col {
    width: auto;
}

.chart-accounts-list-table .coa-parent-col {
    width: 220px;
}

.chart-accounts-list-table .coa-group-col {
    width: 130px;
}

.chart-accounts-list-table .coa-balance-col {
    width: 128px;
}

.chart-accounts-list-table .coa-posting-col,
.chart-accounts-list-table .coa-status-col {
    width: 100px;
}

.chart-accounts-list-table .coa-actions-col {
    width: 126px;
}

.fiscal-years-list-table .fiscal-year-name-col {
    width: auto;
}

.fiscal-years-list-table .fiscal-year-date-col {
    width: 118px;
}

.fiscal-years-list-table .fiscal-year-periods-col,
.fiscal-years-list-table .fiscal-year-current-col,
.fiscal-years-list-table .fiscal-year-status-col {
    width: 92px;
}

.fiscal-years-list-table .fiscal-year-actions-col {
    width: 126px;
}

.journal-vouchers-list-table .journal-voucher-number-col {
    width: 118px;
}

.journal-vouchers-list-table .journal-voucher-date-col {
    width: 104px;
}

.journal-vouchers-list-table .journal-voucher-type-col {
    width: 126px;
}

.journal-vouchers-list-table .journal-voucher-reference-col {
    width: auto;
}

.journal-vouchers-list-table .journal-voucher-amount-col {
    width: 110px;
}

.journal-vouchers-list-table .journal-voucher-status-col {
    width: 100px;
}

.journal-vouchers-list-table .journal-voucher-lines-col {
    width: 70px;
}

.journal-vouchers-list-table .journal-voucher-actions-col {
    width: 86px;
}

.bank-cash-accounts-list-table .bank-cash-account-name-col {
    width: 150px;
}

.bank-cash-accounts-list-table .bank-cash-account-gl-col {
    width: 190px;
}

.bank-cash-accounts-list-table .bank-cash-account-type-col {
    width: 92px;
}

.bank-cash-accounts-list-table .bank-cash-account-bank-col,
.bank-cash-accounts-list-table .bank-cash-account-number-col {
    width: 150px;
}

.bank-cash-accounts-list-table .bank-cash-account-balance-col {
    width: 130px;
}

.bank-cash-accounts-list-table .bank-cash-account-status-col {
    width: 100px;
}

.bank-cash-accounts-list-table .bank-cash-account-actions-col {
    width: 126px;
}

.bank-cash-accounts-list-table {
    min-width: 1160px;
}

.bank-cash-accounts-list-table th {
    white-space: nowrap;
}

.in-process-wip-table {
    min-width: 1500px;
}

.in-process-wip-table .in-process-wip-item-col {
    width: 280px;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-date-col {
    width: 104px;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-number-col {
    width: 122px;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-type-col {
    width: 128px;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-account-col {
    width: auto;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-amount-col {
    width: 118px;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-status-col {
    width: 108px;
}

.bank-cash-vouchers-list-table .bank-cash-voucher-actions-col {
    width: 72px;
}

.bom-groups-list-table .bom-group-number-col {
    width: 104px;
}

.bom-groups-list-table .bom-group-product-col {
    width: auto;
}

.bom-groups-list-table .bom-group-category-col {
    width: 170px;
}

.bom-groups-list-table .bom-group-size-col,
.bom-groups-list-table .bom-group-count-col {
    width: 78px;
}

.bom-groups-list-table .bom-group-actions-col {
    width: 126px;
}

.processes-list-table .process-name-col {
    width: auto;
}

.processes-list-table .process-sequence-col,
.processes-list-table .process-status-col {
    width: 92px;
}

.processes-list-table .process-count-col {
    width: 112px;
}

.processes-list-table .process-actions-col {
    width: 126px;
}

.additional-charges-list-table .additional-charge-name-col {
    width: auto;
}

.additional-charges-list-table .additional-charge-code-col,
.additional-charges-list-table .additional-charge-status-col,
.additional-charges-list-table .additional-charge-count-col {
    width: 110px;
}

.additional-charges-list-table .additional-charge-actions-col {
    width: 126px;
}

.contractors-list-table .contractor-name-col {
    width: auto;
}

.contractors-list-table .contractor-contact-col {
    width: 170px;
}

.contractors-list-table .contractor-phone-col {
    width: 130px;
}

.contractors-list-table .contractor-email-col {
    width: 220px;
}

.contractors-list-table .contractor-status-col {
    width: 100px;
}

.contractors-list-table .contractor-count-col {
    width: 104px;
}

.contractors-list-table .contractor-actions-col {
    width: 126px;
}

.process-routings-list-table .process-routing-number-col {
    width: 112px;
}

.process-routings-list-table .process-routing-product-col {
    width: auto;
}

.process-routings-list-table .process-routing-category-col {
    width: 180px;
}

.process-routings-list-table .process-routing-steps-col,
.process-routings-list-table .process-routing-status-col {
    width: 92px;
}

.process-routings-list-table .process-routing-actions-col {
    width: 126px;
}

.production-orders-list-table .production-order-number-col {
    width: 120px;
}

.production-orders-list-table .production-order-product-col {
    width: auto;
}

.production-orders-list-table .production-order-qty-col {
    width: 88px;
}

.production-orders-list-table .production-order-bom-col,
.production-orders-list-table .production-order-routing-col {
    width: 118px;
}

.production-orders-list-table .production-order-stage-col {
    width: 150px;
}

.production-orders-list-table .production-order-status-col {
    width: 104px;
}

.production-orders-list-table .production-order-created-col {
    width: 108px;
}

.production-orders-list-table .production-order-actions-col {
    width: 160px;
}

.stock-adjustments-list-table th,
.stock-adjustments-list-table td,
.warehouses-list-table th,
.warehouses-list-table td,
.parties-list-table th,
.parties-list-table td,
.chart-accounts-list-table th,
.chart-accounts-list-table td,
.fiscal-years-list-table th,
.fiscal-years-list-table td,
.journal-vouchers-list-table th,
.journal-vouchers-list-table td,
.bank-cash-accounts-list-table th,
.bank-cash-accounts-list-table td,
.bank-cash-vouchers-list-table th,
.bank-cash-vouchers-list-table td,
.bom-groups-list-table th,
.bom-groups-list-table td,
.processes-list-table th,
.processes-list-table td,
.additional-charges-list-table th,
.additional-charges-list-table td,
.contractors-list-table th,
.contractors-list-table td,
.process-routings-list-table th,
.process-routings-list-table td,
.production-orders-list-table th,
.production-orders-list-table td {
    overflow-wrap: anywhere;
}

.stock-adjustments-list-table td[data-label="Reason"],
.warehouses-list-table td[data-label="Name"],
.parties-list-table td[data-label="Name"],
.chart-accounts-list-table td[data-label="Account Name"],
.fiscal-years-list-table td[data-label="Name"],
.journal-vouchers-list-table td[data-label="Reference"],
.bank-cash-accounts-list-table td[data-label="Account Name"],
.bank-cash-vouchers-list-table td[data-label="Source"],
.bank-cash-vouchers-list-table td[data-label="Destination"],
.bom-groups-list-table td[data-label="Base Product"],
.processes-list-table td[data-label="Name"],
.additional-charges-list-table td[data-label="Name"],
.contractors-list-table td[data-label="Name"],
.process-routings-list-table td[data-label="Base Product"],
.production-orders-list-table td[data-label="Product"] {
    font-weight: var(--font-medium);
}

.party-ledger-table {
    table-layout: fixed;
    width: 100%;
}

.party-ledger-table .party-ledger-date-col {
    width: 104px;
}

.party-ledger-table .party-ledger-type-col {
    width: 140px;
}

.party-ledger-table .party-ledger-description-col,
.party-ledger-table .party-ledger-reference-col {
    width: auto;
}

.party-ledger-table .party-ledger-qty-col {
    width: 82px;
}

.party-ledger-table .party-ledger-amount-col,
.party-ledger-table .party-ledger-balance-col {
    width: 118px;
}

.party-ledger-table .party-ledger-drcr-col {
    width: 64px;
}

.party-ledger-table th,
.party-ledger-table td {
    overflow-wrap: anywhere;
}

.party-ledger-table td[data-label="Description"],
.party-ledger-table td[data-label="Reference"] {
    font-weight: var(--font-medium);
}

.work-order-actions-column {
    width: 72px;
}

.production-order-report-table {
    table-layout: fixed;
}

.production-order-report-table .po-col {
    width: 85px;
}

.production-order-report-table .product-col {
    width: 260px;
}

.production-order-report-table .qty-col,
.production-order-report-table .received-col {
    width: 72px;
}

.production-order-report-table .bom-col {
    width: 95px;
}

.production-order-report-table .stage-col {
    width: 230px;
}

.production-order-report-table .status-col {
    width: 95px;
}

.production-order-report-table .created-col {
    width: 105px;
}

.purchase-report-table {
    table-layout: fixed;
    width: 100%;
}

.purchase-report-table .purchase-report-date-col {
    width: 106px;
}

.purchase-report-table .purchase-report-number-col {
    width: 126px;
}

.purchase-report-table .purchase-report-party-col,
.purchase-report-table .purchase-report-item-col {
    width: auto;
}

.purchase-report-table .purchase-report-warehouse-col {
    width: 180px;
}

.purchase-report-table .purchase-report-status-col {
    width: 108px;
}

.purchase-report-table .purchase-report-count-col,
.purchase-report-table .purchase-report-unit-col {
    width: 84px;
}

.purchase-report-table .purchase-report-type-col {
    width: 150px;
}

.purchase-report-table .purchase-report-qty-col,
.purchase-report-table .purchase-report-amount-col {
    width: 118px;
}

.purchase-report-table th,
.purchase-report-table td {
    overflow-wrap: anywhere;
}

.purchase-report-table td[data-label="Supplier"],
.purchase-report-table td[data-label="Warehouse"],
.purchase-report-table td[data-label="Item Name"] {
    font-weight: var(--font-medium);
}

.purchase-item-summary-table .purchase-report-date-col {
    width: 96px;
}

.purchase-item-summary-table .purchase-report-number-col {
    width: 104px;
}

.purchase-item-summary-table .purchase-report-party-col {
    width: 140px;
}

.purchase-item-summary-table .purchase-report-warehouse-col {
    width: 120px;
}

.purchase-item-summary-table .purchase-report-type-col {
    width: 122px;
}

.purchase-item-summary-table .purchase-report-item-col {
    width: 132px;
}

.purchase-item-summary-table .purchase-report-unit-col {
    width: 62px;
}

.purchase-item-summary-table .purchase-report-qty-col {
    width: 84px;
}

.purchase-item-summary-table .purchase-report-amount-col {
    width: 83px;
}

.sale-report-table {
    table-layout: fixed;
    width: 100%;
}

.sale-report-table .sale-report-date-col {
    width: 106px;
}

.sale-report-table .sale-report-number-col {
    width: 126px;
}

.sale-report-table .sale-report-party-col,
.sale-report-table .sale-report-item-col {
    width: auto;
}

.sale-report-table .sale-report-warehouse-col {
    width: 180px;
}

.sale-report-table .sale-report-status-col {
    width: 108px;
}

.sale-report-table .sale-report-count-col,
.sale-report-table .sale-report-unit-col {
    width: 84px;
}

.sale-report-table .sale-report-type-col {
    width: 150px;
}

.sale-report-table .sale-report-qty-col,
.sale-report-table .sale-report-amount-col {
    width: 118px;
}

.sale-report-table th,
.sale-report-table td {
    overflow-wrap: anywhere;
}

.sale-report-table td[data-label="Customer"],
.sale-report-table td[data-label="Warehouse"],
.sale-report-table td[data-label="Item Name"] {
    font-weight: var(--font-medium);
}

.sale-item-summary-table .sale-report-date-col {
    width: 96px;
}

.sale-item-summary-table .sale-report-number-col {
    width: 104px;
}

.sale-item-summary-table .sale-report-item-col {
    width: 132px;
}

.sale-item-summary-table .sale-report-party-col {
    width: 140px;
}

.sale-item-summary-table .sale-report-warehouse-col {
    width: 120px;
}

.sale-item-summary-table .sale-report-type-col {
    width: 122px;
}

.sale-item-summary-table .sale-report-unit-col {
    width: 62px;
}

.sale-item-summary-table .sale-report-qty-col {
    width: 84px;
}

.sale-item-summary-table .sale-report-amount-col {
    width: 83px;
}

.stock-adjustment-card {
    max-width: none;
}

.stock-adjustment-meta {
    border-bottom: 1px solid var(--color-border-soft);
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.stock-adjustment-table {
    min-width: 1040px;
    table-layout: fixed;
}

.stock-adjustment-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 160px;
}

.stock-adjustment-table td {
    background: var(--color-surface);
    overflow: visible;
}

.stock-adjustment-table .form-control,
.stock-adjustment-table .form-select,
.stock-adjustment-table .select2-container--default .select2-selection--single {
    min-height: 30px;
}

.stock-adjustment-type-col {
    width: 145px;
}

.stock-adjustment-warehouse-col {
    width: 220px;
}

.stock-adjustment-item-col {
    width: 360px;
}

.stock-adjustment-unit-col {
    width: 80px;
}

.stock-adjustment-direction-col {
    width: 120px;
}

.stock-adjustment-qty-col {
    width: 92px;
}

.stock-adjustment-action-col {
    text-align: center;
    width: 64px;
}

.stock-adjustment-table td[data-label="Action"] {
    text-align: center;
}

.stock-adjustment-unit {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    display: block;
    min-height: 31px;
    padding: 6px 8px;
}

.record-form .responsive-table {
    margin-top: 14px;
}

.record-form .data-table .form-control,
.record-form .data-table .form-select {
    min-height: 30px;
}

.record-form .data-table td {
    background: var(--color-surface);
}

.purchase-form-header {
    align-items: start;
}

.purchase-items-section {
    margin-top: 24px;
}

.purchase-items-section .responsive-table {
    margin-top: 10px;
}

.purchase-items-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 8px;
}

.purchase-items-table-wrap:focus-within {
    padding-bottom: 170px;
}

.purchase-items-table {
    min-width: 1180px;
    table-layout: fixed;
}

.purchase-items-table td {
    overflow: visible;
}

.purchase-items-table .purchase-item-type-column {
    width: 130px;
}

.purchase-items-table .sale-item-type-column {
    width: 170px;
}

.purchase-items-table .purchase-item-name-column {
    width: 28%;
}

.purchase-items-table .sale-item-name-column {
    width: 42%;
}

.purchase-items-table .purchase-item-unit-column {
    width: 86px;
}

.purchase-items-table .sale-item-available-column {
    width: 92px;
}

.purchase-items-table .purchase-item-qty-column,
.purchase-items-table .purchase-item-rate-column {
    width: 98px;
}

.purchase-items-table .purchase-item-tax-column {
    width: 82px;
}

.purchase-items-table .purchase-item-discount-column {
    width: 116px;
}

.purchase-items-table .purchase-item-total-column {
    width: 96px;
}

.purchase-items-table .purchase-item-notes-column {
    width: 20%;
}

.purchase-items-table .purchase-item-action-column {
    width: 72px;
}

.purchase-items-table td[data-label="Action"],
.purchase-items-table th.actions-column {
    text-align: center;
}

.purchase-item-autocomplete-menu {
    min-width: 280px;
    z-index: 1200;
}

.purchase-item-search:focus-within {
    z-index: 1200;
}

.purchase-line-total {
    display: block;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sale-availability-label {
    color: var(--color-muted);
    display: block;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.sale-availability-label.is-short {
    color: var(--color-danger);
    font-weight: var(--font-medium);
}

.purchase-totals {
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    margin-left: auto;
    margin-top: 12px;
    max-width: 360px;
    overflow: hidden;
    width: min(100%, 360px);
}

.purchase-totals div {
    align-items: center;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 11px 14px;
}

.purchase-totals div:last-child {
    border-bottom: 0;
}

.purchase-totals span {
    color: var(--color-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.purchase-totals strong {
    color: var(--color-heading);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-medium);
    min-width: 120px;
    text-align: right;
}

.record-form .alert {
    margin-top: 14px;
}

.stock-adjustment-autocomplete-menu {
    max-height: 240px;
    overflow-y: auto;
    z-index: 1080;
}

.stock-adjustment-autocomplete-menu .dropdown-item,
.stock-adjustment-autocomplete-menu .dropdown-item-text {
    white-space: normal;
}

.checkbox-column {
    text-align: center;
    width: 38px;
}

.serial-column {
    width: 54px;
}

.data-table input[type="checkbox"] {
    height: 14px;
    margin: 0;
    width: 14px;
}

.records-filter {
    align-items: end;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.records-filter .form-label {
    margin-bottom: 0;
}

.records-filter .form-select {
    width: auto;
}

.table-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.table-actions .btn {
    white-space: nowrap;
}

.work-orders-table td[data-label="Actions"] .table-actions {
    justify-content: flex-end;
}

.table-actions form {
    margin: 0;
}

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

.actions-dropdown-menu {
    min-width: 160px;
}

.actions-dropdown-menu .dropdown-item {
    align-items: center;
    display: flex;
    font-size: 12px;
    gap: 8px;
}

.actions-dropdown-menu .dropdown-item i {
    text-align: center;
    width: 14px;
}

.empty-state {
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.45;
    padding: 22px 12px;
    text-align: center;
}

.badge {
    border-radius: 999px;
    font-size: 11px;
    font-weight: var(--font-regular);
    letter-spacing: 0;
    line-height: 1;
    padding: 5px 8px;
}

.text-bg-light {
    background: var(--color-surface-muted) !important;
    color: var(--color-text) !important;
}

.text-bg-info {
    background: var(--color-info-soft) !important;
    color: #155e75 !important;
}

.text-bg-warning {
    background: var(--color-warning-soft) !important;
    color: #92400e !important;
}

.text-bg-success {
    background: var(--color-success-soft) !important;
    color: var(--color-success-dark) !important;
}

.text-bg-danger {
    background: var(--color-danger-soft) !important;
    color: var(--color-danger) !important;
}

.text-bg-secondary {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

.record-form {
    max-width: 960px;
}

.record-form.purchase-record-form {
    max-width: none;
    width: 100%;
}

.record-form.purchase-return-form,
.record-form.sale-return-form {
    max-width: none;
    width: 100%;
}

.product-tabs {
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 1px;
    white-space: nowrap;
}

.product-tabs .nav-link {
    background: transparent;
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--font-regular);
    padding: 8px 12px;
}

.product-tabs .nav-link:hover {
    background: var(--color-surface-muted);
    color: var(--color-primary);
}

.product-tabs .nav-link.active {
    background: var(--color-primary-soft);
    border-color: transparent;
    color: var(--color-primary);
}

.product-tab-content {
    border-top: 1px solid var(--color-border-soft);
    margin-top: 8px;
    padding-top: 16px;
}

.detail-grid {
    display: grid;
    gap: 10px;
}

.detail-item {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.detail-item span {
    color: var(--color-muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.detail-item strong {
    color: var(--color-heading);
    display: block;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    text-align: center;
    font-weight: 700 !important;
}

.status-badge {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    display: inline-flex;
    font-size: 11px;
    font-weight: var(--font-regular);
    gap: 6px;
    letter-spacing: 0.03em;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-badge::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 6px;
    width: 6px;
}

.status-badge-planned,
.status-badge-pending,
.status-badge-draft {
    background: var(--color-warning-soft);
    border-color: #fde68a;
    color: #92400e;
}

.status-badge-posted {
    background: var(--color-success-soft);
    border-color: #a7f3d0;
    color: var(--color-success-dark);
}

.status-badge-in-process {
    background: var(--color-primary-soft);
    border-color: #bfdbfe;
    color: var(--color-primary-dark);
}

.status-badge-completed {
    background: var(--color-success-soft);
    border-color: #a7f3d0;
    color: var(--color-success-dark);
}

.status-badge-cancelled {
    background: var(--color-danger-soft);
    border-color: #fecaca;
    color: var(--color-danger);
}

.status-badge-reversed {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #4b5563;
}

.section-title-sm {
    color: var(--color-heading);
    font-size: 14px;
    font-weight: var(--font-medium);
    margin: 0;
}

.section-title {
    color: var(--color-heading);
    font-size: 15px;
    font-weight: var(--font-medium);
    line-height: 1.35;
}

.conversion-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.conversion-list span {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    display: inline-flex;
    font-size: 12px;
    padding: 4px 7px;
}

.variant-summary {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 16px;
    padding: 12px 14px;
}

.variant-preview-table-wrap {
    margin-top: 10px;
}

.variant-preview-table {
    min-width: 620px;
}

.variant-preview-table td {
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    min-width: 124px;
    padding: 6px 8px;
    vertical-align: top;
}

.variant-preview-table td:empty::after {
    content: "\00a0";
}

.bom-form {
    max-width: none;
}

.uom-form {
    max-width: none;
}

.uom-conversion-section {
    margin-top: 28px;
}

.uom-conversion-list {
    display: grid;
    gap: 10px;
}

.uom-conversion-row {
    align-items: end;
    border-bottom: 1px solid var(--color-border-soft);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1fr) minmax(220px, 1fr) auto;
    padding-bottom: 10px;
}

.uom-conversion-row .form-label {
    color: var(--color-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.uom-conversion-actions {
    padding-bottom: 1px;
}

.bom-entry-table {
    min-width: 1180px;
}

.bom-entry-table th {
    background: var(--color-surface-muted);
    color: var(--color-muted);
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 8px 10px;
    text-transform: uppercase;
}

.bom-entry-table td {
    border-color: var(--color-border-soft);
    padding: 8px 10px;
    vertical-align: top;
}

.bom-entry-table .select2-container {
    min-width: 150px;
}

.bom-material-entry-table {
    min-width: 1370px;
    table-layout: fixed;
}

.bom-material-entry-table th:nth-child(1),
.bom-material-entry-table td:nth-child(1) {
    width: 110px;
}

.bom-material-entry-table th:nth-child(2),
.bom-material-entry-table td:nth-child(2) {
    width: 150px;
}

.bom-material-entry-table th:nth-child(3),
.bom-material-entry-table td:nth-child(3) {
    width: 300px;
}

.bom-material-entry-table th:nth-child(4),
.bom-material-entry-table td:nth-child(4) {
    width: 86px;
}

.bom-material-entry-table th:nth-child(5),
.bom-material-entry-table td:nth-child(5) {
    width: 170px;
}

.bom-material-entry-table th:nth-child(6),
.bom-material-entry-table td:nth-child(6) {
    width: 120px;
}

.bom-material-entry-table th:nth-child(7),
.bom-material-entry-table td:nth-child(7) {
    width: 170px;
}

.bom-material-entry-table th:nth-child(8),
.bom-material-entry-table td:nth-child(8) {
    width: 170px;
}

.bom-material-entry-table th:nth-child(9),
.bom-material-entry-table td:nth-child(9) {
    width: 86px;
}

.bom-material-entry-table input[type="number"] {
    min-width: 0;
}

.tab-pane > .btn[data-add-bom-material],
.tab-pane > .btn[data-add-bom-wip],
.tab-pane > .btn[data-add-bom-charge] {
    margin-top: 12px;
}

.product-cost-header {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.product-cost-header h3 {
    color: var(--color-heading);
    font-size: 18px;
    font-weight: var(--font-medium);
    margin: 0;
}

.product-cost-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.product-cost-summary span,
.bom-cost-total {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 12px;
    padding: 6px 8px;
}

.bom-cost-total {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.bom-cost-total strong {
    color: var(--color-success-dark);
    font-size: 18px;
}

.routing-form {
    max-width: none;
}

.production-issue-form {
    max-width: none;
}

.routing-step-section {
    margin-top: 22px;
}

.routing-step-header {
    color: var(--color-muted);
    display: grid;
    font-size: 11px;
    font-weight: var(--font-regular);
    gap: 10px;
    grid-template-columns: minmax(260px, 1.3fr) 110px minmax(260px, 1fr) auto;
    letter-spacing: 0.06em;
    margin-bottom: 7px;
    padding: 0 10px;
    text-transform: uppercase;
}

.routing-step-list {
    display: grid;
    gap: 10px;
}

.routing-step-row {
    align-items: end;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-sm);
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(260px, 1.3fr) 110px minmax(260px, 1fr) auto;
    padding: 10px;
}

.routing-step-actions {
    padding-bottom: 1px;
}

.pagination-wrap {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    overflow-x: auto;
    padding-top: 2px;
}

.pagination-wrap .pagination {
    gap: 4px;
    min-width: max-content;
}

.pagination-wrap .page-link {
    align-items: center;
    border-color: var(--color-border);
    border-radius: 7px;
    color: var(--color-muted);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: var(--font-regular);
    justify-content: center;
    min-height: 32px;
    min-width: 32px;
    padding: 5px 10px;
}

.pagination-wrap .page-link:hover,
.pagination-wrap .page-link:focus {
    background: var(--color-primary-soft);
    border-color: rgba(31, 92, 104, 0.22);
    color: var(--color-primary);
    box-shadow: none;
}

.pagination-wrap .page-item.active .page-link {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pagination-wrap .page-item.disabled .page-link {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-muted);
    opacity: 0.68;
}

.btn-loading {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
}

.btn-spinner {
    animation: buttonSpinner 0.7s linear infinite;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    border-top-color: currentColor;
    display: inline-block;
    flex: 0 0 auto;
    height: 13px;
    width: 13px;
}

.btn-outline-primary .btn-spinner,
.btn-outline-secondary .btn-spinner,
.btn-outline-danger .btn-spinner,
.btn-outline-success .btn-spinner,
.btn-light .btn-spinner {
    border-color: rgba(107, 114, 128, 0.30);
    border-top-color: currentColor;
}

@keyframes buttonSpinner {
    to {
        transform: rotate(360deg);
    }
}

.btn-icon {
    align-items: center;
    display: inline-flex;
    height: 28px;
    justify-content: center;
    padding: 0;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    width: 28px;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    transform: translateY(-1px);
}

.btn-icon:focus-visible {
    box-shadow: 0 0 0 3px rgba(31, 92, 104, 0.16);
}

.btn-icon i {
    font-size: 12px;
    line-height: 1;
}

@media (min-width: 768px) {
    .status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-actions {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar {
        max-width: none;
        transform: translateX(0);
        width: var(--sidebar-width);
    }

    .main-shell {
        margin-left: var(--sidebar-width);
    }

    .sidebar-close,
    .sidebar-backdrop {
        display: none;
    }

    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-rail-width);
    }

    body.sidebar-collapsed .main-shell {
        margin-left: var(--sidebar-rail-width);
    }

    body.sidebar-collapsed .brand {
        justify-content: center;
        padding: 14px 10px;
    }

    body.sidebar-collapsed .brand-wordmark {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
    }

    body.sidebar-collapsed .sidebar-nav {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.sidebar-collapsed .sidebar-direct-link,
    body.sidebar-collapsed .sidebar-group-toggle {
        justify-content: center;
        min-height: 38px;
        padding-left: 0;
        padding-right: 0;
    }

    body.sidebar-collapsed .sidebar-direct-link span,
    body.sidebar-collapsed .sidebar-group-label span,
    body.sidebar-collapsed .sidebar-group-caret,
    body.sidebar-collapsed .sidebar-submenu,
    body.sidebar-collapsed .sidebar-user {
        display: none !important;
    }

    body.sidebar-collapsed .sidebar-group-label {
        justify-content: center;
    }

    body.sidebar-collapsed .sidebar-group-icon,
    body.sidebar-collapsed .sidebar-link-icon {
        font-size: 15px;
        margin: 0;
        width: 22px;
    }

    body.sidebar-collapsed .sidebar-footer {
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }

}

@media (min-width: 1100px) {
    .detail-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 701px) and (max-width: 1023px) {
    .page-content {
        padding: 22px 18px;
    }

    .page-actions {
        align-items: flex-start;
        gap: 12px;
    }

    .page-actions h2 {
        font-size: 22px;
    }

    .panel {
        padding: 18px;
    }

    .dashboard-panel {
        padding: 18px;
    }

    .report-filter-form {
        padding: 14px;
    }

    .filter-actions .btn,
    .report-filter-form .filter-actions .btn {
        min-height: 32px;
    }

    .form-footer,
    .form-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 700px) {
    .auth-page {
        padding: 18px 12px;
    }

    .auth-card {
        padding: 22px;
    }

    .auth-page-login {
        align-items: flex-start;
        padding: 142px 16px 28px;
    }

    .auth-login-wordmark {
        top: 16px;
    }

    .auth-login-wordmark img {
        width: clamp(210px, 58vw, 270px);
    }

    .auth-card-login {
        max-width: 100%;
        min-height: 0;
        padding: 28px 28px 34px;
    }

    .auth-card-login .auth-brand-mark {
        height: 76px;
        margin-bottom: 22px;
        width: 76px;
    }

    .auth-login-form {
        max-width: 100%;
    }

    .auth-login-options {
        gap: 16px;
    }

    .auth-login-submit {
        min-height: 40px;
        width: 100%;
    }

    .auth-header h1 {
        font-size: 22px;
    }

    .brand {
        padding: 14px 16px;
    }

    .brand-wordmark {
        max-width: 190px;
    }

    .sidebar-nav {
        gap: 6px;
        padding: 0 10px 14px;
    }

    .sidebar-footer {
        padding: 12px;
    }

    .page-content {
        padding: 18px 14px;
    }

    .page-actions {
        gap: 10px;
        margin-bottom: 14px;
    }

    .page-actions h2 {
        font-size: 20px;
        overflow-wrap: anywhere;
    }

    .page-actions .btn {
        max-width: 100%;
        white-space: normal;
    }

    .panel {
        padding: 16px;
    }

    .form-footer,
    .form-actions,
    .filter-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-footer .btn,
    .form-actions .btn,
    .filter-actions .btn {
        width: 100%;
    }

    .uom-conversion-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .routing-step-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .uom-conversion-actions {
        padding-bottom: 0;
    }

    .routing-step-actions {
        padding-bottom: 0;
    }

    .responsive-table {
        border: 0;
        border-radius: 0;
    }

    .data-table,
    .data-table thead,
    .data-table tbody,
    .data-table th,
    .data-table td,
    .data-table tr {
        display: block;
    }

    .data-table thead {
        display: none;
    }

    .data-table tr {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 12px;
        overflow: hidden;
    }

    .data-table td {
        align-items: flex-start;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        min-height: 38px;
        padding: 8px 10px;
        text-align: right;
    }

    .data-table td > *:not(:first-child),
    .data-table td > a,
    .data-table td > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .data-table td::before {
        color: #6b7280;
        content: attr(data-label);
        flex: 0 0 88px;
        font-weight: var(--font-regular);
        text-align: left;
    }

    .data-table .checkbox-column {
        justify-content: space-between;
        text-align: right;
        width: auto;
    }

    .data-table td:last-child {
        border-bottom: 0;
    }

    .table-actions {
        justify-content: flex-end;
    }

    .empty-state {
        display: block;
        text-align: center;
    }

    .empty-state::before {
        display: none;
    }
}

@media (max-width: 420px) {
    .auth-page-login {
        padding: 126px 12px 24px;
    }

    .auth-login-wordmark img {
        width: clamp(180px, 66vw, 230px);
    }

    .auth-card-login {
        padding: 24px 18px 28px;
    }

    .auth-card-login .auth-brand-mark {
        height: 70px;
        width: 70px;
    }

    .auth-login-options {
        align-items: flex-start !important;
        flex-direction: column;
    }
}

@media (max-height: 680px) and (min-width: 701px) {
    .auth-page-login {
        padding-top: 132px;
    }

    .auth-login-wordmark {
        top: 12px;
    }

    .auth-login-wordmark img {
        width: clamp(220px, 21vw, 300px);
    }
}

@media (min-width: 1024px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        bottom: 0;
        display: flex;
        flex-direction: column;
        left: 0;
        position: fixed;
        top: 0;
        width: var(--sidebar-width);
    }

    .main-shell {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-left: var(--sidebar-width);
    }

    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-rail-width);
    }

    body.sidebar-collapsed .main-shell {
        margin-left: var(--sidebar-rail-width);
    }

    .page-content {
        padding-left: 32px;
        padding-right: 32px;
    }

    .sidebar-nav {
        align-content: start;
        display: grid;
        flex: 1 1 auto;
        gap: 3px;
        min-height: 0;
        overflow-x: visible;
        overflow-y: auto;
        padding: 0 12px 18px;
        scrollbar-color: #334155 var(--color-sidebar);
        scrollbar-width: thin;
    }

    body.sidebar-collapsed .sidebar-nav {
        padding-left: 10px;
        padding-right: 10px;
    }

    .sidebar-nav::-webkit-scrollbar {
        width: 8px;
    }

    .sidebar-nav::-webkit-scrollbar-track {
        background: var(--color-sidebar);
    }

    .sidebar-nav::-webkit-scrollbar-thumb {
        background: #334155;
        border-radius: 999px;
    }

    .sidebar-nav::-webkit-scrollbar-thumb:hover {
        background: #475569;
    }

    .sidebar-group {
        align-self: start;
        flex: none;
    }

    .sidebar-submenu {
        padding: 4px 0 6px 12px;
    }

    .sidebar-submenu .nav-link {
        font-size: 13px;
        min-height: 20px;
        padding: 4px 10px;
    }

    .nav-link {
        white-space: normal;
    }

    .sidebar-footer {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), var(--color-sidebar));
        box-shadow: 0 -10px 18px rgba(15, 23, 42, 0.18);
        margin-top: auto;
        padding: 14px;
    }
}

@media (min-width: 1200px) and (min-height: 720px) {
    .auth-page {
        align-items: center;
        padding: 40px 16px;
    }

    .auth-page.auth-page-login {
        align-items: flex-start;
        padding: clamp(170px, 18vh, 205px) 16px 48px;
    }
}