* { margin: 0; padding: 0; box-sizing: border-box; }
@font-face {
font-family: "Twemoji Country Flags";
src: url("/TwemojiCountryFlags.woff2") format("woff2");
font-display: swap;
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
}
body {
font-family: "Twemoji Country Flags", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
background: #0f172a;
color: #e2e8f0;
min-height: 100vh;
}
header {
background: linear-gradient(135deg, #1e293b, #334155);
padding: 10px 24px;
border-bottom: 1px solid #475569;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
height: 40px;
width: auto;
object-fit: contain;
}
.header-brand {
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
user-select: none;
transition: opacity 0.15s;
}
.header-brand:hover { opacity: 0.85 }
.header-brand:focus-visible { outline: 2px solid #f97316; outline-offset: 4px; border-radius: 4px }
.header-brand-divider {
width: 1px;
height: 28px;
background: #334155;
}
.header-brand-text {
display: flex;
flex-direction: column;
gap: 1px;
}
.header-brand-title {
font-size: 16px;
font-weight: 700;
color: #f8fafc;
letter-spacing: -0.2px;
line-height: 1.2;
}
.header-brand-title span {
color: #38bdf8;
}
.header-brand-sub {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #475569;
line-height: 1.2;
}
header h1 {
font-size: 18px;
font-weight: 600;
color: #f8fafc;
}
header h1 span { color: #38bdf8; }
.stock-stats {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 6px;
background: transparent;
border-radius: 0;
padding: 0;
}
.stock-stats[hidden] { display: none }
.stock-stat[hidden] { display: none }
.stock-stat {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 1px;
padding: 5px 12px 5px 15px;
border-radius: 8px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.70), rgba(15, 23, 42, 0.35));
border: 1px solid rgba(148, 163, 184, 0.10);
transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
overflow: hidden;
flex: 0 0 135px;
box-sizing: border-box;
}
.stock-stat::before {
content: "";
position: absolute;
left: 0;
top: 22%;
bottom: 22%;
width: 2px;
background: #38bdf8;
border-radius: 0 2px 2px 0;
opacity: 0.65;
transition: opacity 0.18s ease, top 0.18s ease, bottom 0.18s ease;
}
.stock-stat:hover {
border-color: rgba(56, 189, 248, 0.30);
background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.55));
}
.stock-stat:hover::before { opacity: 1; top: 12%; bottom: 12%; }
.stock-stat-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
line-height: 1.2;
white-space: nowrap;
}
.stock-stat-value {
color: #f1f5f9;
font-weight: 700;
font-size: 14px;
font-variant-numeric: tabular-nums;
line-height: 1.15;
letter-spacing: -0.2px;
}
html[data-theme="light"] .stock-stat {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(244, 241, 232, 0.55));
border-color: rgba(31, 30, 29, 0.08);
}
html[data-theme="light"] .stock-stat::before { background: #c96442; }
html[data-theme="light"] .stock-stat:hover {
border-color: rgba(201, 100, 66, 0.35);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 241, 232, 0.75));
}
html[data-theme="light"] .stock-stat-label { color: #8a8980; }
html[data-theme="light"] .stock-stat-value { color: #1f1e1d; }
.stock-stats-divider {
flex: 0 0 1px;
align-self: stretch;
margin: 4px 4px;
background: rgba(148, 163, 184, 0.25);
}
.stock-stats-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex: 0 0 auto;
align-self: center;
}
.stock-stats-quickfilter {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 32px;
height: 32px;
align-self: center;
padding: 0;
background: transparent;
border: 1px solid rgba(74, 222, 128, 0.30);
border-radius: 8px;
color: #4ade80;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stock-stats-quickfilter:not(:disabled):hover {
border-color: rgba(74, 222, 128, 0.45);
background: rgba(15, 23, 42, 0.55);
}
.stock-stats-quickfilter:disabled {
opacity: 0.4;
cursor: default;
}
.stock-stats-quickfilter[aria-pressed="true"] {
background: rgba(74, 222, 128, 0.18);
border-color: rgba(74, 222, 128, 0.55);
color: #86efac;
}
html[data-theme="light"] .stock-stats-divider {
background: rgba(31, 30, 29, 0.15);
}
html[data-theme="light"] .stock-stats-quickfilter {
border-color: rgba(22, 163, 74, 0.35);
color: #16a34a;
}
html[data-theme="light"] .stock-stats-quickfilter:not(:disabled):hover {
border-color: rgba(22, 163, 74, 0.45);
background: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .stock-stats-quickfilter[aria-pressed="true"] {
background: rgba(22, 163, 74, 0.12);
border-color: rgba(22, 163, 74, 0.55);
color: #15803d;
}
.qf-changed-cost { display: none; }
.qf-lari {
position: relative;
font-size: 15px;
font-weight: 700;
line-height: 1;
}
.qf-lari::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 130%;
height: 2px;
background: #ef4444;
border-radius: 1px;
transform: translate(-50%, -50%) rotate(-45deg);
}
.stock-stats-editmode {
flex: 0 0 auto;
display: none; align-items: center; justify-content: center;
width: 32px; height: 32px; align-self: center; padding: 0;
background: transparent;
border: 1px solid rgba(245, 158, 11, 0.30);
border-radius: 8px;
color: #f59e0b;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.stock-stats-editmode:hover {
border-color: rgba(245, 158, 11, 0.45);
background: rgba(15, 23, 42, 0.55);
}
.stock-stats-editmode[aria-pressed="true"] {
background: rgba(245, 158, 11, 0.18);
border-color: rgba(245, 158, 11, 0.55);
color: #fbbf24;
}
html[data-theme="light"] .stock-stats-editmode {
border-color: rgba(217, 119, 6, 0.35); color: #d97706;
}
html[data-theme="light"] .stock-stats-editmode:hover {
border-color: rgba(217, 119, 6, 0.45);
background: rgba(255, 255, 255, 0.85);
}
html[data-theme="light"] .stock-stats-editmode[aria-pressed="true"] {
background: rgba(217, 119, 6, 0.12);
border-color: rgba(217, 119, 6, 0.55);
color: #b45309;
}
.cost-changed-dot {
display: inline-block;
width: 5px; height: 5px;
border-radius: 50%;
vertical-align: middle;
margin-left: 5px;
}
.cost-dot-up { background: #ef4444; }
.cost-dot-down { background: #22c55e; }
.cost-dot-new { background: #facc15; }
.cat-cost-clear-btn {
display: none;
position: relative;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
align-self: center;
padding: 0;
background: transparent;
border: 1px solid rgba(239, 68, 68, 0.35);
border-radius: 8px;
color: #ef4444;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cat-cost-clear-btn:not(:disabled):hover {
border-color: rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.10);
}
.cat-cost-clear-btn:disabled {
opacity: 0.4;
cursor: default;
}
.cat-cost-clear-btn:disabled .badge { display: none; }
.cat-cost-clear-btn .badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 9px;
line-height: 12px;
border-radius: 8px;
border: 2px solid #1e293b;
box-sizing: border-box;
background: #ef4444;
color: #fff;
}
html[data-theme="light"] .cat-cost-clear-btn .badge { border-color: #faf9f5; }
.container { width: 100%; max-width: none; margin: 0 auto; padding: var(--sidebar-inset, 14px) 20px; }
.filters {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 24px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 16px 20px;
}
.filter-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.filter-search {
position: relative;
flex: 1;
}
.filter-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #475569;
pointer-events: none;
}
.filter-search input {
width: 100%;
background: #0f172a;
border: 1px solid #334155;
color: #e2e8f0;
padding: 10px 16px 10px 38px;
border-radius: 8px;
font-size: 15px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.filter-search input:focus {
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56,189,248,0.1);
}
.filter-search input::placeholder { color: #475569; }
.filter-search-close {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 6px;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s, color 0.15s;
}
.filter-search-close:hover { background: rgba(148, 163, 184, 0.10); color: #e2e8f0; }
.filter-search input { padding-right: 38px; }
html[data-theme="light"] .filter-search-close { color: #8a8980; }
html[data-theme="light"] .filter-search-close:hover {
background: rgba(31, 30, 29, 0.06);
color: #1f1e1d;
}
.search-modal {
position: fixed;
inset: 0;
z-index: 280;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 18vh 16px 24px;
opacity: 1;
transition: opacity 0.18s ease;
}
.search-modal[hidden] { display: none; }
@keyframes searchModalIn {
from { opacity: 0; transform: translateY(-12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.filter-group {
display: flex;
align-items: center;
gap: 0;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.2s;
}
.filter-group:focus-within { border-color: #38bdf8; }
.filter-group label {
padding: 0 10px 0 12px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #475569;
white-space: nowrap;
border-right: 1px solid #1e293b;
height: 38px;
display: flex;
align-items: center;
}
.filter-group select {
background: #0f172a;
border: none;
color: #e2e8f0;
padding: 0 12px;
height: 38px;
font-size: 14px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 28px;
}
.filter-group select option {
background: #1e293b;
color: #e2e8f0;
}
.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group input[type="month"],
.filter-group input[type="number"] {
background: #0f172a;
border: none;
color: #e2e8f0;
padding: 0 12px;
height: 38px;
font-size: 14px;
outline: none;
font-family: inherit;
min-width: 0;
width: 140px;
}
.filter-group input[type="number"] { width: 110px; }
.filter-group input[type="date"]::-webkit-calendar-picker-indicator,
.filter-group input[type="month"]::-webkit-calendar-picker-indicator {
filter: invert(0.65);
cursor: pointer;
}
.filter-group input::placeholder { color: #64748b; }
#resetBtn, #roadResetBtn, #salesResetBtn, #customersResetBtn, #analyticsResetBtn, #tygResetBtn, #skuResetBtn, #myOrdersResetBtn {
padding: 0 16px;
height: 38px;
border-radius: 8px;
background: transparent;
border: 1px solid #334155;
color: #64748b;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
margin-left: auto;
}
#resetBtn:hover, #roadResetBtn:hover, #salesResetBtn:hover, #customersResetBtn:hover, #analyticsResetBtn:hover, #tygResetBtn:hover, #skuResetBtn:hover, #myOrdersResetBtn:hover {
border-color: #ef4444;
color: #ef4444;
background: rgba(239,68,68,0.05);
}
.filter-toggle-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 14px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
color: #cbd5e1;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color .15s, color .15s, background .15s;
white-space: nowrap;
}
.filter-toggle-btn:hover {
border-color: #38bdf8;
color: #38bdf8;
}
.filter-toggle-btn[aria-expanded="true"] {
border-color: #38bdf8;
color: #38bdf8;
background: rgba(56,189,248,0.08);
}
.filter-toggle-chevron {
transition: transform .2s ease;
}
.filter-toggle-btn[aria-expanded="true"] .filter-toggle-chevron {
transform: rotate(180deg);
}
.filter-collapsible.collapsed {
display: none;
}
.filter-collapsible {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-favorites {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px solid #334155;
}
.fav-save {
display: flex;
align-items: center;
gap: 6px;
}
.fav-save input {
height: 32px;
padding: 0 10px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 6px;
color: #e2e8f0;
font-size: 12px;
width: 180px;
outline: none;
transition: border-color .15s;
}
.fav-save input:focus {
border-color: #38bdf8;
}
.fav-save input::placeholder { color: #475569; }
.fav-save-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
background: rgba(56,189,248,0.08);
border: 1px solid #38bdf8;
border-radius: 6px;
color: #38bdf8;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.fav-save-btn:hover {
background: rgba(56,189,248,0.16);
}
.fav-list {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.fav-list:empty::before {
content: "No saved filters yet";
color: #64748b;
font-size: 12px;
font-style: italic;
}
.fav-chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 26px;
padding: 0 4px 0 10px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 13px;
font-size: 12px;
color: #cbd5e1;
cursor: pointer;
transition: border-color .15s, color .15s;
}
.fav-chip:hover {
border-color: #38bdf8;
color: #38bdf8;
}
.fav-chip-delete {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
border: none;
background: transparent;
color: #64748b;
cursor: pointer;
font-size: 14px;
line-height: 1;
padding: 0;
}
.fav-chip-delete:hover {
background: rgba(239,68,68,0.15);
color: #ef4444;
}
.table-wrapper {
background: #1e293b;
border-radius: 12px;
border: 1px solid #334155;
overflow: auto;
max-height: calc(100vh - 150px);
scrollbar-width: auto;
scrollbar-color: #38bdf8 #0f172a;
}
.sales-table-wrapper { max-height: calc(100vh - 200px); }
.table-wrapper::-webkit-scrollbar {
height: 14px;
width: 12px;
-webkit-appearance: none;
display: block;
}
.table-wrapper::-webkit-scrollbar-corner { background: #0f172a; }
.table-wrapper::-webkit-scrollbar-track {
background: #0f172a;
border-radius: 0 0 12px 12px;
border-top: 1px solid #334155;
}
.table-wrapper::-webkit-scrollbar-thumb {
background: #38bdf8;
border-radius: 7px;
border: 2px solid #0f172a;
min-width: 50px;
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
background: #7dd3fc;
}
.order-table-wrapper {
background: #1e293b;
border-radius: 12px;
border: 1px solid #334155;
overflow: auto;
max-height: calc(100vh - 210px);
scrollbar-width: auto;
scrollbar-color: #38bdf8 #0f172a;
}
.order-table-wrapper::-webkit-scrollbar {
height: 14px;
width: 12px;
-webkit-appearance: none;
display: block;
}
.order-table-wrapper::-webkit-scrollbar-track {
background: #0f172a;
border-top: 1px solid #334155;
}
.order-table-wrapper::-webkit-scrollbar-thumb {
background: #38bdf8;
border-radius: 7px;
border: 2px solid #0f172a;
min-width: 50px;
}
.order-table-wrapper::-webkit-scrollbar-thumb:hover {
background: #7dd3fc;
}
.order-table-wrapper::-webkit-scrollbar-corner { background: #0f172a; }
table {
width: 100%;
border-collapse: collapse;
}
thead th {
background: #334155;
padding: 12px 10px;
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #94a3b8;
border-bottom: 1px solid #475569;
position: sticky;
top: 0;
white-space: nowrap;
}
tbody td {
padding: 10px 10px;
font-size: 13px;
border-bottom: 1px solid #1e293b;
}
table.compact thead th,
.road-containers-list.compact .rcc-items-table thead th { padding: 6px 8px; font-size: 10px; letter-spacing: 0.3px; }
table.compact tbody td,
.road-containers-list.compact .rcc-items-table tbody td { padding: 4px 8px; font-size: 12px; }
#itemsTable.compact tbody td .stock-detail { font-size: 10px; margin-top: 1px; }
#itemsTable.compact tbody td .add-order-btn { padding: 4px 8px; font-size: 11px; }
.btn-clear.btn-icon-only,
.btn-primary.btn-icon-only { padding: 8px; gap: 0; line-height: 0; }
.btn-clear.btn-icon-only svg,
.btn-primary.btn-icon-only svg { display: block; }
.btn-toggle[aria-pressed="true"] {
background: rgba(56,189,248,0.14);
border-color: rgba(56,189,248,0.4);
color: #38bdf8;
}
html[data-theme="light"] .btn-toggle[aria-pressed="true"] {
background: rgba(15,118,210,0.10);
border-color: rgba(15,118,210,0.4);
color: #0f76d2;
}
tbody tr { background: #1e293b; transition: background 0.15s; }
tbody tr:hover { background: #263347; }
tbody tr:nth-child(even) { background: #172033; }
tbody tr:nth-child(even):hover { background: #263347; }
.group-row td {
background: #0f172a;
font-weight: 600;
color: #38bdf8;
font-size: 15px;
padding: 16px;
border-bottom: 2px solid #334155;
}
.nowrap { white-space: nowrap; }
.tyg-col-model, .tyg-col-desc {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tyg-col-model { min-width: 130px; max-width: 220px; }
.tyg-col-desc { min-width: 180px; max-width: 300px; }
.sl-col-slno { white-space: nowrap; }
.col-name {
min-width: var(--name-col-w, auto);
white-space: nowrap;
}
#itemsTable .col-name {
min-width: 200px;
max-width: 360px;
}
#itemsTable td.col-name .cat-name-cell { display: flex; align-items: center; min-width: 0; }
#itemsTable td.col-name .cat-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#itemsTable td.col-name .item-info-btn,
#itemsTable td.col-name .item-edit-btn { flex: none; }
#itemsTable.compact .col-name { min-width: 170px; max-width: 300px; }
#itemsTable .col-generation { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#itemsTable .col-oem { max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#itemsTable.no-dealer-col .col-dealer-price { display: none; }
#itemsTable.no-dealer-col .col-dealer-margin { display: none; }
#itemsTable.no-oem-col .col-oem { display: none; }
#itemsTable.no-model-col .col-model { display: none; }
#itemsTable.no-generation-col .col-generation { display: none; }
#itemsTable.no-model-col.no-generation-col .col-name { max-width: 420px; }
.add-order-cell .add-order-control.wrong-wh,
.add-order-cell .add-order-control.wrong-wh ~ .add-order-commit {
opacity: 0.45;
cursor: not-allowed;
}
.add-order-cell .add-order-control.wrong-wh input,
.add-order-cell .add-order-control.wrong-wh button { pointer-events: none; }
#cartSidebar {
flex: 0 0 auto;
position: relative;
margin: 10px 10px 14px;
padding: 14px 14px 12px 16px;
background: linear-gradient(180deg, rgba(11, 18, 32, 0.55) 0%, rgba(15, 23, 42, 0.78) 100%);
border: 1px solid rgba(148, 163, 184, 0.10);
border-radius: 10px;
}
#cartSidebar::before {
content: "";
position: absolute;
top: 6px;
left: 14px;
right: 14px;
height: 1px;
background: radial-gradient(circle, rgba(148, 163, 184, 0.42) 0.8px, transparent 1.2px) 0 0 / 5px 1px repeat-x;
pointer-events: none;
}
#cartSidebar::after {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 0;
width: 2px;
background: linear-gradient(180deg, transparent 0%, #10b981 28%, #10b981 72%, transparent 100%);
border-radius: 0 2px 2px 0;
pointer-events: none;
}
#cartSidebar .cart-sb-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
#cartSidebar .cart-sb-label,
#cartSidebar .cart-sb-wh-label {
font-size: 9px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1.4px;
white-space: nowrap;
}
#cartSidebar .cart-sb-clear {
width: 22px;
height: 22px;
padding: 0;
background: transparent;
border: none;
color: rgba(148, 163, 184, 0.55);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
transition: color 0.18s ease, background 0.18s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
#cartSidebar .cart-sb-clear:hover {
color: #f87171;
background: rgba(248, 113, 113, 0.12);
transform: rotate(90deg);
}
#cartSidebar .cart-sb-clear:active { transform: rotate(90deg) scale(0.92); }
#cartSidebar .cart-sb-total {
margin-top: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.6px;
color: #f1f5f9;
line-height: 1.15;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#cartSidebar .cart-sb-meta {
margin-top: 7px;
display: flex;
align-items: baseline;
gap: 5px;
}
#cartSidebar .cart-sb-count {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px;
font-weight: 600;
color: #e2e8f0;
font-variant-numeric: tabular-nums;
line-height: 1;
}
#cartSidebar .cart-sb-meta-label {
font-size: 10px;
font-weight: 500;
color: #94a3b8;
text-transform: lowercase;
letter-spacing: 0.3px;
}
#cartSidebar .cart-sb-wh {
margin-top: 6px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
#cartSidebar .cart-sb-wh-label { color: #475569; letter-spacing: 1.2px; }
#cartSidebar .cart-sb-wh-value {
font-size: 11.5px;
font-weight: 500;
color: #cbd5e1;
line-height: 1.3;
word-break: break-word;
overflow-wrap: anywhere;
width: 100%;
}
#cartSidebar .cart-sb-cta {
margin-top: 12px;
width: 100%;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 12px;
background: rgba(16, 185, 129, 0.10);
color: #34d399;
border: 1px solid rgba(16, 185, 129, 0.28);
border-radius: 7px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
box-sizing: border-box;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.05s ease;
}
#cartSidebar .cart-sb-cta:hover {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(16, 185, 129, 0.45);
}
#cartSidebar .cart-sb-cta:active { transform: translateY(1px); }
#cartSidebar .cart-sb-cta-arrow { transition: transform 0.20s cubic-bezier(0.4, 0, 0.2, 1); }
#cartSidebar .cart-sb-cta:hover .cart-sb-cta-arrow { transform: translateX(3px); }
html[data-theme="light"] #cartSidebar {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(244, 241, 232, 0.45) 100%);
border-color: rgba(31, 30, 29, 0.08);
}
html[data-theme="light"] #cartSidebar::before {
background: radial-gradient(circle, rgba(75, 74, 68, 0.38) 0.8px, transparent 1.2px) 0 0 / 5px 1px repeat-x;
}
html[data-theme="light"] #cartSidebar::after {
background: linear-gradient(180deg, transparent 0%, #059669 28%, #059669 72%, transparent 100%);
}
html[data-theme="light"] #cartSidebar .cart-sb-label,
html[data-theme="light"] #cartSidebar .cart-sb-wh-label { color: #8a8980; }
html[data-theme="light"] #cartSidebar .cart-sb-clear { color: rgba(75, 74, 68, 0.55); }
html[data-theme="light"] #cartSidebar .cart-sb-clear:hover {
color: #c0382f;
background: rgba(192, 56, 47, 0.12);
}
html[data-theme="light"] #cartSidebar .cart-sb-total { color: #1f1e1d; }
html[data-theme="light"] #cartSidebar .cart-sb-count { color: #2a2925; }
html[data-theme="light"] #cartSidebar .cart-sb-meta-label { color: #6b6a63; }
html[data-theme="light"] #cartSidebar .cart-sb-wh-value { color: #4b4a44; }
html[data-theme="light"] #cartSidebar .cart-sb-cta {
background: rgba(16, 185, 129, 0.10);
color: #059669;
border-color: rgba(16, 185, 129, 0.30);
}
html[data-theme="light"] #cartSidebar .cart-sb-cta:hover {
background: rgba(16, 185, 129, 0.18);
border-color: rgba(16, 185, 129, 0.45);
}
body:has(#catalogPage:not(.hidden)) { overflow: hidden; }
#stockCatalogueSection {
display: flex;
flex-direction: column;
height: calc(100vh - 61px - var(--sidebar-inset, 14px) * 2);
box-sizing: border-box;
}
#stockCatalogueSection[hidden] { display: none; }
#stockCatalogueSection .table-wrapper {
flex: 1 1 0;
min-height: 0;
max-height: none;
}
#customersTable thead th:nth-child(2),
#customersTable tbody td:nth-child(2) {
min-width: 180px;
max-width: 240px;
white-space: normal;
word-break: break-word;
}
#customersTable.compact thead th:nth-child(2),
#customersTable.compact tbody td:nth-child(2) {
min-width: 150px;
max-width: 200px;
}
.price {
font-weight: 600;
color: #4ade80;
font-size: 13px;
white-space: nowrap;
}
.no-price {
color: #ef4444;
font-style: italic;
font-size: 13px;
}
.cat-margin {
font-weight: 600;
color: #4ade80;
font-size: 13px;
white-space: nowrap;
}
.cat-margin-pct {
color: #8a8980;
font-weight: 500;
font-size: 12px;
}
.cat-margin.cat-margin-neg,
.cat-margin.cat-margin-neg .cat-margin-pct {
color: #ef4444;
}
.cat-cost { color: #38bdf8; }
.cat-margin-dealer { color: #fbbf24; }
.price-type-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.price-type-retail {
background: rgba(74, 222, 128, 0.15);
color: #4ade80;
}
.price-type-dealer {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
}
.price-type-none {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.stock-qty {
font-weight: 700;
font-size: 13px;
}
.stock-in { color: #4ade80; }
.stock-low { color: #fbbf24; }
.stock-out { color: #ef4444; }
.th {
background: #334155;
padding: 12px 14px;
text-align: left;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
color: #94a3b8;
border-bottom: 1px solid #475569;
white-space: nowrap;
}
.road-qty {
display: inline-block;
background: rgba(251,191,36,0.15);
color: #fbbf24;
border: 1px solid rgba(251,191,36,0.3);
border-radius: 6px;
padding: 2px 10px;
font-size: 13px;
font-weight: 700;
}
.forecast-row-shortfall td:first-child {
border-left: 3px solid #f97316;
padding-left: calc(14px - 3px);
}
.lead-time-input {
background: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 6px;
color: #e2e8f0;
padding: 4px 8px;
width: 80px;
font-family: inherit;
font-size: 13px;
text-align: right;
}
.lead-time-input:focus { outline: none; border-color: #38bdf8 }
html[data-theme="light"] .lead-time-input {
background: #f9fafb; border-color: #d1d5db; color: #1f2937;
}
.road-price {
color: #f97316;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
html[data-theme="light"] .road-price { color: #c96442 }
.road-client-input {
width: 140px;
max-width: 100%;
font-size: 12px;
padding: 3px 6px;
border: 1px solid var(--border, #44403c);
border-radius: 6px;
background: transparent;
color: inherit;
}
.road-client-input.input-invalid {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.08);
}
.modal-client-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 8px;
}
.road-bulk-bar {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0;
padding: 8px 12px;
border: 1px solid var(--border, #44403c);
border-radius: 8px;
background: var(--surface-2, rgba(255,255,255,0.04));
}
.road-bulk-bar[hidden] { display: none; }
.road-bulk-count { font-size: 13px; font-weight: 600; }
.cat-bulk-bar {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0;
padding: 8px 12px;
border: 1px solid var(--border, #44403c);
border-radius: 8px;
background: var(--surface-2, rgba(255,255,255,0.04));
}
.cat-bulk-bar[hidden] { display: none; }
.cat-bulk-count { font-size: 13px; font-weight: 600; }
.road-view-switch {
display: inline-flex;
gap: 4px;
padding: 0;
margin: 0;
background: transparent;
border: none;
border-radius: 0;
}
.road-view-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
font-size: 12px; font-weight: 600;
color: #94a3b8;
background: transparent;
border: 0; border-radius: 6px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.road-view-btn:hover:not(.active) { color: #e2e8f0 }
.road-view-btn[data-view="items"] svg { stroke: #60a5fa; }
.road-view-btn[data-view="containers"] svg { stroke: #fb923c; }
.road-view-btn[data-view="items"].active {
background: rgba(96, 165, 250, 0.16);
border-color: rgba(96, 165, 250, 0.45);
color: #60a5fa;
box-shadow: none;
}
.road-view-btn[data-view="containers"].active {
background: rgba(251, 146, 60, 0.16);
border-color: rgba(251, 146, 60, 0.45);
color: #fb923c;
box-shadow: none;
}
html[data-theme="light"] .road-view-switch { background: transparent; border-color: transparent }
html[data-theme="light"] .road-view-btn { color: #6b6a63 }
html[data-theme="light"] .road-view-btn:hover:not(.active) { color: #1f1e1d }
html[data-theme="light"] .road-view-btn[data-view="items"] svg { stroke: #2563eb; }
html[data-theme="light"] .road-view-btn[data-view="containers"] svg { stroke: #ea580c; }
html[data-theme="light"] .road-view-btn[data-view="items"].active {
background: rgba(37, 99, 235, 0.12);
border-color: rgba(37, 99, 235, 0.40);
color: #2563eb;
}
html[data-theme="light"] .road-view-btn[data-view="containers"].active {
background: rgba(234, 88, 12, 0.12);
border-color: rgba(234, 88, 12, 0.40);
color: #ea580c;
}
.tracking-modal-body.tyg-dupes-modal-body {
width: 100%;
max-width: min(1600px, 96vw);
}
.tyg-dupes-modal-body .tracking-modal-head { padding: 12px 16px; }
.tyg-dupes-modal-body .tracking-modal-scroll { padding: 14px 16px; }
.tyg-dupes-summary { padding: 10px 12px; margin-bottom: 10px; font-size: 12px; }
.tyg-dupes-filters {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.tyg-dupes-filters[hidden] { display: none; }
.tyg-dupes-filter-field {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 160px;
min-width: 0;
}
.tyg-dupes-filter-field label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
text-align: center;
}
.tyg-dupes-filter-field select {
width: 100%;
height: 30px;
padding: 4px 26px 4px 26px;
background-color: rgba(15, 23, 42, 0.6);
border: 1px solid #334155;
border-radius: 7px;
color: #f1f5f9;
font-size: 12px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
text-align: center;
text-align-last: center;
}
.tyg-dupes-filter-field select:hover { border-color: #475569; }
.tyg-dupes-filter-field select:focus {
outline: none;
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.tyg-dupes-filter-field select option { background: #0f172a; color: #f1f5f9; }
html[data-theme="light"] .tyg-dupes-filter-field label { color: #8a8980; }
html[data-theme="light"] .tyg-dupes-filter-field select {
background-color: rgba(255, 255, 255, 0.85);
background-image: url("data:image/svg+xml;utf8,");
border-color: rgba(31, 30, 29, 0.18);
color: #1f1e1d;
}
html[data-theme="light"] .tyg-dupes-filter-field select option { background: #faf9f5; color: #1f1e1d; }
.tyg-dupes-bulk-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin-bottom: 10px;
background: rgba(56, 189, 248, 0.10);
border: 1px solid rgba(56, 189, 248, 0.30);
border-radius: 8px;
font-size: 12px;
color: #cbd5e1;
}
.tyg-dupes-bulk-bar[hidden] { display: none; }
.tyg-dupes-bulk-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 11px;
background: #38bdf8;
color: #0f172a;
font-weight: 700;
font-size: 11px;
}
.tyg-dupes-bulk-clear { margin-left: auto; }
.tyg-dupes-bulk-delete {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ef4444;
border-color: #ef4444;
color: #fff;
}
.tyg-dupes-bulk-delete:hover:not(:disabled) {
background: #dc2626;
border-color: #dc2626;
}
.tyg-dupes-bulk-delete:disabled { opacity: 0.6; cursor: progress; }
.tyg-dupes-row-check,
#tygDupesSelectAll {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: #38bdf8;
vertical-align: middle;
}
html[data-theme="light"] .tyg-dupes-bulk-bar {
background: rgba(15, 118, 210, 0.08);
border-color: rgba(15, 118, 210, 0.30);
color: #4b4a44;
}
html[data-theme="light"] .tyg-dupes-bulk-count {
background: #0f76d2;
color: #fff;
}
html[data-theme="light"] .tyg-dupes-bulk-delete {
background: #c0392b;
border-color: #c0392b;
}
html[data-theme="light"] .tyg-dupes-bulk-delete:hover:not(:disabled) {
background: #a93226;
border-color: #a93226;
}
html[data-theme="light"] .tyg-dupes-row-check,
html[data-theme="light"] #tygDupesSelectAll {
accent-color: #0f76d2;
}
.tyg-dupes-table-wrap { max-height: none; overflow-x: hidden; overflow-y: auto; }
.tyg-dupes-table {
font-size: 11px;
width: 100%;
table-layout: fixed;
}
.tyg-dupes-table th { position: sticky; top: 0; background: #334155; }
.tyg-dupes-table th, .tyg-dupes-table td {
padding: 5px 6px;
white-space: normal;
word-break: break-word;
vertical-align: top;
overflow: hidden;
}
.tyg-dupes-table th:nth-child(1) { width: 4%; }
.tyg-dupes-table th:nth-child(2) { width: 10%; }
.tyg-dupes-table th:nth-child(3) { width: 8%; }
.tyg-dupes-table th:nth-child(4) { width: 14%; }
.tyg-dupes-table th:nth-child(5) { width: 22%; }
.tyg-dupes-table th:nth-child(6) { width: 7%; }
.tyg-dupes-table th:nth-child(7) { width: 27%; }
.tyg-dupes-table th:nth-child(8) { width: 8%; }
.tyg-dupes-actions-col[hidden] { display: none; }
.tyg-dupes-delete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 6px;
border: 1px solid rgba(239, 68, 68, 0.30);
background: rgba(239, 68, 68, 0.10);
color: #ef4444;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.tyg-dupes-delete-btn:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.25);
border-color: rgba(239, 68, 68, 0.55);
}
.tyg-dupes-delete-btn:disabled { opacity: 0.4; cursor: progress; }
html[data-theme="light"] .tyg-dupes-delete-btn {
border-color: rgba(192, 57, 43, 0.30);
background: rgba(192, 57, 43, 0.08);
color: #c0392b;
}
html[data-theme="light"] .tyg-dupes-delete-btn:hover:not(:disabled) {
background: rgba(192, 57, 43, 0.20);
border-color: rgba(192, 57, 43, 0.55);
}
html[data-theme="light"] .tyg-dupes-table th { background: #e8e6dc; color: #4b4a44; }
.tyg-dupes-desc,
.tyg-dupes-status {
white-space: normal;
word-break: break-word;
line-height: 1.3;
}
.tyg-dupes-status { font-size: 11px; font-weight: 600; }
.tyg-dupes-status .tyg-dupes-varies {
display: inline;
font-weight: 500;
color: #cbd5e1;
}
html[data-theme="light"] .tyg-dupes-status .tyg-dupes-varies { color: #4b4a44; }
.tyg-dupes-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tyg-dupes-empty-val { color: #475569; font-style: italic; }
.tyg-dupes-match-ok { color: #4ade80; font-weight: 600; white-space: nowrap; }
.tyg-dupes-match-warn { color: #fb923c; font-weight: 600; white-space: nowrap; }
.tyg-dupes-varies-empty { color: #475569; }
.tyg-dupes-varies { font-size: 11px; color: #cbd5e1; }
html[data-theme="light"] .tyg-dupes-empty-val { color: #b8b6ac; }
html[data-theme="light"] .tyg-dupes-match-ok { color: #16a34a; }
html[data-theme="light"] .tyg-dupes-match-warn { color: #ea580c; }
html[data-theme="light"] .tyg-dupes-varies { color: #4b4a44; }
html[data-theme="light"] .tyg-dupes-varies-empty { color: #b8b6ac; }
.tyg-dupes-summary {
padding: 12px 14px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 14px;
border: 1px solid #334155;
background: #0f172a;
color: #cbd5e1;
}
.tyg-dupes-summary.tyg-dupes-ok {
border-color: rgba(74, 222, 128, 0.40);
background: rgba(74, 222, 128, 0.08);
color: #4ade80;
}
.tyg-dupes-summary.tyg-dupes-warn {
border-color: rgba(251, 146, 60, 0.40);
background: rgba(251, 146, 60, 0.08);
color: #fb923c;
}
html[data-theme="light"] .tyg-dupes-summary {
background: #faf9f5;
border-color: #e8e6dc;
color: #4b4a44;
}
html[data-theme="light"] .tyg-dupes-summary.tyg-dupes-ok {
border-color: rgba(22, 163, 74, 0.40);
background: rgba(22, 163, 74, 0.08);
color: #16a34a;
}
html[data-theme="light"] .tyg-dupes-summary.tyg-dupes-warn {
border-color: rgba(234, 88, 12, 0.40);
background: rgba(234, 88, 12, 0.08);
color: #ea580c;
}
#roadContainersView {
overflow-y: auto;
max-height: calc(100vh - 150px);
}
.road-containers-list {
display: flex; flex-direction: column; gap: 8px;
}
.road-container-card {
background: linear-gradient(180deg, #0f172a 0%, #0c1424 100%);
border: 1px solid #1e293b;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.road-container-card:hover { border-color: rgba(56,189,248,0.25) }
.road-container-card.expanded {
border-color: rgba(56,189,248,0.5);
box-shadow: 0 0 0 2px rgba(56,189,248,0.06);
}
.rcc-head {
display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
width: 100%;
padding: 7px 12px;
background: transparent;
border: 0;
color: #e2e8f0;
cursor: pointer;
text-align: left;
font-size: 12px;
min-height: 36px;
overflow: hidden;
}
.rcc-head:hover { background: rgba(56,189,248,0.04) }
.rcc-spacer { flex: 1 1 auto; min-width: 8px }
.rcc-divider {
flex-shrink: 0;
width: 1px; height: 14px;
background: rgba(148,163,184,0.18);
}
.rcc-chevron {
flex-shrink: 0;
color: #64748b;
transition: transform 0.18s ease;
}
.road-container-card.expanded .rcc-chevron {
transform: rotate(90deg);
color: #38bdf8;
}
.rcc-order-num {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 13px; font-weight: 700;
color: #38bdf8;
letter-spacing: 0.3px;
white-space: nowrap;
flex-shrink: 0;
}
.rcc-container {
display: inline-flex; align-items: center; gap: 5px;
color: #cbd5e1;
font-weight: 600;
font-size: 12px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.rcc-container svg { color: #64748b; flex-shrink: 0 }
.rcc-container-empty { font-style: italic; color: #64748b; font-weight: 500 }
.rcc-mfr {
display: inline-block;
padding: 2px 8px;
border: 1px solid #334155;
border-radius: 999px;
background: #1e293b;
color: #94a3b8;
font-size: 11px;
font-weight: 600;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
flex-shrink: 0;
}
.rcc-stat { color: #94a3b8; white-space: nowrap; flex-shrink: 0 }
.rcc-stat b { color: #e2e8f0; font-weight: 700; font-variant-numeric: tabular-nums }
.rcc-stat-amount { color: #f97316; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0 }
.rcc-stat-sep { color: #475569; flex-shrink: 0 }
.rcc-track {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px;
background: rgba(56,189,248,0.08);
color: #38bdf8;
border: 1px solid rgba(56,189,248,0.2);
border-radius: 5px;
cursor: pointer;
flex-shrink: 0;
}
.rcc-track:hover { background: rgba(56,189,248,0.18); border-color: rgba(56,189,248,0.4) }
.rcc-eta {
display: inline-flex; align-items: center;
padding: 2px 8px;
background: rgba(56,189,248,0.1);
color: #38bdf8;
border: 1px solid rgba(56,189,248,0.25);
border-radius: 5px;
font-size: 11.5px; font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.rcc-eta-arrived {
background: rgba(34,197,94,0.1);
color: #22c55e;
border-color: rgba(34,197,94,0.3);
}
.rcc-eta-empty { background: transparent; color: #64748b; border-color: transparent }
.rcc-body {
border-top: 1px solid #1e293b;
padding: 8px 12px 10px;
background: rgba(10, 18, 32, 0.5);
}
.rcc-items-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.rcc-items-table th {
text-align: left;
padding: 8px 10px;
color: #94a3b8;
font-weight: 600;
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #1e293b;
}
.rcc-items-table td {
padding: 7px 10px;
border-bottom: 1px solid rgba(30,41,59,0.5);
color: #e2e8f0;
}
.rcc-items-table tr:last-child td { border-bottom: 0 }
.rcc-items-table .num-c { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums }
.rcc-items-table .txt-c { text-align: center }
.rcc-items-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace }
.rcc-mini-timeline {
display: inline-flex; align-items: center; gap: 5px;
flex-shrink: 0;
width: 150px;
}
.rcc-mini-flag {
font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
font-size: 14px; line-height: 1;
}
.rcc-mini-track {
position: relative;
display: inline-block;
flex: 1 1 70px;
min-width: 60px; max-width: 120px;
height: 4px;
background: #334155;
border-radius: 3px;
}
.rcc-mini-fill {
position: absolute; left: 0; top: 0;
height: 100%; width: var(--pct, 0%);
background: linear-gradient(90deg, #38bdf8, #22d3ee);
border-radius: 3px;
}
.rcc-mini-dot {
position: absolute; left: var(--pct, 0%); top: 50%;
width: 8px; height: 8px;
background: #22d3ee;
border: 2px solid #1e293b;
border-radius: 50%;
box-sizing: content-box;
transform: translate(-50%, -50%);
}
.rcc-mini-pct {
color: #94a3b8;
font-size: 10px;
font-weight: 700;
font-variant-numeric: tabular-nums;
min-width: 28px;
text-align: right;
}
html[data-theme="light"] .rcc-mini-track { background: #e8e6dc }
html[data-theme="light"] .rcc-mini-fill { background: linear-gradient(90deg, #c86f3d, #d97848) }
html[data-theme="light"] .rcc-mini-dot { background: #d97848; border-color: #fff }
html[data-theme="light"] .rcc-mini-pct { color: #6b6a63 }
html[data-theme="light"] .road-container-card {
background: #faf9f5; border-color: #e8e6dc;
}
html[data-theme="light"] .road-container-card:hover { border-color: rgba(2,132,199,0.3) }
html[data-theme="light"] .road-container-card.expanded {
border-color: rgba(2,132,199,0.5);
box-shadow: 0 0 0 3px rgba(2,132,199,0.06);
}
html[data-theme="light"] .rcc-head { color: #1f1e1d }
html[data-theme="light"] .rcc-head:hover { background: rgba(2,132,199,0.04) }
html[data-theme="light"] .rcc-chevron { color: #8a8980 }
html[data-theme="light"] .road-container-card.expanded .rcc-chevron { color: #0284c7 }
html[data-theme="light"] .rcc-order-num { color: #0284c7 }
html[data-theme="light"] .rcc-row-secondary { color: #6b6a63 }
html[data-theme="light"] .rcc-container { color: #1f1e1d }
html[data-theme="light"] .rcc-container svg { color: #8a8980 }
html[data-theme="light"] .rcc-stat { color: #6b6a63 }
html[data-theme="light"] .rcc-stat b { color: #1f1e1d }
html[data-theme="light"] .rcc-stat-amount { color: #c96442 }
html[data-theme="light"] .rcc-stat-sep { color: #c8c6bc }
html[data-theme="light"] .rcc-divider { background: #e8e6dc }
html[data-theme="light"] .rcc-track {
background: rgba(2,132,199,0.08); color: #0284c7; border-color: rgba(2,132,199,0.25);
}
html[data-theme="light"] .rcc-eta {
background: rgba(2,132,199,0.1); color: #0284c7; border-color: rgba(2,132,199,0.3);
}
html[data-theme="light"] .rcc-eta-arrived {
background: rgba(22,163,74,0.1); color: #16a34a; border-color: rgba(22,163,74,0.3);
}
html[data-theme="light"] .rcc-body { background: #fff; border-top-color: #e8e6dc }
html[data-theme="light"] .rcc-items-table th { color: #6b6a63; border-bottom-color: #e8e6dc }
html[data-theme="light"] .rcc-items-table td { color: #1f1e1d; border-bottom-color: rgba(232,230,220,0.6) }
.road-order-badge {
display: inline-block;
background: rgba(56,189,248,0.1);
color: #38bdf8;
border: 1px solid rgba(56,189,248,0.2);
border-radius: 6px;
padding: 2px 8px;
font-size: 12px;
font-family: monospace;
white-space: nowrap;
}
.stock-detail {
font-size: 11px;
color: #64748b;
margin-top: 2px;
}
.mono {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px;
color: #cbd5e1;
}
.loading {
text-align: center;
padding: 60px;
color: #64748b;
}
.spinner {
width: 40px; height: 40px;
border: 3px solid #334155;
border-top-color: #38bdf8;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
.container { padding: 12px; }
.filters input { width: 100%; }
header { flex-direction: column; gap: 12px; }
}
.login-screen {
position: fixed;
inset: 0;
background: #0f172a;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.login-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 20px;
padding: 48px 40px;
width: 100%;
max-width: 420px;
box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}
.login-logo {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 36px;
}
.login-logo img {
height: 56px;
width: auto;
}
.login-logo-text {
display: flex;
flex-direction: column;
gap: 3px;
}
.login-logo-title {
font-size: 18px;
font-weight: 700;
color: #f8fafc;
}
.login-logo-title span { color: #38bdf8; }
.login-logo-sub {
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
color: #475569;
}
.login-heading {
font-size: 22px;
font-weight: 700;
color: #f8fafc;
margin-bottom: 6px;
}
.login-sub {
font-size: 14px;
color: #64748b;
margin-bottom: 32px;
}
.login-field {
margin-bottom: 16px;
}
.login-field label {
display: block;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
margin-bottom: 8px;
}
.login-field input {
width: 100%;
background: #0f172a;
border: 1px solid #334155;
color: #e2e8f0;
padding: 12px 16px;
border-radius: 10px;
font-size: 15px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.login-field input:focus {
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56,189,248,0.1);
}
.login-btn {
width: 100%;
padding: 14px;
margin-top: 8px;
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
border: none;
border-radius: 10px;
color: #0f172a;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s, transform 0.1s;
letter-spacing: 0.3px;
}
.login-btn:hover { opacity: 0.9; }
.login-btn:active { transform: scale(0.99); }
.login-error {
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
color: #ef4444;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
margin-top: 14px;
display: none;
}
.header-right {
display: flex;
align-items: center;
gap: 14px;
}
.nav-tabs {
display: flex;
gap: 2px;
background: transparent;
border-radius: 0;
padding: 0;
flex-wrap: wrap;
}
.nav-tab {
padding: 8px 14px;
border-radius: 0;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
color: #94a3b8;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
display: flex;
align-items: center;
gap: 7px;
position: relative;
white-space: nowrap;
line-height: 1.2;
letter-spacing: 0.2px;
}
.nav-tab svg { width: 14px; height: 14px; }
.nav-tab:hover:not(.active) { color: #f1f5f9; }
.nav-tab.active {
background: transparent;
color: #38bdf8;
border-bottom-color: #38bdf8;
font-weight: 600;
}
.nav-tab.active svg { stroke: #38bdf8; }
.badge {
background: #38bdf8;
color: #0f172a;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
.badge.empty { display: none; }
#notifBadge { background: #ef4444; color: #fff; }
tbody tr.selected-row { background: rgba(56,189,248,0.07) !important; }
.add-order-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px;
border-radius: 6px;
border: 1px solid #334155;
background: transparent;
color: #64748b;
font-size: 11px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}
.add-order-cell {
display: inline-flex;
align-items: center;
gap: 4px;
}
.add-order-control {
display: inline-flex;
align-items: stretch;
height: 22px;
border: 1px solid #334155;
border-radius: 6px;
background: rgba(15, 23, 42, 0.6);
overflow: hidden;
transition: border-color 0.15s;
}
.add-order-control:hover:not(.no-stock) { border-color: #38bdf8; }
.add-order-control.in-order { border-color: #4ade80; background: rgba(74, 222, 128, 0.08); }
.add-order-qty {
width: 24px;
padding: 2px 2px;
border: none;
background: transparent;
color: #f1f5f9;
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: center;
outline: none;
-moz-appearance: textfield;
}
.add-order-qty::-webkit-outer-spin-button,
.add-order-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-order-qty:disabled { color: #475569; cursor: not-allowed; }
.add-order-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
padding: 0;
border: none;
background: transparent;
color: #38bdf8;
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s, color 0.15s;
}
.add-order-step-minus { border-right: 1px solid #334155; }
.add-order-step-plus { border-left: 1px solid #334155; }
.add-order-step:hover:not(:disabled) { background: rgba(56, 189, 248, 0.16); }
.add-order-control.in-order .add-order-step { color: #4ade80; }
.add-order-control.in-order .add-order-step:hover:not(:disabled) { background: rgba(74, 222, 128, 0.16); }
.add-order-step:disabled { color: #475569; cursor: not-allowed; opacity: 0.6; }
.add-order-control.no-stock { border-color: #1e293b; opacity: 0.55; }
.add-order-commit {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 22px;
padding: 0;
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 6px;
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.add-order-commit:hover:not(:disabled) {
background: rgba(56, 189, 248, 0.25);
border-color: rgba(56, 189, 248, 0.55);
}
.add-order-commit:disabled { color: #475569; border-color: #1e293b; background: transparent; cursor: not-allowed; opacity: 0.55; }
.add-order-cell.is-added .add-order-commit {
background: rgba(74, 222, 128, 0.16);
border-color: rgba(74, 222, 128, 0.45);
color: #4ade80;
}
.add-order-cell.is-added .add-order-commit:hover:not(:disabled) {
background: rgba(74, 222, 128, 0.28);
border-color: rgba(74, 222, 128, 0.65);
}
html[data-theme="light"] .add-order-commit {
border-color: rgba(15, 118, 210, 0.40);
background: rgba(15, 118, 210, 0.10);
color: #0f76d2;
}
html[data-theme="light"] .add-order-commit:hover:not(:disabled) {
background: rgba(15, 118, 210, 0.20);
border-color: rgba(15, 118, 210, 0.60);
}
html[data-theme="light"] .add-order-cell.is-added .add-order-commit {
background: rgba(22, 163, 74, 0.14);
border-color: rgba(22, 163, 74, 0.45);
color: #16a34a;
}
html[data-theme="light"] .add-order-control {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(31, 30, 29, 0.18);
}
html[data-theme="light"] .add-order-control:hover:not(.no-stock) { border-color: #0f76d2; }
html[data-theme="light"] .add-order-control.in-order {
border-color: #16a34a;
background: rgba(22, 163, 74, 0.08);
}
html[data-theme="light"] .add-order-qty { color: #1f1e1d; }
html[data-theme="light"] .add-order-step { color: #0f76d2; }
html[data-theme="light"] .add-order-step-minus { border-right-color: rgba(31, 30, 29, 0.18); }
html[data-theme="light"] .add-order-step-plus { border-left-color: rgba(31, 30, 29, 0.18); }
html[data-theme="light"] .add-order-step:hover:not(:disabled) { background: rgba(15, 118, 210, 0.12); }
html[data-theme="light"] .add-order-control.in-order .add-order-step { color: #16a34a; }
html[data-theme="light"] .add-order-control.in-order .add-order-step:hover:not(:disabled) { background: rgba(22, 163, 74, 0.12); }
.add-order-btn:hover {
border-color: #38bdf8;
color: #38bdf8;
background: rgba(56,189,248,0.08);
}
.add-order-btn:disabled, .add-order-btn.no-stock {
border-color: #1e293b;
color: #475569;
background: transparent;
cursor: not-allowed;
opacity: 0.5;
}
.add-order-btn:disabled:hover, .add-order-btn.no-stock:hover {
border-color: #1e293b;
color: #475569;
background: transparent;
}
.add-order-btn.in-order {
border-color: #4ade80;
color: #4ade80;
background: rgba(74,222,128,0.08);
}
.add-order-btn.in-order:hover {
border-color: #ef4444;
color: #ef4444;
background: rgba(239,68,68,0.08);
}
.order-page { display: none; }
.order-page.visible { display: block; }
.catalog-page { display: block; }
.catalog-page.hidden { display: none; }
.oh-required { color: #f87171; font-weight: 700 }
#importModal .import-card {
background: linear-gradient(180deg, #0f172a 0%, #0c1424 100%);
border: 1px solid #1e293b;
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,0.55);
width: 100%;
max-width: 760px;
max-height: 90vh;
display: flex; flex-direction: column;
overflow: hidden;
}
.import-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
padding: 18px 22px;
border-bottom: 1px solid #1e293b;
}
.import-head-text { flex: 1; min-width: 0 }
.import-head-title { color: #f1f5f9; font-size: 16px; font-weight: 700; letter-spacing: 0.2px }
.import-head-sub { color: #94a3b8; font-size: 12px; margin-top: 4px; line-height: 1.45 }
.import-close {
background: transparent; border: 0;
color: #64748b; cursor: pointer;
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 6px; flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.import-close:hover { background: rgba(148,163,184,0.12); color: #e2e8f0 }
.import-paste { padding: 16px 22px 8px }
.import-paste .import-cols {
display: grid;
grid-template-columns: 44px 1fr 1fr 1fr;
gap: 0;
border: 1px solid #334155;
border-radius: 10px;
background: #0a1220;
--rule-line-color: rgba(148,163,184,0.18);
--import-frame-h: 220px;
--import-line-h: 20px;
--import-header-h: 32px;
height: var(--import-frame-h);
overflow-y: auto;
}
html[data-theme="light"] .import-paste .import-cols { --rule-line-color: rgba(107,106,99,0.22) }
.import-paste .import-col-lineno { background: rgba(15,23,42,0.5) }
.import-lineno-gutter {
min-height: calc(var(--import-frame-h) - var(--import-header-h));
color: #64748b;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
line-height: var(--import-line-h);
text-align: center;
user-select: none;
overflow: hidden;
white-space: pre;
font-variant-numeric: tabular-nums;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 19px,
var(--rule-line-color) 19px,
var(--rule-line-color) 20px
);
background-attachment: local;
}
html[data-theme="light"] .import-paste .import-col-lineno { background: rgba(232,230,220,0.4) }
html[data-theme="light"] .import-lineno-gutter { color: #8a8980 }
.import-paste .import-col {
display: flex; flex-direction: column;
min-width: 0;
border-right: 1px solid #334155;
}
.import-paste .import-col:last-child { border-right: 0 }
.import-paste .import-col-header {
padding: 7px 12px;
background: #0a1220;
border: 0;
border-bottom: 1px solid #334155;
color: #94a3b8;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
text-align: center;
position: sticky;
top: 0;
z-index: 1;
}
html[data-theme="light"] .import-paste .import-col-header { background: #fff }
.import-paste .import-col-area {
width: 100%;
min-height: calc(var(--import-frame-h) - var(--import-header-h));
padding: 0 12px;
border: 0;
background: transparent;
color: #e2e8f0;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12.5px;
line-height: var(--import-line-h);
text-align: center;
resize: none;
overflow: hidden;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent 19px,
var(--rule-line-color) 19px,
var(--rule-line-color) 20px
);
background-attachment: local;
}
.import-paste .import-col-area:focus { outline: none }
.import-paste .import-cols:focus-within {
border-color: rgba(56,189,248,0.5);
box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}
html[data-theme="light"] .import-paste .import-cols { background: #fff; border-color: #e8e6dc }
html[data-theme="light"] .import-paste .import-col-area { color: #1f1e1d }
html[data-theme="light"] .import-paste .import-col { border-right-color: #e8e6dc }
html[data-theme="light"] .import-paste .import-col-header { border-bottom-color: #e8e6dc }
html[data-theme="light"] .import-paste .import-cols:focus-within {
border-color: rgba(2,132,199,0.45);
box-shadow: 0 0 0 3px rgba(2,132,199,0.08);
}
.import-stats {
display: flex; gap: 18px; flex-wrap: wrap;
align-items: center;
padding: 4px 22px 14px;
font-size: 12px;
}
.import-stat { display: inline-flex; align-items: center; gap: 6px; color: #94a3b8 }
.import-check-btn {
margin-left: auto;
padding: 7px 18px;
font-size: 12.5px;
}
.import-stat .lbl { color: #64748b }
.import-stat strong { color: #e2e8f0; font-variant-numeric: tabular-nums }
.import-stat .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }
.dot-total { background: #64748b }
.dot-ok { background: #4ade80 }
.dot-err { background: #f87171 }
.import-preview-wrap {
margin: 0 22px;
border: 1px solid #1e293b;
border-radius: 10px;
overflow: auto;
max-height: 38vh;
}
.import-preview { width: 100%; border-collapse: collapse; font-size: 12px }
.import-preview thead th {
background: #0a1220;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 10.5px;
font-weight: 700;
padding: 9px 12px;
text-align: left;
position: sticky; top: 0;
border-bottom: 1px solid #1e293b;
}
.import-preview thead th.c-num { text-align: right }
.import-preview tbody td {
padding: 8px 12px;
border-bottom: 1px solid #1e293b;
color: #e2e8f0;
vertical-align: middle;
}
.import-preview tbody td.c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.import-preview tbody tr:last-child td { border-bottom: 0 }
.import-preview tr.row-ok td { background: rgba(74,222,128,0.04) }
.import-preview tr.row-err td { background: rgba(239,68,68,0.05) }
.import-preview .row-num { color: #64748b; font-variant-numeric: tabular-nums }
.import-preview .part-cell { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px }
.import-preview .name-cell { color: #cbd5e1 }
.import-empty td {
text-align: center;
color: #64748b;
padding: 28px 12px !important;
font-style: italic;
}
.status-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px; font-weight: 600;
white-space: nowrap;
}
.status-pill svg { flex-shrink: 0 }
.status-pill-ok { background: rgba(74,222,128,0.13); color: #4ade80 }
.status-pill-err { background: rgba(239,68,68,0.13); color: #f87171 }
.import-foot {
display: flex; align-items: center; gap: 10px;
padding: 16px 22px;
border-top: 1px solid #1e293b;
margin-top: 14px;
}
.import-foot-error {
flex: 1;
min-width: 0;
color: #f87171;
font-size: 12.5px;
font-weight: 500;
display: inline-flex; align-items: center; gap: 6px;
}
.import-foot-error svg { flex-shrink: 0 }
html[data-theme="light"] .import-foot-error { color: #c0392b }
html[data-theme="light"] #importModal .import-card {
background: #faf9f5; border-color: #e8e6dc;
box-shadow: 0 24px 56px rgba(0,0,0,0.18);
}
html[data-theme="light"] .import-head { border-bottom-color: #e8e6dc }
html[data-theme="light"] .import-head-title { color: #1f1e1d }
html[data-theme="light"] .import-head-sub { color: #6b6a63 }
html[data-theme="light"] .import-close { color: #8a8980 }
html[data-theme="light"] .import-close:hover { background: rgba(2,132,199,0.08); color: #1f1e1d }
html[data-theme="light"] .import-paste .import-col-header { color: #6b6a63 }
html[data-theme="light"] .import-stat { color: #6b6a63 }
html[data-theme="light"] .import-stat .lbl { color: #8a8980 }
html[data-theme="light"] .import-stat strong { color: #1f1e1d }
html[data-theme="light"] .import-preview-wrap { border-color: #e8e6dc }
html[data-theme="light"] .import-preview thead th { background: #fff; color: #6b6a63; border-bottom-color: #e8e6dc }
html[data-theme="light"] .import-preview tbody td { background: #fff; color: #1f1e1d; border-bottom-color: #e8e6dc }
html[data-theme="light"] .import-preview tr.row-ok td { background: rgba(34,134,58,0.06) }
html[data-theme="light"] .import-preview tr.row-err td { background: rgba(192,57,43,0.06) }
html[data-theme="light"] .import-preview .row-num { color: #8a8980 }
html[data-theme="light"] .import-empty td { color: #8a8980 }
html[data-theme="light"] .import-foot { border-top-color: #e8e6dc }
.oh-input-wrap { position: relative; display: block }
.oh-input-wrap input[list]::-webkit-calendar-picker-indicator {
display: none !important;
opacity: 0;
width: 0;
height: 0;
padding: 0;
margin: 0;
-webkit-appearance: none;
pointer-events: none;
}
.oh-input-wrap input[list]::-webkit-list-button { display: none !important; }
.oh-input-clear {
position: absolute; top: 50%; right: 8px;
transform: translateY(-50%);
width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
background: transparent;
border: 0;
color: #64748b;
cursor: pointer;
border-radius: 4px;
}
.oh-input-clear:hover { background: rgba(148,163,184,0.12); color: #e2e8f0 }
html[data-theme="light"] .oh-input-clear { color: #8a8980 }
html[data-theme="light"] .oh-input-clear:hover { background: rgba(2,132,199,0.08); color: #1f1e1d }
.oh-segment-disabled { opacity: 0.45 }
.oh-segment-disabled button { cursor: not-allowed }
html[data-theme="light"] .oh-required { color: #c0392b }
.btn-clear {
padding: 9px 18px;
border-radius: 8px;
background: transparent;
border: 1px solid #475569;
color: #94a3b8;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-clear:hover { border-color: #ef4444; color: #ef4444; }
.btn-primary {
padding: 9px 20px;
border-radius: 8px;
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
border: none;
color: #0f172a;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.2s;
}
.btn-primary:hover:not(:disabled) { opacity: 0.85; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-danger {
padding: 9px 18px;
border-radius: 8px;
background: transparent;
border: 1px solid #ef4444;
color: #ef4444;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-danger:hover:not(:disabled) { background: #ef4444; color: #fff; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
html[data-theme="light"] .btn-danger { border-color: #c0392b; color: #c0392b; }
html[data-theme="light"] .btn-danger:hover:not(:disabled) { background: #c0392b; color: #fff; }
.cost-upload {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 6px 6px 12px;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 10px;
background: rgba(15, 23, 42, 0.40);
}
.cost-upload-choose {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 8px;
background: transparent;
border: 1px solid #475569;
color: #cbd5e1;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.cost-upload-choose:hover {
border-color: #38bdf8;
color: #38bdf8;
background: rgba(56, 189, 248, 0.08);
}
.cost-upload-choose svg { width: 15px; height: 15px; flex-shrink: 0; }
.cost-upload-name {
font-size: 12px;
color: #64748b;
font-style: italic;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cost-upload-name.has-file { color: #e2e8f0; font-style: normal; font-weight: 500; }
html[data-theme="light"] .cost-upload {
background: rgba(244, 241, 232, 0.5);
border-color: rgba(31, 30, 29, 0.10);
}
html[data-theme="light"] .cost-upload-choose { color: #5a5852; border-color: #cbd5e1; }
.logs-header-sep {
display: inline-block;
width: 1px;
height: 20px;
background: #334155;
margin: 0 6px;
}
html[data-theme="light"] .logs-header-sep { background: #e8e6dc; }
.order-empty {
text-align: center;
padding: 80px 40px;
color: #475569;
}
.order-empty svg { margin-bottom: 16px; opacity: 0.3; }
.order-empty p { font-size: 16px; }
.qty-input {
width: 70px;
background: #0f172a;
border: 1px solid #334155;
color: #e2e8f0;
padding: 6px 10px;
border-radius: 7px;
font-size: 14px;
outline: none;
text-align: center;
transition: border-color 0.2s;
}
.qty-input:focus { border-color: #38bdf8; }
.qty-input.custom-price-input { width: 96px; text-align: center }
.qty-input.custom-price-input::placeholder { color: #475569 }
.qty-input.custom-price-input:disabled {
opacity: 0.5;
cursor: not-allowed;
background: rgba(15,23,42,0.4);
}
.btn-remove {
background: transparent;
border: none;
color: #475569;
cursor: pointer;
padding: 6px;
border-radius: 6px;
transition: all 0.2s;
display: flex;
align-items: center;
}
.btn-remove:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.admin-sub-nav {
display: flex;
gap: 4px;
background: rgba(0,0,0,0.2);
border-radius: 10px;
padding: 4px;
margin-bottom: 24px;
width: fit-content;
}
.admin-sub-tab {
padding: 7px 16px;
border-radius: 7px;
border: none;
background: transparent;
color: #64748b;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 6px;
}
.admin-sub-tab:hover { color: #e2e8f0; }
.admin-sub-tab.active {
background: #1e293b;
color: #f8fafc;
font-weight: 600;
}
.marks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 6px;
margin-top: 4px;
max-width: 1200px;
}
.mark-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 7px;
padding: 7px 12px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 10px;
user-select: none;
}
.mark-card:hover { border-color: #475569; background: #263347; }
.mark-card.checked { border-color: #38bdf8; background: rgba(56,189,248,0.07); }
.mark-card input[type="checkbox"] {
width: 14px; height: 14px;
cursor: pointer;
accent-color: #38bdf8;
flex-shrink: 0;
}
.mark-card-info { display: flex; align-items: center; gap: 8px; }
.mark-card-name { font-weight: 600; color: #f8fafc; font-size: 13px; }
.mark-card-count { font-size: 11px; color: #64748b; }
.log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sku-row-num {
width: 44px;
text-align: center;
color: #64748b;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
html[data-theme="light"] .sku-row-num { color: #8a8980 }
.sku-actions-cell { width: 56px; text-align: center }
.sku-edit-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
padding: 0;
background: transparent;
border: 1px solid #334155;
border-radius: 6px;
color: #94a3b8;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sku-edit-btn:hover { color: #38bdf8; border-color: #38bdf8; background: rgba(56,189,248,0.08) }
html[data-theme="light"] .sku-edit-btn { color: #6b6a63; border-color: #e8e6dc }
html[data-theme="light"] .sku-edit-btn:hover { color: #0284c7; border-color: #0284c7; background: rgba(2,132,199,0.06) }
.price-edit-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
margin-left: 4px;
padding: 0;
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
vertical-align: middle;
opacity: 0.6;
transition: color 0.15s, opacity 0.15s, background 0.15s;
border-radius: 4px;
}
.price-edit-btn:hover { color: #38bdf8; opacity: 1; background: rgba(56,189,248,0.10); }
html[data-theme="light"] .price-edit-btn { color: #8a8980; }
html[data-theme="light"] .price-edit-btn:hover { color: #0284c7; background: rgba(2,132,199,0.08); }
.item-info-btn, .item-edit-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
margin-left: 6px;
padding: 0;
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
vertical-align: middle;
opacity: 0.6;
transition: color 0.15s, opacity 0.15s, background 0.15s;
border-radius: 4px;
}
.item-info-btn:hover { color: #fbbf24; opacity: 1; background: rgba(251,191,36,0.10); }
html[data-theme="light"] .item-info-btn { color: #8a8980; }
html[data-theme="light"] .item-info-btn:hover { color: #b45309; background: rgba(180,83,9,0.08); }
.item-edit-btn { color: #64748b; }
.cost-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cost-hist-table th {
text-align: left;
padding: 7px 10px;
font-weight: 600;
color: #94a3b8;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}
.cost-hist-table th.cost-hist-delta-col { text-align: right; }
.cost-hist-table td { padding: 7px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); }
.cost-hist-amt, .cost-hist-delta { font-variant-numeric: tabular-nums; }
.cost-hist-delta { text-align: right; }
.cost-hist-up { color: #ef4444; }
.cost-hist-down { color: #22c55e; }
.cost-hist-first { color: #94a3b8; font-style: italic; }
.cost-hist-empty { text-align: center; color: #94a3b8; padding: 16px; }
.item-edit-btn:hover { color: #38bdf8; opacity: 1; background: rgba(56,189,248,0.10); }
html[data-theme="light"] .item-edit-btn { color: #8a8980; }
html[data-theme="light"] .item-edit-btn:hover { color: #b45309; background: rgba(180,83,9,0.08); }
@keyframes ie-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
#itemConfirmModal { z-index: 600; }
.ie-panel {
width: 100%; max-width: 600px; overflow: hidden;
background: var(--ord-card); border: 1px solid var(--ord-border);
border-radius: var(--ord-radius); box-shadow: var(--ord-shadow);
animation: ie-in .18s cubic-bezier(.16,1,.3,1);
}
.ie-panel-sm { max-width: 440px; }
.ie-head { display: flex; align-items: flex-start; gap: 13px; padding: 18px 22px; border-bottom: 1px solid var(--ord-divider); }
.ie-avatar {
flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
background: var(--ord-accent-weak); color: var(--ord-accent); border: 1px solid var(--ord-accent);
}
.ie-head-text { min-width: 0; flex: 1 1 auto; }
.ie-eyebrow { color: var(--ord-eyebrow); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ie-title { color: var(--ord-text); font-size: 18px; font-weight: 760; letter-spacing: -.01em; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-sub { color: var(--ord-muted); font-size: 12px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ie-close {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; color: var(--ord-muted); cursor: pointer;
transition: background .15s, color .15s;
}
.ie-close:hover { background: var(--ord-card-hover); color: var(--ord-text); }
.ie-tabs { display: flex; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--ord-divider); }
.ie-tab {
position: relative; padding: 12px 2px; background: none; border: none; cursor: pointer;
color: var(--ord-text-2); font-size: 13px; font-weight: 600; font-family: inherit; transition: color .15s;
}
.ie-tab:hover, .ie-tab.active { color: var(--ord-text); }
.ie-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ord-accent); border-radius: 2px 2px 0 0; }
#itemEditFormView, #itemEditLogView { display: flex; flex-direction: column; min-height: 356px; padding: 20px 22px; }
#itemEditFormView[hidden], #itemEditLogView[hidden] { display: none; }
#priceEditFormView, #priceEditLogView { display: flex; flex-direction: column; min-height: 280px; padding: 20px 22px; }
#priceEditFormView { gap: 14px; }
#priceEditFormView[hidden], #priceEditLogView[hidden] { display: none; }
.ie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.ie-col-span { grid-column: 1 / -1; }
.ie-field { display: flex; flex-direction: column; min-width: 0; }
.ie-label { color: var(--ord-eyebrow); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.ie-input {
width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px;
background: var(--ord-bg); border: 1px solid var(--ord-border); border-radius: 10px;
padding: 9px 12px; color: var(--ord-text); outline: none;
transition: border-color .15s, box-shadow .15s;
}
.ie-input:hover { border-color: var(--ord-border-strong); }
.ie-input:focus { border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-accent-weak); }
.ie-select {
appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238194ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.ie-error { color: var(--ord-danger); font-size: 12px; margin-top: 10px; min-height: 15px; }
.ie-amount { position: relative; }
.ie-amount .ie-input { padding-right: 30px; }
.ie-amount-ccy { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--ord-muted); font-size: 13px; pointer-events: none; }
.ie-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ie-input[type="number"]::-webkit-inner-spin-button, .ie-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ie-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 18px; }
.pe-seg { display: inline-flex; gap: 4px; background: var(--ord-bg); border: 1px solid var(--ord-border); border-radius: 10px; padding: 3px; }
.pe-seg-btn { flex: 1; border: none; background: transparent; color: var(--ord-muted); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 18px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
.pe-seg-btn:hover:not(.active):not(:disabled) { color: var(--ord-text); }
.pe-seg-btn.active { background: var(--ord-accent); color: #0f172a; }
.pe-seg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pe-round-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; background: transparent; border: 1px solid var(--ord-border); color: var(--ord-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: border-color .15s, color .15s; }
.pe-round-btn:hover { border-color: var(--ord-accent); color: var(--ord-accent); }
.pe-hint { color: var(--ord-muted); font-size: 11.5px; margin-top: 8px; min-height: 14px; }
.ie-input.pe-computed { color: var(--ord-muted); border-style: dashed; cursor: default; }
.ie-btn {
padding: 9px 18px; border-radius: 10px; font-size: 13px; font-weight: 650; font-family: inherit;
cursor: pointer; border: 1px solid transparent;
transition: background .15s, border-color .15s, color .15s, filter .15s, transform .05s;
}
.ie-btn:active { transform: translateY(1px); }
.ie-btn-ghost { background: transparent; border-color: var(--ord-border); color: var(--ord-text-2); }
.ie-btn-ghost:hover { background: var(--ord-card-hover); color: var(--ord-text); border-color: var(--ord-border-strong); }
.ie-btn-primary { background: var(--ord-accent); border-color: var(--ord-accent); color: #fff; }
.ie-btn-primary:hover { filter: brightness(1.07); }
.ie-log-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--ord-border); border-radius: var(--ord-radius-sm); }
.ie-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ie-log-table th {
position: sticky; top: 0; z-index: 1; text-align: left; background: var(--ord-card);
color: var(--ord-eyebrow); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
padding: 10px 12px; border-bottom: 1px solid var(--ord-divider);
}
.ie-log-table td { padding: 10px 12px; border-bottom: 1px solid var(--ord-divider); color: var(--ord-text); vertical-align: top; }
.ie-log-table tbody tr:last-child td { border-bottom: none; }
.ie-log-table tbody tr:hover td { background: var(--ord-card-hover); }
.ie-log-old { color: var(--ord-muted); }
.ie-log-new { color: var(--ord-text); font-weight: 600; }
.ie-log-who { color: var(--ord-text-2); font-size: 12.5px; }
.ie-log-when { color: var(--ord-muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
th.ie-log-when { color: var(--ord-eyebrow); }
.ie-log-empty { text-align: center; color: var(--ord-muted); padding: 40px 12px; }
.ie-diff { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; }
.ie-diff-row { background: var(--ord-bg); border: 1px solid var(--ord-border); border-radius: 10px; padding: 10px 12px; }
.ie-diff-field { color: var(--ord-eyebrow); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.ie-diff-vals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ie-diff-old { background: var(--ord-card-hover); color: var(--ord-muted); border-radius: 7px; padding: 2px 8px; text-decoration: line-through; }
.ie-diff-arrow { color: var(--ord-muted); }
.ie-diff-new { background: var(--ord-accent-weak); color: var(--ord-accent); font-weight: 600; border-radius: 7px; padding: 2px 8px; }
@media (prefers-reduced-motion: reduce) { .ie-panel { animation: none; } .ie-btn:active { transform: none; } .ce-row { animation: none; } }
.cbm-card { max-width: 480px; }
.cbm-controls { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 4px; }
.cbm-round { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ord-text-2); cursor: pointer; user-select: none; }
.cbm-round input[type="checkbox"] { accent-color: var(--ord-accent); width: 15px; height: 15px; cursor: pointer; }
.cbm-preview-btn { align-self: flex-start; margin-top: 2px; }
.cbm-summary { padding: 0 22px; font-size: 12.5px; color: var(--ord-muted); min-height: 16px; }
.cbm-preview { padding: 4px 22px 0; max-height: 260px; overflow: auto; }
.cbm-preview:empty, .cbm-summary:empty { padding: 0; min-height: 0; }
#catBulkMarginModal .ie-foot { padding: 16px 22px 20px; }
#catBulkMarginModal .ie-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cbm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cbm-table th {
position: sticky; top: 0; z-index: 1; text-align: left; background: var(--ord-card);
color: var(--ord-eyebrow); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
padding: 8px 10px; border-bottom: 1px solid var(--ord-divider);
}
.cbm-table td { padding: 8px 10px; border-bottom: 1px solid var(--ord-divider); color: var(--ord-text); vertical-align: top; }
.cbm-table tbody tr:last-child td { border-bottom: none; }
.cbm-table tbody tr:hover td { background: var(--ord-card-hover); }
.cbm-table .num-c { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cbm-table .cbm-new { color: var(--ord-accent); font-weight: 600; }
#saleEditConfirmModal .ie-panel { max-width: 520px; }
.ce-body { display: flex; flex-direction: column; }
.ce-empty { text-align: center; color: var(--ord-muted); font-size: 13px; padding: 30px 12px; }
.ce-arrow { color: var(--ord-muted); flex: 0 0 auto; }
.ce-up { color: var(--ord-ok); background: var(--ord-ok-weak); }
.ce-down { color: var(--ord-danger); background: var(--ord-danger-weak); }
.ce-flat { color: var(--ord-muted); background: var(--ord-card-hover); }
.ce-hero { padding: 15px 22px 16px; border-bottom: 1px solid var(--ord-divider); }
.ce-hero-top { display: flex; align-items: baseline; justify-content: space-between; }
.ce-hero-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ord-eyebrow); }
.ce-hero-count { font-size: 11.5px; color: var(--ord-muted); }
.ce-hero-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; font-variant-numeric: tabular-nums; }
.ce-hero-old { font-size: 15px; color: var(--ord-muted); text-decoration: line-through; }
.ce-hero-new { font-size: 23px; font-weight: 780; color: var(--ord-text); letter-spacing: -.02em; }
.ce-hero-delta { margin-left: auto; font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.ce-ledger { display: flex; flex-direction: column; padding: 6px 14px; max-height: 42vh; overflow: auto; }
.ce-row { display: flex; align-items: center; gap: 11px; padding: 11px 8px; animation: ceRise .34s cubic-bezier(.2,.8,.2,1) both; }
.ce-row + .ce-row { border-top: 1px solid var(--ord-divider); }
@keyframes ceRise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.ce-badge { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 7px; display: grid; place-items: center; font-size: 15px; font-weight: 800; line-height: 1; }
.ce-badge svg { width: 12px; height: 12px; }
.ce-badge-add { background: var(--ord-ok-weak); color: var(--ord-ok); }
.ce-badge-remove { background: var(--ord-danger-weak); color: var(--ord-danger); }
.ce-badge-change, .ce-badge-detail { background: var(--ord-accent-weak); color: var(--ord-accent); }
.ce-main { min-width: 0; flex: 1 1 auto; }
.ce-name { color: var(--ord-text); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-name.ce-struck { color: var(--ord-muted); text-decoration: line-through; }
.ce-diff { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--ord-muted); font-variant-numeric: tabular-nums; }
.ce-diff .ie-diff-old, .ce-diff .ie-diff-new { padding: 1px 7px; font-size: 12px; }
.ce-k { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ord-eyebrow); }
.ce-sep { width: 1px; height: 12px; background: var(--ord-border); margin: 0 4px; }
.ce-delta { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.ce-caution { display: flex; align-items: center; gap: 8px; margin: 12px 22px 0; padding: 9px 12px; background: var(--ord-warn-weak); color: var(--ord-warn); border-radius: 9px; font-size: 12px; font-weight: 600; }
.ce-caution svg { flex: 0 0 auto; }
.ce-caution + .ce-caution { margin-top: 7px; }
.item-info-modal-body { max-width: 560px }
.sd-pill-sub {
color: #94a3b8;
font-size: 12px;
font-weight: 500;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .sd-pill-sub { color: #6b6a63 }
.sku-cols-wrap { position: relative; display: inline-flex }
.sku-cols-btn-icon {
padding: 0;
width: 38px;
justify-content: center;
}
.sku-cols-popover {
position: absolute;
top: calc(100% + 6px); right: 0;
z-index: 50;
min-width: 220px;
padding: 6px 0;
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.sku-cols-popover-head {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 14px 8px;
color: #94a3b8;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid #334155;
}
.sku-cols-popover-reset {
background: transparent;
border: 0;
color: #64748b;
font-size: 11px;
cursor: pointer;
padding: 2px 0;
}
.sku-cols-popover-reset:hover { color: #ef4444 }
.sku-cols-popover-list {
max-height: 360px;
overflow-y: auto;
padding: 4px 0;
}
.sku-col-row {
display: flex; align-items: center; gap: 8px;
padding: 6px 14px;
cursor: pointer;
color: #e2e8f0;
font-size: 13px;
}
.sku-col-row:hover { background: rgba(56,189,248,0.06) }
.sku-col-row.always-on { color: #64748b; cursor: default }
.sku-col-row.always-on:hover { background: transparent }
.sku-col-row input[type="checkbox"] {
accent-color: #38bdf8;
cursor: pointer;
}
.sku-col-row.always-on input[type="checkbox"] { cursor: not-allowed }
html[data-theme="light"] .sku-cols-popover {
background: #fff; border-color: #e8e6dc;
box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
html[data-theme="light"] .sku-cols-popover-head { color: #6b6a63; border-bottom-color: #e8e6dc }
html[data-theme="light"] .sku-cols-popover-reset { color: #8a8980 }
html[data-theme="light"] .sku-cols-popover-reset:hover { color: #c0392b }
html[data-theme="light"] .sku-col-row { color: #1f1e1d }
html[data-theme="light"] .sku-col-row:hover { background: rgba(2,132,199,0.06) }
html[data-theme="light"] .sku-col-row.always-on { color: #8a8980 }
html[data-theme="light"] .sku-col-row input[type="checkbox"] { accent-color: #0284c7 }
.sku-actions-popover { min-width: 280px }
.sku-action-item {
display: block;
width: 100%;
padding: 9px 14px;
background: transparent;
border: 0;
color: #e2e8f0;
font-size: 13px;
text-align: left;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.sku-action-item:hover { background: rgba(56,189,248,0.08); color: #38bdf8 }
.sku-action-item:disabled { opacity: 0.5; cursor: not-allowed }
html[data-theme="light"] .sku-action-item { color: #1f1e1d }
html[data-theme="light"] .sku-action-item:hover { background: rgba(2,132,199,0.06); color: #0284c7 }
.sku-select-cell { width: 36px; text-align: center }
.sku-select-cell input[type="checkbox"] {
cursor: pointer;
accent-color: #38bdf8;
width: 14px; height: 14px;
}
html[data-theme="light"] .sku-select-cell input[type="checkbox"] { accent-color: #0284c7 }
.cat-sel-col { display: none }
#itemsTable.cat-editing .cat-sel-col { display: table-cell; width: 36px; text-align: center }
.cat-sel-col input[type="checkbox"] {
cursor: pointer;
accent-color: #38bdf8;
width: 14px; height: 14px;
}
html[data-theme="light"] .cat-sel-col input[type="checkbox"] { accent-color: #0284c7 }
.cat-sel-col input[type="checkbox"]:disabled { opacity: 0.35; cursor: not-allowed }
.sku-preview-body { max-width: 760px !important; padding: 28px !important }
.sku-preview-wrap {
margin: 8px 0 12px;
max-height: 50vh;
overflow: auto;
border: 1px solid #1e293b;
border-radius: 8px;
}
.sku-preview-table { width: 100%; border-collapse: collapse; font-size: 12px }
.sku-preview-table thead th {
background: #0a1220;
color: #94a3b8;
text-transform: uppercase;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 8px 10px;
text-align: left;
position: sticky; top: 0;
border-bottom: 1px solid #1e293b;
}
.sku-preview-table thead th.c-num { text-align: right; width: 32px }
.sku-preview-table tbody td {
padding: 7px 10px;
border-bottom: 1px solid #1e293b;
color: #e2e8f0;
}
.sku-preview-table tbody td.c-num { text-align: right; color: #64748b; font-variant-numeric: tabular-nums }
.sku-preview-table tbody tr:last-child td { border-bottom: 0 }
.sku-preview-from { color: #f87171; font-family: ui-monospace, Menlo, monospace }
.sku-preview-to { color: #4ade80; font-family: ui-monospace, Menlo, monospace; font-weight: 600 }
.sku-preview-skipped {
margin-top: 6px;
padding: 8px 12px;
background: rgba(148,163,184,0.08);
border-radius: 6px;
color: #94a3b8;
font-size: 12px;
line-height: 1.5;
}
.sku-preview-skipped:empty { display: none }
html[data-theme="light"] .sku-preview-wrap { border-color: #e8e6dc }
html[data-theme="light"] .sku-preview-table thead th { background: #faf9f5; color: #6b6a63; border-bottom-color: #e8e6dc }
html[data-theme="light"] .sku-preview-table tbody td { color: #1f1e1d; border-bottom-color: #e8e6dc }
html[data-theme="light"] .sku-preview-table tbody td.c-num { color: #8a8980 }
html[data-theme="light"] .sku-preview-from { color: #c0392b }
html[data-theme="light"] .sku-preview-to { color: #1a7a3d }
html[data-theme="light"] .sku-preview-skipped { background: rgba(232,230,220,0.6); color: #6b6a63 }
.log-table thead th {
background: #334155;
padding: 10px 14px;
text-align: left;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #94a3b8;
border-bottom: 1px solid #475569;
position: sticky;
top: 0;
white-space: nowrap;
}
.log-table tbody tr { background: #1e293b; border-bottom: 1px solid #172033; transition: background 0.1s; }
.log-table tbody tr:hover { background: #263347; }
.log-table tbody tr:nth-child(even) { background: #172033; }
.log-table tbody tr:nth-child(even):hover { background: #263347; }
.log-table td { padding: 9px 14px; vertical-align: middle; }
.log-action-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.log-login { background: rgba(74,222,128,0.15); color: #4ade80; }
.log-login_failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.log-logout { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-sync_started { background: rgba(56,189,248,0.15); color: #38bdf8; }
.log-sync_completed { background: rgba(56,189,248,0.15); color: #38bdf8; }
.log-sync_failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.log-order_sent { background: rgba(251,191,36,0.15); color: #fbbf24; }
.log-marks_updated { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-user_created { background: rgba(34,211,238,0.15); color: #22d3ee; }
.log-user_deleted { background: rgba(239,68,68,0.15); color: #f87171; }
.log-user_updated { background: rgba(34,211,238,0.15); color: #22d3ee; }
.log-logs_cleared { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-order_added { background: rgba(251,146,60,0.15); color: #fb923c; }
.log-order_removed { background: rgba(239,68,68,0.15); color: #f87171; }
.log-password_changed { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-password_change_denied { background: rgba(239,68,68,0.15); color: #f87171; }
.log-tracking_completed { background: rgba(56,189,248,0.15); color: #38bdf8; }
.log-tyg_item_created { background: rgba(34,211,238,0.15); color: #22d3ee; }
.log-tyg_item_updated { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-tyg_order_exported { background: rgba(251,191,36,0.15); color: #fbbf24; }
.log-catalog_exported { background: rgba(251,191,36,0.15); color: #fbbf24; }
.log-user_update_denied { background: rgba(239,68,68,0.15); color: #f87171; }
.log-admin_setting_changed { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-driver_template_created { background: rgba(34,211,238,0.15); color: #22d3ee; }
.log-driver_template_updated { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-driver_template_deleted { background: rgba(239,68,68,0.15); color: #f87171; }
.log-login_totp_required { background: rgba(56,189,248,0.15); color: #38bdf8; }
.log-logs_purged { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-price_updated { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-sale_created { background: rgba(251,191,36,0.15); color: #fbbf24; }
.log-sessions_revoked { background: rgba(239,68,68,0.15); color: #f87171; }
.log-sessions_revoked_admin { background: rgba(239,68,68,0.15); color: #f87171; }
.log-sku_updated { background: rgba(167,139,250,0.15); color: #a78bfa; }
.log-taxpayer_lookup { background: rgba(56,189,248,0.15); color: #38bdf8; }
.log-totp_enabled { background: rgba(74,222,128,0.15); color: #4ade80; }
.log-totp_disabled { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-totp_disable_denied { background: rgba(239,68,68,0.15); color: #f87171; }
.log-totp_setup_failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.log-totp_challenge_failed { background: rgba(239,68,68,0.15); color: #ef4444; }
.log-waybill_activated { background: rgba(251,191,36,0.15); color: #fbbf24; }
.log-waybill_closed { background: rgba(74,222,128,0.15); color: #4ade80; }
.log-waybill_get { background: rgba(56,189,248,0.15); color: #38bdf8; }
.log-waybill_save_blocked { background: rgba(239,68,68,0.15); color: #f87171; }
.log-waybill_save_dedup { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-waybill_save_no_sale_link { background: rgba(239,68,68,0.15); color: #ef4444; }
.log-waybill_save_test { background: rgba(100,116,139,0.15); color: #94a3b8; }
.log-waybill_buyer_tin_sandbox_override { background: rgba(100,116,139,0.15); color: #94a3b8; }
.version-badge {
font-size: 10px;
font-weight: 600;
color: #475569;
background: rgba(0,0,0,0.25);
border: 1px solid #334155;
border-radius: 5px;
padding: 2px 6px;
letter-spacing: 0.3px;
margin-left: 8px;
vertical-align: middle;
white-space: nowrap;
}
.changelog-entry {
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
margin-bottom: 8px;
overflow: hidden;
}
.changelog-header {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 18px;
background: #162032;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.changelog-header:hover {
background: #1a2840;
}
.changelog-version {
font-size: 15px;
font-weight: 700;
color: #38bdf8;
}
.changelog-label {
font-size: 12px;
font-weight: 600;
color: #0f172a;
background: #38bdf8;
padding: 2px 10px;
border-radius: 10px;
}
.changelog-latest {
font-size: 11px;
font-weight: 600;
color: #fff;
background: #22c55e;
padding: 2px 9px;
border-radius: 10px;
}
.changelog-date {
font-size: 12px;
color: #475569;
margin-left: auto;
}
.changelog-chevron {
width: 16px;
height: 16px;
color: #475569;
transition: transform 0.2s;
flex-shrink: 0;
}
.changelog-entry.open .changelog-chevron {
transform: rotate(180deg);
}
.changelog-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease;
}
.changelog-entry.open .changelog-body {
max-height: 600px;
}
.changelog-changes {
padding: 12px 18px 14px;
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
border-top: 1px solid #334155;
}
.changelog-changes li {
font-size: 13px;
color: #94a3b8;
display: flex;
align-items: flex-start;
gap: 8px;
}
.changelog-changes li::before {
content: "•";
color: #38bdf8;
font-weight: 700;
flex-shrink: 0;
margin-top: 1px;
}
.user-row-delete { border-color: #334155; color: #64748b; }
.user-row-delete:hover { border-color: #ef4444; color: #ef4444; }
.s-01b5d8f8 { background:#1e293b; border-radius:12px; border:1px solid #334155; margin-bottom:28px; max-height:320px; overflow:auto }
.s-088cf005 { width:120px }
.s-0fa9348e { color:#94a3b8; font-size:12px; padding:12px 14px; text-align:center }
.s-10ef5f68 { background:#1e293b; border-radius:12px; border:1px solid #334155; flex:1; min-width:160px; padding:20px 24px }
.s-1134ae88 { color:#64748b; padding:28px; text-align:center }
.s-13076d95 { text-align:center }
.s-13557b16 { display:flex; flex-direction:column; gap:4px; min-width:160px }
.s-17f5f1d7 { display:flex; flex-direction:column; gap:4px; min-width:140px }
.s-18d1f1f9 { background:#0f172a; border-radius:8px; border:1px solid #334155; color:#e2e8f0; font-size:13px; height:34px; outline:none; padding:7px 10px }
.s-1c2fc78f { align-self:flex-end; background:transparent; border-radius:8px; border:1px solid #334155; color:#64748b; cursor:pointer; font-size:12px; height:34px; padding:0 12px; white-space:nowrap }
.s-1ca2bc8d { color:#64748b; padding:9px 14px; white-space:nowrap }
.s-211f8f0f { color:#64748b; grid-column:1/-1; padding:40px; text-align:center }
.s-21937321 { color:#475569; font-weight:400; letter-spacing:0; text-transform:none }
.s-23a2813b { color:#475569; font-size:11px }
.s-252c0156 { padding:9px 14px; text-align:center; white-space:nowrap }
.s-2587d288 {
background: #0f172a;
border: 1px solid #1e3a5f;
border-radius: 4px;
color: #38bdf8;
font-family: monospace;
font-size: 12px;
letter-spacing: 0.5px;
padding: 2px 8px;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.s-2587d288:hover { background: #1e293b; border-color: #38bdf8; color: #7dd3fc }
.s-2587d288:active { background: #1e3a5f }
html[data-theme="light"] .s-2587d288 { background: #fff; border-color: #d1d5db; color: #c96442 }
html[data-theme="light"] .s-2587d288:hover { background: #f3f4f6; border-color: #c96442; color: #a8502f }
.s-27e0330a { animation:spin 0.8s linear infinite }
.s-2aeec122 { background:rgba(59,130,246,0.15); border-radius:6px; border:1px solid rgba(59,130,246,0.3); color:#60a5fa; font-size:11px; padding:2px 8px }
.s-2f01efdd { width:140px }
.s-3019698e { margin-bottom:20px }
.s-325f7162 { color:#e2e8f0 }
.s-348c8ca2 { margin:0 auto 10px }
.s-35fb5b2d { background:#14532d; border-radius:12px; border:1px solid #166534; color:#4ade80; font-size:11px; font-weight:600; padding:2px 10px }
.s-38288887 { color:#fbbf24 }
.s-3b0eeecb { font-size:12px; padding:7px 14px }
.s-3b16d18f { color:#475569; font-size:12px; padding:9px 14px; white-space:nowrap }
.s-3d706656 { padding:10px 16px }
.s-403688b7 { max-width:700px }
.s-4232bb74 { background:rgba(239,68,68,0.1); border-radius:6px; border:1px solid rgba(239,68,68,0.25); color:#ef4444; cursor:pointer; font-size:11px; padding:4px 10px }
.s-455cb5d6 { animation:spin 0.8s linear infinite; display:inline; margin-right:5px; vertical-align:middle }
.s-4ddbe905 { white-space:nowrap; text-align: center }
.s-5209dec5 { color:#64748b; white-space:nowrap }
.s-52645320 { color:#38bdf8; font-weight:700; padding:9px 14px; text-align:center }
.s-53deb6e3 { color:#475569 }
.s-59a63a4f { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:28px }
.s-5aca550d { font-size:15px; font-weight:700 }
.s-5b21188f { padding:12px 14px; text-align:center }
.s-5b3701f0 { color:#38bdf8; font-weight:700; padding:10px 16px; text-align:center }
.s-5f05c55f { color:#e2e8f0; font-size:12px }
.s-60c4e190 { margin:0 auto 12px }
.s-6f5b4bf5 { color:#94a3b8; font-family:monospace; font-size:12px; padding:9px 14px }
.s-71e6b3e2 { color:#f8fafc; font-size:18px; font-weight:700; margin-bottom:24px }
.s-729192c0 { width:130px }
.s-72d5b905 { color:#ef4444; font-size:12px }
.s-73272816 { color:#4ade80 }
.s-73292b1c { background:#1e293b; border-bottom:1px solid #0f172a }
.s-743e9fdc { padding:9px 14px }
.s-7985217c { color:#64748b; font-size:13px; font-weight:600; letter-spacing:.5px; margin-bottom:10px; text-transform:uppercase }
.s-7a43d33f { align-items:center; color:#64748b; display:flex; font-size:13px; font-weight:600; gap:8px; letter-spacing:.5px; margin-bottom:12px; text-transform:uppercase }
.s-7c81c52e { color:#64748b; padding:30px; text-align:center }
.s-7dfb1e04 { color:#38bdf8; font-size:24px; font-weight:700 }
.s-7e30481c { color:#475569; font-family:monospace; font-size:12px }
.s-82957270 { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:12px; font-weight:600; letter-spacing:.5px; padding:14px 16px; text-align:left; text-transform:uppercase }
.s-8306fcd7 { color:#4ade80; display:inline-block; font-size:13px; min-width:90px; text-align:right }
.s-8519e32c { display:inline; margin-right:5px; vertical-align:middle }
.s-8cd4ae71 { color:#94a3b8 }
.s-8e86974b { margin-bottom:16px }
.s-8e86e5bc { padding:12px 16px }
.s-8f622a9b { color:#4ade80; font-weight:600 }
.s-90c4b99f { background:rgba(239,68,68,0.1); border-radius:8px; border:1px solid rgba(239,68,68,0.3); color:#ef4444; display:none; font-size:13px; margin-bottom:12px; padding:10px 14px }
.s-91158bd5 { color:#ef4444; padding:20px }
.s-922986a3 { background:#0f172a; border-radius:10px; border:1px solid #334155; color:#e2e8f0; font-size:15px; outline:none; padding:12px 16px; width:100% }
.s-931b8190 { background:#0f172a; border-radius:8px; border:1px solid #334155; color:#e2e8f0; font-family:monospace; font-size:13px; outline:none; padding:9px 12px; width:100% }
.s-95782264 { width:150px }
.s-959bb525 { align-items:center; display:flex; gap:6px }
.s-95e8cd6b { background:rgba(74,222,128,0.12); border-radius:6px; border:1px solid rgba(74,222,128,0.3); color:#4ade80; font-size:11px; padding:2px 8px }
.s-9812a576 { align-items:center; display:flex; gap:10px }
.order-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.order-header > .s-9812a576 { flex-shrink: 0; margin-left: auto; }
.s-9960dbea { border-collapse:collapse; width:100% }
.s-9a1511d5 { background:#1e293b; border-radius:16px; border:1px solid #334155; box-shadow:0 25px 60px rgba(0,0,0,0.5); max-width:400px; padding:36px; width:100% }
.s-9e081b0b { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:11px; font-weight:600; letter-spacing:.4px; padding:10px 16px; position:sticky; text-align:left; text-transform:uppercase; top:0 }
.s-a01546a8 { color:#94a3b8; padding:10px 16px; white-space:nowrap }
.s-a1c93820 { color:#e2e8f0; font-weight:600; padding:9px 14px }
.s-a3bf1651 { background:#1e293b; border-bottom:1px solid #172033 }
.s-a893849e { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:11px; font-weight:600; letter-spacing:.4px; padding:9px 14px; position:sticky; text-align:center; text-transform:uppercase; top:0 }
.s-a98064d0 { padding:12px 16px; text-align:center }
.s-a9c99f38 { border-bottom:1px solid #172033 }
.s-a9e50906 { align-items:flex-end; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px }
.s-aa46526b { color:#38bdf8 }
.s-ab6496d1 { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:11px; font-weight:600; letter-spacing:.4px; padding:9px 14px; position:sticky; text-align:left; text-transform:uppercase; top:0; white-space:nowrap }
.s-ac50b617 { display:flex; gap:8px; padding:14px 16px }
.s-ac8c3a35 { font-size:12px; padding:12px 14px; text-align:center; white-space:nowrap }
.s-b2b1904a { padding:12px 14px }
.s-b4b29fcc { color:#64748b; padding:40px; text-align:center }
.s-b5b72e94 { border-collapse:collapse; display:none; width:100% }
.s-bd546afb { padding:14px 16px }
.s-bd7e9171 { display:flex; gap:10px; margin-top:8px }
.s-be333b25 { color:#334155; font-family:monospace; font-size:11px; max-width:180px; overflow:hidden; padding:9px 14px; text-overflow:ellipsis }
.s-c15ce0c6 { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:11px; font-weight:600; letter-spacing:.4px; padding:10px 16px; position:sticky; text-align:center; text-transform:uppercase; top:0 }
.s-c9e34862 { color:#ef4444 }
.s-cb458930 { display:none }
.s-cd5830f7 { background:#1e293b; border-radius:12px; border:1px solid #334155; max-height:400px; overflow:auto }
.s-d07ba04d { padding:12px 16px; text-align:center; white-space:nowrap }
.s-d1208919 { background:#1e293b; border-radius:12px; border:1px solid #334155; flex:1; min-width:220px; padding:20px 24px }
.s-d2a5018e { background:#334155; border-bottom:1px solid #475569; padding:14px 16px }
.s-d2e2fca8 { color:#f8fafc; font-size:16px; font-weight:700 }
.s-d567157a { color:#f8fafc; font-weight:600; padding:14px 16px }
.s-d5b4dea0 { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:12px; font-weight:600; letter-spacing:.5px; padding:14px 16px; text-align:center; text-transform:uppercase }
.s-d8533f4c { color:#94a3b8; font-size:12px }
.s-da5cd676 { flex:1 }
.s-e555859d { border-collapse:collapse; font-size:13px; width:100% }
.s-e7bf9224 { align-items:center; background:rgba(0,0,0,0.6); display:none; inset:0; justify-content:center; position:fixed; z-index:500 }
.s-e8d47f00 { margin-bottom:12px; opacity:.3 }
.s-eabf90df { align-self:flex-end; color:#64748b; font-size:12px; padding-bottom:8px }
.s-eac75029 { color:#475569; font-size:11px; font-weight:600; letter-spacing:.5px; margin-bottom:8px; text-transform:uppercase }
.s-ed95d897 { background:rgba(56,189,248,0.1); border-radius:6px; border:1px solid rgba(56,189,248,0.25); color:#38bdf8; cursor:pointer; font-size:11px; margin-right:6px; padding:4px 10px }
.s-edc7eaee { color:#64748b; font-size:13px; margin-top:4px }
.s-ef48f12b { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:11px; font-weight:600; letter-spacing:.4px; padding:10px 16px; position:sticky; text-align:left; text-transform:uppercase; top:0; white-space:nowrap }
.s-f047c7da { align-items:center; background:#3b82f6; border-radius:8px; border:none; color:#fff; cursor:pointer; display:flex; font-size:13px; font-weight:600; gap:7px; height:38px; padding:9px 20px; white-space:nowrap }
.s-f07dfe7f { color:#fb923c; font-size:24px; font-weight:700 }
.s-f0f40558 { color:#64748b; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase }
.s-f2e2ddee { color:#64748b; padding:20px; text-align:center }
.s-f3a8bdfd { color:#64748b; padding:10px 16px; text-align:center }
.s-f7c8bb5d { color:#64748b; display:none; padding:60px; text-align:center }
.s-f7fa7ec4 { background:#334155; border-bottom:1px solid #475569; color:#94a3b8; font-size:11px; font-weight:600; letter-spacing:.4px; padding:9px 14px; position:sticky; text-align:left; text-transform:uppercase; top:0 }
.s-fd02069b { max-height:calc(100vh - 300px) }
.role-badge { padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.role-badge.role-admin { background: rgba(56, 189, 248, 0.15); color: #38bdf8; }
.role-badge.role-user { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.role-badge.role-procurement_manager { background: rgba(251, 146, 60, 0.15); color: #fb923c; }
.role-badge.role-dealer { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.user-menu { position: relative; }
.user-avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #38bdf8, #0ea5e9);
color: #0f172a;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: 2px solid transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, transform 0.1s;
padding: 0;
text-transform: uppercase;
}
.user-avatar:hover { border-color: #38bdf8; }
.user-avatar:active { transform: scale(0.96); }
.user-menu-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
padding: 6px;
z-index: 200;
display: flex;
flex-direction: column;
gap: 4px;
}
.user-menu-dropdown[hidden] { display: none; }
.notif-menu { position: relative; display: flex; align-items: center; }
.notif-btn { color: #94a3b8; background: transparent; border: none; cursor: pointer; padding: 7px; border-radius: 8px; display: inline-flex; }
.notif-btn:hover { color: #e2e8f0; background: rgba(148,163,184,0.12); }
.notif-dropdown {
position: absolute; top: calc(100% + 8px); right: 0;
width: 330px; max-height: 440px; overflow-y: auto;
background: #1e293b; border: 1px solid #334155; border-radius: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45); padding: 6px; z-index: 200;
}
.notif-dropdown[hidden] { display: none; }
.notif-dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; font-size: 13px; font-weight: 700; color: #e2e8f0; }
.notif-markall { padding: 4px 8px; font-size: 11px; }
.notif-head-actions { display: flex; gap: 6px; align-items: center; }
.notif-list { display: flex; flex-direction: column; gap: 2px; }
.notif-empty { color: #94a3b8; font-size: 13px; padding: 20px 8px; text-align: center; }
.notif-item { display: block; width: 100%; text-align: left; background: transparent; border: none; border-left: 3px solid transparent; border-radius: 8px; padding: 9px 10px; cursor: pointer; }
.notif-item:hover { background: rgba(148,163,184,0.10); }
.notif-item.unread { border-left-color: #38bdf8; background: rgba(56,189,248,0.08); }
.notif-item-title { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.notif-item-body { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.notif-item-time { font-size: 11px; color: #64748b; margin-top: 3px; }
html[data-theme="light"] .notif-btn { color: #6b6a63; }
html[data-theme="light"] .notif-btn:hover { color: #1f1e1d; background: rgba(31,30,29,0.06); }
html[data-theme="light"] .notif-dropdown { background: #fff; border-color: #e7e2d8; box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
html[data-theme="light"] .notif-dropdown-head { color: #1f1e1d; }
html[data-theme="light"] .notif-item-title { color: #1f1e1d; }
html[data-theme="light"] .notif-item.unread { background: rgba(14,165,233,0.08); }
.user-menu-header {
padding: 10px 12px 8px;
border-bottom: 1px solid #334155;
margin-bottom: 4px;
}
.user-menu-name {
font-size: 14px;
font-weight: 600;
color: #f1f5f9;
}
.user-menu-role {
font-size: 11px;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-top: 2px;
}
.user-menu-section { padding: 6px 10px 4px; }
.user-menu-label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #64748b;
margin-bottom: 6px;
}
.theme-switcher, .lang-switcher {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
padding: 3px;
}
.theme-option, .lang-option {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 8px;
font-size: 12px;
font-weight: 500;
background: transparent;
color: #94a3b8;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
}
.theme-option:hover, .lang-option:hover { color: #e2e8f0; }
.theme-option.active, .lang-option.active {
background: #1e293b;
color: #38bdf8;
border-color: #334155;
}
.lang-option .flag {
display: inline-flex;
width: 16px; height: 10px;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.lang-option .flag svg { display: block; width: 100%; height: 100%; }
.user-menu-item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
font-size: 13px;
font-weight: 500;
color: #cbd5e1;
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
text-align: left;
transition: background 0.15s, color 0.15s;
}
.user-menu-item:hover { background: #334155; color: #f1f5f9; }
.user-menu-logout { color: #94a3b8; }
.user-menu-logout:hover { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
html[data-theme="light"] body {
background: #faf9f5;
color: #1f1e1d;
font-family: "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="light"] header {
background: linear-gradient(135deg, #1e293b, #334155);
border-bottom: 1px solid #475569;
}
html[data-theme="light"] .header-brand-divider { background: #334155; }
html[data-theme="light"] .header-brand-title {
color: #f8fafc;
font-weight: 700;
letter-spacing: -0.2px;
}
html[data-theme="light"] .header-brand-title span { color: #c96442; }
html[data-theme="light"] header h1 { color: #f8fafc; }
html[data-theme="light"] header h1 span { color: #c96442; }
html[data-theme="light"] .header-brand-sub { color: #94a3b8; }
html[data-theme="light"] .version-badge {
background: rgba(201, 100, 66, 0.15);
border-color: rgba(201, 100, 66, 0.35);
color: #f0a48a;
}
html[data-theme="light"] .nav-tabs {
background: transparent;
border-bottom: 1px solid #e8e6dc;
border-radius: 0;
padding: 0;
gap: 0;
}
html[data-theme="light"] .nav-tab {
background: transparent;
color: #6b6a63;
border-radius: 0;
border-bottom: 2px solid transparent;
padding: 10px 18px;
font-weight: 500;
}
html[data-theme="light"] .nav-tab.active {
background: transparent;
color: #c96442;
border-bottom-color: #c96442;
}
html[data-theme="light"] .nav-tab:hover:not(.active) {
background: transparent;
color: #1f1e1d;
}
html[data-theme="light"] .filters,
html[data-theme="light"] .table-wrapper,
html[data-theme="light"] .order-table-wrapper,
html[data-theme="light"] .login-card {
background: #ffffff;
border-color: #e8e6dc;
box-shadow: 0 1px 2px rgba(31, 30, 29, 0.04);
}
html[data-theme="light"] .filter-search input,
html[data-theme="light"] .filter-group select,
html[data-theme="light"] .filters input,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] select,
html[data-theme="light"] textarea {
background: #ffffff;
border-color: #e0ded3;
color: #1f1e1d;
}
html[data-theme="light"] .filter-search input:focus,
html[data-theme="light"] input[type="text"]:focus,
html[data-theme="light"] input[type="password"]:focus,
html[data-theme="light"] input[type="number"]:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
border-color: #c96442;
outline: 2px solid rgba(201, 100, 66, 0.15);
outline-offset: -1px;
}
html[data-theme="light"] .filter-search svg { color: #a8a79f; }
html[data-theme="light"] .filter-group {
background: #ffffff;
border-color: #e0ded3;
}
html[data-theme="light"] .filter-group label {
color: #6b6a63;
border-right-color: #e8e6dc;
}
html[data-theme="light"] .filter-group select {
background-color: #ffffff;
color: #1f1e1d;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a79f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="light"] .filter-group select option {
background: #ffffff;
color: #1f1e1d;
}
html[data-theme="light"] .filter-group input[type="date"],
html[data-theme="light"] .filter-group input[type="month"],
html[data-theme="light"] .filter-group input[type="number"] {
background: #ffffff;
color: #1f1e1d;
}
html[data-theme="light"] .filter-group input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .filter-group input[type="month"]::-webkit-calendar-picker-indicator {
filter: none;
}
html[data-theme="light"] .filter-group input::placeholder { color: #a8a79f; }
html[data-theme="light"] .filter-search input::placeholder,
html[data-theme="light"] .fav-save input::placeholder { color: #a8a79f; }
html[data-theme="light"] .filter-favorites { border-bottom-color: #e8e6dc; }
html[data-theme="light"] .fav-chip {
background: #faf9f5;
border-color: #e0ded3;
color: #3d3c39;
}
html[data-theme="light"] .fav-chip:hover {
border-color: #c96442;
color: #a8502f;
background: rgba(201, 100, 66, 0.04);
}
html[data-theme="light"] .fav-chip-delete { color: #a8a79f; }
html[data-theme="light"] .fav-save-btn {
background: #c96442;
border-color: #c96442;
color: #ffffff;
}
html[data-theme="light"] .fav-save-btn:hover {
background: #a8502f;
border-color: #a8502f;
}
html[data-theme="light"] .filter-toggle-btn[aria-expanded="true"] {
background: rgba(201, 100, 66, 0.08);
border-color: #c96442;
color: #a8502f;
}
html[data-theme="light"] .brand-tab {
background: #ffffff;
border-color: #e0ded3;
color: #6b6a63;
}
html[data-theme="light"] .brand-tab:hover {
border-color: #c96442;
color: #1f1e1d;
}
html[data-theme="light"] .brand-tab.active {
background: #c96442;
color: #ffffff;
border-color: #c96442;
}
html[data-theme="light"] .filter-toggle-btn {
background: #ffffff;
border-color: #e0ded3;
color: #6b6a63;
}
html[data-theme="light"] .filter-toggle-btn:hover {
border-color: #c96442;
color: #1f1e1d;
}
html[data-theme="light"] #resetBtn,
html[data-theme="light"] #roadResetBtn,
html[data-theme="light"] #salesResetBtn,
html[data-theme="light"] #customersResetBtn,
html[data-theme="light"] #analyticsResetBtn,
html[data-theme="light"] #tygResetBtn,
html[data-theme="light"] #skuResetBtn,
html[data-theme="light"] #myOrdersResetBtn {
background: #ffffff;
border-color: #e0ded3;
color: #6b6a63;
}
html[data-theme="light"] #resetBtn:hover,
html[data-theme="light"] #roadResetBtn:hover,
html[data-theme="light"] #salesResetBtn:hover,
html[data-theme="light"] #customersResetBtn:hover,
html[data-theme="light"] #analyticsResetBtn:hover,
html[data-theme="light"] #tygResetBtn:hover,
html[data-theme="light"] #skuResetBtn:hover,
html[data-theme="light"] #myOrdersResetBtn:hover {
border-color: #c96442;
color: #a8502f;
}
html[data-theme="light"] table thead,
html[data-theme="light"] .s-f7fa7ec4,
html[data-theme="light"] th,
html[data-theme="light"] .th {
background: #faf9f5;
color: #6b6a63;
border-bottom: 1px solid #e8e6dc;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
}
html[data-theme="light"] tbody tr,
html[data-theme="light"] tbody tr:nth-child(even) {
background: #ffffff;
}
html[data-theme="light"] tbody tr:hover,
html[data-theme="light"] tbody tr:nth-child(even):hover {
background: #faf9f5;
}
html[data-theme="light"] tbody tr.selected-row {
background: rgba(201, 100, 66, 0.08) !important;
}
html[data-theme="light"] tbody td {
color: #1f1e1d;
border-bottom: 1px solid #f3f1e8;
}
html[data-theme="light"] .s-b2b1904a,
html[data-theme="light"] .s-0fa9348e,
html[data-theme="light"] .s-5b21188f,
html[data-theme="light"] .s-ac8c3a35 {
color: #1f1e1d;
border-bottom-color: #f3f1e8;
}
html[data-theme="light"] .group-row td {
background: #f5f3ea;
color: #a8502f;
border-bottom-color: #e8e6dc;
font-weight: 500;
}
html[data-theme="light"] .stock-detail { color: #a8a79f; }
html[data-theme="light"] .mono { color: #6b6a63; }
html[data-theme="light"] .add-order-btn {
background: #ffffff;
border-color: #e0ded3;
color: #3d3c39;
}
html[data-theme="light"] .add-order-btn:hover:not(:disabled) {
background: #c96442;
border-color: #c96442;
color: #ffffff;
}
html[data-theme="light"] .add-order-btn.in-order {
background: rgba(122, 151, 105, 0.12);
border-color: rgba(122, 151, 105, 0.4);
color: #5a7a48;
}
html[data-theme="light"] .add-order-btn:disabled,
html[data-theme="light"] .add-order-btn.no-stock {
background: #faf9f5;
border-color: #ececdf;
color: #c9c8be;
}
html[data-theme="light"] .user-menu-dropdown {
background: #ffffff;
border-color: #e8e6dc;
box-shadow: 0 12px 32px rgba(31, 30, 29, 0.1);
}
html[data-theme="light"] .user-menu-header { border-bottom-color: #e8e6dc; }
html[data-theme="light"] .user-menu-name { color: #1f1e1d; }
html[data-theme="light"] .user-menu-role { color: #8c8a82; }
html[data-theme="light"] .user-menu-label { color: #8c8a82; }
html[data-theme="light"] .theme-switcher,
html[data-theme="light"] .lang-switcher {
background: #faf9f5;
border-color: #e8e6dc;
}
html[data-theme="light"] .theme-option,
html[data-theme="light"] .lang-option { color: #6b6a63; }
html[data-theme="light"] .theme-option.active,
html[data-theme="light"] .lang-option.active {
background: #ffffff;
color: #c96442;
border-color: #e0ded3;
}
html[data-theme="light"] .user-menu-item { color: #3d3c39; }
html[data-theme="light"] .user-menu-item:hover {
background: #faf9f5;
color: #1f1e1d;
}
html[data-theme="light"] .user-avatar {
background: #c96442;
color: #ffffff;
border-color: #c96442;
}
html[data-theme="light"] .user-avatar:hover { background: #a8502f; border-color: #a8502f; }
html[data-theme="light"] .fav-list:empty::before { color: #a8a79f; }
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .s-01b5d8f8,
html[data-theme="light"] .s-cd5830f7,
html[data-theme="light"] .changelog-entry {
background: #ffffff;
border-color: #e8e6dc;
}
html[data-theme="light"] .login-screen { background: #faf9f5; }
html[data-theme="light"] .login-card label { color: #6b6a63; }
html[data-theme="light"] .btn-primary,
html[data-theme="light"] button[type="submit"]:not(.fav-save-btn):not(.brand-tab) {
background: #c96442;
border-color: #c96442;
color: #ffffff;
}
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] button[type="submit"]:not(.fav-save-btn):not(.brand-tab):hover {
background: #a8502f;
border-color: #a8502f;
}
html[data-theme="light"] .table-wrapper::-webkit-scrollbar-track,
html[data-theme="light"] .order-table-wrapper::-webkit-scrollbar-track,
html[data-theme="light"] #saleModal .sd-panel-scroll::-webkit-scrollbar-track {
background: #faf9f5;
border-top-color: #e8e6dc;
}
html[data-theme="light"] .table-wrapper::-webkit-scrollbar-thumb,
html[data-theme="light"] .order-table-wrapper::-webkit-scrollbar-thumb,
html[data-theme="light"] #saleModal .sd-panel-scroll::-webkit-scrollbar-thumb {
background: #d4d2c6;
border-color: #faf9f5;
}
html[data-theme="light"] .table-wrapper::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .order-table-wrapper::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] #saleModal .sd-panel-scroll::-webkit-scrollbar-thumb:hover {
background: #b8b6aa;
}
.tracking-modal-body { max-width: 560px }
.tracking-container-no {
color: #38bdf8;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 18px;
text-align: center;
}
.tracking-timeline {
align-items: flex-start;
display: flex;
gap: 14px;
margin-bottom: 22px;
}
.tracking-timeline-end {
flex: 0 0 auto;
min-width: 90px;
text-align: center;
}
.tracking-timeline-end:last-child { text-align: center }
.tracking-timeline-flag {
font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
font-size: 34px;
line-height: 1;
margin-bottom: 6px;
}
.tracking-timeline-country {
color: #e2e8f0;
font-size: 13px;
font-weight: 600;
}
.tracking-timeline-port {
color: #94a3b8;
font-size: 11px;
margin-top: 2px;
}
.tracking-timeline-date {
color: #38bdf8;
font-size: 11px;
font-weight: 600;
margin-top: 4px;
}
.tracking-timeline-track {
background: #334155;
border-radius: 4px;
flex: 1 1 auto;
height: 8px;
margin-top: 32px;
min-width: 0;
position: relative;
}
.tracking-timeline-fill {
background: linear-gradient(90deg, #38bdf8, #22d3ee);
border-radius: 4px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: var(--pct, 0%);
}
.tracking-timeline-marker {
left: var(--pct, 0%);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.tracking-timeline-badge {
background: #22d3ee;
border-radius: 10px;
color: #0f172a;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.tracking-timeline-dot {
background: #22d3ee;
border: 2px solid #1e293b;
border-radius: 50%;
box-sizing: border-box;
height: 14px;
width: 14px;
}
.tracking-table {
border-collapse: collapse;
font-size: 14px;
margin-bottom: 18px;
width: 100%;
}
.tracking-table tr { border-bottom: 1px solid rgba(148, 163, 184, 0.15) }
.tracking-table tr:last-child { border-bottom: none }
.tracking-table th {
color: #94a3b8;
font-weight: 500;
padding: 9px 10px 9px 0;
text-align: left;
white-space: nowrap;
width: 40%;
}
.tracking-table td {
color: #e2e8f0;
padding: 9px 0;
}
.tracking-code { color: #64748b; font-family: ui-monospace, monospace; font-size: 12px }
.tracking-status {
background: rgba(56, 189, 248, 0.15);
border-radius: 4px;
color: #38bdf8;
font-weight: 600;
padding: 2px 8px;
}
.tracking-empty { color: #94a3b8; font-size: 14px; margin: 18px 0; text-align: center }
.tracking-modal-body {
display: flex;
flex-direction: column;
max-height: 85vh;
max-width: 560px;
padding: 0;
}
.tracking-modal-head {
align-items: center;
border-bottom: 1px solid #334155;
display: flex;
flex: 0 0 auto;
gap: 12px;
justify-content: space-between;
padding: 20px 24px 16px;
}
.tracking-modal-head > .s-71e6b3e2 { margin: 0 }
.tracking-modal-x {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
font-size: 28px;
line-height: 1;
padding: 0 4px;
}
.tracking-modal-x:hover { color: #e2e8f0 }
.tracking-modal-scroll {
flex: 1 1 auto;
overflow-y: auto;
padding: 20px 24px;
}
.tracking-modal-foot {
border-top: 1px solid #334155;
display: flex;
flex: 0 0 auto;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 24px;
}
.sd-foot-waybill {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
border: 1px solid #334155;
border-radius: 10px;
background: rgba(30,41,59,0.35);
min-height: 111px; box-sizing: border-box;
}
.sd-foot-waybill[hidden] { display: none; }
.sd-foot-waybill-locked {
flex-direction: column; align-items: stretch; justify-content: flex-start;
gap: 0; padding: 0; overflow: hidden;
}
.wb2-head {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 13px 15px; background: none; border: 0; cursor: pointer;
font: inherit; color: inherit; text-align: left;
}
.wb2-head:hover { background: var(--ord-card-hover); }
.wb2-icon {
width: 34px; height: 34px; flex: none; border-radius: 9px;
background: var(--ord-accent-weak); color: var(--ord-accent);
display: flex; align-items: center; justify-content: center;
}
.wb2-icon svg { width: 18px; height: 18px; }
.wb2-htext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.wb2-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb2-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ord-eyebrow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb2-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; color: var(--ord-text); letter-spacing: .02em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb2-status {
flex: none; display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px;
font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.wb2-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sd-foot-waybill-locked[data-status="saved"] .wb2-status { color: #38bdf8; background: rgba(56,189,248,.14); }
.sd-foot-waybill-locked[data-status="activated"] .wb2-status { color: #fbbf24; background: rgba(251,191,36,.14); }
.sd-foot-waybill-locked[data-status="completed"] .wb2-status { color: #22c55e; background: rgba(34,197,94,.14); }
.wb2-body:empty { display: none; }
.wb2-note { padding: 0 15px 13px; font-size: 11px; color: var(--ord-muted); }
.wb2-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 0 15px; }
.wb2-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ord-eyebrow); }
.wb2-amount { font-size: 25px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 3px; color: var(--ord-text); }
.wb2-verify svg { width: 20px; height: 20px; }
.wb2-sub { font-size: 10.5px; color: var(--ord-muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.wb2-stats { display: flex; margin: 13px 15px 0; border-top: 1px solid var(--ord-divider); }
.wb2-stat { flex: 1; padding: 10px 4px 0; }
.wb2-stat + .wb2-stat { border-left: 1px solid var(--ord-divider); padding-left: 14px; }
.wb2-sv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ord-text); }
.wb2-foot { display: flex; align-items: center; gap: 7px; margin-top: 13px; padding: 9px 15px; font-size: 12px; font-weight: 600; }
.wb2-foot svg { width: 15px; height: 15px; flex: none; }
.wb2-bad { color: #fbbf24; }
.wb2-ok { color: #22c55e; }
.wb2-foot.wb2-ok { background: rgba(34,197,94,.10); }
.wb2-foot.wb2-bad { background: rgba(251,191,36,.11); }
html[data-theme="light"] .wb2-bad { color: #b45309; }
html[data-theme="light"] .wb2-ok { color: #15803d; }
html[data-theme="light"] .wb2-foot.wb2-ok { background: rgba(21,128,61,.10); }
html[data-theme="light"] .wb2-foot.wb2-bad { background: rgba(180,83,9,.10); }
html[data-theme="light"] .sd-foot-waybill {
border-color: #e0ded3;
background: #faf9f5;
}
.sd-waybill-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
background: rgba(56,189,248,0.10);
border: 1px solid #38bdf8;
color: #38bdf8;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.sd-waybill-chip:hover { background: rgba(56,189,248,0.20); }
.sd-waybill-chip-id { font-weight: 700; }
.sd-waybill-chip-status {
font-family: inherit; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
padding: 1px 7px; border-radius: 999px;
background: rgba(56,189,248,0.18);
}
.sd-waybill-chip[data-wb-status="activated"] {
border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.10);
}
.sd-waybill-chip[data-wb-status="activated"]:hover {
background: rgba(251,191,36,0.20);
}
.sd-waybill-chip[data-wb-status="activated"] .sd-waybill-chip-status {
background: rgba(251,191,36,0.20);
}
.sd-waybill-chip[data-wb-status="completed"] {
border-color: #22c55e; color: #22c55e; background: rgba(34,197,94,0.10);
}
.sd-waybill-chip[data-wb-status="completed"]:hover {
background: rgba(34,197,94,0.20);
}
.sd-waybill-chip[data-wb-status="completed"] .sd-waybill-chip-status {
background: rgba(34,197,94,0.20);
}
html[data-theme="light"] .sd-waybill-chip {
background: rgba(2,132,199,0.08); border-color: #0284c7; color: #0284c7;
}
html[data-theme="light"] .sd-waybill-chip:hover { background: rgba(2,132,199,0.18); }
html[data-theme="light"] .sd-waybill-chip-status { background: rgba(2,132,199,0.16); }
html[data-theme="light"] .sd-waybill-chip[data-wb-status="activated"] {
border-color: #b45309; color: #b45309; background: rgba(180,83,9,0.08);
}
html[data-theme="light"] .sd-waybill-chip[data-wb-status="completed"] {
border-color: #15803d; color: #15803d; background: rgba(21,128,61,0.08);
}
.tracking-mov-title {
color: #94a3b8;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
margin: 6px 0 10px;
text-transform: uppercase;
}
.tracking-mov-list {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.tracking-mov-list::before {
background: #334155;
content: "";
left: 5px;
position: absolute;
top: 6px;
bottom: 6px;
width: 2px;
}
.tracking-mov-item {
padding: 0 0 14px 22px;
position: relative;
}
.tracking-mov-item:last-child { padding-bottom: 0 }
.tracking-mov-dot {
border-radius: 50%;
height: 12px;
left: 0;
position: absolute;
top: 4px;
width: 12px;
}
.tracking-mov-dot.act { background: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2) }
.tracking-mov-dot.est { background: #475569; border: 2px solid #64748b; box-sizing: border-box }
.tracking-mov-head {
align-items: baseline;
display: flex;
gap: 10px;
justify-content: space-between;
}
.tracking-mov-event { color: #e2e8f0; font-size: 13px; font-weight: 600 }
.tracking-mov-ts { color: #94a3b8; font-size: 11px; white-space: nowrap }
.tracking-mov-loc { color: #cbd5e1; font-size: 12px; margin-top: 2px }
.tracking-mov-flag { margin-right: 4px; font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif }
.tracking-mov-vessel{ color: #64748b; font-size: 11px; font-style: italic; margin-top: 2px }
html[data-theme="light"] .tracking-container-no { color: #c86f3d }
html[data-theme="light"] .tracking-timeline-country { color: #1f2937 }
html[data-theme="light"] .tracking-timeline-port { color: #6b7280 }
html[data-theme="light"] .tracking-timeline-date { color: #c86f3d }
html[data-theme="light"] .tracking-timeline-track { background: #e8e6dc }
html[data-theme="light"] .tracking-timeline-fill { background: linear-gradient(90deg, #c86f3d, #d97848) }
html[data-theme="light"] .tracking-timeline-badge { background: #d97848; color: #fff }
html[data-theme="light"] .tracking-timeline-dot { background: #d97848; border-color: #fff }
html[data-theme="light"] .tracking-table tr { border-bottom-color: rgba(107, 114, 128, 0.15) }
html[data-theme="light"] .tracking-table th { color: #6b7280 }
html[data-theme="light"] .tracking-table td { color: #1f2937 }
html[data-theme="light"] .tracking-code { color: #9ca3af }
html[data-theme="light"] .tracking-status { background: rgba(200, 111, 61, 0.15); color: #c86f3d }
html[data-theme="light"] .tracking-empty { color: #6b7280 }
html[data-theme="light"] .tracking-mov-title { color: #6b7280 }
html[data-theme="light"] .tracking-mov-list::before { background: #e8e6dc }
html[data-theme="light"] .tracking-mov-dot.act { background: #c86f3d; box-shadow: 0 0 0 3px rgba(200, 111, 61, 0.2) }
html[data-theme="light"] .tracking-mov-dot.est { background: #fff; border-color: #c4beb0 }
html[data-theme="light"] .tracking-mov-event { color: #1f2937 }
html[data-theme="light"] .tracking-mov-ts { color: #6b7280 }
html[data-theme="light"] .tracking-mov-loc { color: #374151 }
html[data-theme="light"] .tracking-mov-vessel{ color: #9ca3af }
html[data-theme="light"] .tracking-modal-head { border-bottom-color: #e8e6dc }
html[data-theme="light"] .tracking-modal-foot { border-top-color: #e8e6dc }
html[data-theme="light"] .tracking-modal-x { color: #6b7280 }
html[data-theme="light"] .tracking-modal-x:hover { color: #1f2937 }
.sales-meta { margin: 12px 0; color: #94a3b8; font-size: 13px }
.sales-pager { display: flex; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap }
.sales-pager button {
padding: 4px 10px; border: 1px solid #334155; background: #1e293b;
color: #e2e8f0; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.sales-pager button:hover:not(:disabled) { background: #334155 }
.sales-pager button:disabled { opacity: 0.5; cursor: not-allowed }
.sales-pager button.active { background: #f97316; border-color: #f97316; color: #fff }
.sales-row { cursor: pointer }
.sales-c { text-align: center }
.sales-row:hover td { background: rgba(249, 115, 22, 0.08) }
.customers-row { cursor: pointer }
.customers-row:hover td { background: rgba(249, 115, 22, 0.06) }
.customers-row td { white-space: nowrap }
.cs-modal-head, .sd-head {
padding: 18px 24px 16px;
background: linear-gradient(180deg,
rgba(249, 115, 22, 0.08) 0%,
rgba(249, 115, 22, 0) 100%);
}
.cs-modal-titleblock, .sd-titleblock {
display: flex; align-items: center; gap: 14px; min-width: 0;
}
.cs-modal-avatar, .sd-avatar {
flex: 0 0 auto;
height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(249, 115, 22, 0.15);
color: #f97316;
border: 1px solid rgba(249, 115, 22, 0.35);
font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
}
.cs-modal-avatar { width: 44px; border-radius: 50% }
.cs-modal-titletext, .sd-titletext {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cs-modal-eyebrow, .sd-eyebrow {
color: #94a3b8;
font-size: 11px; font-weight: 600; letter-spacing: 0.7px;
text-transform: uppercase;
}
.cs-modal-title, .sd-title {
color: #f8fafc;
font-size: 17px; font-weight: 700; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="light"] .cs-modal-head,
html[data-theme="light"] .sd-head {
background: linear-gradient(180deg,
rgba(201, 100, 66, 0.08) 0%,
rgba(201, 100, 66, 0) 100%);
}
html[data-theme="light"] .cs-modal-avatar,
html[data-theme="light"] .sd-avatar {
background: rgba(201, 100, 66, 0.12);
color: #c96442;
border-color: rgba(201, 100, 66, 0.30);
}
html[data-theme="light"] .cs-modal-eyebrow,
html[data-theme="light"] .sd-eyebrow { color: #8a8980 }
html[data-theme="light"] .cs-modal-title,
html[data-theme="light"] .sd-title { color: #1f1e1d }
.customer-sales-summary {
display: flex;
gap: 10px;
margin: 0 0 14px;
flex-wrap: wrap;
}
.customer-sales-summary-pill {
display: inline-flex;
align-items: baseline;
gap: 8px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
padding: 8px 14px;
}
.customer-sales-summary-label {
color: #64748b;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.customer-sales-summary-value {
color: #e2e8f0;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.customer-sales-summary-sub {
color: #64748b;
font-size: 13px;
font-weight: 500;
}
.customer-sales-table .cs-number {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: #e2e8f0;
font-weight: 600;
}
.customer-sales-table .cs-date {
color: #94a3b8;
font-size: 12px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.customer-sales-table .cs-amount {
color: #e2e8f0;
font-weight: 600;
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.customer-sales-table .cs-amount .cs-currency {
color: #f97316;
font-weight: 500;
margin-left: 2px;
}
.customer-sales-table .cs-warehouse { color: #cbd5e1; font-size: 12.5px }
.customer-sales-table .cs-comments {
color: #94a3b8;
font-style: italic;
font-size: 12.5px;
}
html[data-theme="light"] .customer-sales-summary-pill {
background: #faf9f5; border-color: #e0ded3;
}
html[data-theme="light"] .customer-sales-summary-label { color: #8a8980 }
html[data-theme="light"] .customer-sales-summary-value { color: #1f1e1d }
html[data-theme="light"] .customer-sales-summary-sub { color: #8a8980 }
html[data-theme="light"] .customer-sales-table .cs-number { color: #1f1e1d }
html[data-theme="light"] .customer-sales-table .cs-date { color: #6b6a63 }
html[data-theme="light"] .customer-sales-table .cs-amount { color: #1f1e1d }
html[data-theme="light"] .customer-sales-table .cs-amount .cs-currency { color: #c96442 }
html[data-theme="light"] .customer-sales-table .cs-warehouse { color: #3d3c39 }
html[data-theme="light"] .customer-sales-table .cs-comments { color: #8a8980 }
.tyg-edit-btn {
padding: 4px 12px; border-radius: 6px;
background: transparent; border: 1px solid #334155;
color: #cbd5e1; font-size: 12px; font-weight: 500;
cursor: pointer; transition: all 0.15s;
}
.tyg-edit-btn:hover { border-color: #f97316; color: #f97316; background: rgba(249,115,22,0.06) }
html[data-theme="light"] .tyg-edit-btn { border-color: #d4d2c5; color: #6b6a63 }
html[data-theme="light"] .tyg-edit-btn:hover { border-color: #c96442; color: #a8502f; background: rgba(201,100,66,0.05) }
#tygFilterRow .filter-group select,
#tygFilterRow .filter-group input { color: #fff; }
.multi-select.has-selection .multi-select-btn,
.multi-select.has-selection .multi-select-label { color: #fff; }
.tyg-newOrder-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 14px 0 20px;
}
.tyg-newOrder-stats .kpi-tile { padding: 8px 14px; border-radius: 8px; }
.tyg-newOrder-stats .kpi-label { font-size: 11px; margin-bottom: 2px; }
.tyg-newOrder-stats .kpi-value { font-size: 18px; color: #4ade80; }
html[data-theme="light"] .tyg-newOrder-stats .kpi-value { color: #16a34a; }
@media (max-width: 720px) {
.tyg-newOrder-stats { grid-template-columns: 1fr; }
}
#forecastViewPlan.active,
#forecastViewLeadTimes.active {
background: #f97316; color: #fff;
}
html[data-theme="light"] #forecastViewPlan.active,
html[data-theme="light"] #forecastViewLeadTimes.active {
background: #c96442; color: #fff;
}
.lead-times-save-row {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 24px; padding: 0 4px;
}
.waybill-refs-status {
margin: 4px 0 14px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(239, 68, 68, 0.10);
border: 1px solid rgba(239, 68, 68, 0.30);
color: #fca5a5;
font-size: 13px;
line-height: 1.45;
}
.tyg-sub-nav-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.tyg-sub-nav-row .admin-sub-nav { margin-bottom: 0; }
.tyg-sub-nav-actions { display: flex; gap: 8px; }
.tyg-order-btn {
padding: 4px 10px; border-radius: 6px;
background: transparent; border: 1px solid #334155;
color: #cbd5e1; font-size: 12px; font-weight: 500;
cursor: pointer; transition: all 0.15s;
white-space: nowrap;
}
.tyg-order-btn:hover { border-color: #f97316; color: #f97316; background: rgba(249,115,22,0.06) }
.tyg-order-btn.added {
border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,0.08);
}
.tyg-order-btn.added:hover {
border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.08);
}
html[data-theme="light"] .tyg-order-btn { border-color: #d4d2c5; color: #6b6a63 }
html[data-theme="light"] .tyg-order-btn:hover { border-color: #c96442; color: #a8502f; background: rgba(201,100,66,0.05) }
html[data-theme="light"] .tyg-order-btn.added { border-color: #16a34a; color: #16a34a; background: rgba(22,163,74,0.06) }
html[data-theme="light"] .tyg-order-btn.added:hover { border-color: #dc2626; color: #dc2626; background: rgba(220,38,38,0.06) }
.tyg-modal-body { max-width: min(820px, 95vw); max-height: 95vh; }
.tyg-modal-body .tracking-modal-scroll { padding: 0; }
.filter-group-ms { overflow: visible; padding-right: 4px; }
.filter-group-ms > .multi-select { flex: 1 1 auto; }
.multi-select {
position: relative;
min-width: 160px;
}
.multi-select-btn {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
width: 100%;
background: rgba(15, 23, 42, 0.6);
border: 1px solid #334155;
border-radius: 8px;
color: #fff;
font-size: 13px;
padding: 6px 10px;
height: 32px;
box-sizing: border-box;
cursor: pointer;
}
.multi-select-btn:hover { border-color: #475569; }
.multi-select.has-selection .multi-select-btn { border-color: #f97316; color: #f97316; }
.multi-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-select-panel {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 60;
min-width: 220px; max-width: 320px;
background: #1e293b;
border: 1px solid #334155;
border-radius: 8px;
padding: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.multi-select-search {
width: 100%;
background: #0f172a;
border: 1px solid #334155;
border-radius: 6px;
color: #e2e8f0;
font-size: 12px;
padding: 5px 8px;
margin-bottom: 6px;
box-sizing: border-box;
}
.multi-select-search:focus { outline: none; border-color: #f97316; }
.multi-select-list { max-height: 240px; overflow-y: auto; }
.filter-group .multi-select-option,
.multi-select-option {
display: flex; align-items: center; gap: 8px;
padding: 4px 8px;
border-radius: 4px;
color: #fff;
font-size: 12px;
font-weight: normal;
text-transform: none;
letter-spacing: 0;
height: auto;
line-height: 1.3;
border-right: none;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.multi-select-option > span {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1 1 auto;
}
.multi-select-option:hover { background: rgba(148,163,184,0.08); }
.multi-select-option input[type="checkbox"] {
accent-color: #f97316;
cursor: pointer;
width: 14px;
height: 14px;
flex: 0 0 14px;
margin: 0;
}
html[data-theme="light"] .multi-select-btn {
background: #fffdf7; border-color: #d4d2c5; color: #2a2a26;
}
html[data-theme="light"] .multi-select.has-selection .multi-select-btn { border-color: #c96442; color: #a8502f; }
html[data-theme="light"] .multi-select-panel { background: #fff; border-color: #e8e6dc; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
html[data-theme="light"] .multi-select-search { background: #fffdf7; border-color: #d4d2c5; color: #2a2a26; }
html[data-theme="light"] .multi-select-search:focus { border-color: #c96442; }
html[data-theme="light"] .multi-select-option { color: #2a2a26; }
html[data-theme="light"] .multi-select-option:hover { background: rgba(201,100,66,0.06); }
html[data-theme="light"] .multi-select-option input[type="checkbox"] { accent-color: #c96442; }
.tyg-show-cell { vertical-align: middle; }
.tyg-show-cb { cursor: pointer; width: 16px; height: 16px; accent-color: #f97316; }
.tyg-show-cb:disabled { cursor: not-allowed; opacity: 0.5; }
html[data-theme="light"] .tyg-show-cb { accent-color: #c96442; }
.tyg-item-form { padding: 16px 20px; }
.tyg-form-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px;
}
.tyg-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.tyg-field span { color: #94a3b8; font-weight: 500; }
.tyg-field input, .tyg-field select {
padding: 8px 10px; border-radius: 6px; border: 1px solid #334155;
background: #0f172a; color: #e2e8f0; font-size: 13px;
}
.tyg-field input:focus, .tyg-field select:focus { outline: none; border-color: #f97316; }
.tyg-field-wide { grid-column: span 2; }
.tyg-form-error { color: #ef4444; font-size: 12px; margin-top: 12px; min-height: 16px; }
html[data-theme="light"] .tyg-field span { color: #6b6a63; }
html[data-theme="light"] .tyg-field input,
html[data-theme="light"] .tyg-field select {
background: #fffdf7; border-color: #d4d2c5; color: #2a2a26;
}
html[data-theme="light"] .tyg-field input:focus,
html[data-theme="light"] .tyg-field select:focus { border-color: #c96442; }
@media (max-width: 720px) {
.tyg-form-grid { grid-template-columns: repeat(2, 1fr); }
.tyg-field-wide { grid-column: span 2; }
}
.sales-badge-posted { color: #4ade80; font-weight: 600 }
.sales-badge-unposted { color: #fbbf24; font-weight: 600 }
.customer-balance-pos,
.customer-balance-neg { font-weight: 600; white-space: nowrap }
.customer-balance-pos { color: #4ade80 }
.customer-balance-neg { color: #ef4444 }
html[data-theme="light"] .customer-balance-pos { color: #16a34a }
html[data-theme="light"] .customer-balance-neg { color: #dc2626 }
#customersTableBody td.sales-c { white-space: nowrap }
.sd-head { padding: 14px 24px 12px }
.sd-avatar {
min-width: 44px;
border-radius: 14px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: 0.4px;
padding: 0 12px;
}
.sd-title-row .sd-title {
color: #94a3b8;
font-size: 12px;
font-weight: 500;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .sd-title-row .sd-title { color: #6b6a63 }
.sd-title-row {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
min-width: 0;
}
.sd-subtitle,
.sd-title-sep {
color: #94a3b8; font-size: 12px; font-weight: 500;
font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .sd-subtitle,
html[data-theme="light"] .sd-title-sep { color: #6b6a63 }
.wb-head .wb-head-type {
appearance: none; -webkit-appearance: none;
background: rgba(56, 189, 248, 0.10);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.35);
border-radius: 999px;
padding: 2px 12px; height: 22px;
font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
cursor: default; opacity: 1;
}
.sd-client {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 3px 10px 3px 8px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.30);
border-radius: 6px;
align-self: flex-start;
max-width: 100%;
}
.sd-client-icon {
flex: 0 0 auto;
color: #38bdf8;
}
.sd-client-label {
color: #38bdf8;
font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase;
flex: 0 0 auto;
}
.sd-client-name {
color: #f8fafc;
font-size: 13px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
html[data-theme="light"] .sd-client {
background: rgba(2, 132, 199, 0.08);
border-color: rgba(2, 132, 199, 0.30);
}
html[data-theme="light"] .sd-client-icon,
html[data-theme="light"] .sd-client-label { color: #0284c7 }
html[data-theme="light"] .sd-client-name { color: #1f1e1d }
.sd-hero { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px }
.sd-pill {
flex: 1 1 160px;
background: #0f172a;
border: 1px solid #334155;
border-radius: 10px;
padding: 6px 12px;
line-height: 1.2;
}
.sd-pill-primary { border-color: rgba(249, 115, 22, 0.5) }
.sd-pill-credit { border-color: rgba(74, 222, 128, 0.35) }
.sd-pill-muted { border-color: rgba(148, 163, 184, 0.25) }
.sd-pill-label {
color: #64748b;
font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px;
text-transform: uppercase; margin-bottom: 1px;
}
.sd-pill-value {
color: #f8fafc; font-size: 15px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.sd-pill-primary .sd-pill-value { color: #f97316 }
.sd-pill-credit .sd-pill-value { color: #4ade80 }
.sd-pill-ccy { color: #94a3b8; font-size: 12px; font-weight: 500; margin-left: 6px }
.sd-status-row {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 0 0 14px;
}
.sd-status-head {
margin: 0 12px 0 auto;
align-self: center;
flex-wrap: wrap;
justify-content: flex-end;
}
.sd-status-head:empty { display: none }
.sd-meta-label {
color: #64748b;
font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px;
text-transform: uppercase; margin-bottom: 1px;
}
.sd-comments {
background: rgba(56, 189, 248, 0.06);
border-left: 3px solid #38bdf8;
border-radius: 6px;
padding: 10px 14px;
margin: 0 0 14px;
}
.sd-section { margin-top: 18px }
.sd-section-title {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
color: #94a3b8; margin: 0 0 8px;
display: flex; align-items: center; gap: 8px;
}
.sd-section-count {
background: #0f172a;
border: 1px solid #334155;
border-radius: 999px;
padding: 1px 8px;
color: #e2e8f0; font-size: 11px; font-weight: 600;
letter-spacing: 0.2px;
}
.sd-items-wrap { max-height: 50vh }
.sale-items-table { width: 100%; border-collapse: collapse; font-size: 12.5px }
.sale-items-table th, .sale-items-table td {
padding: 7px 10px;
text-align: left;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.sale-items-table th {
color: #64748b; font-weight: 600;
font-size: 10.5px; letter-spacing: 0.5px;
text-transform: uppercase;
white-space: nowrap;
background: #0f172a; position: sticky; top: 0;
}
.sale-items-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
.sale-items-table .num-c { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums }
.sale-items-table .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace }
.sd-i-ccy { color: #94a3b8; font-size: 11px; font-weight: 500; margin-left: 2px }
.sd-i-idx { color: #64748b }
.sd-i-part { color: #e2e8f0; font-weight: 600 }
.sd-i-soft { color: #94a3b8; font-size: 12px }
.sd-i-qty { color: #fbbf24; font-weight: 600 }
.sd-i-price { color: #cbd5e1 }
.sd-i-amount { color: #f97316; font-weight: 700 }
.sale-modal-body { max-width: min(1280px, 95vw); }
#saleModal .sale-modal-body { background: var(--ord-bg); border: 1px solid var(--ord-border-strong);
box-shadow: var(--ord-shadow); }
#saleModal { backdrop-filter: blur(3px); }
html[data-theme="light"] #saleModal { background: rgba(40,36,30,.32); }
#saleModal .sd-head, #saleEditModal .sd-head { padding: 18px 22px; border-bottom: 1px solid var(--ord-divider); gap: 13px; }
#saleModal .sd-avatar, #saleEditModal .sd-avatar { background: var(--ord-accent-weak); border: 1px solid var(--ord-accent);
color: var(--ord-accent); border-radius: 12px; width: 42px; height: 42px; font-weight: 800; }
#saleModal .sd-eyebrow, #saleEditModal .sd-eyebrow { color: var(--ord-eyebrow); font-size: 10.5px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; }
#saleModal .sd-title, #saleEditModal .sd-title { color: var(--ord-text); font-size: 18px; font-weight: 760; letter-spacing: -.01em; }
#saleModal .sd-subtitle, #saleModal .sd-title-sep, #saleEditModal .sd-subtitle, #saleEditModal .sd-title-sep { color: var(--ord-muted); }
#saleModal .sd-client, #saleEditModal .sd-client { color: var(--ord-muted); }
#saleModal .sd-client-name, #saleEditModal .sd-client-name { color: var(--ord-text-2); font-weight: 600; }
.sale-modal-body { animation: sdRise .34s cubic-bezier(.16,.84,.44,1) both; }
@keyframes sdRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sd-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: stretch; }
.sd-main { min-width: 0; display: flex; flex-direction: column; }
.sd-main > .ord-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.sd-rail { display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
.sd-rail > :last-child { margin-top: auto; }
.sd-panel-toolbar { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
border-bottom: 1px solid var(--ord-divider); flex: 0 0 auto; }
.sd-panel-toolbar .sd-pt-t { font-size: 11px; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; color: var(--ord-eyebrow); }
.sd-panel-toolbar .sd-pt-c { background: var(--ord-surface); border: 1px solid var(--ord-border);
border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; color: var(--ord-text-2); }
.sd-panel-toolbar .sd-pt-m { font-size: 12px; font-weight: 600; color: var(--ord-muted); }
.sd-panel-toolbar .sd-pt-m .sd-pt-n { display: inline-block; background: var(--ord-surface);
border: 1px solid var(--ord-border); border-radius: 999px; padding: 2px 9px; font-size: 11px;
font-weight: 700; color: var(--ord-text); }
.sd-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
#saleModal .sd-tbl th:nth-child(1) { width: 44px; }
#saleModal .sd-tbl th:nth-child(1),
#saleModal .sd-tbl td.sd-i-idx { padding-left: 10px; padding-right: 4px; }
#saleModal .sd-tbl th:nth-child(2) { width: 94px; }
#saleModal .sd-tbl th:nth-child(4) { width: 124px; }
#saleModal .sd-tbl th:nth-child(5) { width: 54px; }
#saleModal .sd-tbl th:nth-child(6) { width: 56px; }
#saleModal .sd-tbl th:nth-child(7) { width: 88px; }
#saleModal .sd-tbl th:nth-child(8) { width: 100px; }
#saleModal .sd-tbl th:nth-child(9) { width: 92px; }
#saleModal .sd-tbl th, #saleModal .sd-tbl td,
#saleEditModal .sd-tbl th, #saleEditModal .sd-tbl td { overflow: hidden; text-overflow: ellipsis; }
.sd-tbl thead th { text-align: left; padding: 11px 11px; font-size: 10.5px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; color: var(--ord-eyebrow);
border-bottom: 1px solid var(--ord-divider); white-space: nowrap;
background: var(--ord-card); position: sticky; top: 0; }
.sd-tbl thead th.r { text-align: right; }
.sd-tbl tbody td { padding: 12px 11px; border-bottom: 1px solid var(--ord-divider);
color: var(--ord-text-2); font-size: 13px; vertical-align: middle; }
.sd-tbl tbody tr:last-child td { border-bottom: 1px solid var(--ord-divider); }
#saleModal .sd-tbl tbody tr,
#saleModal .sd-tbl tbody tr:nth-child(even),
#saleModal .sd-tbl tbody tr:hover,
#saleEditModal .sd-tbl tbody tr,
#saleEditModal .sd-tbl tbody tr:nth-child(even),
#saleEditModal .sd-tbl tbody tr:hover { background: transparent; }
.sd-tbl tbody tr:hover td { background: var(--ord-card-hover); }
.sd-tbl td.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sd-tbl thead th:nth-child(n+4),
.sd-tbl tbody td:nth-child(n+4) { text-align: center; }
.sd-tbl .sd-i-idx { color: var(--ord-eyebrow); }
.sd-tbl .sd-i-part { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
color: var(--ord-text); font-weight: 600; white-space: nowrap; }
.sd-tbl .sd-i-item { min-width: 0; }
.sd-tbl .sd-i-name { color: var(--ord-text); font-weight: 600; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-tbl .sd-i-compat { margin-top: 2px; color: var(--ord-muted); font-size: 11px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.sd-tbl .sd-i-soft { color: var(--ord-muted); font-size: 12px; white-space: nowrap; }
.sd-tbl .sd-i-qty { color: var(--ord-text); font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.sd-tbl .sd-i-amount { color: var(--ord-text); font-weight: 650; }
.sd-tbl .sd-i-ccy { color: var(--ord-eyebrow); font-size: 10.5px; margin-left: 2px; }
.sd-kv { display: flex; flex-direction: column; gap: 11px; }
.sd-kv-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sd-kv-k { font-size: 12px; color: var(--ord-muted); }
.sd-kv-v { font-size: 12.5px; color: var(--ord-text-2); font-weight: 600; text-align: right;
font-variant-numeric: tabular-nums; }
.sd-comments-card { background: var(--ord-accent-weak); border-radius: var(--ord-radius-sm); padding: 11px 13px; }
.sd-comments-card .sd-cc-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--ord-eyebrow); margin-bottom: 4px; }
.sd-comments-card .sd-cc-body { font-size: 12.5px; color: var(--ord-text-2); line-height: 1.45; }
.sd-comments-card.is-empty { background: transparent; border: 1px solid var(--ord-border); }
.sd-comments-card.is-empty .sd-cc-body { color: var(--ord-muted); font-style: italic; }
#saleModal .ord-tot-hero .ord-v .sd-sym { font-size: 14px; color: var(--ord-muted); font-weight: 600; margin-left: 6px; }
#saleModal .sd-panel-scroll, #saleEditModal .sd-panel-scroll { flex: 1 1 auto; min-height: 0; max-height: 56vh; overflow-y: auto; overflow-x: hidden;
scrollbar-width: auto; scrollbar-color: #38bdf8 #0f172a; }
#saleModal .sd-panel-scroll::-webkit-scrollbar, #saleEditModal .sd-panel-scroll::-webkit-scrollbar { height: 14px; width: 12px; -webkit-appearance: none; display: block; }
#saleModal .sd-panel-scroll::-webkit-scrollbar-track, #saleEditModal .sd-panel-scroll::-webkit-scrollbar-track { background: #0f172a; border-top: 1px solid #334155; }
#saleModal .sd-panel-scroll::-webkit-scrollbar-thumb, #saleEditModal .sd-panel-scroll::-webkit-scrollbar-thumb { background: #38bdf8; border-radius: 7px; border: 2px solid #0f172a; min-width: 50px; }
#saleModal .sd-panel-scroll::-webkit-scrollbar-thumb:hover, #saleEditModal .sd-panel-scroll::-webkit-scrollbar-thumb:hover { background: #7dd3fc; }
#saleModal .sd-panel-scroll::-webkit-scrollbar-corner, #saleEditModal .sd-panel-scroll::-webkit-scrollbar-corner { background: #0f172a; }
@media (max-width: 860px) { .sd-grid { grid-template-columns: 1fr; } }
html[data-theme="light"] .sd-pill { background: #faf9f5; border-color: #e8e6dc }
html[data-theme="light"] .sd-pill-primary { border-color: rgba(201, 100, 66, 0.45) }
html[data-theme="light"] .sd-pill-credit { border-color: rgba(22, 163, 74, 0.35) }
html[data-theme="light"] .sd-pill-label,
html[data-theme="light"] .sd-meta-label,
html[data-theme="light"] .sd-section-title { color: #8a8980 }
html[data-theme="light"] .sd-pill-value { color: #1f1e1d }
html[data-theme="light"] .sd-pill-primary .sd-pill-value { color: #c96442 }
html[data-theme="light"] .sd-pill-credit .sd-pill-value { color: #16a34a }
html[data-theme="light"] .sd-pill-ccy { color: #8a8980 }
html[data-theme="light"] .sd-comments {
background: rgba(2, 132, 199, 0.06);
border-left-color: #0284c7;
}
html[data-theme="light"] .sd-section-count {
background: #fff; border-color: #e8e6dc; color: #1f1e1d;
}
html[data-theme="light"] .sale-items-table th {
background: #faf9f5; color: #6b6a63;
}
html[data-theme="light"] .sd-i-idx { color: #8a8980 }
html[data-theme="light"] .sd-i-part { color: #1f1e1d }
html[data-theme="light"] .sd-i-soft { color: #6b6a63 }
html[data-theme="light"] .sd-i-qty { color: #ca8a04 }
html[data-theme="light"] .sd-i-price { color: #3d3c39 }
html[data-theme="light"] .sd-i-amount { color: #c96442 }
html[data-theme="light"] .sd-i-ccy { color: #8a8980 }
html[data-theme="light"] .sales-meta { color: #6b7280 }
html[data-theme="light"] .sales-pager button { background: #fff; border-color: #e8e6dc; color: #1f2937 }
html[data-theme="light"] .sales-pager button:hover:not(:disabled) { background: #f3f1ea }
html[data-theme="light"] .sales-pager button.active { background: #d97848; border-color: #d97848; color: #fff }
html[data-theme="light"] .sales-row:hover td { background: rgba(217, 120, 72, 0.08) }
html[data-theme="light"] .sales-badge-posted { color: #16a34a }
html[data-theme="light"] .sales-badge-unposted { color: #b45309 }
html[data-theme="light"] .sale-detail-section h4 { color: #d97848 }
html[data-theme="light"] .sale-detail-grid dt { color: #6b7280 }
html[data-theme="light"] .sale-detail-grid dd { color: #1f2937 }
html[data-theme="light"] .sale-items-table th { color: #6b7280 }
html[data-theme="light"] .sale-items-table th,
html[data-theme="light"] .sale-items-table td { border-bottom-color: rgba(107, 114, 128, 0.15) }
.an-date-input { display: none }
.an-period-range { align-items: center; gap: 6px; height: 38px }
.an-period-range input[type="date"] { width: 130px }
.an-period-sep { color: #64748b; font-size: 14px }
html[data-theme="light"] .an-period-sep { color: #6b7280 }
.analytics-metric-toggle,
.analytics-bucket-toggle {
display: inline-flex;
background: #0f172a;
border-radius: 8px;
padding: 3px;
gap: 2px;
margin-left: auto;
}
.metric-btn,
.bucket-btn {
background: transparent;
border: none;
color: #94a3b8;
font-size: 13px;
font-weight: 500;
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
transition: background 0.15s, color 0.15s;
}
.bucket-btn { padding: 5px 12px; font-size: 12px }
.metric-btn:hover, .bucket-btn:hover { color: #e2e8f0 }
.metric-btn.active, .bucket-btn.active {
background: #f97316;
color: #fff;
}
.analytics-kpi-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 14px;
margin: 18px 0 20px;
}
.kpi-tile {
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 18px 20px;
}
.kpi-label {
color: #94a3b8;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 8px;
}
.kpi-value {
color: #e2e8f0;
font-size: 26px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.analytics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.analytics-card {
background: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 16px 18px 12px;
min-width: 0;
}
.analytics-card-wide { grid-column: 1 / -1 }
.analytics-card[data-card-id] {
transition: outline-color 0.15s, opacity 0.15s;
-webkit-user-drag: element;
}
.analytics-card[data-card-id] .analytics-chart,
.analytics-card[data-card-id] .analytics-chart * {
-webkit-user-drag: none;
user-select: none;
}
.analytics-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
padding-right: 36px;
cursor: grab;
user-select: none;
}
.analytics-card-head:active { cursor: grabbing }
.analytics-card-head h3,
.analytics-card-head .chart-tooltip-badge { cursor: inherit }
.analytics-card-head button,
.analytics-card-head .analytics-bucket-toggle,
.analytics-card-head .analytics-bucket-toggle * { cursor: pointer }
.analytics-card--dragging { opacity: 0.5 }
.analytics-card--drag-over { outline: 2px dashed #f97316; outline-offset: -2px }
html[data-theme="light"] .analytics-card--drag-over { outline-color: #d97848 }
.chart-resize-btn {
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 6px;
color: #94a3b8;
cursor: pointer;
font-family: inherit;
font-size: 14px;
line-height: 1;
padding: 0;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chart-resize-btn:hover {
background: rgba(148, 163, 184, 0.12);
color: #e2e8f0;
border-color: rgba(148, 163, 184, 0.4);
}
html[data-theme="light"] .chart-resize-btn {
color: #6b7280;
border-color: #d1d5db;
}
html[data-theme="light"] .chart-resize-btn:hover {
background: #f3f4f6;
color: #1f2937;
border-color: #9ca3af;
}
.analytics-card-head h3 {
color: #e2e8f0;
font-size: 14px;
font-weight: 600;
margin: 0;
}
.analytics-card-sub {
color: #64748b;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.analytics-chart { min-height: 260px; width: 100% }
.analytics-card-wide .analytics-chart { min-height: 320px }
#chartTrend .apexcharts-tooltip,
#chartTop .apexcharts-tooltip,
#chartTopMarks .apexcharts-tooltip,
#chartTopModels .apexcharts-tooltip,
#chartTopGenerations .apexcharts-tooltip { display: none !important }
.analytics-card-head { position: relative }
.chart-tooltip-badge {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
background: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 6px;
color: #e2e8f0;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
max-width: calc(100% - 240px);
overflow: hidden;
text-overflow: ellipsis;
}
.chart-tooltip-badge[hidden] { display: none }
.chart-tooltip-label { color: #94a3b8; font-weight: 600 }
.chart-tooltip-value { color: #f97316; font-weight: 600 }
.chart-tooltip-sep { width: 1px; height: 12px; background: rgba(148, 163, 184, 0.25) }
html[data-theme="light"] .chart-tooltip-badge {
background: #f3f1ea;
border-color: #e5e7eb;
}
html[data-theme="light"] .chart-tooltip-label { color: #6b7280 }
html[data-theme="light"] .chart-tooltip-value { color: #d97848 }
html[data-theme="light"] .chart-tooltip-sep { background: #d1d5db }
.analytics-empty {
color: #94a3b8;
text-align: center;
padding: 40px 0;
font-size: 14px;
}
@media (max-width: 900px) {
.analytics-kpi-strip { grid-template-columns: repeat(2, 1fr) }
.analytics-grid { grid-template-columns: 1fr }
.analytics-card-wide { grid-column: 1 }
}
html[data-theme="light"] .analytics-metric-toggle,
html[data-theme="light"] .analytics-bucket-toggle { background: #f3f1ea }
html[data-theme="light"] .metric-btn,
html[data-theme="light"] .bucket-btn { color: #6b7280 }
html[data-theme="light"] .metric-btn:hover,
html[data-theme="light"] .bucket-btn:hover { color: #1f2937 }
html[data-theme="light"] .metric-btn.active,
html[data-theme="light"] .bucket-btn.active { background: #d97848; color: #fff }
html[data-theme="light"] .kpi-tile { background: #fff; border-color: #e8e6dc }
html[data-theme="light"] .kpi-label { color: #6b7280 }
html[data-theme="light"] .kpi-value { color: #1f1e1d }
html[data-theme="light"] .analytics-card { background: #fff; border-color: #e8e6dc }
html[data-theme="light"] .analytics-card-head h3 { color: #1f1e1d }
html[data-theme="light"] .analytics-empty { color: #6b7280 }
.wb-card {
background: #0f172a; border: 1px solid #1e293b; border-radius: 12px;
margin-bottom: 14px; overflow: hidden;
}
.wb-card-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; border-bottom: 1px solid #1e293b;
background: rgba(30,41,59,0.4);
}
.wb-card-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 7px;
background: rgba(56,189,248,0.12); color: #38bdf8;
}
.wb-card-title { font-size: 13px; font-weight: 600; color: #cbd5e1;
text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
.wb-card-body { padding: 16px 18px; }
.wb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 16px; }
.wb-row-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 14px; }
.wb-row-2col > .wb-card { margin-bottom: 0; }
.wb-card-seller { border-color: rgba(251, 191, 36, 0.40); }
.wb-card-seller .wb-card-head { background: rgba(251, 191, 36, 0.06); border-bottom-color: rgba(251, 191, 36, 0.25); }
.wb-card-seller .wb-card-icon { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.wb-card-buyer { border-color: rgba(56, 189, 248, 0.40); }
.wb-card-buyer .wb-card-head { background: rgba(56, 189, 248, 0.06); border-bottom-color: rgba(56, 189, 248, 0.25); }
.wb-card-buyer .wb-card-icon { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
.wb-row-2col .wb-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
.wb-row-2col { grid-template-columns: 1fr; }
.wb-row-2col .wb-grid { grid-template-columns: repeat(4, 1fr); }
}
.wb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wb-field-wide { grid-column: span 2; }
.wb-field label {
font-size: 11px; color: #94a3b8; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.4px;
display: flex; align-items: center; gap: 4px;
}
.wb-pass-hint { color: #475569; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wb-pass-hint[hidden] { display: none; }
.wb-field input, .wb-field select {
height: 36px; padding: 0 11px; border-radius: 7px;
background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
font-size: 13px; transition: border-color 0.15s ease, background 0.15s ease;
}
.wb-field input::placeholder { color: #475569; }
.wb-field input:required:invalid,
.wb-field select:required:invalid {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.08);
}
.wb-field input:required:valid,
.wb-field select:required:valid {
border-color: #22c55e;
background: rgba(34, 197, 94, 0.06);
}
html[data-theme="light"] .wb-field input:required:invalid,
html[data-theme="light"] .wb-field select:required:invalid {
border-color: #dc2626;
background: rgba(220, 38, 38, 0.06);
}
html[data-theme="light"] .wb-field input:required:valid,
html[data-theme="light"] .wb-field select:required:valid {
border-color: #16a34a;
background: rgba(22, 163, 74, 0.05);
}
.wb-tin-error {
margin-top: 5px;
font-size: 11px;
color: #ef4444;
line-height: 1.35;
}
.wb-suggested-address {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 6px; padding: 4px 10px; border-radius: 999px;
background: rgba(56,189,248,0.08);
border: 1px dashed rgba(56,189,248,0.45);
color: #94a3b8; font-size: 11px; text-align: left;
cursor: pointer; transition: background 0.15s, border-color 0.15s;
max-width: 100%;
}
.wb-suggested-address:hover {
background: rgba(56,189,248,0.16); border-color: #38bdf8;
}
.wb-suggested-address[hidden] { display: none; }
.wb-suggested-address svg { flex: 0 0 auto; color: #38bdf8; }
.wb-suggested-label { color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.wb-suggested-value { color: #cbd5e1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .wb-suggested-address:hover {
background: rgba(2,132,199,0.15); border-color: #0284c7;
}
.waybill-settings-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 18px; padding: 18px 24px; max-width: 760px;
}
.waybill-settings-grid .wb-field-full { grid-column: 1 / -1; }
@media (max-width: 720px) {
.waybill-settings-grid { grid-template-columns: minmax(0, 1fr); }
}
.waybill-settings-hint { font-size: 11px; color: #64748b; }
html[data-theme="light"] .waybill-settings-hint { color: #8a8980; }
.wb-settings-section-head {
font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
text-transform: uppercase; color: #64748b;
padding: 6px 0 4px; margin-top: 4px;
border-bottom: 1px solid #334155;
}
.wb-settings-section-head:first-child { margin-top: 0; }
html[data-theme="light"] .wb-settings-section-head {
color: #8a8980; border-bottom-color: #e0ded3;
}
.wb-driver-template-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px 4px;
}
.wb-driver-template-row label {
font-size: 11px; color: #94a3b8; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.4px;
white-space: nowrap;
}
.wb-driver-template-row select {
flex: 1; height: 32px; padding: 0 10px; border-radius: 6px;
background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
font-size: 12px;
}
.wb-tpl-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0; border-radius: 6px;
cursor: pointer; border: 1px solid transparent;
}
.wb-tpl-save {
background: rgba(56,189,248,0.12); border-color: rgba(56,189,248,0.3); color: #38bdf8;
}
.wb-tpl-save:hover { background: rgba(56,189,248,0.2); }
.wb-tpl-del {
background: transparent; border-color: #334155; color: #94a3b8;
}
.wb-tpl-del:hover { color: #ef4444; border-color: #ef4444; background: rgba(239,68,68,0.1); }
.wb-field input:hover, .wb-field select:hover { border-color: #475569; }
.wb-field input:focus, .wb-field select:focus {
outline: none; border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}
.wb-items-section { margin: 14px 0 14px; }
.wb-items-section > .sd-section-title { padding: 0; margin-bottom: 8px; }
.wb-items-wrap { max-height: 50vh; }
.wb-items-table input, .wb-items-table select {
width: 100%; padding: 0; border: 0; background: transparent;
color: inherit; font: inherit; outline: none;
cursor: default;
}
.wb-items-table tbody td:nth-child(n+4) { text-align: center; }
.wb-items-table tbody td:nth-child(n+4) input,
.wb-items-table tbody td:nth-child(n+4) select { text-align: center; }
.wb-items-table input[type="number"] { -moz-appearance: textfield; }
.wb-items-table input[type="number"]::-webkit-inner-spin-button,
.wb-items-table input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
.wb-items-table select { appearance: none; -webkit-appearance: none; padding-right: 0; }
.wb-action-bar {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; background: #0f172a; border: 1px solid #1e293b;
border-radius: 12px; margin-bottom: 14px;
position: sticky; bottom: 0; gap: 14px; flex-wrap: wrap;
box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
.wb-action-totals { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
.wb-action-totals-label { font-size: 12px; color: #94a3b8;
text-transform: uppercase; letter-spacing: 0.4px; }
.wb-action-totals-value { font-size: 20px; color: #4ade80; font-weight: 700;
font-variant-numeric: tabular-nums; }
.wb-action-totals .sd-waybill-chip { flex: 0 0 auto; align-self: center; }
.wb-action-totals .sd-waybill-chip[hidden] { display: none; }
.wb-comment-card { margin: 0 0 14px; padding: 10px 14px; }
.wb-comment-input {
width: 100%; margin-top: 2px;
background: transparent; border: 0; outline: none; padding: 0;
color: #cbd5e1; font-size: 13px; font-style: italic;
font-family: inherit;
}
.wb-comment-input::placeholder { color: #475569; font-style: italic; }
html[data-theme="light"] .wb-comment-input::placeholder { color: #b8b6ac; }
.wb-submit-btn {
padding: 0 20px; height: 40px; border-radius: 8px;
background: linear-gradient(135deg,#3b82f6,#2563eb); border: 0;
color: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: filter 0.15s ease;
}
.wb-submit-btn:hover { filter: brightness(1.1); }
.wb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.wb-submit-btn:disabled.is-sending { cursor: wait; }
.wb-complete-btn {
padding: 0 14px; height: 34px; border-radius: 7px; border: 0;
color: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: filter 0.15s ease;
background: linear-gradient(135deg,#0d9488,#14b8a6);
}
.wb-complete-btn:hover:not(:disabled) { filter: brightness(1.08); }
.wb-complete-btn:disabled { opacity: 0.6; cursor: wait; }
.wb-complete-btn[hidden] { display: none; }
.wb-rs-detail {
margin-top: 14px; padding: 12px 14px; border-radius: 8px;
background: rgba(15,23,42,0.45); border: 1px solid #334155;
font-size: 12px; color: #cbd5e1;
overflow-x: hidden;
}
#waybillViewModal .tracking-modal-body { max-width: min(1100px, 95vw); }
#waybillViewModal .wb-rs-detail { margin-top: 0; }
.wb-rs-detail-head {
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase; color: #94a3b8; margin-bottom: 8px;
}
.wb-rs-detail-table { width: 100%; border-collapse: collapse; }
.wb-rs-detail-table td {
padding: 4px 8px; border-bottom: 1px solid rgba(51,65,85,0.4);
vertical-align: top;
}
.wb-rs-detail-table td:first-child {
color: #64748b; width: 180px; text-transform: uppercase;
font-size: 11px; letter-spacing: 0.3px;
}
.wb-rs-detail-table td:last-child {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: #e2e8f0; word-break: break-all;
}
.wb-rs-detail-goods { margin-top: 10px; overflow-x: hidden; }
.wb-rs-detail-goods table {
width: 100%; border-collapse: collapse; table-layout: auto;
}
.wb-rs-detail-goods th {
text-align: left; padding: 6px 6px; border-bottom: 1px solid #334155;
color: #64748b; font-size: 10px; text-transform: uppercase;
letter-spacing: 0.3px;
word-break: break-word; overflow-wrap: anywhere;
}
.wb-rs-detail-goods td {
padding: 5px 6px; border-bottom: 1px solid rgba(51,65,85,0.4);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px; color: #e2e8f0; line-height: 1.35;
word-break: break-word; overflow-wrap: anywhere;
}
.wb-rs-detail-error {
color: #fca5a5; padding: 8px 10px; background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25); border-radius: 6px;
}
html[data-theme="light"] .wb-rs-detail {
background: #faf9f5; border-color: #e0ded3; color: #4a4945;
}
html[data-theme="light"] .wb-rs-detail-head { color: #6b6a63; }
html[data-theme="light"] .wb-rs-detail-table td { border-bottom-color: #efeee5; }
html[data-theme="light"] .wb-rs-detail-table td:first-child { color: #8a8980; }
html[data-theme="light"] .wb-rs-detail-table td:last-child { color: #1f1e1d; }
html[data-theme="light"] .wb-rs-detail-goods th { color: #8a8980; border-bottom-color: #e0ded3; }
html[data-theme="light"] .wb-rs-detail-goods td { color: #1f1e1d; border-bottom-color: #f0eee5; }
html[data-theme="light"] .wb-field label { color: #6b6a63; }
html[data-theme="light"] .wb-field input,
html[data-theme="light"] .wb-field select,
html[data-theme="light"] .wb-goods-table input,
html[data-theme="light"] .wb-goods-table select {
background: #fff; border-color: #d4d1c4; color: #1f1e1d;
}
html[data-theme="light"] .wb-field input::placeholder,
html[data-theme="light"] .wb-goods-table input::placeholder { color: #b8b6ac; }
html[data-theme="light"] .wb-field input:focus,
html[data-theme="light"] .wb-field select:focus {
border-color: #0f76d2; box-shadow: 0 0 0 3px rgba(15,118,210,0.12);
}
html[data-theme="light"] .wb-goods-table thead th {
color: #8a8980; border-bottom-color: #e0ded3; background: #faf9f5;
}
html[data-theme="light"] .wb-goods-table tbody td { border-bottom-color: #f0eee5; }
#waybillModal .wb-head {
background: linear-gradient(180deg, var(--ord-accent-weak), transparent);
border-bottom: 1px solid var(--ord-accent);
}
#waybillModal .wb-head .sd-avatar {
background: var(--ord-accent); color: #fff; border-color: var(--ord-accent);
}
#waybillModal .wb-head .sd-eyebrow { color: var(--ord-accent); letter-spacing: 0.08em; }
#waybillModal .wb-head .wb-head-type {
background: var(--ord-accent-weak); color: var(--ord-accent); border: 1px solid var(--ord-accent);
}
#waybillModal .wb-card {
background: var(--ord-card); border: 1px solid var(--ord-border);
border-top: 3px solid var(--ord-accent);
border-radius: 4px 4px var(--ord-radius-sm) var(--ord-radius-sm);
}
#waybillModal .wb-card-head {
background: transparent; border-bottom: 1px solid var(--ord-divider); padding: 13px 16px;
}
#waybillModal .wb-card-icon {
background: var(--ord-accent-weak); color: var(--ord-accent);
width: 34px; height: 34px; border-radius: 9px;
}
#waybillModal .wb-card-title {
color: var(--ord-text-2); font-size: 12px; font-weight: 800; letter-spacing: 0.09em;
}
#waybillModal .wb-card-body { padding: 15px 16px; }
#waybillModal .wb-card-seller { border-top-color: var(--ord-warn); }
#waybillModal .wb-card-buyer { border-top-color: var(--ord-accent); }
#waybillModal #wbTransportCard { border-top-color: var(--ord-accent); }
#waybillModal .wb-card-seller .wb-card-icon { background: var(--ord-warn-weak); color: var(--ord-warn); }
#waybillModal .wb-card-buyer .wb-card-icon { background: var(--ord-accent-weak); color: var(--ord-accent); }
#waybillModal .wb-row-2col { position: relative; }
#waybillModal .wb-row-2col::after {
content: "\2192"; position: absolute; left: 50%; top: 20px; transform: translateX(-50%);
width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--ord-card); border: 1px solid var(--ord-border-strong);
color: var(--ord-accent); font-size: 14px; font-weight: 700; box-shadow: var(--ord-shadow); z-index: 2;
}
@media (max-width: 820px) { #waybillModal .wb-row-2col::after { display: none; } }
#waybillModal .wb-field label,
#waybillModal .wb-driver-template-row label { color: var(--ord-eyebrow); }
#waybillModal .wb-field input, #waybillModal .wb-field select,
#waybillModal .wb-driver-template-row select {
background: var(--ord-surface); border: 1px solid var(--ord-border);
color: var(--ord-text); border-radius: var(--ord-radius-sm);
}
#waybillModal .wb-field input::placeholder { color: var(--ord-eyebrow); }
#waybillModal .wb-field input:focus, #waybillModal .wb-field select:focus,
#waybillModal .wb-driver-template-row select:focus {
border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-accent-weak); outline: none;
}
#waybillModal .wb-field input:required:invalid,
#waybillModal .wb-field select:required:invalid {
border-color: var(--ord-danger); background: var(--ord-danger-weak);
}
#waybillModal .wb-field input:required:valid,
#waybillModal .wb-field select:required:valid {
border-color: var(--ord-ok); background: var(--ord-ok-weak);
}
#waybillModal .wb-tin-error { color: var(--ord-danger); }
#waybillModal .wb-suggested-address {
background: var(--ord-accent-weak); border: 1px dashed var(--ord-accent); color: var(--ord-text-2);
}
#waybillModal .wb-suggested-address svg { color: var(--ord-accent); }
#waybillModal .wb-suggested-label { color: var(--ord-eyebrow); }
#waybillModal .wb-suggested-value { color: var(--ord-text-2); }
#waybillModal .wb-tpl-save { background: var(--ord-accent-weak); border-color: var(--ord-accent); color: var(--ord-accent); }
#waybillModal .wb-tpl-del { background: transparent; border-color: var(--ord-border); color: var(--ord-muted); }
#waybillModal .wb-tpl-del:hover { color: var(--ord-danger); border-color: var(--ord-danger); background: var(--ord-danger-weak); }
#waybillModal .wb-comment-input { color: var(--ord-text-2); }
#waybillModal .wb-action-bar {
background: var(--ord-surface); border: 1px solid var(--ord-border);
border-top: 2px solid var(--ord-accent); border-radius: var(--ord-radius-sm);
box-shadow: var(--ord-shadow); padding: 16px 22px;
}
#waybillModal .wb-action-totals-label { color: var(--ord-muted); }
#waybillModal .wb-action-totals-value { color: var(--ord-text); font-size: 23px; }
#waybillModal .wb-submit-btn {
background: var(--ord-accent); border: 0; color: #fff;
border-radius: var(--ord-radius-sm); height: 44px; padding: 0 24px; font-size: 14px;
transition: background 0.15s ease;
}
#waybillModal .wb-submit-btn:hover { background: var(--ord-accent-press); filter: none; }
#postOrderModal { animation: pmFade 0.18s ease both; }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
.post-modal-body {
width: 100%; max-width: 540px; padding: 0;
max-height: 92vh; overflow: hidden auto;
border-radius: 16px; background: #0f172a;
border: 1px solid #1e293b; border-top: 2px solid #38bdf8;
box-shadow: 0 28px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(56,189,248,0.05);
animation: pmIn 0.26s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes pmIn {
from { opacity: 0; transform: translateY(12px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.post-modal-header {
display: flex; align-items: center; gap: 14px;
padding: 18px 22px 16px; border-bottom: 1px solid #1e293b;
background: linear-gradient(135deg, rgba(56,189,248,0.10), rgba(56,189,248,0) 62%), #0f172a;
position: sticky; top: 0; z-index: 3;
}
.post-modal-title-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
background: rgba(56,189,248,0.14); color: #38bdf8;
box-shadow: inset 0 0 0 1px rgba(56,189,248,0.25);
}
.post-modal-heading { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.post-modal-title { font-size: 17px; font-weight: 700; color: #f1f5f9; letter-spacing: -0.2px; }
.post-modal-subtitle { font-size: 12px; color: #64748b; }
.post-modal-close {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
background: transparent; border: 0; color: #64748b; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: all 0.15s ease;
}
.post-modal-close:hover { background: rgba(148,163,184,0.12); color: #e2e8f0; }
.post-modal-summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px; background: #0a1220; border-bottom: 1px solid #1e293b;
}
.pm-hero { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pm-hero-label { font-size: 11px; color: #64748b; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.6px; }
.pm-hero-total { font-size: 30px; font-weight: 800; color: #f8fafc;
letter-spacing: -0.8px; line-height: 1; font-variant-numeric: tabular-nums; }
.pm-meta { display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.pm-meta-item { display: flex; align-items: center; gap: 10px; }
.pm-meta-icon { display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
background: rgba(148,163,184,0.10); color: #94a3b8; }
.pm-meta-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pm-meta-label { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.pm-meta-value { font-size: 13px; color: #e2e8f0; font-weight: 600; max-width: 190px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-modal-section { padding: 16px 22px; }
.post-modal-section + .post-modal-section { padding-top: 4px; }
.post-modal-section-label {
font-size: 12px; color: #94a3b8; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.post-modal-section.oh-segment-disabled { opacity: 0.45; pointer-events: none; }
.post-modal-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.post-modal-choice {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 14px; border-radius: 12px;
background: #0a1220; border: 1.5px solid #334155; color: #cbd5e1;
cursor: pointer; transition: all 0.15s ease; text-align: left;
}
.post-modal-choice:hover { border-color: #475569; background: #111827; transform: translateY(-1px); }
.post-modal-choice-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
background: rgba(148,163,184,0.1); color: #94a3b8;
transition: all 0.15s ease;
}
.post-modal-choice-label { flex: 1; font-size: 13px; font-weight: 600; color: #e2e8f0; }
.post-modal-choice-check {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(56,189,248,0.15); color: #38bdf8;
opacity: 0; transform: scale(0.6); transition: all 0.15s ease;
}
.post-modal-choice.active {
border-color: #38bdf8; background: rgba(56,189,248,0.08);
box-shadow: 0 0 0 3px rgba(56,189,248,0.12);
}
.post-modal-choice.active .post-modal-choice-icon { background: rgba(56,189,248,0.18); color: #38bdf8; }
.post-modal-choice.active .post-modal-choice-check { opacity: 1; transform: scale(1); }
.post-modal-choice:disabled { cursor: not-allowed; opacity: 0.5; }
.post-modal-section-hint { font-size: 11px; color: #64748b; margin-top: 8px; letter-spacing: 0.2px; }
.post-modal-split {
margin-top: 14px; display: flex; flex-direction: column; gap: 10px;
animation: splitReveal 0.24s ease both;
}
@keyframes splitReveal {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: none; }
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.split-field { position: relative; padding-left: 22px; }
.split-field[data-split="cash"] { color: #38bdf8; }
.split-field[data-split="transfer"] { color: #2dd4bf; }
.split-field::before {
content: ""; position: absolute; left: 7px; top: -14px; width: 11px;
height: calc(50% + 14px); opacity: 0.55;
border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
border-bottom-left-radius: 7px;
}
.split-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.split-input {
width: 100%; height: 36px; padding: 0 26px 0 12px; border-radius: 8px;
background: #060d18; border: 1.5px solid #1e293b; color: #f1f5f9;
font-size: 15px; font-weight: 600; text-align: right;
font-variant-numeric: tabular-nums; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.split-input:focus { outline: none; border-color: #475569; }
.split-field[data-split="cash"] .split-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.12); }
.split-field[data-split="transfer"] .split-input:focus { border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45,212,191,0.12); }
.split-input::-webkit-outer-spin-button,
.split-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.split-input { -moz-appearance: textfield; }
.split-input-cur { position: absolute; right: 10px; font-size: 13px; color: #64748b; pointer-events: none; }
.split-meter {
display: flex; height: 8px; border-radius: 999px; overflow: hidden;
background: #1e293b; margin-top: 4px; transition: box-shadow 0.15s ease;
}
.split-meter-seg { height: 100%; width: 0; transition: width 0.25s ease; }
.split-meter-cash { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.split-meter-transfer { background: linear-gradient(90deg, #2dd4bf, #14b8a6); }
.split-meter.is-over { box-shadow: inset 0 0 0 1.5px #f87171; }
.split-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.split-status-alloc { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.split-status-badge { font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.2px; }
.split-status-badge.is-ok { color: #4ade80; }
.split-status-badge.is-ok::before { content: "✓"; font-weight: 800; }
.split-status-badge.is-warn { color: #fbbf24; }
.split-status-badge.is-over { color: #f87171; }
.split-stepper-row { display: flex; align-items: center; gap: 14px; }
.split-stepper {
display: inline-flex; align-items: center; gap: 4px; padding: 4px;
background: #0a1220; border: 1.5px solid #334155; border-radius: 12px;
}
.split-step-btn {
width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; color: #cbd5e1; transition: all 0.12s ease;
}
.split-step-btn:hover:not(:disabled) { background: rgba(56,189,248,0.14); color: #38bdf8; }
.split-step-btn:active:not(:disabled) { transform: scale(0.92); }
.split-step-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.split-count-input {
width: 54px; height: 34px; padding: 0; border: 0; background: transparent;
color: #f8fafc; font-size: 20px; font-weight: 800; text-align: center;
font-variant-numeric: tabular-nums; -moz-appearance: textfield; cursor: default;
}
.split-count-input::-webkit-outer-spin-button,
.split-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.split-count-input:focus { outline: none; }
.split-each { font-size: 13px; font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }
.split-preview-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.split-balance { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: none; color: transparent; display: inline-flex; align-items: center; gap: 4px; }
.split-balance.is-ok { color: #4ade80; }
.split-balance.is-ok::before { content: "✓"; font-weight: 800; }
.split-allocbar {
display: flex; gap: 2px; height: 10px; margin-bottom: 12px;
border-radius: 999px; overflow: hidden; background: #1e293b;
}
.split-seg { height: 100%; min-width: 3px; transition: width 0.3s cubic-bezier(0.2,0.8,0.2,1); }
.split-preview { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.split-card {
border: 1.5px solid #334155; border-radius: 12px; background: #0a1220;
padding: 12px; display: flex; flex-direction: column; gap: 4px;
animation: splitCardIn 0.28s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes splitCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.split-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.split-card-chip {
width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; color: #0a1220;
font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
.split-card-title { flex: 1; font-size: 12px; font-weight: 700; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.4px; }
.split-card-total { font-size: 14px; font-weight: 800; color: #f8fafc; font-variant-numeric: tabular-nums; }
.split-card-meta { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.split-card-line { font-size: 12px; color: #94a3b8; display: flex; justify-content: space-between; gap: 10px; }
.split-card-line span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.split-card-line span:last-child { font-variant-numeric: tabular-nums; flex-shrink: 0; }
html[data-theme="light"] .split-stepper { background: #fff; border-color: #d4d1c4; }
html[data-theme="light"] .split-step-btn { color: #6b6a63; }
html[data-theme="light"] .split-step-btn:hover:not(:disabled) { background: rgba(15,118,210,0.10); color: #0f76d2; }
html[data-theme="light"] .split-count-input { color: #1f1e1d; }
html[data-theme="light"] .split-each { color: #6b6a63; }
html[data-theme="light"] .split-allocbar { background: #e8e6dc; }
html[data-theme="light"] .split-card { background: #fff; border-color: #d4d1c4; }
html[data-theme="light"] .split-card-title { color: #6b6a63; }
html[data-theme="light"] .split-card-total { color: #1f1e1d; }
html[data-theme="light"] .split-card-meta { color: #8a8980; }
html[data-theme="light"] .split-card-line { color: #6b6a63; }
html[data-theme="light"] .split-balance.is-ok { color: #16803c; }
.post-modal-footer {
display: flex; justify-content: flex-end; gap: 10px;
padding: 16px 22px 20px; border-top: 1px solid #1e293b;
background: #0c1626;
position: sticky; bottom: 0; z-index: 3;
}
.post-modal-cancel-btn, .post-modal-submit-btn {
height: 42px; padding: 0 20px; border-radius: 10px; font-size: 13px;
font-weight: 700; cursor: pointer; display: inline-flex; align-items: center;
gap: 8px; transition: all 0.15s ease; border: 1px solid transparent;
letter-spacing: 0.2px;
}
.post-modal-cancel-btn { background: transparent; border-color: #334155; color: #94a3b8; }
.post-modal-cancel-btn:hover { border-color: #475569; color: #e2e8f0; background: #111827; }
.post-modal-submit-btn {
background: linear-gradient(135deg,#0ea5e9,#2563eb); color: #fff; border: 0;
box-shadow: 0 8px 20px rgba(37,99,235,0.35);
}
.post-modal-submit-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.post-modal-submit-btn:disabled { opacity: 0.45; cursor: not-allowed;
background: #334155; box-shadow: none; }
html[data-theme="light"] .post-modal-body { background: #fff; border-color: #e8e6dc; border-top-color: #0f76d2; }
html[data-theme="light"] .post-modal-header { background: linear-gradient(135deg, rgba(15,118,210,0.08), rgba(15,118,210,0) 62%), #fff;
border-bottom-color: #e8e6dc; }
html[data-theme="light"] .post-modal-title { color: #1f1e1d; }
html[data-theme="light"] .post-modal-subtitle { color: #8a8980; }
html[data-theme="light"] .post-modal-title-icon { background: rgba(15,118,210,0.12); color: #0f76d2; box-shadow: inset 0 0 0 1px rgba(15,118,210,0.22); }
html[data-theme="light"] .post-modal-close { color: #8a8980; }
html[data-theme="light"] .post-modal-close:hover { background: rgba(0,0,0,0.05); color: #1f1e1d; }
html[data-theme="light"] .post-modal-summary { background: #faf9f5; border-bottom-color: #e8e6dc; }
html[data-theme="light"] .pm-hero-label { color: #8a8980; }
html[data-theme="light"] .pm-hero-total { color: #1f1e1d; }
html[data-theme="light"] .pm-meta-icon { background: rgba(0,0,0,0.04); color: #6b6a63; }
html[data-theme="light"] .pm-meta-label { color: #8a8980; }
html[data-theme="light"] .pm-meta-value { color: #1f1e1d; }
html[data-theme="light"] .post-modal-section-label { color: #6b6a63; }
html[data-theme="light"] .post-modal-section-hint { color: #8a8980; }
html[data-theme="light"] .post-modal-choice { background: #fff; border-color: #d4d1c4; color: #2d2c28; }
html[data-theme="light"] .post-modal-choice:hover { border-color: #b8b6ac; background: #faf9f5; }
html[data-theme="light"] .post-modal-choice-icon { background: rgba(0,0,0,0.04); color: #6b6a63; }
html[data-theme="light"] .post-modal-choice-label { color: #1f1e1d; }
html[data-theme="light"] .post-modal-choice-check { background: rgba(15,118,210,0.12); color: #0f76d2; }
html[data-theme="light"] .post-modal-choice.active { border-color: #0f76d2; background: rgba(15,118,210,0.06); }
html[data-theme="light"] .post-modal-choice.active .post-modal-choice-icon { background: rgba(15,118,210,0.12); color: #0f76d2; }
html[data-theme="light"] .split-field[data-split="cash"] { color: #0f76d2; }
html[data-theme="light"] .split-field[data-split="transfer"] { color: #0d9488; }
html[data-theme="light"] .split-input { background: #faf9f5; border-color: #d4d1c4; color: #1f1e1d; }
html[data-theme="light"] .split-field[data-split="cash"] .split-input:focus { border-color: #0f76d2; box-shadow: 0 0 0 3px rgba(15,118,210,0.12); }
html[data-theme="light"] .split-field[data-split="transfer"] .split-input:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }
html[data-theme="light"] .split-input-cur { color: #8a8980; }
html[data-theme="light"] .split-meter { background: #e8e6dc; }
html[data-theme="light"] .split-meter-cash { background: linear-gradient(90deg,#38bdf8,#0f76d2); }
html[data-theme="light"] .split-meter-transfer { background: linear-gradient(90deg,#2dd4bf,#0d9488); }
html[data-theme="light"] .split-status-alloc { color: #6b6a63; }
html[data-theme="light"] .split-status-badge.is-ok { color: #16803c; }
html[data-theme="light"] .post-modal-footer { background: #faf9f5; border-top-color: #e8e6dc; }
html[data-theme="light"] .post-modal-cancel-btn { border-color: #d4d1c4; color: #6b6a63; }
html[data-theme="light"] .post-modal-cancel-btn:hover { border-color: #b8b6ac; color: #1f1e1d; background: #fff; }
html[data-theme="light"] .post-modal-submit-btn { background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 8px 20px rgba(37,99,235,0.25); }
html[data-theme="light"] .post-modal-submit-btn:disabled { background: #cfcdc1; box-shadow: none; }
:root { --sidebar-width: 220px; --sidebar-inset: 14px; }
header {
position: sticky;
top: 0;
z-index: 260;
}
.nav-drawer {
position: fixed;
top: calc(61px + var(--sidebar-inset));
left: var(--sidebar-inset);
bottom: var(--sidebar-inset);
width: var(--sidebar-width);
background: linear-gradient(180deg, #0b1220 0%, #0f172a 65%);
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.35);
z-index: 250;
overflow-y: auto;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
}
.nav-drawer-list { flex: 1 1 auto; min-height: 0; }
.nav-drawer::-webkit-scrollbar { width: 4px; }
.nav-drawer::-webkit-scrollbar-track { background: transparent; }
.nav-drawer::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.22);
border-radius: 2px;
}
.nav-drawer::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.40); }
.container {
margin-left: calc(var(--sidebar-width) + var(--sidebar-inset));
margin-right: 0;
width: calc(100% - (var(--sidebar-width) + var(--sidebar-inset)));
box-sizing: border-box;
}
.nav-drawer-list {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 10px 24px;
}
.nav-drawer-divider {
height: 1px;
margin: 10px 12px;
background: rgba(148, 163, 184, 0.12);
border-radius: 1px;
}
html[data-theme="light"] .nav-drawer-divider {
background: rgba(31, 30, 29, 0.10);
}
.nav-drawer-item {
position: relative;
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 10px 12px;
border: none;
background: transparent;
color: #94a3b8;
font-size: 13.5px;
font-weight: 500;
letter-spacing: 0.1px;
text-align: left;
cursor: pointer;
border-radius: 10px;
transition:
background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-drawer-item svg { flex-shrink: 0; stroke: #64748b; transition: stroke 0.18s ease; }
.nav-drawer-item > span { flex: 1; }
.nav-drawer-item:hover:not(.active) {
background: rgba(148, 163, 184, 0.08);
color: #e2e8f0;
}
.nav-drawer-item:hover:not(.active) svg { stroke: #cbd5e1; }
.nav-drawer-item.active {
background: linear-gradient(90deg, rgba(56,189,248,0.18) 0%, rgba(56,189,248,0.04) 100%);
color: #38bdf8;
font-weight: 600;
box-shadow: inset 3px 0 0 #38bdf8;
}
.nav-drawer-item.active svg { stroke: #38bdf8; }
.nav-drawer-item-parent .nav-drawer-chevron {
margin-left: auto;
flex-shrink: 0;
color: #475569;
transition:
transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
color 0.18s ease;
}
.nav-drawer-item-parent:hover .nav-drawer-chevron { color: #94a3b8; }
.nav-drawer-item-parent[aria-expanded="true"] .nav-drawer-chevron {
transform: rotate(180deg);
color: #94a3b8;
}
.nav-drawer-subitems {
display: flex;
flex-direction: column;
gap: 2px;
margin: 4px 4px 6px 22px;
padding: 2px 0 2px 12px;
border-left: 1px solid rgba(148, 163, 184, 0.14);
}
.nav-drawer-subitems[hidden] { display: none; }
.nav-drawer-subitem {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 7px 10px;
border: none;
background: transparent;
color: #64748b;
font-size: 12.5px;
font-weight: 500;
text-align: left;
white-space: nowrap;
cursor: pointer;
border-radius: 8px;
transition: background-color 0.18s ease, color 0.18s ease;
}
.nav-drawer-subitem > span:first-child { flex: 1; }
.nav-drawer-subitem:hover:not(.active) {
background: rgba(148, 163, 184, 0.07);
color: #cbd5e1;
}
.nav-drawer-subitem.active {
background: rgba(56,189,248,0.14);
color: #38bdf8;
font-weight: 600;
}
html[data-theme="light"] .nav-drawer {
background: linear-gradient(180deg, #faf9f5 0%, #f4f1e8 100%);
border-color: rgba(31, 30, 29, 0.10);
box-shadow: 0 8px 24px rgba(31, 30, 29, 0.12);
}
html[data-theme="light"] .nav-drawer::-webkit-scrollbar-thumb {
background: rgba(31, 30, 29, 0.18);
}
html[data-theme="light"] .nav-drawer-item { color: #6b6a63; }
html[data-theme="light"] .nav-drawer-item svg { stroke: #8a8980; }
html[data-theme="light"] .nav-drawer-item:hover:not(.active) {
background: rgba(31, 30, 29, 0.05);
color: #1f1e1d;
}
html[data-theme="light"] .nav-drawer-item:hover:not(.active) svg { stroke: #4b4a44; }
html[data-theme="light"] .nav-drawer-item.active {
background: linear-gradient(90deg, rgba(15,118,210,0.14) 0%, rgba(15,118,210,0.02) 100%);
color: #0f76d2;
box-shadow: inset 3px 0 0 #0f76d2;
}
html[data-theme="light"] .nav-drawer-item.active svg { stroke: #0f76d2; }
html[data-theme="light"] .nav-drawer-item-parent .nav-drawer-chevron { color: #b8b6ac; }
html[data-theme="light"] .nav-drawer-item-parent:hover .nav-drawer-chevron,
html[data-theme="light"] .nav-drawer-item-parent[aria-expanded="true"] .nav-drawer-chevron {
color: #6b6a63;
}
html[data-theme="light"] .nav-drawer-subitems {
border-left-color: rgba(31, 30, 29, 0.12);
}
html[data-theme="light"] .nav-drawer-subitem { color: #8a8980; }
html[data-theme="light"] .nav-drawer-subitem:hover:not(.active) {
background: rgba(31, 30, 29, 0.05);
color: #4b4a44;
}
html[data-theme="light"] .nav-drawer-subitem.active {
background: rgba(15,118,210,0.10);
color: #0f76d2;
}
.filters.filters-bar { padding: 10px 14px; margin-bottom: 14px; gap: 0; }
.filters.filters-bar .filter-row {
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
#orderMineSection .filters.filters-bar .filter-row {
justify-content: flex-end;
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.road-toolbar-left,
.toolbar-left-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.toolbar-divider {
width: 1px;
height: 24px;
background: rgba(148, 163, 184, 0.20);
flex: 0 0 1px;
}
html[data-theme="light"] .toolbar-divider { background: rgba(31, 30, 29, 0.15); }
.toolbar-actions .filter-search {
flex: 0 0 220px;
min-width: 0;
max-width: 220px;
}
.toolbar-actions .filter-search input {
height: 32px;
padding: 4px 30px 4px 30px;
font-size: 12px;
border-radius: 6px;
box-sizing: border-box;
}
.toolbar-actions .filter-search svg {
left: 9px;
width: 13px;
height: 13px;
}
.toolbar-actions .filter-search-close {
right: 4px;
width: 20px;
height: 20px;
}
.toolbar-actions .filter-search-close svg { width: 11px; height: 11px; }
.stock-top-bar:not(:has(> *:not([hidden]))) { display: none; }
.filter-drawer-backdrop {
position: fixed;
top: 61px;
right: 0;
bottom: 0;
left: calc(var(--sidebar-width) + var(--sidebar-inset));
background: rgba(2, 6, 23, 0.30);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 240;
}
.filter-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.filter-drawer {
position: fixed;
top: 61px;
right: 0;
bottom: 0;
width: 340px;
max-width: 90vw;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.86) 0%, rgba(19, 28, 48, 0.86) 100%);
border-left: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 255, 255, 0.06) inset;
transform: translateX(100%);
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 245;
display: flex;
flex-direction: column;
overflow: hidden;
}
.filter-drawer.open { transform: translateX(0); }
.filter-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px 12px;
border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}
.filter-drawer-header h3 {
margin: 0;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #cbd5e1;
}
.filter-drawer-close {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: #64748b;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.filter-drawer-close:hover {
background: rgba(148, 163, 184, 0.08);
color: #e2e8f0;
border-color: rgba(148, 163, 184, 0.15);
}
.filter-drawer-body {
flex: 1;
overflow-y: auto;
padding: 16px 18px;
}
.filter-drawer-body::-webkit-scrollbar { width: 4px; }
.filter-drawer-body::-webkit-scrollbar-track { background: transparent; }
.filter-drawer-body::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.22);
border-radius: 2px;
}
.filter-drawer-fields {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
}
.filter-field select {
width: 100%;
height: 32px;
padding: 6px 32px 6px 10px;
box-sizing: border-box;
background-color: rgba(15, 23, 42, 0.6);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
border: 1px solid #334155;
border-radius: 8px;
color: #fff;
font-size: 13px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-field select:hover { border-color: #475569; }
.filter-field select:focus {
outline: none;
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.filter-field select option { background: #0f172a; color: #f1f5f9; }
html[data-theme="light"] .filter-field select {
background-color: rgba(255, 255, 255, 0.85);
background-image: url("data:image/svg+xml;utf8,");
border-color: rgba(31, 30, 29, 0.18);
color: #1f1e1d;
}
html[data-theme="light"] .filter-field select:hover { border-color: rgba(31, 30, 29, 0.30); }
html[data-theme="light"] .filter-field select:focus {
border-color: #0f76d2;
box-shadow: 0 0 0 3px rgba(15,118,210,0.10);
}
html[data-theme="light"] .filter-field select option { background: #faf9f5; color: #1f1e1d; }
.filter-field .multi-select { width: 100%; }
.filter-field .multi-select-btn { width: 100%; }
.filter-field input {
width: 100%;
height: 32px;
padding: 6px 10px;
background-color: rgba(15, 23, 42, 0.6);
border: 1px solid #334155;
border-radius: 8px;
color: #f1f5f9;
font-size: 13px;
outline: none;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-field input::placeholder { color: rgba(148, 163, 184, 0.55); }
.filter-field input:hover { border-color: #475569; }
.filter-field input:focus {
border-color: #38bdf8;
box-shadow: 0 0 0 3px rgba(56,189,248,0.10);
}
.filter-field input[type="date"]::-webkit-calendar-picker-indicator,
.filter-field input[type="month"]::-webkit-calendar-picker-indicator {
filter: invert(0.85);
opacity: 0.7;
cursor: pointer;
}
.filter-field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.filter-field input[type="month"]:hover::-webkit-calendar-picker-indicator {
opacity: 1;
}
.filter-field input[type="number"]::-webkit-inner-spin-button {
opacity: 0.5;
}
html[data-theme="light"] .filter-field input {
background-color: rgba(255, 255, 255, 0.85);
border-color: rgba(31, 30, 29, 0.18);
color: #1f1e1d;
}
html[data-theme="light"] .filter-field input::placeholder { color: rgba(31, 30, 29, 0.40); }
html[data-theme="light"] .filter-field input:hover { border-color: rgba(31, 30, 29, 0.30); }
html[data-theme="light"] .filter-field input:focus {
border-color: #0f76d2;
box-shadow: 0 0 0 3px rgba(15,118,210,0.10);
}
html[data-theme="light"] .filter-field input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .filter-field input[type="month"]::-webkit-calendar-picker-indicator {
filter: none;
}
.filter-drawer-footer {
display: flex;
gap: 10px;
padding: 12px 18px 16px;
border-top: 1px solid rgba(148, 163, 184, 0.10);
}
.filter-drawer-footer .btn-clear,
.filter-drawer-footer .btn-primary {
flex: 1;
justify-content: center;
}
.btn-icon-only.has-badge { position: relative; }
.btn-icon-only.has-badge .badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 9px;
line-height: 12px;
border-radius: 8px;
border: 2px solid #1e293b;
box-sizing: border-box;
}
.btn-icon-only.has-badge .badge.empty { display: none; }
html[data-theme="light"] .filter-drawer-backdrop {
background: rgba(20, 18, 12, 0.15);
}
html[data-theme="light"] .filter-drawer {
background: linear-gradient(180deg, rgba(250, 249, 245, 0.90) 0%, rgba(244, 241, 232, 0.90) 100%);
border-left-color: rgba(31, 30, 29, 0.14);
box-shadow: -8px 0 28px rgba(20, 18, 12, 0.14),
0 1px 0 rgba(255, 255, 255, 0.40) inset;
}
html[data-theme="light"] .filter-drawer-header { border-bottom-color: rgba(31, 30, 29, 0.08); }
html[data-theme="light"] .filter-drawer-header h3 { color: #4b4a44; }
html[data-theme="light"] .filter-drawer-close { color: #8a8980; }
html[data-theme="light"] .filter-drawer-close:hover {
background: rgba(31, 30, 29, 0.05);
color: #1f1e1d;
border-color: rgba(31, 30, 29, 0.10);
}
html[data-theme="light"] .filter-drawer-body::-webkit-scrollbar-thumb { background: rgba(31, 30, 29, 0.18); }
html[data-theme="light"] .filter-drawer-footer { border-top-color: rgba(31, 30, 29, 0.08); }
html[data-theme="light"] .filter-field label { color: #8a8980; }
html[data-theme="light"] .btn-icon-only.has-badge .badge { border-color: #faf9f5; }
.sec-panel { max-width: 460px; padding: 28px 28px 24px; }
.sec-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.sec-avatar {
width: 44px; height: 44px; flex: 0 0 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(14, 165, 233, 0.10));
border: 1px solid rgba(56, 189, 248, 0.30);
color: #38bdf8;
}
.sec-titleblock { min-width: 0; }
.sec-eyebrow {
font-size: 10.5px; font-weight: 600; letter-spacing: 0.10em;
text-transform: uppercase;
color: #64748b;
margin-bottom: 2px;
}
.sec-title { font-size: 17px; font-weight: 700; color: #f8fafc; line-height: 1.2; }
.sec-subtitle {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px; color: #94a3b8; margin-top: 3px;
}
.sec-card {
margin-bottom: 14px;
padding: 14px 16px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.18);
}
.sec-card-intro p { margin: 0; color: #cbd5e1; font-size: 13.5px; line-height: 1.55; }
.sec-card-head { margin-bottom: 10px; }
.sec-card-title {
font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
color: #cbd5e1;
}
.sec-card-sub { font-size: 11.5px; color: #64748b; margin-top: 3px; }
.sec-input {
width: 100%;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 7px;
color: #f8fafc;
font-size: 14px;
}
.sec-input:focus { outline: none; border-color: #38bdf8; }
.pw-field { margin-top: 12px; }
.pw-field:first-child { margin-top: 0; }
.pw-field label {
display: block;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 6px;
}
.pw-field label .pw-field-hint {
font-size: 10.5px; font-weight: 500; letter-spacing: 0;
text-transform: none;
color: #64748b;
margin-left: 6px;
}
.totp-card-scan {
border-color: rgba(56, 189, 248, 0.32);
background: linear-gradient(180deg, rgba(56, 189, 248, 0.06), rgba(15, 23, 42, 0.45));
}
.totp-card-scan .sec-card-title { color: #7dd3fc; }
.totp-card-manual {
border-color: rgba(251, 191, 36, 0.30);
background: linear-gradient(180deg, rgba(251, 191, 36, 0.05), rgba(15, 23, 42, 0.45));
}
.totp-card-manual .sec-card-title { color: #fcd34d; }
.totp-qr {
display: flex; justify-content: center;
padding: 12px;
background: #fff;
border-radius: 8px;
}
.totp-qr svg { display: block; width: 200px; height: 200px; }
.totp-secret-row {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(251, 191, 36, 0.18);
}
.totp-secret {
flex: 1; min-width: 0;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 13.5px; color: #fcd34d;
word-break: break-all;
user-select: all;
letter-spacing: 0.04em;
}
.totp-copy-btn {
flex: 0 0 auto;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(251, 191, 36, 0.10);
border: 1px solid rgba(251, 191, 36, 0.28);
border-radius: 7px;
color: #fcd34d;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.totp-copy-btn:hover { background: rgba(251, 191, 36, 0.20); border-color: #fbbf24; }
.totp-copy-btn.is-copied { background: rgba(34, 197, 94, 0.18); border-color: rgba(34, 197, 94, 0.45); color: #4ade80; }
.totp-verify-section { margin-top: 18px; }
.totp-verify-title {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.10em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 8px;
text-align: center;
}
.totp-code-input {
width: 100%;
padding: 14px 16px;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.25);
border-radius: 10px;
color: #f8fafc;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 22px; font-weight: 600;
text-align: center;
letter-spacing: 0.45em;
text-indent: 0.45em;
transition: border-color 0.15s, background 0.15s;
}
.totp-code-input:focus {
outline: none;
border-color: #38bdf8;
background: rgba(15, 23, 42, 0.75);
}
.totp-code-input::placeholder { color: rgba(148, 163, 184, 0.55); font-weight: 400; }
.totp-status-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
margin-bottom: 14px;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.32);
border-radius: 999px;
font-size: 12.5px;
color: #4ade80;
}
.totp-status-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}
html[data-theme="light"] .sec-head { border-bottom-color: rgba(31, 30, 29, 0.12); }
html[data-theme="light"] .sec-avatar {
background: linear-gradient(135deg, rgba(2, 132, 199, 0.10), rgba(2, 132, 199, 0.04));
border-color: rgba(2, 132, 199, 0.30);
color: #0284c7;
}
html[data-theme="light"] .sec-eyebrow { color: #8a8980; }
html[data-theme="light"] .sec-title { color: #2d2c29; }
html[data-theme="light"] .sec-subtitle { color: #8a8980; }
html[data-theme="light"] .sec-card {
background: rgba(31, 30, 29, 0.025);
border-color: rgba(31, 30, 29, 0.10);
}
html[data-theme="light"] .sec-card-intro p { color: #3d3c39; }
html[data-theme="light"] .sec-card-title { color: #3d3c39; }
html[data-theme="light"] .sec-card-sub { color: #8a8980; }
html[data-theme="light"] .sec-input {
background: #fff;
border-color: rgba(31, 30, 29, 0.18);
color: #2d2c29;
}
html[data-theme="light"] .pw-field label { color: #6b6a63; }
html[data-theme="light"] .pw-field label .pw-field-hint { color: #8a8980; }
html[data-theme="light"] .totp-card-scan {
background: linear-gradient(180deg, rgba(2, 132, 199, 0.05), rgba(31, 30, 29, 0.02));
border-color: rgba(2, 132, 199, 0.30);
}
html[data-theme="light"] .totp-card-scan .sec-card-title { color: #0369a1; }
html[data-theme="light"] .totp-card-manual {
background: linear-gradient(180deg, rgba(180, 83, 9, 0.05), rgba(31, 30, 29, 0.02));
border-color: rgba(180, 83, 9, 0.28);
}
html[data-theme="light"] .totp-card-manual .sec-card-title { color: #b45309; }
html[data-theme="light"] .totp-secret-row {
background: rgba(31, 30, 29, 0.04);
border-color: rgba(180, 83, 9, 0.20);
}
html[data-theme="light"] .totp-secret { color: #b45309; }
html[data-theme="light"] .totp-copy-btn {
background: rgba(180, 83, 9, 0.08);
border-color: rgba(180, 83, 9, 0.28);
color: #b45309;
}
html[data-theme="light"] .totp-copy-btn:hover { background: rgba(180, 83, 9, 0.16); border-color: #b45309; }
html[data-theme="light"] .totp-copy-btn.is-copied {
background: rgba(22, 163, 74, 0.14); border-color: rgba(22, 163, 74, 0.40); color: #15803d;
}
html[data-theme="light"] .totp-verify-title { color: #6b6a63; }
html[data-theme="light"] .totp-code-input {
background: #fff;
border-color: rgba(31, 30, 29, 0.18);
color: #2d2c29;
}
html[data-theme="light"] .totp-code-input::placeholder { color: rgba(31, 30, 29, 0.35); }
html[data-theme="light"] .totp-status-pill {
background: rgba(22, 163, 74, 0.10);
border-color: rgba(22, 163, 74, 0.32);
color: #15803d;
}
html[data-theme="light"] .totp-status-dot {
background: #16a34a;
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
#zReportsTbody td:nth-child(n+4) { text-align: center; }
.z-cell-match { color: #4ade80 !important; font-weight: 700; }
.z-cell-mismatch { color: #f87171 !important; font-weight: 700; }
html[data-theme="light"] .z-cell-match { color: #15803d !important; }
html[data-theme="light"] .z-cell-mismatch { color: #b91c1c !important; }
#accountingZReportsSection {
display: flex;
flex-direction: column;
height: calc(100vh - 61px - var(--sidebar-inset, 14px) * 2);
box-sizing: border-box;
}
#accountingZReportsSection[hidden] { display: none; }
#accountingZReportsSection > .s-cd5830f7 {
flex: 1 1 0;
min-height: 0;
max-height: none;
}
body:has(#accountingPage.visible) { overflow: hidden; }
.z-date-pair {
display: inline-flex;
align-items: center;
gap: 8px;
}
.z-date-pair label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
white-space: nowrap;
}
.z-date-pair input[type="date"],
.z-date-pair input[type="month"],
.z-date-pair select {
height: 32px;
padding: 0 8px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 8px;
color: #e2e8f0;
font-size: 13px;
cursor: pointer;
color-scheme: dark;
}
.z-date-pair input[type="date"]:focus,
.z-date-pair input[type="month"]:focus,
.z-date-pair select:focus {
outline: none;
border-color: rgba(56, 189, 248, 0.55);
}
html[data-theme="light"] .z-date-pair label { color: #8a8980; }
html[data-theme="light"] .z-date-pair input[type="date"],
html[data-theme="light"] .z-date-pair input[type="month"],
html[data-theme="light"] .z-date-pair select {
background: #fff;
border-color: rgba(31, 30, 29, 0.18);
color: #1f1e1d;
color-scheme: light;
}
.auto-sync-card {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.35));
border: 1px solid rgba(148, 163, 184, 0.14);
border-radius: 12px;
padding: 14px 18px;
margin: 14px 0;
}
.auto-sync-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
}
.auto-sync-title {
font-size: 14px;
font-weight: 700;
color: #e2e8f0;
letter-spacing: 0.2px;
}
.auto-sync-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
color: #cbd5e1;
font-size: 13px;
cursor: pointer;
}
.auto-sync-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #38bdf8;
cursor: pointer;
}
.auto-sync-body {
display: flex;
align-items: flex-end;
gap: 18px;
flex-wrap: wrap;
}
.auto-sync-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 140px;
}
.auto-sync-field label, .auto-sync-field .auto-sync-label {
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
}
.auto-sync-field select,
.auto-sync-field input[type="time"] {
height: 32px;
padding: 0 8px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(148, 163, 184, 0.20);
border-radius: 8px;
color: #e2e8f0;
font-size: 13px;
cursor: pointer;
color-scheme: dark;
}
.auto-sync-field select:focus,
.auto-sync-field input[type="time"]:focus {
outline: none;
border-color: rgba(56, 189, 248, 0.55);
}
.auto-sync-readonly {
height: 32px;
display: inline-flex;
align-items: center;
color: #f1f5f9;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .auto-sync-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(244, 241, 232, 0.55));
border-color: rgba(31, 30, 29, 0.10);
}
html[data-theme="light"] .auto-sync-title { color: #1f1e1d; }
html[data-theme="light"] .auto-sync-toggle { color: #4b4a44; }
html[data-theme="light"] .auto-sync-field label, html[data-theme="light"] .auto-sync-field .auto-sync-label { color: #8a8980; }
html[data-theme="light"] .auto-sync-field select,
html[data-theme="light"] .auto-sync-field input[type="time"] {
background: #fff;
border-color: rgba(31, 30, 29, 0.18);
color: #1f1e1d;
color-scheme: light;
}
html[data-theme="light"] .auto-sync-readonly { color: #1f1e1d; }
.api-keys-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 16px 20px; margin-top: 16px; overflow-x: auto; }
.api-keys-table { width: 100%; border-collapse: collapse; }
.api-keys-table th { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid #334155; }
.api-keys-table td { padding: 12px; color: #e2e8f0; font-size: 13px; border-bottom: 1px solid rgba(148, 163, 184, 0.08); vertical-align: middle; text-align: center; }
.api-keys-table tr:last-child td { border-bottom: none; }
.api-keys-prefix { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #94a3b8; }
.api-keys-num { font-variant-numeric: tabular-nums; }
.api-keys-last { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #94a3b8; font-size: 12px; }
.api-keys-empty { text-align: center; padding: 28px; color: #64748b; }
.api-keys-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.api-keys-badge.active { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.api-keys-badge.revoked { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }
.api-keys-revoke { background: transparent; color: #f87171; border: 1px solid rgba(248, 113, 113, 0.35); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.api-keys-revoke:hover { background: rgba(248, 113, 113, 0.10); }
.api-keys-edit { background: transparent; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; margin-right: 6px; }
.api-keys-edit:hover { background: rgba(56, 189, 248, 0.10); }
.api-key-modal-content { max-width: 540px; }
.api-key-warn { background: rgba(251, 191, 36, 0.10); border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 8px; padding: 12px; color: #fbbf24; font-size: 13px; margin: 0 0 16px; }
.api-key-token-box { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 14px 16px; color: #34d399; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; white-space: pre-wrap; margin: 0 0 16px; user-select: all; }
html[data-theme="light"] .api-keys-card { background: #faf9f5; border-color: rgba(31, 30, 29, 0.10); }
html[data-theme="light"] .api-keys-table th { color: #6b6a63; border-bottom-color: rgba(31, 30, 29, 0.12); }
html[data-theme="light"] .api-keys-table td { color: #1f1e1d; }
html[data-theme="light"] .api-keys-prefix, html[data-theme="light"] .api-keys-last { color: #8a8980; }
html[data-theme="light"] .api-key-token-box { background: #fef7e8; color: #059669; border-color: rgba(31, 30, 29, 0.12); }
:root {
--ord-bg: #0b1220;
--ord-surface: #0f172a;
--ord-card: #131c30;
--ord-card-hover: #18233b;
--ord-border: #233047;
--ord-border-strong: #2f405c;
--ord-divider: rgba(148,163,184,.14);
--ord-text: #e8eef7;
--ord-text-2: #aab6c8;
--ord-muted: #8194ad;
--ord-eyebrow: #647089;
--ord-accent: #54b9f6;
--ord-accent-press: #38a8ee;
--ord-accent-weak: rgba(84,185,246,.13);
--ord-ok: #38d39a;
--ord-ok-weak: rgba(56,211,154,.15);
--ord-warn: #fbbf24;
--ord-warn-weak: rgba(251,191,36,.15);
--ord-danger: #f87171;
--ord-danger-weak: rgba(248,113,113,.14);
--ord-radius: 14px;
--ord-radius-sm: 10px;
--ord-shadow: 0 18px 50px -12px rgba(0,0,0,.55);
--ord-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html[data-theme="light"] {
--ord-bg: #f4f1ea;
--ord-surface: #faf9f5;
--ord-card: #ffffff;
--ord-card-hover: #fbfaf6;
--ord-border: #e7e2d8;
--ord-border-strong: #d7d1c4;
--ord-divider: rgba(31,30,29,.10);
--ord-text: #211f1c;
--ord-text-2: #4b4a44;
--ord-muted: #7c7a70;
--ord-eyebrow: #9a988c;
--ord-accent: #c4623f;
--ord-accent-press: #ad5436;
--ord-accent-weak: rgba(196,98,63,.11);
--ord-ok: #157a47;
--ord-ok-weak: rgba(21,122,71,.10);
--ord-warn: #b06a07;
--ord-warn-weak: rgba(176,106,7,.10);
--ord-danger: #c0392b;
--ord-danger-weak: rgba(192,57,43,.10);
--ord-shadow: 0 18px 44px -14px rgba(31,30,29,.20);
}
.ord-num { font-variant-numeric: tabular-nums; }
.ord-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ord-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ord-eyebrow); }
.ord-h1 { font-size: 27px; font-weight: 760; letter-spacing: -.02em; margin: 6px 0 4px; }
.ord-lead { font-size: 13.5px; color: var(--ord-muted); }
.ord-segnav { display: inline-flex; gap: 4px; margin: 22px 0 0; padding: 5px;
background: var(--ord-card); border: 1px solid var(--ord-border); border-radius: 13px; }
.ord-seg { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border: none;
background: transparent; color: var(--ord-muted); font: inherit; font-size: 13px; font-weight: 600;
padding: 9px 15px; border-radius: 9px; transition: background .16s, color .16s; }
.ord-seg svg { width: 15px; height: 15px; }
.ord-seg:hover { color: var(--ord-text); }
.ord-seg.ord-active { background: var(--ord-surface); color: var(--ord-text); box-shadow: inset 0 0 0 1px var(--ord-border); }
.ord-seg.ord-active .ord-seg-badge { background: var(--ord-accent); color: #fff; }
.ord-seg-badge { font-size: 11px; font-weight: 700; min-width: 19px; height: 19px; padding: 0 5px;
border-radius: 999px; display: inline-grid; place-items: center;
background: var(--ord-accent-weak); color: var(--ord-accent); }
.ord-rule { height: 1px; background: var(--ord-divider); border: none; margin: 18px 0 24px; }
.ord-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
font: inherit; font-size: 13px; font-weight: 650; border-radius: 10px; padding: 10px 16px; border: 1px solid transparent;
transition: transform .12s, background .15s, border-color .15s, box-shadow .15s; }
.ord-btn:active { transform: translateY(1px); }
.ord-btn svg { width: 15px; height: 15px; }
.ord-btn-primary { background: linear-gradient(180deg, var(--ord-accent), var(--ord-accent-press)); color: #fff;
box-shadow: 0 10px 22px -10px var(--ord-accent); width: 100%; padding: 13px; font-size: 14px; }
.ord-btn-primary[disabled] { background: var(--ord-card); color: var(--ord-muted); box-shadow: none; cursor: not-allowed;
border-color: var(--ord-border); }
.ord-btn-secondary { background: var(--ord-card); border-color: var(--ord-border); color: var(--ord-text); }
.ord-btn-secondary:hover { border-color: var(--ord-border-strong); background: var(--ord-card-hover); }
.ord-btn-ghost { background: transparent; border-color: transparent; color: var(--ord-muted); padding: 9px 12px; }
.ord-btn-ghost:hover { color: var(--ord-text); background: var(--ord-card); }
.ord-builder { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.ord-cart-card { background: var(--ord-card); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: hidden; }
.ord-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--ord-divider); }
.ord-cart-head-title { font-size: 13px; font-weight: 700; }
.ord-cart-head-title span { color: var(--ord-muted); font-weight: 500; }
#stockOrderSection table { width: 100%; border-collapse: collapse; font-size: 13px; }
#stockOrderSection thead th { text-align: left; padding: 11px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--ord-eyebrow); border-bottom: 1px solid var(--ord-divider); white-space: nowrap;
background: transparent; position: static; }
#stockOrderSection th.ord-r, #stockOrderSection td.ord-r { text-align: right; }
#stockOrderSection th.ord-c, #stockOrderSection td.ord-c { text-align: center; }
#stockOrderSection tbody td { padding: 13px 14px; border-bottom: 1px solid var(--ord-divider); vertical-align: middle; color: var(--ord-text-2); }
#stockOrderSection tbody tr:last-child td { border-bottom: none; }
#stockOrderSection tbody tr,
#stockOrderSection tbody tr:nth-child(even),
#stockOrderSection tbody tr:hover { background: transparent; }
#stockOrderSection tbody tr:hover td { background: var(--ord-card-hover); }
.ord-cart-name { color: var(--ord-text); font-weight: 650; }
.ord-cart-meta { color: var(--ord-muted); font-size: 11.5px; margin-top: 2px; }
#orderTable td:first-child { max-width: 0; width: 100%; }
#orderTable .ord-cart-name,
#orderTable .ord-cart-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-money { color: var(--ord-text); font-weight: 650; }
.ord-muted { color: var(--ord-muted); }
.ord-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ord-border); border-radius: 9px; overflow: hidden; }
.ord-stepper button { width: 28px; height: 30px; border: none; background: var(--ord-surface); color: var(--ord-text-2); cursor: pointer; font-size: 15px; }
.ord-stepper button:hover { background: var(--ord-card-hover); color: var(--ord-text); }
.ord-stepper input { width: 38px; height: 30px; border: none; text-align: center; background: transparent; color: var(--ord-text); font: inherit; font-weight: 650; }
.ord-priced-input { width: 78px; height: 30px; border: 1px solid var(--ord-border); border-radius: 8px; background: var(--ord-surface);
color: var(--ord-text); padding: 0 9px; font: inherit; text-align: right; }
.ord-priced-input:focus { outline: none; border-color: var(--ord-accent); }
.ord-tierpick { display: inline-flex; border: 1px solid var(--ord-border); border-radius: 9px; overflow: hidden; background: var(--ord-surface); }
.ord-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; border: none; cursor: pointer;
background: transparent; color: var(--ord-text-2); font: inherit; padding: 5px 10px; border-right: 1px solid var(--ord-border); min-width: 56px; }
.ord-tier:last-child { border-right: none; }
.ord-tier:hover { background: var(--ord-card-hover); }
.ord-tier-k { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ord-eyebrow); }
.ord-tier-v { font-size: 12.5px; font-weight: 650; color: var(--ord-text); font-variant-numeric: tabular-nums; }
.ord-tier.ord-on { background: var(--ord-accent-weak); }
.ord-tier.ord-on .ord-tier-k { color: var(--ord-accent); }
.ord-tier.ord-on .ord-tier-v { color: var(--ord-accent); }
.ord-tier-input { width: 58px; border: none; background: transparent; color: var(--ord-text); font: inherit; font-size: 12.5px;
font-weight: 650; text-align: left; padding: 0; font-variant-numeric: tabular-nums; }
.ord-tier-input:focus { outline: none; }
.ord-tier-input:disabled { color: var(--ord-muted); pointer-events: none; }
.ord-field-hint { font-size: 11px; color: var(--ord-muted); margin-top: 7px; line-height: 1.45; }
.ord-rowx { width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: var(--ord-muted); cursor: pointer; display: grid; place-items: center; }
tr:hover .ord-rowx { color: var(--ord-danger); background: var(--ord-danger-weak); }
.ord-stock { font-weight: 700; font-size: 12px; }
.ord-stock.ord-in { color: var(--ord-ok); } .ord-stock.ord-low { color: var(--ord-warn); } .ord-stock.ord-out { color: var(--ord-danger); }
.ord-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 16px; }
.ord-rail-card { background: var(--ord-card); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); padding: 17px; }
.ord-rail-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ord-eyebrow); margin-bottom: 13px; }
.ord-field { margin-bottom: 13px; }
.ord-field:last-child { margin-bottom: 0; }
.ord-field label, .ord-field .ord-field-label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ord-text-2); margin-bottom: 6px; font-weight: 600; }
.ord-req { color: var(--ord-accent); }
.ord-field input, .ord-field select { width: 100%; height: 40px; border: 1px solid var(--ord-border); border-radius: 9px;
background: var(--ord-surface); color: var(--ord-text); padding: 0 12px; font: inherit; font-size: 13px; }
.ord-field input:focus, .ord-field select:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-accent-weak); }
.ord-field-add { margin-top: 7px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
.ord-client-suggest { display: inline-flex; align-items: center; margin-top: 7px; padding: 5px 11px;
font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 20px;
color: var(--ord-accent); background: var(--ord-accent-weak); border: 1px dashed var(--ord-accent); }
.ord-client-suggest:hover { background: var(--ord-accent); color: var(--ord-bg); border-style: solid; }
.ord-client-suggest[hidden] { display: none; }
.client-lookup-status { margin-top: 6px; font-size: 12px; line-height: 1.4; color: #94a3b8; }
.client-lookup-status.is-ok { color: #4ade80; }
.client-lookup-status.is-error { color: #f87171; }
#addClientModal input:disabled, #addClientModal select:disabled { opacity: 0.55; cursor: not-allowed; }
.addclient-id-wrap { position: relative; }
.addclient-manual-btn { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); padding: 3px 9px; font-size: 11px; font-weight: 600; }
.ord-segctl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--ord-surface); border: 1px solid var(--ord-border); border-radius: 10px; }
.ord-segctl button { border: none; background: transparent; color: var(--ord-muted); font: inherit; font-size: 12.5px; font-weight: 650; padding: 8px; border-radius: 7px; cursor: pointer; }
.ord-segctl button.ord-on { background: var(--ord-card); color: var(--ord-text); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ord-margin-row { display: flex; gap: 6px; }
.ord-margin-row input { flex: 1; min-width: 0; }
.ord-margin-apply { flex: none; height: 40px; padding: 0 16px; border: none; border-radius: 9px;
background: var(--ord-accent); color: #fff; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.ord-margin-apply:hover { filter: brightness(1.06); }
#accountingMarketAnalyzeSection .ma-pricier { color: var(--ord-danger, #c0392b); font-weight: 650; }
#accountingMarketAnalyzeSection .ma-cheaper { color: var(--ord-success, #1e8449); font-weight: 650; }
#accountingMarketAnalyzeSection .ma-only-over { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ord-muted, #6b6a63); cursor: pointer; user-select: none; }
#accountingMarketAnalyzeSection .ma-only-over input { margin: 0; }
#accountingMarketAnalyzeSection .ma-row-click { cursor: pointer; }
#accountingMarketAnalyzeSection .ma-row-click:hover td { background: var(--ord-hover, rgba(255,255,255,.04)); }
#marketTrendChart { min-height: 340px; padding: 8px 14px; }
#accountingMarketAnalyzeSection {
display: flex; flex-direction: column; box-sizing: border-box;
height: calc(100vh - 61px - var(--sidebar-inset, 14px) * 2);
}
body:has(#marketResearchPage.visible) { overflow: hidden; }
#accountingMarketAnalyzeSection .filters.filters-bar .filter-row { justify-content: space-between; }
#accountingMarketAnalyzeSection .filters.filters-bar { margin-bottom: 0; }
#accountingMarketAnalyzeSection .ma-filters { gap: 8px; }
#accountingMarketAnalyzeSection .ma-filter-sel,
#deadStockSection .ma-filter-sel {
height: 32px;
max-width: 200px;
padding: 4px 28px 4px 10px;
font-size: 12px;
border-radius: 6px;
background: #0f172a;
border: 1px solid #334155;
color: #e2e8f0;
cursor: pointer;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
#accountingMarketAnalyzeSection .ma-filter-sel:focus,
#deadStockSection .ma-filter-sel:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.1); }
#accountingMarketAnalyzeSection .ma-filter-sel:disabled,
#deadStockSection .ma-filter-sel:disabled { opacity: .5; cursor: not-allowed; }
html[data-theme="light"] #accountingMarketAnalyzeSection .ma-filter-sel,
html[data-theme="light"] #deadStockSection .ma-filter-sel {
background: #fff; border-color: var(--ord-divider, #d8d4cc); color: #1f1e1d;
}
#accountingMarketAnalyzeSection .ma-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
#accountingMarketAnalyzeSection .ma-tab { font-size: 12.5px; border: 1px solid var(--ord-divider, #d8d4cc); border-radius: 999px; padding: 4px 12px; cursor: pointer; background: none; color: inherit; }
#accountingMarketAnalyzeSection .ma-tab.ma-tab-on { background: var(--ord-accent, #4980dc); border-color: var(--ord-accent, #4980dc); color: #fff; font-weight: 600; }
#accountingMarketAnalyzeSection .ma-tab .ma-tab-n { opacity: .7; margin-left: 4px; }
#accountingMarketAnalyzeSection .ma-list--compact { gap: 0; padding: 0;
border: 1px solid var(--ord-border, #334155); border-radius: 12px; box-sizing: border-box; }
#accountingMarketAnalyzeSection .ma-list > table.road-table { width: 100%; }
#accountingMarketAnalyzeSection .ma-list { display: flex; flex-direction: column; gap: 8px;
flex: 1 1 0; min-height: 0; overflow: auto; padding: 2px; }
#accountingMarketAnalyzeSection .ma-card { display: flex; align-items: center; gap: 14px;
background: var(--ord-card, #131c30); border: 1px solid var(--ord-border, #233047); border-radius: 12px;
padding: 10px 14px; color: inherit; }
#accountingMarketAnalyzeSection .ma-card:hover { background: var(--ord-card-hover, #18233b); border-color: var(--ord-border-strong, #2f405c); }
#accountingMarketAnalyzeSection .ma-card-ph { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: cover;
background: var(--ord-card-hover, #18233b); border: 1px solid var(--ord-border, #233047); }
#accountingMarketAnalyzeSection .ma-card-ph--empty { display: flex; align-items: center; justify-content: center; color: var(--ord-muted, #8194ad); }
#accountingMarketAnalyzeSection .ma-card-ph--empty svg { width: 26px; height: 26px; }
#accountingMarketAnalyzeSection .ma-card-body { flex: 1; min-width: 0; }
#accountingMarketAnalyzeSection .ma-card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
color: var(--ord-eyebrow, #647089); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#accountingMarketAnalyzeSection .ma-card-title { font-size: 14px; margin-top: 2px; color: var(--ord-text, inherit);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#accountingMarketAnalyzeSection .ma-card-en { color: var(--ord-muted, #8194ad); }
#accountingMarketAnalyzeSection .ma-card-sub { font-size: 11.5px; color: var(--ord-eyebrow, #647089); margin-top: 3px; }
#accountingMarketAnalyzeSection .ma-card-side { flex: none; text-align: right; }
#accountingMarketAnalyzeSection .ma-card-price { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 19px; color: var(--ord-text, inherit); }
#accountingMarketAnalyzeSection .ma-card-cur { font-size: 13px; font-weight: 400; color: var(--ord-muted, #8194ad); }
#accountingMarketAnalyzeSection .ma-trend { margin-top: 3px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
#accountingMarketAnalyzeSection .ma-trend-up { color: var(--ord-amount, #c96442); }
#accountingMarketAnalyzeSection .ma-trend-down { color: #3fa66a; }
#accountingMarketAnalyzeSection .ma-trend-flat { color: var(--ord-muted, #8194ad); font-weight: 500; }
#accountingMarketAnalyzeSection .ma-card-open { display: inline-block; font-size: 12px; margin-top: 2px; color: var(--ord-accent, #4980dc); text-decoration: none; cursor: pointer; }
#accountingMarketAnalyzeSection .ma-card-open:hover { text-decoration: underline; }
#accountingMarketAnalyzeSection .ma-list-msg { padding: 28px 14px; text-align: center; color: var(--ord-muted, #6b6a63); font-size: 13px; }
.ma-progress { display: none; height: 6px; margin-top: 12px; border-radius: 999px; overflow: hidden;
background: rgba(148, 163, 184, 0.18); }
.ma-progress.is-running { display: block; }
.ma-progress-bar { width: 38%; height: 100%; border-radius: 999px;
background: var(--ord-accent, #4980dc); animation: maIndeterminate 1.25s ease-in-out infinite; }
@keyframes maIndeterminate { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
#accountingMarketAnalyzeSection img.ma-card-ph { cursor: zoom-in; }
#accountingMarketAnalyzeSection .ma-compact-photo { display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0; border: none; border-radius: 6px; background: transparent;
color: var(--ord-accent, #4980dc); cursor: zoom-in; transition: background-color 0.15s; }
#accountingMarketAnalyzeSection .ma-compact-photo:hover { background: rgba(73,128,220,0.14); }
#accountingMarketAnalyzeSection .ma-compact-photo svg { width: 17px; height: 17px; }
.ma-photo-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
padding: 32px; background: rgba(0,0,0,0.82); z-index: 500; }
.ma-photo-img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 8px;
box-shadow: 0 25px 60px rgba(0,0,0,0.5); background: #0b1220; }
.ma-photo-close { position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 8px;
border: none; background: rgba(255,255,255,0.10); color: #e2e8f0; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s; }
.ma-photo-close:hover { background: rgba(255,255,255,0.2); }
.sl-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; cursor: pointer; display: block; }
.order-lock-note { margin: 0 0 10px; padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
color: var(--ord-text, #1f1e1d); background: rgba(201, 100, 66, 0.12); border: 1px solid rgba(201, 100, 66, 0.4); }
#salesComparePage { padding: 8px 0; }
.sc-mode { margin-left: 0; }
.sc-input { background: var(--ord-bg, #0f1729); border: 1px solid var(--ord-border, #233047); color: var(--ord-text, #e2e8f0); border-radius: 8px; padding: 7px 10px; color-scheme: dark; }
html[data-theme="light"] .sc-input { color-scheme: light; }
.sc-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(73,128,220,.15); border: 1px solid rgba(73,128,220,.4); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 13px; color: var(--ord-text, #e2e8f0); }
.sc-chip-x { border: none; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.sc-empty { color: var(--ord-muted, #8194ad); padding: 24px 0; }
.sc-summary { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px; border-radius: 999px; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.35); font-variant-numeric: tabular-nums; }
.sc-summary .sc-summary-head { font-size: 14px; font-weight: 700; color: #fb923c; }
.sc-summary .sc-summary-vs { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ord-muted, #64748b); }
.sc-summary .sc-summary-base { font-size: 14px; font-weight: 600; color: var(--ord-muted, #94a3b8); }
html[data-theme="light"] .sc-summary { background: rgba(196,98,63,.10); border-color: rgba(196,98,63,.30); }
html[data-theme="light"] .sc-summary .sc-summary-head { color: #c4623f; }
.sc-add-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; background: var(--ord-ok-weak); border: 1px solid rgba(56,211,154,.4); color: var(--ord-ok); cursor: pointer; line-height: 0; transition: background .15s, border-color .15s, color .15s; }
.sc-add-btn svg { display: block; }
.sc-add-btn:hover { background: rgba(56,211,154,.26); border-color: var(--ord-ok); }
html[data-theme="light"] .sc-add-btn { border-color: rgba(21,122,71,.35); }
html[data-theme="light"] .sc-add-btn:hover { background: rgba(21,122,71,.16); }
.sd-edit-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-right: 6px; background: transparent; border: 1px solid var(--ord-accent, #54b9f6); border-radius: 8px; color: var(--ord-accent, #54b9f6); cursor: pointer; transition: background .15s; }
.sd-edit-btn:hover { background: var(--ord-accent-weak, rgba(84,185,246,.13)); }
.sd-delete-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-right: 6px; background: transparent; border: 1px solid #e06767; border-radius: 8px; color: #e06767; cursor: pointer; transition: background .15s; }
.sd-delete-btn:hover { background: rgba(224,103,103,.13); }
.sd-del-avatar { background: rgba(224,103,103,.15); color: #e06767; }
.sd-del-warn { font-size: 13px; color: var(--ord-text, #e2e8f0); line-height: 1.5; }
.sd-del-warn li { margin: 2px 0; }
.se-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.se-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ord-muted, #8194ad); }
.se-field > span:first-child { font-weight: 600; }
.se-ro { color: var(--ord-text, #e2e8f0); font-size: 13px; padding: 6px 0; }
.se-items-wrap { border: 1px solid #334155; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.se-items { width: 100%; border-collapse: collapse; }
.se-items th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: #94a3b8; padding: 8px 10px; background: #0f172a; }
.se-items td { padding: 6px 10px; border-top: 1px solid #26324a; }
.se-items .se-name { color: var(--ord-text, #e2e8f0); font-size: 13px; max-width: 240px; }
.se-items input { width: 88px; }
.se-line-x { background: none; border: none; color: var(--ord-danger, #ef4444); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; }
.se-total-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-weight: 700; color: var(--ord-text, #e2e8f0); }
.se-total { font-variant-numeric: tabular-nums; }
.se-pay { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.se-comments { margin-bottom: 12px; }
.se-warn-row { font-size: 12px; color: var(--ord-warn, #f59e0b); background: var(--ord-warn-weak, rgba(245,158,11,.12)); border-radius: 6px; padding: 6px 10px; margin-top: 6px; }
html[data-theme="light"] .se-items-wrap { border-color: #e8e6dc; }
html[data-theme="light"] .se-items th { background: #f2f0e8; color: #6b7280; }
html[data-theme="light"] .se-items td { border-top-color: #ece9df; }
#saleEditModal .ord-modal.se-modal-wide { max-width: min(1280px, 95vw); background: var(--ord-bg); border-radius: 16px; }
#saleEditModal .ord-modal-body { max-height: 82vh; }
#saleEditModal .ord-modal.se-modal-wide { border: 1px solid var(--ord-danger);
box-shadow: 0 0 0 1px var(--ord-danger-weak), 0 24px 70px rgba(0,0,0,.55), 0 0 46px -10px var(--ord-danger); }
#saleEditModal .se-head-warn { margin-left: auto; display: flex; align-items: center; gap: 8px;
max-width: 46%; color: var(--ord-danger); font-size: 12.5px; font-weight: 650; line-height: 1.3; }
#saleEditModal .se-head-warn svg { flex: 0 0 auto; }
#saleEditModal .se-field-lbl { display: flex; align-items: center; gap: 6px; }
#saleEditModal .se-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
#saleEditModal .se-tag-edit { color: var(--ord-accent); background: var(--ord-accent-weak); border: 1px solid var(--ord-accent); }
#saleEditModal .se-tag-lock { color: var(--ord-muted); background: var(--ord-surface); border: 1px solid var(--ord-border); }
#saleEditModal .se-can-edit .oh-input-wrap input,
#saleEditModal .se-can-edit .ord-segctl { border-color: var(--ord-accent); box-shadow: 0 0 0 1px var(--ord-accent-weak); }
#saleEditModal .ord-builder { grid-template-columns: 1fr 330px; gap: 18px; align-items: stretch; }
#saleEditModal .ord-rail { position: static; align-self: stretch; }
#saleEditModal .ord-rail > .ord-rail-card:last-child { margin-top: auto; }
#saleEditModal .ord-panel { display: flex; flex-direction: column; min-height: 0; }
#saleEditModal .sd-panel-scroll { max-height: none; }
#saleEditModal .se-edit-tbl th:nth-child(1) { width: 44px; text-align: center; }
#saleEditModal .se-edit-tbl td.sd-i-idx { overflow: visible; text-overflow: clip; text-align: center; }
#saleEditModal .se-edit-tbl th:nth-child(2) { width: 104px; }
#saleEditModal .se-edit-tbl th:nth-child(4) { width: 124px; }
#saleEditModal .se-edit-tbl th:nth-child(5) { width: 112px; }
#saleEditModal .se-edit-tbl th:nth-child(6) { width: 122px; }
#saleEditModal .se-edit-tbl th:nth-child(7) { width: 104px; }
#saleEditModal .se-edit-tbl th:nth-child(8) { width: 42px; }
#saleEditModal .se-edit-tbl td.sd-i-qty { text-align: center; }
#saleEditModal .se-edit-tbl td.sd-i-qty .ord-stepper { justify-content: center; }
#saleEditModal .se-edit-tbl td:nth-child(6) { text-align: center; }
#saleEditModal .se-edit-tbl td.sd-i-qty,
#saleEditModal .se-edit-tbl td:nth-child(6) { overflow: visible; text-overflow: clip; }
#saleEditModal .se-price-input { width: 88px; padding: 7px 9px; border: 1px solid var(--ord-border);
border-radius: 8px; background: var(--ord-surface); color: var(--ord-text); font: inherit; font-size: 13px;
text-align: center; font-variant-numeric: tabular-nums; }
#saleEditModal .se-price-input:focus { outline: none; border-color: var(--ord-accent); background: var(--ord-card); }
#saleEditModal .ord-segctl-locked button { cursor: default; }
#saleEditModal .ord-segctl-locked button:disabled:not(.ord-on) { opacity: .4; }
#saleEditModal .sd-panel-toolbar .se-tag { margin-left: 0; }
.sc-chip-head { background: rgba(73,128,220,.28); border-color: var(--ord-accent, #4980dc); }
.sc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.sc-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 16px 18px; }
.sc-card-label { font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: #94a3b8; margin-bottom: 6px; }
.sc-card-value { font-size: 24px; font-weight: 700; color: #e2e8f0; margin-top: 4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
html[data-theme="light"] .sc-card { background: #fff; border-color: #e8e6dc; }
html[data-theme="light"] .sc-card-label { color: #6b7280; }
html[data-theme="light"] .sc-card-value { color: #1f1e1d; }
.sc-card-value .sc-unit { font-size: 12px; font-weight: 400; color: var(--ord-muted, #8194ad); margin-left: 2px; }
.sc-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; min-height: 20px; }
.sc-card-ref { font-size: 11px; color: var(--ord-muted, #8194ad); }
.sc-card-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 6px; }
.sc-card-delta.up { color: var(--ord-ok); background: var(--ord-ok-weak); }
.sc-card-delta.down { color: var(--ord-danger); background: var(--ord-danger-weak); }
.sc-chart-card { background: #1e293b; border: 1px solid #334155; border-radius: 12px; padding: 14px 16px 10px; margin-bottom: 14px; }
html[data-theme="light"] .sc-chart-card { background: #fff; border-color: #e8e6dc; }
.sc-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-chart-title { font-size: 13px; font-weight: 600; color: var(--ord-text, #e2e8f0); }
.sc-metric-toggle { margin-left: 0; }
.sc-chart { margin: 0; }
.sc-growth.up { color: var(--ord-ok); }
.sc-growth.down { color: var(--ord-danger); }
@media (max-width: 720px) { .sc-cards { grid-template-columns: repeat(2, 1fr); } .sc-summary { margin-left: 0; } }
.sc-table-wrap { overflow: hidden; border: 1px solid #334155; border-radius: 12px; }
.sc-table-wrap table { border-collapse: collapse; width: 100%; }
html[data-theme="light"] .sc-table-wrap { border-color: #e8e6dc; }
.filters-bar .sc-chips { margin-left: 4px; }
.filters-bar .sc-summary { margin-left: 0; margin-right: 4px; }
#slTable .ma-card-ph { width: 44px; height: 44px; flex: none; border-radius: 4px; }
#slTable .ma-card-ph--empty { display: flex; align-items: center; justify-content: center; color: var(--ord-muted, #8194ad); }
#slTable .ma-card-ph--empty svg { width: 22px; height: 22px; }
#accountingMarketAnalyzeSection .ma-hist-btn { margin-left: 6px; padding: 0; border: none; background: none; cursor: pointer; font-size: 12px; line-height: 1; vertical-align: middle; opacity: .85; }
#accountingMarketAnalyzeSection .ma-hist-btn:hover { opacity: 1; }
.ma-hist-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); z-index: 1000; }
.ma-hist-panel { position: relative; background: var(--ord-card, #131c30); border: 1px solid var(--ord-border, #233047); border-radius: 12px; padding: 18px 20px; min-width: 280px; max-width: 92vw; max-height: 80vh; overflow: auto; }
.ma-hist-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 7px; border: none; background: rgba(255,255,255,0.08); color: var(--ord-muted, #9fb2cd); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ma-hist-close:hover { background: rgba(255,255,255,0.16); }
.ma-hist-title { font-size: 14px; font-weight: 650; color: var(--ord-text, #e6edf6); margin: 0 34px 12px 0; }
.ma-hist-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ma-hist-table td { padding: 5px 14px 5px 0; font-size: 13px; white-space: nowrap; border-bottom: 1px solid var(--ord-border, #233047); }
.ma-hist-table tr:last-child td { border-bottom: none; }
.ma-hist-table .ma-hist-price { font-weight: 600; }
.ma-hist-table .ma-hist-delta { text-align: right; font-weight: 600; }
.ma-hist-table .ma-trend-up { color: var(--ord-amount, #c96442); }
.ma-hist-table .ma-trend-down { color: #3fa66a; }
.ma-hist-table .ma-trend-flat { color: var(--ord-muted, #8194ad); }
.ma-hist-empty { color: var(--ord-muted, #8194ad); font-size: 13px; padding: 8px 0; }
#deadStockSection .ds-field { display: inline-flex; align-items: center; gap: 5px; }
#deadStockSection .ds-flabel { font-size: 11px; color: var(--ord-eyebrow, #647089); white-space: nowrap; }
#deadStockSection .ds-center { text-align: center; }
#deadStockSection .ds-sortable { cursor: pointer; user-select: none; }
#deadStockSection .ds-sort-ind { font-size: 10px; opacity: .55; }
#deadStockSection .ds-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 12px 0 14px; }
#deadStockSection .ds-kpi { background: var(--ord-card, #131c30); border: 1px solid var(--ord-border, #233047); border-radius: 11px; padding: 11px 13px; }
#deadStockSection .ds-kpi .lbl { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ord-eyebrow, #647089); }
#deadStockSection .ds-kpi .val { font-size: 21px; font-weight: 680; margin-top: 4px; font-variant-numeric: tabular-nums; }
#deadStockSection .ds-kpi.headline .val { color: var(--ord-amount, #c96442); }
#deadStockSection .ds-aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
#deadStockSection .ds-ab { background: rgba(73,128,220,0.10); border: 1px solid rgba(73,128,220,0.38); border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .15s, border-color .15s; }
#deadStockSection .ds-ab:hover { background: rgba(73,128,220,0.20); border-color: var(--ord-accent, #4980dc); }
#deadStockSection .ds-ab.on { border-color: var(--ord-accent, #4980dc); box-shadow: inset 0 0 0 1px var(--ord-accent, #4980dc); }
#deadStockSection .ds-ab .b-lbl { font-size: 11px; color: var(--ord-muted, #9fb2cd); display: flex; justify-content: space-between; }
#deadStockSection .ds-ab .b-val { font-size: 15px; font-weight: 650; margin-top: 6px; font-variant-numeric: tabular-nums; }
#deadStockSection .ds-table-wrap { border: 1px solid var(--ord-border, #233047); border-radius: 12px; overflow: auto; }
#deadStockSection table.road-table { width: 100%; }
#deadStockSection table.road-table td { padding-top: 5px; padding-bottom: 5px; }
#deadStockSection table.road-table th { padding-top: 7px; padding-bottom: 7px; }
#deadStockSection .ds-name { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#deadStockSection .ds-cost { color: var(--ord-amount, #c96442); font-weight: 600; }
#deadStockSection .ds-never { color: var(--ord-amount, #c96442); font-weight: 650; }
#deadStockSection .ds-msg { padding: 28px 14px; text-align: center; color: var(--ord-muted, #6b6a63); font-size: 13px; }
.ord-totals { display: flex; flex-direction: column; gap: 11px; }
.ord-totline { display: flex; align-items: baseline; justify-content: space-between; }
.ord-totline .ord-k { font-size: 12.5px; color: var(--ord-muted); }
.ord-totline .ord-v { font-size: 13.5px; font-weight: 650; }
.ord-tot-hero { padding-top: 12px; border-top: 1px solid var(--ord-divider); }
.ord-tot-hero .ord-k { font-size: 12px; color: var(--ord-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ord-tot-hero .ord-v { font-size: 28px; font-weight: 780; letter-spacing: -.02em; }
.ord-rail-actions { display: flex; flex-direction: column; gap: 10px; }
.ord-rail-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ord-morebar { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; }
.ord-more-wrap { position: relative; }
.ord-more-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30;
background: var(--ord-card); border: 1px solid var(--ord-border-strong); border-radius: 12px; padding: 6px;
box-shadow: var(--ord-shadow); display: none; }
.ord-more-menu.ord-open { display: block; animation: fade .14s ease; }
.ord-more-item { display: flex; align-items: center; gap: 11px; width: 100%; border: none; background: transparent;
color: var(--ord-text); font: inherit; font-size: 13px; font-weight: 600; padding: 10px 11px; border-radius: 8px; cursor: pointer; text-align: left; }
.ord-more-item:hover { background: var(--ord-card-hover); }
.ord-more-item svg { width: 16px; height: 16px; color: var(--ord-muted); }
.ord-more-item.ord-danger { color: var(--ord-danger); }
.ord-more-item.ord-danger svg { color: var(--ord-danger); }
.ord-more-sep { height: 1px; background: var(--ord-divider); margin: 5px 4px; }
.ord-valid-hint { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ord-muted);
background: var(--ord-warn-weak); border-radius: 9px; padding: 9px 11px; margin-top: 2px; }
.ord-valid-hint.ord-ok { background: var(--ord-ok-weak); color: var(--ord-ok); }
.ord-valid-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
.ord-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.ord-badge.ord-ok { background: var(--ord-ok-weak); color: var(--ord-ok); }
.ord-badge.ord-warn { background: var(--ord-warn-weak); color: var(--ord-warn); }
.ord-badge.ord-muted { background: var(--ord-accent-weak); color: var(--ord-text-2); }
.ord-badge.ord-accent { background: var(--ord-accent-weak); color: var(--ord-accent); }
.ord-badge svg { width: 12px; height: 12px; }
.ord-panel { background: var(--ord-card); border: 1px solid var(--ord-border); border-radius: var(--ord-radius); overflow: visible; }
.ord-panel-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--ord-divider); }
.ord-search { display: flex; align-items: center; gap: 9px; flex: 1; max-width: 340px; background: var(--ord-surface);
border: 1px solid var(--ord-border); border-radius: 9px; padding: 0 12px; height: 38px; }
.ord-search svg { width: 15px; height: 15px; color: var(--ord-muted); }
.ord-search input { flex: 1; border: none; background: transparent; color: var(--ord-text); font: inherit; font-size: 13px; height: 100%; }
.ord-search input:focus { outline: none; }
.ord-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 9px;
background: var(--ord-surface); border: 1px solid var(--ord-border); color: var(--ord-text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ord-chip .ord-n { background: var(--ord-accent); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
.ord-linklike { color: var(--ord-accent); font-weight: 650; cursor: pointer; }
.ord-result-count { font-size: 12px; color: var(--ord-muted); margin-left: auto; }
.ord-filter-wrap { position: relative; }
.ord-filter-panel { position: fixed; width: 332px; z-index: 120;
background: var(--ord-card); border: 1px solid var(--ord-border-strong); border-radius: 13px;
box-shadow: var(--ord-shadow); padding: 15px; display: none;
max-height: calc(100vh - 96px); overflow-y: auto; }
.ord-filter-panel.ord-open { display: block; animation: pop .16s ease; }
.ord-fp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.ord-fp-title { font-size: 13px; font-weight: 700; }
.ord-fp-clear { background: none; border: none; color: var(--ord-accent); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; padding: 0; }
.ord-fp-field { margin-bottom: 12px; }
.ord-fp-field > label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ord-text-2); margin-bottom: 6px; }
.ord-fp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ord-fp-field input, .ord-fp-field select { width: 100%; height: 38px; border: 1px solid var(--ord-border); border-radius: 9px;
background: var(--ord-surface); color: var(--ord-text); padding: 0 11px; font: inherit; font-size: 12.5px; }
.ord-fp-field input:focus, .ord-fp-field select:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-accent-weak); }
.ord-fp-field input[type="date"] { color-scheme: dark; }
html[data-theme="light"] .ord-fp-field input[type="date"] { color-scheme: light; }
.ord-fp-foot { display: flex; gap: 9px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ord-divider); }
.ord-fp-foot .ord-btn { flex: 1; font-size: 12.5px; padding: 9px; }
.ord-active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 16px; border-bottom: 1px solid var(--ord-divider); }
.ord-active-filters .ord-lbl { font-size: 11.5px; color: var(--ord-muted); font-weight: 600; }
.ord-fchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 5px 0 11px; border-radius: 8px;
background: var(--ord-accent-weak); color: var(--ord-accent); font-size: 12px; font-weight: 600; }
.ord-fchip .ord-fk { opacity: .7; }
.ord-fchip button { border: none; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center;
width: 18px; height: 18px; border-radius: 5px; opacity: .85; }
.ord-fchip button:hover { background: var(--ord-accent); color: #fff; opacity: 1; }
.ord-fchip button svg { width: 11px; height: 11px; }
.ord-af-clear { background: none; border: none; color: var(--ord-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.ord-row-action { display: inline-flex; gap: 6px; }
.ord-mini { font-size: 12px; font-weight: 650; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--ord-border);
background: var(--ord-surface); color: var(--ord-text); cursor: pointer; }
.ord-mini:hover { border-color: var(--ord-border-strong); }
.ord-mini.ord-accent { border-color: transparent; background: var(--ord-accent-weak); color: var(--ord-accent); }
.ord-mini-danger { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; color: var(--ord-muted); }
.ord-mini-danger svg { width: 14px; height: 14px; }
.ord-mini-danger:hover { border-color: var(--ord-danger); color: var(--ord-danger); background: var(--ord-danger-weak); }
.ord-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px; padding: 64px 24px; }
.ord-empty[hidden] { display: none; }
.ord-empty svg { width: 40px; height: 40px; color: var(--ord-muted); opacity: .7; }
.ord-empty-title { font-size: 15px; font-weight: 700; }
.ord-empty-msg { font-size: 13px; color: var(--ord-muted); max-width: 360px; line-height: 1.5; }
.ord-modal-overlay { position: fixed; inset: 0; background: rgba(4,8,16,.62); backdrop-filter: blur(3px);
display: none; align-items: flex-start; justify-content: center; padding: 44px 20px; z-index: 500; overflow: auto; }
html[data-theme="light"] .ord-modal-overlay { background: rgba(40,36,30,.32); }
.ord-modal-overlay.ord-open { display: flex; animation: fade .18s ease; }
.ord-modal { width: 100%; max-width: 470px; background: var(--ord-card); border: 1px solid var(--ord-border-strong);
border-radius: 18px; box-shadow: var(--ord-shadow); overflow: hidden; animation: pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.ord-modal-head { display: flex; align-items: flex-start; gap: 13px; padding: 20px 20px 0; }
.ord-modal-head-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
background: var(--ord-accent-weak); color: var(--ord-accent); flex-shrink: 0; }
.ord-modal-head-icon svg { width: 19px; height: 19px; }
.ord-modal-head h3 { margin: 0; font-size: 16px; font-weight: 750; letter-spacing: -.01em; }
.ord-modal-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--ord-muted); }
.ord-modal-x { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
color: var(--ord-muted); cursor: pointer; display: grid; place-items: center; }
.ord-modal-x:hover { background: var(--ord-card-hover); color: var(--ord-text); }
.ord-modal-body { padding: 17px 20px 18px; max-height: 70vh; overflow: auto; }
.ord-modal-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px;
background: var(--ord-surface); border: 1px solid var(--ord-border); border-radius: 13px; padding: 15px 17px; margin-bottom: 17px; }
.ord-mh-left { min-width: 0; display: flex; align-items: center; gap: 12px; }
.ord-mh-avatar { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center;
background: var(--ord-accent-weak); color: var(--ord-accent); font-weight: 800; font-size: 15px; }
.ord-mh-client { font-size: 15px; font-weight: 730; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ord-mh-sub { font-size: 11.5px; color: var(--ord-muted); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ord-mh-sub .ord-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ord-muted); opacity: .6; }
.ord-mh-right { text-align: right; flex-shrink: 0; }
.ord-modal-hero-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ord-muted); font-weight: 700; }
.ord-modal-hero-total { font-size: 26px; font-weight: 790; letter-spacing: -.02em; margin-top: 2px; }
.ord-sec { margin-bottom: 16px; }
.ord-sec-lab { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ord-text-2); margin-bottom: 9px; }
.ord-sec-lab .ord-req { color: var(--ord-accent); }
.ord-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ord-choice { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ord-border); background: var(--ord-surface);
border-radius: 11px; padding: 12px 13px; cursor: pointer; position: relative; color: var(--ord-text); font: inherit; text-align: left; }
.ord-choice:hover { border-color: var(--ord-border-strong); }
.ord-choice .ord-ci { color: var(--ord-muted); display: grid; place-items: center; }
.ord-choice .ord-ci svg { width: 19px; height: 19px; }
.ord-choice .ord-cl { font-size: 12.5px; font-weight: 650; }
.ord-choice .ord-ck { position: absolute; top: 8px; right: 8px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
background: var(--ord-accent); color: #fff; opacity: 0; transform: scale(.6); transition: .14s; }
.ord-choice .ord-ck svg { width: 11px; height: 11px; }
.ord-choice.ord-on { border-color: var(--ord-accent); background: var(--ord-accent-weak); }
.ord-choice.ord-on .ord-ci { color: var(--ord-accent); }
.ord-choice.ord-on .ord-ck { opacity: 1; transform: none; }
.ord-sec-hint { font-size: 11.5px; color: var(--ord-muted); margin-top: 9px; }
.ord-pay-split { margin-top: 13px; display: none; }
.ord-pay-split.ord-show { display: block; }
.ord-pay-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ord-pay-inputs input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ord-pay-inputs input[type="number"]::-webkit-outer-spin-button,
.ord-pay-inputs input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ord-pay-in { display: flex; align-items: center; gap: 4px; border: 1px solid var(--ord-border); border-radius: 9px;
background: var(--ord-surface); padding: 0 11px; height: 39px; }
.ord-pay-in .ord-cur { color: var(--ord-muted); font-weight: 650; }
.ord-pay-in input { border: none; background: transparent; color: var(--ord-text); font: inherit; font-weight: 650; width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.ord-pay-in input:focus { outline: none; }
.ord-pay-in-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ord-muted); margin-right: 2px; }
.ord-meter { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin-top: 12px; background: var(--ord-border); }
.ord-meter .ord-cash { background: var(--ord-accent); } .ord-meter .ord-tr { background: var(--ord-ok); }
.ord-meter-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; }
.ord-meter-legend .ord-lc { color: var(--ord-accent); font-weight: 650; } .ord-meter-legend .ord-lt { color: var(--ord-ok); font-weight: 650; }
.ord-scount { display: flex; align-items: center; gap: 14px; }
.ord-scount-each { font-size: 12.5px; color: var(--ord-muted); }
.ord-scount-each strong { color: var(--ord-text); }
.ord-allocbar { display: flex; gap: 4px; height: 10px; margin: 2px 0 13px; }
.ord-allocbar span { background: var(--ord-accent); border-radius: 4px; opacity: .9; min-width: 8px; }
.ord-spreview { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 11px; }
.ord-scard { border: 1px solid var(--ord-border); border-radius: 12px; padding: 13px 14px; background: var(--ord-surface); }
.ord-scard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.ord-scard-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ord-eyebrow); }
.ord-scard-n { width: 21px; height: 21px; border-radius: 6px; display: grid; place-items: center; background: var(--ord-accent-weak);
color: var(--ord-accent); font-size: 11px; font-weight: 800; }
.ord-scard-share { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--ord-muted); }
.ord-scard-share .ord-bar { width: 40px; height: 5px; border-radius: 99px; background: var(--ord-border); overflow: hidden; }
.ord-scard-share .ord-bar span { display: block; height: 100%; background: var(--ord-accent); }
.ord-scard-total { font-size: 18px; font-weight: 770; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ord-scard-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--ord-divider); }
.ord-scard-line { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.ord-scard-line .ord-nm { flex: 1; min-width: 0; color: var(--ord-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-scard-line .ord-qty { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ord-accent); font-variant-numeric: tabular-nums; }
.ord-scard-line .ord-amt { flex-shrink: 0; min-width: 56px; text-align: right; color: var(--ord-muted); font-variant-numeric: tabular-nums; }
.ord-scard-count { font-size: 11px; color: var(--ord-muted); margin-top: 10px; }
.ord-balanced { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 650; color: var(--ord-ok); }
.ord-balanced svg { width: 13px; height: 13px; }
.ord-modal-foot { display: flex; gap: 10px; padding: 15px 20px; border-top: 1px solid var(--ord-divider); background: var(--ord-surface); }
.ord-modal-foot .ord-btn { flex: 1; }
.ord-btn-cancel { background: transparent; border: 1px solid var(--ord-border); color: var(--ord-text-2); }
.ord-btn-cancel:hover { border-color: var(--ord-border-strong); color: var(--ord-text); }
@media (max-width: 920px) { .ord-builder { grid-template-columns: 1fr; } .ord-rail { position: static; } }
#stockOrderSection .ord-seg-badge[hidden] { display: none; }
#stockOrderSection .ord-builder,
#stockOrderSection .ord-panel,
#stockOrderSection .ord-rule,
#stockOrderSection .ord-segnav { max-width: none; }
#stockOrderSection .ord-segnav { align-self: flex-start; margin-top: 0; }
#stockOrderSection .ord-rail { top: 0; }
#stockOrderSection .ord-rule { margin-top: 21px; margin-bottom: 21px; }
#stockOrderSection,
.ord-modal-overlay {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.003em;
font-feature-settings: "tnum" 1;
}
#stockOrderSection {
height: calc(100vh - 61px - var(--sidebar-inset, 14px) * 2);
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#stockOrderSection[hidden] { display: none; }
#stockOrderSection > #orderNewSection,
#stockOrderSection > #orderMineSection,
#stockOrderSection > #orderDraftsSection {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
#stockOrderSection > #orderNewSection,
#stockOrderSection > #orderMineSection,
#stockOrderSection > #orderDraftsSection,
.ord-modal-overlay,
.ord-modal-body {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, .30) transparent;
}
#stockOrderSection ::-webkit-scrollbar,
.ord-modal-overlay::-webkit-scrollbar,
.ord-modal-body::-webkit-scrollbar { width: 12px; height: 12px; }
#stockOrderSection ::-webkit-scrollbar-track,
.ord-modal-overlay::-webkit-scrollbar-track,
.ord-modal-body::-webkit-scrollbar-track { background: transparent; }
#stockOrderSection ::-webkit-scrollbar-thumb,
.ord-modal-overlay::-webkit-scrollbar-thumb,
.ord-modal-body::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, .28);
border-radius: 999px;
border: 3px solid transparent;
background-clip: padding-box;
}
#stockOrderSection ::-webkit-scrollbar-thumb:hover,
.ord-modal-overlay::-webkit-scrollbar-thumb:hover,
.ord-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, .46); }
html[data-theme="light"] #stockOrderSection > #orderNewSection,
html[data-theme="light"] #stockOrderSection > #orderMineSection,
html[data-theme="light"] #stockOrderSection > #orderDraftsSection,
html[data-theme="light"] .ord-modal-overlay,
html[data-theme="light"] .ord-modal-body {
scrollbar-color: rgba(31, 30, 29, .22) transparent;
}
html[data-theme="light"] #stockOrderSection ::-webkit-scrollbar-thumb,
html[data-theme="light"] .ord-modal-overlay::-webkit-scrollbar-thumb,
html[data-theme="light"] .ord-modal-body::-webkit-scrollbar-thumb { background: rgba(31, 30, 29, .20); }
html[data-theme="light"] #stockOrderSection ::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .ord-modal-overlay::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] .ord-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(31, 30, 29, .34); }
.text-dim { color: #64748b; }
.text-muted { color: #94a3b8; }
.text-warn { color: #f97316; }
.text-err-pad { color: #ef4444; padding: 16px; }
.tbl-msg { text-align: center; padding: 20px; }
.tbl-msg-err { text-align: center; padding: 20px; color: #ef4444; }
.tbl-msg-muted { text-align: center; padding: 20px; color: #94a3b8; }
.tbl-msg-lg { text-align: center; padding: 24px; color: #94a3b8; }
.tbl-msg-lg-err { text-align: center; padding: 24px; color: #ef4444; }
.tbl-msg-empty { text-align: center; padding: 18px; color: #94a3b8; font-style: italic; }
.filters.filters-bar .filter-row.tyginv-toolbar {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
}
.tyginv-toolbar { gap: 12px; }
.tyginv-imports { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tyginv-toolbar .stock-stat { white-space: nowrap; }
.tyginv-imports .btn-primary,
.tyginv-imports .btn-clear { display: inline-flex; align-items: center; gap: 8px; }
:root { --tyginv-chevron: url("data:image/svg+xml;utf8,"); }
.tyginv-upload-modal { max-width: 540px; }
.tyginv-kind-toggle { display: inline-flex; border: 1px solid var(--ord-border-strong); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.tyginv-kind-btn { padding: 7px 16px; background: transparent; border: 0; cursor: pointer; font-weight: 600; color: var(--ord-muted); font-size: 13px; transition: background .15s, color .15s; }
.tyginv-kind-btn.is-active { background: linear-gradient(180deg, var(--ord-accent), var(--ord-accent-press)); color: #fff; }
.tyginv-kind-tag { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; margin-right: 4px; letter-spacing: .02em; }
.tyginv-kind-tyg { background: #e8eef7; color: #1e3a5f; }
.tyginv-kind-jpn { background: #fdeee7; color: #b3441f; }
.tyginv-kind-suolun { background: #e5f5ee; color: #1f6b47; }
.tyginv-add-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.tyginv-add-field { display: flex; flex-direction: column; gap: 6px; }
.tyginv-add-field-grow { flex: 1 1 240px; }
.tyginv-add-field-sm { flex: 0 0 150px; }
.tyginv-add-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ord-eyebrow); }
.tyginv-add-input {
width: 100%; padding: 9px 32px 9px 11px; border-radius: var(--ord-radius-sm);
background: var(--ord-surface); color: var(--ord-text);
border: 1px solid var(--ord-border-strong); font-size: 13.5px;
transition: border-color .15s, box-shadow .15s;
appearance: none; -webkit-appearance: none;
background-image: var(--tyginv-chevron);
background-repeat: no-repeat; background-position: right 11px center;
}
.tyginv-add-input::placeholder { color: var(--ord-muted); }
.tyginv-add-input:required:invalid { color: var(--ord-muted); }
.tyginv-add-input:focus { outline: none; border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-accent-weak); }
html[data-theme="light"] .tyginv-add-input { background-color: #fff; color: #1f1e1d; border-color: #d8d6cc; }
.tyginv-field-label {
display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .09em; color: var(--ord-eyebrow); margin-bottom: 7px;
}
.tyginv-files-label { margin-bottom: 9px; }
.tyginv-req { color: var(--ord-danger); margin-left: 3px; font-weight: 700; }
.tyginv-dropzones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tyginv-dz {
position: relative; display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 4px; padding: 22px 14px 18px; cursor: pointer;
border-radius: var(--ord-radius); border: 1.5px dashed var(--ord-border-strong);
background: var(--ord-surface); color: var(--ord-text-2);
transition: border-color .16s, background .16s, box-shadow .16s, transform .16s;
}
.tyginv-dz:hover { border-color: var(--ord-accent); background: var(--ord-card-hover); }
.tyginv-dz.is-drag {
border-color: var(--ord-accent); border-style: solid;
background: var(--ord-accent-weak); box-shadow: 0 0 0 3px var(--ord-accent-weak);
transform: translateY(-1px);
}
.tyginv-dz.is-filled { border-style: solid; border-color: var(--ord-ok); background: var(--ord-ok-weak); }
.tyginv-dz-badge {
position: absolute; top: 10px; left: 10px; font-size: 9.5px; font-weight: 800;
letter-spacing: .08em; padding: 2px 7px; border-radius: 999px;
background: var(--ord-accent-weak); color: var(--ord-accent);
}
.tyginv-dz.is-filled .tyginv-dz-badge { background: var(--ord-ok-weak); color: var(--ord-ok); }
.tyginv-dz-clear {
position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; display: none;
align-items: center; justify-content: center; border: none; border-radius: 7px;
background: transparent; color: var(--ord-muted); cursor: pointer; transition: all .15s;
}
.tyginv-dz-clear:hover { background: var(--ord-danger-weak); color: var(--ord-danger); }
.tyginv-dz.is-filled .tyginv-dz-clear { display: flex; }
.tyginv-dz-icon, .tyginv-dz-check { width: 34px; height: 34px; margin-bottom: 4px; }
.tyginv-dz-icon svg, .tyginv-dz-check svg { width: 100%; height: 100%; }
.tyginv-dz-icon { color: var(--ord-muted); transition: color .16s; }
.tyginv-dz:hover .tyginv-dz-icon { color: var(--ord-accent); }
.tyginv-dz-check { display: none; color: var(--ord-ok); }
.tyginv-dz.is-filled .tyginv-dz-icon { display: none; }
.tyginv-dz.is-filled .tyginv-dz-check { display: block; }
.tyginv-dz-title { font-size: 13px; font-weight: 650; color: var(--ord-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tyginv-dz-hint { font-size: 11px; color: var(--ord-muted); }
.tyginv-dz.is-filled .tyginv-dz-hint { display: none; }
.tyginv-dz-meta { font-size: 11px; font-weight: 600; color: var(--ord-ok); }
.ord-btn:disabled { opacity: .45; cursor: not-allowed; }
.tyginv-currency-sel { flex: 0 0 120px; max-width: 120px; cursor: pointer; }
.tyginv-table tr.tyginv-flagged td { background: rgba(245, 158, 11, 0.18); }
.tyginv-match { margin-left: 6px; font-weight: 700; font-size: 11px; }
.tyginv-match-ok { color: #22c55e; }
.tyginv-match-no { color: #ef4444; }
.tyginv-match-norm { color: #f59e0b; }
.tyginv-rowsel { margin-left: 8px; vertical-align: middle; cursor: pointer; }
.tyginv-itemno { white-space: nowrap; }
.tyginv-table th[data-col="tyg_model"], .tyginv-table td[data-col="tyg_model"] { width: 110px; white-space: nowrap; }
.tyginv-table th[data-col="description"], .tyginv-table td[data-col="description"] { width: 240px; min-width: 220px; }
.tyginv-preview.tyginv-only-unmatched tbody tr:not(.tyginv-row-unmatched) { display: none; }
.tyginv-cmsel, .tyginv-gencombo {
width: 100%; min-width: 96px; max-width: 160px;
padding: 3px 6px; border-radius: 6px;
background: #0f172a; color: #e2e8f0;
border: 1px solid #475569; font-size: 12px;
}
.tyginv-cmsel { cursor: pointer; }
.tyginv-cmsel:focus, .tyginv-gencombo:focus { outline: none; border-color: #38bdf8; }
html[data-theme="light"] .tyginv-cmsel,
html[data-theme="light"] .tyginv-gencombo { background: #fff; color: #1f1e1d; border-color: #d8d6cc; }
.tyginv-cmtext {
width: 100%; min-width: 140px;
padding: 3px 6px; border-radius: 6px;
background: #0f172a; color: #e2e8f0;
border: 1px solid #475569; font-size: 12px;
}
.tyginv-cmtext:focus { outline: none; border-color: #38bdf8; }
html[data-theme="light"] .tyginv-cmtext { background: #fff; color: #1f1e1d; border-color: #d8d6cc; }
.tyginv-rowbtn { padding: 4px 12px; font-size: 12px; margin-right: 6px; }
.tyginv-empty { color: #94a3b8; padding: 24px 4px; font-size: 14px; }
.tyginv-list th, .tyginv-list td { text-align: center; }
.tyginv-list th:first-child, .tyginv-list td:first-child { text-align: left; }
.tyginv-list tbody tr.tyginv-row-clickable { cursor: pointer; }
.tyginv-list tbody tr.tyginv-row-clickable:hover { background: var(--ord-card-hover); }
.tyginv-rowbtn.tyginv-btn-confirm { color: #22c55e; }
.tyginv-rowbtn.tyginv-btn-delete { color: #ef4444; }
.tyginv-rowbtn.tyginv-btn-return { color: #f59e0b; }
.tyginv-add { display: inline-flex; align-items: center; gap: 8px; }
.tyginv-preview-modal { max-width: min(1500px, 96vw); }
.tyginv-cmwrap { display: inline-flex; align-items: center; gap: 4px; }
.tyginv-gencombowrap { display: block; }
.suppliers-table th, .suppliers-table td { text-align: left; padding: 8px 10px; }
.suppliers-table th.suppliers-debt, .suppliers-table td.suppliers-debt { text-align: right; white-space: nowrap; }
.suppliers-table .sup-c-code { width: 9%; }
.suppliers-table .sup-c-name { width: 26%; }
.suppliers-table .sup-c-tax { width: 14%; }
.suppliers-table .sup-c-form { width: 21%; }
.suppliers-table .sup-c-vat { width: 16%; }
.suppliers-table .suppliers-debt { width: 14%; }
.tyginv-meta-bar {
display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px;
padding: 12px 16px; margin-bottom: 14px;
background: #1e293b; border: 1px solid #334155; border-radius: 12px;
}
html[data-theme="light"] .tyginv-meta-bar {
background: #fff; border-color: #e8e6dc; box-shadow: 0 1px 2px rgba(31, 30, 29, 0.04);
}
.tyginv-meta-field {
display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px;
border: 1px solid var(--ord-border-strong); border-radius: var(--ord-radius-sm);
background: var(--ord-surface); transition: border-color .15s, box-shadow .15s;
}
.tyginv-meta-field:focus-within { border-color: var(--ord-accent); box-shadow: 0 0 0 3px var(--ord-accent-weak); }
.tyginv-meta-supplier { flex: 1; min-width: 220px; }
.tyginv-meta-inlabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ord-eyebrow); white-space: nowrap; }
.tyginv-meta-field .tyginv-supplier-sel {
flex: 1; width: 100%; max-width: none; border: none; background-color: transparent;
padding: 8px 20px 8px 4px;
appearance: none; -webkit-appearance: none;
background-image: var(--tyginv-chevron);
background-repeat: no-repeat; background-position: right center;
}
.tyginv-meta-field .tyginv-supplier-sel::placeholder { color: var(--ord-muted); }
.tyginv-meta-field .tyginv-supplier-sel:required:invalid { color: var(--ord-muted); }
.tyginv-meta-field .tyginv-supplier-sel:focus { outline: none; box-shadow: none; }
.tyginv-meta-field .tyginv-currency-sel { flex: 0 0 auto; width: auto; min-width: 64px; }
html[data-theme="light"] .tyginv-meta-field .tyginv-supplier-sel {
background-color: transparent;
background-image: var(--tyginv-chevron);
}
.tyginv-meta-divider { align-self: stretch; width: 1px; background: var(--ord-divider); margin: 2px 0; }
.tyginv-meta-tools { display: inline-flex; align-items: center; gap: 6px; }
.ord-modal-foot.tyginv-foot { align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.tyginv-foot-fields { display: flex; align-items: center; gap: 10px 14px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.tyginv-foot-field { flex: 1 1 0; min-width: 130px; }
.tyginv-foot-input { flex: 1 1 0; min-width: 0; max-width: 100%; border: none; background: transparent; color: inherit; padding: 8px 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tyginv-foot-input:focus { outline: none; }
.tyginv-foot-input::placeholder { color: var(--ord-muted); }
.tyginv-foot-open { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--ord-accent); cursor: pointer; border-radius: 6px; }
.tyginv-foot-open:hover:not(:disabled) { background: var(--ord-accent-weak); }
.tyginv-foot-open:disabled { opacity: .35; cursor: default; }
.tyginv-foot-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.tyginv-foot-actions .ord-btn { flex: 0 0 auto; width: auto; padding: 8px 12px; font-size: 13px; }
.tyginv-foot-actions .ord-btn svg { width: 15px; height: 15px; }
.tyginv-action-btn { border-color: var(--ord-accent); color: var(--ord-accent); }
.tyginv-action-btn:hover:not(:disabled) { background: var(--ord-accent-weak); border-color: var(--ord-accent); }
.tyginv-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.tyginv-list td[data-col="drive"] { text-align: center; }
.tyginv-drive-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ord-border); border-radius: 8px; background: transparent; transition: border-color .15s, background .15s; }
.tyginv-drive-link:hover { border-color: var(--ord-border-strong); background: var(--ord-accent-weak); }
.tyginv-supplier-sel {
flex: 1; max-width: 360px; padding: 6px 8px; border-radius: 6px;
background: #0f172a; color: #e2e8f0; border: 1px solid #475569; font-size: 13px;
}
.tyginv-supplier-sel:disabled { opacity: 0.7; cursor: not-allowed; }
html[data-theme="light"] .tyginv-supplier-sel { background: #fff; color: #1f1e1d; border-color: #d8d6cc; }
.tyginv-addgrp { padding: 2px 7px; font-size: 13px; font-weight: 700; line-height: 1; border-radius: 6px;
border: 1px solid var(--ord-border); background: var(--ord-card); color: var(--ord-accent); cursor: pointer; }
.tyginv-addgrp:hover { border-color: var(--ord-accent); background: var(--ord-card-hover); }
.tyg-ng-modes { margin-bottom: 6px; }
.tyg-ng-field { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.tyg-ng-field[hidden] { display: none; }
.tyg-ng-field label { font-size: 12px; color: var(--ord-muted); }
.tyg-ng-field input, .tyg-ng-field select { width: 100%; padding: 8px 10px; font-size: 13px; }
.se-add-overlay { z-index: 600; }
.se-add-btn { margin-left: auto; }
#saleEditAddModal .ord-modal.se-add-modal {
max-width: min(1200px, 96vw); width: 100%; background: var(--ord-bg); border-radius: 16px;
display: flex; flex-direction: column; height: 86vh; }
.se-add-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px;
border-bottom: 1px solid var(--ord-border); }
.se-add-titleblock { display: flex; align-items: center; gap: 12px; }
.se-add-title { font-size: 16px; font-weight: 750; letter-spacing: -.01em; color: var(--ord-text); }
.se-add-wh { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ord-accent);
background: var(--ord-accent-weak); border: 1px solid var(--ord-border); border-radius: 20px; padding: 3px 11px; }
.se-add-wh svg { opacity: .8; }
.se-add-head .tracking-modal-x { margin-left: auto; }
.se-add-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; }
.se-add-search { flex: 2 1 200px; }
.se-add-sel { flex: 1 1 130px; }
.se-add-tablewrap { flex: 1 1 auto; overflow: auto; margin: 0 10px; min-height: 120px;
border: 1px solid var(--ord-border); border-radius: 10px; }
table.se-add-tbl { border-collapse: collapse; width: 100%; }
.se-add-tbl th { position: sticky; top: 0; z-index: 1; background: var(--ord-surface); color: var(--ord-muted);
text-transform: uppercase; font-size: 10px; letter-spacing: .05em; font-weight: 700; padding: 9px 10px;
text-align: left; border-bottom: 1px solid var(--ord-border); }
.se-add-tbl th.r, .se-add-tbl td.r { text-align: right; }
.se-add-tbl th.c, .se-add-tbl td.c { text-align: center; }
.se-add-tbl td { padding: 8px 10px; font-size: 12.5px; color: var(--ord-text); border-bottom: 1px solid var(--ord-border); }
.se-add-tbl tbody tr:nth-child(even) td { background: var(--ord-card); }
.se-add-tbl tbody tr:hover td { background: var(--ord-card-hover); }
.se-add-tbl tr.se-add-in td { opacity: .6; }
.se-add-name { max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-add-mono { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ord-muted); }
.se-add-soft { color: var(--ord-muted); }
.se-add-stock { color: var(--ord-success, #4ade80); font-weight: 700; }
.se-add-price { color: var(--ord-amount, #c96442); font-weight: 700; white-space: nowrap; }
.se-add-retail { color: var(--ord-success, #4ade80); font-weight: 700; white-space: nowrap; }
.se-add-row-btn { background: transparent; border: 1px solid var(--ord-accent); color: var(--ord-accent);
border-radius: 7px; padding: 4px 14px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.se-add-row-btn:hover { background: var(--ord-accent-weak); }
.se-add-tag { display: inline-block; color: var(--ord-success, #4ade80); font-size: 11.5px; font-weight: 600; }
.se-add-none { text-align: center; color: var(--ord-muted); font-size: 12.5px; padding: 22px 10px; }
.se-add-more { color: var(--ord-muted); font-size: 11.5px; padding: 8px 18px 0; text-align: center; }
.se-add-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
border-top: 1px solid var(--ord-border); }
.se-add-count { color: var(--ord-muted); font-size: 12.5px; }