.ocb-wrap {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 12;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 64px);
}
.ocb-wrap.ocb-inline { position: static; max-width: none; margin-top: 10px; }
.ocb {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    outline: none;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
    transition: box-shadow .15s ease, transform .15s ease;
}
.ocb:hover, .ocb:focus { z-index: 40; box-shadow: 0 6px 18px rgba(15, 23, 42, .16); transform: translateY(-1px); }
.ocb > i { font-size: 12px; }
.ocb-changed { background: rgba(255, 247, 237, .96); color: #c2410c; border: 1px solid rgba(234, 88, 12, .28); }
.ocb-approved { background: rgba(236, 253, 245, .96); color: #047857; border: 1px solid rgba(16, 185, 129, .32); }
.ocb-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ea580c;
    color: #fff;
    font-size: 10px;
}
.ocb-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 300px;
    max-width: 80vw;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #fff;
    color: #334155;
    font-weight: 500;
    white-space: normal;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ocb:hover .ocb-pop, .ocb:focus .ocb-pop { opacity: 1; visibility: visible; transform: none; }
.ocb-pop-title { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #94a3b8; }
.ocb-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(148, 163, 184, .35);
}
.ocb-row:last-of-type { padding-bottom: 0; border-bottom: 0; }
.ocb-field { font-size: 12px; font-weight: 700; color: #0f172a; }
.ocb-time { font-size: 10px; color: #94a3b8; text-align: right; }
.ocb-values { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; word-break: break-word; }
.ocb-values del { color: #94a3b8; }
.ocb-values b { color: #c2410c; font-weight: 600; }
.ocb-values i { font-size: 11px; color: #94a3b8; }
.ocb-note, .ocb-more { font-size: 12px; color: #475569; }
html.app-skin-dark .ocb-changed { background: rgba(124, 45, 18, .85); color: #fed7aa; border-color: rgba(251, 146, 60, .35); }
html.app-skin-dark .ocb-approved { background: rgba(6, 78, 59, .85); color: #a7f3d0; border-color: rgba(52, 211, 153, .35); }
html.app-skin-dark .ocb-pop { background: #1e293b; color: #cbd5e1; border-color: rgba(148, 163, 184, .2); }
html.app-skin-dark .ocb-field { color: #f1f5f9; }
html.app-skin-dark .ocb-values b { color: #fdba74; }
html.app-skin-dark .ocb-note, html.app-skin-dark .ocb-more { color: #cbd5e1; }
.occ-panel {
    margin-bottom: 22px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .25);
    overflow: hidden;
}
.occ-panel.has-pending { border-color: rgba(234, 88, 12, .35); box-shadow: 0 8px 22px rgba(234, 88, 12, .08); }
.occ-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(148, 163, 184, .08);
}
.occ-panel.has-pending .occ-head { background: rgba(255, 237, 213, .55); }
.occ-icon {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 88, 12, .12);
    color: #ea580c;
    font-size: 16px;
}
.occ-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.occ-title b { font-size: 14px; color: #0f172a; }
.occ-title span { font-size: 12px; color: #64748b; }
.occ-review { background: #ea580c; border-color: #ea580c; color: #fff; border-radius: 4px; font-size: 11px; }
.occ-review:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.occ-list { max-height: 320px; overflow-y: auto; }
.occ-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 6px 14px;
    padding: 11px 16px;
    border-top: 1px solid rgba(148, 163, 184, .18);
    font-size: 13px;
}
.occ-row.is-pending { box-shadow: inset 3px 0 0 #ea580c; }
.occ-field { font-weight: 700; color: #334155; }
.occ-values { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; word-break: break-word; }
.occ-values del { color: #94a3b8; }
.occ-values i { color: #94a3b8; font-size: 12px; }
.occ-values b { color: #0f172a; font-weight: 600; }
.occ-row.is-pending .occ-values b { color: #c2410c; }
.occ-meta { font-size: 11px; color: #94a3b8; white-space: nowrap; }
@media (max-width: 767.98px) {
    .occ-row { grid-template-columns: 1fr; }
    .occ-meta { white-space: normal; }
}
html.app-skin-dark .occ-panel.has-pending .occ-head { background: rgba(124, 45, 18, .35); }
html.app-skin-dark .occ-title b, html.app-skin-dark .occ-values b { color: #f1f5f9; }
html.app-skin-dark .occ-field { color: #cbd5e1; }
html.app-skin-dark .occ-row.is-pending .occ-values b { color: #fdba74; }
.occ-panel.occ-approved { border-color: rgba(16, 185, 129, .35); }
.occ-panel.occ-approved .occ-head { background: rgba(209, 250, 229, .55); }
.occ-panel.occ-approved .occ-icon { background: rgba(16, 185, 129, .14); color: #059669; }
.occ-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid rgba(148, 163, 184, .18); font-size: 13px; color: #334155; }
.occ-note i { color: #059669; margin-top: 2px; }
html.app-skin-dark .occ-panel.occ-approved .occ-head { background: rgba(6, 78, 59, .35); }
html.app-skin-dark .occ-note { color: #cbd5e1; }
.ocb.ocb-mini { padding: 3px 8px 3px 6px; margin-left: 6px; font-size: 10px; box-shadow: none; vertical-align: 1px; }
.ocb.ocb-mini > i { font-size: 10px; }
.ocb.ocb-mini .ocb-pop { width: 280px; }
input.occ-field-changed, select.occ-field-changed, textarea.occ-field-changed, .select2.occ-field-changed .select2-selection { border-color: rgba(234, 88, 12, .6) !important; box-shadow: 0 0 0 3px rgba(234, 88, 12, .1) !important; }
.ocb-inline .ocb-changed { cursor: pointer; }
#customerChanges { scroll-margin-top: 90px; }
.occ-panel.is-collapsed .occ-list { display: none; }
.occ-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 4px;
    background: transparent;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
}
.occ-toggle i { transition: transform .2s ease; }
.occ-toggle .occ-toggle-show, .occ-panel.is-collapsed .occ-toggle .occ-toggle-hide { display: none; }
.occ-panel.is-collapsed .occ-toggle .occ-toggle-show { display: inline; }
.occ-panel:not(.is-collapsed) .occ-toggle i { transform: rotate(180deg); }
.approval-filter {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: rgba(148, 163, 184, .12);
}
.approval-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.approval-filter-item:hover { color: #1e293b; }
.approval-filter-item i { font-size: 14px; }
.approval-filter-count {
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, .2);
    color: #475569;
    font-size: 11px;
    text-align: center;
}
.approval-filter-item.active { background: #fff; color: #1e293b; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.approval-filter-item.is-all.active i { color: #3454d1; }
.approval-filter-item.is-all.active .approval-filter-count { background: rgba(52, 84, 209, .12); color: #3454d1; }
.approval-filter-item.is-approved.active i { color: #059669; }
.approval-filter-item.is-approved.active .approval-filter-count { background: rgba(16, 185, 129, .14); color: #047857; }
.approval-filter-item.is-unapproved.active i { color: #ea580c; }
.approval-filter-item.is-unapproved.active .approval-filter-count { background: rgba(234, 88, 12, .14); color: #c2410c; }
@media (max-width: 575.98px) {
    .approval-filter { display: flex; }
    .approval-filter-item { flex: 1 1 100%; justify-content: space-between; }
}
html.app-skin-dark .approval-filter-item:hover, html.app-skin-dark .approval-filter-item.active { color: #f1f5f9; }
html.app-skin-dark .approval-filter-item.active { background: #1e293b; }
html.app-skin-dark .approval-filter-count { color: #cbd5e1; }
.ocb-pop > .ocb-time { text-align: left; }
.metal-weights {
    margin-bottom: 22px;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: linear-gradient(180deg, rgba(200, 147, 10, .06), transparent);
}
.metal-weights-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #a16207;
}
.metal-weights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.metal-weight {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid rgba(148, 163, 184, .2);
}
.metal-weight span { font-size: 11px; font-weight: 600; color: #64748b; }
.metal-weight b { font-size: 18px; color: #0f172a; }
html.app-skin-dark .metal-weight { background: rgba(15, 23, 42, .5); }
html.app-skin-dark .metal-weight b { color: #f1f5f9; }
html.app-skin-dark .metal-weights-title { color: #fbbf24; }
html.app-skin-dark .order-details-accordion .accordion-button { background: #1e293b !important; color: #e2e8f0 !important; box-shadow: none; }
html.app-skin-dark .order-details-accordion .accordion-button::after { filter: invert(1) brightness(1.6); }
.stage-ticks-row { position: relative; display: flex; justify-content: space-between; align-items: center; }
.stage-ticks-row::before { content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px; background: #cbd5e1; transform: translateY(-50%); }
.stage-ticks-fill { position: absolute; left: 9px; top: 50%; height: 2px; background: #22c55e; transform: translateY(-50%); }
.stage-tick {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
    border: 2px solid #cbd5e1;
    background: #fff;
}
.stage-tick-done { background: #22c55e; border-color: #22c55e; }
.stage-tick-current { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .2); }
.stage-tick-current::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; }
html.app-skin-dark .stage-ticks-row::before { background: #475569; }
html.app-skin-dark .stage-tick { background: #0f172a; border-color: #475569; }
html.app-skin-dark .stage-tick-done { background: #22c55e; border-color: #22c55e; }
html.app-skin-dark .stage-tick-current { border-color: #3b82f6; }
.nxl-navigation .nxl-mtext.nav-mtext-badges { display: inline-flex; align-items: center; flex: 1 1 auto; width: calc(100% - 40px); }
.nav-badges { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; }
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 20px;
    min-width: 20px;
    padding: 0 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
}
.nav-badge i { font-size: 11px; }
.nav-badge-open { background: #ef4444; color: #fff; }
.nav-badge-unread { background: rgba(59, 130, 246, .14); color: #2563eb; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .3); }
html.app-skin-dark .nav-badge-unread, html.app-navigation-dark .nav-badge-unread { background: rgba(96, 165, 250, .16); color: #93c5fd; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }
#candidates_body tr.candidate-row { cursor: pointer; transition: background-color .15s ease; }
#candidates_body tr.candidate-row:hover { background-color: rgba(59, 130, 246, .05); }
#candidates_body tr.candidate-row.selected, #candidates_body tr.candidate-row.selected > td { background-color: rgba(59, 130, 246, .1); }
#candidates_body .candidate-check, #candidate_check_all { width: 22px; height: 22px; margin: 0; cursor: pointer; border-width: 2px; }
#candidates_body tr.candidate-row > td:first-child { vertical-align: middle; }
.package-steps { position: relative; display: flex; justify-content: space-between; }
.package-steps::before { content: ""; position: absolute; top: 20px; left: 16.66%; right: 16.66%; height: 2px; background: #e2e8f0; }
.package-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.package-step-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: #fff; border: 2px solid #e2e8f0; color: #94a3b8; position: relative; z-index: 1; }
.package-step-label { font-size: 13px; font-weight: 600; color: #94a3b8; }
.package-step-date { font-size: 11px; color: #94a3b8; }
.package-step-done .package-step-icon { background: #22c55e; border-color: #22c55e; color: #fff; }
.package-step-done .package-step-label { color: #16a34a; }
.package-step-current .package-step-icon { border-color: #3b82f6; color: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, .15); }
.package-step-current .package-step-label { color: #2563eb; }
.package-product { transition: background-color .15s ease; }
.package-product:hover { background-color: rgba(59, 130, 246, .05); }
.package-product:last-child { border-bottom: 0 !important; }
html.app-skin-dark .package-steps::before { background: #334155; }
html.app-skin-dark .package-step-icon { background: #0f172a; border-color: #334155; }
html.app-skin-dark .package-step-done .package-step-icon { background: #22c55e; border-color: #22c55e; }
html.app-skin-dark .package-step-current .package-step-icon { border-color: #3b82f6; }