/* Custom styling for the redesigned halftone generator */

/* Override Bootstrap dark theme for light interface */
body {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

/* Left sidebar styling */
.col-md-3.bg-white {
    background-color: #ffffff !important;
    border-right: 1px solid #e9ecef !important;
}

/* Upload area styling */
.upload-box {
    border-color: #d1d5db !important;
    background-color: #fafafa;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-box:hover {
    background-color: #f0f0f0;
    border-color: #6c757d !important;
}

.upload-box.dragover {
    background-color: #e3f2fd;
    border-color: #2196f3 !important;
}

/* Dither options styling */
.dither-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.dither-option {
    width: 100%;
    height: 65px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: #fff;
    padding: 3px;
}

.dither-option:hover {
    border-color: #6c757d;
}

.dither-option.active {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

.dither-preview {
    width: 30px;
    height: 30px;
    background: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) 50% / 8px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
}

.dither-option[data-algorithm="floyd"] .dither-preview {
    background: radial-gradient(circle at 25% 25%, #000 1px, transparent 1px),
                radial-gradient(circle at 75% 75%, #000 1px, transparent 1px);
    background-size: 8px 8px;
}

.dither-option[data-algorithm="dots_plus_square"] .dither-preview {
    background: radial-gradient(circle, #000 30%, transparent 30%);
    background-size: 10px 10px;
}

.dither-option[data-algorithm="x_pattern"] .dither-preview {
    background: 
        linear-gradient(45deg, transparent 40%, #000 40%, #000 60%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, #000 40%, #000 60%, transparent 60%);
    background-size: 8px 8px;
}

.dither-option[data-algorithm="o_stroke"] .dither-preview {
    background: radial-gradient(circle, transparent 30%, #000 30%, #000 50%, transparent 50%);
    background-size: 10px 10px;
}

.dither-option[data-algorithm="o_filled"] .dither-preview {
    background: radial-gradient(circle, #000 40%, transparent 40%);
    background-size: 10px 10px;
}

.dither-option[data-algorithm="letter_a"] .dither-preview {
    background: 
        /* Left diagonal of A */
        linear-gradient(25deg, transparent 45%, #000 45%, #000 55%, transparent 55%),
        /* Right diagonal of A */
        linear-gradient(-25deg, transparent 45%, #000 45%, #000 55%, transparent 55%),
        /* Horizontal crossbar of A */
        linear-gradient(0deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
    background-size: 12px 12px, 12px 12px, 8px 4px;
    background-position: 0 0, 0 0, 2px 6px;
}

.dither-label {
    font-size: 9px;
    color: #6c757d;
    text-align: center;
    line-height: 1.1;
    margin-top: 2px;
}

/* Form styling */
.form-range {
    accent-color: #0d6efd;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* Text colors for light theme */
.text-muted {
    color: #6c757d !important;
}

h6, .fw-bold {
    color: #495057 !important;
}

.fw-medium {
    color: #212529 !important;
}

/* Preview area styling */
.col-md-9.bg-light {
    background-color: #f8f9fa !important;
}

.upload-placeholder {
    min-width: 400px;
    min-height: 300px;
    border-color: #d1d5db !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-placeholder:hover {
    border-color: #6c757d !important;
    background-color: #fafafa !important;
}

#preview-img {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Progress bar styling */
.progress {
    background-color: #e9ecef;
}

.progress-bar {
    background-color: #0d6efd;
}

/* Button styling */
.btn-success {
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}

.btn-link {
    color: #6c757d !important;
}

.btn-link:hover {
    color: #495057 !important;
}

/* Badge styling */
.badge.bg-secondary {
    background-color: #6c757d !important;
    min-width: 30px;
}

/* Select styling */
.form-select {
    background-color: #fff;
    border-color: #ced4da;
    color: #495057;
}

.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .col-md-3 {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        z-index: 1050;
        transition: left 0.3s ease;
    }
    
    .col-md-9 {
        margin-left: 0;
        width: 100%;
    }
    
    .upload-placeholder {
        min-width: 300px;
        min-height: 200px;
    }
}