/* obliv.SYNC CSS */
@font-face {
    font-family: 'Bernhard Modern';
    src: url('../fonts/BernhardModern.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bm-bg: #ffffff;
    --bm-bg-hover: #F1F1F4;
    --bm-bg-card: #ffffff;
    --bm-bg-sidebar: #FAFBFC;
    --bm-bg-surface: #FAFBFC;
    --bm-text-1: #292A2F;
    --bm-text-2: #8F91A0;
    --bm-text-3: #A0A2AE;
    --bm-text-4: #E0E0E3;
    --bm-border: #E0E0E3;
    --bm-border-strong: #CBCCD3;
    --bm-primary: #4F67FF;
    --bm-primary-border: #4D5ECD;
    --bm-primary-light: #EDEFFF;
    --bm-success: #37B047;
    --bm-success-light: #e6f4ea;
    --bm-warning: #F5A623;
    --bm-warning-light: #fef7e0;
    --bm-danger: #F0443B;
    --bm-danger-light: #fce8e6;
    --bm-sidebar-w: 250px;
    --bm-header-h: 70px;
    --bm-radius: 6px;
    --bm-radius-lg: 12px;
    --bm-shadow: 0 1px 1px rgba(0,0,0,0.1);
    --bm-shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --bm-transition: 0.2s ease;
    --font-main: 'SUIT Variable', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--bm-text-1);
    background: var(--bm-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Global form elements */
input[type="checkbox"], input[type="radio"] { accent-color: var(--bm-primary); cursor: pointer; }
::selection { background: var(--bm-primary-light); color: var(--bm-text-1); }

/* Scrollbar (subtle BoxHero style) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bm-text-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bm-text-3); }

/* Login & Space Selection — white bg + dark card */
.login-overlay, .team-select-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: #ffffff;
    transition: opacity 0.5s ease;
}
.team-select-overlay { z-index: 9998; }
.brand { font-family: 'Bernhard Modern', serif; letter-spacing: 0.5px; }

/* Dark card container */
.auth-card {
    background: #1a1a18; border-radius: 24px;
    padding: 56px 44px; width: 100%; max-width: 420px;
    opacity: 0; animation: authFadeUp 0.6s ease forwards;
}

/* Login */
.login-logo-area { text-align: center; margin-bottom: 48px; }
.login-logo {
    font-family: 'Bernhard Modern', serif; font-size: 44px; font-weight: 400;
    color: #f0ece4; letter-spacing: 2px; margin-bottom: 10px;
}
.login-sub { font-size: 12px; color: #6a6860; letter-spacing: 3px; }
.login-form-area { margin-bottom: 40px; }
.login-field {
    display: flex; align-items: center;
    border-bottom: 1px solid #3a3a36;
    transition: border-color 0.3s;
}
.login-field:focus-within { border-bottom-color: #6a7a62; }
.login-field-label {
    font-size: 11px; color: #5a5850; letter-spacing: 0.5px;
    flex-shrink: 0; width: 80px; padding: 16px 12px 16px 0;
}
.login-field-input {
    display: block; flex: 1; padding: 16px 0; background: transparent;
    border: none; font-size: 15px;
    font-family: var(--font-main); color: #f0ece4; outline: none;
}
.login-field-input::placeholder { color: #706e64; }
.login-btn {
    width: 100%; padding: 18px 0; background: transparent;
    border: none; border-bottom: 1px solid #333330; font-size: 15px;
    font-family: var(--font-main); color: #6a6860; letter-spacing: 4px;
    cursor: pointer; transition: color 0.3s, border-color 0.3s;
}
.login-btn:hover { color: #f0ece4; border-bottom-color: #f0ece4; }
.login-btn:disabled { color: #3a3a36; border-bottom-color: #2a2a28; cursor: default; }
.login-error { text-align: center; font-size: 12px; color: #8a5a4a; margin-top: 16px; min-height: 16px; }

/* Space Selection */
.space-header { text-align: center; margin-bottom: 44px; }
.space-logo {
    font-family: 'Bernhard Modern', serif; font-size: 32px; font-weight: 400;
    color: #f0ece4; letter-spacing: 2px; margin-bottom: 10px;
}
.space-sub { font-size: 13px; color: #6a6860; letter-spacing: 1px; }
.space-list {
    display: flex; flex-direction: column; gap: 12px;
    margin-bottom: 24px;
}
.space-card {
    position: relative; display: flex; align-items: center; gap: 18px;
    padding: 22px 20px; border-radius: 14px; background: #242422;
    cursor: pointer; transition: background 0.3s, box-shadow 0.3s; overflow: hidden;
}
.space-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 14px;
    opacity: 0; transition: opacity 0.4s;
    background: linear-gradient(135deg, rgba(106,122,98,0.15) 0%, rgba(240,236,228,0.05) 100%);
}
.space-card:hover::before { opacity: 1; }
.space-card:hover {
    background: #2a2a28;
    box-shadow: 0 0 20px rgba(106,122,98,0.12), inset 0 0 20px rgba(106,122,98,0.04);
}
.space-card-img {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    background: #333330; overflow: hidden; position: relative; z-index: 1;
}
.space-card-img img { width: 100%; height: 100%; object-fit: cover; }
.space-card-name {
    flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: #f0ece4;
    position: relative; z-index: 1;
}
.space-card-arrow {
    color: #3a3a36; font-size: 12px; position: relative; z-index: 1;
    transition: color 0.3s, transform 0.3s;
}
.space-card:hover .space-card-arrow { color: #6a7a62; transform: translateX(3px); }
.space-logout {
    display: block; margin: 0 auto; background: none; border: none;
    font-size: 12px; color: #5a5850; cursor: pointer; padding: 8px 16px;
    font-family: var(--font-main); letter-spacing: 1px; transition: color 0.3s;
}
.space-logout:hover { color: #f0ece4; }

@keyframes authFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Team Create Modal */
.team-modal-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4);
}
.team-modal-dialog {
    background: #fff; border-radius: 12px; width: 100%; max-width: 480px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.team-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--bm-border);
}
.team-modal-title { font-size: 16px; font-weight: 700; }
.team-modal-close {
    background: none; border: none; color: var(--bm-text-2);
    font-size: 16px; cursor: pointer; padding: 4px;
}
.team-modal-close:hover { color: var(--bm-text-1); }
.team-modal-body { padding: 24px; }
.team-modal-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--bm-text-1);
    margin-bottom: 8px;
}
.team-modal-input {
    width: 100%; padding: 10px 14px; border: 1px solid var(--bm-primary);
    border-radius: 6px; font-size: 14px; font-family: var(--font-main);
    outline: none;
}
.team-modal-footer {
    display: flex; justify-content: flex-end;
    padding: 16px 24px; border-top: 1px solid var(--bm-border);
}

/* App Shell */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.header {
    position: fixed; top: 0; left: 0; right: 0; height: var(--bm-header-h);
    background: var(--bm-bg-card);
    border-bottom: 1px solid var(--bm-border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 40px 10px 8px; z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-right { display: flex; align-items: center; gap: 12px; }
.header-team-selector {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; padding: 4px 8px 4px 0; border-radius: 8px;
    position: relative; user-select: none;
    transition: background 0.15s;
}
.header-team-selector:hover { background: var(--bm-bg-hover); }
.header-team-badge {
    width: 36px; height: 36px; border-radius: 10px; background: var(--bm-primary);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0;
}
.header-team-name { font-size: 14px; font-weight: 500; color: var(--bm-text-1); }
.header-team-arrow {
    font-size: 12px; color: var(--bm-text-3); margin-left: 2px;
}
.header-team-dropdown {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 320px; background: #fff;
    border: 1px solid var(--bm-border); border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12); z-index: 200;
    overflow: hidden;
}
.header-team-selector.open .header-team-dropdown { display: block; }
/* Search */
.team-dropdown-search {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--bm-border);
}
.team-dropdown-search i { font-size: 14px; color: var(--bm-text-3); flex-shrink: 0; }
.team-dropdown-search-input {
    border: none; outline: none; font-size: 14px; width: 100%;
    color: var(--bm-text-1); background: transparent;
}
.team-dropdown-search-input::placeholder { color: var(--bm-text-3); }
/* Team list */
.team-dropdown-list { padding: 8px 0; max-height: 300px; overflow-y: auto; }
.header-team-dropdown-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; cursor: pointer;
    color: var(--bm-text-1); transition: background 0.15s;
}
.header-team-dropdown-item:hover { background: var(--bm-bg-hover); }
.team-dropdown-item-left {
    display: flex; align-items: center; gap: 12px; min-width: 0;
}
.header-team-dropdown-item .team-badge-sm {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; flex-shrink: 0;
}
.team-dropdown-item-info { min-width: 0; }
.team-dropdown-item-name {
    font-size: 15px; font-weight: 600; color: var(--bm-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.team-dropdown-item-stats {
    font-size: 12px; color: var(--bm-text-3); margin-top: 2px;
}
.team-dropdown-check {
    font-size: 16px; color: var(--bm-primary); flex-shrink: 0; margin-left: 12px;
}
.header-team-dropdown-divider {
    height: 1px; background: var(--bm-border); margin: 0;
}
.header-team-dropdown-link {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 16px; cursor: pointer; font-size: 14px; font-weight: 500;
    color: var(--bm-primary); transition: background 0.15s;
}
.header-team-dropdown-link:hover { background: var(--bm-bg-hover); }
.header-team-dropdown-link i { font-size: 13px; }
.header-user { font-size: 13px; color: var(--bm-text-2); }
.header-btn {
    background: none; border: none; color: var(--bm-text-2);
    font-size: 16px; cursor: pointer; padding: 6px;
    border-radius: var(--bm-radius); transition: all var(--bm-transition);
}
.header-btn:hover { color: var(--bm-text-1); background: var(--bm-bg-hover); }
.sidebar-toggle { display: none; }
.sidebar-collapse-btn {
    display: none; position: fixed; top: calc(var(--bm-header-h) - 16px); left: calc(var(--bm-sidebar-w) - 12px);
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: 50%; width: 24px; height: 24px;
    cursor: pointer; color: var(--bm-text-2); font-size: 10px;
    transition: all var(--bm-transition); z-index: 100;
}
.sidebar-collapse-btn:hover { color: var(--bm-primary); border-color: var(--bm-primary); }
@media (min-width: 769px) { .sidebar-collapse-btn { display: flex; align-items: center; justify-content: center; } }
.sidebar {
    position: fixed; top: var(--bm-header-h); left: 0; bottom: 0;
    width: var(--bm-sidebar-w); background: var(--bm-bg-sidebar);
    border-right: 1px solid var(--bm-border);
    padding: 0; overflow-y: auto; z-index: 90;
    transition: width 0.2s ease;
}
.sidebar.collapsed { width: 60px; padding: 12px 4px 48px; }
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .nav-group-header span,
.sidebar.collapsed .nav-group-arrow,
.sidebar.collapsed .nav-divider { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-item i { width: auto; font-size: 18px; }
.sidebar.collapsed .nav-group-header { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .nav-group-header i:first-child { width: auto; font-size: 18px; }
.sidebar.collapsed .nav-sub { padding-left: 0 !important; }
.sidebar.collapsed .nav-item.active::before { left: 4px; width: calc(100% - 8px); }
.sidebar.collapsed ~ .sidebar-collapse-btn { left: calc(60px - 12px); }
.sidebar.collapsed ~ .page-container { margin-left: 60px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 0 0 0 20px; height: 40px; position: relative;
    color: var(--bm-text-1); text-decoration: none;
    font-size: 14px;
    transition: all var(--bm-transition);
}
.nav-item i { width: 20px; text-align: center; font-size: 16px; color: var(--bm-text-2); }
.nav-item:hover { background: transparent; }
.nav-item:hover::before { content: ''; position: absolute; left: 8px; top: 2px; width: calc(100% - 16px); height: 36px; background: var(--bm-bg-hover); border-radius: var(--bm-radius); z-index: -1; }
.nav-item.active { color: var(--bm-primary); font-weight: 500; background: transparent; }
.nav-item.active i { color: var(--bm-primary); }
.nav-item.active::before {
    content: ''; position: absolute; left: 8px; top: 2px;
    width: calc(100% - 16px); height: 36px;
    background: var(--bm-primary-light); border-radius: var(--bm-radius);
    z-index: -1;
}
.nav-divider { height: 1px; background: var(--bm-border); margin: 8px 14px; }

/* Nav Group (Expandable) */
.nav-group { margin-bottom: 2px; }
.nav-group-header {
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px 0 20px; height: 40px; cursor: pointer; user-select: none;
    color: var(--bm-text-1); font-size: 14px;
    transition: all var(--bm-transition);
}
.nav-group-header:hover { background: var(--bm-bg-hover); }
.nav-group-header i:first-child { width: 20px; text-align: center; font-size: 16px; color: var(--bm-text-2); }
.nav-group-header span { flex: 1; }
.nav-group-arrow { font-size: 10px; transition: transform var(--bm-transition); }
.nav-group.open .nav-group-arrow { transform: rotate(180deg); }
.nav-group-items { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.nav-group.open .nav-group-items { max-height: 200px; }
.nav-sub { padding-left: 44px !important; }

.app-body { display: flex; margin-top: var(--bm-header-h); position: relative; }
.page-container {
    flex: 1; margin-left: var(--bm-sidebar-w);
    padding: 0 40px 80px; min-height: calc(100vh - var(--bm-header-h));
    min-width: 0;
}

/* Page Header */
.page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    height: 84px; padding-bottom: 16px;
}
.page-title { font-size: 20px; font-weight: 700; line-height: 32px; }
.page-actions { display: flex; gap: 8px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 16px; height: 36px; border: none; border-radius: var(--bm-radius);
    font-size: 14px; font-weight: 500; font-family: var(--font-main);
    cursor: pointer; transition: all var(--bm-transition); line-height: 1;
}
.btn-primary { background: var(--bm-primary); color: #fff; border: 1px solid var(--bm-primary-border); box-shadow: var(--bm-shadow); }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled, .btn-primary[disabled] {
    color: #cbccd3 !important; background: #f1f1f4 !important;
    border: 1px solid #cbccd3 !important; cursor: not-allowed;
    box-shadow: none; opacity: 1;
}
.btn-success { background: var(--bm-success); color: #fff; }
.btn-success:hover { opacity: 0.9; }
.btn-danger { background: var(--bm-danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-danger-outline {
    background: #fff; color: #f0443b;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    min-width: 86px; padding: 7px 16px;
}
.btn-danger-outline:hover { background: #fef2f2; }
.btn-ghost {
    background: #fff; color: var(--bm-text-1);
    border: 1px solid var(--bm-border-strong); box-shadow: var(--bm-shadow);
}
.btn-ghost:hover { background: var(--bm-bg-hover); color: var(--bm-text-1); }
.btn-sm { padding: 0 10px; height: 28px; font-size: 12px; }
.btn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px; height: 36px; border-radius: var(--bm-radius);
    border: 1px solid var(--bm-border); background: var(--bm-bg-card);
    font-size: 14px; color: var(--bm-text-1); cursor: pointer;
    transition: all var(--bm-transition); white-space: nowrap;
}
.btn-outline:hover { border-color: var(--bm-text-3); background: var(--bm-bg-hover); }
.filter-toggle-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px; height: 36px; border-radius: var(--bm-radius);
    border: 1px solid var(--bm-border); background: var(--bm-bg-card);
    font-size: 14px; color: var(--bm-text-1); cursor: pointer;
    transition: all var(--bm-transition); white-space: nowrap;
}
.filter-toggle-btn:hover { border-color: var(--bm-text-3); }
.filter-toggle-btn i { font-size: 13px; color: var(--bm-text-2); }
.filter-toggle-btn .chevron { font-size: 10px; margin-left: 2px; }
.btn-icon {
    width: 32px; height: 32px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    color: var(--bm-text-2); cursor: pointer; transition: all var(--bm-transition);
}
.btn-icon:hover { background: var(--bm-bg-hover); color: var(--bm-text-1); }

/* Text-only button with icon (BoxHero: only-text-btn) */
.only-text-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 4px 8px;
    font-size: 14px; font-family: var(--font-main); color: var(--bm-text-2);
    cursor: pointer; white-space: nowrap; transition: color var(--bm-transition);
}
.only-text-btn:hover { color: var(--bm-text-1); }
.only-text-btn i { font-size: 14px; }

/* Split Button */
.split-btn { display: inline-flex; position: relative; }
.split-btn > .btn:first-child { border-radius: var(--bm-radius) 0 0 var(--bm-radius); }
.split-btn-toggle {
    border-radius: 0 var(--bm-radius) var(--bm-radius) 0 !important;
    padding: 0 10px !important; border-left: 1px solid rgba(255,255,255,0.25) !important;
    min-width: auto;
}
.split-btn .dropdown-menu { left: auto; right: 0; }
.split-btn .dropdown-item { padding: 10px 14px; font-size: 13px; text-align: left; white-space: nowrap; display: flex; align-items: center; gap: 8px; justify-content: flex-start; }
.split-btn .dropdown-item i { width: 16px; text-align: center; flex: none; }

/* Card */
.card {
    background: var(--bm-bg-card); border-radius: var(--bm-radius-lg);
    box-shadow: var(--bm-shadow); border: 1px solid var(--bm-border);
}
/* BoxHero style: listing tables & empty states render without card chrome */
.card:has(> .table-wrap),
.card:has(> .empty-state),
.card:has(> table) {
    box-shadow: none; border: none; border-radius: 0; background: transparent;
}
.card-body { padding: 20px; }

/* Table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 10px 14px; text-align: left;
    border-bottom: 1px solid var(--bm-border);
    white-space: nowrap;
}
tfoot td { border-bottom: none; }
th {
    font-size: 12px; font-weight: 600; color: var(--bm-text-2);
    background: var(--bm-bg-surface);
    position: sticky; top: 0; z-index: 1;
}
td { font-size: 13px; transition: background 0.1s ease; }
tr:hover td { background: rgba(79,103,255,0.04); }
tr.low-stock td { background: var(--bm-danger-light); }
tr.low-stock:hover td { background: #f9d5d3; }
.qty-cell { font-weight: 600; font-variant-numeric: tabular-nums; }
.qty-low { color: var(--bm-danger); }

/* Form */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--bm-text-2); margin-bottom: 4px;
}
.form-input, .form-select {
    width: 100%; padding: 0 12px; height: 36px;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main);
    outline: none; transition: border var(--bm-transition);
    background: #fff; color: var(--bm-text-1);
}
select.form-input, .form-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 32px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%238f91a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 12px 8px;
}
select.form-input:disabled {
    background-color: #fff; color: var(--bm-text-1); opacity: 1;
    cursor: pointer;
}
.form-textarea {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main);
    outline: none; transition: border var(--bm-transition);
    background: #fff;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--bm-primary); }
.form-textarea { resize: vertical; min-height: 60px; }
.form-row { display: flex; gap: 12px; }
.form-row > .form-group { flex: 1; }

/* Dialog */
.dialog-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s ease;
}
.dialog-backdrop.show { opacity: 1; }
.dialog {
    background: var(--bm-bg-card); border-radius: var(--bm-radius-lg);
    box-shadow: var(--bm-shadow-lg); width: 90%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    transform: translateY(-10px); transition: transform 0.15s ease;
}
.dialog-backdrop.show .dialog { transform: translateY(0); }
.dialog-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--bm-border);
}
.dialog-title { font-size: 18px; font-weight: 700; flex: 1; }
.dialog-close {
    background: none; border: none; font-size: 20px;
    color: var(--bm-text-3); cursor: pointer; padding: 4px;
    border-radius: var(--bm-radius); transition: all var(--bm-transition);
}
.dialog-close:hover { color: var(--bm-text-1); background: var(--bm-bg-hover); }
.dialog-body { padding: 24px; }
.dialog-footer {
    display: flex; justify-content: center; gap: 8px;
    padding: 16px 24px; border-top: 1px solid var(--bm-border);
}
.dialog-wide { max-width: 720px; }

/* Drawer (서랍형 패널) */
.drawer-backdrop {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.4);
    display: flex; justify-content: flex-end;
    opacity: 0; transition: opacity 0.2s ease;
    pointer-events: none;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.drawer {
    background: var(--bm-bg-card); width: 860px; max-width: 100vw;
    height: 100vh; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}
.drawer-backdrop.show .drawer { transform: translateX(0); }
.drawer-backdrop.show .drawer.drawer-stacked {
    transform: translateX(-60px);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 28px; border-bottom: 1px solid var(--bm-border); flex: none;
}
.drawer-title { font-size: 18px; font-weight: 700; }
.drawer-close {
    background: none; border: none; font-size: 20px;
    color: var(--bm-text-3); cursor: pointer; padding: 4px;
    border-radius: var(--bm-radius); transition: all var(--bm-transition);
}
.drawer-close:hover { color: var(--bm-text-1); background: var(--bm-bg-hover); }
.drawer-body { padding: 28px; flex: 1; overflow-y: auto; }
.drawer-body th, .dialog-body th { position: static; background: none; }
.drawer-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 28px; border-top: 1px solid var(--bm-border); flex: none;
}

/* Permission checkboxes */
.perm-group-title {
    font-size: 14px; font-weight: 600; margin-top: 24px; margin-bottom: 8px;
}
.perm-group-title:first-child { margin-top: 0; }
.perm-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.perm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; font-size: 14px;
}
.perm-item label {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; font-weight: 500; white-space: nowrap; min-width: 160px;
}
.perm-item label input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--bm-primary);
    cursor: pointer; flex: none;
}
.perm-item .perm-desc {
    font-size: 13px; color: var(--bm-text-2); flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.perm-columns {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px;
}

/* Filter / Search */
.filter-bar {
    display: flex; align-items: center; height: 64px;
    border-bottom: 1px solid var(--bm-border); gap: 12px;
}

/* History filter bar (BoxHero style) */
.history-filter-bar {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px; padding-bottom: 22px; flex-wrap: wrap;
}
.history-filter-dropdown {
    position: absolute; top: 100%; left: 0; z-index: 100;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    min-width: 160px; padding: 4px 0;
}
.hf-option.disabled { color: var(--bm-text-3); pointer-events: none; opacity: 0.5; }
.hf-option {
    display: flex; align-items: center; gap: 8px;
    padding: 0 15px; height: 32px; font-size: 14px; cursor: pointer;
    color: var(--bm-text-1);
}
.hf-option:hover { background: var(--bm-bg-hover); }
.hf-option i { width: 16px; text-align: center; color: var(--bm-text-2); font-size: 13px; }
.history-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: var(--bm-radius);
    background: var(--bm-primary-light); color: var(--bm-primary);
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.history-filter-chip:hover { opacity: 0.8; }
.history-filter-chip i { font-size: 10px; }
.search-box { position: relative; max-width: 440px; min-width: 200px; flex: 1; }
.search-box input {
    width: 100%; padding: 0 12px 0 36px; height: 36px;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main); outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.search-box input:focus { border-color: var(--bm-primary); }
.search-box i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--bm-text-3); font-size: 14px;
}

