/* oblivsync 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-1: #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-bg-2: #f5f5f5;
    --bm-primary-bg: #eef0ff;
    --bm-border-light: #f0f0f0;
    --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 */
::-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-field-input:-webkit-autofill,
.login-field-input:-webkit-autofill:hover,
.login-field-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #1a1a18 inset !important;
    -webkit-text-fill-color: #f0ece4 !important;
    caret-color: #f0ece4;
    transition: background-color 5000s ease-in-out 0s;
}
.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 20px; 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: 6px;
    cursor: pointer; padding: 4px 10px; 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: 13px; font-weight: 400; color: var(--bm-text-2); }
.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;
    width: var(--bm-sidebar-w); max-width: var(--bm-sidebar-w); 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-avatar {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    background: var(--bm-bg-hover); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--bm-text-3);
}
.header-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.header-user-label { font-size: 13px; font-weight: 500; color: var(--bm-text-1); white-space: nowrap; }
.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); }
/* Settings dropdown */
.header-settings { position: relative; }
.header-settings-dropdown {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 180px; background: #fff;
    border: 1px solid var(--bm-border); border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 200;
    overflow: hidden; padding: 6px 0;
}
.header-settings.open .header-settings-dropdown { display: block; }
.header-settings-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--bm-text-1); transition: background 0.15s;
}
.header-settings-item:hover { background: var(--bm-bg-hover); }
.header-settings-item i { font-size: 14px; color: var(--bm-text-2); width: 18px; text-align: center; }
.header-settings-item.danger { color: var(--bm-danger); }
.header-settings-item.danger i { color: var(--bm-danger); }
.header-settings-divider { height: 1px; background: var(--bm-border); margin: 4px 0; }
/* Account Settings Popup */
.account-popup-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4);
    animation: fadeIn 0.15s ease;
}
.account-popup {
    background: #fff; border-radius: 16px; width: 100%; max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    animation: slideUp 0.2s ease;
}
.account-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--bm-border);
}
.account-popup-title { font-size: 16px; font-weight: 700; }
.account-popup-close {
    background: none; border: none; color: var(--bm-text-2);
    font-size: 16px; cursor: pointer; padding: 4px;
}
.account-popup-close:hover { color: var(--bm-text-1); }
.account-popup-body { padding: 24px; }
.account-avatar-area {
    display: flex; flex-direction: column; align-items: center; margin-bottom: 24px;
}
.account-avatar {
    width: 80px; height: 80px; border-radius: 50%; overflow: hidden;
    background: var(--bm-bg-hover); display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: var(--bm-text-3); cursor: pointer; position: relative;
    transition: opacity 0.2s;
}
.account-avatar:hover { opacity: 0.8; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar-edit {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.5); color: #fff; font-size: 10px;
    text-align: center; padding: 4px 0; letter-spacing: 0.5px;
}
.account-info-row {
    display: flex; align-items: center; padding: 12px 0;
    border-bottom: 1px solid var(--bm-bg-hover);
}
.account-info-label {
    width: 80px; flex-shrink: 0; font-size: 12px; font-weight: 600;
    color: var(--bm-text-2); letter-spacing: 0.5px;
}
.account-info-value {
    flex: 1; font-size: 14px; color: var(--bm-text-1); font-weight: 500;
}
.account-pw-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0;
}
.account-pw-btn {
    background: none; border: 1px solid var(--bm-border); border-radius: 6px;
    padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--bm-text-1);
    cursor: pointer; font-family: var(--font-main); transition: all 0.15s;
}
.account-pw-btn:hover { border-color: var(--bm-primary); color: var(--bm-primary); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.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-group-items { max-height: 0 !important; }
.sidebar.collapsed .nav-group { margin-bottom: 0; }
.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-ghost:disabled, .btn-ghost[disabled] {
    color: #cbccd3 !important; background: #f1f1f4 !important;
    border: 1px solid #cbccd3 !important; cursor: not-allowed;
    box-shadow: none;
}
.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 */
.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);
}
/* 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; min-width: 44px; min-height: 44px;
    border-radius: var(--bm-radius); transition: all var(--bm-transition);
    display: inline-flex; align-items: center; justify-content: center;
}
.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;
}
.perm-dual-header {
    display: grid; grid-template-columns: 1fr 50px 50px; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--bm-text-2);
    padding: 4px 0; border-bottom: 1px solid var(--bm-border); margin-bottom: 4px;
}
.perm-dual-header span:not(:first-child) { text-align: center; }
.perm-dual-row {
    display: grid !important; grid-template-columns: 1fr 50px 50px; gap: 8px; align-items: center;
}
.perm-dual-row label { min-width: 0; justify-content: center; }

/* Space Role Cards (member drawer) */
.space-role-card {
    border: 1px solid var(--bm-border); border-radius: 10px;
    opacity: 0.5; transition: all 0.2s;
}
.space-role-card.active { opacity: 1; border-color: var(--bm-primary); }
.space-role-header {
    padding: 10px 14px; background: var(--bm-bg-surface);
    border-bottom: 1px solid transparent; border-radius: 10px 10px 0 0;
}
.space-role-card.active .space-role-header { border-bottom-color: var(--bm-border); }
.space-role-check {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.space-role-check input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--bm-primary); cursor: pointer;
}
.space-role-name { font-size: 14px; font-weight: 600; color: var(--bm-text-1); }
.space-role-fields {
    display: none; padding: 14px; gap: 12px;
    flex-direction: column;
}
.space-role-card.active .space-role-fields { display: flex; }
.space-role-field {
    display: flex; align-items: center; gap: 10px;
}
.space-role-field-label {
    width: 36px; flex-shrink: 0; font-size: 12px; font-weight: 600;
    color: var(--bm-text-2);
}
/* Custom dropdown (replaces native select) */
.custom-dropdown {
    flex: 1; position: relative; user-select: none;
}
.custom-dropdown-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 12px; height: 32px; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); background: #fff; cursor: pointer;
    transition: border-color 0.15s;
}
.custom-dropdown.open .custom-dropdown-trigger,
.custom-dropdown-trigger:hover { border-color: var(--bm-primary); }
.custom-dropdown-text {
    font-size: 13px; color: var(--bm-text-1); font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.custom-dropdown-arrow {
    font-size: 10px; color: var(--bm-text-3); transition: transform 0.15s;
    margin-left: 8px; flex-shrink: 0;
}
.custom-dropdown.open .custom-dropdown-arrow { transform: rotate(180deg); }
.custom-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--bm-border); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1); z-index: 50;
    max-height: 180px; overflow-y: auto; padding: 4px 0;
}
.custom-dropdown.open .custom-dropdown-menu { display: block; }
.custom-dropdown-option {
    padding: 8px 12px; font-size: 13px; color: var(--bm-text-1);
    cursor: pointer; transition: background 0.1s;
}
.custom-dropdown-option:hover { background: var(--bm-bg-hover); }
.custom-dropdown-option.selected {
    color: var(--bm-primary); font-weight: 600;
    background: var(--bm-primary-light);
}

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

