/* Print-preview chrome — moved from WorkOrderPreview.razor's inline <style>
   (CSS-unification Phase 1, batch 3). Only renders in the Innovint-shell inline
   preview (the Print Workstation has its own PrintToolbar and never mounts this).
   Two changes from the original inline block:
     1. Dark-mode rules converted from :global(.dark) X -> .dark X. :global() is a
        Blazor CSS-isolation construct that is invalid in an inline <style> / plain
        global .css (the browser dropped them), so the toolbar chrome did NOT respond
        to dark mode. Converting honors the original author's intent and matches the
        convention used by every other global file (e.g. reorder-panel.css). Light
        mode is unchanged.
     2. The two status colors that live inside .preview-content ([data-force-light]:
        .preview-error / .retry-btn) use var(--pp-status-danger), which force-light
        pins to #dc2626 (zero-change). Toolbar-button accents stay literal — they sit
        outside force-light and have hand-tuned light+dark shades that don't all map to
        the status tokens.
   All selectors are scoped under .preview-container (the component root). */

.preview-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fafafa;
}

/* Keep container border dark in dark mode, but content stays light */
.dark .preview-container {
    background: #262626;
}

/* Toolbar */
.preview-container .preview-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: white;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.dark .preview-container .preview-toolbar {
    background: #1f1f1f;
    border-color: #374151;
}

.preview-container .toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-container .preview-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

.dark .preview-container .preview-title {
    color: #e5e7eb;
}

.preview-container .toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preview-container .toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 5px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.dark .preview-container .toolbar-btn {
    background: #262626;
    border-color: #404040;
    color: #e5e7eb;
}

.preview-container .toolbar-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.dark .preview-container .toolbar-btn:hover {
    background: #333;
    border-color: #525252;
}

.preview-container .toolbar-btn-labels {
    border-color: #a78bfa;
    color: #7c3aed;
}

.dark .preview-container .toolbar-btn-labels {
    border-color: #7c3aed;
    color: #a78bfa;
}

.preview-container .toolbar-btn-labels:hover {
    background: #f5f3ff;
    border-color: #7c3aed;
}

.dark .preview-container .toolbar-btn-labels:hover {
    background: rgba(124, 58, 237, 0.1);
}

.preview-container .toolbar-btn-newtab {
    border-color: #60a5fa;
    color: #2563eb;
}

.dark .preview-container .toolbar-btn-newtab {
    border-color: #3b82f6;
    color: #60a5fa;
}

.preview-container .toolbar-btn-newtab:hover {
    background: #eff6ff;
    border-color: #3b82f6;
}

.dark .preview-container .toolbar-btn-newtab:hover {
    background: rgba(59, 130, 246, 0.1);
}

.preview-container .toolbar-btn-landscape {
    border-color: #f59e0b;
    color: #d97706;
    background: #fefce8;
}

.dark .preview-container .toolbar-btn-landscape {
    border-color: #d97706;
    color: #fbbf24;
    background: rgba(217, 119, 6, 0.1);
}

.preview-container .toolbar-btn-landscape:hover {
    background: #fef3c7;
    border-color: #d97706;
}

.dark .preview-container .toolbar-btn-landscape:hover {
    background: rgba(217, 119, 6, 0.2);
}

.preview-container .toolbar-btn-pdf {
    border-color: #10b981;
    color: #059669;
}

.dark .preview-container .toolbar-btn-pdf {
    border-color: #059669;
    color: #34d399;
}

.preview-container .toolbar-btn-pdf:hover {
    background: #ecfdf5;
    border-color: #059669;
}

.dark .preview-container .toolbar-btn-pdf:hover {
    background: rgba(5, 150, 105, 0.1);
}

/* Content - Force light mode for print preview (paper should be white) */
.preview-container .preview-content {
    flex: 1;
    /* overflow:auto (not just -y) so the true-size 816px sheet scrolls instead of
       clipping in a narrow detail panel. This route has no sheet-scale pane id, so
       the sheet renders at true size (--sheet-scale unset = 1). */
    overflow: auto;
    padding: 0;
    background: #f3f4f6;
    color-scheme: light;
}

.preview-container .preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 0.75rem;
    color: #6b7280;
}

.preview-container .spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.preview-container .preview-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.75rem;
    color: var(--pp-status-danger);
    text-align: center;
}

.preview-container .preview-deleted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.75rem;
    color: #9ca3af;
    text-align: center;
    font-style: italic;
}

.preview-container .retry-btn {
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 5px;
    color: var(--pp-status-danger);
    cursor: pointer;
}

.preview-container .retry-btn:hover {
    background: #fee2e2;
}

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

/* View toggle (Detail / Cellar Form) */
.preview-container .view-toggle-group {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    overflow: hidden;
}

.dark .preview-container .view-toggle-group {
    border-color: #404040;
}

.preview-container .vtg-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    background: white;
    color: #6b7280;
    transition: background 0.15s, color 0.15s;
}

.dark .preview-container .vtg-btn {
    background: #262626;
    color: #9ca3af;
}

.preview-container .vtg-btn:not(:last-child) {
    border-right: 1px solid #d1d5db;
}

.dark .preview-container .vtg-btn:not(:last-child) {
    border-right-color: #404040;
}

.preview-container .vtg-btn:hover:not(.vtg-btn--active) {
    background: #f3f4f6;
}

.dark .preview-container .vtg-btn:hover:not(.vtg-btn--active) {
    background: #333;
}

.preview-container .vtg-btn--active {
    background: #3730a3;
    color: #fff;
}