/* Search tag box (BoxHero style) */
.search-tag-box {
    position: relative; display: flex; align-items: center; flex-wrap: wrap;
    gap: 4px; min-height: 36px; padding: 4px 32px 4px 36px;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    background: #fff; cursor: text; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.search-tag-box:focus-within { border-color: var(--bm-primary); }
.search-tag-box > .search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--bm-text-3); font-size: 14px; pointer-events: none;
}
.search-tag-box input {
    flex: 1; min-width: 80px; border: none; outline: none;
    font-size: 14px; font-family: var(--font-main);
    padding: 4px 0; background: transparent; color: var(--bm-text-1);
}
.search-tag-box input::placeholder { color: var(--bm-text-3); }
.search-tag {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 4px 2px 8px; border-radius: 4px;
    background: var(--bm-primary-light); color: var(--bm-primary);
    font-size: 13px; font-weight: 500; white-space: nowrap;
}
.search-tag button {
    background: none; border: none; color: var(--bm-primary);
    font-size: 13px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.search-tag button:hover { opacity: 0.6; }
.search-tag-clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--bm-text-3);
    font-size: 18px; cursor: pointer; padding: 0; line-height: 1;
}
.search-tag-clear:hover { color: var(--bm-text-1); }
.search-tag { animation: tagIn .15s ease; }
@keyframes tagIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
.search-suggest {
    display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    z-index: 300; overflow: hidden;
}
.search-tag-box:focus-within .search-suggest { display: block; }
.search-suggest-item {
    padding: 10px 16px; font-size: 14px; color: var(--bm-text-2);
    cursor: pointer; text-align: center;
}
.search-suggest-item:hover { background: var(--bm-bg-hover); }
.search-suggest-item b { color: var(--bm-text-1); font-weight: 500; }