/* History filter bar */
.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 */
.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); } }
@keyframes drawerSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.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 */
.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 — "보기 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; }
/* Partner table: dark headers + text */
.pt-table th { color: var(--bm-text-1); }
/* Partner type badge */
.partner-type-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 26px; border-radius: 6px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
}
.partner-type-badge.supplier {
    background: #eef0ff; color: #4f67ff;
}
.partner-type-badge.customer {
    background: #fff4ec; color: #e67e22;
}
.dc-batch-bar {
    position: fixed; bottom: 24px; z-index: 100;
    left: calc(var(--bm-sidebar-w) + (100vw - var(--bm-sidebar-w)) / 2);
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 14px;
    padding: 10px 28px; background: var(--bm-text-1); color: #fff;
    border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    animation: batchSlideUp 0.2s ease; font-size: 13px; white-space: nowrap;
}
.dc-batch-count { font-weight: 600; }
.dc-batch-sep { color: rgba(255,255,255,0.3); font-size: 12px; }
.dc-batch-text-btn {
    background: none; border: none; color: #fff; font-size: 13px; cursor: pointer;
    padding: 4px 8px; font-family: inherit; white-space: nowrap;
}
.dc-batch-text-btn:hover { text-decoration: underline; }
.dc-batch-danger { color: #ff6b6b; }
.dc-batch-danger:hover { color: #ff4444; }
.dc-batch-bar .dropdown-menu {
    background: var(--bm-bg-card); color: var(--bm-text-1);
    border: 1px solid var(--bm-border); box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    min-width: 180px; left: 50%; transform: translateX(-50%);
}

/* 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;
}

/* Bundle drawer field rows */
.bd-field-row {
    display: flex; align-items: center; min-height: 48px;
    border-bottom: 1px solid var(--bm-border); padding: 0 16px;
}
.bd-field-label {
    width: 100px; flex-shrink: 0; font-size: 13px; font-weight: 500;
    color: var(--bm-text-2);
}
.bd-field-value {
    flex: 1; display: flex; align-items: center; gap: 8px;
}
.bd-field-input {
    flex: 1; border: none; background: transparent; padding: 6px 0;
    font-size: 14px; font-family: inherit; color: var(--bm-text-1);
    outline: none; min-width: 0;
}
.bd-field-input::placeholder { color: var(--bm-text-3); }
.bd-field-input:focus { outline: none; }
.bd-auto-btn {
    background: none; border: none; cursor: pointer; font-size: 12px;
    color: var(--bm-primary); font-weight: 600; white-space: nowrap;
    padding: 4px 8px; border-radius: var(--bm-radius);
    transition: background 0.15s;
}
.bd-auto-btn:hover { background: var(--bm-primary-light); }
.bd-scan-btn {
    background: none; border: none; cursor: pointer; font-size: 14px;
    color: var(--bm-text-2); padding: 4px 6px; border-radius: var(--bm-radius);
    transition: color 0.15s;
}
.bd-scan-btn:hover { color: var(--bm-primary); }

/* 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 (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; min-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;
}

/* Form sections (발주서/판매서 작성) */
.bh-form-section { max-width: 430px; margin-top: 24px; }
.bh-form-section:first-of-type { margin-top: 12px; }
.bh-form-section.bh-wide { max-width: 100%; }
.bh-form-block-title {
    font-size: 15px; font-weight: 600; margin-bottom: 8px;
    display: flex; align-items: center; gap: 7px;
}
.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 */
.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 */
.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;
    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); }
