/* Styles only the classic package page uses (Components/Classic, #1596): the blocks
   the OE-layout rework removed from evie.css. Delete this file with that folder. */

/* ---------- Split Viewer ---------- */

.split-viewer {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.split-viewer-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-viewer-pane:first-child {
    border-right: 1px solid var(--evie-border);
}

.split-viewer-label {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-muted);
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
}

.split-viewer-content {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Right-pane per-document tabs (packing slips + PO). Sits where the pane label
   is on the left, so the two panes stay aligned. */
.split-viewer-tabs {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
    overflow-x: auto;
}

.split-viewer-tab {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--evie-text-muted);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.split-viewer-tab:hover {
    color: var(--evie-text);
}

.split-viewer-tab.active {
    color: var(--evie-primary);
    background-color: var(--evie-bg);
}

/* ---------- Shared Toolbar ---------- */

.shared-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--evie-surface);
    border-bottom: 1px solid var(--evie-border);
}

.shared-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--evie-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    font-family: var(--font-sans);
}

.shared-toolbar-btn:hover {
    background-color: var(--evie-surface-hover);
    color: var(--evie-text);
}

.shared-toolbar-btn.active {
    background-color: var(--evie-primary);
    color: white;
}

.shared-toolbar-divider {
    width: 1px;
    height: 1.25rem;
    background-color: var(--evie-border);
    margin: 0 0.25rem;
}

/* ---------- Tabbed Viewer (Mobile) ---------- */

.tabbed-viewer-tabs {
    display: flex;
    border-bottom: 1px solid var(--evie-border);
}

.tabbed-viewer-tab {
    flex: 1;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    background: none;
    color: var(--evie-text-muted);
    border-bottom: 2px solid transparent;
}

.tabbed-viewer-tab.active {
    color: var(--evie-primary);
    font-weight: 600;
    border-bottom-color: var(--evie-primary);
    background-color: var(--evie-surface);
}

/* Responsive: split on desktop, tabs on mobile */
@media (min-width: 1024px) {
    .split-viewer-desktop { display: flex; }
    .tabbed-viewer-mobile { display: none !important; }
}

@media (max-width: 1023px) {
    .split-viewer-desktop { display: none !important; }
    .tabbed-viewer-mobile { display: flex !important; }
}

.packing-slip-card,
.po-card {
    padding-left: 0.625rem;
    background-color: var(--evie-bg);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
}

.packing-slip-card-title,
.po-card-title {
    font-weight: 500;
    color: var(--evie-text);
}

.packing-slip-card-vendor,
.packing-slip-card-date {
    font-size: 0.75rem;
    color: var(--evie-text-muted);
}

/* ERP-link state beside the PO number ("ERP-linked" / "Not found in ERP" / "From ERP"). */
.po-erp-tag {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--evie-text-muted);
    margin-left: 0.375rem;
}

.po-card-line {
    font-size: 0.75rem;
    color: var(--evie-text-muted);
}

.match-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.match-status-complete {
    background-color: var(--evie-verified-muted);
    color: var(--evie-verified);
}

.match-status-partial {
    background-color: var(--evie-warning-muted);
    color: var(--evie-warning);
}

.workflow-stamp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-sans);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.1s;
}

.workflow-stamp-btn:hover:not(:disabled) {
    transform: scale(1.02);
}

.workflow-stamp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.workflow-stamp-btn.verify {
    background-color: var(--evie-verified);
    color: white;
}

.workflow-stamp-btn.approve {
    background-color: var(--evie-primary);
    color: white;
}

.workflow-status-label {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
}

.workflow-status-label.ready {
    background-color: var(--evie-warning-muted);
    color: var(--evie-warning);
}

.workflow-status-label.entered {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--evie-text-muted);
}

/* Epicor Receiving section: compact read-only supplementary table. */
.receiving-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.receiving-table th {
    text-align: left; font-weight: 500; color: var(--evie-text-muted);
    padding: 0.125rem 0.375rem 0.25rem 0; border-bottom: 1px solid var(--evie-border);
}
.receiving-table td { padding: 0.25rem 0.375rem 0.25rem 0; border-bottom: 1px solid var(--evie-border); }
.receiving-table .text-right { text-align: right; }

/* Receiving grouped by pack slip: one collapsible summary row per slip. */
.recv-group { border-bottom: 1px solid var(--evie-border); }
.recv-group:last-child { border-bottom: none; }
.recv-group-head {
    display: flex; align-items: center; gap: 0.375rem;
    width: 100%; padding: 0.3rem 0;
    background: none; border: none; cursor: pointer;
    font-size: 0.75rem; color: var(--evie-text); text-align: left;
}
.recv-group-head:hover { color: var(--evie-accent); }
.recv-group-chev { width: 0.8rem; color: var(--evie-text-dim); }
.recv-group-date { margin-left: auto; }
.recv-group-amt { min-width: 4rem; text-align: right; }
.recv-group .receiving-table { margin: 0 0 0.375rem 1.15rem; width: calc(100% - 1.15rem); }
.recv-group .receiving-table tr:last-child td { border-bottom: none; }

/* Note under the PO card when an Epicor PO is (also) imported. */
.po-erp-note { margin: 0.375rem 0 0; font-size: 0.8rem; }

.po-erp-fail { margin: 0.375rem 0 0; font-size: 0.8rem; color: var(--evie-coral); }
/* Section header with an inline action (e.g. "Refresh from Epicor"). */
.pkg-header-row { display: flex; align-items: center; justify-content: space-between; }