/* Barcode scan button */
.btn-barcode-scan {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--bm-radius);
    border: 1px solid var(--bm-border); background: var(--bm-bg-card);
    color: var(--bm-text-2); cursor: pointer; flex-shrink: 0;
    transition: all var(--bm-transition);
}
.btn-barcode-scan:hover { border-color: var(--bm-text-3); color: var(--bm-text-1); }

.filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 500; cursor: pointer;
    border: 1px solid var(--bm-border-strong);
    background: var(--bm-bg-card); color: var(--bm-text-2);
    transition: all var(--bm-transition);
}
.filter-chip:hover { border-color: var(--bm-primary); color: var(--bm-primary); }
.filter-chip.active { background: var(--bm-primary); color: #fff; border-color: var(--bm-primary); }

/* Tabs */
.tab-bar {
    display: flex; align-items: stretch; border-bottom: 1px solid var(--bm-border);
    margin-bottom: 16px; margin-top: 10px; gap: 26px;
}
.tab-item {
    position: relative; display: flex; align-items: center;
    padding: 13px 0 16px; font-size: 15px; line-height: 18px; font-weight: 500;
    color: var(--bm-text-1); cursor: pointer;
    border: none; background: none; font-family: var(--font-main);
    transition: all 0.15s;
}
.tab-item:hover { background: none; }
.tab-item::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px;
    background: transparent; transition: background 0.15s;
}
.tab-item.active { color: var(--bm-primary); font-weight: 600; }
.tab-item.active::after { background: var(--bm-primary); }

/* Data Center Spreadsheet Table (BoxHero mirror) */
.dc-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0;
}
.dc-toolbar-right {
    display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.dc-text-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; font-size: 13px; color: var(--bm-text-2);
    background: none; border: none; cursor: pointer;
    font-family: var(--font-main); white-space: nowrap;
    border-radius: var(--bm-radius); transition: all 0.15s;
}
.dc-text-btn:hover { color: var(--bm-text-1); background: var(--bm-bg-hover); }
.dc-text-btn i { font-size: 12px; }
.dc-table-wrap {
    overflow-x: auto; border-top: 1px solid var(--bm-border);
    background: #fff;
}
.dc-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; table-layout: auto;
}
.dc-table thead { position: sticky; top: 0; z-index: 2; }
.dc-table th {
    padding: 10px 14px; font-weight: 600; font-size: 12px;
    color: var(--bm-text-2); text-align: left; white-space: nowrap;
    background: #fafafa; border-bottom: 1px solid var(--bm-border);
    user-select: none;
}
.dc-th-sortable { cursor: pointer; }
.dc-th-sortable:hover { color: var(--bm-text-1); }
.dc-th-check { width: 40px; text-align: center; padding-left: 12px; }
.dc-th-photo { width: 56px; text-align: center; }
.dc-table td {
    padding: 10px 14px; border-bottom: 1px solid #f3f3f3;
    vertical-align: middle; color: var(--bm-text-1);
}
.dc-td-check { width: 40px; text-align: center; padding-left: 12px; }
.dc-td-photo { width: 56px; text-align: center; }
.dc-row { cursor: pointer; transition: background 0.1s; }
.dc-row:hover td { background: rgba(79,103,255,0.03); }
.dc-row.selected td { background: var(--bm-primary-light); }
.dc-row.low-stock td:first-child { box-shadow: inset 3px 0 0 var(--bm-danger); }
.dc-thumb {
    width: 36px; height: 36px; border-radius: 4px;
    object-fit: cover; display: block; margin: 0 auto;
    background: #f5f5f5;
}
.dc-thumb-empty {
    width: 36px; height: 36px; border-radius: 4px;
    background: #f5f5f5; margin: 0 auto;
}
/* Footer — BoxHero: "보기 N" left, "X-Y / Z < >" right */
.dc-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 4px; font-size: 13px; color: var(--bm-text-2);
    border-top: 1px solid var(--bm-border);
}
.dc-footer-left {
    display: flex; align-items: center; gap: 6px;
}
.dc-footer-right {
    display: flex; align-items: center; gap: 8px;
}
.dc-page-select {
    padding: 3px 6px; font-size: 13px; border: 1px solid var(--bm-border);
    border-radius: 4px; background: #fff; color: var(--bm-text-1);
    font-family: var(--font-main); cursor: pointer;
}
.dc-custom-select { position: relative; display: inline-block; }
.dc-custom-select-btn {
    padding: 4px 10px; font-size: 13px; border: 1px solid var(--bm-border);
    border-radius: 6px; background: #fff; color: var(--bm-text-1);
    font-family: var(--font-main); cursor: pointer; display: inline-flex;
    align-items: center; gap: 4px; min-width: 52px; justify-content: center;
    transition: border-color 0.15s;
}
.dc-custom-select-btn:hover { border-color: var(--bm-primary); }
.dc-custom-select-menu {
    display: none; position: absolute; bottom: calc(100% + 4px); left: 0;
    background: #fff; border: 1px solid var(--bm-border);
    border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    min-width: 64px; z-index: 50; overflow: hidden;
}
.dc-custom-select-menu.show { display: block; }
.dc-custom-select-item {
    padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--bm-text-1);
    transition: background 0.1s;
}
.dc-custom-select-item:hover { background: var(--bm-bg-surface); }
.dc-custom-select-item.active { color: var(--bm-primary); font-weight: 600; }
.dc-range-info { font-variant-numeric: tabular-nums; }
.dc-page-btn {
    width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bm-border); border-radius: 4px; background: #fff;
    color: var(--bm-text-2); cursor: pointer; font-size: 12px;
    transition: all 0.15s;
}
.dc-page-btn:hover:not(:disabled) { border-color: var(--bm-primary); color: var(--bm-primary); }
.dc-page-btn:disabled { opacity: 0.3; cursor: default; }
.dc-batch-bar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px; background: var(--bm-primary); color: #fff;
    border-radius: 24px; box-shadow: 0 4px 20px rgba(79,103,255,0.35);
    animation: batchSlideUp 0.2s ease; font-size: 13px; white-space: nowrap;
}
.dc-batch-bar .btn { color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,0.3) !important; }
.dc-batch-bar .btn:hover { background: rgba(255,255,255,0.15) !important; }

/* DC Sort Icons */
.dc-sort-icon {
    margin-left: 4px; font-size: 10px; opacity: 0.2;
    transition: opacity 0.15s;
}
.dc-th-sortable:hover .dc-sort-icon { opacity: 0.5; }
.dc-sort-icon.active { opacity: 1; color: var(--bm-primary); }

/* DC Column Settings Panel */
.dc-col-panel {
    display: none; position: absolute; top: 100%; right: 0; z-index: 50;
    width: 260px; max-height: 400px; overflow-y: auto;
    background: #fff; border: 1px solid var(--bm-border);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 8px 0; margin-top: 4px;
}
.dc-col-panel.show { display: block; }
.dc-col-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer; font-size: 14px;
    color: var(--bm-text-1); user-select: none;
    transition: background 0.1s;
}
.dc-col-item:hover { background: #f7f7f7; }
.dc-col-item input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--bm-primary);
    flex-shrink: 0; cursor: pointer;
}
.dc-col-item span { flex: 1; }
.dc-col-drag {
    color: #ccc; font-size: 12px; cursor: grab; flex-shrink: 0;
}

/* Table Enhancements */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(79,103,255,0.06); }
tr.selected td { background: var(--bm-primary-light); }