/* Order/sale form table */
.tx-table.ord-items-table { table-layout: fixed; }
.tx-table.ord-items-table thead th:first-child { width: 28px; padding: 4px; }
.tx-table.ord-items-table thead th { padding: 8px 6px; }
.tx-table.ord-items-table tbody td { padding: 10px 6px; vertical-align: middle; }
.tx-table.ord-items-table tbody td:first-child { width: 28px; padding: 4px; text-align: center; }
.ord-num-input {
    width: 100%; padding: 7px 8px; font-size: 14px; text-align: right;
    border: 1px solid var(--bm-border-strong); border-radius: 6px;
    font-family: var(--font-main); outline: none; box-sizing: border-box;
}
.ord-num-input:focus { border-color: var(--bm-primary); }
.ord-price-wrap {
    position: relative; display: flex; align-items: center;
}
.ord-price-prefix {
    position: absolute; left: 8px; font-size: 14px; color: var(--bm-text-2);
    pointer-events: none; z-index: 1;
}
.ord-price-input { padding-left: 22px !important; }
.ord-tax-btn.tx-action-btn {
    color: #cbccd3; background: #f1f1f4; border-color: #cbccd3;
}
.ord-tax-btn.tx-action-btn:hover { color: var(--bm-text-2); background: #e8e8ec; }
.ord-tax-btn.tx-action-btn.active {
    color: #292a2f; background: #fff; border-color: #cbccd3;
}
.ord-tax-btn.tx-action-btn.active:hover { background: var(--bm-bg-hover); }
.ord-tax-menu {
    position: absolute; right: 0; top: 100%; margin-top: 4px;
    background: var(--bm-bg-card); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); box-shadow: 0 4px 12px rgba(0,0,0,.12);
    min-width: 180px; z-index: 100; padding: 6px 0;
}
.ord-tax-menu-item {
    padding: 10px 16px; font-size: 14px; cursor: pointer;
    color: var(--bm-text-1); transition: background .12s;
}
.ord-tax-menu-item:hover { background: var(--bm-bg-hover); }
.ord-tax-menu-item.disabled { opacity: 0.4; pointer-events: none; }

/* Preset list in tax/discount dialogs */
.ord-preset-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.ord-preset-item {
    padding: 10px 14px; font-size: 14px; cursor: pointer; border-radius: 6px;
    color: var(--bm-text-1); transition: background .12s;
    display: flex; align-items: center; justify-content: space-between;
}
.ord-preset-item:hover { background: var(--bm-bg-hover); }
.ord-preset-item.selected { background: #eef0ff; color: var(--bm-primary); font-weight: 500; }
.ord-preset-item.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--bm-primary); }
.ord-preset-add {
    padding: 10px 14px; font-size: 13px; cursor: pointer; color: var(--bm-primary);
    display: flex; align-items: center; gap: 6px; border-radius: 6px; transition: background .12s;
}
.ord-preset-add:hover { background: var(--bm-bg-hover); }
.ord-preset-msg {
    font-size: 13px; color: var(--bm-text-1); text-align: center;
    margin: 8px 0 0; padding: 0;
}
.ord-cell-preset {
    width: 100%; padding: 6px 8px; border: 1px solid var(--bm-border); border-radius: 6px;
    background: #fff; font-size: 12px; cursor: pointer; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bm-text-1);
    min-height: 32px; line-height: 1.3; font-family: var(--font-main);
}
.ord-cell-preset:hover { border-color: var(--bm-text-3); }
.ord-item-preset-dd {
    position: fixed; background: #fff; border: 1px solid var(--bm-border); border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 1100; max-height: 240px;
    overflow-y: auto; padding: 4px; min-width: 160px;
}
.disc-type-toggle { display: inline-flex; border: 1px solid var(--bm-border-strong); border-radius: 6px; overflow: hidden; }
.disc-type-toggle-btn {
    padding: 7px 16px; font-size: 13px; cursor: pointer; border: none; background: var(--bm-bg-card);
    color: var(--bm-text-2); transition: all .15s; font-family: var(--font-main); line-height: 1.4;
}
.disc-type-toggle-btn + .disc-type-toggle-btn { border-left: 1px solid var(--bm-border-strong); }
.disc-type-toggle-btn.active { background: var(--bm-primary); color: #fff; }

/* Tax type toggle (별도/포함) */
.tax-type-toggle {
    display: inline-flex; border: 1px solid var(--bm-border-strong); border-radius: 6px; overflow: hidden;
}
.tax-type-toggle-btn {
    padding: 7px 16px; font-size: 13px; cursor: pointer; border: none; background: var(--bm-bg-card);
    color: var(--bm-text-2); transition: all .15s; font-family: var(--font-main); line-height: 1.4;
}
.tax-type-toggle-btn + .tax-type-toggle-btn { border-left: 1px solid var(--bm-border-strong); }
.tax-type-toggle-btn.active { background: var(--bm-primary); color: #fff; font-weight: 500; }
.tax-type-toggle-btn:hover:not(.active) { background: var(--bm-bg-hover); }

.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, #ordSearchResults, #ordBundleResults, #saleSearchResults, #blSearchResults, #blBundleSearchResults {
    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, #ordSearchResults:empty, #ordBundleResults:empty, #saleSearchResults:empty, #blSearchResults:empty, #blBundleSearchResults:empty {
    display: none;
}
.ord-items-table #ordSearchResults,
.ord-items-table #saleSearchResults {
    width: 200%; min-width: 200%; right: auto;
}
.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"] {
    display: block; 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; padding-top: 6px !important; padding-bottom: 6px !important; vertical-align: top !important; }
