/**
 * Dropship Module Styles
 * Extracted from inline styles in Modules/DropShip/resources/views/
 *
 * Sections:
 * 1. Orders - List, Create, Show, Import Modal
 * 2. Packages
 * 3. Accessories
 * 4. Inventory - Tabs, Status Badges
 * 5. Customer Detail
 * 6. Common Components
 */

/* ==========================================================================
   1. ORDERS
   ========================================================================== */

/* --- Order List (index) --- */

.ds-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.ds-filter-form .ds-filter-field {
    flex: 1;
}

.ds-filter-form .ds-filter-select {
    min-width: 180px;
}

.ds-filter-form .ds-filter-status {
    min-width: 160px;
}

.ds-order-link {
    color: #1a237e;
    font-weight: 600;
}

.ds-order-link:hover {
    color: #0d1259;
}

.ds-buyer-link {
    color: #1565c0;
    text-decoration: none;
}

.ds-buyer-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}

.ds-buyer-link .ds-external-icon {
    font-size: 10px;
    opacity: 0.5;
}

/* --- Order Show (detail) --- */

/* Action buttons */
.ds-btn-processing {
    background: linear-gradient(135deg, #1a237e, #3f51b5);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
}

.ds-btn-processing:hover {
    background: linear-gradient(135deg, #0d1259, #303f9f);
    color: #fff;
}

.ds-btn-complete {
    background: linear-gradient(135deg, #1b5e20, #43a047);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
}

.ds-btn-complete:hover {
    background: linear-gradient(135deg, #145218, #388e3c);
    color: #fff;
}

.ds-btn-cancel {
    background: #fff;
    color: #d32f2f;
    border: 2px solid #d32f2f;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
}

.ds-btn-cancel:hover {
    background: #d32f2f;
    color: #fff;
}

.ds-action-row {
    gap: 10px 0;
}

/* --- Status Timeline (order show) --- */

.ds-timeline {
    padding: 16px 20px;
}

.ds-timeline-item {
    gap: 12px;
}

.ds-timeline-icon-col {
    width: 36px;
    flex-shrink: 0;
}

.ds-timeline-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-timeline-icon i {
    font-size: 14px;
}

.ds-timeline-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: #e0e0e0;
    margin: 4px 0;
}

.ds-timeline-content {
    flex: 1;
}

.ds-timeline-content--spacing {
    padding-bottom: 16px;
}

.ds-timeline-status {
    font-size: 13px;
}

.ds-timeline-note {
    font-size: 12px;
    color: #555;
    margin-top: 2px;
}

.ds-timeline-meta {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

.ds-timeline-empty-icon {
    font-size: 24px;
    opacity: 0.3;
}

/* Timeline icon backgrounds by status */
.ds-timeline-icon--new       { background: #eceff1; }
.ds-timeline-icon--processing { background: #e3f2fd; }
.ds-timeline-icon--confirmed  { background: #e8f5e9; }
.ds-timeline-icon--producing  { background: #fff3e0; }
.ds-timeline-icon--canceled   { background: #fce4ec; }
.ds-timeline-icon--shipping   { background: #e1f5fe; }
.ds-timeline-icon--delivered   { background: #e8f5e9; }
.ds-timeline-icon--completed   { background: #e8f5e9; }

/* Timeline icon colors */
.ds-timeline-icon-color--new       { color: #78909c; }
.ds-timeline-icon-color--processing { color: #1565c0; }
.ds-timeline-icon-color--confirmed  { color: #2e7d32; }
.ds-timeline-icon-color--producing  { color: #e65100; }
.ds-timeline-icon-color--canceled   { color: #c62828; }
.ds-timeline-icon-color--shipping   { color: #0277bd; }
.ds-timeline-icon-color--delivered   { color: #2e7d32; }
.ds-timeline-icon-color--completed   { color: #1b5e20; }

/* --- Cancel Order Modal --- */

#cancelOrderModal .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

#cancelOrderModal .modal-header.ds-cancel-header {
    background: linear-gradient(135deg, #c62828, #e53935) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

#cancelOrderModal .modal-header.ds-cancel-header .modal-title {
    color: #fff;
}

#cancelOrderModal .modal-header.ds-cancel-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
    font-size: 24px;
}

#cancelOrderModal .modal-header.ds-cancel-header .close:hover {
    opacity: 1;
}

.ds-cancel-modal-body {
    padding: 24px;
}

.ds-cancel-icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fce4ec;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.ds-cancel-icon-circle i {
    font-size: 28px;
    color: #d32f2f;
}

.ds-cancel-modal-footer {
    border-top: 1px solid #eee;
    padding: 16px 24px;
}

.ds-modal-btn {
    border-radius: 8px;
    padding: 8px 20px;
}

.ds-modal-btn--confirm {
    font-weight: 600;
}

.ds-modal-input {
    border-radius: 8px;
}

/* --- Import Modal --- */

#importExcelModal .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

#importExcelModal .modal-header.ds-modal-header {
    background: linear-gradient(135deg, #1a237e, #3f51b5) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

#importExcelModal .modal-header.ds-modal-header .modal-title {
    color: #fff;
}

#importExcelModal .modal-header.ds-modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

#importExcelModal .modal-header.ds-modal-header .close:hover {
    opacity: 1;
}

#importExcelModal .modal-body {
    padding: 24px;
}

#importExcelModal .modal-footer {
    border-top: 1px solid #eee;
    padding: 16px 24px;
}

#importPreviewArea {
    max-height: 320px;
    overflow-y: auto;
}

#importPreviewArea table th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.ds-import-file-info {
    background: #e8f5e9;
    gap: 10px;
}

.ds-import-file-info .ds-file-icon {
    font-size: 24px;
    color: #2e7d32;
}

.ds-import-instructions {
    background: #f5f5f5;
}

.ds-import-instructions ol {
    padding-left: 18px;
}

.ds-import-result-success {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    border-radius: 10px;
    padding: 16px;
}

.ds-import-result-success .ds-result-icon {
    font-size: 24px;
    color: #2e7d32;
}

.ds-import-result-success .ds-result-title {
    font-size: 16px;
    color: #2e7d32;
}

.ds-import-result-success .ds-result-stats {
    display: flex;
    gap: 20px;
}

.ds-import-result-error {
    border-radius: 10px;
    padding: 12px 16px;
    max-height: 200px;
    overflow-y: auto;
}

.ds-import-result-fail {
    border-radius: 10px;
    padding: 16px;
}

.ds-import-result-fail .ds-result-icon {
    font-size: 24px;
}

.ds-import-result-fail .ds-result-title {
    font-size: 16px;
}

/* --- Order Create --- */

.ds-mockup-preview {
    background: #f0f4ff;
    border: 1px solid #c5cae9;
}

.ds-mockup-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
}


/* ==========================================================================
   2. PACKAGES
   ========================================================================== */

/* Package type badges - already handled by Bootstrap .badge */

/* No unique inline styles beyond common patterns */


/* ==========================================================================
   3. ACCESSORIES
   ========================================================================== */

.ds-accessory-thumb {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.ds-accessory-thumb-placeholder {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.ds-accessory-detail-thumb {
    max-width: 120px;
    max-height: 120px;
    object-fit: cover;
}

.ds-accessory-detail-thumb-placeholder {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.ds-thumbnail-preview img {
    max-width: 150px;
    max-height: 150px;
}


/* ==========================================================================
   4. INVENTORY - Tabs, Status Badges
   ========================================================================== */

.ds-status-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 0;
    padding: 0 16px;
}

.ds-status-tab {
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
    outline: none;
    position: relative;
}

.ds-status-tab:hover {
    color: #1a237e;
    background: #f0f2ff;
}

.ds-status-tab.active {
    color: #1a237e;
    font-weight: 700;
    border-bottom: 3px solid #1a237e;
    background: #f0f2ff;
}

.ds-status-tab[data-status="in_stock"].active {
    color: #2e7d32;
    border-bottom-color: #2e7d32;
    background: #f0faf0;
}

.ds-status-tab[data-status="low_stock"].active {
    color: #e65100;
    border-bottom-color: #e65100;
    background: #fff8f0;
}

.ds-status-tab[data-status="out_of_stock"].active {
    color: #c62828;
    border-bottom-color: #c62828;
    background: #fff5f5;
}

.ds-status-tab .ds-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 7px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: #eee;
    color: #999;
    transition: all 0.2s;
}

.ds-status-tab.active .ds-tab-count {
    background: #1a237e;
    color: #fff;
    box-shadow: 0 2px 6px rgba(26, 35, 126, 0.3);
}

.ds-status-tab[data-status="in_stock"].active .ds-tab-count {
    background: #2e7d32;
    box-shadow: 0 2px 6px rgba(46, 125, 50, 0.3);
}

.ds-status-tab[data-status="low_stock"].active .ds-tab-count {
    background: #e65100;
    box-shadow: 0 2px 6px rgba(230, 81, 0, 0.3);
}

.ds-status-tab[data-status="out_of_stock"].active .ds-tab-count {
    background: #c62828;
    box-shadow: 0 2px 6px rgba(198, 40, 40, 0.3);
}

/* Inventory status icon colors */
.ds-icon-in-stock {
    color: #2e7d32;
}

.ds-icon-low-stock {
    color: #e65100;
}

.ds-icon-out-of-stock {
    color: #c62828;
}


/* ==========================================================================
   5. CUSTOMER DETAIL
   ========================================================================== */

.ds-customer-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a237e, #3f51b5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.ds-customer-avatar span {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
}

.ds-customer-info-item {
    gap: 10px;
}

.ds-customer-info-icon {
    width: 20px;
}

.ds-customer-info-icon--address {
    width: 20px;
    margin-top: 3px;
}

/* Stat Cards */
.ds-stat-card {
    gap: 14px;
}

.ds-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ds-stat-icon i {
    font-size: 20px;
}

.ds-stat-icon--orders {
    background: #e3f2fd;
}

.ds-stat-icon--orders i {
    color: #1565c0;
}

.ds-stat-icon--spent {
    background: #e8f5e9;
}

.ds-stat-icon--spent i {
    color: #2e7d32;
}

.ds-stat-icon--items {
    background: #fff3e0;
}

.ds-stat-icon--items i {
    color: #e65100;
}

.ds-stat-label {
    font-size: 12px;
}

.ds-stat-value {
    font-size: 22px;
    font-weight: 700;
}

.ds-stat-value--orders {
    color: #1a237e;
}

.ds-stat-value--spent {
    color: #2e7d32;
}

.ds-stat-value--items {
    color: #e65100;
}

/* Order summary bar */
.ds-summary-bar {
    gap: 20px;
}


/* ==========================================================================
   6. COMMON COMPONENTS
   ========================================================================== */

/* Status badge color map (used across multiple views) */
/* These map order status codes to Bootstrap badge variants:
   1 => secondary (New/Pending)
   2 => info (Processing)
   3 => primary (Confirmed)
   4 => warning (In Producing)
   7 => danger (Canceled)
   11 => info (In Transit/Shipping)
   12 => success (Delivered)
   13 => success (Completed)
*/

/* Gradient header used across modals */
.ds-gradient-header--primary {
    background: linear-gradient(135deg, #1a237e, #3f51b5) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

.ds-gradient-header--primary .modal-title {
    color: #fff;
}

.ds-gradient-header--primary .close,
.ds-gradient-header--primary .btn-close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

.ds-gradient-header--primary .close:hover,
.ds-gradient-header--primary .btn-close:hover {
    opacity: 1;
}

.ds-gradient-header--danger {
    background: linear-gradient(135deg, #c62828, #e53935) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
}

.ds-gradient-header--danger .modal-title {
    color: #fff;
}

.ds-gradient-header--danger .close,
.ds-gradient-header--danger .btn-close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
    font-size: 24px;
}

.ds-gradient-header--danger .close:hover,
.ds-gradient-header--danger .btn-close:hover {
    opacity: 1;
}

/* Rounded modal */
.ds-modal-rounded .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
}

/* AI Analysis box hover effects (from order show/dashboard) */
.ds-ai-box {
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ds-ai-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dashboard cards */
.ds-dashboard-metric {
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ds-dashboard-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Fade-in animation for lazy-loaded rows */
.ds-fade-in {
    animation: dsFadeIn 0.3s ease-in;
}

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

/* Load more / end indicators */
.ds-load-more {
    text-align: center;
    padding: 20px 0;
}

.ds-end-message {
    text-align: center;
    padding: 16px 0;
    color: #888;
    font-size: 13px;
}

/* --- Status Icon Colors --- */
.ds-icon-in-stock { color: #2e7d32; }
.ds-icon-low-stock { color: #e65100; }
.ds-icon-out-of-stock { color: #c62828; }

/* --- Menu Badge --- */
.ds-menu-badge-new {
    background: linear-gradient(135deg, #e53935, #ff5722);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 4px;
    letter-spacing: 0.5px;
    vertical-align: middle;
}


/* ==========================================================================
   7. ORDER CREATE / EDIT - Items, Product Search, Warehouse Dropdown
   ========================================================================== */

/* Shipping Type Tabs */
.ds-shipping-tabs { display: inline-flex; background: #f4f6f8; border-radius: 10px; overflow: hidden; border: 1px solid #e2e6ea; }
.ds-shipping-tab {
    padding: 10px 24px; font-size: 13px; font-weight: 500; color: #666; cursor: pointer;
    margin: 0; transition: all 0.15s; display: flex; align-items: center; gap: 6px;
}
.ds-shipping-tab:hover { color: #333; background: #eee; }
.ds-shipping-tab.active { background: var(--sp-primary, #00962a); color: #fff !important; font-weight: 600; }
.ds-shipping-tab.active i { color: #fff !important; }

/* Label Action Boxes */
.ds-label-action-box {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    background: #f8f9fe; border: 1px solid #e8eaf6; border-radius: 10px;
}
.ds-label-action-icon {
    width: 40px; height: 40px; border-radius: 10px; background: #e8eaf6; color: #3f51b5;
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.ds-label-action-info { flex-grow: 1; }
.ds-label-action-info strong { font-size: 13px; }
.ds-label-action-info small { font-size: 11px; }

/* Item Blocks */
.ds-item-block { background: #f8f9fe; border: 1px solid #e8eaf6; border-radius: 12px; padding: 20px; margin-bottom: 16px; position: relative; transition: all 0.2s; }
.ds-item-block:hover { border-color: #c5cae9; box-shadow: 0 2px 8px rgba(63,81,181,0.06); }
.ds-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid #e8eaf6; }
.ds-item-number { font-size: 13px; font-weight: 600; color: #3f51b5; display: flex; align-items: center; gap: 8px; }
.ds-item-number .ds-item-badge { background: #3f51b5; color: #fff; width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.ds-item-fields { display: grid; grid-template-columns: 2fr 120px 100px 80px 90px; gap: 12px; align-items: end; }
.ds-item-fields .ds-field label { font-size: 12px; font-weight: 500; color: #666; margin-bottom: 4px; display: block; }
.ds-item-fields .ds-field input { font-size: 13px; }
.ds-item-subtotal { font-size: 18px; font-weight: 700; color: #1a237e; padding: 6px 0; }
@media (max-width: 992px) { .ds-item-fields { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 768px) { .ds-item-fields { grid-template-columns: 1fr 1fr; } }

/* Product Search Combo */
.item-product-wrapper { position: relative; }
.item-product-dropdown {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 1050;
    background: #fff; border: 1px solid #c5cae9; border-radius: 8px;
    max-height: 240px; overflow-y: auto; box-shadow: 0 4px 16px rgba(63,81,181,0.13);
}
.item-product-option {
    padding: 7px 12px; cursor: pointer; font-size: 12px;
    border-bottom: 1px solid #f0f0f0; display: flex;
    justify-content: space-between; align-items: center; gap: 8px;
}
.item-product-option:last-child { border-bottom: none; }
.item-product-option:hover { background: #eef0ff; }
.item-product-option .opt-name { font-weight: 500; color: #222; flex: 1; }
.item-product-option .opt-meta { color: #888; font-size: 11px; white-space: nowrap; }
.item-product-option .opt-avail { color: #2e7d32; }
.item-product-no-result { padding: 12px; text-align: center; color: #aaa; font-size: 12px; }

/* Warehouse Custom Dropdown */
.wh-filter-wrapper { position: relative; min-width: 190px; max-width: 260px; }
.wh-filter-wrapper.w-100 { min-width: unset; max-width: unset; width: 100%; }
.wh-dropdown-list {
    display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 1060;
    background: #fff; border: 1px solid #c5cae9; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(63,81,181,.15); max-height: 300px; overflow-y: auto;
}
.wh-option { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f3f3f3; }
.wh-option:last-child { border-bottom: none; }
.wh-option:hover { background: #eef0ff; }
.wh-option-name { font-weight: 600; font-size: 13px; color: #333; }
.wh-option-addr { font-size: 11px; color: #888; margin-top: 1px; }
#warehouseSearchInput { font-size: 12px; cursor: pointer; background: #fff !important; }


/* ==========================================================================
   8. INVENTORY HISTORY - Tabs
   ========================================================================== */

.inv-tabs .nav-link { color: #555 !important; font-weight: 500; border: 1px solid transparent !important; border-radius: 4px 4px 0 0 !important; padding: 8px 16px; background: transparent !important; }
.inv-tabs .nav-link:hover { color: var(--sp-primary, #00962a) !important; background: #f0faf3 !important; border-color: #e0e0e0 !important; }
.inv-tabs .nav-link.active { color: #fff !important; background: var(--sp-primary, #00962a) !important; border-color: var(--sp-primary, #00962a) !important; font-weight: 600; }
.inv-tabs .nav-link.active:hover { color: #fff !important; background: var(--sp-primary, #00962a) !important; }
.inv-tabs .nav-link.active .badge { background: rgba(255,255,255,0.3) !important; }


/* ==========================================================================
   9. IMPORT MODAL (override)
   ========================================================================== */

#importExcelModal .modal-header.ds-modal-header {
    background: #fff !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 16px 20px !important;
}
#importExcelModal .modal-header.ds-modal-header .modal-title { color: #333; font-size: 16px; font-weight: 600; }
#importExcelModal .modal-header.ds-modal-header .close { color: #666; opacity: 0.7; text-shadow: none; font-size: 22px; }
#importExcelModal .modal-header.ds-modal-header .close:hover { opacity: 1; color: #333; }
#importExcelModal .modal-content { border-radius: 12px; overflow: hidden; border: none; }


/* ==========================================================================
   10. LAZY LOADING SKELETON
   ========================================================================== */

.ds-skeleton { position: relative; overflow: hidden; background: #f0f0f0; border-radius: 6px; }
.ds-skeleton::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: ds-shimmer 1.5s infinite;
}
@keyframes ds-shimmer { 0% { left: -100%; } 100% { left: 100%; } }
.ds-skeleton-row td { padding: 14px 10px !important; }
.ds-skeleton-bar { height: 14px; margin: 3px 0; }
.ds-skeleton-bar.w-75 { width: 75%; }
.ds-skeleton-bar.w-50 { width: 50%; }
.ds-skeleton-bar.w-30 { width: 30%; }
.ds-skeleton-badge { width: 60px; height: 22px; border-radius: 12px; }
.ds-skeleton-btn { width: 30px; height: 30px; border-radius: 6px; }
.ds-skeleton-card { padding: 20px; }
.ds-skeleton-circle { border-radius: 50%; }


/* ==========================================================================
   11. MARKETPLACE
   ========================================================================== */

/* Skeleton shimmer for marketplace */
.cj-skeleton {
    background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
    background-size: 200% 100%;
    animation: cjShimmer 1.4s infinite;
    border-radius: 4px;
}
@keyframes cjShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cj-grid { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.cj-grid-item { padding-left: 10px; padding-right: 10px; margin-bottom: 20px; width: 16.6667%; }
@media (max-width: 1400px) { .cj-grid-item { width: 25%; } }
@media (max-width: 992px)  { .cj-grid-item { width: 33.3333%; } }
@media (max-width: 768px)  { .cj-grid-item { width: 50%; } }
@media (max-width: 480px)  { .cj-grid-item { width: 100%; } }

.cj-card { border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: box-shadow 0.2s, transform 0.15s; cursor: pointer; background: #fff; display: flex; flex-direction: column; height: 100%; }
.cj-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.10); transform: translateY(-3px); }
.cj-card-img { width: 100%; height: 175px; object-fit: cover; background: #f8f8f8; flex-shrink: 0; }
.cj-card-body { padding: 10px 12px 8px; flex: 1; }
.cj-card-supplier { font-size: 11px; color: #888; margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.cj-card-supplier .badge { font-size: 9px; padding: 2px 5px; border-radius: 3px; font-weight: 600; flex-shrink: 0; }
.cj-card-title { font-size: 13px; font-weight: 600; line-height: 1.35; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #222; }
.cj-card-meta {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #f0f0f0;
    font-size: 11px;
    gap: 10px;
}
.cj-card-meta > div {
    min-width: 0;
}
.cj-card-meta .meta-label {
    color: #aaa;
    display: block;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
}
.cj-card-meta .meta-value {
    font-weight: 700;
    color: #333;
    line-height: 1.4;
    white-space: nowrap;
}
.cj-card-meta .meta-growth-positive { color: #16a34a; }
.cj-card-meta .meta-growth-negative { color: #dc2626; }
.cj-card-meta .meta-action {
    margin-left: auto;
    flex-shrink: 0;
}
.cj-collection-card { border-radius: 12px; overflow: hidden; position: relative; cursor: pointer; }
.cj-collection-card img { width: 100%; height: 140px; object-fit: cover; }
.cj-collection-card .cj-coll-info { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #eee; border-top: 0; border-radius: 0 0 12px 12px; }
.cj-collection-card .cj-coll-name { font-weight: 600; font-size: 13px; }
.cj-collection-card .cj-coll-count { font-size: 11px; color: #888; }
.cj-empty-state { text-align: center; padding: 60px 20px; }
.cj-empty-state i { color: #ccc; margin-bottom: 16px; }


/* ==========================================================================
   12. STORE LIST
   ========================================================================== */

.platform-card:hover { border-color: #6c63ff !important; background: #f8f7ff; }
.platform-card.selected { border-color: #6c63ff !important; background: #f0eeff; box-shadow: 0 0 0 2px rgba(108,99,255,0.2); }
.badge-activate { background: #e6f9ee; color: #22c55e; padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 12px; display: inline-block; }
.badge-deactivate { background: #fde8e8; color: #ef4444; padding: 4px 12px; border-radius: 20px; font-weight: 600; font-size: 12px; display: inline-block; }
#storeTable th { font-size: 12px; text-transform: uppercase; color: #666; font-weight: 600; white-space: nowrap; }
.skeleton-line {
    height: 14px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    width: 80%;
}
.skeleton-row td:first-child .skeleton-line { width: 20px; }
.skeleton-row td:nth-child(4) .skeleton-line { width: 60%; }
.skeleton-row td:nth-child(5) .skeleton-line { width: 70px; margin: 0 auto; }
@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ==========================================================================
   13. MARKETPLACE — FIND PRODUCTS
   Migrated from inline <style> in marketplace/index.blade.php
   ========================================================================== */

/* Tab nav */
#pdTabs .pd-tab {
    color: #888;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: color .15s, border-color .15s;
}
#pdTabs .pd-tab:hover  { color: #444; border-bottom-color: #ccc; }
#pdTabs .pd-tab.active { color: #3d59e8; border-bottom-color: #3d59e8; }

/* Variants grid */
.var-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.var-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: .15s;
    background: #fff;
}
.var-chip:hover           { border-color: #3d59e8; background: #f0f3ff; }
.var-chip.selected        { border-color: #3d59e8; background: #3d59e8; color: #fff; }
.var-chip .var-price      { font-weight: 700; }
.var-chip .var-stock      { font-size: 11px; opacity: .7; }

/* Shipping rate rows */
.rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: .15s;
}
.rate-row:hover    { border-color: #3d59e8; background: #f8f9ff; }
.rate-row.selected { border-color: #3d59e8; background: #f0f3ff; }
.rate-name  { font-weight: 600; font-size: 13px; }
.rate-days  { font-size: 12px; color: #888; }
.rate-price { font-weight: 700; font-size: 14px; color: #2e7d32; }
.rate-track { font-size: 11px; color: #888; margin-left: 6px; }

/* Shared shimmer keyframe (used by all skeleton classes) */
@keyframes mpShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Product card skeleton */
.cj-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200%;
    animation: mpShimmer 1.4s infinite;
    border-radius: 4px;
}

/* ==========================================================================
   14. MARKETPLACE — MY PRODUCTS
   Migrated from inline <style> in marketplace/my_product.blade.php
   ========================================================================== */

.mp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* Tab nav override for Bootstrap 4 (adds border-color on hover) */
#mpDetailModal .nav-tabs              { border-bottom: none; }
#mpDetailModal .nav-tabs .nav-link {
    border: 0 none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: #6c757d;
    font-size: 13px;
    padding: 10px 16px;
    background: none !important;
    margin-bottom: 0;
    cursor: pointer;
}
#mpDetailModal .nav-tabs .nav-link:hover,
#mpDetailModal .nav-tabs .nav-link:focus {
    border-bottom-color: #ced4da !important;
    color: #444;
    background: rgba(0,0,0,.03) !important;
}
#mpDetailModal .nav-tabs .nav-link.active {
    border-bottom: 2px solid #3d59e8 !important;
    border-top: 0 none !important;
    border-left: 0 none !important;
    border-right: 0 none !important;
    color: #3d59e8 !important;
    font-weight: 600;
    background: transparent !important;
}

/* Order table skeleton */
.mp-skel-row td { padding: 10px 8px; }
.mp-skel-bar {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: mpShimmer 1.4s infinite;
}

/* ==========================================================================
   15. SHARED UTILITIES
   ========================================================================== */

/* ── Width utilities (table columns, label widths) ─────────────────── */
.w-40px  { width:  40px !important; }
.w-50px  { width:  50px !important; }
.w-60px  { width:  60px !important; }
.w-70px  { width:  70px !important; }
.w-80px  { width:  80px !important; }
.w-100px { width: 100px !important; }
.w-120px { width: 120px !important; }
.w-130px { width: 130px !important; }
.w-140px { width: 140px !important; }
.w-150px { width: 150px !important; }
.w-160px { width: 160px !important; }

/* ── Border-radius utilities ────────────────────────────────────────── */
.br-6  { border-radius:  6px !important; }
.br-8  { border-radius:  8px !important; }
.br-10 { border-radius: 10px !important; }
.br-12 { border-radius: 12px !important; }
.br-14 { border-radius: 14px !important; }
.br-20 { border-radius: 20px !important; }

/* ── Table column helpers ────────────────────────────────────────────── */
.col-num     { width:  50px; text-align: center; }
.col-status  { width: 100px; text-align: center; }
.col-actions { width: 100px; text-align: center; white-space: nowrap; }
.td-toggle   { text-align: center; vertical-align: middle; }

/* ── Icon-only action buttons (28×28) ────────────────────────────────── */
.btn-icon-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

/* ── Modal header icon box (32×32) ──────────────────────────────────── */
.modal-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Status / tag pill badge ─────────────────────────────────────────── */
.ds-status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

/* ── Order item source-type pill ────────────────────────────────────── */
.ds-type-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.ds-type-inventory   { background: #f0fdf4; color: #16a34a; }
.ds-type-marketplace { background: #eef2ff; color: #4f46e5; }

/* ── Supplier fulfillment detail label ──────────────────────────────── */
.sf-detail-label {
    width: 105px;
    flex-shrink: 0;
    font-size: 13px;
    color: #6c757d;
}

/* ── Modal header background strip ──────────────────────────────────── */
.ds-modal-header {
    background: #f8f9fe;
    border-bottom: 1px solid #e8eaf6;
    padding: 14px 20px;
}

/* ── Spinner/loading button states ──────────────────────────────────── */
.btn .btn-text    { display: inline-flex; align-items: center; gap: 4px; }
.btn .btn-loading { display: none; align-items: center; gap: 6px; }

/* ══════════════════════════════════════════════════════════════════
   16. MARKETPLACE — PRODUCT IMAGE SLIDER (modal detail)
══════════════════════════════════════════════════════════════════ */

/* Main image wrapper */
.pd-slider-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    line-height: 0;
}

/* Main displayed image */
.pd-main-img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #f8f8f8;
    display: block;
    transition: opacity 0.15s ease;
}

/* Prev / Next arrow buttons */
.pd-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #333;
    font-size: 12px;
    transition: background 0.15s, box-shadow 0.15s;
}
.pd-slider-btn:hover { background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,0.24); }
.pd-slider-prev { left: 8px; }
.pd-slider-next { right: 8px; }

/* Thumbnail strip */
.pd-thumb-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.pd-thumb-strip::-webkit-scrollbar { height: 4px; }
.pd-thumb-strip::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.pd-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.65;
}
.pd-thumb:hover  { opacity: 0.9; border-color: #bbb; }
.pd-thumb.active { opacity: 1;   border-color: #3d59e8; }

/* Image counter "1 / 12" */
.pd-img-counter {
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════════════════════
   17. MARKETPLACE — RECOMMENDATIONS ROW
══════════════════════════════════════════════════════════════════ */

/* Horizontal scrollable row */
.rec-scroll-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}
.rec-scroll-row::-webkit-scrollbar { height: 5px; }
.rec-scroll-row::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* Individual recommendation card */
.rec-card {
    flex: 0 0 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.2s, transform 0.15s;
}
.rec-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); transform: translateY(-2px); }

.rec-img-wrap { width: 100%; height: 110px; overflow: hidden; background: #f8f8f8; }
.rec-img      { width: 100%; height: 110px; object-fit: cover; display: block; }

.rec-body  { padding: 7px 8px 6px; }
.rec-name  {
    font-size: 11px;
    color: #333;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}
.rec-price {
    font-size: 12px;
    font-weight: 700;
    color: #2e7d32;
}

/* Quick-add button (top-right corner) */
.rec-add-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    color: #555;
    opacity: 0;
    transition: opacity 0.15s;
}
.rec-card:hover .rec-add-btn { opacity: 1; }

/* ============================================================
   18. MARKETPLACE — SUPPLIER MONITOR PAGE
   ============================================================ */

/* Monitor data table */
.monitor-table { width:100%; border-collapse:collapse; font-size:13px; }
.monitor-table th { background:#f8f9fa; font-weight:600; padding:8px 10px; border-bottom:1px solid #e9ecef; white-space:nowrap; }
.monitor-table td { padding:7px 10px; border-bottom:1px solid #f0f0f0; vertical-align:top; }
.monitor-table tr:hover td { background:#fafbff; }
.monitor-table tbody tr[onclick]:hover td { background:#eef2ff; cursor:pointer; }
.monitor-table tr.expanded td { background:#f8f9fa; }

/* Status badges */
.status-badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600; }
.status-2xx { background:#d1fae5; color:#065f46; }
.status-4xx { background:#fef3c7; color:#92400e; }
.status-5xx { background:#fee2e2; color:#991b1b; }
.status-err { background:#fee2e2; color:#991b1b; }
.status-mth { background:#f3f4f6; color:#374151; } /* Method badge (GET/POST) */

/* Supplier badge */
.sup-badge { background:#eef2ff; color:#4338ca; border-radius:4px; padding:2px 6px; font-size:11px; font-weight:600; }

/* Signature validity indicators */
.sig-ok  { color:#059669; }
.sig-bad { color:#dc2626; }

/* Fulfillment timeline */
.tl-container { position:relative; padding-left:30px; }
.tl-container::before { content:''; position:absolute; left:10px; top:0; bottom:0; width:2px; background:#e5e7eb; }
.tl-item { position:relative; margin-bottom:16px; }
.tl-dot  { position:absolute; left:-24px; top:4px; width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px currentColor; }
.tl-dot.queued   { color:#f59e0b; }
.tl-dot.sent     { color:#3b82f6; }
.tl-dot.success  { color:#10b981; }
.tl-dot.failed   { color:#ef4444; }
.tl-dot.changed  { color:#8b5cf6; }
.tl-dot.tracking { color:#0ea5e9; }
.tl-dot.webhook  { color:#f97316; }
.tl-dot.default  { color:#9ca3af; }
.tl-time  { font-size:11px; color:#9ca3af; }
.tl-label { font-size:13px; font-weight:600; }
.tl-notes { font-size:12px; color:#6b7280; }
.tl-sup   { font-size:11px; }

/* Monitor tab nav */
#monitorTabs .nav-link {
    color: #6b7280;
    border: 1px solid transparent;
    border-bottom: none;
    transition: color .15s, background .15s, border-color .15s;
}
#monitorTabs .nav-link:hover:not(.active) {
    color: #4f46e5 !important;
    background: #f5f4ff;
    border-color: #e5e7eb #e5e7eb transparent;
}
#monitorTabs .nav-link.active {
    color: #4f46e5 !important;
    font-weight: 600;
    background: #fff !important;
    border-color: #e9ecef #e9ecef #fff;
}

/* JSON expand panel */
.json-expand { display:none; background:#1e1e2e; color:#cdd6f4; border-radius:6px; padding:10px; margin-top:6px; font-size:11px; overflow-x:auto; max-height:300px; }
.json-expand.visible { display:block; }

/* ============================================================
   19. MARKETPLACE — MY PRODUCT POPUP
   ============================================================ */

/* Image slider */
.mp-slider-wrap { position:relative; background:#f5f5f5; border-radius:10px; overflow:hidden; aspect-ratio:1/1; }
.mp-main-img    { width:100%; height:100%; object-fit:contain; display:block; }
.mp-slider-btn  { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85);
                  border:none; border-radius:50%; width:32px; height:32px; display:flex; align-items:center;
                  justify-content:center; cursor:pointer; z-index:2; box-shadow:0 1px 4px rgba(0,0,0,.15);
                  font-size:12px; color:#333; transition:background .15s; }
.mp-slider-btn:hover { background:#fff; }
.mp-slider-prev { left:8px; }
.mp-slider-next { right:8px; }
.mp-thumb-strip { display:flex; gap:5px; margin-top:8px; overflow-x:auto; padding-bottom:2px; }
.mp-thumb       { width:44px; height:44px; object-fit:cover; border-radius:6px; cursor:pointer;
                  border:2px solid transparent; flex-shrink:0; transition:border-color .15s; }
.mp-thumb.active,.mp-thumb:hover { border-color:#0d6efd; }
.mp-img-counter { font-size:11px; color:#888; text-align:center; margin-top:4px; }

/* Product popup tabs */
.mp-tab-nav     { background:#f8f9fa; border-bottom:2px solid #f0f0f0; padding:0 20px; }
.mp-tab-nav .nav { gap:4px; }
.mp-tab-link    { padding:8px 16px; font-weight:600; font-size:13px; color:#6c757d;
                  border:none; background:none; border-bottom:2px solid transparent;
                  margin-bottom:-2px; cursor:pointer; transition:color .15s, border-color .15s; border-radius:0; }
.mp-tab-link:hover:not(.active) { color:#495057; }
.mp-tab-link.active { color:#0d6efd; border-bottom-color:#0d6efd; }

/* Variant chips */
.mp-var-grid { display:flex; flex-wrap:wrap; gap:8px; }
.mp-var-chip { border:1px solid #dee2e6; border-radius:8px; padding:6px 10px; cursor:pointer;
               background:#fff; transition:all .15s; min-width:120px; }
.mp-var-chip:hover { border-color:#0d6efd; background:#f0f4ff; }
.mp-var-chip.selected { border-color:#0d6efd; background:#e8f0fe; }
.mp-var-price { display:block; font-weight:700; color:#0d6efd; font-size:13px; margin-top:2px; }
.mp-var-stock { display:block; font-size:11px; margin-top:1px; }

/* Skeleton loader */
.mp-skel-bar { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
               background-size:200% 100%; animation:mpSkel 1.4s infinite; border-radius:4px; display:block; }
@keyframes mpSkel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Generic badge used in product popups */
.mp-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }

/* ============================================================
   20. UTILITY — SHARED INLINE STYLE REPLACEMENTS
   ============================================================ */

/* Icon boxes (stat cards in DropShip / Marketplace views) */
.ds-icon-box {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ds-icon-box-blue   { background: #E3F2FD; }
.ds-icon-box-blue   i { color: #1565C0; }
.ds-icon-box-green  { background: #E8F5E9; }
.ds-icon-box-green  i { color: #2E7D32; }
.ds-icon-box-orange { background: #FFF3E0; }
.ds-icon-box-orange i { color: #E65100; }
.ds-icon-box-purple { background: #F3E5F5; }
.ds-icon-box-purple i { color: #6A1B9A; }
.ds-icon-box-red    { background: #FFEBEE; }
.ds-icon-box-red    i { color: #B71C1C; }
.ds-icon-box-teal   { background: #E0F2F1; }
.ds-icon-box-teal   i { color: #00695C; }
.ds-icon-box-indigo { background: #E8EAF6; }
.ds-icon-box-indigo i { color: #283593; }
.ds-icon-box-cyan   { background: #E0F7FA; }
.ds-icon-box-cyan   i { color: #00838F; }
.ds-icon-box-yellow { background: #FFFDE7; }
.ds-icon-box-yellow i { color: #F57F17; }

/* Icon size inside icon boxes */
.ds-icon-box i { font-size: 18px; }

/* Stat card values */
.ds-stat-value { font-size: 18px; line-height: 1.3; }
.ds-stat-label { font-size: 12px; white-space: nowrap; }

/* Filter form flex gap */
.ds-filter-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ds-filter-col  { flex: 1; min-width: 160px; }
.ds-filter-col-sm { min-width: 120px; }

/* Supplier badge (monitor table) — alias */
.mk-sup-badge { background: #eef2ff; color: #4338ca; border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 600; }

/* Inline badge color variants */
.mk-badge-indigo  { background: #eef2ff; color: #4f46e5; }
.mk-badge-green   { background: #e8f5e9; color: #2e7d32; }
.mk-badge-blue    { background: #e3f2fd; color: #1565c0; }
.mk-badge-orange  { background: #fff3e0; color: #e65100; }
.mk-badge-red     { background: #ffebee; color: #b71c1c; }
.mk-badge-gray    { background: #f3f4f6; color: #374151; }
.mk-badge-purple  { background: #f3e5f5; color: #6a1b9a; }
.mk-badge-teal    { background: #e0f2f1; color: #00695c; }

/* Monospace text for codes / endpoints */
.ds-mono { font-family: monospace; font-size: 12px; }

/* Table column width helpers */
.col-w-time    { white-space: nowrap; }
.col-w-action  { width: 80px; text-align: center; }
.col-w-status  { width: 100px; }
.col-w-amount  { text-align: right; }

/* Orders table header cell style (used in popup tables) */
.mp-th { font-size: 11px; font-weight: 600; color: #6c757d; border-top: none; }

/* Custom File Upload (Upload Documents section) */
.ds-file-upload { display: flex; align-items: center; gap: 10px; }
.ds-file-input  { display: none; }
.ds-file-label  {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; font-size: 13px; font-weight: 500;
    color: #6259ca; background: #f4f3ff;
    border: 1.5px dashed #6259ca; border-radius: 6px;
    cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
    user-select: none;
}
.ds-file-label:hover { background: #ebe9ff; }
.ds-file-name {
    font-size: 12px; color: #aaa; font-style: italic;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 160px;
}