:root {
    --body: #050608;
    --sidebar: #050608;
    --surface: #10151b;
    --surface-2: #151c24;
    --ink: #edf5f7;
    --muted: #93a5b2;
    --line: #26323e;
    --primary: #20b879;
    --primary-dark: #0f8e69;
    --blue: #155a9d;
    --amber: #b16b1c;
    --green: #16804e;
    --red: #c94b43;
    --shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

* {
    box-sizing: border-box;
}

body {
    background: var(--body);
    color: var(--ink);
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 1.45;
    margin: 0;
}

a {
    color: #8ff1bd;
    font-weight: 600;
    text-decoration: none;
}

.sidebar {
    background: var(--sidebar);
    border-right: 1px solid #18222b;
    bottom: 0;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .34);
    color: #dce8f1;
    left: 0;
    padding: 20px 14px;
    position: fixed;
    top: 0;
    width: 280px;
    z-index: 2;
}

.brand {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: grid;
    gap: 12px;
    margin: -4px 0 20px;
    padding: 0 6px 18px;
}

.brand img {
    background: #000000;
    border: 1px solid #1f2b34;
    border-radius: 8px;
    display: block;
    max-height: 76px;
    object-fit: contain;
    padding: 8px;
    width: 100%;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    color: #adc0ce;
    margin-top: 2px;
}

.sidebar nav {
    display: grid;
    gap: 4px;
}

.sidebar nav a {
    border-radius: 6px;
    color: #d8e4ed;
    display: block;
    font-size: 15px;
    padding: 12px 14px;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: rgba(32, 184, 121, .16);
    box-shadow: inset 3px 0 0 var(--primary);
    color: #ffffff;
}

.app {
    margin-left: 280px;
    min-height: 100vh;
}

.topbar {
    align-items: center;
    background: #080b0f;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    min-height: 64px;
    padding: 12px 28px;
}

.topbar strong,
.topbar span {
    display: block;
}

.topbar span,
.page-head p,
.card-header p,
.muted {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.topbar-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.pill {
    background: rgba(32, 184, 121, .14);
    border: 1px solid rgba(32, 184, 121, .3);
    border-radius: 999px;
    color: #8ff1bd;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 11px;
}

.page-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1180px;
    padding: 24px 28px 14px;
}

.page-head h1 {
    font-size: 26px;
    font-weight: 700;
    margin: 4px 0 0;
}

.card,
.metrics,
.content-grid,
.grid-two,
.alert,
.success {
    margin-left: auto;
    margin-right: auto;
    max-width: 1180px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
    overflow: hidden;
    padding: 0;
}

.card-header {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 16px 18px;
}

.card-header h2 {
    font-size: 18px;
    margin: 0 0 2px;
}

.card > form,
.card > table,
.card > .empty-state,
.card > .workflow-strip,
.card > dl,
.card > .timeline,
.card > .check-list {
    margin: 18px;
}

.narrow {
    max-width: 820px;
}

.metrics {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 28px 20px;
}

