/* CSS Reset & Variables */
:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #e0e7ff;
    --surface: #ffffff;
    --background: #f3f4f6;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --radius: 12px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --header-height: 64px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--background);
    color: var(--text-main);
    margin: 0;
    height: 100%;
    /* Iframe Safe */
    min-height: 100dvh;
    /* Ensure it fills at least the screen */
    display: flex;
    flex-direction: column;
    overscroll-behavior: none;
    /* Prevent bounce */
}

/* App Header - Sleek & Minimal */
.app-header {
    height: var(--header-height);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    box-shadow: var(--shadow-sm);
    z-index: 20;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo h1 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: -0.01em;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    font-size: 1rem;
    /* Increased from 0.9rem */
    font-weight: 700;
    /* Bolder */
    color: var(--text-main);
    padding: 0.6rem 1.2rem;
    /* Added padding */
    border: 1px solid var(--border);
    /* Made into button shape */
    border-radius: 8px;
    background: white;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
    /* Lift effect */
}

.nav-link:hover {
    color: var(--primary);
}

.nav-link.accent {
    color: #b91c1c;
    /* Darker red for contrast */
    background: #fee2e2;
    border-color: #fecaca;
    padding: 0.6rem 1.2rem;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}

.nav-link.accent:hover {
    background: #fecdd3;
}

@media (max-width: 600px) {
    .header-nav {
        display: none;
    }

    /* Hide generic links on very small screens if space needed, or stack them */
    .app-header {
        padding: 0 1rem;
    }

    .intensity-btn {
        padding: 0.5rem 0.2rem;
        font-size: 0.75rem;
    }
}

/* --- Print / PDF Export Styles --- */
#printContainer {
    display: none;
}

@media print {

    /* Hide UI Elements */
    .app-header,
    .sidebar,
    .drop-zone,
    .intensity-selector,
    #processBtn,
    .zoom-controls {
        display: none !important;
    }

    body,
    html {
        height: auto;
        overflow: visible;
        background: white;
    }

    .app-container {
        display: none;
    }

    /* Hide main app container */

    #printContainer {
        display: block;
        padding: 2cm;
        font-family: 'Inter', sans-serif;
        color: black;
    }

    .print-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2px solid #eee;
        padding-bottom: 1rem;
        margin-bottom: 2rem;
    }

    .print-logo {
        height: 60px;
        object-fit: contain;
    }

    .contact-info {
        text-align: right;
        font-size: 0.9rem;
        color: #555;
    }

    .contact-info p {
        margin: 2px 0;
    }

    .print-content {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .print-img {
        max-width: 100%;
        max-height: 400px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }

    .print-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 columns for paper efficiency */
        gap: 1rem;
    }

    /* Reuse palette item style but simplify for print */
    .palette-item {
        border: 1px solid #eee;
        page-break-inside: avoid;
        background: white !important;
        box-shadow: none;
        color: black;
    }

    .match-score {
        border: 1px solid #ccc;
        background: none !important;
        color: black !important;
    }

    .print-footer {
        margin-top: 3rem;
        padding-top: 1rem;
        border-top: 1px solid #eee;
        text-align: center;
        font-size: 0.85rem;
        color: #666;
    }

    .social-links {
        display: flex;
        gap: 2rem;
        justify-content: center;
    }
}

/* 3-Column Layout */
.workspace-grid {
    display: grid;
    grid-template-columns: 320px 1fr 300px;
    height: calc(100vh - var(--header-height));
    /* Fallback */
    height: calc(100dvh - var(--header-height));
    /* Mobile Friendly */
    overflow: hidden;
}

/* ... (rest of 3-col logic is fine, verifying split view) */

/* Fix Split View in Center Panel */
/* Fix Split View in Center Panel */
/* Fix Print Colors */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

.canvas-container-inner {
    width: 100%;
    height: 100%;
    /* Fill container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center vertically */
    overflow: hidden;
    /* Prevent scroll */
}

/* Single View Mode - Hide the Reference Panel always */
.split-view-container {
    width: 100%;
    height: auto;
    min-height: 400px;
    /* Ensure it has body */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Split View Restored */
    gap: 1.5rem;
    align-items: center;
    /* Center vertically */
    justify-items: stretch;
    /* Stretch to fill column width */
    justify-content: center;
    padding-bottom: 2rem;
}

/* Fix CSS overriding HTML hidden attribute */
/* Fix CSS overriding HTML hidden attribute & Class */
.split-view-container[hidden],
.split-view-container.hidden,
.hidden {
    display: none !important;
}

/* Style the Preview Panel */
.view-panel {
    /* Auto width based on image aspect ratio, but max-width constrained */
    width: 100%;
    height: auto;
    max-height: 70vh;
    /* Limit height strictly to viewport subset */
    max-width: 100%;

    min-width: 200px;
    min-height: 200px;

    background: white;
    padding: 1rem;
    /* Framed look */
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border);
}

.panel-label {
    /* Removed old absolute label style as we moved to header */
    display: none;
}

.canvas-stack {
    position: relative;
    /* Dimensions are controlled by the main canvas size */
    display: block;
    /* Flex can mess up absolute children sizing sometimes */
    line-height: 0;
    /* Remove vertical gap */
}

#mainCanvas,
#refCanvas {
    display: block;
    max-height: 75vh;
    max-width: 100%;
    width: auto;
    /* Maintain aspect ratio */
    height: auto;
    object-fit: contain;
}

/* Clean Header above panel */
.preview-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    width: 100%;
    /* Force full width */
    /* Ensure it fills the grid cell for centering */
}