.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-expiry-input {
    display: block; width: 100%; height: 28px; margin-top: 4px;
    padding: 3px 6px; border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius); font-size: 11px;
    font-family: var(--font-main); color: var(--bm-text-3); outline: none;
    box-sizing: border-box;
}
.tx-expiry-input:focus { border-color: var(--bm-primary); color: var(--bm-text-2); }
.tx-expiry-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }
.tx-expiry-calc { font-size: 10px; color: var(--bm-text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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: 8px; 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 a { text-decoration: none; }
.breadcrumb a:hover { opacity: 0.8; }
.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 { min-height: 44px; height: auto; padding-top: 6px; padding-bottom: 14px; }

/* Empty State (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-strong); border-radius: 6px;
    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='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 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 */
.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);
}
.bh-combobox-trigger.placeholder .bh-combobox-text { color: var(--bm-text-3); }
.bh-combobox-divider { border-top: 1px solid var(--bm-border); margin: 4px 12px; }
.bh-combobox-add {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 8px 12px; font-size: 14px; color: var(--bm-primary);
    cursor: pointer; font-weight: 500;
}
.bh-combobox-add:hover { background: var(--bm-primary-light); }

/* 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 */
.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 (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; left: 50%; }
    .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 (rounded rect) */
.order-status-badge {
    display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
    font-size: 13px; font-weight: 500; white-space: nowrap; line-height: 20px;
}
.os-draft { background: rgba(143,145,160,0.2); color: #73748C; }
.os-ordered { background: rgba(67,97,238,0.12); color: var(--bm-primary); }
.os-partial { background: rgba(230,126,34,0.12); color: #E67E22; }
.os-received { background: rgba(46,125,50,0.12); color: #2E7D32; }
.os-shipped { background: rgba(46,125,50,0.12); color: #2E7D32; }
.os-cancelled { background: rgba(211,47,47,0.12); color: #D32F2F; }

/* Order Detail Page */
.od-page { padding-bottom: 60px; }
.od-header-block { margin-bottom: 0; }
.od-title {
    font-size: 22px; font-weight: 700; margin: 4px 0 8px; display: flex; align-items: center; gap: 6px;
}
.od-copy-icon {
    font-size: 16px; color: var(--bm-text-3); cursor: pointer; transition: color .15s;
}
.od-copy-icon:hover { color: var(--bm-primary); }
.od-author {
    display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bm-text-1);
}
.od-avatar {
    width: 28px; height: 28px; border-radius: 50%; background: var(--bm-bg-hover);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--bm-text-2); flex: none;
    border: 1px solid var(--bm-border);
}
.od-info-section {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 20px 0; border-bottom: 1px solid var(--bm-border); flex-wrap: wrap;
}
.od-info-grid {
    display: grid; grid-template-columns: auto 1fr;
    gap: 6px 16px; font-size: 14px; min-width: 0;
}
.od-info-label { color: var(--bm-text-1); min-width: 88px; }
.od-info-value { font-weight: 500; color: var(--bm-text-1); }
.od-status-dropdown {
    position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 100;
    background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    min-width: 160px; padding: 6px 0; border: 1px solid var(--bm-border);
}
.od-status-option {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; font-size: 14px; cursor: pointer;
    color: var(--bm-text-1); transition: background .12s;
}
.od-status-option:hover { background: var(--bm-bg-hover); }
.od-status-option.selected {
    background: rgba(67,97,238,0.08); color: var(--bm-primary); font-weight: 500;
}
.od-status-option.selected i { color: var(--bm-primary); font-size: 14px; }
.od-action-buttons {
    display: flex; align-items: center; gap: 8px; flex: none;
}
.od-product-table { width: 100%; table-layout: fixed; }
.od-product-table tfoot td { border-top: 1px solid var(--bm-border); border-bottom: none; }
.od-section { margin-top: 30px; }
.od-section-title {
    font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--bm-text-1);
}
.od-summary {
    display: grid; grid-template-columns: auto auto;
    gap: 16px 15px; width: fit-content; min-width: 350px;
    margin-left: auto; margin-top: -32px; align-items: end;
}
.od-summary-label { text-align: left; font-size: 14px; font-weight: 500; }
.od-summary-value { text-align: right; font-size: 14px; font-weight: 500; }
.od-summary-total-label { text-align: left; font-size: 16px; font-weight: 700; }
.od-summary-total-value { text-align: right; font-size: 16px; font-weight: 700; }
.od-back-link:hover { text-decoration: underline !important; }
.od-prod-link:hover { text-decoration: underline; }

/* Pagination Bar */
.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 === */
.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 */
.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 (legacy) */
.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%;
}
/* Shared Barcode Scan Dialog (bc-scan-*) */
.bc-scan-row {
    display: flex; align-items: center; padding: 10px 0;
    border-bottom: 1px solid var(--bm-border); gap: 8px;
    transition: background .3s;
}
.bc-scan-row.bc-scan-highlight { background: var(--bm-primary-bg); }
.bc-scan-photo {
    width: 40px; height: 40px; border-radius: 4px; flex: none;
    background: #e9eaec; overflow: hidden;
}
.bc-scan-info { flex: 1; min-width: 0; }
.bc-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;
}
.bc-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);
}
.bc-qty-btn:hover { background: var(--bm-bg-hover); }
.bc-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;
}
.bc-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: 6px 0; border-radius: 6px; font-size: 14px; cursor: pointer;
    margin-left: 0; 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: 0;
    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-item-row.pvw-deleted-product td { opacity: 0.55; }