.info-card {
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: #ffffff;
    display: block;
    overflow: hidden;
    padding: 18px;
    position: relative;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.info-card:before {
    background: linear-gradient(120deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 34%, transparent 35%);
    content: "";
    height: 100%;
    left: -34%;
    opacity: .42;
    position: absolute;
    top: 0;
    transform: skewX(-18deg);
    width: 68%;
}

.info-card:after {
    background: radial-gradient(circle at 80% 18%, rgba(255, 255, 255, .26), transparent 28%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.info-card:hover {
    box-shadow: 0 24px 52px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .12) inset;
    color: #ffffff;
    transform: translateY(-3px);
}

.info-card span,
.info-card small,
.info-card em {
    display: block;
    opacity: .9;
    position: relative;
    z-index: 1;
}

.info-card em {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: #ffffff;
    font-style: normal;
    font-weight: 900;
    margin: 0 0 10px;
    padding: 5px 10px;
    width: fit-content;
}

.info-card strong {
    display: block;
    font-size: 34px;
    line-height: 1;
    margin: 8px 0;
    position: relative;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
    z-index: 1;
}

.info-card.blue { background: linear-gradient(135deg, #0b4f91, #227ad0); }
.info-card.amber { background: linear-gradient(135deg, #92520d, #d6871c); }
.info-card.green { background: linear-gradient(135deg, #0f6f45, #20a765); }
.info-card.teal { background: linear-gradient(135deg, #0a8c63, #2ed08d); }
.info-card.red { background: linear-gradient(135deg, #842424, #c13c3c); }
.info-card.violet { background: linear-gradient(135deg, #4f2a8f, #9b5bd8); }

.brand-hero {
    align-items: center;
    background:
        radial-gradient(circle at top right, rgba(32, 184, 121, .22), transparent 34%),
        linear-gradient(135deg, #07090c, #111923);
    display: grid;
    gap: 26px;
    grid-template-columns: 340px 1fr;
    padding: 24px;
}

.brand-hero img {
    background: #000000;
    border: 1px solid #1f2b34;
    border-radius: 8px;
    display: block;
    padding: 14px;
    width: 100%;
}

.brand-hero h2 {
    font-size: 26px;
    line-height: 1.25;
    margin: 8px 0 0;
}

.eyebrow {
    color: #7fe8ab;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.content-grid,
.grid-two {
    display: grid;
    gap: 20px;
    grid-template-columns: 1.4fr .9fr;
    padding: 0 28px;
}

.grid-two {
    grid-template-columns: 1fr 1fr;
}

.workflow-strip {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-strip span {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    color: var(--ink);
    display: flex;
    gap: 10px;
    min-height: 58px;
    padding: 10px;
}

.workflow-strip b {
    align-items: center;
    background: var(--primary);
    border-radius: 999px;
    color: #03120c;
    display: inline-flex;
    flex: 0 0 28px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.check-list {
    color: var(--muted);
    display: grid;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.check-list li {
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.check-list li:last-child {
    border-bottom: 0;
}

table {
    border-collapse: collapse;
    width: calc(100% - 36px);
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 12px 10px;
    text-align: left;
    vertical-align: middle;
}

th {
    background: #0c1117;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

tr:hover td {
    background: #121a22;
}

.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact {
    grid-template-columns: 1fr;
}

.wide {
    grid-column: 1 / -1;
}

label {
    color: var(--muted);
    display: grid;
    font-size: 13px;
    font-weight: 600;
    gap: 6px;
}

.admin-form {
    background: linear-gradient(180deg, rgba(21, 28, 36, .78), rgba(11, 16, 22, .92));
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 10px;
    margin: 18px;
    padding: 18px;
}

.field {
    background: rgba(255, 255, 255, .018);
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 10px;
    color: #a9c3d8;
    padding: 10px;
}

.field:focus-within {
    border-color: rgba(32, 184, 121, .48);
    box-shadow: 0 0 0 3px rgba(32, 184, 121, .08);
}

input,
select,
textarea {
    background: #090e14;
    border: 1px solid #314252;
    border-radius: 7px;
    color: var(--ink);
    font: inherit;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(32, 184, 121, .14);
    outline: 0;
}

button,
.button {
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    color: #03120c;
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    padding: 9px 15px;
}

button:hover,
.button:hover {
    background: #58d99b;
    color: #03120c;
}

.button.secondary {
    background: rgba(32, 184, 121, .12);
    border-color: rgba(32, 184, 121, .34);
    color: #8ff1bd;
}

button:disabled {
    background: #56616c;
    border-color: #56616c;
    cursor: not-allowed;
}

.danger-button {
    background: var(--red);
    border-color: var(--red);
    color: #ffffff;
}

.actions {
    display: flex;
    gap: 10px;
    padding: 0 18px 18px;
}

.form-actions {
    align-self: end;
    display: grid;
}

.form-actions button {
    min-height: 54px;
}

.file-field {
    position: relative;
}

.file-field input[type="file"] {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    inset: 0;
}

.file-field span {
    align-items: center;
    background: linear-gradient(135deg, rgba(32, 184, 121, .18), rgba(32, 184, 121, .08));
    border: 1px dashed rgba(127, 232, 171, .38);
    border-radius: 7px;
    color: #8ff1bd;
    display: flex;
    font-weight: 800;
    min-height: 44px;
    padding: 10px 12px;
}

.mass-upload-head {
    align-items: center;
    background: #0b1118;
    border: 1px solid #263542;
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 14px;
}

.mass-upload-head strong,
.mass-upload-head span {
    display: block;
}

.mass-upload-head strong {
    color: #ffffff;
    font-size: 16px;
}

.mass-upload-head span {
    color: var(--muted);
    font-size: 13px;
    margin-top: 3px;
}

.company-lock {
    align-items: center;
    background: linear-gradient(135deg, rgba(32, 184, 121, .18), rgba(8, 13, 18, .9));
    border: 1px solid rgba(32, 184, 121, .28);
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    padding: 14px;
}

.company-lock span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.company-lock strong {
    color: #8ff1bd;
    font-size: 18px;
}

.product-master-table {
    min-width: 1680px;
}

.users-table {
    min-width: 900px;
}

.user-role-guide {
    display: block;
}

.user-role-guide strong {
    color: #dff9ec;
    display: block;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 6px;
}

.badge,
.status {
    border-radius: 999px;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
}

.badge {
    background: rgba(32, 184, 121, .14);
    color: #8ff1bd;
}

.status {
    background: #1d2731;
    color: var(--muted);
}

.status.fulfilled,
.status.approved {
    background: rgba(33, 150, 83, .16);
    color: #83e5a9;
}

.status.unfulfilled,
.status.rejected {
    background: rgba(201, 75, 67, .18);
    color: #ff9d97;
}

.status.open,
.status.pending {
    background: rgba(177, 107, 28, .18);
    color: #f3bd77;
}

.status.hotline,
.status.backorder,
.status.partial,
.status.mismatch,
.status.extra {
    background: rgba(201, 75, 67, .18);
    color: #ff9d97;
}

.status.standard,
.status.matched {
    background: rgba(33, 150, 83, .16);
    color: #83e5a9;
}

.status.sent {
    background: rgba(33, 150, 83, .16);
    color: #83e5a9;
}

.status.failed {
    background: rgba(201, 75, 67, .18);
    color: #ff9d97;
}

.status.queued {
    background: rgba(177, 107, 28, .18);
    color: #f3bd77;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.status-stack {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.checkbox-line {
    align-items: center;
    display: flex;
    gap: 8px;
}

.checkbox-line input {
    min-height: 0;
    width: auto;
}

.checkbox-grid {
    display: grid;
    gap: 8px 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: 8px;
}

.customer-allocation-field legend {
    color: #a9c5da;
    font-size: 12px;
    font-weight: 900;
    padding: 0;
}

.customer-allocation-field p {
    color: var(--muted);
    margin: 4px 0 10px;
}

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

.table-actions form,
.inline-delete-form {
    margin: 0;
}

.flow {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
    margin: 18px;
    padding: 0;
}

.flow li {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    min-height: 62px;
    padding: 12px;
}

.flow .active {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 2px rgba(32, 184, 121, .18);
    color: #8ff1bd;
    font-weight: 700;
}

dl {
    display: grid;
    gap: 10px 14px;
    grid-template-columns: 150px 1fr;
}

dt {
    color: var(--muted);
    font-weight: 600;
}

dd {
    margin: 0;
}

.approval-form {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(160px, 1fr) auto auto;
}

.timeline {
    border-left: 3px solid var(--primary);
    padding-left: 12px;
}

.timeline + .timeline {
    margin-top: 0;
}

.timeline span {
    color: var(--muted);
    display: block;
    font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.empty-state {
    align-items: center;
    background: #0b1016;
    border: 1px dashed #33424f;
    border-radius: 6px;
    color: var(--muted);
    display: grid;
    justify-items: center;
    padding: 34px;
    text-align: center;
}

.empty-state strong {
    color: var(--ink);
    font-size: 18px;
}

.empty-state p {
    margin: 8px 0 16px;
}

.alert,
.success {
    border-radius: 6px;
    margin-bottom: 16px;
    padding: 12px 14px;
}

.alert {
    background: rgba(201, 75, 67, .18);
    color: #ff9d97;
}

.success {
    background: rgba(33, 150, 83, .16);
    color: #83e5a9;
}

.login-shell {
    align-items: center;
    background:
        radial-gradient(circle at 15% 18%, rgba(32, 184, 121, .26), transparent 24%),
        radial-gradient(circle at 78% 14%, rgba(0, 145, 255, .16), transparent 22%),
        linear-gradient(135deg, #020304 0%, #071017 45%, #020403 100%);
    display: grid;
    gap: 46px;
    grid-template-columns: minmax(0, 1fr) 430px;
    min-height: 100vh;
    overflow: hidden;
    padding: 64px;
    position: relative;
}

.login-shell:before {
    background:
        linear-gradient(120deg, rgba(255, 255, 255, .08), transparent 32%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, 58px 58px, 58px 58px;
    content: "";
    inset: 0;
    position: absolute;
}

.login-stage,
.login-panel-premium {
    position: relative;
    z-index: 1;
}

.login-orbit {
    border: 1px solid rgba(32, 184, 121, .16);
    border-radius: 999px;
    position: absolute;
}

.login-orbit.one {
    height: 440px;
    left: -110px;
    top: -70px;
    width: 440px;
}

.login-orbit.two {
    bottom: -90px;
    height: 260px;
    right: 90px;
    width: 260px;
}

.login-logo-card {
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(127, 232, 171, .25);
    border-radius: 22px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .6);
    max-width: 560px;
    padding: 24px;
}

.login-logo-card img {
    display: block;
    width: 100%;
}

.login-copy {
    margin-top: 44px;
    max-width: 760px;
}

.login-copy h1 {
    font-size: 68px;
    letter-spacing: 0;
    line-height: 1.02;
    margin: 12px 0 18px;
}

.login-copy p {
    color: #bfd0da;
    font-size: 20px;
    max-width: 650px;
}

.login-feature-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 38px;
    max-width: 760px;
}

.login-feature-grid article {
    background: rgba(255, 255, 255, .065);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 16px;
    padding: 16px;
}

.login-feature-grid strong,
.login-feature-grid span {
    display: block;
}

.login-feature-grid strong {
    color: #7fe8ab;
    font-size: 13px;
    margin-bottom: 10px;
}

.login-feature-grid span {
    color: #e8f4ef;
    font-weight: 800;
}

.login-panel-premium {
    background: rgba(8, 13, 18, .82);
    border: 1px solid rgba(127, 232, 171, .20);
    border-radius: 24px;
    box-shadow: 0 34px 110px rgba(0, 0, 0, .62);
    overflow: hidden;
    padding: 36px;
}

.login-panel-glow {
    background: linear-gradient(90deg, transparent, rgba(32, 184, 121, .8), transparent);
    height: 2px;
    margin: -36px -36px 30px;
}

.login-card-head span {
    color: #7fe8ab;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.login-card-head h2 {
    font-size: 40px;
    margin: 8px 0 6px;
}

.login-card-head p,
.login-secure-note {
    color: var(--muted);
}

.login-form {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.login-form input {
    min-height: 52px;
}

.login-form button {
    font-size: 16px;
    min-height: 52px;
}

.login-secure-note {
    align-items: flex-start;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
}

.login-secure-note span {
    background: #7fe8ab;
    border-radius: 999px;
    flex: 0 0 9px;
    height: 9px;
    margin-top: 6px;
    width: 9px;
}

.login-secure-note p {
    margin: 0;
}

.login-floating-message {
    left: 50%;
    max-width: 520px;
    position: fixed;
    top: 18px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    z-index: 5;
}

.avatar-placeholder {
    align-items: center;
    background: rgba(32, 184, 121, .14);
    border: 1px solid rgba(32, 184, 121, .28);
    border-radius: 999px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    overflow: hidden;
    width: 44px;
}

.avatar-placeholder img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.avatar-placeholder span {
    color: #8ff1bd;
    font-weight: 900;
}

.product-picker,
.basket-panel {
    border-top: 1px solid var(--line);
    margin-top: 22px;
    padding-top: 18px;
}

.order-header-grid {
    margin: 18px;
}

.product-search-row {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(240px, 1fr) 160px;
    margin: 18px;
}

.product-result-list {
    display: grid;
    gap: 10px;
    margin: 18px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 4px;
}

.product-card {
    align-items: center;
    background: #121922;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: 76px minmax(0, 1fr) 110px 110px auto;
    padding: 12px;
}

.product-card:hover {
    border-color: rgba(32, 184, 121, .36);
    box-shadow: inset 3px 0 0 rgba(32, 184, 121, .72);
}

.product-result-main {
    min-width: 0;
}

.product-card p {
    color: #f4fbff;
    font-weight: 700;
    margin: 2px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card small {
    color: var(--muted);
}

.product-result-stock {
    background: #0b1118;
    border: 1px solid #263542;
    border-radius: 8px;
    display: grid;
    gap: 2px;
    padding: 9px 12px;
    text-align: right;
}

.product-result-stock span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.product-result-stock strong {
    color: #8ff1bd;
    font-size: 18px;
}

.product-photo-hover,
.stock-photo-bubble {
    align-items: center;
    background: #050608;
    border: 1px solid rgba(32, 184, 121, .22);
    border-radius: 10px;
    display: inline-flex;
    height: 70px;
    justify-content: center;
    overflow: visible;
    position: relative;
    width: 70px;
    z-index: 1;
}

.product-photo-hover img,
.stock-photo-bubble img {
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    transition: transform .18s ease, box-shadow .18s ease;
    width: 100%;
}

.product-photo-hover:hover img,
.stock-photo-bubble:hover img {
    box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
    transform: scale(2.85);
    z-index: 4;
}

.basket-photo {
    border-radius: 6px;
    height: 48px;
    object-fit: cover;
    width: 64px;
}

.inline-warning {
    background: rgba(201, 75, 67, .18);
    border: 1px solid rgba(201, 75, 67, .35);
    border-radius: 6px;
    color: #ffb0ab;
    margin: 18px;
    padding: 12px;
}

.summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.summary-grid div {
    background: rgba(8, 14, 20, .42);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 12px;
}

.summary-grid dt {
    color: #9fc3dd;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.summary-grid dd {
    color: var(--text);
    margin: 0;
}

.stage-note {
    margin-top: 12px;
}

.basket-qty {
    min-width: 84px;
}

.customer-summary {
    background: rgba(32, 184, 121, .12);
    border: 1px solid rgba(32, 184, 121, .28);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    margin: 18px;
    padding: 14px;
}

.form-guide-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 18px;
}

.form-guide-strip div {
    align-items: center;
    background: #0d131a;
    border: 1px solid #263542;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 12px;
}

.form-guide-strip span {
    align-items: center;
    background: #20b879;
    border-radius: 999px;
    color: #02100b;
    display: flex;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.form-guide-strip strong,
.form-guide-strip small {
    display: block;
}

.form-guide-strip strong {
    color: #ffffff;
    font-size: 13px;
}

.form-guide-strip small {
    color: #9fb1bf;
    font-size: 11px;
}

.customer-summary strong {
    color: #8ff1bd;
    font-size: 18px;
}

.customer-summary span {
    color: var(--muted);
}

.file-chip {
    background: rgba(32, 184, 121, .12);
    border: 1px solid rgba(32, 184, 121, .3);
    border-radius: 6px;
    color: #8ff1bd;
    cursor: pointer;
    display: inline-grid;
    font-weight: 800;
    min-height: 38px;
    place-items: center;
    padding: 8px 10px;
}

.file-chip input {
    display: none;
}

.table-toolbar {
    align-items: end;
    background: rgba(255, 255, 255, .025);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 1fr) 170px 160px 110px auto auto;
    padding: 16px 18px;
}

.table-shell {
    margin: 0 18px 18px;
    overflow-x: auto;
}

.admin-data-table {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.card > .table-shell {
    margin-top: 18px;
}

.admin-data-table th,
.admin-data-table td {
    padding: 14px 12px;
}

.admin-data-table th {
    background: #101721;
    color: #9fc3dd;
    font-size: 11px;
    letter-spacing: .03em;
}

.stock-data-table {
    min-width: 1120px;
}

.photo-cell {
    width: 92px;
}

.table-code {
    color: #dff9ec;
    font-size: 14px;
}

.table-product-name {
    color: #ffffff;
    font-weight: 750;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-chip,
.stock-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    min-width: 42px;
    padding: 6px 10px;
}

.soft-chip {
    background: #0b1118;
    border: 1px solid #263542;
    color: #b8c8d5;
}

.stock-pill.is-ok {
    background: rgba(32, 184, 121, .14);
    border: 1px solid rgba(32, 184, 121, .32);
    color: #8ff1bd;
}

.stock-pill.is-empty {
    background: rgba(201, 75, 67, .14);
    border: 1px solid rgba(201, 75, 67, .32);
    color: #ff9d97;
}

.updated-stack {
    display: grid;
    gap: 2px;
    min-width: 130px;
}

.updated-stack strong {
    color: #dce8f1;
    font-size: 13px;
}

.updated-stack span {
    color: var(--muted);
    font-size: 12px;
}

.action-cell {
    width: 104px;
}

.small-button {
    font-size: 13px;
    min-height: 36px;
    padding: 7px 12px;
}

.stock-edit-row td {
    background: #0b1016;
    padding: 0;
}

.stock-edit-row[hidden] {
    display: none;
}

.stock-edit-panel {
    border-left: 3px solid var(--primary);
    padding: 16px;
}

.inline-edit-form {
    margin: 0;
}

.inline-edit-form .field {
    padding: 8px;
}

.inline-edit-form input {
    min-height: 40px;
}

.delete-inline-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.table-toolbar .field {
    padding: 8px;
}

.table-toolbar .form-actions {
    display: flex;
}

.table-toolbar .form-actions button,
.table-toolbar .button {
    min-height: 42px;
    min-width: 108px;
    padding: 8px 13px;
}

.pagination-bar {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}

/* AdminLTE-inspired dark polish, matched to the Boxing app layout patterns. */
body {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .018) 25%, transparent 25%) 0 0 / 34px 34px,
        radial-gradient(circle at 88% 4%, rgba(32, 184, 121, .16), transparent 22rem),
        linear-gradient(180deg, #050608 0%, #080d12 100%);
    font-size: 13px;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

.sidebar {
    background: linear-gradient(180deg, #05070a 0%, #111820 58%, #06090d 100%);
    border-right: 1px solid #17232e;
    box-shadow: 2px 0 20px rgba(0, 0, 0, .35);
    padding: 0;
    width: 238px;
}

.app {
    margin-left: 238px;
}

.brand {
    background: linear-gradient(135deg, #05070a, #10251f);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
}

.brand img {
    border-radius: 8px;
    max-height: 70px;
    padding: 7px;
}

.brand strong {
    color: #ffffff;
    font-size: 16px;
}

.brand small {
    color: #9fb1bf;
}

.sidebar nav {
    gap: 2px;
    padding: 10px 8px;
}

.sidebar nav a {
    align-items: center;
    border-radius: 4px;
    color: #c2c7d0;
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
    min-height: 34px;
    padding: 7px 9px;
    text-transform: uppercase;
}

.sidebar nav a:before {
    background: rgba(255, 255, 255, .07);
    border-radius: 4px;
    content: "";
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: linear-gradient(90deg, rgba(32, 184, 121, .28), rgba(32, 184, 121, .08));
    box-shadow: inset 4px 0 0 #8ff1bd;
    color: #ffffff;
}

.sidebar nav a.active:before,
.sidebar nav a:hover:before {
    background: #20b879;
}

.topbar {
    background: #080d12;
    border-bottom: 1px solid #24313d;
    min-height: 62px;
    padding: 10px 20px;
}

.topbar strong {
    color: #ffffff;
    font-size: 15px;
}

.topbar-actions {
    gap: 8px;
}

.page-head {
    max-width: 1240px;
    padding: 18px 20px 10px;
}

.page-head h1 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
}

.card,
.metrics,
.content-grid,
.grid-two,
.alert,
.success {
    max-width: 1240px;
}

.card {
    background: #111820;
    border: 1px solid #293746;
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
}

.card:not(.brand-hero) {
    border-top: 3px solid #20b879;
}

.card-header {
    background: #121b24;
    border-bottom: 1px solid #293746;
    padding: 12px 14px;
}

.card-header h2 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0;
}

.card-header p,
.page-head p,
.topbar span {
    font-size: 12px;
}

.admin-form,
.table-toolbar {
    background: #0d131a;
    border: 1px solid #263542;
    border-radius: 4px;
}

.order-filter-bar {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) 170px 190px auto auto;
    margin: 14px;
    padding: 14px;
}

.order-filter-bar label {
    display: grid;
    gap: 6px;
}

.card > form,
.card > table,
.card > .empty-state,
.card > .workflow-strip,
.card > dl,
.card > .timeline,
.card > .check-list {
    margin: 14px;
}

.form-grid {
    gap: 12px;
}

.field {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #9fc3dd;
    padding: 0;
}

label {
    color: #9fb1bf;
    font-size: 12px;
    font-weight: 800;
}

input,
select,
textarea {
    background: #060b10;
    border: 1px solid #344554;
    border-radius: 5px;
    color: #e9f4f6;
    font-size: 13px;
    min-height: 38px;
    padding: 8px 10px;
    width: 100%;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #20b879;
    box-shadow: 0 0 0 .2rem rgba(32, 184, 121, .16);
}

.datetime-picker-shell {
    align-items: center;
    background: #060b10;
    border: 1px solid #344554;
    border-radius: 3px;
    color: #e9f4f6;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    min-height: 38px;
    overflow: hidden;
    padding: 6px 9px;
    position: relative;
}

.datetime-picker-shell:hover,
.datetime-picker-shell:focus-within {
    border-color: #20b879;
    box-shadow: 0 0 0 .2rem rgba(32, 184, 121, .16);
}

.datetime-picker-shell strong {
    background: rgba(32, 184, 121, .14);
    border: 1px solid rgba(32, 184, 121, .32);
    border-radius: 3px;
    color: #9cf2c1;
    font-size: 11px;
    padding: 5px 8px;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}

.datetime-picker-shell input[type="datetime-local"] {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

button,
.button {
    border-radius: 5px;
    font-size: 13px;
    font-weight: 900;
    min-height: 38px;
    padding: 8px 13px;
    text-transform: uppercase;
}

.button.secondary {
    background: #10241d;
}

.form-actions button {
    min-height: 38px;
}

.file-field span {
    border-radius: 3px;
    min-height: 34px;
}

.metrics {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: 0 20px 16px;
}

.info-card {
    border-radius: 8px;
    min-height: 108px;
    padding: 16px 18px;
}

.info-card span {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.info-card strong {
    font-size: 30px;
}

.admin-data-table,
table {
    background: #0d131a;
    border: 1px solid #293746;
    font-size: 12px;
}

th,
td {
    border-bottom: 1px solid #293746;
    padding: 8px 10px;
}

th {
    background: #111d27;
    border-bottom: 2px solid #1f8e69;
    color: #b7d7ec;
    font-weight: 900;
}

tbody tr:nth-child(even) {
    background: #101821;
}

tr:hover td {
    background: #142231;
}

.brand-hero {
    border-top: 0;
    padding: 18px;
}

.workflow-strip span {
    border-radius: 4px;
}

.content-grid,
.grid-two {
    gap: 14px;
    padding: 0 20px;
}

.order-command-panel {
    background: linear-gradient(135deg, rgba(32, 184, 121, .12), rgba(8, 14, 20, .82));
    border: 1px solid rgba(32, 184, 121, .24);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.35fr);
    margin: 14px;
    padding: 14px;
}

.current-task span,
.task-checklist li,
.instruction-strip strong {
    color: #9fc3dd;
    display: block;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.current-task strong {
    color: #ffffff;
    display: block;
    font-size: 16px;
    line-height: 1.45;
    margin-top: 5px;
}

.task-checklist {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.task-checklist li {
    align-items: center;
    background: rgba(6, 11, 16, .72);
    border: 1px solid #2d3b48;
    border-radius: 6px;
    color: #b7c8d6;
    display: flex;
    gap: 8px;
    min-height: 38px;
    padding: 8px 10px;
    text-transform: none;
}

.task-checklist li:before {
    background: #2c3945;
    border-radius: 999px;
    content: "";
    flex: 0 0 10px;
    height: 10px;
    width: 10px;
}

.task-checklist li.done:before,
.task-checklist li.ready:before {
    background: #20b879;
    box-shadow: 0 0 0 4px rgba(32, 184, 121, .16);
}

.task-checklist li.waiting:before {
    background: #d18b2c;
    box-shadow: 0 0 0 4px rgba(209, 139, 44, .15);
}

.order-actions {
    border-top: 1px solid #293746;
    margin-top: 8px;
    padding-top: 12px;
}

.instruction-strip {
    background: rgba(177, 107, 28, .14);
    border: 1px solid rgba(177, 107, 28, .28);
    border-radius: 6px;
    color: #f4c586;
    margin: 0 14px 14px;
    padding: 10px 12px;
}

.order-workbench {
    align-items: start;
}

.current-step-card {
    margin-bottom: 14px;
}

.role-instruction {
    background: rgba(33, 191, 126, .08);
    border-bottom: 1px solid #243341;
    border-top: 1px solid #1d332c;
    color: #b6ccda;
    line-height: 1.55;
    padding: 12px 16px;
}

.role-instruction strong {
    color: #8ff1bd;
    text-transform: uppercase;
}

.current-step-layout {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 280px;
    padding: 16px;
}

.current-step-main {
    min-width: 0;
}

.single-action-form {
    background: #0d131a;
    border: 1px solid #263542;
    border-radius: 8px;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 16px;
}

.single-action-form p {
    color: #b4c8d8;
    margin: 0;
}

.single-action-form button {
    justify-self: start;
    min-width: 220px;
}

.stage-complete-form .form-grid {
    margin: 0;
}

.guided-empty {
    background: #0b1118;
    border: 1px dashed #2f3f4d;
    border-radius: 8px;
    padding: 22px;
}

.guided-empty strong {
    color: #ffffff;
    display: block;
    font-size: 18px;
    margin-bottom: 7px;
}

.guided-empty p {
    color: #9fb1bf;
    margin: 0;
}

.current-step-side {
    background: #0b1118;
    border: 1px solid #263542;
    border-radius: 8px;
    padding: 14px;
}

.current-step-side > strong {
    color: #ffffff;
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
}

.current-step-side dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.current-step-side dt {
    color: #91b8d3;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.current-step-side dd {
    color: #ffffff;
    margin: -6px 0 4px;
}

.primary-work-card {
    box-shadow: 0 0 0 1px rgba(32, 184, 121, .16), 0 18px 34px rgba(0, 0, 0, .26);
}

.card form.form-grid,
.card form.compact {
    background: #0d131a;
    border: 1px solid #263542;
    border-radius: 7px;
    margin: 14px;
    padding: 14px;
}

.empty-state {
    background: #0b1118;
    border: 1px dashed #2f3f4d;
    border-radius: 7px;
}

.product-picker,
.basket-panel {
    margin-top: 16px;
    padding-top: 14px;
}

.product-search-row {
    gap: 12px;
    grid-template-columns: minmax(240px, 1fr) 140px;
    margin: 14px;
}

.product-result-list {
    gap: 8px;
    margin: 14px;
    max-height: 510px;
}

.product-card {
    border-radius: 6px;
    gap: 12px;
    grid-template-columns: 60px minmax(0, 1fr) 96px 96px 66px;
    padding: 9px 12px;
}

.product-card p {
    font-size: 12px;
    line-height: 1.25;
    margin: 1px 0 3px;
}

.product-card small {
    font-size: 11px;
}

.product-result-stock {
    border-radius: 5px;
    padding: 7px 9px;
}

.product-result-stock strong {
    font-size: 16px;
}

.product-photo-hover,
.stock-photo-bubble {
    border-radius: 7px;
    height: 54px;
    width: 54px;
}

.customer-summary {
    border-radius: 6px;
    margin: 14px;
    padding: 12px;
}

.customer-summary strong {
    font-size: 15px;
}

.order-header-grid {
    margin: 14px;
}

.basket-photo {
    height: 38px;
    width: 52px;
}

@media print {
    .sidebar,
    .topbar,
    .page-head,
    .button,
    button,
    .brand-hero,
    .content-grid {
        display: none !important;
    }

    .app {
        margin: 0;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .card {
        border: 0;
        box-shadow: none;
    }
}

@media (max-width: 980px) {
    .sidebar {
        position: static;
        width: auto;
    }

    .app {
        margin-left: 0;
    }

    .topbar,
    .page-head,
    .card-header {
        display: block;
    }

    .topbar-actions {
        margin-top: 12px;
    }

    .metrics,
    .content-grid,
    .grid-two,
    .workflow-strip,
    .flow,
    .brand-hero,
    .form-grid,
    .summary-grid,
    .order-command-panel,
    .task-checklist,
    .current-step-layout,
    .form-guide-strip,
    .order-filter-bar,
    .login-shell,
    .table-toolbar {
        grid-template-columns: 1fr;
    }

    .product-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .product-result-stock,
    .product-card .button {
        grid-column: 2;
        text-align: left;
    }

    .pagination-bar {
        align-items: flex-start;
        display: grid;
        gap: 10px;
    }

    .login-shell {
        padding: 24px;
    }

    .login-copy h1 {
        font-size: 42px;
    }

    table {
        display: block;
        overflow-x: auto;
        width: auto;
    }
}

/* User management and profile photo overrides. Keep at the end so older duplicated theme rules do not win. */
.sidebar-user-card {
    align-items: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(13, 22, 31, .92));
    border: 1px solid rgba(52, 211, 153, .28);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 54px 1fr;
    margin: 14px 6px 22px;
    padding: 12px;
    position: relative;
}

.sidebar-user-card strong,
.sidebar-user-card small {
    display: block;
}

.sidebar-user-card strong {
    color: #f7fbff;
    font-size: 14px;
    line-height: 1.25;
}

.sidebar-user-card small {
    color: #9fc2d7;
    font-size: 12px;
    margin-top: 3px;
}

.sidebar-photo-hint {
    color: #69e6b0;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    margin-top: 6px;
    text-transform: uppercase;
}

.sidebar-user-photo,
.user-table-avatar {
    align-items: center;
    background: #02070a;
    border: 1px solid rgba(52, 211, 153, .34);
    border-radius: 999px;
    color: #82ffd2;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
}

.sidebar-user-photo {
    cursor: pointer;
    height: 54px;
    transition: box-shadow .18s ease, transform .18s ease;
    width: 54px;
    z-index: 4;
}

.sidebar-user-photo:hover {
    box-shadow: 0 20px 52px rgba(0, 0, 0, .48);
    transform: scale(2.15);
}

.sidebar-user-photo img,
.user-table-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.sidebar-user-photo input,
.table-file-button input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.user-admin-form .file-field {
    min-height: 76px;
}

.users-table {
    min-width: 1180px;
}

.users-table input,
.users-table select {
    font-size: 13px;
    min-height: 40px;
    padding: 9px 11px;
}

.user-table-avatar {
    border-radius: 8px;
    height: 58px;
    margin-bottom: 8px;
    width: 58px;
}

.table-file-button {
    align-items: center;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(52, 211, 153, .35);
    border-radius: 7px;
    color: #9fffd2;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    min-height: 30px;
    padding: 6px 9px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-file-button:hover {
    background: rgba(35, 201, 135, .22);
}

/* Final sidebar profile, logo, and menu scroll overrides. */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.sidebar .brand {
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
    padding: 12px 12px 14px !important;
}

.sidebar .brand img {
    height: auto !important;
    max-height: 88px !important;
    object-fit: contain !important;
}

.sidebar .brand strong {
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
}

.sidebar .brand small {
    font-size: .78rem !important;
}

.sidebar .sidebar-user-card {
    flex-shrink: 0 !important;
    gap: 9px !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    margin: 0 6px 12px !important;
    padding: 10px !important;
}

.sidebar .sidebar-user-photo {
    height: 48px !important;
    width: 48px !important;
}

.sidebar .sidebar-user-card strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.sidebar .sidebar-user-card small {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.sidebar .sidebar-user-phone {
    color: #9fffd2 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.sidebar .sidebar-photo-hint {
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin-top: 4px !important;
}

.sidebar nav {
    align-content: start !important;
    display: grid !important;
    flex: 1 1 auto !important;
    grid-auto-rows: max-content !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 22px !important;
    scrollbar-color: rgba(33, 191, 126, .6) rgba(255, 255, 255, .05);
    scrollbar-width: thin;
}

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

.sidebar nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(33, 191, 126, .62);
    border-radius: 999px;
}

/* Final compact sidebar profile card and scrolling menu. */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.sidebar .brand {
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
    padding: 12px 12px 14px !important;
}

.sidebar .brand img {
    height: auto !important;
    max-height: 88px !important;
    object-fit: contain !important;
}

.sidebar .brand strong {
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
}

.sidebar .brand small {
    font-size: .78rem !important;
}

.sidebar .sidebar-user-card {
    flex-shrink: 0 !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 6px 12px !important;
    padding: 10px !important;
}

.sidebar .sidebar-user-photo {
    height: 48px !important;
    width: 48px !important;
}

.sidebar .sidebar-user-card strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.sidebar .sidebar-user-card small {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.sidebar .sidebar-photo-hint {
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin-top: 4px !important;
}

.sidebar .sidebar-user-phone {
    color: #9fffd2 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.sidebar nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 22px !important;
    scrollbar-color: rgba(33, 191, 126, .6) rgba(255, 255, 255, .05);
    scrollbar-width: thin;
}

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

.sidebar nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(33, 191, 126, .62);
    border-radius: 999px;
}

/* Final sidebar density and scroll fixes. */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.brand {
    flex-shrink: 0;
    margin-bottom: 14px;
    padding: 14px 14px 16px;
}

.brand img {
    height: auto;
    max-height: 98px;
    object-fit: contain;
}

.brand strong {
    font-size: 1.02rem;
    line-height: 1.15;
}

.brand small {
    font-size: .78rem;
}

.sidebar-user-card {
    flex-shrink: 0;
    margin-bottom: 14px;
}

.sidebar-user-card small {
    display: block;
}

.sidebar-user-phone {
    color: #8ff1bd !important;
    font-weight: 800 !important;
    margin-top: 2px;
}

.sidebar nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(33, 191, 126, .6) rgba(255, 255, 255, .05);
}

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

.sidebar nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(33, 191, 126, .62);
    border-radius: 999px;
}

/* Final compact sidebar profile card. */
.sidebar .brand {
    padding: 12px 12px 14px !important;
    margin-bottom: 10px !important;
}

.sidebar .brand img {
    max-height: 88px !important;
}

.sidebar .sidebar-user-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 9px !important;
    margin: 0 6px 12px !important;
    padding: 10px !important;
}

.sidebar .sidebar-user-photo {
    height: 48px !important;
    width: 48px !important;
}

.sidebar .sidebar-user-card strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.sidebar .sidebar-user-card small {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.sidebar .sidebar-photo-hint {
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin-top: 4px !important;
}

.sidebar .sidebar-user-phone {
    color: #9fffd2 !important;
    font-size: 10px !important;
}

.sidebar-user-card {
    align-items: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(13, 22, 31, .92));
    border: 1px solid rgba(52, 211, 153, .28);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 54px 1fr;
    margin: 14px 6px 22px;
    padding: 12px;
    position: relative;
}

.sidebar-user-card strong,
.sidebar-user-card small {
    display: block;
}

.sidebar-user-card strong {
    color: #f7fbff;
    font-size: 14px;
    line-height: 1.25;
}

.sidebar-user-card small {
    color: #9fc2d7;
    font-size: 12px;
    margin-top: 3px;
}

.sidebar-user-photo,
.user-table-avatar {
    align-items: center;
    background: #02070a;
    border: 1px solid rgba(52, 211, 153, .34);
    border-radius: 999px;
    color: #82ffd2;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
}

.sidebar-user-photo {
    cursor: pointer;
    height: 54px;
    transition: box-shadow .18s ease, transform .18s ease;
    width: 54px;
    z-index: 4;
}

.sidebar-user-photo:hover {
    box-shadow: 0 20px 52px rgba(0, 0, 0, .48);
    transform: scale(2.15);
}

.sidebar-user-photo img,
.user-table-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.sidebar-user-photo input,
.table-file-button input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.user-admin-form .file-field {
    min-height: 76px;
}

.users-table {
    min-width: 1180px;
}

.users-table input,
.users-table select {
    font-size: 13px;
    min-height: 40px;
    padding: 9px 11px;
}

.user-table-avatar {
    border-radius: 8px;
    height: 58px;
    margin-bottom: 8px;
    width: 58px;
}

.table-file-button {
    align-items: center;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(52, 211, 153, .35);
    border-radius: 7px;
    color: #9fffd2;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    min-height: 30px;
    padding: 6px 9px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-file-button:hover {
    background: rgba(35, 201, 135, .22);
}

/* Logistics UI refresh: AdminLTE-style dark theme polish only. */
:root {
    --app-bg: #060a0f;
    --app-bg-soft: #0a1118;
    --sidebar-bg: #081018;
    --sidebar-bg-2: #0d1a24;
    --card-bg: #111922;
    --card-bg-2: #0e151d;
    --card-head: #141f2a;
    --field-bg: #071018;
    --field-border: #2a3a48;
    --field-border-focus: #1fc080;
    --text-main: #f4f8fb;
    --text-soft: #b9c9d6;
    --text-muted: #88a0b1;
    --accent: #21bf7e;
    --accent-2: #7ff0ba;
    --danger: #df5a50;
    --warning: #d8932f;
    --blue-card: #2377c8;
    --shadow-soft: 0 14px 36px rgba(0, 0, 0, .34);
    --radius: 6px;
}

html {
    scrollbar-color: #2b3b49 #071018;
}

body {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .018) 25%, transparent 25%) 0 0 / 30px 30px,
        radial-gradient(circle at 88% 0, rgba(33, 191, 126, .14), transparent 390px),
        var(--app-bg);
    color: var(--text-main);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

a {
    color: var(--accent-2);
}

.sidebar {
    background: linear-gradient(180deg, #05090e 0, var(--sidebar-bg) 48%, #08111a 100%);
    border-right: 1px solid #1b2a36;
    box-shadow: 4px 0 28px rgba(0, 0, 0, .4);
    padding: 0;
    width: 260px;
}

.app {
    margin-left: 260px;
}

.brand {
    background: linear-gradient(135deg, #070b10, #102c22);
    border-bottom: 1px solid #1e2d38;
    gap: 14px;
    margin: 0;
    padding: 14px;
}

.brand img {
    background: #000;
    border: 1px solid #263642;
    border-radius: var(--radius);
    max-height: 82px;
    padding: 9px;
}

.brand strong {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

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

.sidebar nav {
    gap: 4px;
    padding: 14px 10px;
}

.sidebar nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: #c8d3dc;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    text-transform: uppercase;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.sidebar nav a:before {
    background: #1a252f;
    border-radius: 4px;
    content: "";
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: linear-gradient(90deg, rgba(33, 191, 126, .22), rgba(33, 191, 126, .06));
    border-color: rgba(33, 191, 126, .2);
    box-shadow: inset 4px 0 0 var(--accent);
    color: #fff;
}

.sidebar nav a.active:before,
.sidebar nav a:hover:before {
    background: var(--accent);
}

.topbar {
    background: rgba(7, 13, 19, .96);
    border-bottom: 1px solid #243341;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    min-height: 66px;
    padding: 12px 24px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.topbar strong {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.topbar span,
.page-head p,
.card-header p,
.muted {
    color: var(--text-muted);
}

.topbar-actions {
    gap: 10px;
}

.pill {
    background: linear-gradient(180deg, rgba(33, 191, 126, .18), rgba(33, 191, 126, .08));
    border: 1px solid rgba(33, 191, 126, .34);
    border-radius: 999px;
    color: #b2f4d0;
    min-height: 38px;
    padding: 9px 14px;
}

.page-head {
    max-width: 1280px;
    padding: 22px 24px 12px;
}

.page-head h1 {
    color: #fff;
    font-size: 26px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.15;
}

.card,
.metrics,
.content-grid,
.grid-two,
.alert,
.success {
    max-width: 1280px;
}

.card {
    background: var(--card-bg);
    border: 1px solid #273846;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
}

.card:not(.brand-hero) {
    border-top: 3px solid var(--accent);
}

.card-header {
    background: linear-gradient(180deg, var(--card-head), var(--card-bg));
    border-bottom: 1px solid #293a49;
    min-height: 58px;
    padding: 14px 18px;
}

.card-header h2 {
    color: #fff;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: 0;
}

.card-header p {
    font-size: 13px;
}

.button-row,
.topbar-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

button,
.button {
    background: linear-gradient(180deg, #2bd18e, var(--accent));
    border: 1px solid var(--accent);
    border-radius: 5px;
    color: #04130d;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .01em;
    min-height: 38px;
    padding: 9px 15px;
    text-transform: uppercase;
}

button:hover,
.button:hover {
    background: #5de2a5;
    color: #03120c;
}

.button.secondary {
    background: #10251e;
    border-color: #235b45;
    color: #baf7d8;
}

.button.secondary:hover {
    background: #153528;
    color: #fff;
}

.danger-button {
    background: linear-gradient(180deg, #f06b61, var(--danger));
    border-color: var(--danger);
    color: #fff;
}

button:disabled {
    background: #5f6c77;
    border-color: #5f6c77;
    color: #101820;
}

label {
    color: #a9c5da;
    font-size: 12px;
    font-weight: 800;
}

input,
select,
textarea {
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 5px;
    color: var(--text-main);
    font-size: 13px;
    min-height: 40px;
    padding: 9px 11px;
}

textarea {
    min-height: 92px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--field-border-focus);
    box-shadow: 0 0 0 3px rgba(33, 191, 126, .14);
}

.admin-form,
.card form.form-grid,
.card form.compact,
.single-action-form,
.table-toolbar,
.order-filter-bar {
    background: linear-gradient(180deg, #101821, #0d141c);
    border: 1px solid #263846;
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
    padding: 16px;
}

.card > form,
.card > table,
.card > .empty-state,
.card > .workflow-strip,
.card > dl,
.card > .timeline,
.card > .check-list {
    margin: 16px;
}

.form-grid {
    gap: 14px 16px;
}

.field {
    background: transparent;
    border: 0;
    color: #a9c5da;
    padding: 0;
}

.field:focus-within {
    box-shadow: none;
}

.form-actions {
    align-self: end;
}

.form-actions button,
.single-action-form button {
    min-width: 190px;
}

.file-field {
    min-height: 64px;
}

.file-field span {
    background: rgba(33, 191, 126, .12);
    border: 1px dashed rgba(127, 240, 186, .34);
    border-radius: 5px;
    color: #b2f4d0;
    min-height: 40px;
}

.datetime-picker-shell {
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: 5px;
    min-height: 40px;
}

.datetime-picker-shell strong {
    border-radius: 4px;
}

.metrics {
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    padding: 0 24px 18px;
}

.info-card {
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    min-height: 128px;
    padding: 18px;
}

.info-card span {
    font-size: 13px;
    font-weight: 800;
}

.info-card strong {
    font-size: 38px;
}

.info-card em {
    font-size: 12px;
}

.info-card.blue { background: linear-gradient(135deg, #145c9d, #2b89db); }
.info-card.amber { background: linear-gradient(135deg, #9d5e11, #d68a22); }
.info-card.green { background: linear-gradient(135deg, #0d7548, #23aa69); }
.info-card.teal { background: linear-gradient(135deg, #0b8d67, #29c887); }
.info-card.red { background: linear-gradient(135deg, #9f2d2d, #ce4646); }
.info-card.violet { background: linear-gradient(135deg, #53319a, #9b62d9); }

.brand-hero {
    background:
        radial-gradient(circle at 86% 10%, rgba(33, 191, 126, .22), transparent 250px),
        linear-gradient(135deg, #0a1017, #10251f);
    border-top: 0;
    gap: 28px;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    padding: 24px;
}

.brand-hero img {
    border-radius: var(--radius);
}

.brand-hero h2 {
    font-size: 28px;
}

.eyebrow {
    color: var(--accent-2);
    letter-spacing: .06em;
}

.content-grid,
.grid-two {
    gap: 18px;
    padding: 0 24px;
}

.workflow-strip {
    gap: 12px;
}

.workflow-strip span {
    background: #0d151e;
    border-color: #2a3a48;
    border-left-color: var(--accent);
    border-radius: var(--radius);
}

table {
    background: #0d141c;
    border: 1px solid #293a49;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius);
    overflow: hidden;
    width: calc(100% - 32px);
}

th,
td {
    border-bottom: 1px solid #263846;
    padding: 11px 12px;
}

th {
    background: #14202b;
    border-bottom: 2px solid #1c9b70;
    color: #b8d6ec;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
}

tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, .018);
}

tr:hover td {
    background: #152330;
}

.table-shell {
    margin: 16px;
    overflow-x: auto;
}

.table-shell table,
.admin-data-table {
    width: 100%;
}

.table-toolbar {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(260px, 1fr) 170px 150px 110px auto auto;
    margin: 16px;
}

.order-filter-bar {
    grid-template-columns: minmax(260px, 1fr) 170px 220px auto auto;
}

.status,
.badge,
.soft-chip,
.stock-pill {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    min-height: 26px;
    padding: 6px 10px;
}

.badge,
.soft-chip {
    background: #0b141c;
    border: 1px solid #2b4050;
    color: #c6d5df;
}

.status.open,
.status.pending {
    background: rgba(216, 147, 47, .18);
    color: #ffc985;
}

.status.fulfilled,
.status.approved,
.status.matched,
.status.standard,
.status.sent {
    background: rgba(33, 191, 126, .16);
    color: #9cf2c1;
}

.status.rejected,
.status.unfulfilled,
.status.backorder,
.status.hotline,
.status.partial,
.status.mismatch,
.status.extra {
    background: rgba(223, 90, 80, .18);
    color: #ffaea8;
}

.stock-pill.is-ok {
    background: rgba(33, 191, 126, .16);
    border-color: rgba(33, 191, 126, .34);
    color: #9cf2c1;
}

.stock-pill.is-empty {
    background: rgba(223, 90, 80, .16);
    border-color: rgba(223, 90, 80, .34);
    color: #ffaea8;
}

.empty-state,
.guided-empty {
    background: #0a1118;
    border: 1px dashed #324555;
    border-radius: var(--radius);
    color: var(--text-muted);
}

.empty-state strong,
.guided-empty strong {
    color: #fff;
}

.alert,
.success,
.inline-warning,
.instruction-strip {
    border-radius: var(--radius);
    max-width: 1280px;
}

.alert,
.inline-warning {
    background: rgba(223, 90, 80, .15);
    border: 1px solid rgba(223, 90, 80, .3);
    color: #ffb5af;
}

.success {
    background: rgba(33, 191, 126, .15);
    border: 1px solid rgba(33, 191, 126, .3);
    color: #9cf2c1;
}

.mass-upload-head,
.company-lock,
.customer-summary {
    background: linear-gradient(135deg, rgba(33, 191, 126, .14), rgba(8, 16, 23, .88));
    border: 1px solid rgba(33, 191, 126, .28);
    border-radius: var(--radius);
}

.product-search-row {
    gap: 14px;
    grid-template-columns: minmax(260px, 1fr) 140px;
    margin: 16px;
}

.product-result-list {
    gap: 10px;
    margin: 16px;
    max-height: 580px;
}

.product-card {
    background: #111b25;
    border: 1px solid #2a3a48;
    border-radius: var(--radius);
    grid-template-columns: 64px minmax(0, 1fr) 110px 110px 72px;
    padding: 12px;
}

.product-card:hover {
    border-color: rgba(33, 191, 126, .42);
    box-shadow: inset 4px 0 0 var(--accent);
}

.product-card p,
.table-product-name {
    color: #fff;
    font-weight: 800;
}

.product-result-stock {
    background: #081018;
    border: 1px solid #263846;
    border-radius: var(--radius);
}

.product-photo-hover,
.stock-photo-bubble {
    background: #020406;
    border: 1px solid #224334;
    border-radius: var(--radius);
    height: 58px;
    width: 58px;
}

.stock-photo-bubble {
    height: 64px;
    width: 64px;
}

.product-photo-hover span,
.stock-photo-bubble span {
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.product-photo-hover:hover img,
.stock-photo-bubble:hover img {
    border: 1px solid rgba(127, 240, 186, .65);
    transform: scale(2.6);
}

.basket-panel {
    margin-top: 18px;
}

.basket-panel > button {
    margin: 0 16px 16px;
}

.summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.summary-grid div {
    background: #0b131b;
    border: 1px solid #263846;
    border-radius: var(--radius);
    padding: 14px;
}

.summary-grid dt {
    color: #a9c5da;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.summary-grid dd {
    color: #fff;
    font-weight: 650;
}

.flow {
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.flow li {
    background: #101922;
    border: 1px solid #2a3a48;
    border-radius: var(--radius);
    min-height: 58px;
}

.flow .active {
    background: rgba(33, 191, 126, .08);
    border-color: var(--accent);
    color: #a7f6ca;
}

.current-step-layout {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 300px;
    padding: 18px;
}

.current-step-side {
    background: #0a1118;
    border: 1px solid #263846;
    border-radius: var(--radius);
    padding: 16px;
}

.current-step-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
}

.current-step-side dl {
    display: grid;
    gap: 10px 14px;
    grid-template-columns: minmax(120px, .9fr) minmax(0, 1.1fr);
}

.current-step-side dt,
.current-step-side dd {
    min-width: 0;
}

.current-step-side dd {
    margin: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.single-action-form {
    margin: 0;
}

.single-action-form p {
    color: var(--text-soft);
    margin: 0;
}

.approval-form {
    gap: 8px;
}

.timeline {
    background: #0d151e;
    border: 1px solid #253746;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    margin: 12px 16px;
    padding: 12px 14px;
}

.timeline strong {
    color: #fff;
}

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

.login-shell {
    background:
        radial-gradient(circle at 15% 12%, rgba(33, 191, 126, .24), transparent 260px),
        radial-gradient(circle at 80% 6%, rgba(35, 119, 200, .16), transparent 300px),
        #04070b;
}

.login-panel-premium {
    border-radius: 8px;
}

.login-logo-card {
    border-radius: 8px;
}

/* Cleaner login screen override. UI only. */
.login-shell {
    align-items: center;
    background:
        radial-gradient(circle at 18% 20%, rgba(33, 191, 126, .16), transparent 300px),
        radial-gradient(circle at 88% 12%, rgba(35, 119, 200, .10), transparent 320px),
        linear-gradient(135deg, #04070b 0%, #071018 52%, #05090d 100%);
    gap: 42px;
    grid-template-columns: minmax(420px, 640px) 420px;
    justify-content: center;
    min-height: 100vh;
    padding: 48px;
}

.login-shell:before {
    background:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .45;
}

.login-orbit {
    display: none;
}

.login-stage {
    display: grid;
    gap: 24px;
}

.login-logo-card {
    background: #020406;
    border: 1px solid rgba(127, 240, 186, .18);
    border-radius: 10px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .44);
    max-width: 420px;
    padding: 18px;
}

.login-logo-card img {
    display: block;
    height: auto;
    width: 100%;
}

.login-copy {
    margin-top: 0;
    max-width: 620px;
}

.login-copy .eyebrow {
    color: #8ff1bd;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
}

.login-copy h1 {
    color: #fff;
    font-size: 46px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.08;
    margin: 12px 0 14px;
    max-width: 600px;
}

.login-copy p {
    color: #a9bac7;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    max-width: 560px;
}

.login-feature-grid {
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 4px;
    max-width: 620px;
}

.login-feature-grid article {
    background: rgba(17, 25, 34, .82);
    border: 1px solid #263846;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    padding: 14px;
}

.login-feature-grid strong {
    color: #8ff1bd;
    font-size: 11px;
    margin-bottom: 8px;
}

.login-feature-grid span {
    color: #dce8ef;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.login-panel-premium {
    background: linear-gradient(180deg, rgba(18, 28, 38, .96), rgba(11, 18, 26, .98));
    border: 1px solid #2a3b49;
    border-radius: 10px;
    box-shadow: 0 28px 82px rgba(0, 0, 0, .56);
    padding: 0;
}

.login-panel-glow {
    background: linear-gradient(90deg, #20b879, #7ff0ba, #20b879);
    height: 3px;
    margin: 0;
}

.login-card-head {
    border-bottom: 1px solid #263846;
    padding: 26px 28px 18px;
}

.login-card-head span {
    color: #8ff1bd;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-card-head h2 {
    color: #fff;
    font-size: 30px;
    font-weight: 850;
    letter-spacing: 0;
    margin: 8px 0 6px;
}

.login-card-head p {
    color: #9fb1bf;
    font-size: 13px;
    margin: 0;
}

.login-form {
    gap: 16px;
    margin-top: 0;
    padding: 24px 28px 0;
}

.login-form label {
    color: #a9c5da;
    font-size: 12px;
    font-weight: 850;
    gap: 7px;
}

.login-form input {
    background: #060c13;
    border: 1px solid #314657;
    border-radius: 6px;
    color: #f5fbff;
    min-height: 46px;
    padding: 10px 12px;
}

.login-form input::placeholder {
    color: #607483;
}

.login-form button {
    border-radius: 6px;
    font-size: 13px;
    margin-top: 4px;
    min-height: 46px;
    width: 100%;
}

.login-secure-note {
    background: rgba(33, 191, 126, .08);
    border-top: 1px solid #263846;
    color: #95aebe;
    gap: 12px;
    margin-top: 24px;
    padding: 18px 28px 24px;
}

.login-secure-note span {
    background: #20b879;
    box-shadow: 0 0 0 4px rgba(33, 191, 126, .15);
}

.login-secure-note p {
    font-size: 12px;
    line-height: 1.55;
}

/* PDF feedback polish: keep guide cards readable and reduce cramped order forms. */
.form-guide-strip {
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 16px;
    margin: 18px 18px 20px;
}

.form-guide-strip div {
    align-items: start;
    column-gap: 13px;
    grid-template-columns: 40px minmax(0, 1fr);
    min-height: 92px;
    padding: 16px;
}

.form-guide-strip span {
    height: 34px;
    width: 34px;
}

.form-guide-strip strong {
    font-size: 14px;
    line-height: 1.25;
}

.form-guide-strip small {
    grid-column: 2;
    line-height: 1.5;
    overflow-wrap: normal;
    white-space: normal;
    word-break: normal;
}

.order-header-grid {
    gap: 16px;
    padding-top: 16px;
}

.datetime-picker-field {
    scroll-margin: 180px;
}

.datetime-picker-shell {
    min-height: 46px;
    padding: 8px 10px;
}

.datetime-picker-shell > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datetime-enter-button {
    align-items: center;
    align-self: center;
    background: linear-gradient(180deg, #2dd18f 0%, #18b875 100%);
    border: 1px solid rgba(92, 255, 180, .38);
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(13, 190, 124, .16);
    color: #04120d;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    letter-spacing: .02em;
    margin-left: auto;
    margin-right: 8px;
    min-height: 31px;
    min-width: 70px;
    padding: 7px 12px;
    position: relative;
    text-transform: uppercase;
    z-index: 2;
}

.datetime-enter-button:hover {
    filter: brightness(1.06);
}

.field-help {
    color: #8fa8b8;
    display: block;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 6px;
}

.role-instruction {
    background: rgba(33, 191, 126, .08);
    border: 1px solid rgba(33, 191, 126, .2);
    border-radius: 8px;
    color: #dbeaf0;
    margin: 0 18px 16px;
    padding: 12px 14px;
}

.current-step-main .documents-table,
.current-step-main table {
    margin-top: 0;
}

.po-step-strip {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.order-step-panel {
    background: rgba(12, 20, 29, .62);
    border: 1px solid #203241;
    border-radius: 8px;
    margin: 18px;
    padding: 18px;
}

.step-heading {
    align-items: center;
    display: flex;
    gap: 13px;
    margin-bottom: 16px;
}

.step-heading > span {
    align-items: center;
    background: linear-gradient(135deg, #24c786, #78f0b8);
    border-radius: 999px;
    color: #04110b;
    display: inline-flex;
    flex: 0 0 auto;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.step-heading h3 {
    color: #fff;
    font-size: 18px;
    margin: 0 0 4px;
}

.step-heading p {
    color: #9fb4c2;
    margin: 0;
}

.po-upload-field {
    margin: 18px 0 14px;
}

.customer-edit-grid {
    align-items: end;
    display: grid;
    gap: 10px;
    grid-template-columns: .8fr 1.2fr 1.2fr 1fr .9fr 1fr 1fr 1.2fr .9fr 1.4fr auto;
}

.small-button {
    min-height: 34px;
    padding: 8px 12px;
    white-space: nowrap;
}

.amend-lines-card .table-wrap {
    overflow-x: auto;
}

.line-amend-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.line-amend-form input {
    width: 90px;
    min-height: 38px;
}

.add-line-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(148, 178, 199, .18);
}

.add-line-form button {
    margin-top: 10px;
}

.audit-detail {
    display: inline-block;
    margin: 2px 8px 2px 0;
    color: var(--muted);
    white-space: nowrap;
}

.audit-detail strong {
    color: var(--text);
}

/* AdminLTE dark polish override. CSS only: no fields, flow, or PHP changed. */
:root {
    --admin-bg: #070d13;
    --admin-panel: #101820;
    --admin-panel-2: #0c141c;
    --admin-panel-3: #131f29;
    --admin-border: #243746;
    --admin-border-soft: rgba(148, 178, 199, .16);
    --admin-text: #eef7fb;
    --admin-muted: #9eb3c2;
    --admin-label: #9bd2f5;
    --admin-green: #23c987;
    --admin-green-dark: #0d3a2a;
    --admin-red: #ef5d55;
    --shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

body {
    background:
        radial-gradient(circle at top right, rgba(22, 128, 78, .18), transparent 34rem),
        linear-gradient(180deg, #060a0f 0%, var(--admin-bg) 100%);
    color: var(--admin-text);
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 0;
}

.sidebar {
    background: linear-gradient(180deg, #07100e 0%, #071018 38%, #080e14 100%);
    border-right-color: #1e303d;
    padding: 18px 14px;
}

.brand {
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 16px;
}

.brand img {
    border-color: #2a3d4d;
    max-height: 84px;
    padding: 10px;
}

.brand strong {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
}

.brand small {
    color: var(--admin-muted);
    font-size: 13px;
}

.sidebar nav {
    gap: 8px;
}

.sidebar nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #dce7ee;
    display: flex;
    font-size: 13px;
    font-weight: 800;
    gap: 10px;
    min-height: 42px;
    padding: 10px 12px;
    text-transform: uppercase;
}

.sidebar nav a:before {
    background: #1b2a35;
    border-radius: 5px;
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.sidebar nav a.active,
.sidebar nav a:hover {
    background: linear-gradient(90deg, rgba(35, 201, 135, .28), rgba(35, 201, 135, .08));
    border-color: rgba(35, 201, 135, .32);
    box-shadow: inset 4px 0 0 var(--admin-green);
}

.sidebar nav a.active:before,
.sidebar nav a:hover:before {
    background: var(--admin-green);
}

.topbar {
    background: rgba(7, 13, 19, .96);
    border-bottom-color: var(--admin-border);
    min-height: 70px;
    padding: 14px 32px;
}

.topbar strong {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.page-head {
    max-width: 1320px;
    padding: 22px 32px 14px;
}

.page-head h1 {
    font-size: 24px;
    font-weight: 800;
}

.card,
.metrics,
.content-grid,
.grid-two,
.alert,
.success {
    max-width: 1320px;
}

.card {
    background: linear-gradient(180deg, var(--admin-panel) 0%, var(--admin-panel-2) 100%);
    border-color: var(--admin-border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}

.card-header {
    background: linear-gradient(180deg, rgba(22, 31, 42, .96), rgba(13, 22, 31, .96));
    border-bottom: 1px solid var(--admin-border);
    padding: 18px 22px;
}

.card-header h2 {
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
}

.card-header p {
    color: #9eb3c2;
    font-size: 13px;
    margin-top: 4px;
}

.card > form,
.card > table,
.card > .table-shell,
.card > .empty-state,
.card > .workflow-strip,
.card > dl,
.card > .timeline,
.card > .check-list {
    padding: 18px 22px;
}

.admin-form,
.form-grid,
.compact,
.csv-upload-form,
.order-step-panel {
    background: rgba(8, 16, 23, .42);
    border: 1px solid var(--admin-border-soft);
    border-radius: 8px;
}

.form-grid {
    gap: 16px;
}

.field {
    color: var(--admin-label);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
}

.field span {
    color: var(--admin-label);
}

input,
select,
textarea {
    background: #081018;
    border: 1px solid #314657;
    border-radius: 6px;
    color: #f5fbff;
    font-size: 14px;
    font-weight: 600;
    min-height: 42px;
    outline: none;
    padding: 10px 12px;
    width: 100%;
}

textarea {
    line-height: 1.45;
    min-height: 92px;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #748696;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--admin-green);
    box-shadow: 0 0 0 3px rgba(35, 201, 135, .14);
}

button,
.button {
    align-items: center;
    background: linear-gradient(180deg, #2ed394 0%, var(--admin-green) 100%);
    border: 1px solid rgba(143, 241, 189, .28);
    border-radius: 6px;
    color: #03140e;
    display: inline-flex;
    font-size: 13px;
    font-weight: 900;
    justify-content: center;
    letter-spacing: .01em;
    min-height: 40px;
    padding: 10px 16px;
    text-transform: uppercase;
}

button:hover,
.button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.button.secondary {
    background: #0f2d23;
    border-color: #23694f;
    color: #bff8da;
}

.danger-button {
    background: linear-gradient(180deg, #ff736b 0%, var(--admin-red) 100%);
    color: #fff;
}

.form-actions {
    align-items: end;
    display: flex;
    gap: 10px;
}

.form-actions button,
.form-actions .button {
    width: auto;
}

.mass-upload-head {
    align-items: center;
    background: rgba(35, 201, 135, .06);
    border: 1px solid rgba(35, 201, 135, .18);
    border-radius: 8px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 14px;
}

.mass-upload-head strong {
    color: #fff;
    display: block;
    font-size: 15px;
}

.mass-upload-head span {
    color: var(--admin-muted);
    display: block;
    font-size: 13px;
    margin-top: 3px;
}

.file-field {
    background: rgba(8, 16, 23, .58);
    border: 1px dashed #315368;
    border-radius: 8px;
    padding: 13px;
}

.admin-data-table,
table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    width: 100%;
}

.admin-data-table th,
.admin-data-table td,
table th,
table td {
    border-bottom: 1px solid #223543;
    color: #dceaf2;
    font-size: 13px;
    padding: 13px 14px;
    vertical-align: middle;
}

.admin-data-table th,
table th {
    background: #111c26;
    border-bottom: 2px solid var(--admin-green);
    color: #a9d9f7;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.admin-data-table tbody tr:nth-child(even),
table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, .018);
}

.admin-data-table tbody tr:hover,
table tbody tr:hover {
    background: rgba(35, 201, 135, .05);
}

.admin-data-table td[colspan] {
    padding: 12px 14px;
}

.inline-edit-grid.customer-edit-grid {
    align-items: end;
    background: transparent;
    display: grid;
    gap: 10px;
    grid-template-columns:
        minmax(100px, .75fr)
        minmax(170px, 1.2fr)
        minmax(190px, 1.3fr)
        minmax(140px, .95fr)
        minmax(120px, .85fr)
        minmax(140px, 1fr)
        minmax(140px, 1fr)
        minmax(190px, 1.3fr)
        minmax(130px, .9fr)
        minmax(190px, 1.35fr)
        minmax(176px, auto);
    min-width: 1720px;
}

.inline-edit-grid.customer-edit-grid .field {
    gap: 5px;
}

.inline-edit-grid.customer-edit-grid .field span {
    color: #8fc6e9;
    display: block;
    font-size: 11px;
    line-height: 1;
    margin-bottom: 5px;
}

.inline-edit-grid.customer-edit-grid input {
    font-size: 13px;
    min-height: 38px;
    padding: 8px 10px;
}

.row-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.row-actions button {
    min-height: 38px;
    padding: 8px 12px;
    white-space: nowrap;
}

.admin-data-table:has(.customer-edit-grid) {
    display: block;
    overflow-x: auto;
    padding: 0;
}

.admin-data-table:has(.customer-edit-grid) thead,
.admin-data-table:has(.customer-edit-grid) tbody,
.admin-data-table:has(.customer-edit-grid) tr {
    min-width: 1720px;
}

@media (max-width: 980px) {
    .topbar {
        padding: 14px;
    }

    .card > form,
    .card > table,
    .card > .table-shell,
    .card > .empty-state,
    .card > .workflow-strip,
    .card > dl,
    .card > .timeline,
    .card > .check-list {
        padding: 14px;
    }

    .mass-upload-head,
    .form-actions,
    .row-actions {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }
}

@media print {
    .sidebar,
    .topbar,
    .page-head,
    .button,
    button,
    .current-step-card {
        display: none !important;
    }

    .app {
        margin-left: 0;
    }

    body {
        background: #fff;
        color: #111;
    }

    .card {
        border: 1px solid #ccc;
        box-shadow: none;
        color: #111;
    }
}

@media (max-width: 980px) {
    .sidebar {
        position: static;
        width: auto;
    }

    .app {
        margin-left: 0;
    }

    .topbar {
        position: static;
    }

    .metrics,
    .content-grid,
    .grid-two,
    .brand-hero,
    .form-grid,
    .workflow-strip,
    .table-toolbar,
    .order-filter-bar,
    .current-step-layout,
    .form-guide-strip,
    .product-search-row,
    .product-card {
        grid-template-columns: 1fr;
    }

    .po-step-strip,
    .customer-edit-grid {
        grid-template-columns: 1fr;
    }

    .product-result-stock,
    .product-card .button {
        grid-column: auto;
    }

    .page-head,
    .metrics,
    .content-grid,
    .grid-two {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* Final user management and profile photo overrides. */
.sidebar-user-card {
    align-items: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, .16), rgba(13, 22, 31, .92));
    border: 1px solid rgba(52, 211, 153, .28);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    grid-template-columns: 54px 1fr;
    margin: 14px 6px 22px;
    padding: 12px;
    position: relative;
}

.sidebar-user-card strong,
.sidebar-user-card small {
    display: block;
}

.sidebar-user-card strong {
    color: #f7fbff;
    font-size: 14px;
    line-height: 1.25;
}

.sidebar-user-card small {
    color: #9fc2d7;
    font-size: 12px;
    margin-top: 3px;
}

.sidebar-user-photo,
.user-table-avatar {
    align-items: center;
    background: #02070a;
    border: 1px solid rgba(52, 211, 153, .34);
    border-radius: 999px;
    color: #82ffd2;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
}

.sidebar-user-photo {
    cursor: pointer;
    height: 54px;
    transition: box-shadow .18s ease, transform .18s ease;
    width: 54px;
    z-index: 4;
}

.sidebar-user-photo:hover {
    box-shadow: 0 20px 52px rgba(0, 0, 0, .48);
    transform: scale(2.15);
}

.sidebar-user-photo img,
.user-table-avatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.sidebar-user-photo input,
.table-file-button input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.user-admin-form .file-field {
    min-height: 76px;
}

.users-table {
    min-width: 1180px;
}

.users-table input,
.users-table select {
    font-size: 13px;
    min-height: 40px;
    padding: 9px 11px;
}

.user-table-avatar {
    border-radius: 8px;
    height: 58px;
    margin-bottom: 8px;
    width: 58px;
}

.table-file-button {
    align-items: center;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(52, 211, 153, .35);
    border-radius: 7px;
    color: #9fffd2;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    justify-content: center;
    min-height: 30px;
    padding: 6px 9px;
    position: relative;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-file-button:hover {
    background: rgba(35, 201, 135, .22);
}
/* Final Xeon sidebar override: keep logo/profile compact and menu scrollable. */
.sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.sidebar .brand {
    flex-shrink: 0 !important;
    margin-bottom: 10px !important;
    padding: 12px 12px 14px !important;
}

.sidebar .brand img {
    height: auto !important;
    max-height: 82px !important;
    object-fit: contain !important;
}

.sidebar .sidebar-user-card {
    flex-shrink: 0 !important;
    gap: 9px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    margin: 0 6px 12px !important;
    padding: 10px !important;
}

.sidebar .sidebar-user-photo {
    height: 46px !important;
    width: 46px !important;
}

.sidebar .sidebar-user-card strong {
    font-size: 13px !important;
    line-height: 1.15 !important;
}

.sidebar .sidebar-user-card small {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

.sidebar .sidebar-user-phone {
    color: #9fffd2 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.sidebar .sidebar-photo-hint {
    font-size: 9px !important;
    line-height: 1.15 !important;
    margin-top: 4px !important;
}

.sidebar nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 22px !important;
    scrollbar-color: rgba(33, 191, 126, .6) rgba(255, 255, 255, .05);
    scrollbar-width: thin;
}

.sidebar nav a {
    align-self: start !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 46px !important;
    padding: 11px 14px !important;
}

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

.sidebar nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .04);
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(33, 191, 126, .62);
    border-radius: 999px;
}
/* Absolute final sidebar row stability for every role dashboard. */
.sidebar nav {
    align-content: start !important;
    display: grid !important;
    grid-auto-rows: max-content !important;
}

.sidebar nav a,
.sidebar nav a.active,
.sidebar nav a:hover {
    align-self: start !important;
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
}