/* ===== PKB Dashboard Theme Scoped for Konverter ===== */
.konverter-scope {
    --kv-primary: #16a34a;
    --kv-primary-hover: #15803d;
    --kv-bg: #f8fafc;
    --kv-card-bg: #ffffff;
    --kv-border: #e2e8f0;
    --kv-text-main: #1e293b;
    --kv-text-muted: #64748b;
    --kv-radius: 0.75rem;
    
    font-family: inherit;
    color: var(--kv-text-main);
}

.konverter-scope * { box-sizing: border-box; }

/* ===== Layout & Containers ===== */
.konverter-scope .kv-container { width: 100%; margin: 0 auto; }

/* ===== Cards ===== */
.konverter-scope .card {
    background: var(--kv-card-bg);
    border: 1px solid var(--kv-border);
    border-radius: var(--kv-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.konverter-scope .card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.konverter-scope .step-badge {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    border: 1px solid #e2e8f0;
}

.konverter-scope .step-badge.success {
    background: #ecfdf5;
    color: #059669;
    border-color: #a7f3d0;
}

.konverter-scope h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.konverter-scope p {
    font-size: 0.81rem;
    color: var(--kv-text-muted);
    margin: 0.125rem 0 0;
}

/* ===== Upload Zone ===== */
.konverter-scope .upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: var(--kv-radius);
    padding: 3.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.konverter-scope .upload-zone:hover {
    border-color: var(--kv-primary);
    background: #f0fdf4;
    transform: scale(1.005);
}

.konverter-scope .upload-icon svg {
    width: 3.5rem;
    height: 3.5rem;
    color: #94a3b8;
    margin: 0 auto 1.25rem;
}

.konverter-scope .upload-text { font-weight: 700; color: #334155; font-size: 1rem; }
.konverter-scope .upload-subtext { color: #64748b; font-size: 0.875rem; margin-top: 0.25rem; }

/* File Info */
.konverter-scope .file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    padding: 1.25rem;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.konverter-scope .file-icon { font-size: 2rem; }
.konverter-scope .file-name { font-weight: 700; color: #166534; font-size: 0.93rem; }
.konverter-scope .file-meta { font-size: 0.75rem; color: #15803d; }
.konverter-scope .btn-remove { 
    background: #fee2e2; color: #dc2626; border: none; 
    width: 2rem; height: 2rem; border-radius: 50%; 
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.konverter-scope .btn-remove:hover { background: #fecaca; transform: rotate(90deg); }

/* ===== Config & Forms ===== */
.konverter-scope .config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.konverter-scope .config-item label {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.5rem;
}

.konverter-scope select, .konverter-scope input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: #f8fafc;
    transition: all 0.2s;
    outline: none;
}

.konverter-scope select:focus, .konverter-scope input:focus {
    border-color: var(--kv-primary);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.1);
}

/* Tables */
.konverter-scope .table-wrap {
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    background: white;
}

.konverter-scope table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.81rem;
    text-align: left;
}

.konverter-scope th:last-child,
.konverter-scope td:last-child {
    min-width: 100px;
    text-align: center;
}

.konverter-scope th {
    background: #f8fafc;
    padding: 0.875rem 1rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
}

.konverter-scope td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.konverter-scope tr:hover td {
    background: #f8fafc;
}

.konverter-scope .old-val { color: #b45309; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
.konverter-scope .new-val { color: #16a34a; font-weight: 700; }
.konverter-scope .arrow-col { color: #94a3b8; font-weight: 900; }

/* ===== Stats ===== */
.konverter-scope .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.konverter-scope .stat-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 1.25rem;
    border-radius: 0.75rem;
    text-align: center;
}

.konverter-scope .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.konverter-scope .stat-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
}

.konverter-scope .stat-card.green .stat-value { color: #16a34a; }
.konverter-scope .stat-card.orange .stat-value { color: #ea580c; }

/* ===== Buttons ===== */
.konverter-scope .btn {
    padding: 0.625rem 1.25rem;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.konverter-scope .btn-primary {
    background: var(--kv-primary);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(22, 163, 74, 0.2);
}

.konverter-scope .btn-primary:hover { background: var(--kv-primary-hover); transform: translateY(-1px); }

.konverter-scope .btn-success {
    background: #059669;
    color: white;
}

.konverter-scope .btn-outline {
    background: white;
    border-color: #e2e8f0;
    color: #475569;
}

.konverter-scope .btn-outline:hover { background: #f8fafc; border-color: #cbd5e1; }

/* Preview Header */
.konverter-scope .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.konverter-scope .preview-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.konverter-scope .record-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

/* Corrections */
.konverter-scope .corrections-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    padding: 1rem;
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 0.75rem;
    margin-top: 1rem;
}

.konverter-scope .correction-item {
    font-size: 0.75rem;
    background: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #fef08a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.konverter-scope .c-sheet { margin-left: auto; color: #a1a1aa; font-size: 0.625rem; }

/* Editable */
.konverter-scope .editable-cell {
    background: #fffbeb;
    border-bottom: 2px solid transparent;
    cursor: text;
}

.konverter-scope .editable-cell:focus {
    background: #fef3c7;
    border-bottom-color: #f59e0b;
    outline: none;
}

/* Registration Button */
.konverter-scope .btn-kv-register {
    background: #2563eb; /* Blue 600 */
    color: white;
    border: none;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.konverter-scope .btn-kv-register:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

.konverter-scope .btn-kv-register:active {
    transform: translateY(0);
}

/* Individual Check Button */
.konverter-scope .btn-kv-check {
    background: #10b981; /* Emerald 500 */
    color: white;
    border: none;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.konverter-scope .btn-kv-check:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* Toast */
.konverter-scope .toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.konverter-scope .toast {
    padding: 0.875rem 1.25rem;
    border-radius: 0.625rem;
    background: #1e293b;
    color: white;
    font-weight: 600;
    font-size: 0.81rem;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    animation: kvSlideIn 0.3s ease-out;
}

.konverter-scope .toast.success { background: #059669; }
.konverter-scope .toast.error { background: #dc2626; }

@keyframes kvSlideIn {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px) {
    .konverter-scope .preview-header { flex-direction: column; align-items: flex-start; }
    .konverter-scope .export-row .btn { width: 100%; }
}