.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;
}

/* --- Change Log Timeline (cl-) --- */
.pvw-changelog { margin: 12px 4px 0; }
.pvw-changelog-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--bm-bg); border: 1px solid var(--bm-border);
    border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600;
    color: var(--bm-text-2); user-select: none;
}
.pvw-changelog-toggle:hover { background: var(--bm-bg-2); }
.pvw-changelog-body { padding: 8px 0 0; }
.cl-timeline { position: relative; padding-left: 20px; }
.cl-entry { position: relative; padding: 0 0 16px; }
.cl-entry:last-child { padding-bottom: 0; }
.cl-entry::before {
    content: ''; position: absolute; left: -14px; top: 8px;
    width: 1px; height: calc(100% - 2px); background: var(--bm-border);
}
.cl-entry:last-child::before { display: none; }
.cl-dot {
    position: absolute; left: -18px; top: 4px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--bm-text-3); border: 2px solid #fff;
}
.cl-dot.create { background: var(--bm-primary); }
.cl-dot.edit { background: var(--bm-warning, #f59e0b); }
.cl-dot.delete { background: var(--bm-danger); }
.cl-content { min-width: 0; }
.cl-header { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.cl-who { font-weight: 600; color: var(--bm-text-1); }
.cl-action { color: var(--bm-text-2); }
.cl-when { color: var(--bm-text-3); font-size: 12px; margin-left: auto; }
.cl-details { margin-top: 4px; }
.cl-detail-item {
    font-size: 12px; color: var(--bm-text-2); line-height: 1.6;
    padding: 2px 0; word-break: break-all;
}

/* --- 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; }

/* === Inventory Analysis Sticky Grid (inv-) === */
.inv-grid {
    position: relative; overflow: auto; background: #fff;
}
.inv-grid-header {
    position: sticky; top: 0; z-index: 3;
    display: flex; min-width: fit-content; background: #fff;
}
.inv-col-product {
    width: 350px; min-width: 350px; flex-shrink: 0;
    position: sticky; left: 0; z-index: 2; background: #fff;
    border-right: 1px solid var(--bm-border-light);
}
.inv-grid-header .inv-col-product { z-index: 4; background: #fff; }
.inv-col-data { width: 150px; min-width: 150px; flex-shrink: 0; }
/* Header label row */
.inv-header-label {
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px; height: 52px; box-sizing: border-box;
    cursor: pointer; font-size: 13px; font-weight: 500; color: var(--bm-text-1);
}
.inv-header-label:hover { background: var(--bm-bg); }
.inv-col-data .inv-header-label { justify-content: flex-end; text-align: right; }
.inv-label-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.4;
}
.inv-sort-icon { font-size: 12px; color: var(--bm-text-3); flex-shrink: 0; }
.inv-sort-icon.active { color: var(--bm-text-1); }
/* Summary row (below header) */
.inv-summary-row {
    display: flex; align-items: center; padding: 0 16px;
    height: 48px; box-sizing: border-box;
    border-top: 1px solid var(--bm-border-light);
    border-bottom: 1px solid var(--bm-border);
}
.inv-col-product .inv-summary-row { gap: 8px; font-size: 13px; }
.inv-col-data .inv-summary-row {
    flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px;
}
.inv-count-label { color: var(--bm-text-3); font-weight: 400; font-size: 12px; }
.inv-count-value { color: var(--bm-text-1); font-weight: 600; font-size: 14px; }
.inv-agg-select {
    border: none; background: transparent; color: var(--bm-text-3);
    font-size: 12px; cursor: pointer; padding: 0; font-family: inherit;
    outline: none; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M4 5L0 0h8z' fill='%239ca3af'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center;
    padding-right: 12px;
}
.inv-agg-value {
    font-size: 14px; font-weight: 600; color: var(--bm-text-1);
    font-variant-numeric: tabular-nums;
}
/* Body */
.inv-grid-body { min-width: fit-content; }
.inv-grid-row {
    display: flex; height: 64px;
    border-bottom: 1px solid var(--bm-border-light); cursor: pointer;
}
.inv-grid-row:hover { background: var(--bm-bg); }
.inv-grid-row:hover .inv-col-product { background: var(--bm-bg); }
.inv-product-cell {
    display: flex; align-items: center; padding: 0 20px; gap: 20px;
    height: 100%;
}
.inv-product-img {
    width: 36px; height: 36px; border-radius: 4px;
    object-fit: cover; flex-shrink: 0; background: #f0f0f0;
}
.inv-product-img-ph {
    width: 36px; height: 36px; border-radius: 4px;
    background: #f0f0f0; flex-shrink: 0;
}
.inv-product-info {
    min-width: 0; flex: 1; display: flex;
    flex-direction: column; gap: 2px;
}
.inv-product-name {
    font-size: 14px; font-weight: 400; color: var(--bm-text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-grid-row:hover .inv-product-name { text-decoration: underline; }
.inv-product-attrs {
    font-size: 12px; color: var(--bm-text-2); line-height: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-data-cell {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 16px; font-size: 14px; height: 100%;
    font-variant-numeric: tabular-nums; color: var(--bm-text-1);
}
@media (max-width: 768px) {
    .inv-col-product { width: 220px; min-width: 220px; }
    .inv-col-data { width: 120px; min-width: 120px; }
}

/* === Sales Analysis Table (sa-) === */
.sa-table {
    width: 100%; border-collapse: collapse;
    font-size: 14px; table-layout: auto;
}
.sa-table thead th {
    padding: 12px 12px; font-size: 13px; font-weight: 500;
    color: var(--bm-text-1); border-bottom: 1px solid var(--bm-border);
    background: #fff; position: sticky; top: 0; z-index: 1;
}
.sa-table tbody tr { border-bottom: 1px solid var(--bm-border-light); }
.sa-table tbody tr:hover { background: var(--bm-bg); }
.sa-name-cell {
    border-right: 1px solid var(--bm-border-light);
}

/* ── Storage Map (보관지도) ── */
.sm-table-wrap { overflow-x: auto; }
.sm-table { border-collapse: collapse; table-layout: fixed; min-width: 100%; }
.sm-cell { border: 1px solid var(--bm-border); padding: 6px 8px; vertical-align: top; min-width: 110px; }
.sm-cell-empty { background: var(--bm-bg-2); }
.sm-cell-filled { background: var(--bm-bg); }
.sm-cell-label { font-size: 13px; font-weight: 800; color: var(--bm-text-1); margin-bottom: 4px; letter-spacing: .5px; background: #fff176; padding: 1px 4px; border-radius: 2px; display: inline-block; }
.sm-cell-products { display: flex; flex-direction: column; gap: 3px; }
.sm-product-chip { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.sm-product-img { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; }
.sm-product-noimg { display: flex; align-items: center; justify-content: center; background: var(--bm-bg-2); width: 20px; height: 20px; border-radius: 3px; flex-shrink: 0; }
.sm-product-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sm-product-qty { font-size: 11px; font-weight: 600; color: var(--bm-primary); flex-shrink: 0; }
.sm-view-header { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.sm-table-edit .sm-cell { background: var(--bm-bg); cursor: text; }
.sm-cell-input { min-height: 28px; padding: 4px 6px; font-size: 13px; font-weight: 600; text-align: center; outline: none; border-radius: 4px; }
.sm-cell-input:focus { background: var(--bm-primary-bg); }
.sm-edge { position: absolute; z-index: 2; }
.sm-edge[data-side="t"] { top: -3px; left: 4px; right: 4px; height: 7px; cursor: ns-resize; }
.sm-edge[data-side="b"] { bottom: -3px; left: 4px; right: 4px; height: 7px; cursor: ns-resize; }
.sm-edge[data-side="l"] { left: -3px; top: 4px; bottom: 4px; width: 7px; cursor: ew-resize; }
.sm-edge[data-side="r"] { right: -3px; top: 4px; bottom: 4px; width: 7px; cursor: ew-resize; }
.sm-edge:hover { background: rgba(66,133,244,.25); border-radius: 2px; }

@media print {
    .sidebar, .header, .mobile-tabs, .mobile-more-sheet, .breadcrumb,
    .page-header, .filter-bar, #smEditToggle, #smPrintBtn { display: none !important; }
    .app-layout { display: block !important; }
    .page-container { padding: 0 !important; margin: 0 !important; }
    .sm-view-header { font-size: 18px; margin-bottom: 8px; }
    .sm-table { table-layout: auto; }
    .sm-cell { border: 1px solid #999; padding: 4px 6px; min-width: 80px; }
    .sm-product-img { width: 16px; height: 16px; }
    .sm-product-name { font-size: 10px; }
    .sm-product-qty { font-size: 10px; }
}

/* ─── Label Editor ─── */
/* ─── Label Editor ─── */
.le-topbar { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--bm-border); margin-bottom:0; }
.le-title-input { border:none; background:none; font-size:20px; font-weight:700; color:var(--bm-text-1); font-family:var(--font-main); outline:none; min-width:200px; border-bottom:2px solid var(--bm-primary); padding:4px 0; }
.le-title-input::placeholder { color:var(--bm-text-3); }

.le-body { display:flex; height:calc(100vh - 180px); min-height:500px; }
.le-canvas-area { flex:1; display:flex; flex-direction:column; position:relative; background:#f1f3f5; }
.le-canvas-scroll { flex:1; display:flex; justify-content:center; align-items:center; overflow:auto; padding:40px; }
.le-canvas { position:relative; background:#fff; border:1px dashed #c8cdd7; box-shadow:0 4px 20px rgba(0,0,0,.08); border-radius:2px; }

.le-bottom-toolbar { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:4px; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.12); padding:8px 12px; z-index:5; }
.le-tool-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; border-radius:8px; background:transparent; font-size:15px; color:var(--bm-text-2); cursor:pointer; transition:all .15s; }
.le-tool-btn:hover { background:var(--bm-bg-2); color:var(--bm-text-1); }

.le-zoom-bar { position:absolute; bottom:20px; left:16px; z-index:5; }
.le-zoom-select { padding:6px 10px; border:1px solid var(--bm-border); border-radius:8px; background:#fff; font-size:12px; font-family:var(--font-main); color:var(--bm-text-2); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.08); }

.le-el { position:absolute; border:1px dashed transparent; cursor:move; }
.le-el:hover { border-color:#93c5fd; }
.le-el.selected { border:2px solid var(--bm-primary); z-index:10; }
.le-el-content { width:100%; height:100%; overflow:hidden; display:flex; align-items:center; pointer-events:none; }

.le-handle { position:absolute; width:8px; height:8px; background:#fff; border:2px solid var(--bm-primary); border-radius:2px; z-index:11; }
.le-h-nw { top:-4px; left:-4px; cursor:nw-resize; }
.le-h-ne { top:-4px; right:-4px; cursor:ne-resize; }
.le-h-sw { bottom:-4px; left:-4px; cursor:sw-resize; }
.le-h-se { bottom:-4px; right:-4px; cursor:se-resize; }
.le-h-n { top:-4px; left:50%; margin-left:-4px; cursor:n-resize; }
.le-h-s { bottom:-4px; left:50%; margin-left:-4px; cursor:s-resize; }
.le-h-w { top:50%; left:-4px; margin-top:-4px; cursor:w-resize; }
.le-h-e { top:50%; right:-4px; margin-top:-4px; cursor:e-resize; }

.le-panel { width:280px; flex:none; border-left:1px solid var(--bm-border); background:var(--bm-bg-1); overflow-y:auto; }
.le-panel-inner { padding:20px; }
.le-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.le-panel-type { font-size:15px; font-weight:700; color:var(--bm-text-1); }
.le-panel-del { border:none; background:none; cursor:pointer; color:var(--bm-text-3); padding:4px; }
.le-panel-del:hover { color:var(--bm-danger); }
.le-panel-section { margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--bm-border); }
.le-panel-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }

.le-var-link { font-size:12px; color:var(--bm-primary); text-decoration:none; cursor:pointer; float:right; }
.le-var-link:hover { text-decoration:underline; }

.le-inline-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--bm-text-2); }
.le-small-input { width:64px !important; padding:5px 8px !important; font-size:13px !important; text-align:center; }
.le-icon-btn { width:32px; height:32px; border:1px solid var(--bm-border); border-radius:var(--bm-radius); background:var(--bm-bg-1); cursor:pointer; font-size:14px; color:var(--bm-text-2); display:flex; align-items:center; justify-content:center; }
.le-icon-btn.active { background:var(--bm-primary); color:#fff; border-color:var(--bm-primary); }
.le-align-group { display:flex; border:1px solid var(--bm-border); border-radius:var(--bm-radius); overflow:hidden; }
.le-align-btn { flex:1; padding:7px 0; border:none; border-right:1px solid var(--bm-border); background:var(--bm-bg-1); cursor:pointer; color:var(--bm-text-2); font-size:13px; }
.le-align-btn:last-child { border-right:none; }
.le-align-btn.active { background:var(--bm-primary-light); color:var(--bm-primary); }
.le-align-btn:hover:not(.active) { background:var(--bm-bg-2); }
.le-checkbox { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--bm-text-1); cursor:pointer; }
.le-checkbox input { width:16px; height:16px; accent-color:var(--bm-primary); cursor:pointer; }
.le-color-input { width:36px; height:32px; border:1px solid var(--bm-border); border-radius:var(--bm-radius); cursor:pointer; padding:2px; }

.le-pos-section { background:var(--bm-bg-2); margin:0 -20px -20px; padding:12px 20px !important; border-bottom:none !important; border-radius:0; }
.le-pos-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.le-pos-grid label { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--bm-text-3); font-weight:600; }
.le-pos-input { width:60px !important; padding:3px 5px !important; font-size:11px !important; text-align:center; }

@media (max-width:768px) {
    .le-body { flex-direction:column; height:auto; }
    .le-panel { width:100%; border-left:none; border-top:1px solid var(--bm-border); }
    .le-bottom-toolbar { position:static; transform:none; margin:12px auto; }
    .le-zoom-bar { position:static; margin:0 0 12px 16px; }
}

/* Settings frozen (readonly) */
.settings-frozen { opacity:.45; filter:grayscale(.3); user-select:none; }

/* Product Drawer Detail Layout */
.drawer-detail-layout { display: flex; gap: 24px; }
.drawer-detail-left { flex: 1; min-width: 0; }
.drawer-detail-right { flex: 0 0 280px; }

/* ── Mobile Optimization ── */
@media (max-width: 768px) {
    /* 0. 고정 높이 해제 — 세로 배치 시 겹침 방지 */
    .filter-bar { height: auto; padding: 12px 0; gap: 8px; }
    .page-header { height: auto; padding: 16px 0 12px; flex-wrap: wrap; gap: 8px; }
    .page-actions { width: 100%; justify-content: flex-end; }
    .product-columns { max-height: none; }

    /* 0-1. 터치 타겟 44px 보정 */
    .btn { min-height: 44px; }
    .form-input, .form-select { min-height: 44px; }
    .nav-item { min-height: 44px; }
    .dropdown-item { min-height: 44px; display: flex; align-items: center; }

    /* 1. 입출고 폼 세로 배치 */
    .tx-form-section { width: 100%; }
    .tx-form-row { flex-direction: column; align-items: stretch; }
    .tx-form-label { width: auto; margin-bottom: 4px; }
    .tx-form-input { width: 100%; margin-left: 0; }
    .tx-form-input .form-input,
    .tx-form-input .form-select { width: 100%; }
    .tx-form-input .tx-partner-wrap { width: 100%; }

    /* 입출고 제품 목록 바 */
    .tx-product-bar { height: auto; padding: 12px 0; flex-wrap: wrap; gap: 8px; }
    .tx-product-bar-actions { flex-wrap: wrap; gap: 6px; }
    .tx-product-bar-actions .btn { font-size: 12px; padding: 0 10px; height: 32px; min-height: 32px; }

    /* 입출고 테이블 */
    .tx-table { table-layout: auto; }
    .tx-table thead th { padding: 8px 6px; font-size: 13px; }
    .tx-table thead th:first-child { width: 28px; }
    .tx-table thead th:nth-child(3) { width: auto; padding-left: 6px; }
    .tx-table thead th:nth-child(4) { width: auto; padding-left: 6px; }
    .tx-table tbody td { padding: 8px 6px; }
    .tx-table tbody td:first-child { width: 28px; }
    .tx-table tbody td:nth-child(3) { padding-left: 6px; }
    .tx-table tbody td:nth-child(4) { padding-left: 6px; }
    .tx-cart-product img, .tx-cart-product > div:first-child { width: 28px !important; height: 28px !important; }
    .tx-footer-count, .tx-footer-total { font-size: 14px; padding-left: 6px; }

    /* 1. 발주서/판매서 폼 세로 배치 */
    .bh-form-row { flex-direction: column; align-items: stretch; }
    .bh-form-label { width: auto; padding-top: 0; padding-right: 0; margin-bottom: 4px; }

    /* 3. 헤더 모바일 정리 */
    .header-user-label { display: none; }
    .header-user-avatar { width: 28px; height: 28px; }
    .header-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    /* drawer 모바일 전체화면 */
    .drawer { width: 100vw; }
    .drawer-body { padding: 16px; }
    .drawer-header { padding: 16px; }
    .drawer-footer { padding: 12px 16px; }
    .drawer-backdrop.show .drawer.drawer-stacked { transform: translateX(0); }

    /* 제품 상세 drawer 세로 배치 */
    .drawer-detail-layout { flex-direction: column; gap: 16px; }
    .drawer-detail-right { flex: none; }

    /* 페이지 액션 버튼 축소 */
    .page-actions .btn { font-size: 12px; padding: 0 10px; height: 32px; min-height: 32px; }
    .page-actions .btn i { margin-right: 2px; }

    /* 재고 부족 알림 — 세로 배치 */
    .ls-item { flex-direction: column; align-items: stretch; gap: 8px; }
    .ls-item-nums { justify-content: space-between; }
    .ls-item-col { width: auto; flex: 1; text-align: center; }

    /* 날짜 범위 피커 — 바텀시트 */
    .date-range-picker {
        position: fixed; left: 0 !important; right: 0 !important; bottom: 0; top: auto;
        margin-top: 0; border-radius: 16px 16px 0 0;
        max-height: 80vh; overflow-y: auto; z-index: 500;
        padding: 20px 16px env(safe-area-inset-bottom, 16px);
    }

    /* 4. 발주서 상세 요약 반응형 */
    .od-summary { min-width: unset; width: 100%; margin-left: 0; margin-top: 16px; }
    .od-info-section { flex-direction: column; }
    .od-action-buttons { width: 100%; justify-content: flex-end; }
    .od-title { font-size: 18px; }
}

/* 6. 분석 카드 — 좁은 화면 1컬럼 */
@media (max-width: 480px) {
    .analytics-grid { grid-template-columns: 1fr; }
}