/* TOOLBAR */
    .toolbar {
        display: flex;
        gap: 8px;
        margin-bottom: 0.875rem;
        flex-wrap: wrap;
        width: 100%;
    }

        .toolbar input {
            flex: 1;
            min-width: 160px;
            font-size: 14px;
            padding: 9px 12px;
            border: 0.5px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text);
            outline: none;
        }

        .toolbar select {
            flex-shrink: 0;
            width: 160px;
            font-size: 14px;
            padding: 9px 12px;
            border: 0.5px solid var(--border);
            border-radius: 8px;
            background: var(--surface);
            color: var(--text);
            outline: none;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /* CARDS */
    .card {
        background: var(--surface);
        border: 0.5px solid var(--border);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 0.75rem;
        cursor: pointer;
        transition: border-color 0.15s;
        overflow: hidden;
        min-width: 0;
    }

        .card:hover {
            border-color: rgba(0,0,0,0.2);
        }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 0.5rem;
    }

    .card-header > *:first-child {
        flex: 1;
        min-width: 0;
    }

    .card-title {
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .card-sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 2px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .card-fields {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 1.25rem;
        margin-top: 0.75rem;
    }

    .field-label {
        font-size: 11px;
        color: var(--muted);
    }

    .field-value {
        font-size: 13px;
        color: var(--text);
    }

    /* BADGE */
    .badge {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
    }

    .badge-success {
        background: var(--success-bg);
        color: var(--success);
    }

    .badge-danger {
        background: var(--danger-bg);
        color: var(--danger);
    }

    .badge-info {
        background: var(--accent-bg);
        color: var(--accent);
    }

    .badge-gray {
        background: #F1EFE8;
        color: #5F5E5A;
    }

    .badge-warning {
        background: var(--warning-bg);
        color: var(--warning);
    }

    /* DETAIL VIEW */
    .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        color: var(--accent);
        cursor: pointer;
        margin-bottom: 1rem;
        border: none;
        background: none;
    }

    .detail-card {
        background: var(--surface);
        border: 0.5px solid var(--border);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .detail-wrap {
        max-width: 720px;
        margin: 0 auto;
    }

    .cust-stat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 1rem;
    }

    .cust-stat-card {
        border: 0.5px solid var(--border);
        border-radius: var(--radius);
        padding: 1rem;
        min-width: 0;
    }

    .detail-section-title {
        font-size: 11px;
        font-weight: 500;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.75rem;
        padding-bottom: 6px;
        border-bottom: 0.5px solid var(--border);
    }

    .detail-rows {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
    }

    .detail-label {
        font-size: 12px;
        color: var(--muted);
        flex-shrink: 0;
    }

    .detail-value {
        font-size: 13px;
        font-weight: 500;
        text-align: right;
    }

    .action-row {
        display: flex;
        gap: 8px;
        margin-top: 1rem;
    }

    .action-btn {
        flex: 1;
        padding: 10px 4px;
        border: 0.5px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        font-size: 13px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: var(--text);
    }

        .action-btn.call {
            background: var(--accent);
            color: white;
            border-color: var(--accent);
        }

        .action-btn.whatsapp {
            background: #3B6D11;
            color: white;
            border-color: #3B6D11;
        }

    /* AVATAR */
    .cust-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        flex-shrink: 0;
    }

    /* STOCK BAR */
    .catalogue-bar-bg {
        background: #f1f0eb;
        border-radius: 4px;
        height: 5px;
        margin: 6px 0 4px;
    }

    .catalogue-bar {
        height: 5px;
        border-radius: 4px;
    }

    .catalogue-counts {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        color: var(--muted);
    }

    /* CARD GRID — responsive multi-column layout for list pages */
    .card-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        align-items: start;
    }

    .card-grid > .card {
        margin-bottom: 0;
    }

    @media (min-width: 1000px) {
        .card-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 640px) {
        .cust-stat-grid { grid-template-columns: 1fr; }
    }

    @media (min-width: 1400px) {
        .card-grid { grid-template-columns: repeat(3, 1fr); }
    }

    /* LOADING / EMPTY */
    .loading {
        text-align: center;
        padding: 2rem;
        color: var(--muted);
        font-size: 14px;
    }

    .empty {
        text-align: center;
        padding: 2rem;
        color: var(--muted);
        font-size: 14px;
    }

    /* CUSTOMER STATUS BANNER */
    .cust-status-banner {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 0.875rem;
    }

    /* CUSTOMER METRICS STRIP */
    .cust-metrics-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 0.875rem;
    }

    .cust-metric-box {
        background: var(--bg);
        border-radius: 8px;
        padding: 10px 10px;
        text-align: center;
    }

    .cust-metric-label {
        font-size: 10px;
        color: var(--muted);
        margin-bottom: 4px;
    }

    .cust-metric-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        word-break: break-all;
    }

    /* CUSTOMER TABS */
    .cust-tabs {
        display: flex;
        border-bottom: 1.5px solid var(--border);
        margin-bottom: 0.875rem;
    }

    .cust-tab {
        padding: 9px 18px;
        font-size: 13px;
        color: var(--muted);
        cursor: pointer;
        border: none;
        background: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1.5px;
        font-weight: 400;
        transition: color 0.15s;
    }

    .cust-tab.active {
        color: var(--accent);
        border-bottom-color: var(--accent);
        font-weight: 500;
    }

    /* BATCH ACTIVITY — flash for recently updated cards */
    @keyframes ba-flash {
        0%   { box-shadow: 0 0 0 0 rgba(24,95,165,0.5); }
        40%  { box-shadow: 0 0 0 5px rgba(24,95,165,0.15); }
        100% { box-shadow: 0 0 0 0 rgba(24,95,165,0); }
    }

    .ba-recent {
        animation: ba-flash 1.8s ease-out 3;
    }

    /* Flash red for stale (no update > 12h, not complete) */
    @keyframes ba-stale-flash {
        0%   { box-shadow: 0 0 0 0 rgba(163,45,45,0.6); }
        40%  { box-shadow: 0 0 0 6px rgba(163,45,45,0.15); }
        100% { box-shadow: 0 0 0 0 rgba(163,45,45,0); }
    }

    .ba-stale-alert {
        animation: ba-stale-flash 1.6s ease-out 5;
    }

    /* ── CUSTOMER INTELLIGENCE ───────────────────────────────────────────── */
    .ci-config {
        background: var(--surface);
        border: 0.5px solid var(--border);
        border-radius: var(--radius);
        padding: 14px 16px;
        margin-bottom: 1rem;
    }

    .ci-config-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .ci-metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 1rem;
    }

    .ci-metric {
        background: var(--surface);
        border: 0.5px solid var(--border);
        border-radius: var(--radius);
        padding: 12px 14px;
    }

    .ci-metric-label { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
    .ci-metric-value { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1; }
    .ci-metric-sub   { font-size: 11px; color: var(--muted); margin-top: 3px; }
    .ci-metric-danger .ci-metric-value { color: var(--danger); }
    .ci-metric-warning .ci-metric-value { color: var(--warning); }
    .ci-metric-good .ci-metric-value { color: var(--success); }

    .ci-alert-bar {
        background: var(--warning-bg);
        border: 0.5px solid #fcd34d;
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 12px;
        color: var(--warning);
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 1rem;
    }

    .ci-grid-3-1 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    .ci-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ci-panel-header {
        padding: 11px 14px;
        border-bottom: 0.5px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ci-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
    }

    .ci-dot-danger  { background: var(--danger); }
    .ci-dot-warning { background: #f59e0b; }
    .ci-dot-good    { background: var(--success); }
    .ci-dot-info    { background: var(--accent); }

    .ci-tab-bar {
        display: flex;
        gap: 0;
    }

    .ci-tab {
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 500;
        color: var(--muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: all 0.15s;
    }

    .ci-tab:hover { color: var(--text); }
    .ci-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

    #ci-ticket-list { min-height: 60vh; }

    .ci-ticket-item {
        padding: 11px 14px;
        border-bottom: 0.5px solid var(--border);
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }

    .ci-ticket-item:last-child { border-bottom: none; }

    .ci-ticket-priority {
        width: 3px;
        border-radius: 2px;
        flex-shrink: 0;
        align-self: stretch;
        min-height: 36px;
    }

    .ci-pri-urgent { background: var(--danger); }
    .ci-pri-high   { background: #f59e0b; }
    .ci-pri-lost   { background: #5b46a0; }
    .ci-pri-normal { background: var(--border); }

    .ci-ticket-info { flex: 1; min-width: 0; }

    .ci-ticket-top {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 3px;
    }

    .ci-ticket-subject {
        font-size: 13px;
        font-weight: 500;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
    }

    .ci-ticket-tag {
        font-size: 10px;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .ci-tag-urgent  { background: var(--danger-bg);  color: var(--danger); }
    .ci-tag-overdue { background: var(--warning-bg); color: var(--warning); }
    .ci-tag-lost    { background: #f0eefb; color: #5b46a0; }
    .ci-tag-atrisk  { background: var(--warning-bg); color: var(--warning); }
    .ci-tag-open    { background: var(--accent-bg);  color: var(--accent); }
    .ci-tag-onhold  { background: #e8f4fb; color: #2471a3; }
    .ci-tag-resolved { background: #e8f5e9; color: #2e7d32; }
    .ci-tag-topic   { background: var(--bg); color: var(--muted); border: 0.5px solid var(--border); }

    .ci-topic-chip {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 10px; border-radius: 20px; font-size: 11px; cursor: pointer;
        background: var(--surface); color: var(--muted); border: 0.5px solid var(--border);
        white-space: nowrap; transition: color 0.12s, border-color 0.12s;
    }
    .ci-topic-chip:hover { color: var(--text); border-color: var(--accent); }
    .ci-topic-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    .ci-ticket-meta {
        font-size: 11px;
        color: var(--muted);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .ci-ticket-ai {
        margin-top: 6px;
        font-size: 12px;
        color: var(--text);
        background: var(--bg);
        border-radius: 6px;
        padding: 7px 10px;
        line-height: 1.5;
        border-left: 2px solid var(--accent);
    }

    .ci-ai-label {
        font-size: 10px;
        font-weight: 600;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 3px;
    }

    .ci-loading-ai {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: var(--muted);
        font-style: italic;
    }

    .ci-spinner {
        width: 12px;
        height: 12px;
        border: 2px solid var(--border);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        flex-shrink: 0;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .ci-timeline-item {
        display: flex;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 0.5px solid var(--border);
    }

    .ci-timeline-item:last-child { border-bottom: none; }

    .ci-timeline-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-top: 4px;
        flex-shrink: 0;
    }

    @media (max-width: 900px) {
        .ci-config-grid  { grid-template-columns: 1fr 1fr; }
        .ci-metrics      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .ci-grid-3-1     { grid-template-columns: 1fr; }
        .ci-grid-2       { grid-template-columns: 1fr; }
    }

    @media (max-width: 600px) {
        .ci-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .ci-config-grid { grid-template-columns: 1fr; }
    }

    /* Sales Team staff grid */
    .st-grid { display:grid; grid-template-columns: 1fr; gap:10px; }
    @media (min-width: 640px)  { .st-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .st-grid { grid-template-columns: repeat(3, 1fr); } }

    /* Buffer Lead Time */
    .blt-th { padding:8px 12px; text-align:left; white-space:nowrap; cursor:pointer; font-size:11px; font-weight:600; color:var(--muted); border-bottom:0.5px solid var(--border); user-select:none; }
    .blt-th:hover { color:var(--text); }
    .blt-td { padding:7px 12px; border-bottom:0.5px solid var(--border); white-space:nowrap; font-size:12px; }
    .blt-td-r { text-align:right; }
    .blt-row:last-child .blt-td { border-bottom:none; }
    .bc-table .blt-th { padding-left:6px; padding-right:6px; }
    .bc-table .blt-td { padding-left:6px; padding-right:6px; }
    .blt-badge-pass, .blt-badge-fail { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:500; }
    .blt-badge-pass { background:#e8f5e9; color:#2e7d32; }
    .blt-badge-fail { background:#ffebee; color:#c62828; }
    .dark .blt-badge-pass { background:rgba(46,125,50,0.25); color:#81c784; }
    .dark .blt-badge-fail { background:rgba(198,40,40,0.25); color:#ef9a9a; }
    .blt-row-fail td { color:#c62828; }
    .dark .blt-row-fail td { color:#ef9a9a; }
    .blt-kpi-card { transition:box-shadow 0.15s; }

    /* PO Shipment */
    .pos-kpi-card { background:var(--surface); border:0.5px solid var(--border); border-radius:10px; padding:10px 18px; text-align:center; cursor:pointer; min-width:80px; transition:box-shadow 0.15s; }
    .pos-kpi-card:hover { background:var(--bg); }
    .pos-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; white-space:nowrap; }
    .pos-badge-warning  { background:#ffebee; color:#c62828; }
    .pos-badge-alert    { background:#fff3e0; color:#e65100; }
    .pos-badge-nodate   { background:var(--bg); color:var(--muted); border:0.5px solid var(--border); }
    .pos-badge-ontrack  { background:#e8f5e9; color:#2e7d32; }
    .pos-badge-completed { background:var(--bg); color:var(--muted); }
    .pos-row-warning td { background:#fff8f8; }
    .pos-row-alert   td { background:#fffbf3; }
    .pos-row-nodate  td { opacity:0.75; }
    .pos-editable:hover { background:var(--bg) !important; cursor:pointer; }
    .pos-remarks { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pos-copy-btn { opacity:0; margin-left:5px; cursor:pointer; font-size:11px; color:var(--muted); vertical-align:middle; }
    tr:hover .pos-copy-btn { opacity:1; }
    @media (hover:none) { .pos-copy-btn { opacity:0.5; } }
    .copy-icon-btn { opacity:0; margin-left:5px; cursor:pointer; font-size:11px; color:var(--muted); vertical-align:middle; }
    .card:hover .copy-icon-btn { opacity:1; }
    .copy-icon-btn.always-visible { opacity:0.6; }
    .copy-icon-btn.always-visible:hover { opacity:1; }
    @media (hover:none) { .copy-icon-btn { opacity:0.5; } }
    .dark .pos-badge-warning  { background:rgba(198,40,40,0.2); color:#ef9a9a; }
    .dark .pos-badge-alert    { background:rgba(230,81,0,0.2);  color:#ffcc80; }
    .dark .pos-badge-ontrack  { background:rgba(46,125,50,0.2); color:#a5d6a7; }
    .dark .pos-row-warning td { background:rgba(198,40,40,0.07); }
    .dark .pos-row-alert   td { background:rgba(230,81,0,0.07);  }
    /* PO Shipment mobile cards */
    .pos-card { background:var(--surface); border:0.5px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; }
    .pos-card-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; cursor:pointer; gap:8px; }
    .pos-card-head:active { background:var(--bg); }
    .pos-card-body { padding:4px 12px 10px; display:flex; flex-direction:column; gap:5px; }
    .pos-card-field { display:flex; align-items:baseline; gap:8px; font-size:12px; }
    .pos-card-lbl { color:var(--muted); font-size:10px; min-width:62px; flex-shrink:0; }
    .pos-card-val { flex:1; }
    .pos-card-val.pos-editable:hover { background:var(--bg); border-radius:3px; cursor:pointer; }
    .pos-card-detail { overflow-x:auto; padding:0 8px 8px; }
    .pos-card-warn { border-left:3px solid #e53935; }
    .pos-card-alert { border-left:3px solid #fb8c00; }
    .dark .pos-card-warn { border-left-color:#ef9a9a; }
    .dark .pos-card-alert { border-left-color:#ffcc80; }
    /* PO Shipment — Product View grouped cards */
    .pos-po-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    @media (max-width:900px) { .pos-po-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:540px) { .pos-po-grid { grid-template-columns:1fr; } }
    .pos-po-card { background:var(--surface); border:0.5px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
    .pos-po-card-hdr { padding:10px 12px; border-bottom:0.5px solid var(--border); }
    .pos-po-card-lines { padding:0 12px; flex:1; }
    .pos-po-line { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:6px 0; border-top:0.5px solid var(--border); font-size:12px; }
    .pos-po-line:first-child { border-top:none; }
    .pos-po-card.pos-row-warning { background:#fff8f8; border-color:#ef9a9a; }
    .pos-po-card.pos-row-alert   { background:#fffbf3; border-color:#ffcc80; }
    .pos-po-card.pos-row-completed { opacity:0.6; }
    .pos-po-card.pos-row-nodate   { opacity:0.75; }
    .dark .pos-po-card.pos-row-warning { background:rgba(198,40,40,0.07); border-color:rgba(198,40,40,0.4); }
    .dark .pos-po-card.pos-row-alert   { background:rgba(230,81,0,0.07);  border-color:rgba(230,81,0,0.4); }