/* ============================================
   DataClean — Project Styles
   Uses shared Sidequest Labs theme (css/theme.css)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
@import url('theme.css');

/* === Project-specific Styles === */

.main { flex: 1; display: flex; flex-direction: column; padding: 2rem; max-width: 1400px; width: 100%; margin: 0 auto; }

/* Upload Panel */
.upload-panel { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem 0; }
.upload-area {
    width: 100%; max-width: 640px; padding: 3rem 2rem;
    border: 2px dashed var(--border-color); border-radius: var(--radius-lg);
    text-align: center; cursor: pointer; transition: all var(--transition);
}
.upload-area:hover, .upload-area.drag-over { border-color: var(--accent); background: var(--accent-light); }
.upload-icon { font-size: 3rem; margin-bottom: 1rem; }
.upload-area h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.upload-link { color: var(--accent); cursor: pointer; text-decoration: underline; }
.upload-examples { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.upload-examples p { font-size: 0.8125rem; color: var(--text-muted); }

/* Paste Area */
.paste-area { width: 100%; max-width: 640px; }
.paste-label { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.paste-area textarea {
    width: 100%; padding: 0.75rem 1rem; background: var(--bg-secondary);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); font-family: monospace; font-size: 0.8125rem;
    resize: vertical; transition: border-color var(--transition);
}
.paste-area textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }

/* Sample Data */
.sample-data { text-align: center; }
.sample-data p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.75rem; }
.sample-buttons { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.btn-sample {
    padding: 0.5rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.8125rem;
    cursor: pointer; transition: all var(--transition);
}
.btn-sample:hover { background: var(--accent-light); border-color: var(--accent); transform: translateY(-1px); }

/* Issues Banner */
.issues-banner {
    background: var(--bg-secondary); border: 1px solid var(--warning);
    border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem;
}
.issues-header { display: flex; align-items: center; gap: 0.75rem; }
.issues-icon { font-size: 1.25rem; }
.issues-list { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.issue-tag {
    padding: 0.25rem 0.75rem; background: var(--accent-light); border-radius: 1rem;
    font-size: 0.75rem; color: var(--accent); font-weight: 500;
}

/* Controls Bar */
.controls-bar { margin-bottom: 1rem; }

/* Data Table with Issue Highlighting */
.data-table .cell-issue { background: #fef2f2; color: #991b1b; }
[data-theme="dark"] .data-table .cell-issue { background: #450a0a; color: #fca5a5; }
.data-table .cell-fixed { background: #f0fdf4; color: #166534; }
[data-theme="dark"] .data-table .cell-fixed { background: #14532d; color: #86efac; }

/* Quality Report */
.quality-report {
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: 1rem; background: var(--bg-secondary);
}
.quality-report h3 { font-size: 0.875rem; margin-bottom: 0.75rem; }
.quality-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.quality-stat {
    padding: 0.75rem; background: var(--bg-primary); border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); text-align: center;
}
.quality-stat .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.quality-stat .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Column Operations Toolbar */
.columns-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
    margin-bottom: 1rem; flex-wrap: wrap;
}
.columns-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); margin-right: 0.25rem; }
.btn-toolbar {
    padding: 0.35rem 0.75rem; background: var(--bg-primary);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-primary); font-size: 0.75rem; font-weight: 500;
    cursor: pointer; transition: all var(--transition);
}
.btn-toolbar:hover { background: var(--accent-light); border-color: var(--accent); }
.btn-toolbar-danger:hover { background: #fee2e2; border-color: var(--danger); }
[data-theme="dark"] .btn-toolbar-danger:hover { background: #450a0a; }

/* Sortable Column Headers */
.data-table th { cursor: pointer; user-select: none; }
.data-table th:hover { background: var(--bg-hover); }
.data-table th.selected { background: var(--accent-light); color: var(--accent); }
.data-table th .col-type {
    display: inline-block; font-size: 0.625rem; padding: 0.1rem 0.4rem;
    margin-left: 0.4rem; border-radius: 0.25rem;
    background: var(--bg-secondary); color: var(--text-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle;
}
.data-table th .col-blank-count {
    display: inline-block; font-size: 0.625rem; padding: 0.1rem 0.35rem;
    margin-left: 0.25rem; border-radius: 0.25rem;
    background: #fef3c7; color: #92400e; font-weight: 600;
}
[data-theme="dark"] .data-table th .col-blank-count { background: #78350f; color: #fbbf24; }
.data-table th .sort-indicator { margin-left: 0.25rem; opacity: 0.7; }
.data-table-section.hidden { display: none; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
}
.modal {
    background: var(--bg-primary); color: var(--text-primary);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 480px; max-height: 90vh; overflow: auto;
    display: flex; flex-direction: column;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { font-size: 1rem; font-weight: 600; }
.modal-body { padding: 1.25rem; }
.modal-body label { display: block; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--text-secondary); }
.modal-body input[type="text"], .modal-body select {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); background: var(--bg-secondary);
    color: var(--text-primary); font-size: 0.875rem; margin-bottom: 1rem;
}
.modal-body input[type="text"]:focus, .modal-body select:focus { outline: none; border-color: var(--accent); }
.modal-body .form-row { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.modal-body .form-row > * { flex: 1; }
.modal-body .checkbox-list {
    max-height: 200px; overflow: auto; padding: 0.5rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-secondary);
}
.modal-body .checkbox-list label {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem;
    font-weight: 400; cursor: pointer; margin-bottom: 0;
}
.modal-body .checkbox-list label:hover { background: var(--bg-hover); border-radius: 4px; }
.modal-footer {
    padding: 0.75rem 1.25rem; border-top: 1px solid var(--border-color);
    display: flex; justify-content: flex-end; gap: 0.5rem;
}
.modal-body .help { font-size: 0.75rem; color: var(--text-muted); margin-top: -0.5rem; margin-bottom: 1rem; }

/* Type Badges */
.type-badge {
    display: inline-block; font-size: 0.6875rem; padding: 0.15rem 0.5rem;
    border-radius: 0.25rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; margin-top: 0.25rem;
}
.type-text { background: #dbeafe; color: #1e40af; }
.type-number { background: #dcfce7; color: #166534; }
.type-date { background: #fef3c7; color: #92400e; }
.type-boolean { background: #fce7f3; color: #9f1239; }
.type-empty { background: var(--bg-tertiary); color: var(--text-muted); }
[data-theme="dark"] .type-text { background: #1e3a8a; color: #bfdbfe; }
[data-theme="dark"] .type-number { background: #14532d; color: #86efac; }
[data-theme="dark"] .type-date { background: #78350f; color: #fde68a; }
[data-theme="dark"] .type-boolean { background: #831843; color: #fbcfe8; }

/* Toast */
.toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--text-primary); color: var(--bg-primary);
    padding: 0.75rem 1.5rem; border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); z-index: 2000;
    font-size: 0.875rem; opacity: 0; transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* DataClean-specific responsive */
@media (max-width: 768px) {
    .columns-bar { padding: 0.5rem; }
    .btn-toolbar { font-size: 0.6875rem; padding: 0.3rem 0.5rem; }
    .modal { max-width: 100%; }
}