/* Pagination */
.pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px; font-size: 13px; color: var(--bm-text-2);
}
.pagination button {
    height: 32px; padding: 0 12px; border: 1px solid var(--bm-border-strong);
    border-radius: var(--bm-radius); background: #fff; color: var(--bm-text-1);
    font-size: 13px; font-family: var(--font-main); cursor: pointer;
    transition: all var(--bm-transition);
}
.pagination button:hover:not(:disabled) { border-color: var(--bm-primary); color: var(--bm-primary); }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* Batch action bar (BoxHero: centered floating pill) */
.batch-bar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 20px;
    background: var(--bm-primary); color: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(79,103,255,0.35);
    animation: batchSlideUp 0.2s ease;
}
@keyframes batchSlideUp { from { transform: translateY(100%) translateX(-50%); } to { transform: translateY(0) translateX(-50%); } }
.batch-bar-count { font-size: 14px; color: #fff; margin-right: 4px; white-space: nowrap; }
.batch-bar .btn { background: rgba(255,255,255,0.2); color: #fff; border: none; box-shadow: none; font-size: 13px; height: 32px; }
.batch-bar .btn:hover { background: rgba(255,255,255,0.35); }
.batch-bar .btn-danger { background: #fff; color: var(--bm-danger); border: none; }
.batch-bar .btn-danger:hover { opacity: 0.9; }
.product-list-item { display: flex; align-items: center; padding: 10px 16px; cursor: pointer; gap: 12px; border-bottom: 1px solid var(--bm-bg-2); transition: background .1s; }
.product-list-item:hover { background: var(--bm-bg-2); }
.product-list-item.selected { background: var(--bm-primary-light); }
.product-list-item.selected:hover { background: #dce0ff; }
@media (max-width: 768px) {
    .batch-bar {
        padding: 8px 14px; gap: 6px; bottom: 68px;
        left: 12px; right: 12px; transform: none;
        border-radius: 16px;
        animation: batchSlideUpMobile 0.2s ease;
    }
    @keyframes batchSlideUpMobile { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .batch-bar .btn { font-size: 12px; height: 30px; padding: 0 10px; white-space: nowrap; flex-shrink: 0; }
    .batch-bar .btn span.batch-btn-label { display: none; }
    .batch-bar-count { font-size: 12px; flex-shrink: 0; }
}

/* Loading Skeleton */
.skeleton { background: linear-gradient(90deg, var(--bm-bg-hover) 25%, #e8e8ec 50%, var(--bm-bg-hover) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--bm-radius); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-row { display: flex; gap: 12px; padding: 12px 0; }
.skeleton-cell { height: 16px; border-radius: 4px; }

/* Category Badge */
.cat-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
}

/* BoxHero-style form sections (발주서/판매서 작성) */
.bh-form-section { max-width: 430px; margin-top: 40px; }
.bh-form-section:first-of-type { margin-top: 20px; }
.bh-form-block-title {
    font-size: 16px; font-weight: 600; margin-bottom: 8px;
    display: flex; align-items: center; gap: 7px;
    padding-bottom: 8px; border-bottom: 1px solid var(--bm-border);
}
.bh-form-row {
    display: flex; align-items: center; margin-top: 25px;
}
.bh-form-row + .bh-form-row { margin-top: 25px; }
.bh-form-label {
    flex: none; width: 135px; font-size: 14px;
    padding-top: 8px; padding-right: 10px;
    word-break: break-all; text-wrap: pretty; align-self: flex-start;
}
/* Toggle switch (BoxHero style) */
.bh-toggle {
    position: relative; display: inline-flex; align-items: center;
    min-height: 36px; cursor: pointer;
}
.bh-toggle input { display: none; }
.bh-toggle-slider {
    position: relative; width: 36px; height: 20px;
    background: #8f91a0; border-radius: 15px;
    transition: background 0.3s ease-in-out;
}
.bh-toggle-slider::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff;
    border-radius: 50%; transition: transform 0.3s ease-in-out;
}
.bh-toggle input:checked + .bh-toggle-slider {
    background: var(--bm-primary);
}
.bh-toggle input:checked + .bh-toggle-slider::after {
    transform: translateX(100%);
}

/* Transaction Page (BoxHero style) */
.tx-form-section {
    width: fit-content; margin-top: 20px;
    display: flex; flex-direction: column; gap: 12px;
}
.tx-form-row {
    display: flex; align-items: center;
}
.tx-form-label {
    width: 95px; flex-shrink: 0; font-size: 14px; font-weight: 500;
}
.tx-form-input {
    width: 220px; margin-left: 10px;
}
.tx-form-input .form-input,
.tx-form-input .form-select {
    width: 100%; height: 36px;
}
.tx-form-input .tx-partner-wrap {
    display: flex; gap: 4px;
}
.tx-required { color: var(--bm-danger); margin-left: 2px; }

/* Product list bar */
.tx-product-bar {
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; margin-top: 25px; border-bottom: 1px solid var(--bm-border);
}
.tx-product-bar-title { font-size: 14px; font-weight: 500; }
.tx-product-bar-actions { display: flex; align-items: center; gap: 8px; }
.tx-product-bar-actions .btn { font-size: 14px; font-weight: 400; }

/* Transaction table */
.tx-table { width: 100%; border-collapse: separate; table-layout: fixed; }
.tx-table thead th {
    font-size: 14px; font-weight: 500; color: var(--bm-text-1);
    padding: 1px 1px 1px 30px; height: 52px;
    border-bottom: 1px solid var(--bm-border);
    text-align: left; white-space: nowrap;
    background: var(--bm-bg-card); position: static;
}
.tx-table thead th:first-child { width: 36px; padding: 0; }
.tx-table thead th:nth-child(3) { width: 180px; text-align: left; padding-left: 10px; }
.tx-table thead th:nth-child(4) { width: 240px; padding-left: 23px; }
.tx-table tbody td {
    padding: 1px 1px 1px 30px; height: 52px;
    border-bottom: 1px solid var(--bm-border);
    vertical-align: middle; font-size: 14px;
}
.tx-table tbody td:first-child { width: 36px; padding: 0; text-align: center; }
.tx-table tbody td:nth-child(3) { text-align: left; padding-left: 10px; }
.tx-table tbody td:nth-child(4) { padding-left: 23px; }
.tx-table tbody tr:last-child td { border-bottom: none; }
.tx-table tbody .tx-cart-remove {
    background: none; border: none; color: var(--bm-text-3);
    cursor: pointer; font-size: 18px; padding: 0;
}
.tx-table tbody .tx-cart-remove:hover { color: var(--bm-danger); }
.tx-table tfoot td {
    padding: 0; height: 52px; border: none !important; vertical-align: middle;
}
.tx-footer-count { font-size: 16px; font-weight: 500; padding-left: 30px; }
.tx-footer-total { font-size: 16px; font-weight: 500; text-align: right; padding-right: 4px; }
/* Cart product cell */
.tx-cart-product {
    display: flex; align-items: center; width: 100%; min-width: 0;
}
.tx-cart-product-info {
    display: flex; flex-direction: column; flex: 1; min-width: 0; margin-left: 10px; gap: 2px;
}
.tx-cart-name {
    font-size: 14px; line-height: 20px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all;
}
.tx-cart-attrs {
    font-size: 12px; color: var(--bm-text-2); line-height: 16px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all;
}

/* Search cell in table */
.tx-search-cell { position: relative; max-width: 500px; }
.tx-search-cell i {
    position: absolute; top: 50%; left: 10px; transform: translateY(-50%);
    color: var(--bm-text-3); font-size: 16px; line-height: 0;
}
.tx-search-cell input {
    width: 100%; padding: 7px 9px 7px 32px; height: 36px;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main); outline: none;
}
.tx-search-cell input:focus { border-color: var(--bm-primary); }

/* Product search results dropdown */
#txSearchResults, #tfSearchResults {
    position: absolute; z-index: 100; left: 0; right: 0;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: 0 4px 16px rgba(0,0,0,.12);
    max-height: 360px; overflow-y: auto;
}
#txSearchResults:empty, #tfSearchResults:empty {
    display: none;
}
.tx-search-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    cursor: pointer;
}
.tx-search-item:hover { background: var(--bm-bg-hover, #f5f5f7); }
.tx-search-name {
    font-size: 14px; font-weight: 400; color: #292A2F; line-height: 20px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-search-attrs {
    font-size: 12px; color: #8F91A0; line-height: 16px; margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-search-qty {
    flex: none; font-size: 16px; font-weight: 500; color: var(--bm-primary);
    min-width: 40px; text-align: right;
}
.tx-search-photo {
    width: 36px; height: 36px; border-radius: 4px; flex: none;
    background: #e9eaec; overflow: visible; position: relative;
}
.tx-search-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.tx-search-badge {
    position: absolute; top: -6px; left: -6px; min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 50%; background: var(--bm-primary); color: #fff;
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}

/* Bulk add search dropdown */
.bulk-search-dropdown {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: 0 4px 16px rgba(0,0,0,.10);
    max-height: 260px; overflow-y: auto; margin-top: 4px;
}
.bulk-dd-hint {
    padding: 16px; text-align: center; font-size: 13px; color: var(--bm-text-3);
}
.bulk-dd-item {
    padding: 8px 12px; cursor: pointer; display: flex; align-items: center;
    border-bottom: 1px solid var(--bm-border);
}
.bulk-dd-item:last-child { border-bottom: none; }
.bulk-dd-item:hover { background: #e8f0fe; }

/* Bulk add search tags */
.bulk-tag-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bulk-tag {
    display: flex; align-items: center; gap: 4px; padding: 3px 8px;
    background: var(--bm-primary-light); color: var(--bm-primary); border-radius: 4px;
    font-size: 12px; font-weight: 500;
}
.bulk-tag button {
    background: none; border: none; cursor: pointer; color: var(--bm-primary);
    font-size: 10px; padding: 0 2px; display: flex; align-items: center;
}

/* Table footer row */
/* Total quantity - type-specific colors (#7) */
.tx-total-qty { margin-left: 10px; color: var(--bm-primary); font-weight: 700; font-size: 18px; }
.tx-total-qty.out { color: var(--bm-danger); }
.tx-total-qty.adjust { color: var(--bm-success); }
.tx-total-qty.transfer { color: var(--bm-warning); }

/* Quantity input in table */
.tx-qty-cell input[type="number"] {
    width: 100%; height: 36px; text-align: left;
    padding: 7px 9px; border: 1px solid var(--bm-border-strong);
    border-radius: var(--bm-radius); font-size: 14px;
    font-family: var(--font-main); outline: none;
}
.tx-qty-cell { position: relative; }
.tx-qty-cell input[type="number"]:focus { border-color: var(--bm-primary); }
/* Stock overflow warning */
tr.tx-stock-warn > td { background: #fef9ee; }
.tx-qty-cell input.stock-exceeded { border-color: #f59e0b !important; background: #fffbeb; }
.tx-qty-cell input.stock-exceeded:focus { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.tx-stock-warn-msg {
    position: absolute; right: 8px; bottom: calc(100% - 2px);
    background: #f59e0b; color: #fff; font-size: 12px; font-weight: 500;
    padding: 4px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 2;
}
.tx-stock-warn-msg::after {
    content: ''; position: absolute; bottom: -5px; right: 16px;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #f59e0b;
}
.tx-adjust-current { font-size: 14px; font-weight: 600; color: var(--bm-text-1); white-space: nowrap; flex: none; margin-left: auto; }
.tx-adjust-arrow { font-size: 16px; color: var(--bm-success); margin: 0 10px; flex: none; }

/* Memo box with focus ring (#8) */
.tx-memo-box {
    margin-top: 30px; border: 1px solid var(--bm-border-strong);
    border-radius: 8px; display: flex; flex-direction: column; overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tx-memo-box:focus-within {
    border-color: var(--bm-primary);
    box-shadow: 0 0 0 3px rgba(79, 103, 255, 0.1);
}
.tx-memo-box textarea {
    border: none; outline: none; padding: 8px; resize: vertical;
    flex: auto; min-height: 98px; font-size: 14px;
    font-family: var(--font-main); line-height: 1.5;
}
.tx-file-drop {
    cursor: pointer; background: var(--bm-bg-hover);
    padding: 6px 10px; font-size: 12px; color: var(--bm-text-2);
    border-top: 1px dashed var(--bm-border);
}
.tx-file-drop input { position: fixed; top: -100vh; width: 1px; height: 1px; overflow: hidden; }
.tx-image-preview {
    margin-top: 8px; position: relative; display: inline-block;
}
.tx-image-preview img {
    max-width: 120px; max-height: 90px; border-radius: var(--bm-radius);
    border: 1px solid var(--bm-border); object-fit: cover;
}
.tx-image-preview .tx-image-remove {
    position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
    border-radius: 50%; background: var(--bm-danger); color: #fff;
    border: none; font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* Bottom buttons (#6) */
.tx-bottom-buttons { display: flex; gap: 8px; height: 76px; align-items: center; }
.tx-btn-complete {
    min-width: 86px; height: 40px; padding: 0 20px;
    background: var(--bm-bg-hover); color: var(--bm-text-3);
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    font-size: 14px; font-weight: 500; cursor: default;
}
.tx-btn-complete.active {
    background: var(--bm-primary); color: #fff;
    border-color: var(--bm-primary-border); cursor: pointer;
}
.tx-btn-complete.active:hover { opacity: 0.9; }
.tx-btn-draft {
    min-width: 86px; height: 40px; padding: 0 20px;
    background: #fff; color: var(--bm-text-1);
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 14px; font-weight: 500; cursor: pointer;
}
.tx-btn-draft:hover { background: var(--bm-bg-hover); }

/* Toast */
.toast-container {
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    display: flex; flex-direction: column; gap: 8px;
}
.toast {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: var(--bm-radius);
    background: var(--bm-text-1); color: #fff;
    font-size: 13px; font-weight: 500;
    box-shadow: var(--bm-shadow-lg);
    animation: toastIn 0.3s ease;
    min-width: 280px; max-width: 420px;
}
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-msg { flex: 1; line-height: 1.4; }
.toast-close {
    background: none; border: none; color: rgba(255,255,255,0.5);
    cursor: pointer; font-size: 14px; padding: 2px; flex-shrink: 0;
}
.toast-close:hover { color: #fff; }
.toast.success { background: var(--bm-success); }
.toast.error { background: var(--bm-danger); }
.toast.leaving { animation: toastOut 0.2s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px); } }

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--bm-text-2); margin-bottom: 0;
    padding-top: 14px; padding-left: 0; letter-spacing: -0.02em; font-weight: 500;
}
.breadcrumb-item { color: var(--bm-text-2); }
.breadcrumb-item + .breadcrumb-item::before { content: '\203A'; margin-right: 4px; color: var(--bm-text-3); }
.breadcrumb-item a { color: var(--bm-text-2); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--bm-primary); }
.breadcrumb + .page-header { height: 44px; padding-bottom: 16px; }

/* Empty State (BoxHero: centered text with subtle description) */
.empty-state { text-align: center; padding: 100px 20px; color: var(--bm-text-2); }
.empty-state i { font-size: 40px; margin-bottom: 16px; display: block; color: var(--bm-text-4); }
.empty-state p { font-size: 14px; line-height: 1.8; white-space: pre-line; }
.empty-state .btn { margin-top: 20px; }

/* Transaction title underline (#1) — removed */
.tx-title-bar { border-bottom: none !important; }
.tx-title-bar.out { border-bottom: none !important; }
.tx-title-bar.adjust { border-bottom: none !important; }
.tx-title-bar.transfer { border-bottom: none !important; }
.tx-title-bar.transfer ~ .tx-form-section .tx-form-input { width: 320px; }
.tx-title-bar.transfer ~ .tx-form-section .tx-date-wrap { width: 100%; }

/* Help icon next to title (#2) */
.tx-help-icon {
    color: var(--bm-success); font-size: 16px; margin-left: 10px; cursor: pointer;
    vertical-align: middle;
}
.page-help-icon {
    color: var(--bm-success); font-size: 16px; margin-left: 10px; cursor: pointer;
    vertical-align: middle; text-decoration: none;
}

/* Date field wrapper (#3) */
.tx-date-wrap {
    position: relative; width: 220px; display: flex; align-items: center;
}
.tx-date-display {
    width: 100%; height: 36px; padding: 7px 36px 7px 9px;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main); outline: none;
    background: #fff; color: var(--bm-text-1); cursor: pointer;
}
.tx-date-display::placeholder { color: var(--bm-text-2); }
.tx-date-display:focus { border-color: var(--bm-primary); }
.tx-date-btn {
    position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--bm-text-2);
    cursor: pointer; font-size: 14px; border-radius: 0 var(--bm-radius) var(--bm-radius) 0;
}
.tx-date-btn:hover { color: var(--bm-text-1); }
.tx-date-hidden {
    position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%;
    cursor: pointer; z-index: 1;
}

/* Custom select styling (#4) */
.bh-select {
    width: 220px; height: 36px; padding: 7px 28px 7px 12px;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main); outline: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238F91A0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    color: var(--bm-text-1); cursor: pointer;
}
.bh-select:focus { border-color: var(--bm-primary); }

/* Custom combobox dropdown (BoxHero style) */
.bh-combobox {
    position: relative; display: inline-block; width: 100%;
}
.bh-combobox-trigger {
    position: relative; width: 100%; text-align: left;
    border: 1px solid var(--bm-border-strong); border-radius: 6px;
    background: #fff; cursor: pointer;
    padding: 7px 26px 7px 9px;
    font-size: 14px; font-family: var(--font-main);
    color: var(--bm-text-1); outline: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 20px; min-height: 36px;
}
.bh-combobox-trigger:focus,
.bh-combobox-trigger.open {
    border-color: var(--bm-primary);
}
.bh-combobox-arrow {
    position: absolute; top: 10px; right: 10px;
    width: 16px; height: 16px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%238f91a0' d='M4.389 7c-.32 0-.503-.371-.31-.632l3.11-4.21a.387.387 0 01.623 0l3.11 4.21c.192.26.01.632-.31.632H4.389zm6.222 2c.32 0 .503.371.31.632l-3.11 4.21a.387.387 0 01-.623 0l-3.11-4.21C3.888 9.37 4.069 9 4.389 9h6.223z'/%3E%3C/svg%3E") no-repeat center;
    background-size: 16px;
}
.bh-combobox-panel {
    display: none; position: fixed;
    max-height: 240px; overflow-y: auto;
    background: #fff; border: 1px solid var(--bm-border-strong);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 9999; padding: 4px 0;
}
.bh-combobox-panel.show { display: block; }
.bh-combobox-search {
    display: flex; align-items: center; padding: 6px 8px;
    border-bottom: 1px solid var(--bm-border); margin-bottom: 2px;
}
.bh-combobox-search input {
    border: none; outline: none; width: 100%; font-size: 13px;
    font-family: var(--font-main); color: var(--bm-text-1);
    padding: 2px 4px; background: transparent;
}
.bh-combobox-search input::placeholder { color: var(--bm-text-3); }
.bh-combobox-search i { color: var(--bm-text-3); font-size: 13px; margin-right: 6px; }
.bh-combobox-option {
    display: flex; align-items: center;
    padding: 7px 12px; font-size: 14px; color: var(--bm-text-1);
    cursor: pointer; white-space: nowrap;
}
.bh-combobox-option > span {
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
}
.bh-combobox-option:hover { background: var(--bm-bg-hover); }
.bh-combobox-option.selected {
    color: var(--bm-primary); font-weight: 500;
    background: var(--bm-primary-light);
}
.bh-combobox-check {
    margin-left: auto; font-size: 13px; color: var(--bm-primary);
}

/* Action buttons - no border style (#5) */
.tx-action-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 9px; height: 36px; border: 1px solid #cbccd3; border-radius: 6px;
    font-size: 14px; font-weight: 400; font-family: var(--font-main);
    cursor: pointer; transition: all var(--bm-transition); line-height: 1;
    background: #fff; color: var(--bm-text-1); box-shadow: none;
}
.tx-action-btn:hover { background: var(--bm-bg-hover); }

/* Reset button text-only style (#10) */
.tx-reset-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 14px; font-weight: 500; color: var(--bm-text-2);
    font-family: var(--font-main);
}
.tx-reset-btn:hover { color: var(--bm-text-1); }

/* Info Banner (BoxHero style) */
.info-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; margin-bottom: 20px;
    background: var(--bm-primary-light); border-radius: var(--bm-radius);
    font-size: 13px; color: var(--bm-text-1);
}
.info-banner i { color: var(--bm-primary); font-size: 15px; flex-shrink: 0; }
.info-banner a { color: var(--bm-primary); font-weight: 600; }