.panel-header-clean {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

#overlayCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    /* Allow hover */
    display: block;
    /* Ensure visibility */
    /* Experimental: Blur everything BEHIND the non-transparent parts of this canvas?
       No, backdrop-filter blurs behind the ELEMENT.
       If overlay is transparent, it blurs behind transparent parts?
       Actually, standard backdrop-filter blurs the background BEHIND the element's bounding box.
       It does NOT respect the alpha channel of the element's content (the paint) typically,
       BUT modern browsers are getting better.
       Let's try it. If it blurs the whole image (even the cut-out), we remove it.
       Wait, if we use mask-image it works.
       For now, let's skip the blur to be safe and stick to the High Contrast Dark Dimmer.
    */
    /* backdrop-filter: blur(2px) grayscale(0.5); */
}

/* Common Panel Styles */
.left-panel,
.right-panel {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 10;
}

.right-panel {
    border-right: none;
    border-left: 1px solid var(--border);
}

.center-panel {
    background-color: #f9fafb;
    position: relative;
    display: flex;
    align-items: flex-start;
    /* Align top so it doesn't center vertically weirdly */
    justify-content: center;
    padding: 2rem;
    overflow-y: auto;
    /* Allow center to scroll if images are huge */
}

/* Settings Panel (Right) */
.settings-panel {
    padding: 1.5rem;
}

/* Palette Panel (Left) */
.palette-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

.palette-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: white;
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.palette-actions {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: #fcfcfc;
}

.palette-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Pagination Limit (~8 items visible then scroll) */
/* The layout above naturally does this by constraining .left-panel height to viewport */
/* Nothing special needed, flex: 1 takes care of it. */

/* Responsive Layout */
@media (max-width: 1200px) {
    .workspace-grid {
        grid-template-columns: 280px 1fr 280px;
    }
}

@media (max-width: 992px) {

    /* Stacked for Tablet/Mobile */
    .workspace-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow-y: auto;
    }

    .left-panel,
    .right-panel,
    .center-panel {
        width: 100%;
        height: auto;
        border: none;
        overflow: visible;
    }

    /* Order: Image -> Settings -> Palette */
    .center-panel {
        order: 1;
        min-height: 400px;
        padding: 1rem;
    }

    .right-panel {
        order: 2;
        border-top: 1px solid var(--border);
    }

    .left-panel {
        order: 3;
        border-top: 1px solid var(--border);
        height: 500px;
        /* Fixed height for scrolling palette on mobile */
    }

    .settings-panel {
        padding: 1rem;
    }
}

/* Fix Split View in Center Panel */
.canvas-container-inner {
    width: 100%;
    /* max-width removed to allow full dual view */
    display: flex;
    /* max-width removed to allow full dual view */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center content vertically */
    height: 100%;
    /* Ensure full height availability */
}

.split-view-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Stack Vertically */
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.display-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: white;
}

@media (max-width: 768px) {
    .split-view-container {
        grid-template-columns: 1fr;
        /* Single column on mobile */
    }

    /* We allow stacking on mobile now */
}

/* Form Elements */
.form-group {
    margin-bottom: 2rem;
    /* Increased spacing */
}

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #374151;
    letter-spacing: 0.01em;
}

/* Premium Select */
select {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 2.5rem;
    /* Space for custom arrow */
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    background-color: white;
    font-size: 0.95rem;
    color: var(--text-main);
    transition: all 0.2s;
    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25em;
}

select:hover {
    border-color: var(--primary);
    background-color: #fcfcfc;
}

select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Intensity Selector (Segmented Control) */
.intensity-selector {
    display: flex;
    background: #f3f4f6;
    padding: 4px;
    border-radius: var(--radius);
    gap: 2px;
}

.intensity-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.intensity-btn.active {
    background: white;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* Switch Toggle */
.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch-input {
    appearance: none;
    width: 40px;
    height: 22px;
    background: #e5e7eb;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.switch-input::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: var(--shadow-sm);
}

.switch-input:checked {
    background: var(--primary);
}

.switch-input:checked::after {
    transform: translateX(18px);
}

.switch-label {
    margin: 0;
    font-weight: 400;
    color: var(--text-main);
}

/* Action Button */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
    color: white;
    border: none;
    padding: 0.875rem;
    border-radius: var(--radius);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: filter 0.2s, transform 0.1s;
    box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3);
}

.btn-primary:active {
    transform: translateY(1px);
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-primary-soft {
    background: var(--primary-light);
    color: var(--primary);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary-soft:hover {
    background: #c7d2fe;
}

.full-width {
    width: 100%;
}

/* Settings & Action Improvements */
.form-actions {
    margin-top: 2rem;
}

#processBtn {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    font-size: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3);
}

#processBtn:hover {
    box-shadow: 0 6px 15px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
}

.palette-actions {
    padding: 1rem 1.5rem;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

#exportBtn {
    background: white;
    border: 1px solid var(--border);
    color: var(--text-main);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

#exportBtn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #fdfeff;
}

/* Palette List */
.palette-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.palette-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
    cursor: pointer;
}

.palette-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
}

.swatch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    margin-right: 1rem;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    /* Subtle border */
}

.thread-info {
    display: flex;
    flex-direction: column;
}

.thread-code {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-main);
}

.thread-name {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.match-score {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f3f4f6;
}

.score-good {
    color: #059669;
    background: #ecfdf5;
}

.score-ok {
    color: #d97706;
    background: #fffbeb;
}

.score-bad {
    color: #dc2626;
    background: #fef2f2;
}

.active-ring {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
    background-color: #f0f9ff;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Clean Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: #f9fafb;
    border-radius: var(--radius);
    border: 2px dashed #e5e7eb;
}

@media (max-width: 900px) {
    .workspace {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        order: 2;
        height: 50vh;
    }

    .canvas-area {
        height: 50vh;
    }
}