/* Upload Zone */
.upload-zone {
    border: 2px dashed var(--bm-border-strong); border-radius: var(--bm-radius);
    padding: 16px; text-align: center; cursor: pointer;
    transition: all var(--bm-transition); position: relative;
}
.upload-zone:hover { border-color: var(--bm-primary); background: var(--bm-primary-light); }
.upload-zone.drag-over { border-color: var(--bm-primary); background: var(--bm-primary-light); }
.upload-placeholder { color: var(--bm-text-3); }
.upload-placeholder i { font-size: 28px; margin-bottom: 8px; display: block; }
.upload-placeholder div { font-size: 13px; }
.upload-hint { font-size: 11px; color: var(--bm-text-3); margin-top: 4px; }
.upload-preview {
    max-width: 200px; max-height: 160px; object-fit: contain;
    border-radius: var(--bm-radius); display: block; margin: 0 auto;
}

/* Settings */
.settings-section { margin-bottom: 32px; }
.settings-section-title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; font-weight: 700; margin-bottom: 0;
    padding: 0 0 12px;
}
.settings-list {
    list-style: none;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius-lg);
    overflow: hidden;
}
.settings-list-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--bm-border);
    transition: background var(--bm-transition);
}
.settings-list-item:last-child { border-bottom: none; }
.settings-list-item:hover { background: var(--bm-bg-surface); }
.settings-item-left { display: flex; align-items: center; gap: 10px; }
.settings-item-color { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.settings-item-name { font-size: 14px; }
.settings-item-meta { font-size: 12px; color: var(--bm-text-2); margin-left: 8px; }
.settings-item-actions { display: flex; gap: 4px; }

/* History (BoxHero split-view) */
.history-split {
    display: flex; margin-top: 0; min-height: calc(100vh - var(--bm-header-h) - 160px);
    border-top: 1px solid var(--bm-border);
}
.history-list {
    width: 50%; min-width: 340px; max-width: 560px;
    border-right: 1px solid var(--bm-border);
    overflow-y: auto; max-height: calc(100vh - var(--bm-header-h) - 160px);
}
.history-card {
    padding: 16px 20px; border-bottom: 1px solid var(--bm-border);
    cursor: pointer; transition: background var(--bm-transition);
}
.history-card:hover { background: var(--bm-bg-hover); }
.history-card.active { background: var(--bm-primary-light); }
.history-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 6px;
}
.history-card-type {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 600;
}
.history-card-type i { font-size: 14px; }
.history-card-type.in { color: var(--bm-primary); }
.history-card-type.in i { color: var(--bm-primary); }
.history-card-type.out { color: var(--bm-danger); }
.history-card-type.out i { color: var(--bm-danger); }
.history-card-type.adjust { color: var(--bm-success); }
.history-card-type.adjust i { color: var(--bm-success); }
.history-card-type.transfer { color: var(--bm-warning); }
.history-card-type.transfer i { color: var(--bm-warning); }
.history-card-meta {
    font-size: 12px; color: var(--bm-text-2); text-align: right; line-height: 1.4;
}
.history-card-summary {
    font-size: 13px; color: var(--bm-text-1); margin-bottom: 2px;
}
.history-card-detail {
    font-size: 12px; color: var(--bm-text-2); line-height: 1.5;
}
.history-card-loc {
    display: inline-flex; align-items: center;
    margin-top: 6px; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 600;
}
.history-card-loc.to { background: #c8e6c9; color: #2e7d32; }
.history-card-loc.from { background: #ffe0b2; color: #e65100; }
.history-card-loc-name { font-size: 13px; color: var(--bm-text-1); margin-left: 6px; }
.history-card.deleted { opacity: 0.5; }
.history-card.deleted .history-card-summary,
.history-card.deleted .history-card-detail { text-decoration: line-through; }
.history-card-status { font-size: 11px; font-weight: 500; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.history-card-status.deleted { background: var(--bm-danger-light, #fde8e8); color: var(--bm-danger); }
.history-card-status.edited { background: var(--bm-primary-light); color: var(--bm-primary); }
.history-detail-panel {
    flex: 1; padding: 24px 32px; overflow-y: auto;
    max-height: calc(100vh - var(--bm-header-h) - 160px);
}
.history-detail-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--bm-text-3); font-size: 14px;
}
.history-detail-title {
    font-size: 22px; font-weight: 600; padding-bottom: 10px;
    margin-bottom: 20px;
}
.history-detail-title.in { color: var(--bm-primary); border-bottom: 2px solid var(--bm-primary); }
.history-detail-title.out { color: var(--bm-danger); border-bottom: 2px solid var(--bm-danger); }
.history-detail-title.adjust { color: var(--bm-success); border-bottom: 2px solid var(--bm-success); }
.history-detail-title.transfer { color: var(--bm-warning); border-bottom: 2px solid var(--bm-warning); }
.history-detail-info {
    display: grid; grid-template-columns: 70px 1fr; gap: 8px 16px;
    font-size: 14px; margin-bottom: 24px;
}
.history-detail-info dt { color: var(--bm-text-2); font-weight: 400; }
.history-detail-info dd { color: var(--bm-text-1); }
.history-detail-actions {
    display: flex; gap: 8px; margin-bottom: 20px;
}
.history-detail-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; font-size: 14px; font-weight: 500;
    border-top: 1px solid var(--bm-border);
}
.history-detail-total { font-weight: 600; }
.history-detail-total.in { color: var(--bm-primary); }
.history-detail-total.out { color: var(--bm-danger); }
.history-detail-total.adjust { color: var(--bm-success); }
.history-detail-total.transfer { color: var(--bm-warning); }
@media (max-width: 768px) {
    .history-split { flex-direction: column; }
    .history-list { width: 100%; max-width: none; max-height: 50vh; border-right: none; border-bottom: 1px solid var(--bm-border); }
    .history-detail-panel { max-height: none; padding: 16px; }
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar-toggle { display: block; background: none; border: none; font-size: 18px; color: var(--bm-text-1); cursor: pointer; }
    .sidebar {
        transform: translateX(-100%); transition: transform 0.2s ease; z-index: 200;
        box-shadow: 4px 0 16px rgba(0,0,0,0.1);
    }
    .sidebar.open { transform: translateX(0); }
    .page-container { margin-left: 0; padding: 16px; }
    .page-title { font-size: 18px; }
    .dialog { width: 95%; max-width: none; }
    .form-row { flex-direction: column; gap: 0; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .search-box { min-width: auto; }
    .tab-bar { overflow-x: auto; gap: 16px; }
    .tab-item { white-space: nowrap; padding: 10px 0; font-size: 13px; }
    .dc-toolbar { flex-wrap: wrap; gap: 6px; }
    .dc-toolbar-right { margin-left: 0; width: 100%; justify-content: flex-end; }
    .dc-table-wrap { margin: 0 -16px; }
    .dc-footer { padding: 10px 0; font-size: 12px; }
    .dc-batch-bar { bottom: 70px; padding: 8px 16px; font-size: 12px; gap: 8px; }
    .split-btn .btn { font-size: 12px; padding: 0 12px; }
    .popover { right: -20px; min-width: 200px; }
    .date-range-picker { left: auto; right: -40px; padding: 16px; }
    .drp-body { flex-direction: column; gap: 12px; }
    .drp-calendar { width: 100%; }
    .drp-presets { flex-direction: row; flex-wrap: wrap; }
    .hf-filter-panel { width: 260px; }
}

/* Mobile Tabs */
.mobile-tabs {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    height: 56px; background: var(--bm-bg-card);
    border-top: 1px solid var(--bm-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
    justify-content: space-around; align-items: center;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-tab {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 0;
    color: var(--bm-text-3); text-decoration: none;
    font-size: 10px; font-weight: 500; min-width: 56px;
    border: none; background: none; cursor: pointer;
    font-family: var(--font-main);
    transition: color var(--bm-transition);
    -webkit-tap-highlight-color: transparent;
}
.mobile-tab i { font-size: 20px; }
.mobile-tab.active { color: var(--bm-primary); }

/* Mobile More Sheet */
.mobile-more-sheet { display: none; position: fixed; inset: 0; z-index: 300; }
.mobile-more-sheet.open { display: block; }
.mobile-more-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.mobile-more-panel {
    position: absolute; bottom: 56px; left: 0; right: 0;
    background: var(--bm-bg-card); border-radius: var(--bm-radius-lg) var(--bm-radius-lg) 0 0;
    padding: 8px 0 env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); transition: transform 0.25s ease;
    max-height: 60vh; overflow-y: auto;
}
.mobile-more-sheet.open .mobile-more-panel { transform: translateY(0); }
.mobile-more-header {
    padding: 12px 20px 8px; font-size: 13px; font-weight: 600;
    color: var(--bm-text-2); border-bottom: 1px solid var(--bm-border);
}
.mobile-more-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; color: var(--bm-text-1); text-decoration: none;
    font-size: 15px; transition: background var(--bm-transition);
    -webkit-tap-highlight-color: transparent;
}
.mobile-more-item:active { background: var(--bm-bg-hover); }
.mobile-more-item i { width: 24px; text-align: center; font-size: 16px; color: var(--bm-text-2); }
.mobile-more-item.active { color: var(--bm-primary); }
.mobile-more-item.active i { color: var(--bm-primary); }
.mobile-more-divider { height: 1px; background: var(--bm-border); margin: 4px 16px; }

@media (max-width: 768px) {
    .mobile-tabs { display: flex; }
    .page-container { padding-bottom: 72px !important; }
    .header { padding: 0 12px; }
    .header-team-name { display: none; }
    .toast-container { bottom: 72px; right: 12px; }
}

/* Order Status Badge (BoxHero-style pill) */
.order-status-badge {
    display: inline-block; padding: 3px 10px; border-radius: 10px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.os-draft { background: #F1F1F4; color: #73748C; }
.os-ordered { background: #E8ECFF; color: var(--bm-primary); }
.os-partial { background: #FFF3E0; color: #E67E22; }
.os-received { background: #E8F5E9; color: #2E7D32; }
.os-shipped { background: #E8F5E9; color: #2E7D32; }
.os-cancelled { background: #FDEAEA; color: #D32F2F; }

/* Pagination Bar (BoxHero-style) */
.pagination-bar {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 0; font-size: 13px; color: var(--bm-text-2);
}
.pagination-info { font-size: 13px; color: var(--bm-text-2); margin: 0 4px; }

/* Analytics */
.analytics-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.analytics-grid-2 {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 16px; margin-bottom: 20px;
}
.analytics-stat-card .stat-label {
    font-size: 12px; font-weight: 600; color: var(--bm-text-2); margin-bottom: 4px;
}
.analytics-stat-card .stat-value {
    font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.analytics-low-list { display: flex; flex-direction: column; gap: 6px; }
.analytics-low-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px; background: var(--bm-danger-light); border-radius: var(--bm-radius);
}
.analytics-low-name { font-size: 13px; font-weight: 500; }
.analytics-low-qty { font-size: 13px; font-weight: 700; color: var(--bm-danger); }
.analytics-summary-row { display: flex; gap: 12px; }
.analytics-summary-item {
    flex: 1; padding: 16px; border-radius: var(--bm-radius); text-align: center;
}
.analytics-summary-item.in { background: var(--bm-success-light); }
.analytics-summary-item.out { background: var(--bm-danger-light); }
.analytics-summary-item.adjust { background: var(--bm-warning-light); }
.analytics-summary-item .summary-type { font-size: 12px; font-weight: 600; color: var(--bm-text-2); }
.analytics-summary-item .summary-count { font-size: 20px; font-weight: 700; margin: 4px 0; }
.analytics-summary-item .summary-qty { font-size: 13px; font-weight: 600; }
.analytics-summary-item.in .summary-count { color: var(--bm-success); }
.analytics-summary-item.out .summary-count { color: var(--bm-danger); }
.analytics-summary-item.adjust .summary-count { color: var(--bm-warning); }
.analytics-summary-item.in .summary-qty { color: var(--bm-success); }
.analytics-summary-item.out .summary-qty { color: var(--bm-danger); }
.analytics-summary-item.adjust .summary-qty { color: var(--bm-warning); }
.chart-container { position: relative; height: 240px; margin-top: 16px; }

@media (max-width: 768px) {
    .analytics-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-grid-2 { grid-template-columns: 1fr; }
    .analytics-summary-row { flex-direction: column; }
}

/* Z-Layer System */
/* z-100: header/sidebar, z-200: dropdown, z-400: popover, z-1000: modal, z-1100: confirm, z-2000: toast */

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 4px;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border-strong);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    min-width: 140px; z-index: 200; overflow: hidden;
}
.dropdown-menu.show { display: block; }
.dropdown-item {
    padding: 8px 14px; font-size: 13px; cursor: pointer;
    white-space: nowrap; display: flex; align-items: center; gap: 8px;
    transition: background var(--bm-transition);
}
.dropdown-item i { width: 16px; text-align: center; flex: none; }
.dropdown-item:hover { background: var(--bm-bg-hover); }

/* Popover */
.popover-anchor { position: relative; display: inline-block; }
.popover {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 6px;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    z-index: 400; min-width: 220px;
}
.popover.show { display: block; }
.popover-header {
    padding: 10px 14px; border-bottom: 1px solid var(--bm-border);
    font-size: 13px; font-weight: 600; color: var(--bm-text-1);
}
.popover-body { padding: 8px 0; max-height: 320px; overflow-y: auto; }
.popover-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; font-size: 13px; cursor: pointer;
    transition: background var(--bm-transition);
}
.popover-item:hover { background: var(--bm-bg-hover); }
.popover-item input[type="checkbox"] { accent-color: var(--bm-primary); }
.popover-footer {
    padding: 8px 14px; border-top: 1px solid var(--bm-border);
    display: flex; justify-content: flex-end; gap: 6px;
}

/* Date Range Picker */
.date-range-picker {
    display: none; position: absolute; left: 0; top: 100%; margin-top: 6px;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    z-index: 400; padding: 16px;
}
.date-range-picker.show { display: block; }
.drp-body { display: flex; gap: 16px; align-items: flex-start; }
.drp-calendar { width: 240px; }
.drp-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drp-month-label { font-size: 16px; font-weight: 600; }
.drp-nav { background: none; border: none; cursor: pointer; padding: 6px 10px; color: var(--bm-text-2); font-size: 14px; border-radius: 4px; }
.drp-nav:hover { background: var(--bm-bg-hover); }
.drp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--bm-text-3); margin-bottom: 6px; }
.drp-weekdays .drp-sun { color: var(--bm-danger); }
.drp-weekdays .drp-sat { color: #3b82f6; }
.drp-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.drp-day { padding: 6px 0; font-size: 13px; cursor: pointer; border-radius: 50%; line-height: 22px; position: relative; }
.drp-day:not(.drp-start):not(.drp-end):not(.drp-in-range):hover { background: var(--bm-bg-hover); }
.drp-day.drp-other { color: var(--bm-text-3); cursor: default; }
.drp-day.drp-other:hover { background: none; }
.drp-day.drp-today { border: 1px solid var(--bm-primary); border-radius: 50%; }
.drp-day.drp-sun { color: var(--bm-danger); }
.drp-day.drp-sat { color: #3b82f6; }
.drp-day.drp-in-range { background: #dbeafe; border-radius: 0; }
.drp-day.drp-start,
.drp-day.drp-end { color: #fff; z-index: 1; }
.drp-day.drp-start::before,
.drp-day.drp-end::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px;
    transform: translate(-50%, -50%); border-radius: 50%; background: var(--bm-primary); z-index: -1;
}
.drp-day.drp-start { background: linear-gradient(to right, transparent 50%, #dbeafe 50%); border-radius: 0; }
.drp-day.drp-end { background: linear-gradient(to left, transparent 50%, #dbeafe 50%); border-radius: 0; }
.drp-day.drp-start.drp-end { background: transparent; border-radius: 0; }
.drp-day.drp-start.drp-sun, .drp-day.drp-end.drp-sun,
.drp-day.drp-start.drp-sat, .drp-day.drp-end.drp-sat,
.drp-day.drp-start.drp-today, .drp-day.drp-end.drp-today { color: #fff; }
.drp-presets { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.drp-presets button {
    padding: 8px 14px; font-size: 13px; font-family: var(--font-main);
    border: none; border-radius: var(--bm-radius);
    background: #e8f0fe; color: var(--bm-text-1); cursor: pointer; text-align: center;
    transition: all var(--bm-transition);
}
.drp-presets button:hover { background: #d0e0fc; color: var(--bm-primary); }
.drp-presets button.active { background: var(--bm-primary); color: #fff; }
.drp-footer { display: flex; align-items: center; gap: 6px; margin-top: 12px; border-top: 1px solid var(--bm-border); padding-top: 12px; justify-content: center; }
.drp-label { font-size: 12px; color: var(--bm-text-3); white-space: nowrap; }
.drp-sep { font-size: 12px; color: var(--bm-text-3); }
.drp-footer input[type="text"] {
    height: 30px; padding: 0 6px; width: 90px; flex: none;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 12px; font-family: var(--font-main); text-align: center;
}

/* History Date Nav (inline in filter bar) */
.history-date-nav {
    display: inline-flex; align-items: center;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    user-select: none; position: relative; height: 36px;
}
.history-date-nav > button {
    background: none; border: none; padding: 0 10px;
    cursor: pointer; color: var(--bm-text-2); font-size: 13px;
    height: 100%; display: flex; align-items: center;
}
.history-date-nav > button:hover { background: var(--bm-bg-hover); }
.history-date-nav-label {
    font-size: 13px; color: var(--bm-text-1); cursor: pointer;
    border-left: 1px solid var(--bm-border); border-right: 1px solid var(--bm-border);
    padding: 0 14px; white-space: nowrap; height: 100%; display: flex; align-items: center;
}
.history-date-nav-label:hover { background: var(--bm-bg-hover); }

/* Product Filter Inline Panel */
.hf-product-panel {
    position: absolute; top: 100%; left: 0; z-index: 300;
    background: #fff; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    width: 380px; max-height: 420px; overflow: hidden; margin-top: 4px;
}
.hf-product-search { padding: 12px; border-bottom: 1px solid var(--bm-border); }
.hf-product-search input {
    width: 100%; padding: 8px 12px; border: 2px solid var(--bm-primary);
    border-radius: var(--bm-radius); font-size: 14px; font-family: var(--font-main); outline: none;
}
.hf-product-list { max-height: 320px; overflow-y: auto; }
.hf-product-item {
    display: flex; align-items: center; padding: 10px 12px; gap: 10px;
    cursor: pointer; border-bottom: 1px solid var(--bm-border);
}
.hf-product-item:hover { background: var(--bm-bg-hover); }
.hf-product-photo { width: 40px; height: 40px; border-radius: 4px; background: var(--bm-bg-sub); flex-shrink: 0; overflow: hidden; }
.hf-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.hf-product-info { flex: 1; min-width: 0; }
.hf-product-name { font-size: 14px; font-weight: 500; }
.hf-product-attrs { font-size: 12px; color: var(--bm-text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-product-qty { font-size: 16px; font-weight: 600; color: var(--bm-primary); flex-shrink: 0; }
.hf-hashtag-icon {
    width: 40px; height: 40px; border-radius: 4px; background: var(--bm-primary-light);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--bm-primary); font-size: 16px;
}

/* Edit Confirmation Area */
.tx-edit-confirm-area {
    margin-top: 16px; padding: 16px; background: #fef9e7; border: 1px solid #f5d060;
    border-radius: var(--bm-radius);
}
.tx-edit-warning {
    font-size: 13px; color: #92400e; display: flex; align-items: center; gap: 8px;
}
.tx-edit-warning i { color: #d97706; font-size: 15px; }
.tx-edit-check {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    font-size: 13px; color: var(--bm-text-1); cursor: pointer;
}
.tx-edit-check input { width: 16px; height: 16px; accent-color: var(--bm-primary); cursor: pointer; }
.tx-btn-back {
    background: var(--bm-bg-surface) !important; color: var(--bm-text-2) !important;
    border: 1px solid var(--bm-border) !important; font-weight: 500;
}

/* Generic Inline Filter Panel */
.hf-filter-panel {
    position: absolute; top: 100%; left: 0; z-index: 300;
    background: #fff; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    width: 280px; max-height: 380px; overflow: hidden; margin-top: 4px;
}
.hf-filter-panel .hf-panel-search { padding: 12px; border-bottom: 1px solid var(--bm-border); }
.hf-filter-panel .hf-panel-search input {
    width: 100%; padding: 8px 12px; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); font-size: 13px; font-family: var(--font-main);
    box-sizing: border-box;
}
.hf-filter-panel .hf-panel-search input:focus { border-color: var(--bm-primary); outline: none; }
.hf-filter-panel .hf-panel-list { max-height: 300px; overflow-y: auto; }
.hf-filter-panel .hf-panel-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    cursor: pointer; font-size: 14px; transition: background .15s;
}
.hf-filter-panel .hf-panel-item:hover { background: var(--bm-bg-hover); }
.hf-filter-panel .hf-panel-item.selected { background: var(--bm-primary-light); color: var(--bm-primary); font-weight: 500; }
.hf-filter-panel .hf-panel-item .hf-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--bm-bg-sub);
    display: flex; align-items: center; justify-content: center; color: var(--bm-text-3); font-size: 14px; flex-shrink: 0;
}
.hf-filter-panel .hf-panel-empty {
    padding: 24px 16px; text-align: center; color: var(--bm-text-3); font-size: 13px;
}

/* Active Filter Badge */
.filter-active-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 16px;
    font-size: 12px; font-weight: 500;
    background: var(--bm-primary-light); color: var(--bm-primary);
    cursor: pointer;
}
.filter-active-badge i { font-size: 10px; }

/* Audit */
.audit-qty {
    width: 80px; text-align: center; padding: 5px 8px;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    font-size: 14px; font-family: var(--font-main); font-variant-numeric: tabular-nums;
}
.audit-qty:focus { border-color: var(--bm-primary); outline: none; }
tr.audit-match td { background: var(--bm-success-light); }
tr.audit-diff td { background: var(--bm-warning-light); }

/* Barcode Scanner */
.barcode-overlay {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s ease;
}
.barcode-overlay.show { opacity: 1; }
.barcode-panel {
    background: var(--bm-bg-card); border-radius: var(--bm-radius-lg);
    width: 90%; max-width: 400px; overflow: hidden;
}
.barcode-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--bm-border);
}

/* Product Add Page */
.product-add-section-title {
    font-size: 16px; font-weight: 700; color: var(--bm-text-1);
    padding: 28px 0 12px; margin-top: 8px;
    border-bottom: 1px solid var(--bm-border);
}
.product-add-section-title:first-child { padding-top: 0; margin-top: 0; }
.product-add-section-right {
    font-size: 13px; font-weight: 500; color: var(--bm-primary);
    cursor: pointer; float: right;
}
.product-add-section-right:hover { text-decoration: underline; }
.product-add-photo {
    width: 100px; height: 100px; border-radius: var(--bm-radius);
    background: var(--bm-bg-surface); border: 1px solid var(--bm-border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden; flex-shrink: 0;
    color: var(--bm-text-3); font-size: 28px;
}
.product-add-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-add-photo:hover { border-color: var(--bm-text-3); }

/* Tag input (creatable combobox) */
.tag-input-wrap {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    background: #fff; min-height: 36px; padding: 3px 4px; position: relative; cursor: text;
}
.tag-input-wrap:focus-within { border-color: var(--bm-primary); }
.tag-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: #eaebff; color: var(--bm-primary); border-radius: 4px;
    padding: 2px 6px 2px 8px; font-size: 13px; font-weight: 500; white-space: nowrap;
}
.tag-chip-x { background: none; border: none; font-size: 15px; cursor: pointer; color: var(--bm-primary); padding: 0; line-height: 1; }
.tag-chip-x:hover { color: var(--bm-danger); }
.tag-input-field { border: none; outline: none; font-size: 14px; flex: 1; min-width: 60px; padding: 4px; background: transparent; }
.tag-input-clear { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--bm-text-3); padding: 0 4px; line-height: 1; flex-shrink: 0; }
.tag-input-clear:hover { color: var(--bm-text-1); }
.tag-input-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 10; max-height: 200px; overflow: auto;
}
.tag-input-dropdown.show { display: block; }
.tag-input-item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.tag-input-item:hover { background: var(--bm-bg-hover); }
.tag-input-create { font-weight: 500; }
.tag-input-hint { padding: 8px 12px; font-size: 12px; color: var(--bm-text-3); display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--bm-border); }

/* Variant review table */
.variant-table-wrap { overflow-x: auto; border: 1px solid var(--bm-border); border-radius: var(--bm-radius); }
.variant-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 800px; }
.variant-table th { background: var(--bm-bg-surface); padding: 10px 12px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--bm-border); white-space: nowrap; }
.variant-table td { padding: 8px 12px; border-bottom: 1px solid var(--bm-border); vertical-align: middle; }
.variant-table tr:last-child td { border-bottom: none; }
.variant-table .vt-del { width: 32px; text-align: center; }
.variant-table .vt-del button { background: none; border: none; color: var(--bm-danger); cursor: pointer; font-size: 14px; padding: 4px; }
.variant-table .vt-photo { width: 48px; }
.variant-table .vt-photo-box { width: 36px; height: 36px; border-radius: 6px; background: var(--bm-bg-surface); border: 1px solid var(--bm-border); display: flex; align-items: center; justify-content: center; color: var(--bm-text-3); font-size: 14px; }
.variant-table input.vt-input { border: none; background: transparent; font-size: 13px; width: 100%; padding: 4px 0; outline: none; }
.variant-table input.vt-input:focus { border-bottom: 1.5px solid var(--bm-primary); }
.variant-table .vt-placeholder { color: var(--bm-text-3); font-style: italic; font-size: 12px; cursor: pointer; }
.variant-table .vt-placeholder:hover { color: var(--bm-primary); }
.btn-auto-gen {
    background: var(--bm-success); color: #fff; border: none;
    padding: 6px 14px; border-radius: var(--bm-radius);
    font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.btn-auto-gen:hover { opacity: 0.9; }
.product-add-qty-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.product-add-qty-table th {
    text-align: left; font-size: 13px; font-weight: 600; color: var(--bm-text-2);
    padding: 10px 8px; border-bottom: 1px solid var(--bm-border);
}
.product-add-qty-table td {
    padding: 10px 8px; border-bottom: 1px solid var(--bm-bg-2);
    font-size: 14px; vertical-align: middle;
}
.product-add-qty-table .qty-input { width: 100%; text-align: right; }
.product-add-qty-table .qty-remove { background: none; border: none; color: var(--bm-text-3); cursor: pointer; font-size: 16px; padding: 0; }
.product-add-qty-table .qty-remove:hover { color: var(--bm-danger); }
.product-add-qty-table .qty-add-row td { border-bottom: none; padding: 8px; }
.product-add-loc-add {
    display: flex; align-items: center; gap: 6px; padding: 10px 12px;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    color: var(--bm-text-2); font-size: 14px; cursor: pointer;
    max-width: 400px; margin-top: 8px;
}
.product-add-loc-add:hover { border-color: var(--bm-text-3); }
.price-input-wrap {
    display: flex; align-items: center;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    background: #fff; width: 100%; overflow: hidden;
}
.price-input-wrap:focus-within { border-color: var(--bm-primary); }
.price-prefix {
    padding: 0 0 0 9px; font-size: 14px; color: var(--bm-text-2);
    user-select: none; flex: none;
}

/* === Multi-column product list (BoxHero-style) === */
.product-columns {
    display: flex;
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    overflow: hidden;
    background: var(--bm-bg-card);
    max-height: calc(100vh - 230px);
}
.group-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.group-column + .group-column { border-left: 1px solid var(--bm-border); }
.group-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2px;
    flex: none;
    height: 52px;
    padding: 10px;
    border-bottom: 1px solid var(--bm-border);
}
.group-column-title {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--bm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    font-family: inherit;
}
.group-column-sort {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--bm-text-3);
    font-size: 14px;
    padding: 4px;
    flex: none;
}
.group-column-sort:hover { color: var(--bm-text); }
.group-column-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    height: 36px;
    padding: 0 12px;
    background: var(--bm-bg-2);
    border-bottom: 1px solid var(--bm-border);
    font-size: 13px;
    font-weight: 500;
    color: var(--bm-text-2);
}
.group-column-body {
    flex: 1;
    overflow-y: auto;
}
/* Group card */
.group-card {
    cursor: pointer;
    border-bottom: 1px solid var(--bm-bg-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 28px 12px 12px;
    position: relative;
    min-height: 94px;
}
.group-card:hover { background: var(--bm-bg-hover); }
.group-card.selected { background: var(--bm-primary-light); border-left: 3px solid var(--bm-primary); padding-left: 9px; }
.group-card.selected:hover { background: #dce0ff; }
.group-card-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.group-card-body {
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.group-card-stats {
    margin-left: 20px;
    display: flex;
    flex: 1;
}
.group-card-stat {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
}
.group-card-stat-val { font-size: 14px; }
.group-card-stat-lbl { font-size: 12px; color: var(--bm-text-3); }
.group-card-arrow {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--bm-text-3);
}
/* Photo group (overlapping circles) */
.photo-group { position: relative; flex: none; }
.photo-circle {
    position: absolute;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    background: #e5e5e8;
}
.photo-circle img { width: 100%; height: 100%; object-fit: cover; }
/* Detail column */
.detail-product-card {
    display: flex;
    padding: 12px;
    gap: 16px;
    border-bottom: 1px solid var(--bm-border);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
.detail-product-card:hover { background: var(--bm-bg-hover); }
.detail-location-row {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: 64px;
    cursor: pointer;
    border-bottom: 1px solid var(--bm-bg-2);
}
.detail-location-row:hover { background: var(--bm-bg-hover); }

/* Custom select (BoxHero style) */
.bm-custom-select { position: relative; width: 220px; }
.bm-select-display {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    background: #fff; cursor: pointer; font-size: 14px; height: 38px; user-select: none;
}
.bm-select-display:hover { border-color: var(--bm-primary); }
.bm-select-dropdown {
    display: none; position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow-lg); z-index: 100; max-height: 240px; overflow-y: auto; padding: 4px 0;
}
.bm-select-dropdown.show { display: block; }
.bm-select-item {
    padding: 9px 16px; font-size: 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bm-select-item:hover { background: var(--bm-bg-hover); }
.bm-select-item.selected { color: var(--bm-primary); font-weight: 600; }
.bm-select-input {
    width: 100%; border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius);
    padding: 8px 28px 8px 12px; font-size: 14px; height: 38px; outline: none;
    background: #fff; box-sizing: border-box;
}
.bm-select-input:focus { border-color: var(--bm-primary); }
.bm-select-input::placeholder { color: var(--bm-text-3); }
.bm-select-arrow {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--bm-text-3); pointer-events: none;
}
.bm-select-divider { border-top: 1px solid var(--bm-border); margin: 4px 0; }

/* Bulk Add Drawer */
.bulk-header {
    display: flex; align-items: center; padding: 10px 8px; gap: 16px;
    border-bottom: 2px solid var(--bm-border);
    font-size: 13px; font-weight: 600; color: var(--bm-text-2);
}
.bulk-row {
    display: flex; align-items: center; padding: 10px 8px; gap: 16px;
    border-bottom: 1px solid var(--bm-border);
}
.bulk-photo {
    width: 44px; height: 44px; border-radius: 4px; flex: none;
    background: #e9eaec; overflow: hidden;
}
.bulk-photo img { width: 100%; height: 100%; object-fit: cover; }
.bulk-info { flex: 1; min-width: 0; }
.bulk-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-attrs { font-size: 12px; color: var(--bm-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-stock { width: 80px; text-align: right; font-size: 14px; color: var(--bm-text-2); flex: none; padding-right: 12px; }
.bulk-qty-wrap { width: 80px; flex: none; }
.bulk-qty-wrap input { width: 100%; text-align: center; height: 34px; font-size: 14px; box-sizing: border-box; padding: 0 6px; }
.bulk-row.in-cart { background: var(--bm-primary-light); }

/* Barcode Scan Dialog Items */
.barcode-scan-row {
    display: flex; align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--bm-border); gap: 8px;
}
.barcode-scan-photo {
    width: 40px; height: 40px; border-radius: 4px; flex: none;
    background: #e9eaec; overflow: hidden;
}
.barcode-scan-info { flex: 1; min-width: 0; }
.barcode-scan-qty {
    display: flex; align-items: center; gap: 0; flex: none;
    border: 1px solid var(--bm-border-strong); border-radius: var(--bm-radius); overflow: hidden;
}
.barcode-qty-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    background: var(--bm-bg-surface); border: none; cursor: pointer; color: var(--bm-text-2);
}
.barcode-qty-btn:hover { background: var(--bm-bg-hover); }
.barcode-qty-val {
    width: 40px; text-align: center; font-size: 14px; font-weight: 600;
    border-left: 1px solid var(--bm-border); border-right: 1px solid var(--bm-border);
    line-height: 32px;
}
.barcode-scan-remove {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: var(--bm-text-3); flex: none;
    border-radius: 50%;
}
.barcode-scan-remove:hover { background: var(--bm-bg-hover); color: var(--bm-danger); }

/* --- Draft List (임시 저장 목록) --- */
.draft-list-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 24px 0 20px;
}
.draft-list-sub { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.draft-list-title { font-size: 22px; font-weight: 700; margin: 0; }
.draft-table { width: 100%; border-collapse: collapse; }
.draft-table thead th {
    padding: 12px 12px; font-size: 13px; font-weight: 500; color: var(--bm-text-2);
    border-bottom: 1px solid var(--bm-border); text-align: left; white-space: nowrap;
    position: sticky; top: 0; background: var(--bm-bg-card); z-index: 10;
}
.draft-table .draft-th-check { width: 16px; padding: 12px 8px 12px 12px; }
.draft-table .draft-th-date { width: 130px; cursor: pointer; }
.draft-table .draft-th-loc { width: 150px; }
.draft-table .draft-th-partner { width: 150px; }
.draft-table .draft-th-memo { width: 200px; }
.draft-row { cursor: pointer; background: var(--bm-bg-card); }
.draft-row:hover { background: var(--bm-bg-hover); }
.draft-row.selected { background: var(--bm-primary-light); }
.draft-row.selected:hover { background: #dce0ff; }
.draft-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--bm-primary); }
#draftCheckAll { width: 16px; height: 16px; cursor: pointer; accent-color: var(--bm-primary); }
.draft-row td {
    padding: 14px 12px; font-size: 14px; color: #111;
    border-bottom: 1px solid var(--bm-border); vertical-align: middle;
    text-align: left;
}
.draft-td-check { width: 16px; padding: 14px 8px 14px 12px !important; }
.draft-td-date { white-space: nowrap; }
.draft-clamp { overflow: hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.draft-td-product { overflow: visible !important; position: relative; }
.draft-product-badge {
    display: inline-flex; align-items: center; white-space: nowrap;
    padding: 10px; border-radius: 6px; font-size: 14px; cursor: pointer;
    margin-left: -10px; color: #111;
}
.draft-product-badge:hover { background: #f0f0f0; }
.draft-product-badge.active { background: #eee; }
.draft-product-badge i { color: var(--bm-text-2); margin-left: 5px; font-size: 14px; }
.draft-td-author {
    white-space: nowrap;
}
.draft-author-wrap {
    display: flex; align-items: center; gap: 10px;
}
.draft-author-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--bm-bg); color: var(--bm-text-3); font-size: 20px;
}
.draft-author-name { font-size: 13px; color: var(--bm-text-1); overflow: hidden; text-overflow: ellipsis; }

/* Product expand panel */
.draft-expand-panel {
    display: none; position: absolute; top: 100%; left: -10px;
    background: #fff;
    border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
    z-index: 100; min-width: 320px; padding: 8px 0;
}
.draft-expand-panel.show { display: block; }
.draft-expand-item {
    display: flex; align-items: center; padding: 8px 15px; cursor: pointer;
}
.draft-expand-item:hover { background: var(--bm-bg-hover); }
.draft-expand-photo {
    width: 36px; height: 36px; border-radius: 4px; background: #f1f1f4;
    flex: none; overflow: hidden;
}
.draft-expand-photo img { width: 100%; height: 100%; object-fit: cover; }
.draft-expand-info { flex: 1; min-width: 0; margin-left: 14px; }
.draft-expand-name { font-size: 14px; font-weight: 400; color: #292A2F; line-height: 20px; }
.draft-expand-attrs { font-size: 12px; color: #8F91A0; margin-top: 2px; line-height: 16px; }
.draft-expand-qty { font-size: 16px; font-weight: 500; flex: none; }

.draft-table tfoot td {
    padding: 12px; border: none;
}
.draft-pagination {
    display: flex; justify-content: flex-end; align-items: center; gap: 15px;
    font-size: 13px; color: var(--bm-text-2);
}
.draft-page-btn {
    padding: 8px 16px; font-size: 13px; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); background: var(--bm-bg-card); color: var(--bm-text-2);
    cursor: pointer;
}
.draft-page-btn + .draft-page-btn { margin-left: 10px; }
.draft-page-btn:disabled { opacity: 0.5; cursor: default; }
.draft-page-btn:not(:disabled):hover { background: var(--bm-bg-hover); }

/* Draft Batch Bar (below last data row, centered) */
.draft-table-wrap { position: relative; }
.draft-batch-bar {
    position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content;
    display: inline-flex; align-items: center;
    padding: 0;
    background: var(--bm-primary); color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(79,103,255,0.3);
    z-index: 5; white-space: nowrap;
}
.draft-batch-count { font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; padding: 14px 20px; text-align: center; }
.draft-batch-bar .btn { background: none; color: rgba(255,255,255,0.9); border: none; box-shadow: none; font-size: 14px; height: auto; padding: 14px 20px; border-radius: 0; border-left: 1px solid rgba(255,255,255,0.3); line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.draft-batch-bar .btn:hover { color: #fff; background: none; text-decoration: underline; }

/* --- Transaction Preview Dialog (pvw-) --- */
.pvw-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.pvw-title { font-size: 20px; font-weight: 700; margin: 0; }
.pvw-user { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bm-text-2); }
.pvw-avatar { font-size: 20px; color: var(--bm-text-3); }
.pvw-title-bar { height: 3px; border-radius: 2px; margin-bottom: 16px; }
.pvw-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.pvw-info { font-size: 14px; }
.pvw-info-row { display: flex; gap: 24px; margin-bottom: 4px; }
.pvw-info-label { color: var(--bm-text-1); font-weight: 600; min-width: 48px; }
.pvw-info-value { color: var(--bm-text-1); }
.pvw-more-wrap { position: relative; }
.pvw-more-btn {
    background: var(--bm-primary); color: #fff !important; border: none; cursor: pointer;
    font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--bm-radius);
}
.pvw-more-btn:hover { opacity: 0.9; }
.pvw-more-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border-strong);
    border-radius: var(--bm-radius); box-shadow: var(--bm-shadow-lg);
    z-index: 200; min-width: 160px; padding: 4px 0;
}
.pvw-more-dropdown.show { display: block; }
.pvw-more-item {
    display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px;
    cursor: pointer; white-space: nowrap; color: var(--bm-text-1);
}
.pvw-more-item i { width: 16px; text-align: center; color: var(--bm-text-3); font-size: 13px; }
.pvw-more-item:hover { background: var(--bm-bg-hover); }
.pvw-more-item.pvw-danger { color: var(--bm-danger); }
.pvw-more-item.pvw-danger i { color: var(--bm-danger); }
.pvw-more-divider { height: 1px; background: var(--bm-border); margin: 4px 0; }

.pvw-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pvw-table thead th {
    padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--bm-text-2);
    border-bottom: 2px solid var(--bm-border); text-align: left;
}
.pvw-table .pvw-th-photo { width: 52px; }
.pvw-table .pvw-th-name { }
.pvw-table .pvw-th-change { text-align: right; width: 120px; font-size: 13px; font-weight: 600; color: var(--bm-text-1); }
.pvw-table .pvw-th-qty { text-align: right; width: 80px; font-weight: 600; color: var(--bm-text-1); }
.pvw-item-row td { padding: 12px 4px; border-bottom: 1px solid var(--bm-border); vertical-align: middle; }
.pvw-photo { width: 44px; height: 44px; border-radius: 4px; background: #e9eaec; overflow: hidden; }
.pvw-photo img { width: 100%; height: 100%; object-fit: cover; }
.pvw-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvw-attrs { font-size: 12px; color: #888; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvw-change-cell { text-align: right; font-size: 13px; color: var(--bm-text-1); white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: middle; font-weight: 600; }
.pvw-arrow { color: var(--bm-text-3); font-size: 11px; margin: 0 3px; }
.pvw-qty-cell { text-align: right; font-size: 14px; font-weight: 600; color: var(--bm-primary); font-variant-numeric: tabular-nums; }

.pvw-footer-summary {
    display: flex; justify-content: space-between; padding: 14px 4px;
    font-size: 15px; font-weight: 600;
    border-top: 1px solid var(--bm-border);
}
.pvw-memo {
    margin: 12px 4px 0; padding: 12px 14px; background: var(--bm-bg);
    border: 1px solid var(--bm-border); border-radius: 10px;
    font-size: 13px; color: #444; font-weight: 500;
    line-height: 1.8; white-space: pre-wrap;
}
.pvw-memo-tag {
    display: inline-block; background: var(--bm-primary-light, #e8f0fe);
    color: var(--bm-primary); padding: 2px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 500; margin: 2px 2px;
}

/* --- Low Stock Alerts (ls-) --- */
.ls-section-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--bm-text-1);
    padding: 16px 0 8px;
}
.ls-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ls-dot-red { background: #fb6164; }
.ls-dot-purple { background: #9b7bea; }
.ls-divider { height: 1px; background: var(--bm-border); }
.ls-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--bm-bg-2);
}
.ls-item-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.ls-item-photo {
    width: 36px; height: 36px; border-radius: 4px; background: #f1f1f4;
    flex: none; overflow: hidden;
}
.ls-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.ls-item-info { min-width: 0; }
.ls-item-name { font-size: 14px; font-weight: 400; color: #292A2F; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-item-attrs { font-size: 12px; color: #8F91A0; margin-top: 2px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-item-nums { display: flex; gap: 0; flex: none; }
.ls-item-col { width: 130px; text-align: right; }
.ls-item-val { font-size: 16px; font-weight: 500; color: var(--bm-text-1); }
.ls-item-label { font-size: 12px; color: #8F91A0; margin-top: 2px; }